profile-pane 3.2.0 → 3.2.2-test.0

package/lib/specialButtons/addContact/mutations.js

@@ -0,0 +1,300 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addANewAddressBookUriToAddressBooks = addANewAddressBookUriToAddressBooks;
+exports.addAddressToTypeIndex = addAddressToTypeIndex;
+exports.addContactToAddressBook = addContactToAddressBook;
+exports.addWebIDToExistingContact = addWebIDToExistingContact;
+exports.createContactInAddressBook = createContactInAddressBook;
+exports.handleAddressBookCreation = handleAddressBookCreation;
+exports.updateAddressBookName = updateAddressBookName;
+var _rdflib = require("rdflib");
+var _solidUi = require("solid-ui");
+var _solidLogic = require("solid-logic");
+var _contactsPane = _interopRequireDefault(require("contacts-pane"));
+var _ContactCreationDialog = require("./ContactCreationDialog");
+var _contactsErrors = require("./contactsErrors");
+var _dialog = require("../../ui/dialog");
+var _texts = require("../../texts");
+var _selectors = require("./selectors");
+var _debug = require("../../utils/debug");
+var _rdfMutationHelpers = require("../../sections/shared/rdfMutationHelpers");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+async function addContactToAddressBook(context, contactsModule, contactData, addressBooksData, container) {
+  const launchButton = container.querySelector('#add-to-contacts-button');
+  if (launchButton) launchButton.disabled = true;
+  const form = (0, _ContactCreationDialog.createAddressBookContactCreationDialog)(context, contactsModule, contactData, addressBooksData);
+  const footer = (0, _ContactCreationDialog.createAddressBookContactCreationFooter)(context, contactsModule, addressBooksData, contactData);
+  await (0, _dialog.openInputDialog)({
+    title: 'Add contact to address book',
+    dom: context.dom,
+    form,
+    headerAction: {
+      type: 'none'
+    },
+    onOpen: () => {
+      const buttonsContainer = context.dom.querySelector('#modal-buttons');
+      if (!buttonsContainer) return;
+      const sharedButtons = Array.from(buttonsContainer.querySelectorAll(':scope > solid-ui-button'));
+      sharedButtons.forEach(button => {
+        button.hidden = true;
+        button.setAttribute('aria-hidden', 'true');
+      });
+      buttonsContainer.appendChild(footer);
+    }
+  });
+  const refreshedButton = container.querySelector('#add-to-contacts-button');
+  if (refreshedButton?.refresh) {
+    refreshedButton.refresh();
+  } else if (refreshedButton) {
+    refreshedButton.disabled = false;
+  }
+}
+async function getAddressData(context, contactsModule, addressBookUri) {
+  const nextData = await (0, _selectors.getAddressBooksData)(context, contactsModule);
+  const matchingAddressBookUri = resolveAddressBookUri(nextData, addressBookUri);
+  const matchingAddressBook = matchingAddressBookUri ? nextData?.private.get(matchingAddressBookUri) || nextData?.public.get(matchingAddressBookUri) || null : null;
+  return {
+    nextData,
+    matchingAddressBook,
+    matchingAddressBookUri
+  };
+}
+function getAddressBookUriCandidates(addressBookUri) {
+  if (!addressBookUri) return [];
+  const trimmedUri = addressBookUri.trim();
+  const candidates = new Set([trimmedUri]);
+  if (trimmedUri.endsWith('#this')) {
+    const withoutFragment = trimmedUri.slice(0, -5);
+    candidates.add(withoutFragment);
+    if (!withoutFragment.endsWith('index.ttl')) {
+      candidates.add(`${withoutFragment.replace(/\/?$/, '/')}index.ttl#this`.replace('/index.ttl#this', '/index.ttl#this'));
+    }
+  } else {
+    candidates.add(`${trimmedUri}#this`);
+    if (trimmedUri.endsWith('/')) {
+      candidates.add(`${trimmedUri}index.ttl#this`);
+    }
+    if (trimmedUri.endsWith('index.ttl')) {
+      candidates.add(`${trimmedUri}#this`);
+    }
+  }
+  return Array.from(candidates);
+}
+function resolveAddressBookUri(addressBooksData, addressBookUri) {
+  if (!addressBooksData) return null;
+  const candidates = getAddressBookUriCandidates(addressBookUri);
+  for (const candidate of candidates) {
+    if (addressBooksData.private.has(candidate) || addressBooksData.public.has(candidate)) {
+      return candidate;
+    }
+  }
+  return null;
+}
+async function addANewAddressBookUriToAddressBooks(context, contactsModule, _addressBooksData, enteredAddressBookUri) {
+  try {
+    const {
+      nextData,
+      matchingAddressBook,
+      matchingAddressBookUri
+    } = await getAddressData(context, contactsModule, enteredAddressBookUri);
+    if (!matchingAddressBook || !nextData || !matchingAddressBookUri) {
+      throw new Error('Address book was not found for the entered URI.');
+    }
+    return {
+      addressBooksData: nextData,
+      addressBook: matchingAddressBook,
+      addressBookUri: matchingAddressBookUri
+    };
+  } catch (error) {
+    throw error instanceof Error ? error : new Error(String(error));
+  }
+}
+async function addContactDetails(context, contactUri, contactData) {
+  const store = context.session.store;
+  const contactNode = new _rdflib.NamedNode(contactUri);
+  const detailDoc = contactNode.doc();
+  const max = 9999999999999;
+  const min = 1000000000000;
+  const createDetailNode = () => {
+    const randomId = Math.floor(Math.random() * (max - min + 1)) + min;
+    return (0, _rdflib.sym)(`${detailDoc.uri}#id${randomId}`);
+  };
+  const insertions = [];
+  try {
+    if (contactData.nickname) {
+      insertions.push((0, _rdflib.st)(contactNode, _solidUi.ns.foaf('nick'), (0, _rdflib.literal)(contactData.nickname), detailDoc));
+    }
+    if (contactData.preferredSubjectPronoun) {
+      insertions.push((0, _rdflib.st)(contactNode, _solidUi.ns.solid('preferredSubjectPronoun'), (0, _rdflib.literal)(contactData.preferredSubjectPronoun), detailDoc));
+    }
+    if (contactData.preferredObjectPronoun) {
+      insertions.push((0, _rdflib.st)(contactNode, _solidUi.ns.solid('preferredObjectPronoun'), (0, _rdflib.literal)(contactData.preferredObjectPronoun), detailDoc));
+    }
+    if (contactData.preferredRelativePronoun) {
+      insertions.push((0, _rdflib.st)(contactNode, _solidUi.ns.solid('preferredRelativePronoun'), (0, _rdflib.literal)(contactData.preferredRelativePronoun), detailDoc));
+    }
+    contactData.emails.map(emailInfo => {
+      const node = createDetailNode();
+      insertions.push((0, _rdflib.st)(contactNode, _solidUi.ns.vcard('hasEmail'), node, detailDoc));
+      insertions.push((0, _rdflib.st)(node, _solidUi.ns.rdf('type'), emailInfo.type, detailDoc));
+      insertions.push((0, _rdflib.st)(node, _solidUi.ns.vcard('value'), emailInfo.email, detailDoc));
+    });
+    contactData.phoneNumbers.map(phoneInfo => {
+      const node = createDetailNode();
+      insertions.push((0, _rdflib.st)(contactNode, _solidUi.ns.vcard('hasTelephone'), node, detailDoc));
+      insertions.push((0, _rdflib.st)(node, _solidUi.ns.rdf('type'), phoneInfo.type, detailDoc));
+      insertions.push((0, _rdflib.st)(node, _solidUi.ns.vcard('value'), phoneInfo.phoneNumber, detailDoc));
+    });
+    await (0, _rdfMutationHelpers.runDirectUpdaterUpdate)(store, [], insertions, _texts.errorContactCreation);
+  } catch (error) {
+    (0, _contactsErrors.addErrorToErrorDisplay)(context, error);
+  }
+}
+async function createContactInAddressBook(context, contactsModule, contactData, selectedAddressBookUris) {
+  let contactUri = null;
+  const store = context.session.store;
+  const newContact = {
+    name: contactData.name
+  };
+  try {
+    const groupUris = selectedAddressBookUris.groupUris.length ? selectedAddressBookUris.groupUris : undefined;
+    if (groupUris) {
+      contactUri = await contactsModule.createNewContact({
+        addressBookUri: selectedAddressBookUris.addressBookUri,
+        contact: newContact,
+        groupUris
+      });
+    } else {
+      (0, _contactsErrors.addErrorToErrorDisplay)(context, _texts.groupIsRequired);
+      return null;
+    }
+    await context.session.store.fetcher.load(contactUri);
+    const contactNode = new _rdflib.NamedNode(contactUri);
+    await addWebIDToContactCard(store, contactNode, contactData.webID, _solidUi.ns.vcard('WebID'));
+    if (contactData.emails.length || contactData.phoneNumbers.length || contactData.nickname || contactData.preferredSubjectPronoun || contactData.preferredObjectPronoun || contactData.preferredRelativePronoun) {
+      await addContactDetails(context, contactUri, contactData);
+    }
+    return contactUri;
+  } catch (error) {
+    throw error instanceof Error ? error : new Error(String(error));
+  }
+  return null;
+}
+async function addAddressToTypeIndex(context, typeOfIndex, addressBookUri) {
+  const store = context.session.store;
+  const me = _solidLogic.authn.currentUser();
+  let typeIndexNode = null;
+  try {
+    await store.fetcher.load(me);
+    const typeIndexes = await _solidLogic.solidLogicSingleton.typeIndex.loadTypeIndexesFor(me);
+    if (!typeIndexes.length) {
+      throw new Error('No type index found for the current user');
+    }
+    typeIndexes.map(typeIndex => {
+      if (typeIndex.label === typeOfIndex) typeIndexNode = typeIndex.index;
+    });
+    if (typeIndexNode) {
+      const registration = await _solidLogic.solidLogicSingleton.typeIndex.registerInTypeIndex((0, _rdflib.sym)(addressBookUri), typeIndexNode, _solidUi.ns.vcard('AddressBook'));
+      if (registration) return true;
+    }
+  } catch (error) {
+    (0, _contactsErrors.addErrorToErrorDisplay)(context, error);
+  }
+  return false;
+}
+async function addWebIDToExistingContact(context, contactData, contactUri) {
+  const store = context.session.store;
+  try {
+    await context.session.store.fetcher.load(contactUri);
+    const contactNode = new _rdflib.NamedNode(contactUri);
+    await addWebIDToContactCard(store, contactNode, contactData.webID, _solidUi.ns.vcard('WebID'));
+  } catch (error) {
+    const rootError = error instanceof Error ? error : new Error(String(error));
+    (0, _debug.error)(_texts.addContactWebIdSaveFailedDebugText, rootError);
+    throw new Error(_texts.errorAddingContactWebIDToAddressBook, {
+      cause: rootError
+    });
+  }
+}
+async function updateAcrossDocuments(store, deletions, insertions = []) {
+  (0, _rdfMutationHelpers.ensureStandardMutationPrefixes)(store);
+  const docs = deletions.concat(insertions).map(statement => statement.why);
+  const uniqueDocKeys = new Set();
+  const uniqueDocs = docs.filter(doc => {
+    const key = 'value' in doc ? doc.value : '__default__';
+    if (uniqueDocKeys.has(key)) return false;
+    uniqueDocKeys.add(key);
+    return true;
+  });
+  await Promise.all(uniqueDocs.map(doc => (0, _rdfMutationHelpers.runDirectUpdaterUpdate)(store, deletions.filter(statement => ('value' in statement.why ? statement.why.value : '__default__') === ('value' in doc ? doc.value : '__default__')), insertions.filter(statement => ('value' in statement.why ? statement.why.value : '__default__') === ('value' in doc ? doc.value : '__default__')), _texts.errorAddingContactWebIDToAddressBook)));
+}
+async function addWebIDToContactCard(store, contactNode, webId, urlType) {
+  try {
+    new URL(webId);
+  } catch {
+    throw new Error(`WebID: ${webId} is not a valid url.`);
+  }
+  const vcardUrlNode = store.bnode();
+  const insertions = [(0, _rdflib.st)(contactNode, _solidUi.ns.vcard('url'), vcardUrlNode, contactNode.doc()), (0, _rdflib.st)(vcardUrlNode, _solidUi.ns.rdf('type'), urlType, contactNode.doc()), (0, _rdflib.st)(vcardUrlNode, _solidUi.ns.vcard('value'), (0, _rdflib.literal)(webId), contactNode.doc())];
+  let deletions = [];
+  const groups = store.each(null, _solidUi.ns.vcard('hasMember'), contactNode);
+  groups.forEach(group => {
+    deletions = deletions.concat(store.statementsMatching(group, _solidUi.ns.vcard('hasMember'), contactNode, group.doc()));
+    insertions.push((0, _rdflib.st)(group, _solidUi.ns.vcard('hasMember'), (0, _rdflib.sym)(webId), group.doc()));
+    insertions.push((0, _rdflib.st)((0, _rdflib.sym)(webId), _solidUi.ns.owl('sameAs'), contactNode, group.doc()));
+  });
+  await updateAcrossDocuments(store, deletions, insertions);
+}
+function sanitizeAlphaNumericSpaces(input) {
+  return (input || '').replace(/[^a-zA-Z0-9 ]+/g, '').replace(/\s+/g, ' ').trim();
+}
+async function updateAddressBookName(context, addressBookUri, newName) {
+  const store = context.session.store;
+  const addressBookNode = (0, _rdflib.sym)(addressBookUri);
+  const addressBookDoc = addressBookNode.doc();
+  const trimmedName = newName?.trim();
+  if (!trimmedName) return;
+  try {
+    await store.fetcher.load(addressBookDoc);
+    const deletions = [...store.statementsMatching(addressBookNode, _solidUi.ns.dc('title'), null, addressBookDoc), ...store.statementsMatching(addressBookNode, _solidUi.ns.vcard('fn'), null, addressBookDoc)];
+    const insertions = [(0, _rdflib.st)(addressBookNode, _solidUi.ns.dc('title'), (0, _rdflib.literal)(trimmedName), addressBookDoc), (0, _rdflib.st)(addressBookNode, _solidUi.ns.vcard('fn'), (0, _rdflib.literal)(trimmedName), addressBookDoc)];
+    await (0, _rdfMutationHelpers.runDirectUpdaterUpdate)(store, deletions, insertions, _texts.errorAddressBookCreation);
+  } catch (error) {
+    throw error instanceof Error ? error : new Error(String(error));
+  }
+}
+async function handleAddressBookCreation(dataBrowserContext, containerName, enteredAddressName) {
+  const me = _solidLogic.authn.currentUser();
+  const newAddressContainer = me?.site()?.value;
+  let addressBookUri = null;
+  const div = dataBrowserContext.dom.getElementById('new-addressbook-form');
+  try {
+    if (!me || !newAddressContainer) {
+      throw new Error(_texts.errorUnableToDetermineUserWorkspace);
+    }
+    const sanitizedAddressName = sanitizeAlphaNumericSpaces(enteredAddressName);
+    if (!sanitizedAddressName) {
+      throw new Error('Address book name can only contain letters, numbers, and spaces');
+    }
+    const sanitizedContainerName = sanitizeAlphaNumericSpaces(containerName);
+    const normalizedContainer = newAddressContainer.endsWith('/') ? newAddressContainer : `${newAddressContainer}/`;
+    const addressBookSlug = (sanitizedContainerName || 'address-book').trim().toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]+/g, '-').replace(/^-+|-+$/g, '') || 'address-book';
+    const newBase = `${normalizedContainer}${addressBookSlug}/`;
+    const mintResult = await _contactsPane.default.mintNew(dataBrowserContext, {
+      me,
+      dom: dataBrowserContext.dom,
+      div,
+      newBase,
+      instanceClass: _solidUi.ns.vcard('AddressBook'),
+      instanceName: sanitizedAddressName
+    });
+    addressBookUri = mintResult?.newInstance?.uri || `${newBase}index.ttl#this`;
+    await updateAddressBookName(dataBrowserContext, addressBookUri, sanitizedAddressName);
+  } catch (error) {
+    throw error instanceof Error ? error : new Error(String(error));
+  }
+  return addressBookUri;
+}

package/lib/specialButtons/addContact/selectors.d.ts

@@ -0,0 +1,10 @@
+import { LiveStore, NamedNode } from 'rdflib';
+import ContactsModuleRdfLib from '@solid-data-modules/contacts-rdflib';
+import { DataBrowserContext } from 'pane-registry';
+import { AddressBooksData, ContactData } from './contactsTypes';
+declare function getAddressBooksData(context: DataBrowserContext, contactModule: ContactsModuleRdfLib): Promise<AddressBooksData>;
+declare function getContactData(store: LiveStore, subject: NamedNode): Promise<ContactData>;
+declare function checkIfContactExistsByWebID(addressBooksData: AddressBooksData, subjectUri: string): boolean;
+declare function checkIfContactExistsByName(addressBooksData: AddressBooksData, name: string): string | null;
+export { getAddressBooksData, getContactData, checkIfContactExistsByWebID, checkIfContactExistsByName };
+//# sourceMappingURL=selectors.d.ts.map

package/lib/specialButtons/addContact/selectors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../../src/specialButtons/addContact/selectors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAE7C,OAAO,oBAAoB,MAAM,qCAAqC,CAAA;AAEtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAA8B,MAAM,iBAAiB,CAAA;AA+G3F,iBAAe,mBAAmB,CAChC,OAAO,EAAE,kBAAkB,EAC3B,aAAa,EAAE,oBAAoB,GAClC,OAAO,CAAC,gBAAgB,CAAC,CAW3B;AAED,iBAAe,cAAc,CAC3B,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,GACjB,OAAO,CAAC,WAAW,CAAC,CAsCtB;AAED,iBAAS,2BAA2B,CAClC,gBAAgB,EAAE,gBAAgB,EAClC,UAAU,EAAE,MAAM,GACjB,OAAO,CAGT;AAED,iBAAS,0BAA0B,CACjC,gBAAgB,EAAE,gBAAgB,EAClC,IAAI,EAAE,MAAM,GACX,MAAM,GAAG,IAAI,CAYf;AAED,OAAO,EACL,mBAAmB,EACnB,cAAc,EACd,2BAA2B,EAC3B,0BAA0B,EAC3B,CAAA"}

package/lib/specialButtons/addContact/selectors.js

@@ -0,0 +1,163 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkIfContactExistsByName = checkIfContactExistsByName;
+exports.checkIfContactExistsByWebID = checkIfContactExistsByWebID;
+exports.getAddressBooksData = getAddressBooksData;
+exports.getContactData = getContactData;
+var _rdflib = require("rdflib");
+var _solidUi = require("solid-ui");
+var _solidLogic = require("solid-logic");
+var _texts = require("../../texts");
+var _contactsErrors = require("./contactsErrors");
+async function getAddressData(context, contactsModule, addressBookUri) {
+  let result = null;
+  try {
+    result = await contactsModule.readAddressBook(addressBookUri);
+  } catch (error) {
+    (0, _contactsErrors.addErrorToErrorDisplay)(context, `${_texts.errorReadingAddressBook}\n${error}`);
+  }
+  return result;
+}
+async function getWebID(context, contact) {
+  let webID = null;
+  let node = null;
+  let webIDNode = null;
+  try {
+    await context.session.store.fetcher.load(contact.uri.substring(0, contact.uri.length - 5));
+    node = new _rdflib.NamedNode(contact.uri);
+    webIDNode = context.session.store.any(node, _solidUi.ns.vcard('url'), undefined, node.doc());
+    if (webIDNode) {
+      webID = context.session.store.anyValue(webIDNode, _solidUi.ns.vcard('value'), undefined, node.doc());
+      return {
+        webID,
+        uri: contact.uri
+      };
+    }
+    return null;
+  } catch (error) {
+    (0, _contactsErrors.addErrorToErrorDisplay)(context, `${_texts.errorLoadingContact}${contact.uri}\n${error}`);
+  }
+}
+async function processContactWebIDs(context, addressBooksData, allContacts) {
+  const contactPromises = allContacts.map(getWebID.bind(null, context));
+  const results = await Promise.all(contactPromises);
+  results.map(contact => {
+    if (contact?.webID) addressBooksData.contactWebIDs.set(contact.webID.trim(), contact.uri);
+  });
+  return addressBooksData;
+}
+async function getAddressBooks(context, contactsModule) {
+  const allContacts = [];
+  const me = _solidLogic.authn.currentUser();
+  let addressBooksData = {
+    public: new Map(),
+    private: new Map(),
+    contactWebIDs: new Map(),
+    contactNames: new Map()
+  };
+  try {
+    await context.session.store.fetcher.load(me);
+    const addressBookUris = await contactsModule.listAddressBooks(me.value);
+    const publicAddressBookPromises = addressBookUris.publicUris.map(addressBook => getAddressData(context, contactsModule, addressBook));
+    const publicAddressBooksData = await Promise.all(publicAddressBookPromises);
+    publicAddressBooksData.map(addressBook => {
+      if (!addressBook) return;
+      addressBooksData.public.set(addressBook.uri, {
+        name: addressBook.title,
+        groups: addressBook.groups,
+        contacts: addressBook.contacts
+      });
+      addressBook.contacts.map(contact => {
+        addressBooksData.contactNames.set(contact.name, contact.uri);
+        allContacts.push(contact);
+      });
+    });
+    const privateAddressBookPromises = addressBookUris.privateUris.map(addressBook => getAddressData(context, contactsModule, addressBook));
+    const privateAddressBooksData = await Promise.all(privateAddressBookPromises);
+    privateAddressBooksData.map(addressBook => {
+      if (!addressBook) return;
+      addressBooksData.private.set(addressBook.uri, {
+        name: addressBook.title,
+        groups: addressBook.groups,
+        contacts: addressBook.contacts
+      });
+      addressBook.contacts.map(contact => {
+        addressBooksData.contactNames.set(contact.name, contact.uri);
+        allContacts.push(contact);
+      });
+    });
+    addressBooksData = await processContactWebIDs(context, addressBooksData, allContacts);
+  } catch (error) {
+    (0, _contactsErrors.addErrorToErrorDisplay)(context, error);
+  }
+  return addressBooksData;
+}
+async function getAddressBooksData(context, contactModule) {
+  const me = _solidLogic.authn.currentUser();
+  if (!me) return null;
+  let addressBooksData = null;
+  try {
+    addressBooksData = await getAddressBooks(context, contactModule);
+  } catch (error) {
+    (0, _contactsErrors.addErrorToErrorDisplay)(context, `${_texts.errorGettingAddressBooks}\n${error}`);
+  }
+  return addressBooksData;
+}
+async function getContactData(store, subject) {
+  const emails = [];
+  const phoneNumbers = [];
+  let type = null;
+  let email = null;
+  let phoneNumber = null;
+  const name = _solidUi.utils.label(subject);
+  const nickname = store.anyValue(subject, _solidUi.ns.foaf('nick'), null, subject.doc()) || undefined;
+  const preferredSubjectPronoun = store.anyValue(subject, _solidUi.ns.solid('preferredSubjectPronoun'), null, subject.doc()) || undefined;
+  const preferredObjectPronoun = store.anyValue(subject, _solidUi.ns.solid('preferredObjectPronoun'), null, subject.doc()) || undefined;
+  const preferredRelativePronoun = store.anyValue(subject, _solidUi.ns.solid('preferredRelativePronoun'), null, subject.doc()) || undefined;
+  const emailNodes = store.each(subject, _solidUi.ns.vcard('hasEmail'), null, subject.doc()) || null;
+  const phoneNodes = store.each(subject, _solidUi.ns.vcard('hasTelephone'), null, subject.doc()) || null;
+  emailNodes.map(node => {
+    email = store.any(node, _solidUi.ns.vcard('value'), null, subject.doc());
+    type = store.any(node, _solidUi.ns.rdf('type'), null, subject.doc());
+    emails.push({
+      type,
+      email
+    });
+  });
+  phoneNodes.map(node => {
+    phoneNumber = store.any(node, _solidUi.ns.vcard('value'), null, subject.doc());
+    type = store.any(node, _solidUi.ns.rdf('type'), null, subject.doc());
+    phoneNumbers.push({
+      type,
+      phoneNumber
+    });
+  });
+  const webID = subject.value;
+  return {
+    name,
+    nickname,
+    preferredSubjectPronoun,
+    preferredObjectPronoun,
+    preferredRelativePronoun,
+    emails,
+    phoneNumbers,
+    webID
+  };
+}
+function checkIfContactExistsByWebID(addressBooksData, subjectUri) {
+  if (!subjectUri?.trim()) return false;
+  return addressBooksData.contactWebIDs.has(subjectUri.trim());
+}
+function checkIfContactExistsByName(addressBooksData, name) {
+  let normalizedContactName = null;
+  let contactUri = null;
+  const normalizedSubjectName = name.replace(/\s/g, '').toLowerCase().trim();
+  addressBooksData.contactNames.forEach((uri, contactName) => {
+    normalizedContactName = contactName.replace(/\s/g, '').toLowerCase().trim();
+    if (normalizedSubjectName === normalizedContactName) return contactUri = uri;
+  });
+  return contactUri;
+}

package/lib/{addMeToYourFriends.d.ts → specialButtons/addMeToYourFriends.d.ts}

@@ -1,10 +1,12 @@
 import { TemplateResult } from 'lit-html';
+import 'solid-ui/components/actions/button';
+import type { Button as SolidUIButtonElement } from 'solid-ui/components/actions/button';
 import { DataBrowserContext } from 'pane-registry';
 import { LiveStore, NamedNode } from 'rdflib';
-import { ViewerMode } from './types';
-import './styles/ProfileCard.css';
-declare const addMeToYourFriendsDiv: (subject: NamedNode, context: DataBrowserContext, viewerMode: ViewerMode) => TemplateResult;
-declare const createAddMeToYourFriendsButton: (subject: NamedNode, context: DataBrowserContext) => HTMLButtonElement;
+import { ViewerMode } from '../types';
+import './AddMeToYourFriends.css';
+declare const addMeToYourFriendsDiv: (subject: NamedNode, context: DataBrowserContext, _viewerMode: ViewerMode) => TemplateResult;
+declare const createAddMeToYourFriendsButton: (subject: NamedNode, context: DataBrowserContext) => SolidUIButtonElement;
 declare function saveNewThing(subject: NamedNode, context: DataBrowserContext, predicate: NamedNode): Promise<void>;
 declare function checkIfThingExists(store: LiveStore, me: NamedNode, subject: NamedNode, predicate: NamedNode): Promise<boolean>;
 export { addMeToYourFriendsDiv, createAddMeToYourFriendsButton, saveNewThing, checkIfThingExists };

package/lib/specialButtons/addMeToYourFriends.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"addMeToYourFriends.d.ts","sourceRoot":"","sources":["../../src/specialButtons/addMeToYourFriends.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,UAAU,CAAA;AAC/C,OAAO,oCAAoC,CAAA;AAC3C,OAAO,KAAK,EAAE,MAAM,IAAI,oBAAoB,EAAE,MAAM,oCAAoC,CAAA;AACxF,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAM,MAAM,QAAQ,CAAA;AASjD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAErC,OAAO,0BAA0B,CAAA;AAyBjC,QAAA,MAAM,qBAAqB,GACzB,SAAS,SAAS,EAClB,SAAS,kBAAkB,EAC3B,aAAa,UAAU,KACtB,cAkBF,CAAA;AAED,QAAA,MAAM,8BAA8B,GAClC,SAAS,SAAS,EAClB,SAAS,kBAAkB,KAC1B,oBA8DF,CAAA;AAED,iBAAe,YAAY,CACzB,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,kBAAkB,EAC3B,SAAS,EAAE,SAAS,GACnB,OAAO,CAAC,IAAI,CAAC,CAqBf;AAOD,iBAAe,kBAAkB,CAC/B,KAAK,EAAE,SAAS,EAChB,EAAE,EAAE,SAAS,EACb,OAAO,EAAE,SAAS,EAClB,SAAS,EAAE,SAAS,GACnB,OAAO,CAAC,OAAO,CAAC,CAKlB;AAED,OAAO,EACL,qBAAqB,EACrB,8BAA8B,EAC9B,YAAY,EACZ,kBAAkB,EACnB,CAAA"}

package/lib/{addMeToYourFriends.js → specialButtons/addMeToYourFriends.js}

@@ -8,16 +8,36 @@ exports.checkIfThingExists = checkIfThingExists;
 exports.createAddMeToYourFriendsButton = void 0;
 exports.saveNewThing = saveNewThing;
 var _litHtml = require("lit-html");
+require("solid-ui/components/actions/button");
 var _solidLogic = require("solid-logic");
 var _rdflib = require("rdflib");
 var _solidUi = require("solid-ui");
-var _buttonsHelper = require("./buttonsHelper");
-var _texts = require("./texts");
-require("./styles/ProfileCard.css");
+var _buttonsHelper = require("../buttonsHelper");
+var _texts = require("../texts");
+var _rdfMutationHelpers = require("../sections/shared/rdfMutationHelpers");
+require("./AddMeToYourFriends.css");
 let buttonContainer = document.createElement('section');
-const addMeToYourFriendsDiv = (subject, context, viewerMode) => {
+function setAddToFriendsButtonLabel(button, label) {
+  const labelWrapper = button.ownerDocument.createElement('span');
+  labelWrapper.className = 'profile__btn-friends-label profile__btn-friends-label--full';
+  labelWrapper.textContent = label;
+  if (label === _texts.friendExistsAlreadyButtonText) {
+    const shortLabelWrapper = button.ownerDocument.createElement('span');
+    shortLabelWrapper.className = 'profile__btn-friends-label profile__btn-friends-label--short';
+    shortLabelWrapper.setAttribute('aria-hidden', 'true');
+    shortLabelWrapper.setAttribute('data-short-label-text', 'Friends');
+    button.setAttribute('data-friends-short-label', 'true');
+    button.setAttribute('aria-label', label);
+    button.replaceChildren(labelWrapper, shortLabelWrapper);
+    return;
+  }
+  button.removeAttribute('data-friends-short-label');
+  button.removeAttribute('aria-label');
+  button.replaceChildren(labelWrapper);
+}
+const addMeToYourFriendsDiv = (subject, context, _viewerMode) => {
   buttonContainer = context.dom.createElement('section');
-  buttonContainer.setAttribute('class', 'buttonSubSection text-truncate text-center section-centered');
+  buttonContainer.setAttribute('class', 'profile-friends-button__section text-truncate text-center section-centered');
   buttonContainer.setAttribute('aria-labelledby', 'add-me-to-your-friends-button-section');
   buttonContainer.setAttribute('data-testid', 'button');
 
@@ -35,9 +55,11 @@ const addMeToYourFriendsDiv = (subject, context, viewerMode) => {
 exports.addMeToYourFriendsDiv = addMeToYourFriendsDiv;
 const createAddMeToYourFriendsButton = (subject, context) => {
   let label = _texts.addMeToYourFriendsButtonText;
-  const button = context.dom.createElement('button');
-  button.type = 'button';
-  button.textContent = label;
+  const button = context.dom.createElement('solid-ui-button');
+  button.setAttribute('type', 'button');
+  button.setAttribute('variant', 'secondary');
+  button.setAttribute('size', 'sm');
+  setAddToFriendsButtonLabel(button, label);
   button.addEventListener('click', setButtonHandler);
   function setButtonHandler(event) {
     event.preventDefault();
@@ -57,19 +79,31 @@ const createAddMeToYourFriendsButton = (subject, context) => {
     const store = context.session.store;
     if (checkIfAnyUserLoggedIn(me)) {
       button.disabled = false;
+      button.removeAttribute('disabled');
       checkIfThingExists(store, me, subject, _solidUi.ns.foaf('knows')).then(friendExists => {
+        const isMobileLayout = context.environment?.layout === 'mobile';
         if (friendExists) {
           //logged in and friend exists or friend was just added
-          button.textContent = _texts.friendExistsAlreadyButtonText;
+          setAddToFriendsButtonLabel(button, _texts.friendExistsAlreadyButtonText);
+          button.disabled = true;
+          button.setAttribute('disabled', 'true');
+          buttonContainer.hidden = isMobileLayout;
+          buttonContainer.style.display = isMobileLayout ? 'none' : '';
         } else {
           //logged in and friend does not exist yet
-          button.textContent = _texts.addMeToYourFriendsButtonText;
+          setAddToFriendsButtonLabel(button, _texts.addMeToYourFriendsButtonText);
+          button.disabled = false;
+          button.removeAttribute('disabled');
+          buttonContainer.hidden = false;
+          buttonContainer.style.display = '';
         }
       });
     } else {
       //not logged in — disable and indicate login is required
-      button.textContent = _texts.logInAddMeToYourFriendsButtonText;
+      setAddToFriendsButtonLabel(button, _texts.logInAddMeToYourFriendsButtonText);
       button.disabled = true;
+      button.setAttribute('disabled', 'true');
+      buttonContainer.hidden = false;
     }
   }
   return button;
@@ -85,6 +119,7 @@ async function saveNewThing(subject, context, predicate) {
       const updater = store.updater;
       const toBeInserted = [(0, _rdflib.st)(me, predicate, subject, me.doc())];
       try {
+        (0, _rdfMutationHelpers.ensureStandardMutationPrefixes)(store);
         await updater.update([], toBeInserted);
       } catch (error) {
         let errorMessage = error;