@domicile-desktop/component-library 0.0.0-alpha-ddde2bfbbaad → 0.0.0-alpha-e1457b57e6b2

package/package.json

@@ -2,8 +2,8 @@
   "dependencies": {
     "@base-ui/react": "^1.8.0",
     "@cprussin/option-result": "^2.0.1",
-    "@domicile-desktop/sdk": "0.0.0-alpha-ddde2bfbbaad",
-    "@domicile-desktop/system-apps": "0.0.0-alpha-ddde2bfbbaad",
+    "@domicile-desktop/sdk": "0.0.0-alpha-e1457b57e6b2",
+    "@domicile-desktop/system-apps": "0.0.0-alpha-e1457b57e6b2",
     "@phosphor-icons/react": "^2.1.10"
   },
   "description": "React components and the Panda CSS design system that Domicile's shells are built from.",
@@ -30,6 +30,7 @@
   },
   "exports": {
     "./Accordion": "./src/Accordion/Accordion.tsx",
+    "./AppChooser": "./src/AppChooser/AppChooser.tsx",
     "./Autocomplete": "./src/Autocomplete/Autocomplete.tsx",
     "./Avatar": "./src/Avatar/Avatar.tsx",
     "./Button": "./src/Button/Button.tsx",
@@ -102,5 +103,5 @@
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "0.0.0-alpha-ddde2bfbbaad"
+  "version": "0.0.0-alpha-e1457b57e6b2"
 }

package/src/AppChooser/AppChooser.tsx

@@ -0,0 +1,186 @@
+import type { System } from "@domicile-desktop/sdk/system";
+import { AppWindowIcon } from "@phosphor-icons/react/dist/ssr/AppWindow";
+import { useId, useState } from "react";
+import { css } from "../../styled-system/css";
+import { flex, hstack } from "../../styled-system/patterns";
+import { Button } from "../Button/Button";
+import { keepInView, stepOf, steppedTo } from "../list-walk";
+import { ModalDialog } from "../ModalDialog/ModalDialog";
+import { preselected } from "./app-choices";
+import { useDescribedChoices } from "./useDescribedChoices";
+
+const ICON_SIZE = 24;
+
+type Props = {
+  /** Desktop file IDs without `.desktop`, in the order offered. */
+  choices: readonly string[];
+  /** The type opened, whose defaults start picked; none when `undefined`. */
+  contentType: string | undefined;
+  /** A line under the title, such as who asks. */
+  description?: string | undefined;
+  /** The application chosen last time, which starts picked. */
+  lastChoice?: string | undefined;
+  onCancel: () => void;
+  /** Called with the ID of the application to open with. */
+  onChoose: (id: string) => void;
+  screen: string | undefined;
+  /** Where the applications' desktop entries are read. */
+  system: System;
+  title: string;
+};
+
+/**
+ * Pick an application to open a file or URI with. The last choice, else the
+ * type's default, else the first offered, starts picked. Dismissing it
+ * cancels.
+ */
+export const AppChooser = ({
+  choices,
+  contentType,
+  description,
+  lastChoice,
+  onCancel,
+  onChoose,
+  screen,
+  system,
+  title,
+}: Props) => {
+  const listId = useId();
+  const described = useDescribedChoices(system, choices, contentType);
+  const [picked, setPicked] = useState<string | undefined>();
+  const apps = described?.apps ?? [];
+  const first =
+    described === undefined
+      ? undefined
+      : preselected(choices, lastChoice, described.defaults);
+  // A pick the caller has since taken away no longer counts.
+  const chosen =
+    picked !== undefined && choices.includes(picked) ? picked : first;
+  const at = apps.findIndex(({ id }) => id === chosen);
+  const choose = (id: string | undefined) => {
+    if (id !== undefined) {
+      onChoose(id);
+    }
+  };
+  return (
+    <ModalDialog
+      closeButton={false}
+      footer={
+        <>
+          <Button onClick={onCancel} variant="outline">
+            Cancel
+          </Button>
+          <Button
+            disabled={chosen === undefined}
+            onClick={() => {
+              choose(chosen);
+            }}
+          >
+            Open
+          </Button>
+        </>
+      }
+      onOpenChange={(open) => {
+        if (!open) {
+          onCancel();
+        }
+      }}
+      open
+      screen={screen}
+      title={title}
+    >
+      {description !== undefined && (
+        <p className={descriptionStyles}>{description}</p>
+      )}
+      <div
+        aria-activedescendant={at === -1 ? undefined : optionId(listId, at)}
+        aria-label="Applications"
+        className={listStyles}
+        onKeyDown={(event) => {
+          const step = stepOf(event);
+          const next = apps[steppedTo(at, step ?? 0, apps.length)];
+          if (event.key === "Enter") {
+            event.preventDefault();
+            choose(chosen);
+          } else if (step !== undefined && next !== undefined) {
+            event.preventDefault();
+            setPicked(next.id);
+          }
+        }}
+        role="listbox"
+        tabIndex={0}
+      >
+        {apps.map((app, index) => (
+          // biome-ignore lint/a11y/useKeyWithClickEvents: the listbox handles the keyboard via `aria-activedescendant`
+          <div
+            aria-selected={app.id === chosen}
+            className={optionStyles}
+            id={optionId(listId, index)}
+            key={app.id}
+            onClick={() => {
+              setPicked(app.id);
+            }}
+            onDoubleClick={() => {
+              choose(app.id);
+            }}
+            ref={app.id === chosen ? keepInView : undefined}
+            role="option"
+            tabIndex={-1}
+          >
+            {app.icon === undefined ? (
+              <AppWindowIcon size={ICON_SIZE} />
+            ) : (
+              <img
+                alt=""
+                className={iconStyles}
+                height={ICON_SIZE}
+                src={app.icon}
+                width={ICON_SIZE}
+              />
+            )}
+            <span className={nameStyles}>{app.name}</span>
+          </div>
+        ))}
+      </div>
+    </ModalDialog>
+  );
+};
+
+const descriptionStyles = css({ color: "muted", fontSize: "sm", margin: 0 });
+
+const listStyles = flex({
+  direction: "column",
+  gap: 0.5,
+  marginBlockStart: 3,
+  maxBlockSize: 80,
+  overflowY: "auto",
+});
+
+// As the file picker's rows.
+const optionStyles = hstack({
+  "&[aria-selected=true]": {
+    backgroundImage:
+      "linear-gradient(to right, color-mix(in oklab, {colors.accent} 30%, transparent), color-mix(in oklab, {colors.accent} 8%, transparent))",
+  },
+  borderRadius: "md",
+  color: "foreground",
+  cursor: "pointer",
+  gap: 3,
+  paddingBlock: 1.5,
+  paddingInline: 2,
+  transition: "background-color {durations.fast} {easings.out}",
+  userSelect: "none",
+});
+
+const iconStyles = css({ flexShrink: 0, objectFit: "contain" });
+
+const nameStyles = css({
+  fontSize: "sm",
+  fontWeight: "medium",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+});
+
+const optionId = (listId: string, index: number): string =>
+  `${listId}-${String(index)}`;

package/src/PortalDialogs/AccountDialog.tsx

@@ -1,57 +1,86 @@
 import type { AccountBody, PortalAnswer } from "@domicile-desktop/sdk/portal";
 import { PortalAnswer as Answer } from "@domicile-desktop/sdk/portal";
+import type { System } from "@domicile-desktop/sdk/system";
 import { css } from "../../styled-system/css";
+import { hstack } from "../../styled-system/patterns";
 import { Button } from "../Button/Button";
 import { ModalDialog } from "../ModalDialog/ModalDialog";
+import { usePictureUrl } from "../usePictureUrl/usePictureUrl";
 
 type Props = {
   answer: (answer: PortalAnswer) => void;
   /** Who asks, as the dialog names them. */
   asker: string;
   body: AccountBody;
+  /** Reads the user's picture. */
+  files: Pick<System, "readFile">;
   screen: string | undefined;
 };
 
 /**
- * Whether an application may have the user's name and picture. Dismissing it
- * keeps them.
+ * Whether an application may have the user's name and picture, showing both.
+ * Dismissing it keeps them.
  */
-export const AccountDialog = ({ answer, asker, body, screen }: Props) => (
-  <ModalDialog
-    closeButton={false}
-    footer={
-      <>
-        <Button
-          onClick={() => {
-            answer(Answer.Canceled());
-          }}
-          variant="outline"
-        >
-          Don't share
-        </Button>
-        <Button
-          onClick={() => {
-            answer(Answer.Access());
-          }}
-        >
-          Share
-        </Button>
-      </>
-    }
-    onOpenChange={(open) => {
-      if (!open) {
-        answer(Answer.Canceled());
+export const AccountDialog = ({
+  answer,
+  asker,
+  body,
+  files,
+  screen,
+}: Props) => {
+  const picture = usePictureUrl(files, body.image);
+  return (
+    <ModalDialog
+      closeButton={false}
+      footer={
+        <>
+          <Button
+            onClick={() => {
+              answer(Answer.Canceled());
+            }}
+            variant="outline"
+          >
+            Don't share
+          </Button>
+          <Button
+            onClick={() => {
+              answer(Answer.Access());
+            }}
+          >
+            Share
+          </Button>
+        </>
       }
-    }}
-    open
-    screen={screen}
-    title="Share your name and picture?"
-  >
-    <p className={askerStyles}>{`${asker} asks`}</p>
-    {body.reason !== undefined && <p className={textStyles}>{body.reason}</p>}
-  </ModalDialog>
-);
+      onOpenChange={(open) => {
+        if (!open) {
+          answer(Answer.Canceled());
+        }
+      }}
+      open
+      screen={screen}
+      title="Share your name and picture?"
+    >
+      <p className={askerStyles}>{`${asker} asks`}</p>
+      {body.reason !== undefined && <p className={textStyles}>{body.reason}</p>}
+      <div className={userStyles}>
+        {picture !== undefined && (
+          <img alt={body.name} className={pictureStyles} src={picture} />
+        )}
+        <span className={textStyles}>{body.name}</span>
+      </div>
+    </ModalDialog>
+  );
+};
 
 const askerStyles = css({ color: "muted", fontSize: "sm", margin: 0 });
 
 const textStyles = css({ color: "foreground", margin: 0 });
+
+const userStyles = hstack({ gap: 3, marginBlockStart: 3 });
+
+const pictureStyles = css({
+  blockSize: 10,
+  borderRadius: "full",
+  inlineSize: 10,
+  objectFit: "cover",
+});

package/src/PortalDialogs/AppChooserDialog.tsx

@@ -4,17 +4,7 @@ import type {
 } from "@domicile-desktop/sdk/portal";
 import { PortalAnswer as Answer } from "@domicile-desktop/sdk/portal";
 import type { System } from "@domicile-desktop/sdk/system";
-import { AppWindowIcon } from "@phosphor-icons/react/dist/ssr/AppWindow";
-import { useId, useState } from "react";
-import { css } from "../../styled-system/css";
-import { flex, hstack } from "../../styled-system/patterns";
-import { Button } from "../Button/Button";
-import { keepInView, stepOf, steppedTo } from "../list-walk";
-import { ModalDialog } from "../ModalDialog/ModalDialog";
-import { preselected } from "./app-choices";
-import { useDescribedChoices } from "./useDescribedChoices";
-
-const ICON_SIZE = 24;
+import { AppChooser } from "../AppChooser/AppChooser";
 
 type Props = {
   answer: (answer: PortalAnswer) => void;
@@ -26,162 +16,33 @@ type Props = {
   system: System;
 };
 
-/**
- * Pick an application to open a file or URI with. The last choice, else the
- * type's default, starts picked. Dismissing it cancels.
- */
+/** The AppChooser portal's {@link AppChooser}. Dismissing it cancels. */
 export const AppChooserDialog = ({
   answer,
   asker,
   body,
   screen,
   system,
-}: Props) => {
-  const listId = useId();
-  const described = useDescribedChoices(system, body.choices, body.contentType);
-  const [picked, setPicked] = useState<string | undefined>();
-  const apps = described?.apps ?? [];
-  const first =
-    described === undefined
-      ? undefined
-      : preselected(body.choices, body.lastChoice, described.defaults);
-  // A pick the application has since taken away no longer counts.
-  const chosen =
-    picked !== undefined && body.choices.includes(picked) ? picked : first;
-  const at = apps.findIndex(({ id }) => id === chosen);
-  const choose = (id: string | undefined) => {
-    if (id !== undefined) {
+}: Props) => (
+  <AppChooser
+    choices={body.choices}
+    contentType={body.contentType}
+    description={`${asker} asks`}
+    lastChoice={body.lastChoice}
+    onCancel={() => {
+      answer(Answer.Canceled());
+    }}
+    onChoose={(id) => {
       answer(Answer.AppChooser(id));
-    }
-  };
-  return (
-    <ModalDialog
-      closeButton={false}
-      footer={
-        <>
-          <Button
-            onClick={() => {
-              answer(Answer.Canceled());
-            }}
-            variant="outline"
-          >
-            Cancel
-          </Button>
-          <Button
-            disabled={chosen === undefined}
-            onClick={() => {
-              choose(chosen);
-            }}
-          >
-            Open
-          </Button>
-        </>
-      }
-      onOpenChange={(open) => {
-        if (!open) {
-          answer(Answer.Canceled());
-        }
-      }}
-      open
-      screen={screen}
-      title={titleOf(body)}
-    >
-      <p className={askerStyles}>{`${asker} asks`}</p>
-      <div
-        aria-activedescendant={at === -1 ? undefined : optionId(listId, at)}
-        aria-label="Applications"
-        className={listStyles}
-        onKeyDown={(event) => {
-          const step = stepOf(event);
-          const next = apps[steppedTo(at, step ?? 0, apps.length)];
-          if (event.key === "Enter") {
-            event.preventDefault();
-            choose(chosen);
-          } else if (step !== undefined && next !== undefined) {
-            event.preventDefault();
-            setPicked(next.id);
-          }
-        }}
-        role="listbox"
-        tabIndex={0}
-      >
-        {apps.map((app, index) => (
-          // biome-ignore lint/a11y/useKeyWithClickEvents: the listbox handles the keyboard via `aria-activedescendant`
-          <div
-            aria-selected={app.id === chosen}
-            className={optionStyles}
-            id={optionId(listId, index)}
-            key={app.id}
-            onClick={() => {
-              setPicked(app.id);
-            }}
-            onDoubleClick={() => {
-              choose(app.id);
-            }}
-            ref={app.id === chosen ? keepInView : undefined}
-            role="option"
-            tabIndex={-1}
-          >
-            {app.icon === undefined ? (
-              <AppWindowIcon size={ICON_SIZE} />
-            ) : (
-              <img
-                alt=""
-                className={iconStyles}
-                height={ICON_SIZE}
-                src={app.icon}
-                width={ICON_SIZE}
-              />
-            )}
-            <span className={nameStyles}>{app.name}</span>
-          </div>
-        ))}
-      </div>
-    </ModalDialog>
-  );
-};
-
-const askerStyles = css({ color: "muted", fontSize: "sm", margin: 0 });
-
-const listStyles = flex({
-  direction: "column",
-  gap: 0.5,
-  marginBlockStart: 3,
-  maxBlockSize: 80,
-  overflowY: "auto",
-});
-
-// As the file picker's rows.
-const optionStyles = hstack({
-  "&[aria-selected=true]": {
-    backgroundImage:
-      "linear-gradient(to right, color-mix(in oklab, {colors.accent} 30%, transparent), color-mix(in oklab, {colors.accent} 8%, transparent))",
-  },
-  borderRadius: "md",
-  color: "foreground",
-  cursor: "pointer",
-  gap: 3,
-  paddingBlock: 1.5,
-  paddingInline: 2,
-  transition: "background-color {durations.fast} {easings.out}",
-  userSelect: "none",
-});
-
-const iconStyles = css({ flexShrink: 0, objectFit: "contain" });
-
-const nameStyles = css({
-  fontSize: "sm",
-  fontWeight: "medium",
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-});
+    }}
+    screen={screen}
+    system={system}
+    title={titleOf(body)}
+  />
+);
 
 /** What the dialog opens, as its title names it. */
 const titleOf = ({ filename, uri }: AppChooserBody): string => {
   const opened = filename ?? uri;
   return opened === undefined ? "Open with" : `Open ${opened} with`;
 };
-
-const optionId = (listId: string, index: number): string =>
-  `${listId}-${String(index)}`;

package/src/PortalDialogs/PortalDialogs.tsx

@@ -4,6 +4,7 @@ import type { Capturing, PortalRequest } from "@domicile-desktop/sdk/portal";
 import {
   answerPortalRequest,
   CapturingKind,
+  CastSourceKind,
   PortalAnswer,
   PortalKind,
   stopCapturing,
@@ -14,6 +15,7 @@ import type { System, SystemHost } from "@domicile-desktop/sdk/system";
 import { system } from "@domicile-desktop/sdk/system";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { listDirectory } from "../FilePicker/list-directory";
+import type { App } from "../useApps/useApps";
 import { useApps } from "../useApps/useApps";
 import { AccessDialog } from "./AccessDialog";
 import { AccountDialog } from "./AccountDialog";
@@ -82,7 +84,7 @@ export const PortalDialogs = ({
   );
   const [sessions, setSessions] = useState<readonly Capturing[]>([]);
   const apps = useApps(files, [
-    ...requests.map((request) => request.appId),
+    ...requests.flatMap(appIds),
     ...sessions.map((session) => session.appId),
   ]);
 
@@ -120,6 +122,7 @@ export const PortalDialogs = ({
           answer={(answer) => {
             answerPortalRequest(host, shown.id, answer);
           }}
+          apps={apps}
           asker={apps(shown.appId).name}
           key={shown.id}
           list={list}
@@ -136,6 +139,7 @@ export const PortalDialogs = ({
 /** The dialog for `request`'s kind. */
 const Dialog = ({
   answer,
+  apps,
   asker,
   list,
   request,
@@ -144,6 +148,7 @@ const Dialog = ({
   system: files,
 }: {
   answer: (answer: PortalAnswer) => void;
+  apps: (appId: string) => App;
   asker: string;
   list: (path: string) => Promise<readonly string[]>;
   request: PortalRequest;
@@ -204,6 +209,7 @@ const Dialog = ({
           answer={answer}
           asker={asker}
           body={request.body}
+          files={files}
           screen={screen}
         />
       );
@@ -249,6 +255,7 @@ const Dialog = ({
       return (
         <ScreenCastDialog
           answer={answer}
+          apps={apps}
           asker={asker}
           body={request.body}
           screen={screen}
@@ -300,6 +307,17 @@ const screenFor = (
   return parents ?? screen;
 };
 
+/** The applications `request` names: who asks, and windows it may record. */
+const appIds = (request: PortalRequest): string[] =>
+  request.kind === PortalKind.ScreenCast
+    ? [
+        request.appId,
+        ...request.body.sources.flatMap((source) =>
+          source.kind === CastSourceKind.Window ? [source.appId] : [],
+        ),
+      ]
+    : [request.appId];
+
 /** Whether `request` is a question this draws a dialog for. */
 const isAsked = (request: PortalRequest): boolean => {
   switch (request.kind) {

package/src/PortalDialogs/ScreenCastDialog.tsx

@@ -17,10 +17,13 @@ import { css } from "../../styled-system/css";
 import { Button } from "../Button/Button";
 import { ModalDialog } from "../ModalDialog/ModalDialog";
 import { Tabs } from "../Tabs/Tabs";
+import type { App } from "../useApps/useApps";
 import { RegionPicker } from "./RegionPicker";
 
 type Props = {
   answer: (answer: PortalAnswer) => void;
+  /** Names a window's application by its Wayland app id. */
+  apps: (appId: string) => App;
   /** Who asks, as the dialog names them. */
   asker: string;
   body: ScreenCastBody;
@@ -33,7 +36,13 @@ type Props = {
  * asks for one. Picks one, or several when the application asks for more.
  * Dismissing it cancels.
  */
-export const ScreenCastDialog = ({ answer, asker, body, screen }: Props) => {
+export const ScreenCastDialog = ({
+  answer,
+  apps,
+  asker,
+  body,
+  screen,
+}: Props) => {
   const [picked, setPicked] = useState<readonly string[]>([]);
   const [drawing, setDrawing] = useState(false);
   const windows = body.sources.filter(
@@ -72,8 +81,8 @@ export const ScreenCastDialog = ({ answer, asker, body, screen }: Props) => {
           key={sourceKey(source)}
           value={sourceKey(source)}
         >
-          <SourceIcon source={source} />
-          <span>{sourceName(source)}</span>
+          <SourceIcon app={appOf(apps, source)} source={source} />
+          <span>{sourceName(source, appOf(apps, source))}</span>
         </Toggle>
       ))}
     </ToggleGroup>
@@ -152,13 +161,19 @@ export const ScreenCastDialog = ({ answer, asker, body, screen }: Props) => {
 };
 
 /** A window's application icon, a window outline without one, or a screen. */
-const SourceIcon = ({ source }: { source: CastSource }) => {
+const SourceIcon = ({
+  app,
+  source,
+}: {
+  app: App | undefined;
+  source: CastSource;
+}) => {
   switch (source.kind) {
     case CastSourceKind.Window:
-      return source.icon === undefined ? (
+      return app?.icon === undefined ? (
         <AppWindowIcon aria-hidden className={iconStyles} />
       ) : (
-        <img alt="" className={iconStyles} src={source.icon} />
+        <img alt="" className={iconStyles} src={app.icon} />
       );
     case CastSourceKind.Monitor:
     case CastSourceKind.Region:
@@ -226,14 +241,21 @@ const sourceKey = (source: CastSource): string => {
   }
 };
 
-/** How the picker names a source. */
-const sourceName = (source: CastSource): string => {
+/** A window's application, or `undefined` for a screen or a window with no app id. */
+const appOf = (
+  apps: (appId: string) => App,
+  source: CastSource,
+): App | undefined =>
+  source.kind === CastSourceKind.Window && source.appId !== ""
+    ? apps(source.appId)
+    : undefined;
+
+/** How the picker names a source, a window by its `app` too. */
+const sourceName = (source: CastSource, app: App | undefined): string => {
   switch (source.kind) {
     case CastSourceKind.Window: {
       const title = source.title === "" ? "Untitled window" : source.title;
-      return source.appName === undefined
-        ? title
-        : `${source.appName}: ${title}`;
+      return app === undefined ? title : `${app.name}: ${title}`;
     }
     case CastSourceKind.Monitor:
       return source.description === ""