add showback option to support direct url

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "solid-ui",
-	"version": "5.0.2-6",
+	"version": "5.0.2-7",
 	"description": "UI library for Solid applications",
 	"main": "dist/index.cjs.js",
 	"types": "dist/index.d.ts",

src/components/file-explorer-header/FileExplorerHeader.ts

@@ -31,6 +31,9 @@ export default class FileExplorerHeader extends WebComponent {
   @property({ attribute: false })
   accessor paneIcon: PaneIcon = undefined as unknown as PaneIcon
 
+  @property({ type: Boolean })
+  accessor showBack = true
+
   @state()
   accessor responseMetadata: Pick<FileExplorerResourceMetadata, 'modified' | 'isPublic' | 'canEdit' | 'canManageAccess' | 'aclUri'> = {
     modified: undefined,
@@ -95,6 +98,7 @@ export default class FileExplorerHeader extends WebComponent {
       <header>
         <solid-ui-file-explorer-header-summary
           .paneIcon=${this.paneIcon}
+          .showBack=${this.showBack}
           .onBackClick=${this.handleBack}
           .responseMetadata=${this.responseMetadata}
         ></solid-ui-file-explorer-header-summary>

src/components/file-explorer-header/FileExplorerHeaderSummary.ts

@@ -33,6 +33,9 @@ export default class FileExplorerHeaderSummary extends WebComponent {
   @property({ attribute: false })
   accessor onBackClick: (() => void) | undefined
 
+  @property({ type: Boolean })
+  accessor showBack = true
+
   @property({ attribute: false })
   accessor responseMetadata: Pick<FileExplorerResourceMetadata, 'modified' | 'isPublic'> = {
     modified: undefined,
@@ -141,14 +144,18 @@ export default class FileExplorerHeaderSummary extends WebComponent {
 
     return html`
       <div class="file-explorer-header-summary">
-        <solid-ui-button
-          variant="ghost"
-          @click=${this.onBackClick}
-          title="Back"
-        >
-          <icon-lucide-arrow-left></icon-lucide-arrow-left>
-          <span class="sr-only">Back</span>
-        </solid-ui-button>
+        ${this.showBack
+          ? html`
+            <solid-ui-button
+              variant="ghost"
+              @click=${this.onBackClick}
+              title="Back"
+            >
+              <icon-lucide-arrow-left></icon-lucide-arrow-left>
+              <span class="sr-only">Back</span>
+            </solid-ui-button>
+          `
+          : ''}
         <span class="pane-icon">
           ${this.resolvedPaneIcon ? html`<img src=${this.resolvedPaneIcon} alt="" />` : ''}
         </span>

src/lib/file-explorer/compose-explorer.ts

@@ -7,7 +7,7 @@ export type ExplorerComposition = {
   subjectUri: string
   pane: PaneDefinition | undefined
   relevantPanes: PaneDefinition[]
-  header?: Pick<FileExplorerHeader, 'paneIcon' | 'menuItems'>
+  header?: Pick<FileExplorerHeader, 'paneIcon' | 'menuItems'> & Partial<Pick<FileExplorerHeader, 'showBack'>>
   paneElement?: HTMLElement
 }
 
@@ -32,6 +32,7 @@ export function composeExplorer (
       provider.ownerDocument.createElement('solid-ui-file-explorer-header')
     header.paneIcon = composition.header.paneIcon
     header.menuItems = composition.header.menuItems
+    header.showBack = composition.header.showBack ?? true
     if (provider.firstElementChild !== header) provider.prepend(header)
   } else {
     currentHeader?.remove()

src/styles/theme.css

@@ -21,7 +21,6 @@
     --solid-ui-color-gray-300: #d1d5dc;
     --solid-ui-color-gray-400: #99a1af;
     --solid-ui-color-gray-500: #6a7282;
-    --solid-ui-color-zinc-500: #71717b;
     --solid-ui-color-gray-600: #4a5565;
     --solid-ui-color-gray-700: #364153;
     --solid-ui-color-gray-800: #101828;
@@ -34,6 +33,9 @@
     --solid-ui-color-slate-400: #90a1b9;
     --solid-ui-color-slate-800: #1d293d;
 
+    --solid-ui-color-zinc-300: #d4d4d8;
+    --solid-ui-color-zinc-500: #71717b;
+
     --solid-ui-color-lavender-300: #e6dcff;
     --solid-ui-color-lavender-400: #cbb9ff;
 

test/components/compose-explorer.test.ts

@@ -57,6 +57,16 @@ describe('explorer composition', () => {
     expect(provider.children).toHaveLength(2)
   })
 
+  it('hides the back control when the composition is a direct resource view', () => {
+    const provider = document.createElement('solid-ui-file-explorer-provider')
+    composeExplorer(provider, {
+      ...composition,
+      header: { paneIcon: '', menuItems: [], showBack: false }
+    })
+
+    expect(provider.querySelector('solid-ui-file-explorer-header')?.showBack).toBe(false)
+  })
+
   it('hides and restores only the outer header without touching nested explorers', () => {
     const outer = document.createElement('solid-ui-file-explorer-provider')
     const inner = document.createElement('solid-ui-file-explorer-provider')