@domicile-desktop/component-library 0.0.0-alpha-59d60d9540df → 0.0.0-alpha-75f1c331c3ad

package/README.md

@@ -30,7 +30,8 @@ Each export is `@domicile-desktop/component-library/<name>`.
 | `list-walk` | Arrow-key movement of a highlight through a list while focus stays in an input. |
 | `ModalDialog` | Modal dialog with `title`, `footer` and `trigger` props. |
 | `ContextMenu` | Menu opened at a point, such as a right click's. |
-| `PortalDialogs` | Every dialog applications ask for through the desktop portal. Mount one per shell with `host={domicile}`; it refuses kinds it cannot draw. See [PORTALS.md](/docs/architecture/PORTALS.md). |
+| `PortalDialogs` | Every dialog applications ask for through the desktop portal. Mount one per shell with `host={domicile}`; it refuses kinds it cannot draw. `omitScreenCasts` leaves screen casts out of its indicator. See [PORTALS.md](/docs/architecture/PORTALS.md). |
+| `source-name` | `sourceName`: how a screen cast's source is named. |
 | `Popover` | Non-modal panel anchored to the control that opened it. |
 | `Provider` | base-ui `DirectionProvider` wrapper. Every app roots its tree in it. |
 | `Screen` | Renders its children once per selected display. |
@@ -46,7 +47,9 @@ Each export is `@domicile-desktop/component-library/<name>`.
 | `Toaster` | Stack of toasts in a corner. The caller renders each card. |
 | `ThemeProvider` | Light/dark theme state. Sets `data-theme` on `<html>`. |
 | `ThemeSwitch` | Button that flips the theme. |
+| `useApps` | Hook: names and icons of applications by app id, from their desktop entries. |
 | `usePictureUrl` | Hook: a URL an `<img>` can show for a file read through the SDK's `system`. |
+| `usePortalWallpaper` | Hook: the pictures applications set through the Wallpaper portal, as paths. |
 | `theme-core`, `theme-source`, `standalone-theme-source` | Theme types and sources. Use the standalone source where there is no compositor, such as Storybook. |
 | `control-sizes` | `Size` type and `SIZES` array for sized controls. |
 | `spacing` | rem value of one spacing step, for runtime math. |

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-59d60d9540df",
-    "@domicile-desktop/system-apps": "0.0.0-alpha-59d60d9540df",
+    "@domicile-desktop/sdk": "0.0.0-alpha-75f1c331c3ad",
+    "@domicile-desktop/system-apps": "0.0.0-alpha-75f1c331c3ad",
     "@phosphor-icons/react": "^2.1.10"
   },
   "description": "React components and the Panda CSS design system that Domicile's shells are built from.",
@@ -56,6 +56,7 @@
     "./SlideOver": "./src/SlideOver/SlideOver.tsx",
     "./Slider": "./src/Slider/Slider.tsx",
     "./Switch": "./src/Switch/Switch.tsx",
+    "./source-name": "./src/PortalDialogs/source-name.ts",
     "./spacing": "./src/spacing.ts",
     "./standalone-theme-source": "./src/ThemeSwitch/standalone-theme-source.ts",
     "./TabRail": "./src/TabRail/TabRail.tsx",
@@ -66,7 +67,9 @@
     "./Toaster": "./src/Toaster/Toaster.tsx",
     "./theme-core": "./src/ThemeSwitch/theme-core.ts",
     "./theme-source": "./src/ThemeSwitch/theme-source.ts",
+    "./useApps": "./src/useApps/useApps.ts",
     "./usePictureUrl": "./src/usePictureUrl/usePictureUrl.ts",
+    "./usePortalWallpaper": "./src/usePortalWallpaper/usePortalWallpaper.ts",
     "./vite-shell": "./src/vite-shell.ts"
   },
   "files": [
@@ -99,5 +102,5 @@
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "0.0.0-alpha-59d60d9540df"
+  "version": "0.0.0-alpha-75f1c331c3ad"
 }

package/src/PortalDialogs/CapturingIndicator.tsx

@@ -1,13 +1,15 @@
-import type { Captured, Capturing } from "@domicile-desktop/sdk/portal";
-import { CapturedKind, CapturingKind } from "@domicile-desktop/sdk/portal";
+import type { Capturing } from "@domicile-desktop/sdk/portal";
+import { CapturingKind } from "@domicile-desktop/sdk/portal";
 import { css } from "../../styled-system/css";
 import { flex, hstack } from "../../styled-system/patterns";
 import { Button } from "../Button/Button";
 import { useScreenRegion } from "../Screen/DisplayProvider";
-import { appName } from "./app-name";
+import type { App } from "../useApps/useApps";
 import { deviceNames } from "./device-names";
+import { sourceName } from "./source-name";
 
 type Props = {
+  apps: (appId: string) => App;
   sessions: readonly Capturing[];
   stop: (id: number) => void;
   screen: string | undefined;
@@ -17,14 +19,14 @@ type Props = {
  * A row per session that records the screen or controls or captures input,
  * naming its application and what it holds, with a button that ends it.
  */
-export const CapturingIndicator = ({ screen, sessions, stop }: Props) => {
+export const CapturingIndicator = ({ apps, screen, sessions, stop }: Props) => {
   const region = useScreenRegion(screen);
   return sessions.length === 0 ? undefined : (
     <div className={regionStyles} style={region}>
       <ul aria-label="Sharing and remote control" className={listStyles}>
         {sessions.map((session) => (
           <li className={itemStyles} key={session.id}>
-            <span>{summary(session)}</span>
+            <AppRow app={apps(session.appId)} session={session} />
             <Button
               onClick={() => {
                 stop(session.id);
@@ -62,6 +64,8 @@ const listStyles = flex({
   position: "absolute",
 });
 
+const iconStyles = css({ blockSize: 4, flexShrink: 0, inlineSize: 4 });
+
 const itemStyles = hstack({
   backgroundColor: "card",
   border: "1px solid {colors.warning}",
@@ -76,9 +80,18 @@ const itemStyles = hstack({
   pointerEvents: "auto",
 });
 
+/** A session's application icon, when it has one, and what it holds. */
+const AppRow = ({ app, session }: { app: App; session: Capturing }) => (
+  <>
+    {app.icon !== undefined && (
+      <img alt="" className={iconStyles} src={app.icon} />
+    )}
+    <span>{summary(session, app.name)}</span>
+  </>
+);
+
 /** What a session's row says. */
-const summary = (session: Capturing): string => {
-  const name = appName(session.appId);
+const summary = (session: Capturing, name: string): string => {
   switch (session.kind) {
     case CapturingKind.RemoteDesktop:
       return `Remote control: ${name} — ${[
@@ -93,15 +106,3 @@ const summary = (session: Capturing): string => {
       return `${session.wireKind}: ${name}`;
   }
 };
-
-/** How a row names a recorded source. */
-const sourceName = (source: Captured): string => {
-  switch (source.kind) {
-    case CapturedKind.Window:
-      return source.title === "" ? "Untitled window" : source.title;
-    case CapturedKind.Monitor:
-      return `Screen ${source.name}`;
-    case CapturedKind.Region:
-      return "Region";
-  }
-};

package/src/PortalDialogs/PortalDialogs.tsx

@@ -3,6 +3,7 @@ import { fireGlobalShortcuts } from "@domicile-desktop/sdk/global-shortcuts";
 import type { Capturing, PortalRequest } from "@domicile-desktop/sdk/portal";
 import {
   answerPortalRequest,
+  CapturingKind,
   PortalAnswer,
   PortalKind,
   stopCapturing,
@@ -13,10 +14,10 @@ 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 { useApps } from "../useApps/useApps";
 import { AccessDialog } from "./AccessDialog";
 import { AccountDialog } from "./AccountDialog";
 import { AppChooserDialog } from "./AppChooserDialog";
-import { appName } from "./app-name";
 import { CapturingIndicator } from "./CapturingIndicator";
 import { FileChooserDialog } from "./FileChooserDialog";
 import { GlobalShortcutsDialog } from "./GlobalShortcutsDialog";
@@ -41,6 +42,11 @@ type Props = {
    * `DisplayProvider`; without it, a dialog is centered on the whole page.
    */
   screen?: string | undefined;
+  /**
+   * Leave screen casts out of the capturing indicator, for a shell that shows
+   * them itself.
+   */
+  omitScreenCasts?: boolean | undefined;
   /** How dialogs read the desktop's files, for tests. */
   systemOf?: typeof system | undefined;
   /**
@@ -62,6 +68,7 @@ type Props = {
  */
 export const PortalDialogs = ({
   host,
+  omitScreenCasts = false,
   screen,
   screenOf,
   shellChords = NONE,
@@ -74,6 +81,10 @@ export const PortalDialogs = ({
     [files],
   );
   const [sessions, setSessions] = useState<readonly Capturing[]>([]);
+  const apps = useApps(files, [
+    ...requests.map((request) => request.appId),
+    ...sessions.map((session) => session.appId),
+  ]);
 
   useEffect(() => watchPortalRequests(host, setRequests), [host]);
   useEffect(() => watchCapturing(host, setSessions), [host]);
@@ -91,8 +102,15 @@ export const PortalDialogs = ({
   return (
     <>
       <CapturingIndicator
+        apps={apps}
         screen={screen}
-        sessions={sessions}
+        sessions={
+          omitScreenCasts
+            ? sessions.filter(
+                (session) => session.kind !== CapturingKind.ScreenCast,
+              )
+            : sessions
+        }
         stop={(id) => {
           stopCapturing(host, id);
         }}
@@ -102,6 +120,7 @@ export const PortalDialogs = ({
           answer={(answer) => {
             answerPortalRequest(host, shown.id, answer);
           }}
+          asker={apps(shown.appId).name}
           key={shown.id}
           list={list}
           request={shown}
@@ -117,6 +136,7 @@ export const PortalDialogs = ({
 /** The dialog for `request`'s kind. */
 const Dialog = ({
   answer,
+  asker,
   list,
   request,
   screen,
@@ -124,6 +144,7 @@ const Dialog = ({
   system: files,
 }: {
   answer: (answer: PortalAnswer) => void;
+  asker: string;
   list: (path: string) => Promise<readonly string[]>;
   request: PortalRequest;
   screen: string | undefined;
@@ -135,7 +156,7 @@ const Dialog = ({
       return (
         <AccessDialog
           answer={answer}
-          asker={appName(request.appId)}
+          asker={asker}
           body={request.body}
           screen={screen}
         />
@@ -144,7 +165,7 @@ const Dialog = ({
       return (
         <RemoteDesktopDialog
           answer={answer}
-          asker={appName(request.appId)}
+          asker={asker}
           body={request.body}
           screen={screen}
         />
@@ -153,7 +174,7 @@ const Dialog = ({
       return (
         <InputCaptureDialog
           answer={answer}
-          asker={appName(request.appId)}
+          asker={asker}
           body={request.body}
           screen={screen}
         />
@@ -162,7 +183,7 @@ const Dialog = ({
       return (
         <AppChooserDialog
           answer={answer}
-          asker={appName(request.appId)}
+          asker={asker}
           body={request.body}
           screen={screen}
           system={files}
@@ -181,7 +202,7 @@ const Dialog = ({
       return (
         <AccountDialog
           answer={answer}
-          asker={appName(request.appId)}
+          asker={asker}
           body={request.body}
           screen={screen}
         />
@@ -190,7 +211,7 @@ const Dialog = ({
       return (
         <GlobalShortcutsDialog
           answer={answer}
-          asker={appName(request.appId)}
+          asker={asker}
           body={request.body}
           screen={screen}
           shellChords={shellChords}
@@ -200,7 +221,7 @@ const Dialog = ({
       return (
         <WallpaperDialog
           answer={answer}
-          asker={appName(request.appId)}
+          asker={asker}
           body={request.body}
           files={files}
           screen={screen}
@@ -210,7 +231,7 @@ const Dialog = ({
       return (
         <LauncherDialog
           answer={answer}
-          asker={appName(request.appId)}
+          asker={asker}
           body={request.body}
           screen={screen}
         />
@@ -219,7 +240,7 @@ const Dialog = ({
       return (
         <UsbDialog
           answer={answer}
-          asker={appName(request.appId)}
+          asker={asker}
           body={request.body}
           screen={screen}
         />
@@ -228,7 +249,7 @@ const Dialog = ({
       return (
         <ScreenCastDialog
           answer={answer}
-          asker={appName(request.appId)}
+          asker={asker}
           body={request.body}
           screen={screen}
         />
@@ -237,7 +258,7 @@ const Dialog = ({
       return (
         <PrintDialog
           answer={answer}
-          asker={appName(request.appId)}
+          asker={asker}
           body={request.body}
           screen={screen}
         />
@@ -246,7 +267,7 @@ const Dialog = ({
       return (
         <ScreenshotDialog
           answer={answer}
-          asker={appName(request.appId)}
+          asker={asker}
           body={request.body}
           screen={screen}
         />
@@ -255,7 +276,7 @@ const Dialog = ({
       return (
         <PickColorDialog
           answer={answer}
-          asker={appName(request.appId)}
+          asker={asker}
           body={request.body}
           screen={screen}
         />

package/src/PortalDialogs/app-choices.ts

@@ -1,29 +1,16 @@
 // The applications an app chooser offers, described from their desktop
 // entries, and which to pick first.
 
-import type { Option } from "@cprussin/option-result";
-import { None, Ok, Result } from "@cprussin/option-result";
+import type { Result } from "@cprussin/option-result";
+import { Ok } from "@cprussin/option-result";
 import type { System, SystemError } from "@domicile-desktop/sdk/system";
-import type { IconLookup } from "@domicile-desktop/system-apps/app-icons";
-import { appIcons } from "@domicile-desktop/system-apps/app-icons";
-import { dataDirs } from "@domicile-desktop/system-apps/data-dirs";
-import type { DesktopEntry } from "@domicile-desktop/system-apps/desktop-entry";
-import { installedApps } from "@domicile-desktop/system-apps/installed";
+import type { DescribedApp } from "@domicile-desktop/system-apps/describe-apps";
+import { describeApps } from "@domicile-desktop/system-apps/describe-apps";
 import { defaultApps } from "@domicile-desktop/system-apps/mime-apps";
 
-/** One application offered. */
-export type AppChoice = {
-  /** Its desktop file ID without `.desktop`, as the portal names it. */
-  id: string;
-  /** Its entry's `Name`, or `id` when it has no entry to read. */
-  name: string;
-  /** A `data:` URL, or `undefined` for none. */
-  icon: string | undefined;
-};
-
 /** The offered applications, described, and the defaults for the type. */
 export type DescribedChoices = {
-  apps: AppChoice[];
+  apps: DescribedApp[];
   /** `mimeapps.list`'s defaults, desktop file IDs without `.desktop`. */
   defaults: string[];
 };
@@ -36,32 +23,20 @@ export const describeChoices = async (
   system: System,
   choices: readonly string[],
   contentType: string | undefined,
-): Promise<Result<DescribedChoices, SystemError>> =>
-  (await dataDirs(system)).andThenAsync(async (dirs) => {
-    const icons = appIcons(system, dirs);
-    const apps = (await installedApps(system, dirs)).andThenAsync(
-      async (installed) => {
-        const entries = new Map(
-          installed.map((entry) => [withoutSuffix(entry.id), entry]),
-        );
-        return Result.collect(
-          await Promise.all(
-            choices.map((id) => described(icons, id, entries.get(id))),
-          ),
-        );
-      },
-    );
-    const defaults =
-      contentType === undefined
-        ? Ok<string[], SystemError>([])
-        : await defaultApps(system, contentType);
-    return (await apps).andThen((found) =>
-      defaults.map((ids) => ({
-        apps: found,
-        defaults: ids.map(withoutSuffix),
-      })),
-    );
-  });
+): Promise<Result<DescribedChoices, SystemError>> => {
+  const [apps, defaults] = await Promise.all([
+    describeApps(system, choices),
+    contentType === undefined
+      ? Ok<string[], SystemError>([])
+      : defaultApps(system, contentType),
+  ]);
+  return apps.andThen((found) =>
+    defaults.map((ids) => ({
+      apps: found,
+      defaults: ids.map(withoutSuffix),
+    })),
+  );
+};
 
 /**
  * The application to pick first: the last one chosen, else the first default
@@ -76,21 +51,4 @@ export const preselected = (
     (id) => id !== undefined && choices.includes(id),
   );
 
-/** Choice `id`, named and drawn by its `entry` when it has one. */
-const described = async (
-  icons: IconLookup,
-  id: string,
-  entry: DesktopEntry | undefined,
-): Promise<Result<AppChoice, SystemError>> =>
-  entry === undefined
-    ? Ok({ icon: undefined, id, name: id })
-    : (entry.icon === undefined
-        ? Ok<Option<string>, SystemError>(None())
-        : await icons(entry.icon)
-      ).map((icon) => ({
-        icon: icon.match({ None: () => undefined, Some: (url) => url }),
-        id,
-        name: entry.name,
-      }));
-
 const withoutSuffix = (id: string): string => id.replace(/\.desktop$/, "");

package/src/PortalDialogs/source-name.ts

@@ -0,0 +1,14 @@
+import type { Captured } from "@domicile-desktop/sdk/portal";
+import { CapturedKind } from "@domicile-desktop/sdk/portal";
+
+/** How the shell names a source a screen cast records. */
+export const sourceName = (source: Captured): string => {
+  switch (source.kind) {
+    case CapturedKind.Window:
+      return source.title === "" ? "Untitled window" : source.title;
+    case CapturedKind.Monitor:
+      return `Screen ${source.name}`;
+    case CapturedKind.Region:
+      return "Region";
+  }
+};

package/src/useApps/useApps.ts

@@ -0,0 +1,72 @@
+import type { System } from "@domicile-desktop/sdk/system";
+import type { DescribedApp } from "@domicile-desktop/system-apps/describe-apps";
+import { describeApps } from "@domicile-desktop/system-apps/describe-apps";
+import { useCallback, useEffect, useState } from "react";
+
+/** An application as a dialog or indicator shows it. */
+export type App = {
+  name: string;
+  /** A `data:` URL, or `undefined` for none. */
+  icon: string | undefined;
+};
+
+/**
+ * Names each application by its desktop entry, with its icon, reading the
+ * entries for `ids` again when they change. An id with no entry, or not read
+ * yet, is named by itself; the empty id is "An application".
+ */
+export const useApps = (
+  system: System,
+  ids: readonly string[],
+): ((appId: string) => App) => {
+  const [described, setDescribed] = useState<ReadonlyMap<string, DescribedApp>>(
+    new Map(),
+  );
+  // The array is new on every push; its contents are what change.
+  const key = [...new Set(ids.filter((id) => id !== ""))].toSorted().join("\n");
+
+  useEffect(() => {
+    if (key === "") {
+      return undefined;
+    } else {
+      let current = true;
+      describeApps(system, key.split("\n"))
+        .then((result) => {
+          result.match({
+            Err: (error) => {
+              throw new Error(
+                `could not read the applications: ${error.message}`,
+              );
+            },
+            Ok: (found) => {
+              if (current) {
+                setDescribed(new Map(found.map((app) => [app.id, app])));
+              }
+            },
+          });
+        })
+        .catch((error: unknown) => {
+          // biome-ignore lint/suspicious/noConsole: applications stay named by their ids; say why
+          console.error("Could not name the applications", error);
+        });
+      return () => {
+        current = false;
+      };
+    }
+  }, [system, key]);
+
+  return useCallback((appId) => app(described, appId), [described]);
+};
+
+/** `appId` as `described` names it. */
+const app = (
+  described: ReadonlyMap<string, DescribedApp>,
+  appId: string,
+): App => {
+  const entry = described.get(appId);
+  if (entry === undefined) {
+    return { icon: undefined, name: appId === "" ? "An application" : appId };
+  } else {
+    return { icon: entry.icon, name: entry.name };
+  }
+};

package/src/usePortalWallpaper/usePortalWallpaper.ts

@@ -0,0 +1,20 @@
+import type { PortalHost, PortalWallpaper } from "@domicile-desktop/sdk/portal";
+import { watchPortalWallpaper } from "@domicile-desktop/sdk/portal";
+import { useEffect, useState } from "react";
+
+const NONE_SET: PortalWallpaper = {
+  background: undefined,
+  lockscreen: undefined,
+};
+
+/**
+ * The pictures applications set through the Wallpaper portal, as paths. See
+ * `docs/architecture/PORTALS.md`.
+ */
+export const usePortalWallpaper = (host: PortalHost): PortalWallpaper => {
+  const [wallpaper, setWallpaper] = useState(NONE_SET);
+
+  useEffect(() => watchPortalWallpaper(host, setWallpaper), [host]);
+
+  return wallpaper;
+};

package/src/PortalDialogs/app-name.ts

@@ -1,3 +0,0 @@
-/** How a dialog or indicator names an application. */
-export const appName = (appId: string): string =>
-  appId === "" ? "An application" : appId;