solid-panes 4.4.0 → 4.4.1-test.0

package/dist/social/socialSections.js

@@ -6,14 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 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 = document.createElement('header');
+  const header = dom.createElement('header');
   header.className = 'social-pane__header';
   let headerControls = controls;
   const renderHeader = function () {
@@ -21,34 +23,34 @@ function createHeaderSection(context, subject, controls, stats, getProfileData)
     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) {
-      header.appendChild((0, _editProfileDetails.createEditProfileDetailsButton)({
-        dom,
-        store: kb,
-        subject,
-        header,
-        onSaved: renderHeader
-      }));
-    } else if (headerControls.viewerMode === 'authenticated') {
+      // 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('social-pane__friend-action', 'profile__action-button', 'profile__btn-friends', 'flex-center');
-      // header.appendChild(addToFriendsButton)
-      headerContent.appendChild(addToFriendsButton);
+      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(profileData.imageUrl, profileData.name));
+      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 || '???';
+    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));
@@ -106,9 +108,9 @@ function createHeaderSection(context, subject, controls, stats, getProfileData)
   renderHeader();
   return header;
 }
-function createImage(src, alt = '') {
+function createImage(dom, src, alt = '') {
   if (src) {
-    const img = document.createElement('img');
+    const img = dom.createElement('img');
     img.className = 'social-pane__header-hero';
     img.src = src;
     img.alt = alt;
@@ -117,12 +119,12 @@ function createImage(src, alt = '') {
     img.loading = 'eager';
     return img;
   }
-  const fallback = document.createElement('div');
+  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 = document.createElement('span');
+  const icon = dom.createElement('span');
   icon.classList.add('social-pane__header-hero-icon', 'inline-flex-row');
   icon.innerHTML = _icons.personInCircleIcon;
   fallback.appendChild(icon);
@@ -133,20 +135,20 @@ function createMutualSection(options) {
     dom,
     subject,
     familiar,
+    me,
     meUri,
     incoming,
     outgoing,
+    editable,
+    profile,
+    knows,
     mutualConnections,
     link,
     text,
+    buildCheckboxForm,
     renderSupportingInfo,
     renderNameSuffix
   } = options;
-
-  // Mutual confirm UI is intentionally hidden for now.
-  // The related options remain in the function contract so that block can be
-  // restored later without reshaping callers.
-
   let refreshMutualFriends = function () {};
   const mutualSection = dom.createElement('section');
   mutualSection.className = 'social-pane__mutual-friends social-primary__panel';
@@ -174,49 +176,38 @@ function createMutualSection(options) {
     if (!outgoing) {
       const line = youAndThem();
       line.appendChild(text(' have not said you know each other.'));
-      /* NOTE: hiding the outgoing-only unconfirmed message for now.
-      } else {
-        relationshipSummary.appendChild(link(text('You'), meUri))
-        relationshipSummary.appendChild(text(' know '))
-        relationshipSummary.appendChild(link(text(familiar), subject.uri))
-        relationshipSummary.appendChild(text(' (unconfirmed)'))
-      */
+    } 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).'));
     }
-    /* NOTE: hiding the incoming-only unconfirmed message for now.
-    } 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 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.'));
   }
-
-  /* NOTE: hiding the confirm-friend checkbox for now.
-  const shouldShowCheckboxPreview = editable || (Boolean(incoming) && !outgoing)
+  const shouldShowCheckboxPreview = Boolean(incoming) && !outgoing;
   if (shouldShowCheckboxPreview) {
-    const confirmLabel = dom.createElement('span')
-    confirmLabel.appendChild(text('Confirm you know '))
-    confirmLabel.appendChild(link(text(familiar), subject.uri))
-     const relationshipForm = buildCheckboxForm(
-      confirmLabel,
-      new 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)
+    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';
@@ -266,6 +257,11 @@ function createAllFriendsSection(options) {
     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
   });
@@ -276,14 +272,23 @@ function createAllFriendsSection(options) {
   const friendsListRightCell = friendsListRow?.children?.[1];
   const friendsHeaderActions = dom.createElement('div');
   friendsHeaderActions.classList.add('social-friends-header-actions');
-  if (friendsListPromptCell instanceof HTMLElement) {
+  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();
   }
-  if (friendsHeaderActions.childNodes.length > 0) {
-    const friendDropButtons = friendsHeaderActions.querySelectorAll('button');
+  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');
@@ -314,4 +319,75 @@ function createAllFriendsSection(options) {
     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);
+}