@aryacode/dsh-aryacode-polish 0.17.0 → 0.18.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # 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

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']
 
@@ -865,10 +927,13 @@ export function BetterWorkspace(props) {
   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
@@ -920,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)
@@ -1124,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',
@@ -1191,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 },
@@ -1506,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', {
@@ -1618,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',
@@ -1675,6 +1828,7 @@ export function BetterWorkspace(props) {
   sessionMenu,
   glyphMenu,
   noteMenu,
+  folderMenu,
   noteCard,
   archivedMenu,
   paintMenu,

package/docs/better-workspace.md

@@ -201,3 +201,12 @@ drop target, so the gesture cannot rename something onto itself.
 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.17.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']
 
@@ -1066,10 +1128,13 @@ window.__ModuleLoader__.load({
       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
@@ -1121,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)
@@ -1325,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',
@@ -1392,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 },
@@ -1707,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', {
@@ -1819,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',
@@ -1876,6 +2029,7 @@ window.__ModuleLoader__.load({
       sessionMenu,
       glyphMenu,
       noteMenu,
+      folderMenu,
       noteCard,
       archivedMenu,
       paintMenu,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aryacode/dsh-aryacode-polish",
-  "version": "0.17.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",