Conversation
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
This PR continues the “Milestone3m” refactor by moving the profile-pane toward a section-based architecture (heading/bio/resume/projects/skills/languages/contact/social), updating styles & QR code rendering, and stabilizing CI by skipping legacy tests during the migration.
Changes:
- Introduces new section presenters/selectors/mutations (skills, languages, projects, education, bio, heading, contact info) and a unified
ProfileViewModelPresenter. - Updates QR code to embed vCard content and refactors profile layout/styling to match the new design system.
- Removes or skips legacy components/tests and adds docs to track accessibility expectations and temporarily skipped suites.
Reviewed changes
Copilot reviewed 135 out of 181 changed files in this pull request and generated 13 comments.
Show a summary per file
| File | Description |
|---|---|
| test/qrcode-card.accessibility.test.ts | Updates selector to new QRCodeCard DOM contract. |
| test/profile-card.spec.ts | Temporarily skips legacy profile-pane suite during refactor. |
| test/profile-card.accessibility.test.ts | Removes legacy ProfileCard accessibility test. |
| test/presenter.spec.ts | Updates tests to new heading selector API/contract. |
| test/manual-axe-profile-card.ts | Updates classnames for manual axe fixture. |
| test/helpers/jest.setup.ts | Adjusts jsdom canvas workaround for axe. |
| test/friend-list.spec.ts | Removes legacy FriendList specs. |
| test/friend-list.accessibility.test.ts | Removes legacy FriendList axe test. |
| test/edit-profile.spec.ts | Temporarily skips edit-profile pane suite during refactor. |
| test/cv.spec.ts | Temporarily skips CV test; updates import to legacy location. |
| test/cv-card.accessibility.test.ts | Temporarily skips CVCard accessibility test; updates import. |
| test/chat-with-me.spec.ts | Temporarily skips chat-with-me tests during refactor. |
| test/add-me-to-your-friends.test.ts | Temporarily skips add-friend tests during refactor. |
| test/SocialPresenter.spec.ts | Updates tests to new selectors-based social/resume APIs. |
| test/CVPresenter.spec.ts | Updates tests to new resume selectors. |
| src/ui/errors.ts | Adds shared complain helper wrapping solid-ui error block. |
| src/types.ts | Adds ViewerMode union type. |
| src/texts.ts | Updates/expands UI copy for new sections & dialogs. |
| src/textUtils.ts | Adds text helpers (sanitize, label extraction, casing). |
| src/styles/editProfile.css | Removes legacy edit-profile CSS. |
| src/styles/dialog.css | Adds new modal dialog styling for dialog.ts. |
| src/styles/StuffCard.css | Removes legacy StuffCard CSS. |
| src/styles/SocialCard.css | Updates social card layout + “more” behavior for mobile. |
| src/styles/QRCodeCard.css | Updates QRCodeCard styling and classnames. |
| src/styles/ProjectsCard.css | Adds Projects card rail/card styling. |
| src/styles/ProfileView.css | Updates overall layout for main vs sidebar and section containers. |
| src/styles/ProfileCard.css | Removes legacy ProfileCard rules; introduces new action/QR wrappers. |
| src/styles/FriendList.css | Removes legacy FriendList CSS. |
| src/styles/EducationCard.css | Adds Education section styling. |
| src/styles/ContactInfoEditDialog.css | Adds styles for contact info edit dialog rows/fields. |
| src/styles/CVCard.css | Refactors CV card layout + description clamping toggle styling. |
| src/styles/BioSection.css | Adds bio “more/less” clamping/toggle styling. |
| src/sections/social/types.ts | Adds social types for selectors/mutations. |
| src/sections/social/selectors.ts | Implements social presentation via selectors (dedupe, list expansion). |
| src/sections/social/constants.ts | Adds social constants + default icon data URI fallback. |
| src/sections/skills/types.ts | Adds skills types for selectors/mutations. |
| src/sections/skills/selectors.ts | Implements skills selectors and details projection. |
| src/sections/skills/mutations.ts | Adds skills mutation pipeline + RDF patching. |
| src/sections/skills/SkillsSection.ts | Adds Skills section rendering + owner edit/remove interactions. |
| src/sections/shared/types.ts | Introduces shared row/mutation types. |
| src/sections/shared/sectionCardHelpers.ts | Adds description overflow logic + date helpers for section cards. |
| src/sections/shared/sanitizeUtils.ts | Adds input sanitizers for email/phone/address fields. |
| src/sections/shared/rowState.ts | Adds generic row state helpers (new/modified/deleted) + summarization. |
| src/sections/shared/rdfMutationHelpers.ts | Adds reusable RDF patch helpers (replace predicates, collect linked nodes). |
| src/sections/shared/rdfList.ts | Adds reusable RDF list expansion helper. |
| src/sections/shared/idNodeFactory.ts | Adds stable ID node generator for new entries. |
| src/sections/shared/contactTypeUtils.ts | Adds helpers to normalize/save contact point type labels. |
| src/sections/shared/collapsibleSection.ts | Adds collapsible section toggle handler. |
| src/sections/resume/types.ts | Adds resume/CV types aligned with new resume rendering. |
| src/sections/resume/selectors.ts | Implements resume selectors and reverse-chron sorting. |
| src/sections/resume/ResumeSection.ts | Adds resume section rendering + clamped description toggle. |
| src/sections/projects/types.ts | Adds projects types and mutation plan types. |
| src/sections/projects/selectors.ts | Implements project/community selector with external doc loading. |
| src/sections/projects/mutations.ts | Adds project mutations with patch/DAV/PUT fallbacks. |
| src/sections/projects/linkPreview.ts | Adds LinkMeta-based link preview + category classification. |
| src/sections/projects/ProjectEditDialog.ts | Adds project WebID input dialog + clipboard paste action. |
| src/sections/languages/types.ts | Adds languages types including optional proficiency/publicId. |
| src/sections/languages/selectors.ts | Implements languages selection + naming via IANA/Intl.DisplayNames. |
| src/sections/languages/LanguageSection.ts | Adds Language section rendering + owner edit empty state. |
| src/sections/heading/types.ts | Adds heading/profile presentation and mutation plan types. |
| src/sections/heading/imageHelpers.ts | Adds upload/delete helpers for profile photo storage. |
| src/sections/heading/dateHelpers.ts | Adds DMY display/edit/storage conversion helpers. |
| src/sections/heading/camera.ts | Adds camera capture widget (adapted from solid-ui). |
| src/sections/heading/HeadingSection.ts | Adds new heading UI section rendering + edit dialog hook. |
| src/sections/education/types.ts | Adds education types and mutation plan type. |
| src/sections/education/selectors.ts | Implements education selector + sorting. |
| src/sections/education/mutations.ts | Adds education mutations via RDF patching. |
| src/sections/education/EducationSection.ts | Adds education section rendering + clamped description toggle. |
| src/sections/contactInfo/types.ts | Adds contact info types for points/addresses + rows. |
| src/sections/contactInfo/selectors.ts | Implements contact info selectors for email/phone/address. |
| src/sections/contactInfo/mutations.ts | Adds contact info mutations for phone/email/address points. |
| src/sections/bio/types.ts | Adds bio types and mutation plan. |
| src/sections/bio/selectors.ts | Implements bio selector (vcard:note). |
| src/sections/bio/mutations.ts | Adds bio mutation logic via predicate replacement. |
| src/sections/bio/BioSection.ts | Adds bio section rendering + owner empty state. |
| src/sections/bio/BioEditDialog.ts | Adds bio edit dialog with validation + character counter. |
| src/rdfFormsHelper.ts | Marks legacy rdfFormsHelper as temporarily unused. |
| src/presenter.ts | Removes legacy profile presenter. |
| src/ontology/resumeForm.ttl | Adds language-code prefix. |
| src/index.ts | Updates pane rendering flow + rerender callback; refactors QR generation target. |
| src/icons-svg/contactIcons.ts | Adds phone/email SVG icons as lit templates. |
| src/editProfilePane/editProfilePresenter.ts | Marks legacy edit presenter as temporarily unused. |
| src/editProfilePane/EditSocialCard.ts | Marks legacy edit social card as temporarily unused. |
| src/editProfilePane/EditProfileView.ts | Marks legacy edit view as temporarily unused; removes enforced RDF forms CSS import. |
| src/editProfilePane/EditOtherPreferences.ts | Marks legacy edit other preferences as temporarily unused. |
| src/editProfilePane/EditFriendsCard.ts | Marks legacy edit friends card as temporarily unused; removes enforced RDF forms CSS import. |
| src/editProfilePane/EditContactsCard.ts | Marks legacy edit contacts card as temporarily unused. |
| src/editProfilePane/EditCommunitiesCard.ts | Marks legacy edit communities card as temporarily unused; removes enforced RDF forms CSS import. |
| src/editProfilePane/EditCVCard.ts | Marks legacy edit CV card as temporarily unused. |
| src/buttonsHelper.ts | Updates success message class to new action button class. |
| src/addMeToYourFriends.ts | Refactors add-friend button to plain <button>; updates labels/styles. |
| src/StuffPresenter.ts | Removes legacy Stuff presenter. |
| src/StuffCard.ts | Removes legacy Stuff card. |
| src/SocialPresenter.ts | Removes legacy Social presenter. |
| src/SocialCard.ts | Removes legacy Social card. |
| src/QRCodeCard.ts | Refactors QRCodeCard to build vCard, new markup contract, and new arguments. |
| src/ProfileViewModelPresenter.ts | Adds unified view model presenter for ProfileView. |
| src/ProfileView.ts | Refactors ProfileView to render new sections + sidebar composition. |
| src/ProfileCard.ts | Removes legacy ProfileCard component. |
| src/FriendList.ts | Removes legacy FriendList component. |
| src/ChatWithMe.ts | Adds viewerMode parameter; updates button styling classes. |
| src/CVPresenter.ts | Removes legacy CV presenter. |
| src/CVCard.ts | Removes legacy CV card. |
| eslint.config.mjs | Ignores dist/**. |
| docs/refactor-test-plan.md | Adds tracking doc for temporarily skipped tests. |
| docs/accessibility-baseline-checklist.md | Adds accessibility markup baseline checklist. |
| dev/index.ts | Improves dev harness robustness around DOM lookups and initial load. |
| dev/index.html | Minor script spacing change. |
| README.md | Adds focused accessibility command + links to new docs and legacy folder note. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| function buildAddressStatements(subject: NamedNode, doc: NamedNode, node: Node, address: ContactAddressRow) { | ||
| const inserts = [st(subject, ns.vcard('hasAddress'), node as any, doc)] | ||
|
|
||
| if (address.type) inserts.push(st(node as any, ns.rdf('type'), ns.vcard(address.type), doc)) | ||
| if (address.streetAddress) inserts.push(st(node as any, ns.vcard('street-address'), address.streetAddress as any, doc)) | ||
| if (address.locality) inserts.push(st(node as any, ns.vcard('locality'), address.locality as any, doc)) | ||
| if (address.region) inserts.push(st(node as any, ns.vcard('region'), address.region as any, doc)) | ||
| if (address.postalCode) inserts.push(st(node as any, ns.vcard('postal-code'), address.postalCode as any, doc)) | ||
| if (address.countryName) inserts.push(st(node as any, ns.vcard('country-name'), address.countryName as any, doc)) | ||
|
|
||
| return inserts | ||
| } |
There was a problem hiding this comment.
I'm unable to create a GitHub issue directly from this environment. Here's the formatted ticket content ready to be filed:
Title: Fix: Use literal() nodes for address fields in contactInfo/mutations.ts
Body:
In src/sections/contactInfo/mutations.ts, the buildAddressStatements function (lines 39–50) passes raw string values cast to any in RDF statements:
if (address.streetAddress) inserts.push(st(node as any, ns.vcard('street-address'), address.streetAddress as any, doc))
if (address.locality) inserts.push(st(node as any, ns.vcard('locality'), address.locality as any, doc))
// ...rdflib st() expects proper RDF Nodes as arguments. Passing raw strings cast to any can produce invalid patches or runtime errors depending on updater behavior.
Fix: Wrap string values with literal(...), consistent with how other mutations (resume/education/skills) are written:
import { literal, LiveStore, NamedNode, Node, st, sym } from 'rdflib'
if (address.streetAddress) inserts.push(st(node as any, ns.vcard('street-address'), literal(address.streetAddress), doc))
if (address.locality) inserts.push(st(node as any, ns.vcard('locality'), literal(address.locality), doc))
if (address.region) inserts.push(st(node as any, ns.vcard('region'), literal(address.region), doc))
if (address.postalCode) inserts.push(st(node as any, ns.vcard('postal-code'), literal(address.postalCode), doc))
if (address.countryName) inserts.push(st(node as any, ns.vcard('country-name'), literal(address.countryName), doc))References: PR #252 review comment, src/sections/contactInfo/mutations.ts lines 39–50
| const longestList = expandedLists | ||
| .sort((a, b) => b.length - a.length)[0] || [] | ||
|
|
||
| const standaloneNodes = languageObjects.filter((node) => !isRdfListNode(store, node)) | ||
| const languageNodes = [...longestList, ...standaloneNodes] |
| } from './texts' | ||
| import { ViewerMode } from './types' | ||
| import './styles/ProfileCard.css' | ||
|
|
| // TODO(refactor): Revisit expectations after profile card/intro composition settles. | ||
| describe.skip('profile-pane', () => { // alain |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Agent-Logs-Url: https://github.com/SolidOS/profile-pane/sessions/695a2a53-eafc-423e-8f42-cc13940e37c6 Co-authored-by: timea-solid <4144203+timea-solid@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
…into milestone3m
|
Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details. Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
Ticket: SolidOS/solidos#275
Items that need to be reviewed later
Key decisions
Issues