Skip to content

Milestone3m#252

Merged
bourgeoa merged 300 commits intomainfrom
milestone3m
Apr 24, 2026
Merged

Milestone3m#252
bourgeoa merged 300 commits intomainfrom
milestone3m

Conversation

@SharonStrats
Copy link
Copy Markdown
Contributor

@SharonStrats SharonStrats commented Apr 6, 2026

Ticket: SolidOS/solidos#275

Items that need to be reviewed later

  • Education data
  • Language Data - proficiency here - do not display on the first release. Create a ticket to add later.
  • Address type on header needs to be added to design. Need to remove from contactInfo now since currently there is no address type.
  • Phone Types will be mapped to display like the design, but the data will not be changed.
  • Country Codes - generated by AI, but could use a package here (Note to self :), need to add the gen AI message to this file it's in the contact section file instead) - these will not be on first release need to figure out how to store them.
  • Handling the Phone country code - In the design the country code is seperated, but existing data is just one field. Should we add another field for country code. how should we handle existing data when shown in edit. here
  • Way to identify what contactInfo user wants to display in their heading

Key decisions

  • Keep with existing data and create tickets for improvements or new data needs (e.g. education and proficiency won't be shown now, header will show work phone or email if exists, otherwise any, address will show any (currently no type on address), phone country code will not be shown).
  • icons will be placed in profile-pane for now, but moved later in the icon project.
    Issues
  • skills and language data (on EditProfilePane) don't create proper turtle when a ESCO value is not selected. It only creates the links on skills and knowsLanguage, but does not then create the nodes data to show the skill or language. No publicId is written for instance.
  • language data and social data possibly incorrectly being written in editProfilePane

@SharonStrats SharonStrats self-assigned this Apr 6, 2026
@SharonStrats SharonStrats moved this to In progress in SolidOS NLNet UI Apr 6, 2026
@timea-solid timea-solid marked this pull request as ready for review April 23, 2026 16:56
Copilot AI review requested due to automatic review settings April 23, 2026 16:56
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment thread src/sections/projects/ProjectEditDialog.ts
Comment thread src/sections/contactInfo/selectors.ts Outdated
Comment on lines +39 to +50
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
}
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot make a ticket out of this

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment thread src/sections/contactInfo/mutations.ts
Comment on lines +154 to +158
const longestList = expandedLists
.sort((a, b) => b.length - a.length)[0] || []

const standaloneNodes = languageObjects.filter((node) => !isRdfListNode(store, node))
const languageNodes = [...longestList, ...standaloneNodes]
Comment thread src/addMeToYourFriends.ts
Comment thread src/addMeToYourFriends.ts
} from './texts'
import { ViewerMode } from './types'
import './styles/ProfileCard.css'

Comment thread src/sections/shared/sectionCardHelpers.ts
Comment thread src/sections/projects/linkPreview.ts Outdated
Comment thread test/profile-card.spec.ts
Comment on lines +14 to +15
// TODO(refactor): Revisit expectations after profile card/intro composition settles.
describe.skip('profile-pane', () => { // alain
timea-solid and others added 2 commits April 23, 2026 19:52
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>
Copilot AI and others added 3 commits April 23, 2026 17:59
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Copy link
Copy Markdown
Contributor

Copilot AI commented Apr 24, 2026

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:

  • https://api.github.com/graphql
    • Triggering command: /usr/bin/gh gh auth status --disable-default-apps --disable-dev-shm-usage --disable-features=AcceptCHFrame,AvoidUnnecessaryBeforeUnloadCheckSync,DestroyProfileOnBrowserClose,DialMediaRouteProvider,GlobalMediaControls,HttpsUpgrades,LensOverlay,MediaRo--database=/root/.config/google-chrome/Crash Reports (http block)

If you need me to access, download, or install something from one of these locations, you can either:

@bourgeoa bourgeoa enabled auto-merge April 24, 2026 12:33
@bourgeoa bourgeoa merged commit 6066b2d into main Apr 24, 2026
6 checks passed
@github-project-automation github-project-automation Bot moved this from In progress to Done in SolidOS NLNet UI Apr 24, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

5 participants