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/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-share-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 '~icons/lucide/pencil'
 import styles from './FileExplorerHeaderControls.styles.css'
 import '../resource-actions-menu/ResourceActionsMenu'
 import { fileExplorerContext, type FileExplorerContext } from 'solid-ui'
+import { isContainerSubject } from './helper'
 
 @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 @@ export default class FileExplorerHeaderControls extends WebComponent {
     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,34 @@ export default class FileExplorerHeaderControls extends WebComponent {
   }
 
   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-share-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
+                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}
+          .handleSharingClick=${this.fileExplorerContext.handleSharingClick}
+          .handleEditingClick=${this.fileExplorerContext.edit?.onEdit}
           .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,9 @@ 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, type FileExplorerResourceMetadata } from './helper'
 
 @customElement('file-explorer-header-summary')
 export default class FileExplorerHeaderSummary extends WebComponent {
@@ -93,11 +94,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 +142,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 './FileExplorerHeader'
 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

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

@@ -12,6 +12,25 @@ export type FileExplorerResourceMetadata = {
   modified: string | undefined
 }
 
+export function isContainerSubject (store: LiveStore | undefined, subjectUri: string | undefined): boolean {
+  if (!store || !subjectUri) return false
+
+  const subject = store.sym(subjectUri)
+  const typeUris = store.findTypeURIs(subject)
+  return Boolean(
+    typeUris[ns.ldp('Container').uri] ||
+    typeUris[ns.ldp('BasicContainer').uri] ||
+    subject.uri.endsWith('/')
+  )
+}
+
+export function getContainerItemCount (store: LiveStore | undefined, subjectUri: string | undefined): number {
+  if (!store || !subjectUri) return 0
+
+  const subject = store.sym(subjectUri)
+  return store.each(subject, ns.ldp('contains')).length
+}
+
 function parseWacAllowHeader (headerValue: string | null | undefined) {
   const permissions = new Map<string, Set<string>>()
   if (!headerValue) return permissions

src/components/resource-actions-menu/ResourceActionsMenu.styles.css

@@ -0,0 +1,6 @@
+:host {
+  .ellipsisIcon {
+    width: 16px;
+    height: 16px;
+  }
+}