From bb0fe6c7496c47902a24a388f24c86c43e3f3ba5 Mon Sep 17 00:00:00 2001
From: Timothy Cardoza <tcardoza@cardoza.construction>
Date: Thu, 12 Mar 2026 18:49:01 -0500
Subject: [PATCH] Note and task ui fixes

---
 src/components/NotesSidebar.tsx |  6 +++-
 src/components/TaskDetail.tsx   | 48 +++++++++++----------------
 src/views/NotepadView.tsx       | 58 ++++++++++++++++++++++-----------
 3 files changed, 63 insertions(+), 49 deletions(-)

diff --git a/src/components/NotesSidebar.tsx b/src/components/NotesSidebar.tsx
index 8f8bdef..2ae8046 100644
--- a/src/components/NotesSidebar.tsx
+++ b/src/components/NotesSidebar.tsx
@@ -64,7 +64,11 @@ export const NotesSidebar: Component<{
             n = n.filter(note => note.tags?.includes(getFavoriteTag()));
         }
 
-        return n;
+        return n.sort((a, b) => {
+            const titleA = a.title || "Untitled";
+            const titleB = b.title || "Untitled";
+            return titleB.localeCompare(titleA);
+        });
     });
 
     const handleCreateNote = async () => {
diff --git a/src/components/TaskDetail.tsx b/src/components/TaskDetail.tsx
index 1b0347a..6988c09 100644
--- a/src/components/TaskDetail.tsx
+++ b/src/components/TaskDetail.tsx
@@ -434,6 +434,24 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
                                 <span class="hidden sm:inline">Video</span>
                             </Button>
                         </div>
+
+                        {/* File Upload Shortcut */}
+                        <div class="flex items-center gap-1 shrink-0">
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                class="h-8 px-1 sm:px-2 text-[0.625rem] font-bold uppercase tracking-wider hover:bg-muted/50 flex items-center gap-1 sm:gap-1.5 text-muted-foreground hover:text-foreground transition-colors"
+                                onClick={() => {
+                                    const instance = editorInstance();
+                                    if (instance) {
+                                        instance.chain().focus().uploadFile().run();
+                                    }
+                                }}
+                            >
+                                <FileText size={14} class="opacity-70" />
+                                <span class="hidden sm:inline">File</span>
+                            </Button>
+                        </div>
                     </div>
 
                     {/* Metadata Row (Dates/Timestamps) */}
@@ -694,35 +712,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
                             </PopoverContent>
                         </Popover>
 
-                        {/* Close button (Mobile only) */}
-                        <Button
-                            variant="ghost"
-                            size="sm"
-                            class="h-8 w-8 p-0"
-                            onClick={() => {
-                                const instance = editorInstance();
-                                if (instance) {
-                                    instance.chain().focus().uploadVideo().run();
-                                }
-                            }}
-                            title="Video"
-                        >
-                            <Film class="w-4 h-4" />
-                        </Button>
-                        <Button
-                            variant="ghost"
-                            size="sm"
-                            class="h-8 w-8 p-0"
-                            onClick={() => {
-                                const instance = editorInstance();
-                                if (instance) {
-                                    instance.chain().focus().uploadFile().run();
-                                }
-                            }}
-                            title="File"
-                        >
-                            <FileText class="w-4 h-4" />
-                        </Button>
+
                         <Button
                             variant="ghost"
                             size="sm"
diff --git a/src/views/NotepadView.tsx b/src/views/NotepadView.tsx
index 9592edf..13dbed1 100644
--- a/src/views/NotepadView.tsx
+++ b/src/views/NotepadView.tsx
@@ -513,25 +513,45 @@ export const NotepadView: Component<{
                                                         <Star size={14} class={cn(note().tags?.includes(getFavoriteTag()) && "fill-amber-500")} />
                                                     </Button>
                                                     <Show when={isOwner}>
-                                                        <Button
-                                                            variant="ghost"
-                                                            size="sm"
-                                                            class="hidden md:flex h-8 w-8 p-0 hover:bg-destructive/10 hover:text-destructive text-muted-foreground transition-all rounded-xl border border-border/40 shadow-sm"
-                                                            onClick={() => handleDeleteNote(note().id)}
-                                                            title="Move to Trash"
-                                                        >
-                                                            <Trash2 size={14} />
-                                                        </Button>
-                                                        <Button
-                                                            variant="ghost"
-                                                            size="sm"
-                                                            class={cn("hidden md:flex h-8 text-[0.625rem] font-bold uppercase tracking-widest", note().isPrivate ? "text-orange-500 hover:bg-orange-500/10" : "text-muted-foreground")}
-                                                            onClick={() => handleUpdateNote(note().id, { isPrivate: !note().isPrivate })}
-                                                        >
-                                                            <Show when={note().isPrivate} fallback={<><Unlock size={12} class="mr-1.5" /> Public</>}>
-                                                                <><Lock size={12} class="mr-1.5" /> Private</>
-                                                            </Show>
-                                                        </Button>
+                                                        <Popover>
+                                                            <PopoverTrigger
+                                                                as={Button}
+                                                                variant="ghost"
+                                                                size="sm"
+                                                                class="hidden md:flex h-8 w-8 p-0 hover:bg-muted text-muted-foreground transition-all rounded-xl border border-border/40 shadow-sm shrink-0"
+                                                            >
+                                                                <MoreHorizontal size={14} />
+                                                            </PopoverTrigger>
+                                                            <PopoverContent class="w-48 p-2" align="end">
+                                                                <div class="flex flex-col gap-1">
+                                                                    <Button
+                                                                        variant="ghost"
+                                                                        size="sm"
+                                                                        class={cn("w-full justify-start text-[0.625rem] font-bold uppercase tracking-widest gap-2", note().isPrivate ? "text-orange-500 hover:bg-orange-500/10" : "text-muted-foreground hover:bg-muted")}
+                                                                        onClick={(e) => {
+                                                                            e.stopPropagation();
+                                                                            handleUpdateNote(note().id, { isPrivate: !note().isPrivate });
+                                                                        }}
+                                                                    >
+                                                                        <Show when={note().isPrivate} fallback={<><Unlock size={14} /> Public</>}>
+                                                                            <><Lock size={14} /> Private</>
+                                                                        </Show>
+                                                                    </Button>
+                                                                    <Button
+                                                                        variant="ghost"
+                                                                        size="sm"
+                                                                        class="w-full justify-start text-[0.625rem] font-bold uppercase tracking-widest gap-2 hover:bg-destructive/10 hover:text-destructive text-muted-foreground transition-all"
+                                                                        onClick={(e) => {
+                                                                            e.stopPropagation();
+                                                                            handleDeleteNote(note().id);
+                                                                        }}
+                                                                    >
+                                                                        <Trash2 size={14} />
+                                                                        Delete
+                                                                    </Button>
+                                                                </div>
+                                                            </PopoverContent>
+                                                        </Popover>
                                                     </Show>
                                                 </div>
                                             </div>