@domicile-desktop/component-library 0.0.0-alpha-da1cf1c5441c → 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-da1cf1c5441c",
-    "@domicile-desktop/system-apps": "0.0.0-alpha-da1cf1c5441c",
+    "@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.",
@@ -103,5 +103,5 @@
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "0.0.0-alpha-da1cf1c5441c"
+  "version": "0.0.0-alpha-e1457b57e6b2"
 }

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/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 === ""