Post milestone3m

[SharonStrats]

This PR is the follow up to the milestone3m work. It brings in the refactored CSS for the file explorer Ticket SolidOS/solidos#244. It involves the panes that are in solid-panes, folder-pane and source-pane refactor were brought in with milestone3m. Also included is a refactor of the socialPane styled similarly to profile-pane our best effort at matching the new design (no designs are available as of yet).

In addition to converting inline styles to CSS it migrates the files to typescript and makes them responsive and uses the new environment layout on context (all except sharingPane that is tied very tightly to solid-ui inline styles).

The following panes are modified:

• dataContentPane
• humanReadablePane
• padPane
• schedulePane
• formPane (in the form folder)
• imagePane
• RDFXMLPane
• n3Pane
• defaultPane
• sharingPane
• socialPane

[Copilot]

Pull request overview

This PR refactors several legacy panes from .js to .ts, extracts/normalizes CSS into dedicated stylesheets, and expands the Social pane with friend request triage plus a new “Requests” tab and updated header/actions UI.

Changes:

• Added friendship triage utilities and a new “Requests” section/tab in the Social pane, with UI refresh after relationship changes.
• Migrated multiple panes (e.g., N3, RDFXML, data content, image, default, form) to TypeScript and introduced pane-specific CSS files for styling/mobile layout improvements.
• Updated dev/build wiring (tsconfig paths, dev loader import) and adjusted tests to match updated styling behaviors.

Reviewed changes

Copilot reviewed 42 out of 44 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
typings/declarations.d.ts	Adds ambient typings for solid-ui-button and module stubs used by new UI code.
tsconfig.dev.json	Adjusts dev TypeScript path mappings for symlinked dependencies.
test/unit/social/triage.test.ts	Adds unit tests for friendship triage and loading behavior.
test/unit/outline/manager.test.ts	Updates style assertions to use object-based expectations.
src/ui/pane.js	Imports form pane CSS to ensure styles are loaded.
src/styles/utilities.css	Introduces shared CSS variables used by refactored panes.
src/styles/tabbedtab.css	Removes large blocks of legacy pane styling migrated elsewhere.
src/social/triage.ts	Implements triage + best-effort loading of related profile docs for requests detection.
src/social/socialSections.ts	Refactors header actions container, mutual UI, and adds a Requests section renderer.
src/social/socialPane.ts	Adds Requests tab/panel, relationship UI refresh logic, and environment data attributes.
src/social/socialPane.css	Updates social layout/styles, adds Requests styling, and improves mobile responsiveness.
src/social/icons.ts	Tweaks edit icon sizing and adds plus/trash icons for the profile links editor UI.
src/social/editProfileDetails.ts	Switches to solid-ui-button and supports multiple links per field with add/remove UI.
src/schedule/schedulePane.ts	Refactors scheduling pane for stronger typing and moves inline styles to CSS.
src/schedule/schedulePane.css	New stylesheet supporting schedule pane layout and mobile adjustments.
src/registerPanes.js	Updates pane imports (extensionless) and points to new TS pane modules.
src/RDFXMLPane.ts	Ports RDFXML pane to TS and adds responsive rendering + stylesheet usage.
src/RDFXMLPane.js	Removed legacy JS implementation in favor of TS port.
src/RDFXMLPane.css	New RDFXML pane stylesheet (including mobile wrapping behavior).
src/pad/padPane.ts	Replaces inline style with a CSS class for the “new instance” message.
src/pad/padPane.css	Adds new class and normalizes CSS units (em → rem in a few places).
src/outline/manager.js	Improves auth-related error messaging shown in the outline UI.
src/n3Pane.ts	Ports N3 pane to TS with better mobile wrapping/indent behavior.
src/n3Pane.js	Removed legacy JS implementation in favor of TS port.
src/n3Pane.css	New N3 pane stylesheet (including mobile line wrap indentation).
src/internal/internalPane.ts	Moves inline styles to CSS classes and cleans up button class handling.
src/internal/internalPane.css	New internal pane stylesheet.
src/imagePane.ts	Ports image pane to TS and introduces a dedicated stylesheet.
src/imagePane.js	Removed legacy JS implementation in favor of TS port.
src/imagePane.css	New image pane stylesheet.
src/humanReadablePane.ts	Refactors human-readable rendering with stronger types + moves styles to CSS.
src/humanReadablePane.css	New stylesheet for markdown/plaintext/iframe rendering, incl. mobile behavior.
src/form/pane.ts	Ports form pane to TS, adds mobile textarea row tagging + CSS import.
src/form/pane.js	Removed legacy JS implementation in favor of TS port.
src/form/formPane.css	New stylesheet extracted from legacy global CSS.
src/defaultPane.ts	Ports default pane to TS, adds environment attributes, and improves literal handling.
src/defaultPane.css	New stylesheet for default pane layout (including mobile layout rules).
src/dataContentPane.ts	Ports data content pane to TS and updates nested table shading logic.
src/dataContentPane.js	Removed legacy JS implementation in favor of TS port.
src/dataContentPane.css	New stylesheet for data content pane, including mobile rules and theme vars.
README.md	Updates wording and adds additional implementation notes.
package-lock.json	Updates lockfile content (includes a new extraneous local-path entry).
dev/loader.ts	Switches contacts-pane registration to dynamic import in the dev loader.
dev/dev-mash.css	Removes legacy pane CSS now covered by pane-specific stylesheets.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.