diff --git a/package-lock.json b/package-lock.json
index 5e600704..5aa0d8ff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8284,9 +8284,9 @@
"license": "MIT"
},
"node_modules/n3": {
- "version": "2.2.5",
- "resolved": "https://registry.npmjs.org/n3/-/n3-2.2.5.tgz",
- "integrity": "sha512-lR/0N7zVayC6N0uWqrMkPpJn8Up4+qBsjWiBnoOWWEi/ldTcygs2Dw1iAgozzDXLW/fcxXFfbMzpGHlc/1MBLQ==",
+ "version": "2.2.7",
+ "resolved": "https://registry.npmjs.org/n3/-/n3-2.2.7.tgz",
+ "integrity": "sha512-+fyUtz1gQn7LS9GVOGwFjT2HURt/0nHYxuRvyaxQbOwFFPXsZJa41Accf9vo/sj3YhgYvb21wOOJT9fN82r9SQ==",
"license": "MIT",
"dependencies": {
"buffer": "^6.0.3",
diff --git a/src/components/file-explorer-header/FileExplorerHeader.styles.css b/src/components/file-explorer-header/FileExplorerHeader.styles.css
index d75d59f4..866bd8cb 100644
--- a/src/components/file-explorer-header/FileExplorerHeader.styles.css
+++ b/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);
}
}
diff --git a/src/components/file-explorer-header/FileExplorerHeader.ts b/src/components/file-explorer-header/FileExplorerHeader.ts
index 136cdc3f..b51c4d82 100644
--- a/src/components/file-explorer-header/FileExplorerHeader.ts
+++ b/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,
diff --git a/src/components/file-explorer-header/FileExplorerHeaderControls.styles.css b/src/components/file-explorer-header/FileExplorerHeaderControls.styles.css
index d962f83b..626163df 100644
--- a/src/components/file-explorer-header/FileExplorerHeaderControls.styles.css
+++ b/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;
+ }
}
}
diff --git a/src/components/file-explorer-header/FileExplorerHeaderControls.ts b/src/components/file-explorer-header/FileExplorerHeaderControls.ts
index b6668ce4..5d5364dc 100644
--- a/src/components/file-explorer-header/FileExplorerHeaderControls.ts
+++ b/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 '../../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 @@ 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,36 @@ export default class FileExplorerHeaderControls extends WebComponent {
}
render () {
+ const isContainerResource = isContainerSubject(this.fileExplorerContext.store, this.fileExplorerContext.subjectUri)
+
return html`
${this.renderDirtyIndicator()}
-
-
-
-
-
-
+ ${!isContainerResource && !this.isMobile
+ ? html`
+
+
+ `
+ : nothing}
`
diff --git a/src/components/file-explorer-header/FileExplorerHeaderSummary.styles.css b/src/components/file-explorer-header/FileExplorerHeaderSummary.styles.css
index 0fce991a..db9952b7 100644
--- a/src/components/file-explorer-header/FileExplorerHeaderSummary.styles.css
+++ b/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;
+ }
+ }
}
diff --git a/src/components/file-explorer-header/FileExplorerHeaderSummary.ts b/src/components/file-explorer-header/FileExplorerHeaderSummary.ts
index a02b6947..2ca785d5 100644
--- a/src/components/file-explorer-header/FileExplorerHeaderSummary.ts
+++ b/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`
+
+
+ ${label}
+
+
+ ${itemCount} items
+ ${isPublic
+ ? html``
+ : html``}
+
+
+
+ ${label}
+
+
${modified} ${isPublic ? html` Public` : html` Private`}
+
here
const moreTR = dom.createElement('tr')
const moreTD = moreTR.appendChild(dom.createElement('td'))
- moreTD.setAttribute(
- 'style',
- 'margin: 0.2em; border: none; padding: 0; vertical-align: top;'
- )
+ moreTD.classList.add('obj')
moreTD.setAttribute('notSelectable', 'false')
if (predDups > n) {
// what is this for??
@@ -790,23 +787,14 @@ export default function (context) {
termWidget.construct = function (dom) {
dom = dom || document
const td = dom.createElement('TD')
- td.setAttribute(
- 'style',
- 'margin: 0.2em; border: none; padding: 0; vertical-align: top;'
- )
td.setAttribute('class', 'iconTD')
td.setAttribute('notSelectable', 'true')
- td.style.width = '0px'
return td
}
termWidget.addIcon = function (td, icon, listener) {
const iconTD = td.childNodes[1]
if (!iconTD) return
- let width = iconTD.style.width
const img = UI.utils.AJARImage(icon.src, icon.alt, icon.tooltip, dom)
- width = parseInt(width)
- width = width + icon.width
- iconTD.style.width = width + 'px'
iconTD.appendChild(img)
if (listener) {
img.addEventListener('click', listener)
@@ -816,10 +804,6 @@ export default function (context) {
const iconTD = td.childNodes[1]
let baseURI
if (!iconTD) return
- let width = iconTD.style.width
- width = parseInt(width)
- width = width - icon.width
- iconTD.style.width = width + 'px'
for (let x = 0; x < iconTD.childNodes.length; x++) {
const elt = iconTD.childNodes[x]
const eltSrc = elt.src
diff --git a/src/utils/podUtils.ts b/src/utils/podUtils.ts
index aa7b4aaa..27abd7dd 100644
--- a/src/utils/podUtils.ts
+++ b/src/utils/podUtils.ts
@@ -1,7 +1,40 @@
import { store } from 'solid-logic'
import { ns } from 'solid-ui'
-import { NamedNode, parse } from 'rdflib'
+import { LiveStore, NamedNode, parse } from 'rdflib'
import { isWebIdUri } from './webIdUtils'
+import { ACL_LINK } from 'solid-logic'
+import { FileExplorerResourceMetadata } from 'src/components/file-explorer-header/types'
+
+function parseWacAllowHeader (headerValue: string | null | undefined) {
+ const permissions = new Map>()
+ if (!headerValue) return permissions
+
+ for (const entry of headerValue.split(',')) {
+ const match = entry.trim().match(/^([A-Za-z]+)\s*=\s*"([^"]*)"$/)
+ if (match) {
+ const [, permissionGroup, accessModes] = match
+ const modes = accessModes.trim().split(/\s+/).filter(Boolean)
+ permissions.set(permissionGroup.toLowerCase(), new Set(modes.map(mode => mode.toLowerCase())))
+ }
+ }
+
+ return permissions
+}
+
+function deriveAccessFlags (wacAllow: string | null | undefined) {
+ if (!wacAllow) {
+ return { canEdit: false, isPublic: false }
+ }
+
+ const permissions = parseWacAllowHeader(wacAllow)
+ const userModes = permissions.get('user') ?? new Set()
+ const publicModes = permissions.get('public') ?? new Set()
+
+ return {
+ canEdit: userModes.has('write'),
+ isPublic: publicModes.has('read') || publicModes.has('write')
+ }
+}
export async function getPodStorages (url: NamedNode): Promise {
if (isWebIdUri(url)) {
@@ -56,3 +89,102 @@ export async function loadContainerRepresentation (subject) {
}
}
}
+
+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('/')
+ )
+}
+
+// The shared rdflib store can hold duplicate ldp:contains statements for the
+// same child resource when the container and companion metadata are both loaded.
+// Count unique visible children here so the header summary matches the list UI.
+export function getContainerItemCount (store: LiveStore | undefined, subjectUri: string | undefined): number {
+ if (!store || !subjectUri) return 0
+
+ const subject = store.sym(subjectUri)
+ const seen = new Set()
+
+ for (const item of store.each(subject, ns.ldp('contains'))) {
+ if (item.termType === 'NamedNode') {
+ const resource = item as NamedNode
+ const parent = resource.dir()
+
+ if (parent) {
+ const pathEnd = resource.uri.slice(parent.uri.length)
+ if (
+ !pathEnd.startsWith('.') &&
+ !pathEnd.endsWith('.acl') &&
+ !pathEnd.endsWith('~')
+ ) {
+ seen.add(resource.uri)
+ }
+ }
+ }
+ }
+ return seen.size
+}
+
+export function getResponseMetadata (store: LiveStore, subject: NamedNode, response: Response): FileExplorerResourceMetadata {
+ let contentType: string | undefined
+ let canEdit = false
+ let isPublic = false
+ let eTag: string | undefined
+ let modified: string | undefined
+
+ if (response.headers && response.headers.get('content-type')) {
+ contentType = response.headers.get('content-type')?.split(';')[0] ?? undefined
+ const accessFlags = deriveAccessFlags(response.headers.get('wac-allow'))
+
+ canEdit = accessFlags.canEdit
+ isPublic = accessFlags.isPublic
+ eTag = response.headers.get('etag') ?? undefined
+ modified = store.anyValue(subject as any, ns.dct('modified')) || store.anyValue(subject as any, ns.dc('modified')) || undefined
+ } else {
+ const reqs = store.each(
+ null,
+ store.sym('http://www.w3.org/2007/ont/link#requestedURI'),
+ subject
+ )
+ reqs.forEach((req: any) => {
+ const responseNode = store.any(
+ req as any,
+ store.sym('http://www.w3.org/2007/ont/link#response')
+ )
+ if (responseNode && responseNode.termType === 'NamedNode') {
+ contentType = store.anyValue(responseNode as any, ns.httph('content-type')) || undefined
+ const wacAllow = (store.anyValue(responseNode as any, ns.httph('wac-allow')) as string | undefined) ||
+ (store.anyValue(responseNode as any, ns.httph('WAC-Allow')) as string | undefined)
+ const accessFlags = deriveAccessFlags(wacAllow)
+ canEdit = accessFlags.canEdit
+ isPublic = accessFlags.isPublic
+ eTag = store.anyValue(responseNode as any, ns.httph('etag')) || undefined
+ modified = store.anyValue(subject as any, ns.dct('modified')) || store.anyValue(subject as any, ns.dc('modified')) || undefined
+ }
+ })
+ }
+
+ const aclUri = store.any(subject, ACL_LINK)?.value || undefined
+ return { contentType, canEdit, isPublic, aclUri, eTag, modified }
+}
+
+export async function fetchResourceMetadata (store: LiveStore, subject: NamedNode): Promise {
+ const response = await store.fetcher.webOperation('HEAD', subject.uri)
+
+ if (!response.ok) {
+ throw new Error(`HEAD request failed with status ${response.status}`)
+ }
+
+ const metadata = getResponseMetadata(store, subject, response)
+ if (!metadata.contentType) {
+ throw new Error('No content-type available!')
+ }
+
+ return metadata
+}