From ef7c01b7875e22cd30c879a91839dccd843105bb Mon Sep 17 00:00:00 2001
From: Sharon Stratsianis <sstratsianis@gmail.com>
Date: Tue, 27 Oct 2026 22:14:48 +1100
Subject: [PATCH 1/5] first pass at a mobile view

---
 package.json                                  |   2 +-
 .../FolderPaneContainer.styles.css            |  26 ++-
 .../FolderPaneContainer.ts                    |   2 +-
 .../FolderPaneContent.styles.css              |   5 +
 .../FolderPaneSidebar.styles.css              |   3 +-
 .../folder-pane-sidebar/FolderPaneSidebar.ts  |   6 +-
 .../FolderPaneStorageHeader.styles.css        | 158 +++++++++++++++++-
 .../FolderPaneStorageHeader.ts                |  59 ++++++-
 .../folder-pane-view/FolderPaneView.ts        |  15 +-
 src/styles/folderPane.css                     |  20 ++-
 10 files changed, 260 insertions(+), 36 deletions(-)

diff --git a/package.json b/package.json
index 185071e..282a833 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "lint-fix": "eslint --fix",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
-    "prepublishOnly": "npm run build && npm run lint",
+    "prepublishOnly": "npm run build && npm run lint && npm run test",
     "preversion": "npm run typecheck && npm run lint",
     "postpublish": "git push origin staging",
     "start": "vite"
diff --git a/src/components/folder-pane-container/FolderPaneContainer.styles.css b/src/components/folder-pane-container/FolderPaneContainer.styles.css
index 56789dc..c3c9da6 100644
--- a/src/components/folder-pane-container/FolderPaneContainer.styles.css
+++ b/src/components/folder-pane-container/FolderPaneContainer.styles.css
@@ -65,10 +65,10 @@
 
   .resource-grid {
     display: flex;
+    align-items: center;
     flex-wrap: wrap;
     flex: 1 1 auto;
     align-content: flex-start;
-    align-items: flex-start;
     gap: 20px;
     width: 100%;
     min-height: 0;
@@ -83,9 +83,10 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    flex: 0 0 auto;
-    width: 206px;
-    max-width: 100%;
+    flex: 1 1 206px;
+    width: min(206px, 100%);
+    min-width: 0;
+    max-width: 206px;
     height: 145.824px;
     border-radius: 5px;
     border: 1px solid var(--solid-ui-color-gray-200, #cbd5e1);
@@ -197,6 +198,23 @@
     outline-offset: -2px;
   }
 
+  @media (max-width: 768px) {
+    .resource-grid {
+      gap: 15px;
+    }
+
+    .resource-grid,
+    .resource-list {
+      padding: 0;
+    }
+
+    .resource-grid-item {
+      flex: 0 0 calc((100% - 15px) / 2);
+      width: calc((100% - 15px) / 2);
+      max-width: none;
+    }
+  }
+
   .resource-list-main {
     display: flex;
     align-items: center;
diff --git a/src/components/folder-pane-container/FolderPaneContainer.ts b/src/components/folder-pane-container/FolderPaneContainer.ts
index 4d9200e..9419bad 100644
--- a/src/components/folder-pane-container/FolderPaneContainer.ts
+++ b/src/components/folder-pane-container/FolderPaneContainer.ts
@@ -110,7 +110,7 @@ export default class FolderPaneContainer extends WebComponent {
   private isRootSpecialFolder (resource: Resource) {
     if (!resource.isContainer) return false
     const label = utils.label(resource.subject).toLowerCase()
-    return label === 'public' || label === 'trash'
+    return label === 'public'
   }
 
   private getResourcesFromStore () {
diff --git a/src/components/folder-pane-content/FolderPaneContent.styles.css b/src/components/folder-pane-content/FolderPaneContent.styles.css
index 33d3d16..0e624d4 100644
--- a/src/components/folder-pane-content/FolderPaneContent.styles.css
+++ b/src/components/folder-pane-content/FolderPaneContent.styles.css
@@ -2,6 +2,11 @@
   display: flex;
   flex-direction: column;
   flex: 1 1 0%;
+  padding: 10px 16px;
+  align-items: flex-start;
+  gap: 20px;
+  flex-shrink: 0;
+  align-self: stretch;
   width: 100%;
   min-width: 0;
   min-height: 0;
diff --git a/src/components/folder-pane-sidebar/FolderPaneSidebar.styles.css b/src/components/folder-pane-sidebar/FolderPaneSidebar.styles.css
index d1fcd42..3f4b305 100644
--- a/src/components/folder-pane-sidebar/FolderPaneSidebar.styles.css
+++ b/src/components/folder-pane-sidebar/FolderPaneSidebar.styles.css
@@ -122,8 +122,7 @@
   }
 
   .resource-row-special icon-lucide-folder,
-  .resource-row-special icon-lucide-globe,
-  .resource-row-special icon-lucide-trash-2 {
+  .resource-row-special icon-lucide-globe {
     width: 16px;
     height: 16px;
     flex-shrink: 0;
diff --git a/src/components/folder-pane-sidebar/FolderPaneSidebar.ts b/src/components/folder-pane-sidebar/FolderPaneSidebar.ts
index d39f8e2..f15ef76 100644
--- a/src/components/folder-pane-sidebar/FolderPaneSidebar.ts
+++ b/src/components/folder-pane-sidebar/FolderPaneSidebar.ts
@@ -10,11 +10,10 @@ import '~icons/lucide/chevron-right'
 import '~icons/lucide/circle-small'
 import '~icons/lucide/folder'
 import '~icons/lucide/globe'
-import '~icons/lucide/trash-2'
 import { getResourcesForContainer, type FolderPaneResourceLogic } from '../../helpers'
 import * as debug from '../../debug'
 
-type SpecialIcon = 'folder' | 'globe' | 'trash'
+type SpecialIcon = 'folder' | 'globe'
 
 @customElement('folder-pane-sidebar')
 export default class FolderPaneSidebar extends WebComponent {
@@ -203,7 +202,6 @@ export default class FolderPaneSidebar extends WebComponent {
 
   private renderSpecialIcon (icon: SpecialIcon) {
     if (icon === 'globe') return html`<icon-lucide-globe></icon-lucide-globe>`
-    if (icon === 'trash') return html`<icon-lucide-trash-2></icon-lucide-trash-2>`
     return html`<icon-lucide-folder></icon-lucide-folder>`
   }
 
@@ -247,7 +245,6 @@ export default class FolderPaneSidebar extends WebComponent {
       return index >= 0 ? orderedResources.splice(index, 1)[0] : null
     }
     const publicResource = takeNamed('public')
-    const trashResource = takeNamed('trash')
 
     return html`
       <ul role="tree" class="resource-tree" aria-label="Storage resources">
@@ -261,7 +258,6 @@ export default class FolderPaneSidebar extends WebComponent {
           true
         )}
         ${publicResource ? this.renderResourceItem(publicResource, 'Public', 'globe') : nothing}
-        ${trashResource ? this.renderResourceItem(trashResource, 'Trash', 'trash') : nothing}
       </ul>
     `
   }
diff --git a/src/components/folder-pane-storage-header/FolderPaneStorageHeader.styles.css b/src/components/folder-pane-storage-header/FolderPaneStorageHeader.styles.css
index ee66177..b93ff9d 100644
--- a/src/components/folder-pane-storage-header/FolderPaneStorageHeader.styles.css
+++ b/src/components/folder-pane-storage-header/FolderPaneStorageHeader.styles.css
@@ -15,6 +15,43 @@
   padding: 10px 0;
 }
 
+.folder-pane-storage-header-locations {
+  display: none;
+  align-items: center;
+  gap: 4px;
+  flex: 0 0 auto;
+}
+
+.folder-pane-storage-header-locations button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5.6px;
+  padding: 5.6px 8px;
+  border: 0;
+  background: transparent;
+  color: var(--solid-ui-color-gray-600, #4a5565);
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--solid-ui-font-size-sm, 0.875rem);
+  font-weight: 500;
+  text-align: center;
+  border-bottom: 2px solid transparent;
+}
+
+.folder-pane-storage-header-locations button[aria-current='page'] {
+  border-bottom-color: var(--solid-ui-color-primary, #7c4dff);
+  color: var(--solid-ui-color-primary, #7c4dff);
+  font-weight: 600;
+}
+
+.folder-pane-storage-location icon-lucide-folder,
+.folder-pane-storage-location icon-lucide-globe {
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 auto;
+}
+
 .folder-pane-storage-header-breadcrumbs,
 .folder-pane-storage-header-breadcrumbs ol,
 .folder-pane-storage-header-breadcrumbs li,
@@ -26,7 +63,7 @@
 
 .folder-pane-storage-header-breadcrumbs {
   min-width: 0;
-  gap: 0.35rem;
+  gap: 5.6px;
   overflow-x: auto;
   overflow-y: hidden;
 }
@@ -41,7 +78,7 @@
 .folder-pane-storage-header-breadcrumbs ol {
   min-width: 0;
   flex-wrap: nowrap;
-  gap: 0.35rem;
+  gap: 5.6px;
   margin: 0;
   padding: 0;
   list-style: none;
@@ -51,7 +88,7 @@
 
 .folder-pane-storage-header-breadcrumbs li {
   min-width: 0;
-  gap: 0.35rem;
+  gap: 5.6px;
 }
 
 .folder-pane-storage-header-breadcrumbs button {
@@ -75,17 +112,17 @@
 .folder-pane-storage-header-toolbar {
   flex: 0 0 auto;
   justify-content: flex-end;
-  gap: 0.5rem;
+  gap: 8px;
   min-width: 0;
 }
 
 .folder-pane-storage-header-search {
   display: none;
   align-items: center;
-  gap: 0.35rem;
+  gap: 5.6px;
   min-width: 8rem;
   max-width: 14rem;
-  padding: 0.25rem 0.5rem;
+  padding: 4px 8px;
   border: 1px solid var(--solid-ui-color-gray-300, #d1d5dc);
   border-radius: 0.35rem;
   color: var(--solid-ui-color-gray-500, #6a7282);
@@ -158,6 +195,42 @@
   margin-left: 22px;
 }
 
+.folder-pane-storage-header-add-trigger {
+  display: inline-flex;
+  align-items: center;
+}
+
+.folder-pane-storage-header-add-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5.6px;
+  min-height: 36px;
+  padding: 5.6px 12px;
+  border: 0;
+  border-radius: 5.6px;
+  background: var(--solid-ui-color-primary, #7c4dff);
+  color: var(--solid-ui-color-white, #ffffff);
+  cursor: pointer;
+  font: inherit;
+}
+
+.folder-pane-storage-header-add-button:hover {
+  background: var(--solid-ui-color-primary-hover, #b9a2ff);
+}
+
+.folder-pane-storage-header-add-button:focus-visible {
+  outline: 2px solid var(--solid-ui-color-primary, #7c4dff);
+  outline-offset: 2px;
+}
+
+.folder-pane-storage-header-add-button icon-lucide-plus,
+.folder-pane-storage-header-add-chevron {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex: 0 0 auto;
+}
+
 .folder-pane-storage-header-add-menu img[slot="left-icon"] {
   display: block;
   width: 1.25rem;
@@ -170,3 +243,76 @@
   width: 13.333px;
   height: 12.664px;
 }
+
+@media (max-width: 768px) {
+  .folder-pane-storage-header {
+    flex-wrap: wrap;
+    gap: 8px;
+    border-bottom: 1px solid var(--solid-ui-color-gray-200, #e5e7eb);
+  }
+
+  .folder-pane-storage-header-breadcrumbs {
+    display: none;
+  }
+
+  .folder-pane-storage-header-locations {
+    display: flex;
+    width: 100%;
+  }
+
+  .folder-pane-storage-header-breadcrumbs {
+    flex: 1 1 auto;
+    max-width: 100%;
+  }
+
+  .folder-pane-storage-header-toolbar {
+    flex: 0 1 auto;
+    margin-left: auto;
+  }
+
+  .folder-pane-storage-header-add-menu {
+    margin: 0;
+  }
+
+  .folder-pane-storage-header-add-trigger {
+    position: fixed;
+    right: 30px;
+    bottom: 50px;
+    z-index: 200;
+    display: flex;
+    width: 50px;
+    height: 50px;
+    box-sizing: border-box;
+    padding: 9.722px 13.889px;
+    justify-content: center;
+    align-items: center;
+    gap: 11.111px;
+    aspect-ratio: 1 / 1;
+    border-radius: 6.944px;
+    background: var(--solid-ui-color-primary, #7c4dff);
+    box-shadow: 1.389px 5.556px 9.722px 0 rgb(0 0 0 / 56%);
+  }
+
+  .folder-pane-storage-header-add-button {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    min-height: 0;
+    padding: 0;
+    background: transparent;
+  }
+
+  .folder-pane-storage-header-add-button:hover {
+    background: transparent;
+  }
+
+  .folder-pane-storage-header-add-button icon-lucide-plus {
+    width: 20px;
+    height: 20px;
+  }
+
+  .folder-pane-storage-header-add-label,
+  .folder-pane-storage-header-add-chevron {
+    display: none;
+  }
+}
diff --git a/src/components/folder-pane-storage-header/FolderPaneStorageHeader.ts b/src/components/folder-pane-storage-header/FolderPaneStorageHeader.ts
index 59e8639..c208ffc 100644
--- a/src/components/folder-pane-storage-header/FolderPaneStorageHeader.ts
+++ b/src/components/folder-pane-storage-header/FolderPaneStorageHeader.ts
@@ -8,6 +8,8 @@ import 'solid-ui/components/button'
 import 'solid-ui/components/menu'
 import 'solid-ui/components/menu-item'
 import '~icons/lucide/folder-open'
+import '~icons/lucide/folder'
+import '~icons/lucide/globe'
 import '~icons/lucide/layout-grid'
 import '~icons/lucide/list'
 import '~icons/lucide/chevron-down'
@@ -28,6 +30,9 @@ export default class FolderPaneStorageHeader extends WebComponent {
   @property({ attribute: false })
   accessor selectedResource: NamedNode | undefined = undefined
 
+  @property({ attribute: false })
+  accessor publicResource: NamedNode | undefined = undefined
+
   @property({ attribute: false })
   accessor browserContext: DataBrowserContext | undefined = undefined
 
@@ -118,6 +123,23 @@ export default class FolderPaneStorageHeader extends WebComponent {
     }))
   }
 
+  private isWithin (resource: NamedNode | undefined, ancestor: NamedNode | undefined) {
+    if (!resource || !ancestor) return false
+    let current: NamedNode | undefined = resource
+    for (let depth = 0; current && depth < 64; depth++) {
+      if (current.sameTerm(ancestor)) return true
+      const parent = current.dir()
+      if (!parent || parent.sameTerm(current)) break
+      current = parent
+    }
+    return false
+  }
+
+  private isHomeSelected () {
+    return this.isWithin(this.selectedResource, this.subject) &&
+      !this.isWithin(this.selectedResource, this.publicResource)
+  }
+
   private updateSearch (event: Event) {
     this.dispatchEvent(new CustomEvent('folder-pane-search', {
       detail: { query: (event.target as HTMLInputElement).value },
@@ -137,6 +159,22 @@ export default class FolderPaneStorageHeader extends WebComponent {
   render () {
     return html`
       <header class="folder-pane-storage-header">
+        <nav class="folder-pane-storage-header-locations" aria-label="Storage locations">
+          <button
+            type="button"
+            class="folder-pane-storage-location"
+            aria-current=${this.isHomeSelected() ? 'page' : nothing}
+            @click=${this.selectHome}
+          ><icon-lucide-folder aria-hidden="true"></icon-lucide-folder>Home</button>
+          ${this.publicResource ? html`
+            <button
+              type="button"
+              class="folder-pane-storage-location"
+              aria-current=${this.isWithin(this.selectedResource, this.publicResource) ? 'page' : nothing}
+              @click=${() => this.selectResource(this.publicResource!)}
+            ><icon-lucide-globe aria-hidden="true"></icon-lucide-globe>Public</button>
+          ` : nothing}
+        </nav>
         <nav class="folder-pane-storage-header-breadcrumbs" aria-label="Storage breadcrumb">
           <icon-lucide-folder-open aria-hidden="true"></icon-lucide-folder-open>
           <ol>
@@ -188,15 +226,18 @@ export default class FolderPaneStorageHeader extends WebComponent {
             </div>
           </div>
           ${this.canCreate ? html`<solid-ui-menu class="folder-pane-storage-header-add-menu" placement="bottom-end">
-            <solid-ui-button
-              slot="trigger"
-              variant="primary"
-              aria-haspopup="menu"
-            >
-              <icon-lucide-plus slot="left-icon" aria-hidden="true"></icon-lucide-plus>
-              Add
-              <icon-lucide-chevron-down slot="right-icon" aria-hidden="true"></icon-lucide-chevron-down>
-            </solid-ui-button>
+            <div slot="trigger" class="folder-pane-storage-header-add-trigger">
+              <button
+                type="button"
+                class="folder-pane-storage-header-add-button"
+                aria-label="Add"
+                aria-haspopup="menu"
+              >
+                <icon-lucide-plus aria-hidden="true"></icon-lucide-plus>
+                <span class="folder-pane-storage-header-add-label">Add</span>
+                <icon-lucide-chevron-down class="folder-pane-storage-header-add-chevron" aria-hidden="true"></icon-lucide-chevron-down>
+              </button>
+            </div>
             ${this.availablePanes.map(pane => html`
               <solid-ui-menu-item @solid-ui-select=${() => this.createPane(pane)}>
                 ${pane.icon
diff --git a/src/components/folder-pane-view/FolderPaneView.ts b/src/components/folder-pane-view/FolderPaneView.ts
index 168f395..d2f98db 100644
--- a/src/components/folder-pane-view/FolderPaneView.ts
+++ b/src/components/folder-pane-view/FolderPaneView.ts
@@ -1,4 +1,4 @@
-import { aclControl, composeExplorer, customElement, FILE_EXPLORER_BACK_EVENT, FILE_EXPLORER_OPEN_PANE_EVENT, getPreferredPane, getRelevantPanes, isExplorerEvent, log, ns, showDialog, WebComponent, widgets } from 'solid-ui'
+import { aclControl, composeExplorer, customElement, FILE_EXPLORER_BACK_EVENT, FILE_EXPLORER_OPEN_PANE_EVENT, getPreferredPane, getRelevantPanes, isExplorerEvent, log, ns, showDialog, utils, WebComponent, widgets } from 'solid-ui'
 import { authn, authSession } from 'solid-logic'
 import { html, nothing } from 'lit'
 import { property, query, state } from 'lit/decorators.js'
@@ -14,7 +14,7 @@ import type FileExplorerProvider from 'solid-ui/components/file-explorer-provide
 import 'solid-ui/components/error-state'
 import 'solid-ui/components/file-explorer-header'
 import type FolderPaneContainer from '../folder-pane-container/FolderPaneContainer'
-import { getIndexedApplicationSubject, getIndexedContainer, isAccessDeniedError, isContainerResource, isJavaScriptFile, type FolderPaneResourceLogic } from '../../helpers'
+import { getIndexedApplicationSubject, getIndexedContainer, getResourcesForContainer, isAccessDeniedError, isContainerResource, isJavaScriptFile, type FolderPaneResourceLogic } from '../../helpers'
 import { invalidateRenderRequest, isCurrentRenderRequest, type RenderRequest } from './renderRequest'
 import FolderPaneCreateDialog from '../folder-pane-storage-header/FolderPaneCreateDialog'
 import { getPaneLabel } from '../../helpers'
@@ -405,7 +405,7 @@ export default class FolderPaneView extends WebComponent {
     containerView.browserContext = this.browserContext
     containerView.view = this.containerView
     containerView.searchQuery = this.searchQuery
-    containerView.hideRootSpecialFolders = this.subject
+    containerView.hideRootSpecialFolders = !this.hideStorageHeader && this.subject
       ? selectedResource.sameTerm(this.subject)
       : false
 
@@ -750,6 +750,14 @@ export default class FolderPaneView extends WebComponent {
     this.setContainerView(view)
   }
 
+  private getPublicResource () {
+    if (!this.subject) return undefined
+    for (const resource of getResourcesForContainer(this.subject, this.resourceLogic ?? null).values()) {
+      if (utils.label(resource.subject).toLowerCase() === 'public') return resource.subject
+    }
+    return undefined
+  }
+
   render () {
     if (this.fullView) {
       return html`
@@ -790,6 +798,7 @@ export default class FolderPaneView extends WebComponent {
       <folder-pane-storage-header
         .subject=${this.subject}
         .selectedResource=${this.selectedResource ?? this.subject}
+        .publicResource=${this.getPublicResource()}
         .browserContext=${this.browserContext}
         .paneList=${this.browserContext?.session.paneRegistry.list ?? []}
         .view=${this.containerView}
diff --git a/src/styles/folderPane.css b/src/styles/folderPane.css
index f6e8a1e..23152cd 100644
--- a/src/styles/folderPane.css
+++ b/src/styles/folderPane.css
@@ -59,7 +59,7 @@ folder-pane-view {
   flex: 0 0 auto;
   align-items: center;
   justify-content: flex-end;
-  gap: 0.35rem;
+  gap: 5.6px;
   padding: 10px 0;
 }
 
@@ -111,11 +111,12 @@ folder-pane-sidebar {
   flex: 1 1 0%;
   min-width: 0;
   min-height: 0;
+  position: relative;
 }
 
 .folder-pane-content-column > folder-pane-content {
   box-sizing: border-box;
-  padding: 1rem;
+  padding: 16px;
 }
 
 /* A resource explorer owns its own header/content frame; do not inset it. */
@@ -305,10 +306,19 @@ solid-ui-file-explorer-provider > .exceptionPane {
   height: var(--icon-base, 2em);
 }
 
-@media (max-width: 700px) {
+@media (max-width: 768px) {
+  .folder-pane-main-content {
+    border: 0;
+  }
+  folder-pane-sidebar {
+    display: none;
+  }
+
+  .folder-pane-main-content {
+    min-height: 0;
+  }
+
   .folder-pane {
-    border-top: solid 1px #777;
-    border-bottom: solid 1px #777;
     margin-top: var(--spacing-2xs, 0.25em);
     margin-bottom: var(--spacing-2xs, 0.25em);
   }

From 0d5fc5a61d4992178ef461ebf09781c937dc1fd3 Mon Sep 17 00:00:00 2001
From: Sharon Stratsianis <sstratsianis@gmail.com>
Date: Wed, 28 Oct 2026 18:40:54 +1100
Subject: [PATCH 2/5] Add folder pane header everywhere so everyone can switch
 between grid and list, but restrict the Add button - hide if the user does
 not have edit access. Prompt: add folder pane header to all storage views,
 remove all the code that allowed it to be hidden. Restrict the Add button to
 show only if user has access to edit.

Co-authored-by: GPT-5.6 Luna <gpt-5.6-luna@openai.com>
---
 .../folder-pane-view/FolderPaneView.ts        | 34 +++++++++++++++----
 src/folderPane.ts                             |  1 -
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/components/folder-pane-view/FolderPaneView.ts b/src/components/folder-pane-view/FolderPaneView.ts
index d2f98db..4cd07d5 100644
--- a/src/components/folder-pane-view/FolderPaneView.ts
+++ b/src/components/folder-pane-view/FolderPaneView.ts
@@ -55,10 +55,6 @@ export default class FolderPaneView extends WebComponent {
   @property({ type: Boolean, attribute: 'full-view' })
   accessor fullView = false
 
-  /** Leaves out the storage header, keeping the sidebar and content. */
-  @property({ type: Boolean, attribute: 'hide-storage-header' })
-  accessor hideStorageHeader = false
-
   @state()
   accessor selectedResource: NamedNode | undefined = undefined
 
@@ -71,8 +67,12 @@ export default class FolderPaneView extends WebComponent {
   @state()
   private accessor contentError: { title: string, message: string } | undefined = undefined
 
+  @state()
+  private accessor canCreate = false
+
   private initialLoadGeneration = 0
   private renderGeneration = 0
+  private permissionGeneration = 0
   private creationInFlight = false
   private authListenersAttached = false
   private dropProtectionAttached = false
@@ -234,6 +234,26 @@ export default class FolderPaneView extends WebComponent {
       (changedProperties.has('subject') || changedProperties.has('browserContext')) &&
       this.subject
     ) {
+      const permissionGeneration = ++this.permissionGeneration
+      this.canCreate = false
+      const resourceLogic = this.browserContext?.session.logic.resource
+      const subject = this.subject
+      if (resourceLogic) {
+        void resourceLogic.fetchMetadata(subject)
+          .then(metadata => {
+            if (
+              permissionGeneration === this.permissionGeneration &&
+              this.subject?.sameTerm(subject) === true
+            ) {
+              this.canCreate = metadata.access.canEdit
+            }
+          })
+          .catch(error => {
+            if (permissionGeneration === this.permissionGeneration) {
+              debug.warn('Unable to determine folder creation permission', error)
+            }
+          })
+      }
       if (changedProperties.has('subject') || changedProperties.has('browserContext')) {
         this.selectedResource = undefined
         this.renderGeneration++
@@ -405,7 +425,7 @@ export default class FolderPaneView extends WebComponent {
     containerView.browserContext = this.browserContext
     containerView.view = this.containerView
     containerView.searchQuery = this.searchQuery
-    containerView.hideRootSpecialFolders = !this.hideStorageHeader && this.subject
+    containerView.hideRootSpecialFolders = this.subject
       ? selectedResource.sameTerm(this.subject)
       : false
 
@@ -772,7 +792,7 @@ export default class FolderPaneView extends WebComponent {
     }
 
     return html`
-      ${this.hideStorageHeader ? nothing : this.renderStorageHeader()}
+      ${this.renderStorageHeader()}
       <div
         class="folder-pane-main-content"
         @resource-selected=${this.handleResourceSelected}
@@ -803,7 +823,7 @@ export default class FolderPaneView extends WebComponent {
         .paneList=${this.browserContext?.session.paneRegistry.list ?? []}
         .view=${this.containerView}
         .searchQuery=${this.searchQuery}
-        .canCreate=${Boolean(authn.currentUser())}
+        .canCreate=${this.canCreate}
         @folder-pane-select-home=${this.handleSelectHome}
         @folder-pane-select-resource=${this.handleSelectBreadcrumbResource}
         @folder-pane-change-view=${this.handleContainerViewChange}
diff --git a/src/folderPane.ts b/src/folderPane.ts
index 09b2750..709e5e7 100644
--- a/src/folderPane.ts
+++ b/src/folderPane.ts
@@ -84,7 +84,6 @@ export default {
     folderPaneView.subject = subject
     const folderView = folderViewFor(renderOptions)
     folderPaneView.fullView = folderView === 'container'
-    folderPaneView.hideStorageHeader = folderView === 'storage'
 
     // The pane registry is needed to open the internal pane on Alt-click.
     // addDownstreamChangeListener is a high level function which when someone else changes the resource,

From e00465ff46d17d5a322693db2dba75b16b09e62d Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Wed, 28 Oct 2026 07:44:54 +0000
Subject: [PATCH 3/5] chore: update solidos dependencies (dev:
 solid-logic@6.0.1-5 solid-ui@5.0.2-4) (latest: rdflib@2.4.1)

---
 package-lock.json | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d06bc19..9e870b2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2467,9 +2467,9 @@
       }
     },
     "node_modules/@iconify-json/lucide": {
-      "version": "1.2.147",
-      "resolved": "https://registry.npmjs.org/@iconify-json/lucide/-/lucide-1.2.147.tgz",
-      "integrity": "sha512-7Qqa/joSBeUxihWsQJx5nKcqMWtV3YrH90Jldxcx4J9ciTLavRUlpexQwRTcx9dcb7CJpISfjZTj42zD/30sqA==",
+      "version": "1.2.148",
+      "resolved": "https://registry.npmjs.org/@iconify-json/lucide/-/lucide-1.2.148.tgz",
+      "integrity": "sha512-m+39WCfRJYC2JgzOsmDuzfZCJqNZg45sm4lYDAnxMvj3F4mN9N1olCc53jMhsn0ZIZBoNV2iyrq5JIxv/GZzow==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -3860,9 +3860,9 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.11.33",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.33.tgz",
-      "integrity": "sha512-yiVKDX+qCMRKBE084lXvq9EcwFUhKZ2nU8TK1EQQuOgPNR/lmbGxXOeDdlGUqC2Zz11Cs9rk1d/8NfgBmlkt0w==",
+      "version": "2.11.34",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.34.tgz",
+      "integrity": "sha512-Aqr8mA1kIvyJ3UY5YAY7ib8LSo1DmDMbMnVqGPtsKW1LxaFQFwn9Eb3yvq2fUKJsRvaXjnAV7R5osqETapzNiA==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -4156,9 +4156,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.465",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.465.tgz",
-      "integrity": "sha512-zg4iUpbeGw7YNZsswc2xKr2uiBex2d8dELAXo92Icw3but1ULbrvK8USe6wVLaWjgJnKBARv0pchx9Owktx6wQ==",
+      "version": "1.5.467",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.467.tgz",
+      "integrity": "sha512-Nw9X371rtZmYcBSnEijnCDONILjs93biCZO34juC7MBOmK8E+GFnyD4T/WvyrlJkppul7oxg6TwvtKst9SODTw==",
       "dev": true,
       "license": "ISC"
     },
@@ -4494,9 +4494,9 @@
       }
     },
     "node_modules/exsolve": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.1.3.tgz",
-      "integrity": "sha512-kuzL9zherLQoqDeQaS55AiiIg1kb4KYXaSusTtgZTPlvKP2gGCI82LNmBNh5RjDVUXIcmgx+/Mx7vPwRzBbhJA==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.2.0.tgz",
+      "integrity": "sha512-h1pQPR9XoeSMdntRNCjyTznaume4UpfXrULBnlkZ2CUM/G5eSa+pBByGldO5uR8dxbPC+OuJXsPPNf+JZ81ADg==",
       "dev": true,
       "license": "MIT"
     },

From 61de749f6704bbbe23399fc430477716d4c99428 Mon Sep 17 00:00:00 2001
From: Sharon Stratsianis <sstratsianis@gmail.com>
Date: Wed, 28 Oct 2026 18:40:54 +1100
Subject: [PATCH 4/5] Add folder pane header everywhere so everyone can switch
 between grid and list, but restrict the Add button - hide if the user does
 not have edit access. Prompt: add folder pane header to all storage views,
 remove all the code that allowed it to be hidden. Restrict the Add button to
 show only if user has access to edit.

Co-authored-by: GPT-5.6 Luna <gpt-5.6-luna@openai.com>
---
 .../FolderPaneContainer.styles.css            |  4 ++
 .../FolderPaneContent.styles.css              |  4 +-
 .../FolderPaneStorageHeader.styles.css        |  4 +-
 .../folder-pane-view/FolderPaneView.ts        | 52 +++++++++++--------
 src/folderPane.ts                             |  3 +-
 src/styles/folderPane.css                     |  6 +++
 6 files changed, 49 insertions(+), 24 deletions(-)

diff --git a/src/components/folder-pane-container/FolderPaneContainer.styles.css b/src/components/folder-pane-container/FolderPaneContainer.styles.css
index c3c9da6..d862c40 100644
--- a/src/components/folder-pane-container/FolderPaneContainer.styles.css
+++ b/src/components/folder-pane-container/FolderPaneContainer.styles.css
@@ -12,8 +12,10 @@
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
+    height: 100%;
     min-height: 0;
     width: 100%;
+    box-sizing: border-box;
     overflow-y: auto;
     overflow-x: hidden;
     scrollbar-width: thin;
@@ -125,6 +127,8 @@
   .resource-grid-icon icon-lucide-file {
     width: 64px;
     height: 64px;
+    color: var(--solid-ui-color-gray-500, #6a7282);
+    stroke: var(--solid-ui-color-gray-500, #6a7282);
   }
 
   .resource-grid-icon--container {
diff --git a/src/components/folder-pane-content/FolderPaneContent.styles.css b/src/components/folder-pane-content/FolderPaneContent.styles.css
index 0e624d4..9bb97f6 100644
--- a/src/components/folder-pane-content/FolderPaneContent.styles.css
+++ b/src/components/folder-pane-content/FolderPaneContent.styles.css
@@ -1,12 +1,14 @@
 :host {
   display: flex;
+  box-sizing: border-box;
   flex-direction: column;
   flex: 1 1 0%;
   padding: 10px 16px;
-  align-items: flex-start;
+  align-items: stretch;
   gap: 20px;
   flex-shrink: 0;
   align-self: stretch;
+  height: 100%;
   width: 100%;
   min-width: 0;
   min-height: 0;
diff --git a/src/components/folder-pane-storage-header/FolderPaneStorageHeader.styles.css b/src/components/folder-pane-storage-header/FolderPaneStorageHeader.styles.css
index b93ff9d..8e45bb8 100644
--- a/src/components/folder-pane-storage-header/FolderPaneStorageHeader.styles.css
+++ b/src/components/folder-pane-storage-header/FolderPaneStorageHeader.styles.css
@@ -114,6 +114,7 @@
   justify-content: flex-end;
   gap: 8px;
   min-width: 0;
+  padding-right: var(--folder-pane-storage-toolbar-right-padding, 0);
 }
 
 .folder-pane-storage-header-search {
@@ -247,7 +248,8 @@
 @media (max-width: 768px) {
   .folder-pane-storage-header {
     flex-wrap: wrap;
-    gap: 8px;
+    gap: var(--folder-pane-storage-header-mobile-gap, 8px);
+    padding: var(--folder-pane-storage-header-mobile-padding, 10px 0);
     border-bottom: 1px solid var(--solid-ui-color-gray-200, #e5e7eb);
   }
 
diff --git a/src/components/folder-pane-view/FolderPaneView.ts b/src/components/folder-pane-view/FolderPaneView.ts
index 4cd07d5..6707804 100644
--- a/src/components/folder-pane-view/FolderPaneView.ts
+++ b/src/components/folder-pane-view/FolderPaneView.ts
@@ -125,6 +125,7 @@ export default class FolderPaneView extends WebComponent {
   }
 
   private handleAuthChange = () => {
+    this.refreshCreationPermission()
     this.requestUpdate()
   }
 
@@ -234,35 +235,20 @@ export default class FolderPaneView extends WebComponent {
       (changedProperties.has('subject') || changedProperties.has('browserContext')) &&
       this.subject
     ) {
-      const permissionGeneration = ++this.permissionGeneration
-      this.canCreate = false
-      const resourceLogic = this.browserContext?.session.logic.resource
-      const subject = this.subject
-      if (resourceLogic) {
-        void resourceLogic.fetchMetadata(subject)
-          .then(metadata => {
-            if (
-              permissionGeneration === this.permissionGeneration &&
-              this.subject?.sameTerm(subject) === true
-            ) {
-              this.canCreate = metadata.access.canEdit
-            }
-          })
-          .catch(error => {
-            if (permissionGeneration === this.permissionGeneration) {
-              debug.warn('Unable to determine folder creation permission', error)
-            }
-          })
-      }
       if (changedProperties.has('subject') || changedProperties.has('browserContext')) {
         this.selectedResource = undefined
         this.renderGeneration++
         this.initialLoadGeneration++
       }
+      this.refreshCreationPermission()
       void this.showInitialContainer(this.subject)
       return
     }
 
+    if (changedProperties.has('selectedResource')) {
+      this.refreshCreationPermission()
+    }
+
     if (changedProperties.has('fullView') && changedProperties.get('fullView') !== undefined) {
       if (this.selectedResource) {
         void this.showResourceInContentView(this.selectedResource)
@@ -359,6 +345,29 @@ export default class FolderPaneView extends WebComponent {
     return this.subject
   }
 
+  private refreshCreationPermission () {
+    const permissionGeneration = ++this.permissionGeneration
+    const container = this.getActiveContainer()
+    const resourceLogic = this.browserContext?.session.logic.resource
+    this.canCreate = false
+    if (!container || !resourceLogic) return
+
+    void resourceLogic.fetchMetadata(container)
+      .then(metadata => {
+        if (
+          permissionGeneration === this.permissionGeneration &&
+          this.getActiveContainer()?.sameTerm(container) === true
+        ) {
+          this.canCreate = metadata.access.canEdit
+        }
+      })
+      .catch(error => {
+        if (permissionGeneration === this.permissionGeneration) {
+          debug.warn('Unable to determine folder creation permission', error)
+        }
+      })
+  }
+
   clearContentForCreation () {
     this.resourceTarget?.replaceChildren()
   }
@@ -425,7 +434,7 @@ export default class FolderPaneView extends WebComponent {
     containerView.browserContext = this.browserContext
     containerView.view = this.containerView
     containerView.searchQuery = this.searchQuery
-    containerView.hideRootSpecialFolders = this.subject
+    containerView.hideRootSpecialFolders = !this.fullView && this.subject
       ? selectedResource.sameTerm(this.subject)
       : false
 
@@ -461,6 +470,7 @@ export default class FolderPaneView extends WebComponent {
 
     if (generation !== this.initialLoadGeneration || !this.subject?.sameTerm(subject)) return
     this.sidebar?.refreshResources?.()
+    this.requestUpdate()
     if (!this.selectedResource) {
       this.showSubject(subject)
     }
diff --git a/src/folderPane.ts b/src/folderPane.ts
index 709e5e7..956441d 100644
--- a/src/folderPane.ts
+++ b/src/folderPane.ts
@@ -15,7 +15,7 @@ export { getCreationNoun, getCreationPanes, getPaneLabel } from './helpers'
 /**
  * How a folder is presented:
  * - `explorer`: storage header, sidebar and content (the viewer's own storage, the server root)
- * - `storage`: sidebar and content, under the navbar of someone else's pod
+ * - `storage`: storage header, sidebar and content under the navbar of someone else's pod
  * - `container`: the container alone (a container URL opened on its own)
  */
 export type FolderView = 'explorer' | 'storage' | 'container'
@@ -83,6 +83,7 @@ export default {
     folderPaneView.browserContext = context
     folderPaneView.subject = subject
     const folderView = folderViewFor(renderOptions)
+    div.classList.add(`folder-pane--${folderView}`)
     folderPaneView.fullView = folderView === 'container'
 
     // The pane registry is needed to open the internal pane on Alt-click.
diff --git a/src/styles/folderPane.css b/src/styles/folderPane.css
index 23152cd..b27e354 100644
--- a/src/styles/folderPane.css
+++ b/src/styles/folderPane.css
@@ -31,6 +31,12 @@
   overflow-x: auto;
 }
 
+.folder-pane--storage folder-pane-storage-header {
+  --folder-pane-storage-toolbar-right-padding: 8px;
+  --folder-pane-storage-header-mobile-gap: 0;
+  --folder-pane-storage-header-mobile-padding: 0 0 10px;
+}
+
 folder-pane-view {
   display: flex;
   flex-direction: column;

From 5d29a1e7fd6ec9e1e1aa12f35b39961873351c32 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 29 Oct 2026 09:31:39 +0000
Subject: [PATCH 5/5] chore: update solidos dependencies (dev:
 solid-logic@6.0.1-5 solid-ui@5.0.2-4) (latest: rdflib@2.4.1)

---
 package-lock.json | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9e870b2..0f980a3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2467,9 +2467,9 @@
       }
     },
     "node_modules/@iconify-json/lucide": {
-      "version": "1.2.148",
-      "resolved": "https://registry.npmjs.org/@iconify-json/lucide/-/lucide-1.2.148.tgz",
-      "integrity": "sha512-m+39WCfRJYC2JgzOsmDuzfZCJqNZg45sm4lYDAnxMvj3F4mN9N1olCc53jMhsn0ZIZBoNV2iyrq5JIxv/GZzow==",
+      "version": "1.2.149",
+      "resolved": "https://registry.npmjs.org/@iconify-json/lucide/-/lucide-1.2.149.tgz",
+      "integrity": "sha512-5NG9YdbtRS03hG1A+EIE6nLhhdAYsf0mKu1ZRi6kLMlCG8DxmDsRM6DAhwlNMLiSiQKFbHpKTJ2VddZdwUkUyw==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -3217,9 +3217,9 @@
       "license": "MIT"
     },
     "node_modules/@types/estree": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
-      "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.10.tgz",
+      "integrity": "sha512-lTyOMnOcmRBzdCv6/4zUZCrEhV0xrqQiUZBZtVcbmLHBXKLnN8q89v/wKRF/Q0HbwVsqbIG3o5HDoFl9sduM+g==",
       "license": "MIT"
     },
     "node_modules/@types/json-schema": {
@@ -3966,9 +3966,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001819",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001819.tgz",
-      "integrity": "sha512-LFUqIIAwpzsIuevnKnsR9qnStBcgzPShTX61lBwN9uFkkf8o8zLiebEjbW8AYtZiF+1YKDWfdt/pWDtMuG8Xwg==",
+      "version": "1.0.30001820",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001820.tgz",
+      "integrity": "sha512-gfWD6MxqVCqAOwmODfZf7DchWvlrA+SRdNX7ceLfg3xRqe5ssjjpF7EgslC/0tiLiNTajdaNN/q8c/5u/7Gz8w==",
       "dev": true,
       "funding": [
         {