From fbbd5f596fcaee0073d6aa5290fa76d050a405c3 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 30 Sep 2026 11:56:28 +0000
Subject: [PATCH] Add tag "Add All", task Clear, folder-tree drag/drop,
 responsive cards, assistant header tweaks

- Tag suggestions: "Add All" adds every suggested tag in one click (skipping any
  already on the note).
- Background tasks: "Clear" removes all finished (done/failed/cancelled) rows.
  Running jobs and plans awaiting approval are kept, since neither is completed.
- Folder panel: tree rows are now draggable and droppable. Notes and folders can be
  dropped onto a folder or onto "All notes" (root). Rows that can't accept the drag
  (the folder itself, its descendants, its current parent, dynamic folders) don't
  highlight; hovering a collapsed folder mid-drag expands it. A toast confirms moves.
  The DndContext now spans the tree and notes column, and collision is by pointer
  rather than the dragged item's rectangle, which was picking the wrong row for
  note cards (much larger than a tree row).
- Card view: auto-fill grid from one column up to as many as fit, with an 18rem
  minimum and 24rem maximum card width. Category badge now truncates so the card
  header can't clip at the minimum width.
- Assistant panel: Start Voice Mode moved next to Start dictation in the composer;
  History is icon-only with a "Show chat history" tooltip; Recipes moved to the end.

Co-Authored-By: Claude <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014XETj69yz1PR4dD5ukTuj4
---
 .../src/components/AIConversationPanel.tsx    | 51 +++++++------
 frontend/src/components/ActivityIndicator.tsx | 15 +++-
 frontend/src/components/CategoryBadge.tsx     |  6 +-
 frontend/src/components/FolderIconBar.tsx     |  2 +-
 frontend/src/components/FolderTreePanel.tsx   | 72 ++++++++++++++++++-
 frontend/src/components/NoteCard.tsx          |  2 +-
 frontend/src/stores/activity.test.ts          | 66 +++++++++++++++++
 frontend/src/stores/activity.ts               | 15 +++-
 frontend/src/views/EditorView.tsx             | 20 +++++-
 frontend/src/views/ListView.tsx               | 67 +++++++++++------
 10 files changed, 258 insertions(+), 58 deletions(-)
 create mode 100644 frontend/src/stores/activity.test.ts

diff --git a/frontend/src/components/AIConversationPanel.tsx b/frontend/src/components/AIConversationPanel.tsx
index 960c051..8bcbc09 100644
--- a/frontend/src/components/AIConversationPanel.tsx
+++ b/frontend/src/components/AIConversationPanel.tsx
@@ -423,7 +423,7 @@ export default function AIConversationPanel({
   const [conversation, setConversation] = useState<ConversationMessage[]>([])
   const [sessions, setSessions] = useState<AISession[]>([])
   const [currentSessionId, setCurrentSessionId] = useState<string | null>(null)
-  // Chat | Recipes | History | Assets — four tabs sharing this one side panel.
+  // Chat | History | Assets | Recipes — four tabs sharing this one side panel.
   const [panelTab, setPanelTab] = useState<'chat' | 'recipes' | 'history' | 'assets'>('chat')
   const [renamingId, setRenamingId] = useState<string | null>(null)
   const [renameText, setRenameText] = useState('')
@@ -1743,7 +1743,7 @@ export default function AIConversationPanel({
         onMouseDown={startResize}
       />
 
-      {/* Header: Chat | Recipes | History tabs */}
+      {/* Header: Chat | History | Assets | Recipes tabs */}
       <div className="shrink-0 flex items-center justify-between px-2 py-1.5 border-b border-gray-100 dark:border-gray-700">
         <div className="flex items-center gap-0.5 text-xs font-semibold">
           <button
@@ -1757,17 +1757,6 @@ export default function AIConversationPanel({
             <Sparkles className="w-3.5 h-3.5" />
             Assistant
           </button>
-          <button
-            onClick={() => setPanelTab('recipes')}
-            className={`flex items-center gap-1 px-2 py-1 rounded-md transition-colors ${
-              panelTab === 'recipes'
-                ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400'
-                : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
-            }`}
-          >
-            <BookOpen className="w-3.5 h-3.5" />
-            Recipes
-          </button>
           <button
             onClick={() => setPanelTab('history')}
             disabled={!sessionsEnabled}
@@ -1776,9 +1765,10 @@ export default function AIConversationPanel({
                 ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400'
                 : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
             }`}
+            title="Show chat history"
+            aria-label="Show chat history"
           >
             <History className="w-3.5 h-3.5" />
-            History
           </button>
           <button
             onClick={() => setPanelTab('assets')}
@@ -1792,17 +1782,19 @@ export default function AIConversationPanel({
             <Paperclip className="w-3.5 h-3.5" />
             Assets
           </button>
+          <button
+            onClick={() => setPanelTab('recipes')}
+            className={`flex items-center gap-1 px-2 py-1 rounded-md transition-colors ${
+              panelTab === 'recipes'
+                ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400'
+                : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
+            }`}
+          >
+            <BookOpen className="w-3.5 h-3.5" />
+            Recipes
+          </button>
         </div>
         <div className="flex items-center gap-1">
-          {voiceCapable && (
-            <button
-              onClick={() => (voiceOpen ? void endVoiceSession(true) : void openVoiceSession())}
-              className={`btn-ghost p-1 ${voiceOpen ? 'text-indigo-500' : ''}`}
-              title={voiceOpen ? 'End voice mode' : 'Start voice mode'}
-            >
-              <AudioLines className="w-4 h-4" />
-            </button>
-          )}
           <button
             onClick={() => void handleNewSession()}
             className="btn-ghost p-1"
@@ -2373,6 +2365,19 @@ export default function AIConversationPanel({
                   )}
                 </button>
               )}
+              {voiceCapable && (
+                <button
+                  className={`shrink-0 w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors ${
+                    voiceOpen ? 'text-indigo-500' : 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'
+                  }`}
+                  onClick={() => (voiceOpen ? void endVoiceSession(true) : void openVoiceSession())}
+                  onMouseDown={(e) => e.preventDefault()}
+                  title={voiceOpen ? 'End voice mode' : 'Start voice mode'}
+                  aria-label={voiceOpen ? 'End voice mode' : 'Start voice mode'}
+                >
+                  <AudioLines className="w-4 h-4" />
+                </button>
+              )}
               <textarea
                 ref={inputRef}
                 value={input}
diff --git a/frontend/src/components/ActivityIndicator.tsx b/frontend/src/components/ActivityIndicator.tsx
index 2e51bfc..6a00981 100644
--- a/frontend/src/components/ActivityIndicator.tsx
+++ b/frontend/src/components/ActivityIndicator.tsx
@@ -6,7 +6,7 @@ import {
   Link2, Loader2, Sparkles, X,
 } from 'lucide-react'
 import { useActivityStore, jobKey } from '@/stores/activity'
-import { isActive, type ActivityJob, type ActivityKind } from '@/api/activity'
+import { isActive, isSettled, type ActivityJob, type ActivityKind } from '@/api/activity'
 import { useDropdown } from '@/hooks/useDropdown'
 import { formatBytes, formatTimeAgo } from '@/utils/format'
 
@@ -63,6 +63,7 @@ export default function ActivityIndicator({ onInsert }: Props) {
   const jobs = useActivityStore((s) => s.jobs)
   const cancel = useActivityStore((s) => s.cancel)
   const dismiss = useActivityStore((s) => s.dismiss)
+  const clearSettled = useActivityStore((s) => s.clearSettled)
   const resume = useActivityStore((s) => s.resume)
   const navigate = useNavigate()
   const { open, setOpen, triggerRef, dropdownRef, style } = useDropdown('right')
@@ -129,8 +130,16 @@ export default function ActivityIndicator({ onInsert }: Props) {
           className="z-50 w-80 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-lg overflow-hidden"
           style={style}
         >
-          <div className="px-3 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 border-b border-gray-100 dark:border-gray-700">
-            Background tasks
+          <div className="px-3 py-2 flex items-center justify-between text-xs font-semibold text-gray-500 dark:text-gray-400 border-b border-gray-100 dark:border-gray-700">
+            <span>Background tasks</span>
+            <button
+              className="btn-ghost px-1.5 py-0.5 text-xs font-medium disabled:opacity-40 disabled:pointer-events-none"
+              onClick={clearSettled}
+              disabled={!list.some(isSettled)}
+              title="Remove all completed tasks"
+            >
+              Clear
+            </button>
           </div>
           <div className="max-h-96 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-700">
             {list.map((job) => {
diff --git a/frontend/src/components/CategoryBadge.tsx b/frontend/src/components/CategoryBadge.tsx
index 48826ee..8d755c2 100644
--- a/frontend/src/components/CategoryBadge.tsx
+++ b/frontend/src/components/CategoryBadge.tsx
@@ -3,11 +3,11 @@ import type { Category } from '@/api/categories'
 export default function CategoryBadge({ category }: { category: Category }) {
   return (
     <span
-      className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium text-white"
+      className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium text-white max-w-full"
       style={{ backgroundColor: category.color }}
     >
-      <span>{category.emoji}</span>
-      <span>{category.label}</span>
+      <span className="shrink-0">{category.emoji}</span>
+      <span className="truncate">{category.label}</span>
     </span>
   )
 }
diff --git a/frontend/src/components/FolderIconBar.tsx b/frontend/src/components/FolderIconBar.tsx
index 6412c52..337bab7 100644
--- a/frontend/src/components/FolderIconBar.tsx
+++ b/frontend/src/components/FolderIconBar.tsx
@@ -32,7 +32,7 @@ function FolderChip({ folder, onOpen, onOpenDynamic, onMove, onCustomize, onDele
 
   const isDynamic = isDynamicFolder(folder)
   // A dynamic folder is a leaf that runs a search — never a drop target for notes/folders.
-  const { setNodeRef: setDropRef, isOver } = useDroppable({ id: `folder-drop:${folder.id}`, disabled: isDynamic })
+  const { setNodeRef: setDropRef, isOver } = useDroppable({ id: `folder-drop:${folder.id}`, data: { folderId: folder.id }, disabled: isDynamic })
   const { setNodeRef: setDragRef, attributes, listeners, isDragging } = useDraggable({
     id: `folder-drag:${folder.id}`,
     data: { type: 'folder', folderId: folder.id },
diff --git a/frontend/src/components/FolderTreePanel.tsx b/frontend/src/components/FolderTreePanel.tsx
index 94ed2ed..1e63a97 100644
--- a/frontend/src/components/FolderTreePanel.tsx
+++ b/frontend/src/components/FolderTreePanel.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
+import { useDraggable, useDroppable } from '@dnd-kit/core'
 import {
   Home, ChevronDown, MoreVertical, FolderPlus, Plus, Upload, FolderInput, Palette, Trash2,
   PanelLeftClose, Folder as FolderIcon, Search, Globe,
@@ -23,6 +24,10 @@ interface Props {
   onCustomize: (folder: Folder) => void
   onDelete: (folder: Folder) => void       // parent decides archive vs. permanent delete
   onEmptyArchive: () => void
+  /** Folder currently being dragged (from here or the folder bar), so rows that can't
+   *  accept it — itself, its descendants, its current parent — stop offering to. The
+   *  drag/drop context itself lives in the parent; this panel only registers rows. */
+  draggingFolderId?: string | null
   storageKey?: string
 }
 
@@ -48,11 +53,17 @@ interface MenuState { target: MenuTarget; top: number; left: number }
 
 const MENU_WIDTH = 192 // matches w-48
 
+// Hovering a collapsed folder this long mid-drag opens it, so nested targets are reachable.
+const DRAG_EXPAND_MS = 600
+
 interface RowCtx {
   currentFolderId: string | null
   archiveId: string | null
+  byId: Map<string, Folder>
+  draggingFolderId: string | null
   expanded: Set<string>
   toggleExpand: (id: string) => void
+  expand: (id: string) => void
   openMenu: (target: MenuTarget, btn: HTMLElement) => void
   onOpenFolder: (id: string | null) => void
   onOpenDynamic: (folder: Folder) => void
@@ -66,6 +77,19 @@ function rowClasses(active: boolean): string {
       : 'text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700/60'
   }`
 }
+const DROP_HIGHLIGHT = 'ring-2 ring-blue-500 bg-blue-50 dark:bg-blue-900/30'
+
+/** Whether a folder being dragged may be dropped onto `target` (null = the root). */
+function canDropFolderOn(
+  dragging: string | null,
+  target: string | null,
+  byId: Map<string, Folder>,
+): boolean {
+  if (!dragging) return true
+  if (target === dragging) return false
+  if (byId.get(dragging)?.parent_folder_id === target) return false  // already there
+  return target === null || !ancestorIds(target, byId).includes(dragging)
+}
 const ACTION_BTN =
   'p-0.5 rounded text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600 shrink-0 transition-opacity opacity-60 sm:opacity-0 sm:group-hover:opacity-100 focus:opacity-100'
 
@@ -80,10 +104,35 @@ function TreeRow({ node, depth, inArchive, ctx }: { node: FolderNode; depth: num
   const btnRef = useRef<HTMLButtonElement>(null)
   const kind: MenuKind = isBin ? 'bin' : isDynamic ? 'dynamic' : inArchive ? 'archived' : 'normal'
 
+  // Ids are prefixed `tree-` because the folder bar registers the same folders as
+  // `folder-drag:`/`folder-drop:` in the one shared DndContext, and ids must be unique.
+  // A dynamic folder is a leaf that runs a search, so nothing can be dropped on it.
+  const { setNodeRef: setDropRef, isOver } = useDroppable({
+    id: `tree-drop:${folder.id}`,
+    data: { folderId: folder.id },
+    disabled: isDynamic || !canDropFolderOn(ctx.draggingFolderId, folder.id, ctx.byId),
+  })
+  // The Archive Bin is app-managed: it can receive items but never be moved.
+  const { setNodeRef: setDragRef, attributes, listeners, isDragging } = useDraggable({
+    id: `tree-drag:${folder.id}`,
+    data: { type: 'folder', folderId: folder.id },
+    disabled: isBin,
+  })
+
+  useEffect(() => {
+    if (!isOver || !hasChildren || isOpen) return
+    const timer = setTimeout(() => ctx.expand(folder.id), DRAG_EXPAND_MS)
+    return () => clearTimeout(timer)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOver, hasChildren, isOpen, folder.id])
+
   return (
     <>
       <div
-        className={rowClasses(isActive)}
+        ref={(el) => { setDropRef(el); setDragRef(el) }}
+        {...attributes}
+        {...listeners}
+        className={`${rowClasses(isActive)} ${isOver ? DROP_HIGHLIGHT : ''} ${isDragging ? 'opacity-40' : ''}`}
         style={{ paddingLeft: `${0.25 + depth * 0.85}rem` }}
         onClick={() => (isDynamic ? ctx.onOpenDynamic(folder) : ctx.onOpenFolder(folder.id))}
         title={isDynamic ? folder.search_query ?? undefined : undefined}
@@ -94,6 +143,7 @@ function TreeRow({ node, depth, inArchive, ctx }: { node: FolderNode; depth: num
           // not a folder has children.
           <button
             className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-600 shrink-0 text-gray-400"
+            onPointerDown={(e) => e.stopPropagation()}
             onClick={(e) => { e.stopPropagation(); ctx.toggleExpand(folder.id) }}
             title={isOpen ? 'Collapse' : 'Expand'}
           >
@@ -115,6 +165,7 @@ function TreeRow({ node, depth, inArchive, ctx }: { node: FolderNode; depth: num
           ref={btnRef}
           className={ACTION_BTN}
           title="Folder actions"
+          onPointerDown={(e) => e.stopPropagation()}
           onClick={(e) => { e.stopPropagation(); if (btnRef.current) ctx.openMenu({ kind, folder }, btnRef.current) }}
         >
           <MoreVertical className="w-3.5 h-3.5" />
@@ -141,6 +192,7 @@ export default function FolderTreePanel({
   onCustomize,
   onDelete,
   onEmptyArchive,
+  draggingFolderId = null,
   storageKey = 'folder-tree-panel',
 }: Props) {
   const openKey = `${storageKey}-open`
@@ -223,6 +275,10 @@ export default function FolderTreePanel({
     })
   }
 
+  function expand(id: string) {
+    setExpanded((prev) => (prev.has(id) ? prev : new Set(prev).add(id)))
+  }
+
   function openMenu(target: MenuTarget, btn: HTMLElement) {
     const rect = btn.getBoundingClientRect()
     // Anchor by the button's left edge (the panel hugs the screen's left), clamped
@@ -258,8 +314,16 @@ export default function FolderTreePanel({
     window.addEventListener('mouseup', onMouseUp)
   }
 
-  const ctx: RowCtx = { currentFolderId, archiveId, expanded, toggleExpand, openMenu, onOpenFolder, onOpenDynamic }
+  const ctx: RowCtx = {
+    currentFolderId, archiveId, byId, draggingFolderId, expanded, toggleExpand, expand, openMenu, onOpenFolder, onOpenDynamic,
+  }
   const rootBtnRef = useRef<HTMLButtonElement>(null)
+  // "All notes" is the root: dropping here moves a note or folder out to the top level.
+  const { setNodeRef: setRootDropRef, isOver: rootIsOver } = useDroppable({
+    id: 'tree-drop:root',
+    data: { folderId: null },
+    disabled: !canDropFolderOn(draggingFolderId, null, byId),
+  })
 
   function menuItem(key: string, Icon: LucideIcon, label: string, onClick: () => void, danger = false) {
     return (
@@ -364,7 +428,8 @@ export default function FolderTreePanel({
         <nav className="flex-1 min-h-0 overflow-y-auto py-1 px-1">
           {/* Root "All notes" */}
           <div
-            className={rowClasses(rootActive)}
+            ref={setRootDropRef}
+            className={`${rowClasses(rootActive)} ${rootIsOver ? DROP_HIGHLIGHT : ''}`}
             style={{ paddingLeft: '0.25rem' }}
             onClick={() => onOpenFolder(null)}
           >
@@ -375,6 +440,7 @@ export default function FolderTreePanel({
               ref={rootBtnRef}
               className={ACTION_BTN}
               title="Add here"
+              onPointerDown={(e) => e.stopPropagation()}
               onClick={(e) => { e.stopPropagation(); if (rootBtnRef.current) openMenu({ kind: 'root', folder: null }, rootBtnRef.current) }}
             >
               <MoreVertical className="w-3.5 h-3.5" />
diff --git a/frontend/src/components/NoteCard.tsx b/frontend/src/components/NoteCard.tsx
index fcb6a63..d43aa8e 100644
--- a/frontend/src/components/NoteCard.tsx
+++ b/frontend/src/components/NoteCard.tsx
@@ -158,7 +158,7 @@ export default function NoteCard({ note, category, onClick, onPin, selected = fa
 
         {/* Top row: category + time + pin */}
         <div className="relative z-10 flex items-center justify-between px-3 pt-3 gap-2">
-          <div style={hasImage ? { filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.5))' } : undefined}>
+          <div className="min-w-0" style={hasImage ? { filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.5))' } : undefined}>
             {category
               ? <CategoryBadge category={category} />
               : <span className="text-xs text-gray-400">Uncategorised</span>}
diff --git a/frontend/src/stores/activity.test.ts b/frontend/src/stores/activity.test.ts
new file mode 100644
index 0000000..cf1cfea
--- /dev/null
+++ b/frontend/src/stores/activity.test.ts
@@ -0,0 +1,66 @@
+/**
+ * The "Clear" button in the Background tasks dropdown.
+ *
+ * What it must keep matters as much as what it removes: a running job is still doing
+ * work, and a plan awaiting approval is waiting on the user. Neither is "completed", so
+ * neither may disappear from under them.
+ */
+
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+// The store reaches settings.ts, which reads localStorage while the module loads, and
+// running jobs write document.title (see syncDocumentTitle). Vitest runs in node here,
+// so both globals must exist before the imports below evaluate — hence vi.hoisted.
+vi.hoisted(() => {
+  const storage = { getItem: () => null, setItem: () => {}, removeItem: () => {} }
+  Object.assign(globalThis, { localStorage: storage, document: { title: 'Gecko Notes' } })
+})
+
+import type { ActivityJob, ActivityStatus } from '@/api/activity'
+import { jobKey, useActivityStore } from './activity'
+
+function job(id: string, status: ActivityStatus): ActivityJob {
+  return {
+    id,
+    kind: 'video',
+    status,
+    stage: '',
+    progress: 0,
+    detail: '',
+    title: id,
+    note_id: null,
+    note_title: '',
+    locks_note: false,
+    result_url: null,
+    error_message: null,
+    meta: {},
+  }
+}
+
+describe('clearSettled', () => {
+  beforeEach(() => {
+    useActivityStore.getState().reset()
+  })
+
+  it('removes done, failed and cancelled jobs but keeps running, queued and awaiting-approval ones', () => {
+    const all = [
+      job('done', 'done'),
+      job('error', 'error'),
+      job('cancelled', 'cancelled'),
+      job('processing', 'processing'),
+      job('queued', 'queued'),
+      job('plan', 'awaiting_approval'),
+    ]
+    useActivityStore.setState({ jobs: Object.fromEntries(all.map((j) => [jobKey(j), j])) })
+
+    useActivityStore.getState().clearSettled()
+
+    const left = Object.values(useActivityStore.getState().jobs).map((j) => j.id).sort()
+    expect(left).toEqual(['plan', 'processing', 'queued'])
+  })
+
+  it('leaves an empty list empty', () => {
+    useActivityStore.getState().clearSettled()
+    expect(useActivityStore.getState().jobs).toEqual({})
+  })
+})
diff --git a/frontend/src/stores/activity.ts b/frontend/src/stores/activity.ts
index f676116..a966a7e 100644
--- a/frontend/src/stores/activity.ts
+++ b/frontend/src/stores/activity.ts
@@ -1,5 +1,5 @@
 import { create } from 'zustand'
-import { activityApi, isActive, type ActivityJob, type ActivityKind } from '@/api/activity'
+import { activityApi, isActive, isSettled, type ActivityJob, type ActivityKind } from '@/api/activity'
 import { videoGenApi, type RenderOptions } from '@/api/videoGen'
 import { useAuthStore } from '@/stores/auth'
 
@@ -22,6 +22,9 @@ interface ActivityState {
   track: (job: ActivityJob) => void
   cancel: (job: ActivityJob) => Promise<void>
   dismiss: (key: string) => void
+  /** Drop every finished job (done, failed, cancelled). Running jobs and plans
+   *  awaiting approval stay — the user still has to act on or wait for those. */
+  clearSettled: () => void
   /** Called on mount: recover anything still running after a reload. */
   resume: () => Promise<void>
   /** Start a video render and begin tracking it. */
@@ -129,6 +132,16 @@ export const useActivityStore = create<ActivityState>((set, get) => {
       })
     },
 
+    clearSettled() {
+      set((state) => {
+        const jobs = Object.fromEntries(
+          Object.entries(state.jobs).filter(([, job]) => !isSettled(job)),
+        )
+        syncDocumentTitle(jobs)
+        return { jobs }
+      })
+    },
+
     async resume() {
       if (!useAuthStore.getState().isAuthenticated) return
       try {
diff --git a/frontend/src/views/EditorView.tsx b/frontend/src/views/EditorView.tsx
index f04d687..c29cd39 100644
--- a/frontend/src/views/EditorView.tsx
+++ b/frontend/src/views/EditorView.tsx
@@ -1171,6 +1171,11 @@ export default function EditorView() {
     setSuggestedTags((s) => s.filter((t) => t !== tag))
   }
 
+  function addAllSuggestedTags() {
+    setTags((t) => [...t, ...suggestedTags.filter((st) => !t.includes(st))])
+    setSuggestedTags([])
+  }
+
   function onTagsGenerated(generated: string[]) {
     setSuggestedTags(generated.filter((t) => !tags.includes(t)))
   }
@@ -1734,9 +1739,18 @@ export default function EditorView() {
                             + #{st}
                           </button>
                         ))}
-                        <button className="ml-auto text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-200" onClick={() => setSuggestedTags([])}>
-                          Dismiss
-                        </button>
+                        <div className="ml-auto flex items-center gap-2">
+                          <button
+                            className="text-xs text-blue-600 hover:text-blue-700 dark:text-blue-300 dark:hover:text-blue-200"
+                            onClick={addAllSuggestedTags}
+                            title="Add every suggested tag"
+                          >
+                            Add All
+                          </button>
+                          <button className="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-200" onClick={() => setSuggestedTags([])}>
+                            Dismiss
+                          </button>
+                        </div>
                       </div>
                     )}
                   </div>
diff --git a/frontend/src/views/ListView.tsx b/frontend/src/views/ListView.tsx
index 2723c4c..fb40331 100644
--- a/frontend/src/views/ListView.tsx
+++ b/frontend/src/views/ListView.tsx
@@ -5,7 +5,7 @@ import {
   ChevronDown, Upload, CheckCircle2, Circle, Loader2, Globe,
 } from 'lucide-react'
 import {
-  DndContext, DragOverlay, PointerSensor, TouchSensor, useSensor, useSensors, useDraggable,
+  DndContext, DragOverlay, PointerSensor, TouchSensor, pointerWithin, useSensor, useSensors, useDraggable,
   type DragEndEvent, type DragStartEvent,
 } from '@dnd-kit/core'
 import { useCreateBlockNote } from '@blocknote/react'
@@ -50,14 +50,26 @@ function filterLocally(list: NoteListItem[], query: string): NoteListItem[] {
   return list.filter((n) => n.title.toLowerCase().includes(q) || n.content_preview.toLowerCase().includes(q))
 }
 
+// Card view sizing: the grid fits as many columns as an 18rem minimum allows — down to
+// a single one on a phone — and each card stops growing at 24rem, so a card is never
+// narrow enough to clip its header row nor wide enough to look stretched. Both are
+// literal class strings (not built from the numbers) so Tailwind can see them.
+const CARD_GRID = 'grid gap-3 grid-cols-[repeat(auto-fill,minmax(min(100%,18rem),1fr))]'
+const CARD_MAX_WIDTH = 'max-w-[24rem]'
+
 // Wrap a NoteCard so it can be dragged onto a folder.
-function DraggableNote({ note, children }: { note: NoteListItem; children: React.ReactNode }) {
+function DraggableNote({ note, cardView, children }: { note: NoteListItem; cardView: boolean; children: React.ReactNode }) {
   const { setNodeRef, attributes, listeners, isDragging } = useDraggable({
     id: `note-drag:${note.id}`,
     data: { type: 'note', noteId: note.id },
   })
   return (
-    <div ref={setNodeRef} {...attributes} {...listeners} className={isDragging ? 'opacity-50' : ''}>
+    <div
+      ref={setNodeRef}
+      {...attributes}
+      {...listeners}
+      className={`${cardView ? `${CARD_MAX_WIDTH} min-w-0` : ''} ${isDragging ? 'opacity-50' : ''}`}
+    >
       {children}
     </div>
   )
@@ -551,10 +563,10 @@ export default function ListView() {
     const data = event.active.data.current as { type: string; noteId?: string; folderId?: string } | undefined
     if (!data) return
     if (data.type === 'folder' && data.folderId) {
-      const folder = subfolders.find((f) => f.id === data.folderId)
+      const folder = foldersById.get(data.folderId)
       if (folder) setActiveDrag({ type: 'folder', folder })
     } else if (data.type === 'note' && data.noteId) {
-      const note = notes.find((n) => n.id === data.noteId)
+      const note = notes.find((n) => n.id === data.noteId) ?? deepResults?.find((n) => n.id === data.noteId)
       setActiveDrag({ type: 'note', label: note?.title || 'Untitled' })
     }
   }
@@ -562,25 +574,37 @@ export default function ListView() {
   async function handleDragEnd(event: DragEndEvent) {
     setActiveDrag(null)
     const { active, over } = event
-    if (!over) return
-    const overId = String(over.id)
-    if (!overId.startsWith('folder-drop:')) return
-    const destFolderId = overId.slice('folder-drop:'.length)
+    // Every drop target — folder-bar chip or tree row — carries its folder in
+    // `data.folderId`; null is the root ("All notes" in the tree).
+    const dropData = over?.data.current as { folderId?: string | null } | undefined
     const data = active.data.current as { type: string; noteId?: string; folderId?: string } | undefined
-    if (!data) return
+    if (!dropData || !data || !('folderId' in dropData)) return
+    const destFolderId = dropData.folderId ?? null
+    const destName = destFolderId ? foldersById.get(destFolderId)?.name ?? 'folder' : 'All notes'
     try {
       if (data.type === 'note' && data.noteId) {
-        await foldersStore.moveNoteToFolder(data.noteId, destFolderId)
+        const noteId = data.noteId
+        const note = notes.find((n) => n.id === noteId) ?? deepResults?.find((n) => n.id === noteId)
+        if (note && note.folder_id === destFolderId) return  // already there
+        await foldersStore.moveNoteToFolder(noteId, destFolderId)
         loadNotes(buildParams(), true)
         setSelectedIds((prev) => {
-          if (!prev.has(data.noteId as string)) return prev
+          if (!prev.has(noteId)) return prev
           const next = new Set(prev)
-          next.delete(data.noteId as string)
+          next.delete(noteId)
           return next
         })
+        showToast(`Moved to “${destName}”`)
       } else if (data.type === 'folder' && data.folderId && data.folderId !== destFolderId) {
+        const dragged = foldersById.get(data.folderId)
+        if (!dragged || dragged.parent_folder_id === destFolderId) return  // already there
+        if (destFolderId && ancestorIds(destFolderId, foldersById).includes(data.folderId)) {
+          showToast('A folder can’t be moved into itself.')
+          return
+        }
         await foldersStore.moveFolder(data.folderId, destFolderId)
         foldersStore.loadContents(folderId)
+        showToast(`Moved “${dragged.name}” to “${destName}”`)
       }
     } catch {
       showToast('Could not move item there.')
@@ -612,13 +636,11 @@ export default function ListView() {
     setSelectedIds(allSelected ? new Set() : new Set(allSelectableIds))
   }
 
-  const gridClass = viewMode === 'card'
-    ? 'grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3'
-    : 'space-y-3'
+  const gridClass = viewMode === 'card' ? CARD_GRID : 'space-y-3'
 
   function renderNotes(list: NoteListItem[]) {
     return list.map((note) => (
-      <DraggableNote key={note.id} note={note}>
+      <DraggableNote key={note.id} note={note} cardView={viewMode === 'card'}>
         <NoteCard
           note={note}
           category={getCategoryById(note.category_id)}
@@ -781,6 +803,11 @@ export default function ListView() {
         )}
       </header>
 
+      {/* One drag/drop context for the folder tree and the notes column, so notes and
+          folders can be dragged from either onto a tree row. Collision is by pointer,
+          not by the dragged item's rectangle: a note card is far larger than a tree row,
+          so its rectangle overlaps several rows at once and picks the wrong one. */}
+      <DndContext sensors={sensors} collisionDetection={pointerWithin} onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
       <div className="flex flex-1 min-h-0 flex-col sm:flex-row">
       <FolderTreePanel
         folders={allFolders}
@@ -796,14 +823,14 @@ export default function ListView() {
         onCustomize={handleCustomizeFolder}
         onDelete={handleDeleteFolder}
         onEmptyArchive={handleEmptyArchive}
+        draggingFolderId={activeDrag?.type === 'folder' ? activeDrag.folder.id : null}
       />
       <div className="relative flex-1 flex flex-col min-w-0 min-h-0">
-      <DndContext sensors={sensors} onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
         <main className="flex-1 overflow-y-auto px-4 py-4">
           {deepLoading || (loading && notes.length === 0 && visibleSubfolders.length === 0 && !inDeepMode) ? (
             <div className={gridClass}>
               {Array.from({ length: 6 }).map((_, i) => (
-                <div key={i} className={`card dark:bg-gray-800 dark:border-gray-700 animate-pulse ${viewMode === 'card' ? 'h-52' : 'p-4'}`}>
+                <div key={i} className={`card dark:bg-gray-800 dark:border-gray-700 animate-pulse ${viewMode === 'card' ? `h-52 ${CARD_MAX_WIDTH}` : 'p-4'}`}>
                   {viewMode === 'list' && <>
                     <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/3 mb-2" />
                     <div className="h-5 bg-gray-200 dark:bg-gray-700 rounded w-3/4 mb-2" />
@@ -921,7 +948,6 @@ export default function ListView() {
             </div>
           )}
         </DragOverlay>
-      </DndContext>
 
       {toast && (
         <div className="fixed bottom-32 left-1/2 -translate-x-1/2 z-50 bg-gray-900 text-white text-sm px-4 py-2 rounded-lg shadow-lg">
@@ -1072,6 +1098,7 @@ export default function ListView() {
         onNotesChanged={() => { void loadNotes(buildParams(), true) }}
       />
       </div>
+      </DndContext>
     </div>
   )
 }