Prototype - potential code design for the new design by SharonStrats · Pull Request #749 · SolidOS/solid-panes

SharonStrats · 2026-08-23T11:54:08Z

Just playing around with the implementation of the new design to see what we should do and so we can discuss and find missing features.

I have also made lots of comments for now to make it easier to reason about the code and whether we should keep or change it. If we use the work from this branch in the end I will remove all the comments and clean it up.

This is not final and may even be thrown away.

This goes along with the same branch in the folder-pane.

Some questions are how far do we want to go to simplify the OutlineManager. How much do we need to keep in manager and how much can we bring into the folder-pane.

I haven't gotten there yet, but I'm wondering also if we want to bring in more web components ... could gotoSubject functionality be brought into one for instance, this is the main function used by the folder-pane, my gut is it needs to stay in solid-panes but I'm not completely sure yet.

Note: The commits are done in a way to show what steps I've taken so far.

Additional notes
Doing away with the table structure, to completely get rid of the table structure there are some other panes that we need to modify. There are 2 functions that are used in other panes appendPropertyTRs and UserInput.

defaultPane
internalPane
transaction/pane.js
ui/pane.js (this is for editing forms i think)
classInstancePane
argument/argumentPane.js
socialPane.ts

timea-solid · 2026-08-26T08:47:44Z

Some of the mentioned panes we will be deleting. TO specify:

internalPane = under the hood - we will probably delete
defautPane = about - we will probably delete
These 2 panes will be folded in the 3 dot menu. For now we keep them and delete them wehn the 3 dot menu is in place ans stable.

Prompt: Move the history logic into it's own function Co-authored-by: GPT-5.4 Mini <gpt-5.4-mini@openai.com>

Prompt: Move the opening logic in gotosubject into it's own function Co-authored-by: GPT-5.4 Mini <gpt-5.4-mini@openai.com>

…emanager for backward compatibility

Prompt: many different prompts asking specific questions about the code Co-authored-by: GPT-5.4 Mini <gpt-5.4-mini@openai.com>

…@5.0.0-0 pane-registry@5.0.0-0 activitystreams-pane@2.0.0-0 chat-pane@4.0.0-0 contacts-pane@4.0.0-0 folder-pane@4.0.0-0 issue-pane@4.0.0-0 meeting-pane@4.0.0-0 profile-pane@4.0.0-0 source-pane@4.0.0-0) (latest: rdflib@2.4.0)

…-ui-provider

…hem from solid-ui

SharonStrats · 2026-09-23T11:09:57Z

@NoelDeMartin so here, my main question is around the structure and of course anything else you see that stands out. I will create a document in the next day or so to show the new structure so you can see it all at once.

NoelDeMartin

I just finished a review of the PR in the solid-ui repo, and I noticed that many of the components I've reviewed as "new code" were actually removed from here 😅. I hope they are still useful though.

Looking at this PR, I'm not sure I can give much feedback because I don't understand a lot about the outline manager and I'd need to spend some time looking into it... Maybe ask me some specific parts of the code where you're interested in my feedback.

Doing a quick look on the changes, I noticed we are adding a bunch of code using imperative APIs (document.createElement(), etc.), so I'd try to avoid it, but I'm not sure if that's new code or we've moved it from elsewhere.

Also, regarding the table/div changes in general, and a11y, it's very difficult to review those things just looking at the code. Ideally, I would open a running SolidOS instance somewhere, open a page with the file explorer, and look at the HTML and a11y there. Many times, a11y issues happen because of the way some components are nested or used, but they can look ok on their own.

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


  render(
-    html`<solid-panes-header .menuItems=${menuItems}></solid-panes-header>`,
+    html`<solid-ui-provider><solid-panes-header .menuItems=${menuItems}></solid-panes-header></solid-ui-provider>`,


This shouldn't be necessary, didn't we already add the <solid-ui-provider> wrapper everywhere it was necessary? If not, it should be fixed wherever we find the problem, but the header shouldn't be injecting a <solid-ui-provider>.

you are correct that the dom manipulation you see is old code. I've only used it now very infrequently when it's necessary mixing legacy with new.

Copilot

Copilot review overview

🟡 Changes recommended

Critical issues remain in RDF parsing, outline editing/navigation, and unsafe HTML construction.

Get a fresh assessment by requesting another Copilot review.

Review effort: Lite
Findings: 5 · 6

Open (11)

Safely validate and render the user-provided base URI · New
Update editing paths for DIV-based property rows · New
Target the subject block instead of the host for deletion · New
Create and pass the object block to outlineExpand · New
Parse RDF/XML responses with the correct format · New
Register the pane in the pane registry · New
Align minted RDF type with the label type check · New
Restore the provider back-button collapse handler · New
Avoid container GETs for non-container resources · New
Detect expanded providers instead of checking for SECTION · New
Clear the host before rendering a new solo subject · New

What changed in this PR

Prototype refactoring the outline UI from tables to block/provider elements, migrating file-explorer components, and adding experimental features.

Changes:

Extracts outline and legacy helpers.
Updates outline rendering and provider integration.
Removes local file-explorer components.
Adds experimental dialog/question-builder code and dependency updates.

File	Summary
`src/utils/podUtils.ts`	Adds content-type filtering for container loading.
`src/toberemoved/ItemsAndTheirTicketsDialog.ts`	Adds experimental review dialog.
`src/outline/outlineDomHelpers.js`	Extracts outline DOM helpers.
`src/outline/notused.js`	Adds unused benchmark helper.
`src/outline/newHelpers.ts`	Adds provider-rendering helpers.
`src/outline/manager.js`	Refactors outline rendering to block/provider elements.
`src/outline/legacy.js`	Adds legacy outline API wrappers.
`src/newfeatures/questions/builder/questionBuilderPane.ts`	Adds experimental question-builder pane.
`src/newfeatures/questions/builder/questionBuilderPane.css`	Adds builder stylesheet placeholder.
`src/mainPage/header.ts`	Wraps the header in the Solid UI provider.
`src/components/resource-actions-menu/ResourceActionsMenu.ts`	Removes local resource action menu.
`src/components/resource-actions-menu/ResourceActionsMenu.styles.css`	Removes action-menu styles.
`src/components/file-explorer-header/types.ts`	Removes local header types.
`src/components/file-explorer-header/index.ts`	Removes local header exports.
`src/components/file-explorer-header/FileExplorerProvider.ts`	Removes local provider implementation.
`src/components/file-explorer-header/FileExplorerProvider.styles.css`	Removes provider styles.
`src/components/file-explorer-header/FileExplorerHeaderSummary.ts`	Removes local header summary.
`src/components/file-explorer-header/FileExplorerHeaderSummary.styles.css`	Removes summary styles.
`src/components/file-explorer-header/FileExplorerHeaderControls.ts`	Removes local header controls.
`src/components/file-explorer-header/FileExplorerHeaderControls.styles.css`	Removes controls styles.
`src/components/file-explorer-header/FileExplorerHeader.ts`	Removes local header implementation.
`src/components/file-explorer-header/FileExplorerHeader.styles.css`	Removes header styles.
`package.json`	Updates dependency versions.

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

+        p.innerHTML =
+          'Your <a href=\'' +
+          newIndexDoc.uri +
+          '\'><b>new notepad</b></a> is ready. ' +
+          '<br/><br/><a href=\'' +



  function propertyTR (doc, st, inverse) {
-    const tr = doc.createElement('TR')
+    const tr = doc.createElement('div')


-      const td = thisOutline.outlineObjectTD(subject, undefined, tr)
-      tr.appendChild(td)
-      return td
+      const block = thisOutline.outlineObjectDiv(subject, undefined, host)


+      outlineExpand(host, subject, {
        pane,
        solo
      })
+    } else {


+      if (!contentType.includes('turtle') && !contentType.includes('n-triples') && !contentType.includes('n3') && !contentType.includes('rdf+xml')) {
+        return
+      }
+
      const containerTurtle = response.responseText
      if (subject.uri && containerTurtle) {
        parse(containerTurtle, store, subject.uri, 'text/turtle')


+    if (t['http://www.w3.org/ns/pim/meeting#QuestionBuilder']) {
+      return 'questionBuilder'
+    }
+    return null // No under other circumstances
+  },
+
+  mintClass: ns.schema('Quiz'),


    provider.context = context
    provider.subjectUri = subject.uri
-    provider.onBack = () => collapseMouseDownListener({ target: provider })
+    // provider.onBack = () => collapseMouseDownListener({ target: provider })


    provider.relevantPanes = relevantPanes
-    provider.pane = requiredPane || getPane(relevantPanes, subject)
+    provider.pane = requiredPane || UI.getRelevantPane(relevantPanes, subject)
+    await loadContainerRepresentation(subject)


              return
            }
-            if (selectedTd.firstChild.tagName !== 'TABLE') {
+            if (selectedTd.firstChild.tagName !== 'SECTION') {


    if (solo) {
-      UI.utils.emptyNode(table)
-      table.style.width = '100%'
+      host.style.width = '100%'


SharonStrats self-assigned this Aug 23, 2026

SharonStrats added the enhancement label Aug 23, 2026

SharonStrats added this to SolidOS NLNet UI Aug 23, 2026

SharonStrats moved this to In progress in SolidOS NLNet UI Aug 23, 2026

SharonStrats and others added 10 commits August 27, 2026 13:57

refactor (no table) and move dom functions

2dd861d

remove the appendicon function from manager, add comment

18a2b30

move the history update in gotosubject to it's own function

71d1682

Prompt: Move the history logic into it's own function Co-authored-by: GPT-5.4 Mini <gpt-5.4-mini@openai.com>

Separate out opening the subject in the host

9b605bf

Prompt: Move the opening logic in gotosubject into it's own function Co-authored-by: GPT-5.4 Mini <gpt-5.4-mini@openai.com>

move functions that may not be needed anymore but keep them on outlin…

e10a2a8

…emanager for backward compatibility

move out unused functions from manager

f08080d

evaluate and comment code for new design refactor

0bcc5c1

Prompt: many different prompts asking specific questions about the code Co-authored-by: GPT-5.4 Mini <gpt-5.4-mini@openai.com>

move code around a bit

d93f1e8

resolve rebase conflicts

ba22781

SharonStrats force-pushed the new-layout-playground branch from a5c84f7 to 06ee312 Compare August 29, 2026 11:10

SharonStrats added 8 commits August 30, 2026 06:22

do not show header for main storage

7df9eee

remove store from the file explorer context and use it from the solid…

ac5c571

…-ui-provider

use the go back in folder pane

3a1fcb9

delete moved file explorer and resource menu web components and use t…

f263b4c

…hem from solid-ui

some thigns i changed to work

eb5eb90

update dependencies

5378642

fix some styling and remove dialog from display

166e72b

hide header for main storage

70b5ec0

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

NoelDeMartin reviewed Sep 24, 2026

View reviewed changes

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

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

Copilot AI reviewed Sep 24, 2026

View reviewed changes

Navigation Menu

Prototype - potential code design for the new design - #749

Prototype - potential code design for the new design#749
SharonStrats wants to merge 18 commits into
stagingfrom
new-layout-playground

SharonStrats commented Aug 23, 2026 •

edited

Loading

Uh oh!

timea-solid commented Aug 26, 2026

Uh oh!

SharonStrats commented Sep 23, 2026 •

edited

Loading

Uh oh!

NoelDeMartin left a comment

Uh oh!

NoelDeMartin Sep 24, 2026

Uh oh!

SharonStrats Sep 24, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

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

Uh oh!

Uh oh!

timea-solid commented Aug 26, 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!

NoelDeMartin Sep 24, 2026

Choose a reason for hiding this comment

Uh oh!

SharonStrats Sep 24, 2026

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!

4 participants

SharonStrats commented Aug 23, 2026 •

edited

Loading

SharonStrats commented Sep 23, 2026 •

edited

Loading