solid-panes 4.2.6 → 4.4.1-test.0

package/dist/social/socialSections.d.ts

@@ -0,0 +1,77 @@
+import { DataBrowserContext } from 'pane-registry';
+import { Statement, NamedNode } from 'rdflib';
+import { FriendshipTriage } from './triage';
+export type ViewerMode = 'owner' | 'authenticated' | 'anonymous';
+export type HeaderControls = {
+    canEdit: boolean;
+    viewerMode: ViewerMode;
+    showAddFriendAction?: boolean;
+};
+export type SocialHeaderElement = HTMLElement & {
+    refreshSocialHeader?: (controls: HeaderControls) => void;
+};
+export type HeaderStats = {
+    friendCount: number;
+    mutualFriendCount: number | null;
+    onSelectFriends?: () => void;
+    onSelectMutual?: () => void;
+};
+export type HeaderProfileData = {
+    imageUrl?: string;
+    name?: string;
+    jobTitle?: string;
+    organization?: string;
+    location?: string | null;
+} | null;
+export type FriendRowRenderers = {
+    renderSupportingInfo: (target: NamedNode, renderDom: HTMLDocument) => HTMLElement | null;
+    renderNameSuffix: (target: NamedNode, renderDom: HTMLDocument) => HTMLElement | null;
+};
+export declare function createHeaderSection(context: DataBrowserContext, subject: NamedNode, controls: HeaderControls, stats: HeaderStats, getProfileData: () => HeaderProfileData): SocialHeaderElement;
+export declare function createMutualSection(options: {
+    dom: HTMLDocument;
+    subject: NamedNode;
+    familiar: string;
+    me: NamedNode;
+    meUri: string | null;
+    incoming: boolean | NamedNode[] | undefined;
+    outgoing: boolean | NamedNode[] | undefined;
+    editable: boolean;
+    profile: NamedNode | null;
+    knows: NamedNode;
+    mutualConnections: NamedNode[];
+    link: (contents: Node, uri: string | null | undefined) => Node;
+    text: (value: string) => Text;
+    buildCheckboxForm: (label: string | Node, statement: Statement, state: boolean, options?: {
+        disabled?: boolean;
+        disabledTitle?: string;
+    }) => HTMLElement;
+    renderSupportingInfo: FriendRowRenderers['renderSupportingInfo'];
+    renderNameSuffix: FriendRowRenderers['renderNameSuffix'];
+}): {
+    section: HTMLElement;
+    content: HTMLElement;
+    refreshMutualFriends: () => void;
+};
+export declare function createAllFriendsSection(options: {
+    dom: HTMLDocument;
+    subject: NamedNode;
+    profile: NamedNode | null;
+    editable: boolean;
+    renderSupportingInfo: (target: NamedNode, renderDom: HTMLDocument) => HTMLElement | null;
+    renderNameSuffix: (target: NamedNode, renderDom: HTMLDocument) => HTMLElement | null;
+}): {
+    section: HTMLElement;
+    mainTable: HTMLTableElement;
+    friendsList: HTMLElement;
+};
+export declare function createRequestsSection(options: {
+    dom: HTMLDocument;
+    triage: FriendshipTriage;
+    renderSupportingInfo: (target: NamedNode, renderDom: HTMLDocument) => HTMLElement | null;
+    renderNameSuffix: (target: NamedNode, renderDom: HTMLDocument) => HTMLElement | null;
+}): {
+    section: HTMLElement;
+    refreshRequests: (triage: FriendshipTriage) => void;
+};
+//# sourceMappingURL=socialSections.d.ts.map

package/dist/social/socialSections.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"socialSections.d.ts","sourceRoot":"","sources":["../../src/social/socialSections.ts"],"names":[],"mappings":"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"}

package/dist/social/socialSections.js

@@ -0,0 +1,393 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createAllFriendsSection = createAllFriendsSection;
+exports.createHeaderSection = createHeaderSection;
+exports.createMutualSection = createMutualSection;
+exports.createRequestsSection = createRequestsSection;
+var _profilePane = require("profile-pane");
+var _rdflib = require("rdflib");
+var _solidUi = require("solid-ui");
+var _editProfileDetails = require("./editProfileDetails");
+var _icons = require("./icons");
+function createHeaderSection(context, subject, controls, stats, getProfileData) {
+  const dom = context.dom;
+  const kb = context.session.store;
+  const header = dom.createElement('header');
+  header.className = 'social-pane__header';
+  let headerControls = controls;
+  const renderHeader = function () {
+    header.replaceChildren();
+    const profileData = getProfileData();
+    const headerContent = dom.createElement('div');
+    headerContent.className = 'social-pane__header-content';
+    const headerActions = dom.createElement('div');
+    headerActions.className = 'social-pane__header-actions profile__actions profile__heading-actions';
+    if (headerControls.canEdit) {
+      // Hidden for now because the social pane header edit control does not match the new design.
+      // Revisit later if we decide to restore profile-link editing here.
+    } else if (headerControls.viewerMode === 'authenticated' && headerControls.showAddFriendAction) {
+      headerActions.classList.add('social-pane__header-actions--friend');
+      const addToFriendsButton = (0, _profilePane.createAddMeToYourFriendsButton)(subject, context);
+      addToFriendsButton.classList.add('flex-center');
+      headerActions.appendChild(addToFriendsButton);
+    }
+    header.appendChild(headerContent);
+    const headerMedia = dom.createElement('div');
+    headerMedia.className = 'social-pane__header-media';
+    headerContent.appendChild(headerMedia);
+    if (profileData) {
+      headerMedia.appendChild(createImage(dom, profileData.imageUrl, profileData.name));
+    }
+    const headerDetails = dom.createElement('div');
+    headerDetails.className = 'social-pane__header-details';
+    headerContent.appendChild(headerDetails);
+    if (headerActions.childNodes.length > 0) {
+      headerContent.appendChild(headerActions);
+    }
+    const headerSummary = dom.createElement('div');
+    headerSummary.classList.add('social-pane__header-summary', 'flex-column');
+    headerDetails.appendChild(headerSummary);
+    const name = profileData?.name || _solidUi.utils.label(subject);
+    const h1 = dom.createElement('h1');
+    h1.classList.add('social-pane__header-name');
+    h1.appendChild(dom.createTextNode(name));
+    headerSummary.appendChild(h1);
+    const jobAndOrganization = [profileData?.jobTitle, profileData?.organization].filter(Boolean).join(' | ');
+    if (jobAndOrganization) {
+      const jobLine = dom.createElement('div');
+      jobLine.className = 'social-pane__header-job-org';
+      jobLine.textContent = jobAndOrganization;
+      headerSummary.appendChild(jobLine);
+    }
+    if (profileData?.location) {
+      const locationLine = dom.createElement('div');
+      locationLine.className = 'social-pane__header-location';
+      const locationIconSpan = dom.createElement('span');
+      locationIconSpan.classList.add('social-pane__header-location-icon', 'inline-flex-row');
+      locationIconSpan.innerHTML = _icons.locationIcon;
+      locationLine.appendChild(locationIconSpan);
+      locationLine.appendChild(dom.createTextNode(profileData.location));
+      headerSummary.appendChild(locationLine);
+    }
+    const statsRow = dom.createElement('div');
+    statsRow.className = 'social-pane__header-stats';
+    const friendCount = dom.createElement('button');
+    friendCount.className = 'social-pane__header-stat';
+    friendCount.type = 'button';
+    const friendCountLabel = dom.createElement('span');
+    friendCountLabel.className = 'social-pane__header-stat-label';
+    friendCountLabel.textContent = `${stats.friendCount} friend${stats.friendCount === 1 ? '' : 's'}`;
+    friendCount.appendChild(friendCountLabel);
+    if (stats.onSelectFriends) {
+      friendCount.addEventListener('click', stats.onSelectFriends);
+    }
+    statsRow.appendChild(friendCount);
+    if (typeof stats.mutualFriendCount === 'number') {
+      const mutualCount = dom.createElement('button');
+      mutualCount.className = 'social-pane__header-stat';
+      mutualCount.type = 'button';
+      const mutualCountLabel = dom.createElement('span');
+      mutualCountLabel.className = 'social-pane__header-stat-label';
+      mutualCountLabel.textContent = `${stats.mutualFriendCount} mutual friend${stats.mutualFriendCount === 1 ? '' : 's'}`;
+      mutualCount.appendChild(mutualCountLabel);
+      if (stats.onSelectMutual) {
+        mutualCount.addEventListener('click', stats.onSelectMutual);
+      }
+      statsRow.appendChild(mutualCount);
+    }
+    headerSummary.appendChild(statsRow);
+    (0, _editProfileDetails.appendProfileLinks)(headerMedia, dom, kb, subject);
+  };
+  header.refreshSocialHeader = function (nextControls) {
+    headerControls = nextControls;
+    renderHeader();
+  };
+  renderHeader();
+  return header;
+}
+function createImage(dom, src, alt = '') {
+  if (src) {
+    const img = dom.createElement('img');
+    img.className = 'social-pane__header-hero';
+    img.src = src;
+    img.alt = alt;
+    img.width = 180;
+    img.height = 180;
+    img.loading = 'eager';
+    return img;
+  }
+  const fallback = dom.createElement('div');
+  fallback.className = 'social-pane__header-hero-alt flex-center';
+  fallback.setAttribute('role', 'img');
+  fallback.setAttribute('aria-label', alt);
+  fallback.tabIndex = 0;
+  const icon = dom.createElement('span');
+  icon.classList.add('social-pane__header-hero-icon', 'inline-flex-row');
+  icon.innerHTML = _icons.personInCircleIcon;
+  fallback.appendChild(icon);
+  return fallback;
+}
+function createMutualSection(options) {
+  const {
+    dom,
+    subject,
+    familiar,
+    me,
+    meUri,
+    incoming,
+    outgoing,
+    editable,
+    profile,
+    knows,
+    mutualConnections,
+    link,
+    text,
+    buildCheckboxForm,
+    renderSupportingInfo,
+    renderNameSuffix
+  } = options;
+  let refreshMutualFriends = function () {};
+  const mutualSection = dom.createElement('section');
+  mutualSection.className = 'social-pane__mutual-friends social-primary__panel';
+  mutualSection.id = 'social-panel-mutual';
+  mutualSection.setAttribute('role', 'tabpanel');
+  mutualSection.setAttribute('aria-labelledby', 'social-tab-mutual');
+  const mutualContent = mutualSection.appendChild(dom.createElement('div'));
+  mutualContent.classList.add('social-main', 'social-main--mutual', 'flex-column');
+  const relationshipSummary = dom.createElement('div');
+  relationshipSummary.classList.add('social-mutual-summary', 'flex-column');
+  mutualContent.appendChild(relationshipSummary);
+  const createRelationshipLine = function () {
+    const line = relationshipSummary.appendChild(dom.createElement('div'));
+    line.classList.add('social-mutual-summary-line');
+    return line;
+  };
+  const youAndThem = function () {
+    const line = createRelationshipLine();
+    line.appendChild(link(text('You'), meUri));
+    line.appendChild(text(' and '));
+    line.appendChild(link(text(familiar), subject.uri));
+    return line;
+  };
+  if (!incoming) {
+    if (!outgoing) {
+      const line = youAndThem();
+      line.appendChild(text(' have not said you know each other.'));
+    } else {
+      const line = createRelationshipLine();
+      line.appendChild(link(text('You'), meUri));
+      line.appendChild(text(' know '));
+      line.appendChild(link(text(familiar), subject.uri));
+      line.appendChild(text(' (unconfirmed).'));
+    }
+  } else if (!outgoing) {
+    relationshipSummary.classList.add('social-mutual-summary--confirm');
+    const incomingLine = relationshipSummary.appendChild(dom.createElement('div'));
+    incomingLine.classList.add('social-mutual-summary-line');
+    incomingLine.appendChild(link(text(familiar), subject.uri));
+    incomingLine.appendChild(text(' knows '));
+    incomingLine.appendChild(link(text('you'), meUri));
+    incomingLine.appendChild(text(' (unconfirmed).'));
+  } else {
+    const line = youAndThem();
+    line.appendChild(text(' say you know each other.'));
+  }
+  const shouldShowCheckboxPreview = Boolean(incoming) && !outgoing;
+  if (shouldShowCheckboxPreview) {
+    const confirmLabel = dom.createElement('span');
+    confirmLabel.className = 'social-mutual-confirm-prompt';
+    confirmLabel.appendChild(text('Confirm you know '));
+    confirmLabel.appendChild(link(text(familiar), subject.uri));
+    const relationshipForm = buildCheckboxForm(confirmLabel, new _rdflib.Statement(me, knows, subject, profile ?? undefined), Boolean(outgoing), {
+      disabled: !editable,
+      disabledTitle: !editable ? 'Your profile is not editable' : undefined
+    });
+    relationshipForm.classList.add('social-mutual-checkbox-form');
+    mutualContent.appendChild(relationshipForm);
+  }
+  if (mutualConnections.length) {
+    const mutualFriendsTable = mutualContent.appendChild(dom.createElement('table'));
+    mutualFriendsTable.className = 'social-main social-friends-list social-friends-grid';
+    const createMutualRow = function (target) {
+      return _solidUi.widgets.personTR(dom, _solidUi.ns.foaf('knows'), target, {
+        renderSupportingInfo,
+        renderNameSuffix
+      });
+    };
+    refreshMutualFriends = function () {
+      const sortedMutualConnections = [...mutualConnections].sort((left, right) => {
+        const leftLabel = _solidUi.utils.label(left) || left.value;
+        const rightLabel = _solidUi.utils.label(right) || right.value;
+        return leftLabel.localeCompare(rightLabel);
+      });
+      _solidUi.utils.syncTableToArray(mutualFriendsTable, sortedMutualConnections, createMutualRow, function (row, thing) {
+        const replacement = createMutualRow(thing);
+        return replacement;
+      });
+    };
+    refreshMutualFriends();
+  }
+  return {
+    section: mutualSection,
+    content: mutualContent,
+    refreshMutualFriends
+  };
+}
+function createAllFriendsSection(options) {
+  const {
+    dom,
+    subject,
+    profile,
+    editable,
+    renderSupportingInfo,
+    renderNameSuffix
+  } = options;
+  const allFriends = dom.createElement('section');
+  allFriends.className = 'social-pane__all-friends social-primary__panel';
+  allFriends.id = 'social-panel-all-friends';
+  allFriends.setAttribute('role', 'tabpanel');
+  allFriends.setAttribute('aria-labelledby', 'social-tab-all-friends');
+  const mainTable = allFriends.appendChild(dom.createElement('table'));
+  mainTable.className = 'social-main';
+  const friendsList = _solidUi.widgets.attachmentList(dom, subject, mainTable, {
+    doc: profile,
+    modify: !!editable,
+    predicate: _solidUi.ns.foaf('knows'),
+    noun: 'friend',
+    // Social pane already owns the async refresh cycle for friend data in
+    // socialPane.ts. Leave attachmentList's generic follow-up rerender disabled
+    // here or each fetched friend profile will trigger an extra whole-table refresh
+    // on top of the pane's own batched updates.
+    refreshOnDocumentLoad: false,
+    renderSupportingInfo,
+    renderNameSuffix
+  });
+  friendsList.classList.add('social-friends-list');
+  friendsList.style.marginTop = '0';
+  const friendsListRow = friendsList.querySelector('tr');
+  const friendsListPromptCell = friendsListRow?.children?.[0];
+  const friendsListRightCell = friendsListRow?.children?.[1];
+  const friendsHeaderActions = dom.createElement('div');
+  friendsHeaderActions.classList.add('social-friends-header-actions');
+  if (friendsListPromptCell instanceof HTMLTableCellElement) {
+    friendsListPromptCell.classList.add('social-friends-header-dropzone-cell');
+    const friendsHeaderDropzone = dom.createElement('table');
+    friendsHeaderDropzone.className = 'social-friends-header-dropzone';
+    friendsHeaderDropzone.setAttribute('role', 'presentation');
+    const friendsHeaderDropzoneBody = friendsHeaderDropzone.appendChild(dom.createElement('tbody'));
+    const friendsHeaderDropzoneRow = friendsHeaderDropzoneBody.appendChild(dom.createElement('tr'));
+    friendsHeaderDropzoneRow.appendChild(friendsListPromptCell);
+    friendsHeaderActions.appendChild(friendsHeaderDropzone);
+  } else if (friendsListPromptCell instanceof HTMLElement) {
+    while (friendsListPromptCell.firstChild) {
+      friendsHeaderActions.appendChild(friendsListPromptCell.firstChild);
+    }
+    friendsListPromptCell.remove();
+  }
+  const friendDropButtons = friendsHeaderActions.querySelectorAll('button');
+  if (editable && friendDropButtons.length > 0) {
+    friendDropButtons.forEach(button => {
+      button.setAttribute('title', 'Drop friend here');
+      button.setAttribute('aria-label', 'Drop friend here');
+      const buttonImages = button.querySelectorAll('img');
+      buttonImages.forEach(image => {
+        image.setAttribute('title', 'Drop friend here');
+        image.setAttribute('alt', 'Drop friend here');
+      });
+    });
+    const friendsActionsRow = dom.createElement('div');
+    friendsActionsRow.className = 'social-friends-header-actions social-friends-header-actions--standalone';
+    friendsActionsRow.appendChild(friendsHeaderActions);
+    const dropHint = dom.createElement('span');
+    dropHint.className = 'social-friends-header-hint';
+    dropHint.textContent = 'Drag a WebId on the target to add a friend.';
+    friendsActionsRow.appendChild(dropHint);
+    allFriends.prepend(friendsActionsRow);
+  }
+  if (friendsListRightCell instanceof HTMLTableCellElement) {
+    friendsListRightCell.colSpan = 2;
+  }
+  const friendsItemsTable = friendsList.querySelector('td table');
+  if (friendsItemsTable instanceof HTMLTableElement) {
+    friendsItemsTable.classList.add('social-friends-grid');
+  }
+  return {
+    section: allFriends,
+    mainTable,
+    friendsList
+  };
+}
+function createRequestsSection(options) {
+  const {
+    dom,
+    triage,
+    renderSupportingInfo,
+    renderNameSuffix
+  } = options;
+  const requestsSection = dom.createElement('section');
+  requestsSection.className = 'social-pane__requests social-primary__panel';
+  requestsSection.id = 'social-panel-requests';
+  requestsSection.setAttribute('role', 'tabpanel');
+  requestsSection.setAttribute('aria-labelledby', 'social-tab-requests');
+  const requestsContent = requestsSection.appendChild(dom.createElement('div'));
+  requestsContent.classList.add('social-main', 'social-main--requests', 'flex-column');
+  const note = requestsContent.appendChild(dom.createElement('p'));
+  note.className = 'social-requests__note';
+  note.textContent = 'Best effort preview: this view only reflects profile documents that are currently loaded. A dedicated inbox would still be needed for complete request discovery.';
+  const createRequestGroup = function (title, description, emptyText) {
+    const group = requestsContent.appendChild(dom.createElement('section'));
+    group.classList.add('social-requests__group', 'flex-column');
+    const header = group.appendChild(dom.createElement('div'));
+    header.className = 'social-requests__group-header';
+    const heading = header.appendChild(dom.createElement('h2'));
+    heading.className = 'social-requests__group-title';
+    heading.textContent = title;
+    const blurb = header.appendChild(dom.createElement('p'));
+    blurb.className = 'social-requests__group-description';
+    blurb.textContent = description;
+    const empty = group.appendChild(dom.createElement('p'));
+    empty.className = 'social-requests__empty';
+    empty.textContent = emptyText;
+    const table = group.appendChild(dom.createElement('table'));
+    table.className = 'social-main social-friends-list social-friends-grid social-requests__table';
+    return {
+      empty,
+      table
+    };
+  };
+  const incomingGroup = createRequestGroup('Incoming requests', 'People who say they know this profile, but have not been confirmed yet.', 'No incoming requests are visible from the currently loaded data.');
+  const pendingGroup = createRequestGroup('Awaiting confirmation', 'People this profile knows who have not linked back yet.', 'Nothing is waiting for confirmation right now.');
+  const createPersonRow = function (target) {
+    return _solidUi.widgets.personTR(dom, _solidUi.ns.foaf('knows'), target, {
+      renderSupportingInfo,
+      renderNameSuffix
+    });
+  };
+  const sortNodes = function (nodes) {
+    return [...nodes].sort((left, right) => {
+      const leftLabel = _solidUi.utils.label(left) || left.value;
+      const rightLabel = _solidUi.utils.label(right) || right.value;
+      return leftLabel.localeCompare(rightLabel);
+    });
+  };
+  const syncRequestGroup = function (group, nodes) {
+    const sortedNodes = sortNodes(nodes);
+    group.empty.hidden = sortedNodes.length > 0;
+    group.table.hidden = sortedNodes.length === 0;
+    _solidUi.utils.syncTableToArray(group.table, sortedNodes, createPersonRow, function (_row, thing) {
+      return createPersonRow(thing);
+    });
+  };
+  const refreshRequests = function (nextTriage) {
+    syncRequestGroup(incomingGroup, nextTriage.requests);
+    syncRequestGroup(pendingGroup, nextTriage.unconfirmed);
+  };
+  refreshRequests(triage);
+  return {
+    section: requestsSection,
+    refreshRequests
+  };
+}

package/dist/social/spinner.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit-html';
+export declare function createSpinner(): TemplateResult;
+//# sourceMappingURL=spinner.d.ts.map

package/dist/social/spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../src/social/spinner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,UAAU,CAAA;AAE/C,wBAAgB,aAAa,IAAK,cAAc,CAK/C"}

package/dist/social/spinner.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createSpinner = createSpinner;
+var _litHtml = require("lit-html");
+function createSpinner() {
+  return (0, _litHtml.html)`
+    <span class="loading-spinner" aria-hidden="true"></span>
+    <span class="sr-only">Saving...</span>
+  `;
+}

package/dist/social/triage.d.ts

@@ -0,0 +1,17 @@
+import { DataBrowserContext } from 'pane-registry';
+import { IndexedFormula, NamedNode } from 'rdflib';
+type FriendshipStore = IndexedFormula & {
+    fetcher?: {
+        load?: (target: NamedNode | string) => Promise<unknown>;
+    };
+};
+export interface FriendshipTriage {
+    acquaintances: NamedNode[];
+    confirmed: NamedNode[];
+    unconfirmed: NamedNode[];
+    requests: NamedNode[];
+}
+export declare function triageFriends(store: FriendshipStore, subject: NamedNode): FriendshipTriage;
+export declare function loadFriendshipTriage(context: DataBrowserContext, subject: NamedNode): Promise<FriendshipTriage>;
+export {};
+//# sourceMappingURL=triage.d.ts.map

package/dist/social/triage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"triage.d.ts","sourceRoot":"","sources":["../../src/social/triage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAGlD,KAAK,eAAe,GAAG,cAAc,GAAG;IACtC,OAAO,CAAC,EAAE;QACR,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,GAAG,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAA;KACxD,CAAA;CACF,CAAA;AAED,MAAM,WAAW,gBAAgB;IAC/B,aAAa,EAAE,SAAS,EAAE,CAAA;IAC1B,SAAS,EAAE,SAAS,EAAE,CAAA;IACtB,WAAW,EAAE,SAAS,EAAE,CAAA;IACxB,QAAQ,EAAE,SAAS,EAAE,CAAA;CACtB;AAgBD,wBAAgB,aAAa,CAAE,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,SAAS,GAAG,gBAAgB,CA+B3F;AAED,wBAAsB,oBAAoB,CACxC,OAAO,EAAE,kBAAkB,EAC3B,OAAO,EAAE,SAAS,GACjB,OAAO,CAAC,gBAAgB,CAAC,CAwC3B"}

package/dist/social/triage.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.loadFriendshipTriage = loadFriendshipTriage;
+exports.triageFriends = triageFriends;
+var _solidUi = require("solid-ui");
+function uniqueNamedNodes(nodes) {
+  const seen = new Set();
+  const unique = [];
+  for (const node of nodes) {
+    const key = node?.value;
+    if (!key || seen.has(key)) continue;
+    seen.add(key);
+    unique.push(node);
+  }
+  return unique;
+}
+function triageFriends(store, subject) {
+  const outgoingFriends = uniqueNamedNodes(store.each(subject, _solidUi.ns.foaf('knows')));
+  const incomingFriends = uniqueNamedNodes(store.each(undefined, _solidUi.ns.foaf('knows'), subject));
+  const confirmed = [];
+  const unconfirmed = [];
+  const requests = [];
+  for (const friend of outgoingFriends) {
+    const isConfirmed = incomingFriends.some(incomingFriend => incomingFriend.sameTerm(friend));
+    if (isConfirmed) {
+      confirmed.push(friend);
+    } else {
+      unconfirmed.push(friend);
+    }
+  }
+  for (const friend of incomingFriends) {
+    const isAlreadyOutgoing = outgoingFriends.some(outgoingFriend => outgoingFriend.sameTerm(friend));
+    if (!isAlreadyOutgoing) {
+      requests.push(friend);
+    }
+  }
+  return {
+    acquaintances: outgoingFriends,
+    confirmed,
+    unconfirmed,
+    requests
+  };
+}
+async function loadFriendshipTriage(context, subject) {
+  const store = context.session.store;
+  const fetcher = store.fetcher;
+  if (!fetcher || typeof fetcher.load !== 'function') {
+    return triageFriends(store, subject);
+  }
+  try {
+    await fetcher.load(subject.doc());
+  } catch {
+    // Continue with the store snapshot we already have.
+  }
+  const initialTriage = triageFriends(store, subject);
+  const documentsToLoad = new Map();
+  documentsToLoad.set(subject.doc().value, subject.doc());
+  for (const friend of [...initialTriage.acquaintances, ...initialTriage.requests]) {
+    documentsToLoad.set(friend.doc().value, friend.doc());
+  }
+  const incomingStatements = store.statementsMatching(undefined, _solidUi.ns.foaf('knows'), subject);
+  for (const statement of incomingStatements) {
+    const why = statement.why;
+    if (why?.value) {
+      documentsToLoad.set(why.value, why);
+    }
+  }
+  for (const target of documentsToLoad.values()) {
+    try {
+      await fetcher.load(target);
+    } catch {
+      // Keep partial results when one profile document fails to load.
+    }
+  }
+  return triageFriends(store, subject);
+}