Feature/contacts pane redesign by m5x5 · Pull Request #301 · SolidOS/contacts-pane

m5x5 · 2026-07-28T22:04:24Z

timea-solid · 2026-07-29T14:01:31Z

So far so good.
One remark: we decided local web components to be prefixed with the pane name - so contacts-pane-... here

Co-authored-by: Claude <noreply@anthropic.com>

…right place Co-authored-by: Claude <noreply@anthropic.com>

Co-authored-by: Claude <noreply@anthropic.com>

timea-solid

While any is a good start, we should improve it to be more specific at some point.
Good work!

timea-solid · 2026-07-31T07:30:59Z

+type Visibility = 'public' | 'private' | null
+
+/** Globe and lock marks for the visibility badge, sized to its text. */
+const globeIcon = html`


don't we have this icons on lucide?

timea-solid · 2026-07-31T09:05:39Z

+
+/** The empty state's circled address-book icon; the wording next to it is
+ * plain HTML in renderEmpty. */
+const emptyIllustration = html`


Pls try and use lucide icons directly as we have in solid-ui or profile-pnae

Take staging's dependency versions, drop the legacy contactsPane.js the redesign already replaced, and carry its add-contact dialog test over to the Lit components. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017U9rvGpQqMM76GgeRkgjUJ

- Import lucide icons via ~icons/lucide/* in each component instead of the removed solid-ui/components/icons barrel, and replace the hand-drawn SVGs (visibility badge globe/lock, empty-state address book, fallback avatar) with lucide equivalents. - Bundle ~icons imports in the build rather than leaving them external. - Replace loose any types in the presenter, logic modules and components. - Give the groups section its own accessible name (the heading it referred to lives inside the header's shadow root). Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017U9rvGpQqMM76GgeRkgjUJ

SharonStrats · 2026-09-04T12:42:54Z

it looks really nice! Great work!

just a couple suggestions. I realized recently you can use the solid-ui-combobox for the select and it will give the same selection style as we are using in profile-pane.

also, it would be good if the count on the groups updated when you add a contact.

Amazing!

timea-solid

Code looks ok to me.

Copilot

Copilot review overview

🟡 Changes recommended

Maintenance actions can mutate or report success incorrectly, and search advertises unsupported fields.

Review effort: Balanced
Findings: 1 · 5

Open (6)

Abort scans when index or group loading fails · New
Filter contacts by email, WebID, and profile URL · New
Count only truthy selection values · New
Wait for ACL repairs before completing the action · New
Confirm before creating the No group · New
Propagate failed clean-people saves · New

What changed in this PR

Redesigns the contacts pane for issue #295 using Lit components and Solid UI controls while migrating legacy JavaScript to TypeScript.

Changes:

Introduces componentized address-book, group, people, search, details, tools, and dialog interfaces.
Extracts maintenance logic and modernizes contact/group operations.
Updates styling, icons, TypeScript strictness, build configuration, and tests.

File	Description
`vite.config.mts`	Bundles generated icon modules.
`tsconfig.test.json`	Includes ambient test declarations.
`tsconfig.json`	Enables implicit-any checking.
`test/unit/setup.ts`	Tightens mock types.
`test/unit/pane.accessibility.test.ts`	Adapts pane accessibility tests.
`test/unit/modals.accessibility.test.ts`	Tests new dialogs with axe.
`test/unit/localUtils-modal.test.ts`	Tests dialogs and deletion controls.
`test/unit/data-reformat-test.test.ts`	Adapts search interaction tests.
`test/helpers/setup.ts`	Polyfills form-associated internals.
`src/webidControl.ts`	Adds TypeScript annotations.
`src/toolsLogic.ts`	Adds maintenance-tool logic.
`src/styles/toolsPane.css`	Removes legacy tool styles.
`src/styles/localUtils.css`	Removes legacy modal styles.
`src/styles/individual.css`	Updates contact-card presentation.
`src/styles/contactsPane.css`	Implements redesigned responsive layout.
`src/rdfFormsHelper.ts`	Types RDF form helpers.
`src/mugshotGallery.ts`	Types gallery and upload behavior.
`src/mintNewAddressBook.ts`	Refactors typed minting flow.
`src/localUtils.ts`	Migrates utilities and dialog integration.
`src/localUtils.js`	Removes legacy utility implementation.
`src/individual.ts`	Types individual rendering.
`src/groupMembershipControl.ts`	Integrates the new delete control.
`src/debug.ts`	Adds typed logging utilities.
`src/debug.js`	Removes JavaScript logging utilities.
`src/contactsPane.ts`	Introduces the component-based pane entry.
`src/contactLogic.ts`	Types contact and group operations.
`src/components/tools/Tools.ts`	Adds the maintenance-tools component.
`src/components/tools/Tools.styles.css`	Styles the tools component.
`src/components/tools/index.ts`	Exports the tools component.
`src/components/sharing-modal/SharingModal.ts`	Adds the sharing dialog.
`src/components/sharing-modal/SharingModal.styles.css`	Styles sharing content.
`src/components/sharing-modal/index.ts`	Exports the sharing dialog.
`src/components/search/Search.ts`	Adds the contact-search component.
`src/components/search/Search.styles.css`	Styles contact search.
`src/components/search/index.ts`	Exports contact search.
`src/components/people-list/PeopleList.ts`	Adds the interactive people list.
`src/components/people-list/PeopleList.styles.css`	Styles people rows and menus.
`src/components/people-list/index.ts`	Exports the people list.
`src/components/new-group-modal/NewGroupModal.ts`	Adds group-creation dialog.
`src/components/new-group-modal/NewGroupModal.styles.css`	Styles group creation.
`src/components/new-group-modal/index.ts`	Exports group creation.
`src/components/group-bar/index.ts`	Exports the group bar.
`src/components/group-bar/GroupBar.ts`	Adds group filtering and selection.
`src/components/group-bar/GroupBar.styles.css`	Styles the group column.
`src/components/details-section/index.ts`	Exports contact details.
`src/components/details-section/DetailsSection.ts`	Manages details-pane states.
`src/components/delete-button/index.ts`	Exports deletion controls.
`src/components/delete-button/DeleteButton.ts`	Adds reusable confirmed deletion.
`src/components/delete-button/DeleteButton.styles.css`	Styles the delete control.
`src/components/confirm-modal/index.ts`	Exports confirmation dialogs.
`src/components/confirm-modal/ConfirmModal.ts`	Adds the confirmation dialog.
`src/components/confirm-modal/ConfirmModal.styles.css`	Styles confirmation dialogs.
`src/components/alert-modal/index.ts`	Exports alert dialogs.
`src/components/alert-modal/AlertModal.ts`	Adds the alert dialog.
`src/components/alert-modal/AlertModal.styles.css`	Styles alert dialogs.
`src/components/address-book/index.ts`	Exports the address-book component.
`src/components/address-book/AddressBook.ts`	Coordinates the redesigned view.
`src/components/address-book-header/index.ts`	Exports the address-book header.
`src/components/address-book-header/AddressBookHeader.ts`	Adds header actions and visibility.
`src/components/address-book-header/AddressBookHeader.styles.css`	Styles the redesigned header.
`src/components/add-contact-modal/AddContactModal.ts`	Types and renames contact creation.
`src/addressBookPresenter.ts`	Migrates presenter behavior to TypeScript.
`src/addressBookPresenter.js`	Removes the JavaScript presenter.
`package.json`	Adds icon tooling dependencies.
`package-lock.json`	Locks icon tooling dependencies.
`eslint.config.mjs`	Enforces modern TypeScript syntax.
`declarations.d.ts`	Declares generated icon modules.

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

+  } catch (e) {
+    debug.error('Error loading groups. Stack: ' + e)
+    log('Error loading groups or name index. If it persists, contact your admin.')
+  }


+            <h2 id="addressBook-heading" tabindex="-1">${this.selectedGroupName ?? 'All Contacts'}</h2>
+            ${this.renderVisibilityBadge()}
+          </div>
+          <p>Search contacts by name, email, WebID, or profile URL</p>


+  log('' + totalContacts + ' contacts loaded. ')
+  const groups = dedupedGroups(book)
+  log('' + groups.length + ' total groups. ')
+  log('' + Object.keys(selectedGroups).length + ' selected groups. ')


+export function checkAccess (selectedGroups: Record<string, boolean>, log: Log) {
+  function doCard (card: NamedNode) {
+    UI.acl.fixIndividualCardACL(card, (message: string) => log(message), (ok: boolean, message: any) => {


+  let groupOfUngrouped: any = null
+  try {
+    groupOfUngrouped = await saveNewGroup(book, 'No group')
+  } catch (_e) {
+    // The group may exist already; adding below still works then.
+  }
+
+  if (!(await confirm(`Add the ${groupless.length} contacts without groups to a 'No group' group?`))) {
+    return false
+  }


+  } catch (e) {
+    log('Error saving uniques: ' + e)
+  }


timea-solid · 2026-09-29T20:14:31Z

@m5x5 do you have time to address the copilot findings?

kb.any/kb.each return Node | null, but fetcher.load only takes named nodes, so the "as NamedNode" casts hid a missing or literal index. - Add an isNamedNode guard that wraps rdflib's and narrows to rdflib's NamedNode class, so it can be swapped for rdflib's once that narrows to the class itself. - Add bookIndex(), which takes the first named node for the name or group index and throws when there is none, instead of loading null. - Filter group and card lists with isNamedNode instead of casting. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Addresses the Copilot review on toolsLogic.ts. - findGroupless: rethrow when the index or a group fails to load. A partial store reported grouped contacts as groupless, and "Put all individuals with no group..." then moved them. - checkAccess: return a promise that settles once every card's ACL repair has finished, and fail when any of them failed, so the Tools button stops loading only at the end. solid-ui's fixIndividualACL never calls back when the ACL is already right, so its "Nice - same ACL" log line also counts as done. - fixGroupless: ask before creating the "No group" group, so Cancel leaves the book untouched, and let creation errors propagate. - saveCleanPeople / saveCleanGroup: rethrow after logging, so a failed PUT is no longer reported as "Done!". Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

GroupBar keeps a deselected group as a false entry in selectedGroups, so Statistics over-reported the selection and "Check individual contact access" also walked deselected groups. Addresses the Copilot review. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

The header promised these fields, but the filter only matched names (Copilot review). - Match every word of the query against the name, all email addresses, every vcard:url and any owl:sameAs of the contact. - Update the search placeholder to say the same as the header. Emails and URLs come from each card, which loads in the background, so right after opening a book a contact may only be found by name. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

The new member changes the counts in the group bar, which other handlers already refresh. Suggested in review. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Matches the type pickers in profile-pane's edit dialogs, as suggested in review. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Show the tools in a contacts-pane-tools-modal dialog instead of the details section, with the log below the buttons. The dialog's width is fixed and its content scrolls, so a growing log does not resize it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

…5/contacts-pane into feature/contactsPaneRedesign

m5x5 added 4 commits July 28, 2026 14:34

add new group modal

cddc0f7

use solid ui dialog for confirm and alert modals

32bc245

Add Group Bar

8ece1a4

add address book header

eeecf9f

timea-solid assigned m5x5 Jul 29, 2026

timea-solid added this to SolidOS NLNet UI Jul 29, 2026

timea-solid moved this to In progress in SolidOS NLNet UI Jul 29, 2026

m5x5 and others added 9 commits July 29, 2026 23:53

add delete button and sharing modal component

5df50c3

restructure components to match layout

1d1e08b

rename web components

46ff06f

styling fixes and code improvements

e0b4e39

reposition search bar and add address book text

25e9989

Co-authored-by: Claude <noreply@anthropic.com>

add search component

fd33cb6

Co-authored-by: Claude <noreply@anthropic.com>

move people list to lit and put the last couple of elements into the …

adb490c

…right place Co-authored-by: Claude <noreply@anthropic.com>

move main layout and tools to lit and add public/private badge to header

379f7aa

Co-authored-by: Claude <noreply@anthropic.com>

convert files to typescript

cbfe67b

Co-authored-by: Claude <noreply@anthropic.com>

timea-solid reviewed Jul 31, 2026

View reviewed changes

timea-solid mentioned this pull request Aug 31, 2026

Address book design SolidOS/solidos#356

Open

m5x5 and others added 2 commits September 2, 2026 22:22

timea-solid approved these changes Sep 29, 2026

View reviewed changes

timea-solid requested a balanced review from Copilot September 29, 2026 19:27

Copilot started reviewing on behalf of timea-solid September 29, 2026 19:27

View session

Copilot AI reviewed Sep 29, 2026

View reviewed changes

timea-solid and others added 3 commits October 19, 2026 21:48

update dep

b656631

m5x5 and others added 8 commits October 19, 2026 23:44

Refresh group counts after adding a contact

86e58ac

The new member changes the counts in the group bar, which other handlers already refresh. Suggested in review. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Use the solid-ui combobox for the contact type

7a0b58e

Matches the type pickers in profile-pane's edit dialogs, as suggested in review. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Show a mail icon and role divider in contact rows

b87448e

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Merge branch 'feature/contactsPaneRedesign' of https://github.com/m5x…

6cefb3d

…5/contacts-pane into feature/contactsPaneRedesign

merge

1ec40bd

timea-solid marked this pull request as ready for review October 20, 2026 14:30

timea-solid merged commit be4a965 into SolidOS:staging Oct 20, 2026
8 checks passed

github-project-automation Bot moved this from In progress to Done in SolidOS NLNet UI Oct 20, 2026

Navigation Menu

Repository navigation

Feature/contacts pane redesign - #301

Feature/contacts pane redesign#301
timea-solid merged 26 commits into
SolidOS:stagingfrom
m5x5:feature/contactsPaneRedesign

m5x5 commented Jul 28, 2026 •

edited

Loading

Uh oh!

timea-solid commented Jul 29, 2026

Uh oh!

timea-solid left a comment

Uh oh!

timea-solid Jul 31, 2026

Uh oh!

timea-solid Jul 31, 2026

Uh oh!

SharonStrats commented Sep 4, 2026

Uh oh!

timea-solid left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

timea-solid commented Sep 29, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

m5x5 commented Jul 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

timea-solid commented Jul 29, 2026

Uh oh!

timea-solid left a comment

Choose a reason for hiding this comment

Uh oh!

timea-solid Jul 31, 2026

Choose a reason for hiding this comment

Uh oh!

timea-solid Jul 31, 2026

Choose a reason for hiding this comment

Uh oh!

SharonStrats commented Sep 4, 2026

Uh oh!

timea-solid left a comment

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!

timea-solid commented Sep 29, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

m5x5 commented Jul 28, 2026 •

edited

Loading