@aryacode/dsh-aryacode-polish 0.16.0 → 0.18.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [0.18.0] - 2026-10-28
+
+### Added
+- **Folders that exist before their content.** The workspace menu can declare a folder, an
+  empty folder draws its own header with an empty count, accepts a workspace drop, and
+  can be removed again. Declared folders are remembered (ryacode-polish:folders.v1).
+
+
+## [0.17.0] - 2026-10-28
+
+### Added
+- **Drop a workspace on a folder header to file it there.** The title is rewritten to
+  Folder/Name (any previous prefix is replaced, not stacked) through the Host rename.
+- **A workspace note shows as a card on hover**, not just as a tooltip title.
+
+
 ## [0.16.0] - 2026-10-28
 
 ### Added

package/client/workspace.js

@@ -386,6 +386,68 @@ const LOOK_KEY = 'aryacode-polish:workspace-appearance.v1'
 const ORDER_KEY = 'aryacode-polish:workspace-order.v1'
 const FOLD_KEY = 'aryacode-polish:folded.v1'
 const DENSITY_KEY = 'aryacode-polish:density.v1'
+const FOLDER_KEY = 'aryacode-polish:folders.v1'
+
+const cleanFolder = (name) => {
+  const value = String(name || '').trim().replace(/^\/+|\/+$/g, '')
+  return value && !value.includes('/') ? value : undefined
+}
+
+/** Add a folder name, refusing empties, duplicates and anything nested. */
+export function addFolder(list, name) {
+  const folder = cleanFolder(name)
+  const names = Array.isArray(list) ? list.slice() : []
+  if (!folder || names.includes(folder)) return names
+  names.push(folder)
+  return names
+}
+
+/** Remove a folder name from the declared list. */
+export function removeFolder(list, name) {
+  const folder = cleanFolder(name)
+  const names = Array.isArray(list) ? list : []
+  return folder ? names.filter((entry) => entry !== folder) : names.slice()
+}
+
+export function readFolders(storage) {
+  try {
+    const store = storage || (typeof localStorage === 'undefined' ? undefined : localStorage)
+    if (!store) return []
+    const parsed = JSON.parse(store.getItem(FOLDER_KEY) || '[]')
+    if (!Array.isArray(parsed)) return []
+    return parsed.map(cleanFolder).filter(Boolean)
+  } catch {
+    return []
+  }
+}
+
+export function writeFolders(list, storage) {
+  try {
+    const store = storage || (typeof localStorage === 'undefined' ? undefined : localStorage)
+    if (!store) return
+    store.setItem(FOLDER_KEY, JSON.stringify((Array.isArray(list) ? list : []).map(cleanFolder).filter(Boolean)))
+  } catch {
+    /* folders are a convenience, not a requirement */
+  }
+}
+
+/**
+ * Folder names the tree must draw: the ones its workspaces imply, then any declared but
+ * still empty. Declared folders keep their order so an empty folder does not jump around
+ * when the first workspace lands in it.
+ */
+export function folderNamesOf(rows, declared) {
+  const seen = []
+  for (const row of rows || []) {
+    const name = folderKey(row.workspace)
+    if (name && !seen.includes(name)) seen.push(name)
+  }
+  for (const name of declared || []) {
+    const folder = cleanFolder(name)
+    if (folder && !seen.includes(folder)) seen.push(folder)
+  }
+  return seen
+}
 
 export const DENSITIES = ['comfortable', 'compact']
 
@@ -475,6 +537,22 @@ const WS_MENU_HINT = {
   color: 'var(--dsw-alias-label-quaternary, #8a8a8a)',
 }
 
+const WS_NOTE_CARD = {
+  position: 'fixed',
+  zIndex: 1250,
+  maxWidth: '260px',
+  padding: '6px 9px',
+  borderRadius: 'var(--dsw-radius-md, 8px)',
+  border: '0.5px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12))',
+  background: 'Canvas',
+  color: 'var(--dsw-alias-label-secondary, #61666b)',
+  fontSize: 'calc(var(--dsh-content-font-size-secondary, 13px) - 1px)',
+  lineHeight: 1.35,
+  boxShadow: 'var(--dsw-elevation-prominent, 0 2px 8px rgba(0, 0, 0, 0.08))',
+  pointerEvents: 'none',
+  whiteSpace: 'pre-wrap',
+}
+
 const WS_GLYPH = {
   flex: 'none',
   width: '16px',
@@ -616,6 +694,19 @@ const SWITCHER_HINT = {
  * written to the Host and renaming a workspace is enough to move it between
  * folders — the same idea as the reference plugin, without its "/" toggle.
  */
+/**
+ * The title a workspace needs to sit under `folder`: its own name moved behind the
+ * folder prefix, with any previous prefix replaced rather than stacked.
+ */
+export function fileUnder(label, folder) {
+  const name = String(label || '').trim()
+  const target = String(folder || '').trim()
+  if (!name || !target) return name
+  const cut = name.lastIndexOf('/')
+  const bare = (cut >= 0 ? name.slice(cut + 1) : name).trim()
+  return bare ? target + '/' + bare : target
+}
+
 export function folderKey(workspace) {
   const label = workspaceLabel(workspace)
   const cut = label.lastIndexOf('/')
@@ -833,12 +924,16 @@ export function BetterWorkspace(props) {
   const [dropping, setDropping] = React.useState(null)
   const [look, setLook] = React.useState(() => readAppearance())
   const [noteDraft, setNoteDraft] = React.useState('')
+  const [card, setCard] = React.useState(null)
   const folded = React.useMemo(() => readFolded(), [])
   const [folders, setFolders] = React.useState(folded.folders)
+  const [declared, setDeclared] = React.useState(() => readFolders())
+  const [folderDraft, setFolderDraft] = React.useState('')
   const [switcher, setSwitcher] = React.useState(null)
   const [density, setDensity] = React.useState(() => readDensity())
   const [archiveOpen, setArchiveOpen] = React.useState(false)
   React.useEffect(() => { writeFolded({ workspaces: expanded, folders }) }, [expanded, folders])
+  React.useEffect(() => { writeFolders(declared) }, [declared])
   const [renaming, setRenaming] = React.useState(null)
   const commitRename = async () => {
     const draft = renaming
@@ -890,7 +985,7 @@ export function BetterWorkspace(props) {
   const entries = React.useMemo(() => rowMenuEntries(slots), [slots, workspaceList.length, sessionList.length])
   const totalCount = allRows.reduce((sum, row) => sum + row.sessions.length, 0)
   const shownCount = rows.reduce((sum, row) => sum + row.sessions.length, 0)
-  const folderNames = Array.from(new Set(rows.map(row => folderKey(row.workspace)).filter(Boolean)))
+  const folderNames = folderNamesOf(rows, declared)
   // One click should always do the useful thing: if anything is folded, the button
   // expands everything (folders included); only when nothing is folded does it fold.
   const anyFolded = rows.some(row => expanded[row.workspace.workspaceId] === false)
@@ -1094,6 +1189,17 @@ export function BetterWorkspace(props) {
             }
           },
         }, 'Restore saved order'),
+      React.createElement('button', {
+        type: 'button',
+        'data-polish-folder-new': 'open',
+        style: WS_MENU_ITEM,
+        onClick: () => {
+          const anchor = menu.anchor
+          closeMenu()
+          setFolderDraft('')
+          setMenu({ kind: 'folder', anchor })
+        },
+      }, 'New folder…'),
       React.createElement('button', {
         type: 'button',
         'data-polish-glyph': 'open',
@@ -1161,6 +1267,30 @@ export function BetterWorkspace(props) {
       }, 'Unarchive session'))
     : null
 
+  const folderMenu = menu && menu.kind === 'folder'
+    ? React.createElement(RowMenu, { anchor: menu.anchor, onClose: closeMenu },
+      React.createElement('input', {
+        'data-polish-folder-input': 'true',
+        type: 'text',
+        value: folderDraft,
+        placeholder: 'Folder name',
+        autoFocus: true,
+        style: WS_NOTE_INPUT,
+        onChange: (event) => setFolderDraft(event.target.value),
+        onKeyDown: (event) => {
+          if (event.key === 'Escape') { event.stopPropagation(); closeMenu(); return }
+          if (event.key !== 'Enter') return
+          const next = addFolder(declared, folderDraft)
+          closeMenu()
+          if (next.length === declared.length) { setNotice('That folder already exists.'); return }
+          setDeclared(next)
+          setFolders((prev) => Object.assign({}, prev, { [next[next.length - 1]]: false }))
+          setNotice('Folder added.')
+        },
+      }),
+      React.createElement('div', { style: WS_MENU_HINT }, 'Enter creates, Escape cancels'))
+    : null
+
   const glyphMenu = menu && menu.kind === 'glyph'
     ? React.createElement(RowMenu, { anchor: menu.anchor, onClose: closeMenu },
       React.createElement('div', { style: WS_GLYPH_GRID },
@@ -1215,6 +1345,13 @@ export function BetterWorkspace(props) {
       React.createElement('div', { style: WS_MENU_HINT }, 'Enter saves, Escape cancels'))
     : null
 
+  const noteCard = card
+    ? ReactDOM.createPortal(React.createElement('div', {
+      'data-polish-note-card': 'true',
+      style: Object.assign({}, WS_NOTE_CARD, { top: card.top, left: card.left }),
+    }, card.text), document.body)
+    : null
+
   const paintMenu = menu && menu.kind === 'paint'
     ? (() => {
       const workspace = menu.workspace
@@ -1469,6 +1606,7 @@ export function BetterWorkspace(props) {
     const folded = folder !== undefined && folders[folder] === true
 
     if (folder !== undefined && !announced[folder]) {
+      /* handled below for both filled and empty folders */
       announced[folder] = true
       const inside = rows.filter((entry) => folderOf(entry.workspace) === folder)
       children.push(React.createElement('div', {
@@ -1477,8 +1615,31 @@ export function BetterWorkspace(props) {
         role: 'group',
         'aria-label': folder,
         title: folded ? 'Expand ' + folder : 'Collapse ' + folder,
-        style: WS_FOLDER_ROW,
+        style: Object.assign({}, WS_FOLDER_ROW, {
+          background: dropping === 'folder:' + folder
+            ? 'var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.05))'
+            : undefined,
+        }),
         onClick: () => setFolders((prev) => Object.assign({}, prev, { [folder]: prev[folder] !== true })),
+        onDragOver: (event) => {
+          if (!drag || drag.kind !== 'workspace') return
+          if (folderOf(rows.find((entry) => entry.workspace.workspaceId === drag.id)?.workspace) === folder) return
+          event.preventDefault()
+          setDropping('folder:' + folder)
+        },
+        onDragLeave: () => setDropping(null),
+        onDrop: (event) => {
+          event.preventDefault()
+          setDropping(null)
+          if (!drag || drag.kind !== 'workspace') return
+          const moving = rows.find((entry) => entry.workspace.workspaceId === drag.id)
+          if (!moving || folderOf(moving.workspace) === folder) return
+          const title = fileUnder(workspaceLabel(moving.workspace), folder)
+          Promise.resolve()
+            .then(() => services.renameWorkspace(moving.workspace.workspaceId, title))
+            .then(() => setNotice('Filed under ' + folder + '.'))
+            .catch(() => setNotice('Could not file that workspace.'))
+        },
       },
       React.createElement('span', { 'aria-hidden': 'true' }, folded ? '›' : '⌄'),
       React.createElement('span', { style: WS_TITLE }, folder),
@@ -1512,8 +1673,14 @@ export function BetterWorkspace(props) {
       onClick: () => toggleWorkspace(workspace.workspaceId),
       onContextMenu: (event) => openWorkspaceMenu(event, workspace),
       title: looks.note || undefined,
-      onMouseEnter: () => setHover('workspace:' + workspace.workspaceId),
-      onMouseLeave: () => setHover(null),
+      onMouseEnter: (event) => {
+        setHover('workspace:' + workspace.workspaceId)
+        const note = appearanceOf(look, workspace.workspaceId).note
+        if (!note) return
+        const box = event.currentTarget.getBoundingClientRect()
+        setCard({ text: note, top: box.bottom + 6, left: Math.max(8, box.left) })
+      },
+      onMouseLeave: () => { setHover(null); setCard(null) },
       onDragStart: () => setDrag({ kind: 'workspace', id: workspace.workspaceId }),
       onDragOver: (event) => {
         if (!drag || drag.kind !== 'workspace' || drag.id === workspace.workspaceId) return
@@ -1552,6 +1719,58 @@ export function BetterWorkspace(props) {
     }
   })
 
+  const filled = new Set(rows.map(row => folderKey(row.workspace)).filter(Boolean))
+  for (const folder of folderNames) {
+    if (filled.has(folder)) continue
+    const empty = folders[folder] === true
+    children.push(React.createElement('div', {
+      key: 'empty-folder:' + folder,
+      'data-polish-ws-empty': folder,
+      role: 'group',
+      'aria-label': folder,
+      title: 'Drop a workspace here to file it in ' + folder,
+      style: Object.assign({}, WS_FOLDER_ROW, {
+        background: dropping === 'folder:' + folder
+          ? 'var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.05))'
+          : undefined,
+      }),
+      onDragOver: (event) => {
+        if (!drag || drag.kind !== 'workspace') return
+        event.preventDefault()
+        setDropping('folder:' + folder)
+      },
+      onDragLeave: () => setDropping(null),
+      onDrop: (event) => {
+        event.preventDefault()
+        setDropping(null)
+        if (!drag || drag.kind !== 'workspace') return
+        const moving = rows.find((entry) => entry.workspace.workspaceId === drag.id)
+        if (!moving) return
+        const title = fileUnder(workspaceLabel(moving.workspace), folder)
+        Promise.resolve()
+          .then(() => services.renameWorkspace(moving.workspace.workspaceId, title))
+          .then(() => setNotice('Filed under ' + folder + '.'))
+          .catch(() => setNotice('Could not file that workspace.'))
+      },
+    },
+    React.createElement('span', { 'aria-hidden': 'true' }, '⌄'),
+    React.createElement('span', { style: WS_TITLE }, folder),
+    React.createElement('span', { style: WS_COUNT_NOTE }, 'empty'),
+    React.createElement('button', {
+      type: 'button',
+      'data-polish-folder-remove': folder,
+      'aria-label': 'Remove the empty folder ' + folder,
+      title: 'Remove this empty folder',
+      style: WS_ROW_ACTION,
+      onClick: (event) => {
+        event.stopPropagation()
+        setDeclared(removeFolder(declared, folder))
+        setNotice('Folder removed.')
+      },
+    }, '×')))
+    if (!empty) continue
+  }
+
   if (archivedSessions.length > 0) {
     children.push(React.createElement('div', {
       key: 'archived-head',
@@ -1609,6 +1828,8 @@ export function BetterWorkspace(props) {
   sessionMenu,
   glyphMenu,
   noteMenu,
+  folderMenu,
+  noteCard,
   archivedMenu,
   paintMenu,
   workspaceMenu)

package/docs/better-workspace.md

@@ -186,3 +186,27 @@ and the note surfaces as the row's tooltip, so it costs no vertical space in the
 
 Glyph validation is deliberately narrow (one to four characters): the field is a badge in a
 16 px slot, not a place to paste a sentence.
+
+## Filing by drag
+
+Dropping a workspace on a folder header files it there: the title is rewritten to
+`Folder/Name` through the Host's own rename, so the move is durable and the shipped
+browser (when this switch is off) sees exactly the same structure. `fileUnder(label, folder)`
+replaces any previous prefix instead of stacking it — dragging `A/B/Gamma` onto `C` gives
+`C/Gamma`, not `C/A/B/Gamma` — and a workspace already inside the target folder is not a
+drop target, so the gesture cannot rename something onto itself.
+
+## The note card
+
+A workspace note shows as a small card under the row on hover rather than as a browser
+tooltip: tooltips are slow to appear, unstyleable, and vanish when the pointer leaves. The
+card is portalled, `pointer-events: none`, and only exists while a note does.
+
+## Folders without content
+
+A folder can be declared before anything lives in it (**New folder…** in a workspace menu).
+It draws its own header with the word `empty` where the count would be, accepts a workspace
+drop like any other folder header, and carries a `×` that removes the declaration. Declared
+names live in `aryacode-polish:folders.v1`; the tree draws the names its workspaces imply
+first and the declared ones after, so an empty folder never jumps ahead of real content and
+disappears on its own the moment the first workspace is filed into it.

package/lib/client.js

@@ -53,7 +53,7 @@ window.__ModuleLoader__.load({
     ]
     const ROW_ID = "polish"
     const ROW_KEY = "@aryacode/dsh-aryacode-polish" + '#' + ROW_ID
-    const CLIENT_VERSION = "0.16.0"
+    const CLIENT_VERSION = "0.18.0"
 
 /* html2canvas 1.4.1 — MIT, vendored from vendor/html2canvas.min.js.
  * A UMD build, so it assigns itself to globalThis; face.js reads it lazily. */
@@ -587,6 +587,68 @@ window.__ModuleLoader__.load({
     const ORDER_KEY = 'aryacode-polish:workspace-order.v1'
     const FOLD_KEY = 'aryacode-polish:folded.v1'
     const DENSITY_KEY = 'aryacode-polish:density.v1'
+    const FOLDER_KEY = 'aryacode-polish:folders.v1'
+
+    const cleanFolder = (name) => {
+      const value = String(name || '').trim().replace(/^\/+|\/+$/g, '')
+      return value && !value.includes('/') ? value : undefined
+    }
+
+    /** Add a folder name, refusing empties, duplicates and anything nested. */
+    function addFolder(list, name) {
+      const folder = cleanFolder(name)
+      const names = Array.isArray(list) ? list.slice() : []
+      if (!folder || names.includes(folder)) return names
+      names.push(folder)
+      return names
+    }
+
+    /** Remove a folder name from the declared list. */
+    function removeFolder(list, name) {
+      const folder = cleanFolder(name)
+      const names = Array.isArray(list) ? list : []
+      return folder ? names.filter((entry) => entry !== folder) : names.slice()
+    }
+
+    function readFolders(storage) {
+      try {
+        const store = storage || (typeof localStorage === 'undefined' ? undefined : localStorage)
+        if (!store) return []
+        const parsed = JSON.parse(store.getItem(FOLDER_KEY) || '[]')
+        if (!Array.isArray(parsed)) return []
+        return parsed.map(cleanFolder).filter(Boolean)
+      } catch {
+        return []
+      }
+    }
+
+    function writeFolders(list, storage) {
+      try {
+        const store = storage || (typeof localStorage === 'undefined' ? undefined : localStorage)
+        if (!store) return
+        store.setItem(FOLDER_KEY, JSON.stringify((Array.isArray(list) ? list : []).map(cleanFolder).filter(Boolean)))
+      } catch {
+        /* folders are a convenience, not a requirement */
+      }
+    }
+
+    /**
+     * Folder names the tree must draw: the ones its workspaces imply, then any declared but
+     * still empty. Declared folders keep their order so an empty folder does not jump around
+     * when the first workspace lands in it.
+     */
+    function folderNamesOf(rows, declared) {
+      const seen = []
+      for (const row of rows || []) {
+        const name = folderKey(row.workspace)
+        if (name && !seen.includes(name)) seen.push(name)
+      }
+      for (const name of declared || []) {
+        const folder = cleanFolder(name)
+        if (folder && !seen.includes(folder)) seen.push(folder)
+      }
+      return seen
+    }
 
     const DENSITIES = ['comfortable', 'compact']
 
@@ -676,6 +738,22 @@ window.__ModuleLoader__.load({
       color: 'var(--dsw-alias-label-quaternary, #8a8a8a)',
     }
 
+    const WS_NOTE_CARD = {
+      position: 'fixed',
+      zIndex: 1250,
+      maxWidth: '260px',
+      padding: '6px 9px',
+      borderRadius: 'var(--dsw-radius-md, 8px)',
+      border: '0.5px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12))',
+      background: 'Canvas',
+      color: 'var(--dsw-alias-label-secondary, #61666b)',
+      fontSize: 'calc(var(--dsh-content-font-size-secondary, 13px) - 1px)',
+      lineHeight: 1.35,
+      boxShadow: 'var(--dsw-elevation-prominent, 0 2px 8px rgba(0, 0, 0, 0.08))',
+      pointerEvents: 'none',
+      whiteSpace: 'pre-wrap',
+    }
+
     const WS_GLYPH = {
       flex: 'none',
       width: '16px',
@@ -817,6 +895,19 @@ window.__ModuleLoader__.load({
      * written to the Host and renaming a workspace is enough to move it between
      * folders — the same idea as the reference plugin, without its "/" toggle.
      */
+    /**
+     * The title a workspace needs to sit under `folder`: its own name moved behind the
+     * folder prefix, with any previous prefix replaced rather than stacked.
+     */
+    function fileUnder(label, folder) {
+      const name = String(label || '').trim()
+      const target = String(folder || '').trim()
+      if (!name || !target) return name
+      const cut = name.lastIndexOf('/')
+      const bare = (cut >= 0 ? name.slice(cut + 1) : name).trim()
+      return bare ? target + '/' + bare : target
+    }
+
     function folderKey(workspace) {
       const label = workspaceLabel(workspace)
       const cut = label.lastIndexOf('/')
@@ -1034,12 +1125,16 @@ window.__ModuleLoader__.load({
       const [dropping, setDropping] = React.useState(null)
       const [look, setLook] = React.useState(() => readAppearance())
       const [noteDraft, setNoteDraft] = React.useState('')
+      const [card, setCard] = React.useState(null)
       const folded = React.useMemo(() => readFolded(), [])
       const [folders, setFolders] = React.useState(folded.folders)
+      const [declared, setDeclared] = React.useState(() => readFolders())
+      const [folderDraft, setFolderDraft] = React.useState('')
       const [switcher, setSwitcher] = React.useState(null)
       const [density, setDensity] = React.useState(() => readDensity())
       const [archiveOpen, setArchiveOpen] = React.useState(false)
       React.useEffect(() => { writeFolded({ workspaces: expanded, folders }) }, [expanded, folders])
+      React.useEffect(() => { writeFolders(declared) }, [declared])
       const [renaming, setRenaming] = React.useState(null)
       const commitRename = async () => {
         const draft = renaming
@@ -1091,7 +1186,7 @@ window.__ModuleLoader__.load({
       const entries = React.useMemo(() => rowMenuEntries(slots), [slots, workspaceList.length, sessionList.length])
       const totalCount = allRows.reduce((sum, row) => sum + row.sessions.length, 0)
       const shownCount = rows.reduce((sum, row) => sum + row.sessions.length, 0)
-      const folderNames = Array.from(new Set(rows.map(row => folderKey(row.workspace)).filter(Boolean)))
+      const folderNames = folderNamesOf(rows, declared)
       // One click should always do the useful thing: if anything is folded, the button
       // expands everything (folders included); only when nothing is folded does it fold.
       const anyFolded = rows.some(row => expanded[row.workspace.workspaceId] === false)
@@ -1295,6 +1390,17 @@ window.__ModuleLoader__.load({
                 }
               },
             }, 'Restore saved order'),
+          React.createElement('button', {
+            type: 'button',
+            'data-polish-folder-new': 'open',
+            style: WS_MENU_ITEM,
+            onClick: () => {
+              const anchor = menu.anchor
+              closeMenu()
+              setFolderDraft('')
+              setMenu({ kind: 'folder', anchor })
+            },
+          }, 'New folder…'),
           React.createElement('button', {
             type: 'button',
             'data-polish-glyph': 'open',
@@ -1362,6 +1468,30 @@ window.__ModuleLoader__.load({
           }, 'Unarchive session'))
         : null
 
+      const folderMenu = menu && menu.kind === 'folder'
+        ? React.createElement(RowMenu, { anchor: menu.anchor, onClose: closeMenu },
+          React.createElement('input', {
+            'data-polish-folder-input': 'true',
+            type: 'text',
+            value: folderDraft,
+            placeholder: 'Folder name',
+            autoFocus: true,
+            style: WS_NOTE_INPUT,
+            onChange: (event) => setFolderDraft(event.target.value),
+            onKeyDown: (event) => {
+              if (event.key === 'Escape') { event.stopPropagation(); closeMenu(); return }
+              if (event.key !== 'Enter') return
+              const next = addFolder(declared, folderDraft)
+              closeMenu()
+              if (next.length === declared.length) { setNotice('That folder already exists.'); return }
+              setDeclared(next)
+              setFolders((prev) => Object.assign({}, prev, { [next[next.length - 1]]: false }))
+              setNotice('Folder added.')
+            },
+          }),
+          React.createElement('div', { style: WS_MENU_HINT }, 'Enter creates, Escape cancels'))
+        : null
+
       const glyphMenu = menu && menu.kind === 'glyph'
         ? React.createElement(RowMenu, { anchor: menu.anchor, onClose: closeMenu },
           React.createElement('div', { style: WS_GLYPH_GRID },
@@ -1416,6 +1546,13 @@ window.__ModuleLoader__.load({
           React.createElement('div', { style: WS_MENU_HINT }, 'Enter saves, Escape cancels'))
         : null
 
+      const noteCard = card
+        ? ReactDOM.createPortal(React.createElement('div', {
+          'data-polish-note-card': 'true',
+          style: Object.assign({}, WS_NOTE_CARD, { top: card.top, left: card.left }),
+        }, card.text), document.body)
+        : null
+
       const paintMenu = menu && menu.kind === 'paint'
         ? (() => {
           const workspace = menu.workspace
@@ -1670,6 +1807,7 @@ window.__ModuleLoader__.load({
         const folded = folder !== undefined && folders[folder] === true
 
         if (folder !== undefined && !announced[folder]) {
+          /* handled below for both filled and empty folders */
           announced[folder] = true
           const inside = rows.filter((entry) => folderOf(entry.workspace) === folder)
           children.push(React.createElement('div', {
@@ -1678,8 +1816,31 @@ window.__ModuleLoader__.load({
             role: 'group',
             'aria-label': folder,
             title: folded ? 'Expand ' + folder : 'Collapse ' + folder,
-            style: WS_FOLDER_ROW,
+            style: Object.assign({}, WS_FOLDER_ROW, {
+              background: dropping === 'folder:' + folder
+                ? 'var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.05))'
+                : undefined,
+            }),
             onClick: () => setFolders((prev) => Object.assign({}, prev, { [folder]: prev[folder] !== true })),
+            onDragOver: (event) => {
+              if (!drag || drag.kind !== 'workspace') return
+              if (folderOf(rows.find((entry) => entry.workspace.workspaceId === drag.id)?.workspace) === folder) return
+              event.preventDefault()
+              setDropping('folder:' + folder)
+            },
+            onDragLeave: () => setDropping(null),
+            onDrop: (event) => {
+              event.preventDefault()
+              setDropping(null)
+              if (!drag || drag.kind !== 'workspace') return
+              const moving = rows.find((entry) => entry.workspace.workspaceId === drag.id)
+              if (!moving || folderOf(moving.workspace) === folder) return
+              const title = fileUnder(workspaceLabel(moving.workspace), folder)
+              Promise.resolve()
+                .then(() => services.renameWorkspace(moving.workspace.workspaceId, title))
+                .then(() => setNotice('Filed under ' + folder + '.'))
+                .catch(() => setNotice('Could not file that workspace.'))
+            },
           },
           React.createElement('span', { 'aria-hidden': 'true' }, folded ? '›' : '⌄'),
           React.createElement('span', { style: WS_TITLE }, folder),
@@ -1713,8 +1874,14 @@ window.__ModuleLoader__.load({
           onClick: () => toggleWorkspace(workspace.workspaceId),
           onContextMenu: (event) => openWorkspaceMenu(event, workspace),
           title: looks.note || undefined,
-          onMouseEnter: () => setHover('workspace:' + workspace.workspaceId),
-          onMouseLeave: () => setHover(null),
+          onMouseEnter: (event) => {
+            setHover('workspace:' + workspace.workspaceId)
+            const note = appearanceOf(look, workspace.workspaceId).note
+            if (!note) return
+            const box = event.currentTarget.getBoundingClientRect()
+            setCard({ text: note, top: box.bottom + 6, left: Math.max(8, box.left) })
+          },
+          onMouseLeave: () => { setHover(null); setCard(null) },
           onDragStart: () => setDrag({ kind: 'workspace', id: workspace.workspaceId }),
           onDragOver: (event) => {
             if (!drag || drag.kind !== 'workspace' || drag.id === workspace.workspaceId) return
@@ -1753,6 +1920,58 @@ window.__ModuleLoader__.load({
         }
       })
 
+      const filled = new Set(rows.map(row => folderKey(row.workspace)).filter(Boolean))
+      for (const folder of folderNames) {
+        if (filled.has(folder)) continue
+        const empty = folders[folder] === true
+        children.push(React.createElement('div', {
+          key: 'empty-folder:' + folder,
+          'data-polish-ws-empty': folder,
+          role: 'group',
+          'aria-label': folder,
+          title: 'Drop a workspace here to file it in ' + folder,
+          style: Object.assign({}, WS_FOLDER_ROW, {
+            background: dropping === 'folder:' + folder
+              ? 'var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.05))'
+              : undefined,
+          }),
+          onDragOver: (event) => {
+            if (!drag || drag.kind !== 'workspace') return
+            event.preventDefault()
+            setDropping('folder:' + folder)
+          },
+          onDragLeave: () => setDropping(null),
+          onDrop: (event) => {
+            event.preventDefault()
+            setDropping(null)
+            if (!drag || drag.kind !== 'workspace') return
+            const moving = rows.find((entry) => entry.workspace.workspaceId === drag.id)
+            if (!moving) return
+            const title = fileUnder(workspaceLabel(moving.workspace), folder)
+            Promise.resolve()
+              .then(() => services.renameWorkspace(moving.workspace.workspaceId, title))
+              .then(() => setNotice('Filed under ' + folder + '.'))
+              .catch(() => setNotice('Could not file that workspace.'))
+          },
+        },
+        React.createElement('span', { 'aria-hidden': 'true' }, '⌄'),
+        React.createElement('span', { style: WS_TITLE }, folder),
+        React.createElement('span', { style: WS_COUNT_NOTE }, 'empty'),
+        React.createElement('button', {
+          type: 'button',
+          'data-polish-folder-remove': folder,
+          'aria-label': 'Remove the empty folder ' + folder,
+          title: 'Remove this empty folder',
+          style: WS_ROW_ACTION,
+          onClick: (event) => {
+            event.stopPropagation()
+            setDeclared(removeFolder(declared, folder))
+            setNotice('Folder removed.')
+          },
+        }, '×')))
+        if (!empty) continue
+      }
+
       if (archivedSessions.length > 0) {
         children.push(React.createElement('div', {
           key: 'archived-head',
@@ -1810,6 +2029,8 @@ window.__ModuleLoader__.load({
       sessionMenu,
       glyphMenu,
       noteMenu,
+      folderMenu,
+      noteCard,
       archivedMenu,
       paintMenu,
       workspaceMenu)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aryacode/dsh-aryacode-polish",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "description": "AryaCode Polish: one install for the small things that make AryaCode feel finished. One Plugins row, one switch per quality-of-life feature.",
   "keywords": [
     "dsh",