favoriting

src/components/NotesSidebar.tsx

@@ -1,7 +1,7 @@
 import { type Component, createMemo, For, Show } from "solid-js";
-import { store } from "@/store";
+import { store, getFavoriteTag } from "@/store";
 import { pb } from "@/lib/pocketbase";
-import { Plus, Lock } from "lucide-solid";
+import { Plus, Lock, Star } from "lucide-solid";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { NOTES_COLLECTION } from "@/lib/constants";
@@ -54,6 +54,16 @@ export const NotesSidebar: Component<{
             });
         }
 
+        // Owned By Me Filter
+        if (filter.ownedByMe) {
+            n = n.filter(note => note.user === currentUserId);
+        }
+
+        // Starred Filter
+        if (filter.starred) {
+            n = n.filter(note => note.tags?.includes(getFavoriteTag()));
+        }
+
         return n;
     });
 
@@ -105,23 +115,28 @@ export const NotesSidebar: Component<{
                             )}
                         >
                             <div class="font-semibold text-sm truncate flex items-center justify-between">
-                                <span>{note.title || "Untitled"}</span>
+                                <div class="flex items-center gap-1.5 truncate">
+                                    <Show when={note.tags?.includes(getFavoriteTag())}>
+                                        <Star size={12} class="fill-amber-500 text-amber-500 shrink-0" />
+                                    </Show>
+                                    <span class="truncate">{note.title || "Untitled"}</span>
+                                </div>
                                 <Show when={note.isPrivate}>
                                     <Lock size={12} class="text-orange-500 shrink-0 ml-2" />
                                 </Show>
                             </div>
-                            <Show when={note.tags && note.tags.length > 0}>
+                            <Show when={note.tags && note.tags.some(t => !t.endsWith("_favorite__"))}>
                                 <div class="flex gap-1 mt-2 flex-wrap">
-                                    <For each={note.tags.slice(0, 3)}>
+                                    <For each={note.tags.filter(t => !t.endsWith("_favorite__")).slice(0, 3)}>
                                         {(t) => (
                                             <span class="text-[0.6rem] px-1.5 py-0.5 bg-muted rounded-md text-muted-foreground whitespace-nowrap border border-border/50">
                                                 {t}
                                             </span>
                                         )}
                                     </For>
-                                    <Show when={note.tags.length > 3}>
+                                    <Show when={note.tags.filter(t => !t.endsWith("_favorite__")).length > 3}>
                                         <span class="text-[0.6rem] px-1.5 py-0.5 text-muted-foreground whitespace-nowrap shrink-0">
-                                            +{note.tags.length - 3}
+                                            +{note.tags.filter(t => !t.endsWith("_favorite__")).length - 3}
                                         </span>
                                     </Show>
                                 </div>