New layout playground by SharonStrats · Pull Request #869 · SolidOS/solid-ui

SharonStrats · 2026-09-14T03:46:49Z

No description provided.

….store

…istry@5.0.0-0) (latest: rdflib@2.4.0)

…er-pane as well

…istry@5.0.0-1) (latest: rdflib@2.4.1)

…lid-ui into new-layout-playground

…istry@5.0.0-1) (latest: rdflib@2.4.1)

SharonStrats · 2026-09-23T11:11:24Z

@NoelDeMartin so here I added to the solid-ui-provider. I also extended the menu to allow me to change the font size and gap because the 3 dot menu has different styling. And oops I'm tired 😅 I just realized this is where I have moved the file explorer web components so I can use them in both solid-panes and folder-pane.

Highlevel for providers we have
solid-ui-provider. (auth, and I thought we should add store here which I've done)
file-explorer-provider
storage-pane-provider. (and source-pane-provider) sitting at this same level

NoelDeMartin

I have added a bunch of comments about specific things to improve, but in general I think it's looking good and using the Design System components correctly :).

The only thing I wonder is whether the file explorer should really be a component from solid-ui, or a dedicated pane. Either way, I think everything should be as encapsulated as possible. In general, I think it's better to expose as little public API as possible and just expose helpers or reusable functionality as necessary. Otherwise, you risk breaking dependencies if you later want to refactor something that should have been internal.

NoelDeMartin · 2026-09-24T07:16:26Z

+    }
+  }
+
+  render () {


"provider" components should always be headless, meaning that they only render a <slot> for their children. For example, that's how <solid-ui-provider> works (It does also render the dialogs root, but that's fine since those are absolutely positioned).

Ahhhh I did not know that.

NoelDeMartin · 2026-09-24T07:18:41Z

+import FileExplorerHeader from './FileExplorerHeader'
+import FileExplorerProvider from './FileExplorerProvider'
+
+export { FileExplorerHeader, FileExplorerProvider }


This folder is exporting 2 components, but if those 2 are supposed to be "public", they should each have their own folder.

However, looking at how all the file-explorer is structured, I wonder if this needs to be within solid-ui at all? Shouldn't it be a pane instead?

Either way, if this really ends up as a component in solid-ui, I think it should just be <solid-ui-file-explorer>, and all the other components and helpers should be internal to the package.

Oh ok, I'll do that. It has to be in solid-ui because both solid-panes and folder-pane use them.

NoelDeMartin · 2026-09-24T07:20:44Z

+    return html`
+      <solid-ui-menu>
+        <solid-ui-button slot="trigger" variant="ghost" title="More options">
+          <icon-lucide-ellipsis-vertical slot="icon" class="ellipsisIcon"></icon-lucide-ellipsis-vertical>


I have seen this mistake in a lot of places during my review, so I won't address all of them. But in general, it's not a good a11y practice to have buttons without text content. I realize this button has a "title", but many accessibility tools ignore that attribute completely. Furthermore, even using aria-label is not ideal because translation tools often ignore it. The best approach is to simply add a <span class="sr-only"> inside of the button. It's ok if the text is the same as the title, those serve different purposes (one is for visually impaired users, the other one is for mouse users hovering the button).

NoelDeMartin · 2026-09-24T07:23:32Z

+
+      let icon: HTMLElement | undefined
+      if (pane.name === 'profile') {
+        icon = dom.createElement('icon-lucide-user')


We should avoid using this imperative API. Instead, the icons can be rendered like this:

html`<icon-lucide-user slot="left-icon"></icon-lucide-user>`

Other than that, I don't see ~icons/lucide/user being imported in this file. Components should always be imported where they are declared (same for the users icon down below, etc.).

NoelDeMartin · 2026-09-24T07:24:24Z

+          ? html`
+              <file-explorer-header
+                .paneIcon=${this.getPaneIcon(this.pane, subject, this.context)}
+                .menuItems=${this.menuItems}


I think this should have a different name, maybe extraMenuItems? It seems like the file explorer already has some built-in menu items that cannot be controlled by this property. So this actually only serves to add some additional entries.

NoelDeMartin · 2026-09-24T07:42:02Z

        color: var(--solid-ui-color-gray-600);
        font-weight: 500;
-        font-size: var(--solid-ui-font-size-md);
+        font-size: var(--solid-ui-menu-item-font-size, var(--solid-ui-font-size-md));


I noticed we're adding some modifications here, and overriding a lot of the styles for the menu in other parts of the code. This should be avoided if possible, the point of the Design System is that we reuse component and styles. If we want something to be customizable, it should be with component properties. For example, if we want menus with bigger or smaller font sizes, we could have a size property on the top <solid-ui-menu> component.

Ahh Ok I put it in the wrong place.. makes sense.

NoelDeMartin · 2026-09-24T07:43:24Z

+  }
+}
+
+solid-ui-menu::part(menu) {


As mentioned in the other comment, we should override Design System styles so aggressively. It's ok to override some things in some edge cases or something, but if you're redefining the styles of the component completely, you probably need to fix the underlying component instead (or maybe create a new component altogether).

NoelDeMartin · 2026-09-24T07:44:10Z

+  menuItems?: ResourceActionMenuItem[]
+}
+
+export function getVisibleResourceActions (options: ResourceActionsMenuOptions): ResourceActionMenuItem[] {


Why is this exported to the public and in a separate file? Couldn't it be just a private method in the component?

NoelDeMartin · 2026-09-24T07:45:29Z

+  private: boolean
+}
+
+export async function loadDiscoveryState (subject: NamedNode): Promise<DiscoveryState> {


I'm not sure why this and the resource-actions-menu.ts helpers are exported from the library, and even declared outside of the component folders. Shouldn't these be internal helpers for the file explorer components?

I'll take a look at what you are saying. I had to have this in 2 places folder-pane and solid-panes if I remember right htat is why, but I'll see if I can do that better.

NoelDeMartin · 2026-09-24T07:46:48Z

+  panes: Array<PaneDefinition> = context.session.paneRegistry.list
+): Promise<Array<PaneDefinition>> {
+  const relevantPaneCandidates = panes.filter(
+    (pane) => pane.label(subject, context) && !pane.global && pane.name !== 'sharing'


I'm not sure this is the best way to get the relevant pane, what if a pane has a fallback label for unknown subjects such as "Unknown"? I'm not super familiar with how components are resolved, or how do we decide which pane should be used to render a certain subject. But I think it should be more robust that just looking for an empty label.

I will have a look. I took this code how it was.

Copilot

Copilot review overview

🟡 Changes recommended

Critical and moderate correctness, accessibility, registration, and build issues remain unresolved.

Get a fresh assessment by requesting another Copilot review.

Review effort: Lite
Findings: 3 · 4

Open (7)

Use source aliases instead of package dist imports · New
Prevent unauthorized pane fallback selection · New
Keep fallback panes within the authorized filtered list · New
Discard stale metadata responses after navigation · New
Clear resolved pane icon when pane icon becomes undefined · New
Ignore stale menu updates after subject changes · New
Hide discovery menu items without available handlers · New

What changed in this PR

Adds a file-explorer layout playground with reusable headers, resource actions, discovery controls, and shared RDF store context.

Changes:

Adds file-explorer header, provider, metadata, and styling components.
Introduces resource-action and discovery APIs.
Updates store context, exports, typings, tests, Storybook, and dependencies.

File	Reviewed change
`test/unit/index.test.ts`	Updates root export expectations.
`src/types/custom-elements.d.ts`	Adds custom-element typings.
`src/styles/theme.css`	Adds gray theme tokens.
`src/storybook/store/StorybookStore.ts`	Simplifies Storybook store creation.
`src/storybook/components/StorybookProvider.ts`	Provides the shared store context.
`src/lib/store/NoopStore.ts`	Adds a no-op store.
`src/lib/store/index.ts`	Exports store APIs.
`src/lib/store/context.ts`	Defines store context.
`src/lib/resource-actions-menu.ts`	Adds resource action bindings.
`src/lib/forms/store/StoreContext.ts`	Removes the old store context.
`src/lib/forms/store/NoopStore.ts`	Removes the old no-op store.
`src/lib/file-explorer/relevant-panes.ts`	Resolves relevant panes.
`src/lib/file-explorer/context.ts`	Extends explorer context data.
`src/lib/discovery/index.ts`	Exports discovery APIs.
`src/lib/discovery/discovery.ts`	Adds discovery state management.
`src/index.ts`	Exports new public APIs.
`src/components/resource-actions-menu/ResourceActionsMenu.ts`	Implements the resource action menu.
`src/components/resource-actions-menu/ResourceActionsMenu.styles.css`	Styles the action menu.
`src/components/resource-actions-menu/index.ts`	Exports action-menu APIs.
`src/components/resource-actions-menu/helpers.ts`	Builds menu actions.
`src/components/rdf-input/RDFInput.ts`	Migrates to shared store context.
`src/components/rdf-form/RDFForm.ts`	Migrates to shared store context.
`src/components/provider/Provider.ts`	Provides the application store.
`src/components/menu/Menu.styles.css`	Adds configurable menu width.
`src/components/menu-item/MenuItem.styles.css`	Adds configurable item styling.
`src/components/file-explorer-header/types.ts`	Defines header metadata types.
`src/components/file-explorer-header/metadata.ts`	Adds metadata utilities.
`src/components/file-explorer-header/index.ts`	Exports header components.
`src/components/file-explorer-header/FileExplorerProvider.ts`	Provides header and pane context.
`src/components/file-explorer-header/FileExplorerProvider.styles.css`	Styles the provider layout.
`src/components/file-explorer-header/FileExplorerHeaderSummary.ts`	Renders resource summaries.
`src/components/file-explorer-header/FileExplorerHeaderSummary.styles.css`	Styles resource summaries.
`src/components/file-explorer-header/FileExplorerHeaderControls.ts`	Implements header controls.
`src/components/file-explorer-header/FileExplorerHeaderControls.styles.css`	Styles header controls.
`src/components/file-explorer-header/FileExplorerHeader.ts`	Implements metadata loading and header composition.
`src/components/file-explorer-header/FileExplorerHeader.styles.css`	Styles the header container.
`package.json`	Bumps the package version.
`package-lock.json`	Updates locked dependencies and metadata.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

+import 'solid-ui/components/button'
+import 'solid-ui/components/menu'
+import 'solid-ui/components/menu-item'


+  if (filteredPanes.length === 0) {
+    return relevantPaneCandidates.length > 0 ? [relevantPaneCandidates[0]] : []


+  return firstRelevantPaneIndex < firstFilteredPaneIndex
+    ? [relevantPaneCandidates[0]].concat(filteredPanes)
+    : filteredPanes


+      const metadata = await solidLogicSingleton.resource.fetchMetadata(sym(this.fileExplorerContext.subjectUri))
+      this.responseMetadata = {
+        modified: metadata.modified,
+        isPublic: metadata.access.isPublic,
+        canEdit: metadata.access.canEdit,
+        canDelete: metadata.access.canDelete,
+        aclUri: metadata.aclUri
+      }


+    if (this.paneIcon !== undefined && this._resolvedPaneIconFor !== this.paneIcon) {
+      this._resolvedPaneIconFor = this.paneIcon
+      this.resolvePaneIcon()
+    }


+    const subject = store.sym(this.subjectUri)
+    const menuItems = await this.getPaneItems(subject, this.context as DataBrowserContext, this.relevantPanes)
+
+    this.menuItems = menuItems


+  visibleItems.push({
+    kind: 'custom',
+    label: options.discoverPublicly ? 'Undiscover Publicly' : 'Discover Publicly',
+    icon: createDiscoveryIcon('icon-lucide-globe'),
+    action: options.handleDiscoverPublicClick ?? (() => {
+    }),
+  })
+
+  visibleItems.push({
+    kind: 'custom',
+    label: options.discoverPrivately ? 'Undiscover Privately' : 'Discover Privately',
+    icon: createDiscoveryIcon('icon-lucide-lock-keyhole'),
+    action: options.handleDiscoverPrivateClick ?? (() => {
+    }),
+  })


SharonStrats and others added 15 commits August 30, 2026 20:46

new color for pane creation in folder pane

65591e6

move store and add it to the main provider

1527432

flatten the store like auth so we can just use store instead of store…

7c1171b

….store

chore: update solidos dependencies (dev: solid-logic@6.0.0-0 pane-reg…

303f2bb

…istry@5.0.0-0) (latest: rdflib@2.4.0)

move components for file explorer from solid-panes to be used in fold…

96f4cd9

…er-pane as well

implement delete functionality

ed29797

Add type index discovery options

5c2fc00

configure styling for resource actions menu (3 dots)

c78ffe9

new colors

c953ec8

add scroll to 3 dots menu

02f4528

merge with latest staging

d83d713

chore: update solidos dependencies (dev: solid-logic@6.0.0-2 pane-reg…

65a4445

…istry@5.0.0-1) (latest: rdflib@2.4.1)

fix test and update version

d126e19

Merge branch 'new-layout-playground' of https://github.com/solidos/so…

4e4bc04

…lid-ui into new-layout-playground

chore: update solidos dependencies (dev: solid-logic@6.0.0-2 pane-reg…

7425d50

…istry@5.0.0-1) (latest: rdflib@2.4.1)

SharonStrats requested a review from NoelDeMartin September 23, 2026 11:10

NoelDeMartin reviewed Sep 24, 2026

View reviewed changes

SharonStrats requested a lite review from Copilot September 24, 2026 09:52

Copilot started reviewing on behalf of SharonStrats September 24, 2026 09:52 View session

Copilot AI reviewed Sep 24, 2026

View reviewed changes

		if (filteredPanes.length === 0) {
		return relevantPaneCandidates.length > 0 ? [relevantPaneCandidates[0]] : []

Conversation

SharonStrats commented Sep 14, 2026

Uh oh!

SharonStrats commented Sep 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

NoelDeMartin left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🟡 Changes recommended

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

SharonStrats commented Sep 23, 2026 •

edited

Loading