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>
   )
 }