Use separate annotation css

src/lib/components/ColorCard.svelte

@@ -6,10 +6,12 @@ TODO:
 -->
 <script lang="ts">
     import { base } from '$app/paths';
-    import { refs } from '$lib/data/stores';
+    import config from '$lib/data/config';
+    import { direction, refs } from '$lib/data/stores';
     import CardMenu from './CardMenu.svelte';
 
     export let docSet = '';
+    export let collection = '';
     export let book = '';
     export let chapter = '';
     export let reference = '';
@@ -18,12 +20,33 @@ TODO:
     export let verse = '';
     export let actions = [''];
     export let penColor = 1;
+    const bc = config.bookCollections.find((x) => x.id === collection);
+    const textDirection = bc.style.textDirection.toLowerCase();
+    $: justifyStart =
+        ($direction === 'ltr' && textDirection === 'ltr') ||
+        ($direction === 'rtl' && textDirection === 'rtl');
+    $: justifyEnd = $direction === 'rtl' && textDirection === 'ltr';
+
+    function annotationStyles(style: string) {
+        let styles = style;
+        if (collection) {
+            styles = styles + ` ${style}-bc${collection}`;
+            if (book) {
+                styles = styles + ` ${style}-bc${collection}-bk${book}`;
+            }
+        }
+        return styles;
+    }
 </script>
 
 <div class="annotation-item-block dy-card">
     <div class="color-card">
         <div class="annotation-item-color {'hlp' + penColor.toString()} self-center"></div>
-        <div class="annotation-item-reference justify-self-start self-center">
+        <div
+            class="{annotationStyles('annotation-item-reference')} self-center"
+            class:justify-self-end={justifyEnd}
+            class:justify-self-start={justifyStart}
+        >
             <a
                 style="text-decoration:none;"
                 href="{base}/"
@@ -33,7 +56,11 @@ TODO:
             </a>
         </div>
         <div class="self-center justify-self-end"><CardMenu on:menuaction {actions} /></div>
-        <div class="annotation-item-text col-start-2 col-end-3">
+        <div
+            class="{annotationStyles('annotation-item-text')} col-start-2 col-end-3"
+            class:justify-self-end={justifyEnd}
+            class:justify-self-start={justifyStart}
+        >
             <a
                 style="text-decoration:none;"
                 href="{base}/"

src/lib/components/IconCard.svelte

@@ -22,8 +22,22 @@ TODO:
     export let src = '';
     export let alt = '';
     const bc = config.bookCollections.find((x) => x.id === collection);
-    const textDirection = bc.style.textDirection;
-    $: justifyEnd = textDirection.toLowerCase() === 'rtl' && $direction === 'ltr';
+    const textDirection = bc.style.textDirection.toLowerCase();
+    $: justifyStart =
+        ($direction === 'ltr' && textDirection === 'ltr') ||
+        ($direction === 'rtl' && textDirection === 'rtl');
+    $: justifyEnd = $direction === 'rtl' && textDirection === 'ltr';
+
+    function annotationStyles(style: string) {
+        let styles = style;
+        if (collection) {
+            styles = styles + ` ${style}-bc${collection}`;
+            if (book) {
+                styles = styles + ` ${style}-bc${collection}-bk${book}`;
+            }
+        }
+        return styles;
+    }
 </script>
 
 <div class="annotation-item-block dy-card">
@@ -36,8 +50,9 @@ TODO:
             {/if}
         </div>
         <div
-            class="annotation-item-reference justify-self-start self-center"
+            class="{annotationStyles('annotation-item-reference')} self-center"
             class:justify-self-end={justifyEnd}
+            class:justify-self-start={justifyStart}
         >
             <a
                 style="text-decoration:none;"
@@ -50,8 +65,9 @@ TODO:
         <div class="self-center justify-self-end"><CardMenu on:menuaction {actions} /></div>
 
         <div
-            class="annotation-item-text col-start-2 col-end-3 justify-self-start"
+            class="{annotationStyles('annotation-item-text')} col-start-2 col-end-3"
             class:justify-self-end={justifyEnd}
+            class:justify-self-start={justifyStart}
         >
             <a
                 style="text-decoration:none;"

src/lib/data/bookmarks.ts

@@ -118,7 +118,7 @@ export async function getBookmarks(): Promise<BookmarkItem[]> {
 
 function notifyUpdated() {
     bookmarksLastUpdated.set(Date.now());
-    invalidate('bookmarks');
+    invalidate('idb:bookmarks');
 }
 
 export const bookmarksLastUpdated = writable(Date.now());

src/lib/data/highlights.ts

@@ -147,7 +147,7 @@ export async function getHighlights(): Promise<HighlightItem[]> {
 
 function notifyUpdated() {
     highlightsLastUpdated.set(Date.now());
-    invalidate('highlights');
+    invalidate('idb:highlights');
 }
 
 export const highlightsLastUpdated = writable(Date.now());

src/lib/data/notes.ts

@@ -126,7 +126,7 @@ export async function getNotes(): Promise<NoteItem[]> {
 
 function notifyUpdated() {
     notesLastUpdated.set(Date.now());
-    invalidate('notes');
+    invalidate('idb:notes');
 }
 
 export const notesLastUpdated = writable(Date.now());

src/lib/data/planProgressItems.ts

@@ -120,7 +120,7 @@ export async function getNextPlanReference(
 }
 function notifyUpdatedPlanStates() {
     planProgressItemsLastUpdated.set(Date.now());
-    invalidate('planprogressitems');
+    invalidate('idb:planprogressitems');
 }
 
 export const planProgressItemsLastUpdated = writable(Date.now());

src/lib/data/planStates.ts

@@ -98,6 +98,6 @@ export async function addPlanState(item: { id: string; state: string }) {
 
 function notifyUpdatedPlanStates() {
     planStatesLastUpdated.set(Date.now());
-    invalidate('planstates');
+    invalidate('idb:planstates');
 }
 export const planStatesLastUpdated = writable(Date.now());

src/routes/bookmarks/+page.js

@@ -12,6 +12,6 @@ export async function load({ depends }) {
     const bookmarks = allBookmarks.filter((item) => {
         return config.bookCollections.some((collection) => collection.id === item.collection);
     });
-    depends('bookmarks');
+    depends('idb:bookmarks');
     return { bookmarks };
 }

src/routes/bookmarks/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
     import { page } from '$app/stores';
     import IconCard from '$lib/components/IconCard.svelte';
     import Navbar from '$lib/components/Navbar.svelte';
@@ -46,6 +47,10 @@
     let sortOrder = SORT_DATE;
 </script>
 
+<svelte:head>
+    <link rel="stylesheet" href="{base}/styles/sab-annotations.css" />
+</svelte:head>
+
 <div class="grid grid-rows-[auto,1fr]" style="height:100vh;height:100dvh;">
     <div class="navbar">
         <Navbar>

src/routes/highlights/+page.js

@@ -12,6 +12,6 @@ export async function load({ depends }) {
     const highlights = allHighlights.filter((item) => {
         return config.bookCollections.some((collection) => collection.id === item.collection);
     });
-    depends('highlights');
+    depends('idb:highlights');
     return { highlights };
 }

src/routes/highlights/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
     import { page } from '$app/stores';
     import ColorCard from '$lib/components/ColorCard.svelte';
     import Navbar from '$lib/components/Navbar.svelte';
@@ -52,6 +53,10 @@
     let sortOrder = SORT_DATE;
 </script>
 
+<svelte:head>
+    <link rel="stylesheet" href="{base}/styles/sab-annotations.css" />
+</svelte:head>
+
 <div class="grid grid-rows-[auto,1fr]" style="height:100vh;height:100dvh;">
     <div class="navbar">
         <Navbar>
@@ -88,6 +93,7 @@
             {#each toSorted($page.data.highlights, sortOrder) as h}
                 {@const colorCard = {
                     docSet: h.docSet,
+                    collection: h.collection,
                     book: h.book,
                     chapter: h.chapter,
                     verse: h.verse,

src/routes/notes/+page.js

@@ -12,7 +12,6 @@ export async function load({ depends }) {
     const notes = allNotes.filter((item) => {
         return config.bookCollections.some((collection) => collection.id === item.collection);
     });
-    depends('notes');
-    console.log('Notes', notes);
+    depends('idb:notes');
     return { notes };
 }

src/routes/notes/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
     import { page } from '$app/stores';
     import IconCard from '$lib/components/IconCard.svelte';
     import Navbar from '$lib/components/Navbar.svelte';
@@ -49,6 +50,10 @@
     let sortOrder = SORT_DATE;
 </script>
 
+<svelte:head>
+    <link rel="stylesheet" href="{base}/styles/sab-annotations.css" />
+</svelte:head>
+
 <div class="grid grid-rows-[auto,1fr]" style="height:100vh;height:100dvh;">
     <div class="navbar">
         <Navbar>