Fix bugs and improve styling/mobile for release

src/components/file-explorer-header/FileExplorerHeader.styles.css

@@ -7,6 +7,7 @@
     flex-wrap: nowrap;
     width: 100%;
     text-align: right;
-    padding: 15px;
+    padding: 10px;
+    border-bottom: 1px solid var(--solid-ui-color-gray-200, #cbd5e1);
   }
 }

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

@@ -10,8 +10,8 @@ import styles from './FileExplorerHeader.styles.css'
 import './FileExplorerHeaderSummary'
 import './FileExplorerHeaderControls'
 import { PaneIcon } from './types'
-import { fetchContentAndMetadata, type FileExplorerResourceMetadata } from './helper'
-
+import { fetchResourceMetadata } from '../../utils/podUtils'
+import { type FileExplorerResourceMetadata } from './types'
 @customElement('file-explorer-header')
 export default class FileExplorerHeader extends WebComponent {
   static styles = styles
@@ -55,7 +55,7 @@ export default class FileExplorerHeader extends WebComponent {
     if (!this.fileExplorerContext?.store || !this.fileExplorerContext.subjectUri) return
 
     try {
-      const { metadata } = await fetchContentAndMetadata(this.fileExplorerContext.store, sym(this.fileExplorerContext.subjectUri))
+      const metadata = await fetchResourceMetadata(this.fileExplorerContext.store, sym(this.fileExplorerContext.subjectUri))
       this.responseMetadata = {
         modified: metadata.modified,
         isPublic: metadata.isPublic,

src/components/file-explorer-header/FileExplorerHeaderControls.styles.css

@@ -31,6 +31,12 @@
     white-space: nowrap;
   }
 
+  icon-lucide-share-2,
+  icon-lucide-pencil {
+    width: 16px;
+    height: 16px;
+  }
+
   @media (max-width: 900px) {
     div {
       padding-right: 3px;
@@ -42,5 +48,17 @@
       justify-content: flex-start;
       gap: 5px;
     }
+
+    .file-explorer-header-access-button,
+    .file-explorer-header-edit-button {
+      display: none;
+    }
+
+    icon-lucide-ellipsis-vertical {
+      width: 15.36px;
+      height: 15.36px;
+      flex-shrink: 0;
+      aspect-ratio: 1 / 1;
+    }
   }
 }

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

@@ -1,5 +1,5 @@
 import { WebComponent } from 'solid-ui'
-import { customElement, property } from 'lit/decorators.js'
+import { customElement, property, state } from 'lit/decorators.js'
 import { consume } from '@lit/context'
 import { html, nothing } from 'lit'
 import 'solid-ui/components/button'
@@ -8,20 +8,50 @@
 import styles from './FileExplorerHeaderControls.styles.css'
 import '../resource-actions-menu/ResourceActionsMenu'
 import { fileExplorerContext, type FileExplorerContext } from 'solid-ui'
+import { isContainerSubject } from '../../utils/podUtils'
 
 @customElement('file-explorer-header-controls')
 export default class FileExplorerHeaderControls extends WebComponent {
   static styles = styles
 
+  private mobileMediaQuery: MediaQueryList | undefined
+  private readonly mobileQuery = '(max-width: 600px)'
+  private readonly handleMobileMediaChange = (event: MediaQueryListEvent) => {
+    this.isMobile = event.matches
+  }
+
   @consume({ context: fileExplorerContext, subscribe: true })
   accessor fileExplorerContext: FileExplorerContext = undefined as unknown as FileExplorerContext
 
   @property({ attribute: false })
-  accessor menuItems: Array<{ label: string, action: (event: Event) => void }> = []
+  accessor menuItems: Array<{ label: string, action: (event: Event) => void, icon?: HTMLElement }> = []
 
   @property({ type: Boolean })
   accessor canEdit: boolean = false
 
+  @state()
+  accessor isMobile = typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+    ? window.matchMedia('(max-width: 600px)').matches
+    : false
+
+  connectedCallback () {
+    super.connectedCallback()
+
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      return
+    }
+
+    this.mobileMediaQuery = window.matchMedia(this.mobileQuery)
+    this.isMobile = this.mobileMediaQuery.matches
+    this.mobileMediaQuery.addEventListener('change', this.handleMobileMediaChange)
+  }
+
+  disconnectedCallback () {
+    this.mobileMediaQuery?.removeEventListener('change', this.handleMobileMediaChange)
+    this.mobileMediaQuery = undefined
+    super.disconnectedCallback()
+  }
+
   // TODO: Add broken then use this function to set tooltip and disable edit button
   /* private setEditable() {
     const sourcePaneState = this.sourceContext?.sourcePaneState
@@ -32,10 +62,6 @@
     this.sourceContext?.setEditing?.()
   } */
 
-  private handleEditingClick () {
-    this.fileExplorerContext.edit?.onEdit?.()
-  }
-
   private getEditTooltip () {
     if (!this.fileExplorerContext.paneSupportsEditing) return 'Not Supported'
     if (!this.canEdit) return 'No Access'
@@ -49,24 +75,36 @@
   }
 
   render () {
+    const isContainerResource = isContainerSubject(this.fileExplorerContext.store, this.fileExplorerContext.subjectUri)
+
     return html`
       <div>
         ${this.renderDirtyIndicator()}
-        <solid-ui-button variant="ghost" title="Share" @click=${this.fileExplorerContext.handleSharingClick}>
-          <icon-lucide-share-2 slot="icon"></icon-lucide-share-2>
-        </solid-ui-button>
-        <solid-ui-button
-          variant="ghost"
-          title=${this.getEditTooltip()}
-          ?disabled=${!this.fileExplorerContext.paneSupportsEditing || !this.canEdit}
-          @click=${this.handleEditingClick}
-        >
-          <icon-lucide-pencil slot="icon"></icon-lucide-pencil>
-        </solid-ui-button>
+        ${!isContainerResource && !this.isMobile
+          ? html`
+              <solid-ui-button class="file-explorer-header-access-button" variant="ghost" title="Manage Access" @click=${this.fileExplorerContext.handleAccessClick}>
+                <icon-lucide-share-2 slot="icon"></icon-lucide-share-2>
+              </solid-ui-button>
+              <solid-ui-button
+                class="file-explorer-header-edit-button"
+                variant="ghost"
+                title=${this.getEditTooltip()}
+                ?disabled=${!this.fileExplorerContext.paneSupportsEditing || !this.canEdit}
+                @click=${this.fileExplorerContext.edit?.onEdit}
+              >
+                <icon-lucide-pencil slot="icon"></icon-lucide-pencil>
+              </solid-ui-button>
+            `
+          : nothing}
         <resource-actions-menu
-          .store=${this.fileExplorerContext?.store}
+          .store=${this.fileExplorerContext.store}
+          .handleAccessClick=${this.fileExplorerContext.handleAccessClick}
+          .handleEditingClick=${this.fileExplorerContext.edit?.onEdit}
+          .paneSupportsEditing=${this.fileExplorerContext.paneSupportsEditing}
+          .canEdit=${this.canEdit}
           .subjectUri=${this.fileExplorerContext?.subjectUri}
           .menuItems=${this.menuItems}
+          .isMobile=${this.isMobile}
         ></resource-actions-menu>
       </div>
     `

src/components/file-explorer-header/FileExplorerHeaderSummary.styles.css

@@ -12,8 +12,25 @@
 
   h1 {
       color: var(--solid-ui-color-gray-700, #364153);
-      font-size: var(--solid-ui-font-size-2xl, 1.5rem);
+      font-size: var(--solid-ui-font-size-xl, 1.25rem); /* while in expand; will go to 2xl when new design is complete */
       font-weight: 500;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin: 0;
+  }
+
+  .resource-info {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .container-info {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    min-width: 0;
   }
 
   .pane-icon {
@@ -82,8 +99,50 @@
     height: 0.875rem;
   }
 
+  .resource-date {
+    font-size: inherit;
+  }
+
   icon-lucide-arrow-left {
     width: 1.125rem;
     height: 1.125rem;
   }
+
+  @media (max-width: 600px) {
+    .file-explorer-header-summary {
+      gap: 7px;
+    }
+
+    h1 {
+      font-size: 14px;
+    }
+
+    .pane-icon {
+      width: 18.2px;
+      height: 18.2px;
+      flex-shrink: 0;
+      aspect-ratio: 1 / 1;
+      padding: 0;
+    }
+
+    p {
+      font-size: 14px;
+    }
+
+    .resource-date {
+      font-size: 10px;
+    }
+
+    .public,
+    .private {
+      font-size: 9px;
+    }
+
+    icon-lucide-arrow-left {
+      width: 15px;
+      height: 18px;
+      flex-shrink: 0;
+      aspect-ratio: 5 / 6;
+    }
+  }
 }

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

@@ -8,8 +8,10 @@ import { PaneIcon } from './types'
 import '~icons/lucide/globe'
 import '~icons/lucide/lock-keyhole'
 import '~icons/lucide/arrow-left'
+import '~icons/lucide/folder'
 import styles from './FileExplorerHeaderSummary.styles.css'
-import { type FileExplorerResourceMetadata } from './helper'
+import { getContainerItemCount, isContainerSubject } from '../../utils/podUtils'
+import type { FileExplorerResourceMetadata } from './types'
 
 @customElement('file-explorer-header-summary')
 export default class FileExplorerHeaderSummary extends WebComponent {
@@ -93,11 +95,41 @@ export default class FileExplorerHeaderSummary extends WebComponent {
     }
   }
 
+  private renderContainerResourceHeader (label: string, isPublic: boolean) {
+    const itemCount = getContainerItemCount(this.fileExplorerContext?.store, this.fileExplorerContext?.subjectUri) ?? 0
+    return html`
+      <div class="container-info">
+        <h1>
+          <span>${label}</span>
+        </h1>
+        <p>
+        ${itemCount} items
+          ${isPublic
+            ? html`<span class="public"><icon-lucide-globe></icon-lucide-globe></span>`
+            : html`<span class="private"><icon-lucide-lock-keyhole></icon-lucide-lock-keyhole></span>`}
+        </p>
+      </div>
+    `
+  }
+
+  private renderResourceHeader (label: string, isPublic: boolean) {
+    const modified = this.formatModifiedDate(this.responseMetadata.modified)
+
+    return html`
+        <div class="resource-info">
+          <h1>
+            <span>${label}</span>
+          </h1>
+          <p><span class="resource-date">${modified}</span> ${isPublic ? html`<span class="public"><icon-lucide-globe></icon-lucide-globe> Public</span>` : html`<span class="private"><icon-lucide-lock-keyhole></icon-lucide-lock-keyhole> Private</span>`}</p>
+        </div>
+    `
+  }
+
   render () {
     const subject = this.fileExplorerContext?.subjectUri ? sym(this.fileExplorerContext.subjectUri) : undefined
     const label = subject ? utils.label(subject) : ''
-    const modified = this.formatModifiedDate(this.responseMetadata.modified)
     const isPublic = this.responseMetadata.isPublic
+    const isContainerResource = isContainerSubject(this.fileExplorerContext?.store, this.fileExplorerContext?.subjectUri)
 
     return html`
       <div class="file-explorer-header-summary">
@@ -111,10 +143,8 @@ export default class FileExplorerHeaderSummary extends WebComponent {
         <span class="pane-icon">
           ${this.resolvedPaneIcon ? html`<img src=${this.resolvedPaneIcon} alt="" />` : ''}
         </span>
-        <div>
-          <h1>${label}</h1>
-          <p>${modified} ${isPublic ? html`<span class="public"><icon-lucide-globe></icon-lucide-globe> Public</span>` : html`<span class="private"><icon-lucide-lock-keyhole></icon-lucide-lock-keyhole> Private</span>`}</p>
-        </div>
+        ${isContainerResource ? this.renderContainerResourceHeader(label, isPublic) : this.renderResourceHeader(label, isPublic)}
+      </div>
       </div>
     `
   }

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

@@ -9,6 +9,7 @@
 import styles from './FileExplorerProvider.styles.css'
 import personIcon from '../../icons/person.svg'
 import friendsIcon from '../../icons/friends.svg'
+import '~icons/lucide/share-2'
 
 const PERSON_ICON = personIcon
 const FRIENDS_ICON = friendsIcon
@@ -20,7 +21,7 @@
   soloPane?: boolean
   onBack?: () => void
   openPane?: (subject: NamedNode, paneName: string) => void
-  handleSharingClick?: () => void
+  handleAccessClick?: () => void
   paneSupportsEditing?: boolean
   edit?: {
     onEdit?: () => void
@@ -35,7 +36,7 @@
     soloPane: value.soloPane,
     onBack: value.onBack,
     openPane: value.openPane,
-    handleSharingClick: value.handleSharingClick,
+    handleAccessClick: value.handleAccessClick,
     paneSupportsEditing: value.paneSupportsEditing,
     edit: value.edit
   }
@@ -66,7 +67,7 @@
   accessor showHeader: boolean = true
 
   @property({ attribute: false })
-  accessor handleSharingClick: (() => void) | undefined = undefined
+  accessor handleAccessClick: (() => void) | undefined = undefined
 
   // TODO: Need to research this more, brought it over from manager.
   @property({ attribute: false })
@@ -125,7 +126,7 @@
     soloPane: this.soloPane,
     onBack: this.onBack,
     openPane: this.openPane,
-    handleSharingClick: this.handleSharingClick,
+    handleAccessClick: this.handleAccessClick,
     paneSupportsEditing: false,
     edit: this.edit
   })
@@ -181,7 +182,7 @@
       soloPane: this.soloPane,
       onBack: this.onBack,
       openPane: this.openPane,
-      handleSharingClick: this.handleSharingClick,
+      handleAccessClick: this.handleAccessClick,
       paneSupportsEditing: this.paneSupportsEditing,
       edit: this.edit
     })
@@ -228,7 +229,7 @@
       changedProperties.has('soloPane') ||
       changedProperties.has('onBack') ||
       changedProperties.has('openPane') ||
-      changedProperties.has('handleSharingClick') ||
+      changedProperties.has('handleAccessClick') ||
       changedProperties.has('pane') ||
       changedProperties.has('isDirty')
     ) {