@domicile-desktop/component-library 0.0.0-alpha-59f4d795d464 → 0.0.0-alpha-9fd298a6794f

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-59f4d795d464",
-    "@domicile-desktop/system-apps": "0.0.0-alpha-59f4d795d464",
+    "@domicile-desktop/sdk": "0.0.0-alpha-9fd298a6794f",
+    "@domicile-desktop/system-apps": "0.0.0-alpha-9fd298a6794f",
     "@pandacss/dev": "^1.12.1",
     "@phosphor-icons/react": "^2.1.10"
   },
@@ -110,5 +110,5 @@
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "0.0.0-alpha-59f4d795d464"
+  "version": "0.0.0-alpha-9fd298a6794f"
 }

package/src/PortalDialogs/PortalDialogs.tsx

@@ -283,7 +283,9 @@ const Dialog = ({
           apps={apps}
           asker={asker}
           body={request.body}
+          browserWindows={browserWindows}
           screen={screen}
+          shownWindows={shownWindows}
         />
       );
     case PortalKind.Print:

package/src/PortalDialogs/ScreenCastDialog.tsx

@@ -1,24 +1,30 @@
-import { Toggle } from "@base-ui/react/toggle";
-import { ToggleGroup } from "@base-ui/react/toggle-group";
+import type { DomicileBrowserWindow } from "@domicile-desktop/sdk/domicile-host";
 import type {
   CastSource,
+  FrozenDesk,
   PortalAnswer,
   ScreenCastBody,
+  ShotRect,
 } from "@domicile-desktop/sdk/portal";
 import {
   PortalAnswer as Answer,
   CastSourceKind,
   CastSource as Source,
 } from "@domicile-desktop/sdk/portal";
-import { AppWindowIcon } from "@phosphor-icons/react/dist/ssr/AppWindow";
+import { GlobeIcon } from "@phosphor-icons/react/dist/ssr/Globe";
 import { MonitorIcon } from "@phosphor-icons/react/dist/ssr/Monitor";
 import { useState } from "react";
 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 { onFrame } from "./on-frame";
 import { RegionPicker } from "./RegionPicker";
+import type { SourceTile } from "./SourceTiles";
+import { SourceTiles } from "./SourceTiles";
+import type { ShownWindow } from "./shown-windows";
+import { ShownWindowKind } from "./shown-windows";
+import { WindowIcon } from "./WindowIcon";
 
 type Props = {
   answer: (answer: PortalAnswer) => void;
@@ -27,13 +33,18 @@ type Props = {
   /** Who asks, as the dialog names them. */
   asker: string;
   body: ScreenCastBody;
+  /** The desktop's browser windows, as the engine lists them. */
+  browserWindows: readonly DomicileBrowserWindow[];
   screen: string | undefined;
+  /** The windows the shell draws on screen, read once as the dialog opens. */
+  shownWindows: () => readonly ShownWindow[];
 };
 
 /**
- * A source picker: the windows and screens an application may record, on a
- * tab each when it may have either, and a region drawn on the desk when it
- * asks for one. Picks one, or several when the application asks for more.
+ * A source picker: the windows, browser windows and screens an application
+ * may record, each a tile previewing it on the desk, and a region drawn on
+ * the desk when it asks for one. A browser window is its page alone, from
+ * the engine. Picks one, or several when the application asks for more.
  * Dismissing it cancels.
  */
 export const ScreenCastDialog = ({
@@ -41,52 +52,49 @@ export const ScreenCastDialog = ({
   apps,
   asker,
   body,
+  browserWindows,
   screen,
+  shownWindows,
 }: Props) => {
+  // Read once, as the desk was shot; a later move would not match it.
+  const [shown] = useState(shownWindows);
   const [picked, setPicked] = useState<readonly string[]>([]);
   const [drawing, setDrawing] = useState(false);
   const windows = body.sources.filter(
     (source) => source.kind === CastSourceKind.Window,
   );
+  const browsers = body.browserWindows
+    ? browserWindows.map(({ id, title }) => Source.BrowserWindow({ id, title }))
+    : [];
   const monitors = body.sources.filter(
     (source) => source.kind === CastSourceKind.Monitor,
   );
-  const pick = (group: readonly CastSource[], value: readonly string[]) => {
-    setPicked(
-      body.multiple
-        ? [
-            ...picked.filter(
-              (key) => !group.some((source) => sourceKey(source) === key),
-            ),
-            ...value,
-          ]
-        : value,
+  const offered = [...windows, ...browsers, ...monitors];
+  const group = (label: string, sources: readonly CastSource[]) =>
+    sources.length > 0 && (
+      <SourceTiles
+        desk={body.desk}
+        label={label}
+        multiple={body.multiple}
+        onValueChange={(value) => {
+          setPicked(
+            body.multiple
+              ? [
+                  ...picked.filter(
+                    (key) =>
+                      !sources.some((source) => sourceKey(source) === key),
+                  ),
+                  ...value,
+                ]
+              : value,
+          );
+        }}
+        tiles={sources.map((source) => tileOf(source, apps, body.desk, shown))}
+        value={picked.filter((key) =>
+          sources.some((source) => sourceKey(source) === key),
+        )}
+      />
     );
-  };
-  const list = (group: readonly CastSource[]) => (
-    <ToggleGroup
-      className={listStyles}
-      multiple={body.multiple}
-      onValueChange={(value) => {
-        pick(group, value);
-      }}
-      orientation="vertical"
-      value={picked.filter((key) =>
-        group.some((source) => sourceKey(source) === key),
-      )}
-    >
-      {group.map((source) => (
-        <Toggle
-          className={rowStyles}
-          key={sourceKey(source)}
-          value={sourceKey(source)}
-        >
-          <SourceIcon app={appOf(apps, source)} source={source} />
-          <span>{sourceName(source, appOf(apps, source))}</span>
-        </Toggle>
-      ))}
-    </ToggleGroup>
-  );
   return drawing ? (
     <RegionPicker
       cancel={() => {
@@ -124,7 +132,7 @@ export const ScreenCastDialog = ({
             onClick={() => {
               answer(
                 Answer.ScreenCast(
-                  body.sources.filter((source) =>
+                  offered.filter((source) =>
                     picked.includes(sourceKey(source)),
                   ),
                 ),
@@ -142,78 +150,34 @@ export const ScreenCastDialog = ({
       }}
       open
       screen={screen}
-      title={title(body.multiple, windows.length > 0, monitors.length > 0)}
+      size="xl"
+      title={title(
+        body.multiple,
+        windows.length + browsers.length > 0,
+        monitors.length > 0,
+      )}
     >
       <p className={askerStyles}>{`${asker} wants to record`}</p>
-      {windows.length > 0 && monitors.length > 0 ? (
-        <Tabs
-          defaultValue="windows"
-          tabs={[
-            { content: list(windows), label: "Windows", value: "windows" },
-            { content: list(monitors), label: "Screens", value: "screens" },
-          ]}
-        />
-      ) : (
-        list(body.sources)
-      )}
+      <div className={groupsStyles}>
+        {group("Windows", windows)}
+        {group("Browser windows", browsers)}
+        {group("Screens", monitors)}
+      </div>
     </ModalDialog>
   );
 };
 
-/** A window's application icon, a window outline without one, or a screen. */
-const SourceIcon = ({
-  app,
-  source,
-}: {
-  app: App | undefined;
-  source: CastSource;
-}) => {
-  switch (source.kind) {
-    case CastSourceKind.Window:
-      return app?.icon === undefined ? (
-        <AppWindowIcon aria-hidden className={iconStyles} />
-      ) : (
-        <img alt="" className={iconStyles} src={app.icon} />
-      );
-    case CastSourceKind.Monitor:
-    case CastSourceKind.Region:
-      return <MonitorIcon aria-hidden className={iconStyles} />;
-  }
-};
-
 const askerStyles = css({ color: "muted", fontSize: "sm", margin: 0 });
 
-const listStyles = css({
+const groupsStyles = css({
   display: "flex",
   flexDirection: "column",
-  gap: 1,
+  gap: 4,
   marginBlockStart: 3,
-  maxBlockSize: 96,
+  maxBlockSize: "60vh",
   overflowY: "auto",
 });
 
-const rowStyles = css({
-  _hover: { backgroundColor: "card" },
-  "&[data-pressed]": {
-    backgroundColor: "color-mix(in oklab, {colors.accent} 20%, transparent)",
-    borderColor: "accent",
-  },
-  alignItems: "center",
-  backgroundColor: "transparent",
-  border: "1px solid transparent",
-  borderRadius: "md",
-  color: "foreground",
-  cursor: "pointer",
-  display: "flex",
-  font: "inherit",
-  gap: 3,
-  paddingBlock: 2,
-  paddingInline: 3,
-  textAlign: "start",
-});
-
-const iconStyles = css({ blockSize: 6, flexShrink: 0, inlineSize: 6 });
-
 /** The dialog's title for what it offers. */
 const title = (
   multiple: boolean,
@@ -234,6 +198,8 @@ const sourceKey = (source: CastSource): string => {
   switch (source.kind) {
     case CastSourceKind.Window:
       return `window:${source.id}`;
+    case CastSourceKind.BrowserWindow:
+      return `browser-window:${source.id}`;
     case CastSourceKind.Monitor:
       return `monitor:${source.name}`;
     case CastSourceKind.Region:
@@ -241,27 +207,68 @@ const sourceKey = (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`'s tile, previewed where `desk` shows it. */
+const tileOf = (
   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 => {
+  apps: (appId: string) => App,
+  desk: FrozenDesk | undefined,
+  shown: readonly ShownWindow[],
+): SourceTile => {
   switch (source.kind) {
     case CastSourceKind.Window: {
-      const title = source.title === "" ? "Untitled window" : source.title;
-      return app === undefined ? title : `${app.name}: ${title}`;
+      const app = source.appId === "" ? undefined : apps(source.appId);
+      const title = titled(source.title);
+      return {
+        area: shownArea(desk, shown, ShownWindowKind.App, source.id),
+        icon: <WindowIcon app={app} />,
+        key: sourceKey(source),
+        name: app === undefined ? title : `${app.name}: ${title}`,
+      };
     }
+    case CastSourceKind.BrowserWindow:
+      return {
+        area: shownArea(desk, shown, ShownWindowKind.Browser, source.id),
+        icon: <GlobeIcon aria-hidden />,
+        key: sourceKey(source),
+        name: `Browser: ${titled(source.title)}`,
+      };
     case CastSourceKind.Monitor:
-      return source.description === ""
-        ? source.name
-        : `${source.name}: ${source.description}`;
+      return {
+        area: desk?.monitors.find(({ name }) => name === source.name)?.area,
+        icon: <MonitorIcon aria-hidden />,
+        key: sourceKey(source),
+        name:
+          source.description === ""
+            ? source.name
+            : `${source.name}: ${source.description}`,
+      };
     case CastSourceKind.Region:
-      return "Region";
+      return {
+        area: undefined,
+        icon: <MonitorIcon aria-hidden />,
+        key: sourceKey(source),
+        name: "Region",
+      };
   }
 };
+
+/** The name of a window titled `title`, which may be empty. */
+const titled = (title: string): string =>
+  title === "" ? "Untitled window" : title;
+
+/** Where `desk` shows the window of `kind` and `id`, if it does. */
+const shownArea = (
+  desk: FrozenDesk | undefined,
+  shown: readonly ShownWindow[],
+  kind: ShownWindowKind,
+  id: string,
+): ShotRect | undefined => {
+  const window = shown.find((window) =>
+    window.kind === ShownWindowKind.App
+      ? kind === ShownWindowKind.App && window.appId === id
+      : kind === ShownWindowKind.Browser && window.id === id,
+  );
+  return desk === undefined || window === undefined
+    ? undefined
+    : onFrame(desk, window.box);
+};

package/src/PortalDialogs/ScreenshotDialog.tsx

@@ -5,7 +5,6 @@ import type {
   ShotRect,
 } from "@domicile-desktop/sdk/portal";
 import { PortalAnswer as Answer } from "@domicile-desktop/sdk/portal";
-import { AppWindowIcon } from "@phosphor-icons/react/dist/ssr/AppWindow";
 import { GlobeIcon } from "@phosphor-icons/react/dist/ssr/Globe";
 import { MonitorIcon } from "@phosphor-icons/react/dist/ssr/Monitor";
 import type { PointerEvent, ReactNode } from "react";
@@ -18,8 +17,11 @@ import type { App } from "../useApps/useApps";
 import type { FramePoint } from "./frame-point";
 import { draggedArea, framePoint } from "./frame-point";
 import { onFrame } from "./on-frame";
+import type { SourceTile } from "./SourceTiles";
+import { SourceTiles } from "./SourceTiles";
 import type { ShownWindow } from "./shown-windows";
 import { ShownWindowKind } from "./shown-windows";
+import { WindowIcon } from "./WindowIcon";
 
 type Props = {
   answer: (answer: PortalAnswer) => void;
@@ -71,8 +73,9 @@ type Pick = ReturnType<(typeof Pick)[keyof typeof Pick]>;
 type Choice = { icon: ReactNode; name: string; pick: Pick };
 
 /**
- * Picks what to save of a frozen desk: all of it, a screen, a window, or an
- * area dragged over it. A window is saved from its own frame, so what is
+ * Picks what to save of a frozen desk: all of it, a screen, a window, each
+ * a tile previewing it as the screen cast picker's do, or an area dragged
+ * over the desk. A window is saved from its own frame, so what is
  * over it, such as a notification, is left out. Ctrl+C copies the pick to
  * the clipboard instead of saving it. Dismissing it cancels.
  */
@@ -105,7 +108,7 @@ export const ScreenshotDialog = ({
     ...shown.flatMap((window) => browserChoices(body, browserWindows, window)),
   ];
   const whole: Choice = {
-    icon: undefined,
+    icon: <MonitorIcon aria-hidden />,
     name: "Whole desk",
     pick: Pick.Area({ height: body.height, width: body.width, x: 0, y: 0 }),
   };
@@ -130,21 +133,32 @@ export const ScreenshotDialog = ({
       document.removeEventListener("keydown", copy);
     };
   }, [answer, pick]);
-  const button = (choice: Choice, index: number) => (
-    <Button
-      aria-pressed={index === picked}
-      beforeIcon={choice.icon}
-      // Names repeat, as two untitled windows do; the order is fixed.
-      key={index}
-      onClick={() => {
-        setPicked(index);
-      }}
-      size="sm"
-      variant={index === picked ? "primary" : "outline"}
-    >
-      {choice.name}
-    </Button>
-  );
+  // A choice's tile, keyed by its index: names repeat, as two untitled
+  // windows do, and the order is fixed.
+  const group = (label: string, members: readonly Choice[], first: number) =>
+    members.length > 0 && (
+      <SourceTiles
+        desk={body}
+        label={label}
+        multiple={false}
+        onValueChange={([value]) => {
+          // Picking the picked tile again keeps it.
+          if (value !== undefined) {
+            setPicked(Number(value));
+          }
+        }}
+        tiles={members.map((choice, offset) =>
+          tileOf(choice, String(first + offset)),
+        )}
+        value={
+          typeof picked === "number" &&
+          picked >= first &&
+          picked < first + members.length
+            ? [String(picked)]
+            : []
+        }
+      />
+    );
   const pointAt = (event: PointerEvent<HTMLDivElement>) =>
     framePoint(
       { x: event.clientX, y: event.clientY },
@@ -185,19 +199,9 @@ export const ScreenshotDialog = ({
     >
       {asker !== undefined && <p className={askerStyles}>{`${asker} asks`}</p>}
       <div className={choicesStyles}>
-        {button(whole, 0)}
-        {screens.length > 0 && (
-          <ChoiceGroup label="Screens">
-            {screens.map((choice, offset) => button(choice, 1 + offset))}
-          </ChoiceGroup>
-        )}
-        {windows.length > 0 && (
-          <ChoiceGroup label="Windows">
-            {windows.map((choice, offset) =>
-              button(choice, 1 + screens.length + offset),
-            )}
-          </ChoiceGroup>
-        )}
+        {group("Desk", [whole], 0)}
+        {group("Screens", screens, 1)}
+        {group("Windows", windows, 1 + screens.length)}
       </div>
       {pick.kind === PickKind.Window && pick.area === undefined && (
         <p className={askerStyles}>
@@ -236,41 +240,14 @@ export const ScreenshotDialog = ({
   );
 };
 
-/** A labeled row of choices. */
-const ChoiceGroup = ({
-  children,
-  label,
-}: {
-  children: ReactNode;
-  label: string;
-}) => (
-  <div aria-label={label} className={groupStyles} role="group">
-    <span aria-hidden className={groupLabelStyles}>
-      {label}
-    </span>
-    {children}
-  </div>
-);
-
 const askerStyles = css({ color: "muted", fontSize: "sm", margin: 0 });
 
 const choicesStyles = flex({
-  align: "start",
   direction: "column",
-  gap: 2,
+  gap: 4,
   marginBlock: 3,
 });
 
-const groupStyles = flex({ align: "center", gap: 2, wrap: "wrap" });
-
-const groupLabelStyles = css({
-  color: "muted",
-  fontSize: "sm",
-  minInlineSize: 20,
-});
-
-const appIconStyles = css({ blockSize: 4, inlineSize: 4 });
-
 const deskStyles = css({
   cursor: "crosshair",
   // Keeps the shade around the picked area on the frame.
@@ -302,6 +279,14 @@ const placed = (
   width: `${String((area.width / frame.width) * 100)}%`,
 });
 
+/** `choice`'s tile under `key`, previewing what it saves. */
+const tileOf = (choice: Choice, key: string): SourceTile => ({
+  area: choice.pick.area,
+  icon: choice.icon,
+  key,
+  name: choice.name,
+});
+
 /** The name of a window titled `title`, which may be empty. */
 const titled = (title: string): string =>
   title === "" ? "Untitled window" : title;
@@ -376,12 +361,7 @@ const windowChoice = (
   title: string,
   app: App | undefined,
 ): Choice => ({
-  icon:
-    app?.icon === undefined ? (
-      <AppWindowIcon aria-hidden />
-    ) : (
-      <img alt="" className={appIconStyles} src={app.icon} />
-    ),
+  icon: <WindowIcon app={app} />,
   name: app === undefined ? title : `${app.name}: ${title}`,
   pick,
 });

package/src/PortalDialogs/SourceTiles.tsx

@@ -0,0 +1,173 @@
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+import type { FrozenDesk, ShotRect } from "@domicile-desktop/sdk/portal";
+import type { CSSProperties, ReactNode } from "react";
+import { css } from "../../styled-system/css";
+
+/** A source a picker offers, as its tile shows it. */
+export type SourceTile = {
+  /** Where the source is on the desk's frame, to preview it from. */
+  area: ShotRect | undefined;
+  /** The source's application icon, or one for its kind. */
+  icon: ReactNode;
+  /** Unique among the tiles. */
+  key: string;
+  name: string;
+};
+
+type Props = {
+  /** The frozen desk to preview the sources on, if there is one. */
+  desk: FrozenDesk | undefined;
+  label: string;
+  multiple: boolean;
+  onValueChange: (value: string[]) => void;
+  tiles: readonly SourceTile[];
+  /** The keys of the tiles picked. */
+  value: readonly string[];
+};
+
+/**
+ * A labeled grid of sources to pick, each a tile previewing it from the
+ * frozen desk, or showing its icon large without a preview, over its icon
+ * and name. The screen cast and screenshot pickers share it.
+ */
+export const SourceTiles = ({
+  desk,
+  label,
+  multiple,
+  onValueChange,
+  tiles,
+  value,
+}: Props) => (
+  <div className={groupStyles}>
+    <span aria-hidden className={labelStyles}>
+      {label}
+    </span>
+    <ToggleGroup
+      aria-label={label}
+      className={gridStyles}
+      multiple={multiple}
+      onValueChange={onValueChange}
+      value={[...value]}
+    >
+      {tiles.map((tile) => (
+        <Toggle className={tileStyles} key={tile.key} value={tile.key}>
+          <span aria-hidden className={frameStyles}>
+            {desk === undefined || tile.area === undefined ? (
+              <span className={iconPreviewStyles} data-preview>
+                {tile.icon}
+              </span>
+            ) : (
+              <span
+                className={shotStyles}
+                data-preview
+                style={cropped(desk, tile.area)}
+              />
+            )}
+          </span>
+          <span className={captionStyles}>
+            {tile.icon}
+            <span className={nameStyles}>{tile.name}</span>
+          </span>
+        </Toggle>
+      ))}
+    </ToggleGroup>
+  </div>
+);
+
+const groupStyles = css({
+  display: "flex",
+  flexDirection: "column",
+  gap: 2,
+});
+
+const labelStyles = css({ color: "muted", fontSize: "sm" });
+
+const gridStyles = css({
+  display: "grid",
+  gap: 2,
+  gridTemplateColumns: "repeat(auto-fill, minmax(10rem, 1fr))",
+});
+
+const tileStyles = css({
+  _hover: { backgroundColor: "card" },
+  "&[data-pressed]": {
+    backgroundColor: "color-mix(in oklab, {colors.accent} 20%, transparent)",
+    borderColor: "accent",
+  },
+  alignItems: "stretch",
+  backgroundColor: "transparent",
+  border: "1px solid transparent",
+  borderRadius: "md",
+  color: "foreground",
+  cursor: "pointer",
+  display: "flex",
+  flexDirection: "column",
+  font: "inherit",
+  gap: 2,
+  minInlineSize: 0,
+  padding: 2,
+  textAlign: "start",
+});
+
+const frameStyles = css({
+  alignItems: "center",
+  aspectRatio: "16 / 10",
+  backgroundColor: "card",
+  borderRadius: "sm",
+  display: "flex",
+  justifyContent: "center",
+  overflow: "hidden",
+});
+
+const iconPreviewStyles = css({
+  "& :is(svg, img)": { blockSize: 10, inlineSize: 10 },
+  color: "muted",
+});
+
+const shotStyles = css({
+  backgroundRepeat: "no-repeat",
+  maxBlockSize: "full",
+  maxInlineSize: "full",
+});
+
+const captionStyles = css({
+  "& > :is(svg, img)": { blockSize: 4, flexShrink: 0, inlineSize: 4 },
+  alignItems: "center",
+  display: "flex",
+  fontSize: "sm",
+  gap: 2,
+  minInlineSize: 0,
+});
+
+const nameStyles = css({
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+});
+
+/**
+ * Draws `area` of `desk`'s frame filling the tile's frame on its long side,
+ * at its own aspect ratio.
+ */
+const cropped = (desk: FrozenDesk, area: ShotRect): CSSProperties => ({
+  aspectRatio: `${String(area.width)} / ${String(area.height)}`,
+  backgroundImage: `url(${desk.frame})`,
+  backgroundPosition: `${offset(area.x, area.width, desk.width)} ${offset(area.y, area.height, desk.height)}`,
+  backgroundSize: `${percent(desk.width, area.width)} ${percent(desk.height, area.height)}`,
+  // Wider than the frame's 16:10 fills its width; taller fills its height.
+  ...(area.width * 10 >= area.height * 16
+    ? { inlineSize: "100%" }
+    : { blockSize: "100%" }),
+});
+
+/** `whole` as a percent of `part`. */
+const percent = (whole: number, part: number): string =>
+  `${String((whole / part) * 100)}%`;
+
+/**
+ * The background position that puts `start` of a `whole` frame at the
+ * edge of a `length` box.
+ */
+const offset = (start: number, length: number, whole: number): string =>
+  whole === length ? "0%" : `${String((start / (whole - length)) * 100)}%`;

package/src/PortalDialogs/WindowIcon.tsx

@@ -0,0 +1,10 @@
+import { AppWindowIcon } from "@phosphor-icons/react/dist/ssr/AppWindow";
+import type { App } from "../useApps/useApps";
+
+/** A window's application icon, or a window outline without one. */
+export const WindowIcon = ({ app }: { app: App | undefined }) =>
+  app?.icon === undefined ? (
+    <AppWindowIcon aria-hidden />
+  ) : (
+    <img alt="" src={app.icon} />
+  );

package/src/PortalDialogs/source-name.ts

@@ -6,6 +6,8 @@ export const sourceName = (source: Captured): string => {
   switch (source.kind) {
     case CapturedKind.Window:
       return source.title === "" ? "Untitled window" : source.title;
+    case CapturedKind.BrowserWindow:
+      return `Browser: ${source.title}`;
     case CapturedKind.Monitor:
       return `Screen ${source.name}`;
     case CapturedKind.Region: