make an "add as friend" web component

[SharonStrats]

This moves over the code from profile-pane for adding as a friend and creates a Web Component from the code.

[Copilot]

Pull request overview

Introduces a new solid-ui-button-add-friend web component by extracting the “add as friend” behavior into a reusable component, along with supporting helpers, styling, and a Storybook story.

Changes:

• Added ButtonAddFriend web component that checks login state, detects existing friendships, and performs the FOAF knows mutation.
• Added helper to ensure standard RDF prefixes are registered for rdflib mutations.
• Added component styling and a Storybook story for basic states.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
src/components/button-add-friend/index.ts	Barrel export for the new add-friend component.
src/components/button-add-friend/helpers.ts	Adds prefix-registration helper used before rdflib updates.
src/components/button-add-friend/ButtonAddFriend.ts	Implements the add-friend web component and mutation logic.
src/components/button-add-friend/ButtonAddFriend.styles.css	Styles the inline status banner shown on error.
src/components/button-add-friend/ButtonAddFriend.stories.ts	Storybook coverage for guest/logged-in/friend-exists states.

---

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

[timea-solid]

Looks ok to me, but I would appreciate Noels review.

[NoelDeMartin]

I think the general direction is ok, but there are a couple of things that should be improved to make this more "idiomatic".

Also, regarding the name, maybe it should be called "add-friend-button" instead? I worry this is too specific to be in the generic solid-ui package, but I understand we're doing this to use it in two different panes so I guess it's ok. Whenever we prepare developer documentation, we should probably make sure that this type of component is in a different section or something (also using storybook groups, etc.).

[NoelDeMartin]

We shouldn't be passing the context as an attribute, it should be a context provided by a parent component. We already do this with the auth context, so we could reuse that one or create a dedicated one for the store.

Timea has been working on this, and she's leaning more towards having a separate "StoreContext". Check it out in her PR, as they should both follow the same approach: #798

[SharonStrats]

I should probably wait until Timea merges that PR then so i can use the store she added.