settings

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51// The Workspaces section: each workspace folder, and the mark the app
// shows for it (its project icon, or a folder in one of the preset
// colours) wherever its chats are listed.
// HTM whitespace is significant; keep these templates out of Prettier's HTML formatter.
import { html as htm } from "convergence";
import type { EffectViewContext } from "convergence/effect";
import type { PresetColor, Workspace } from "convergence";
import type { SettingsPage } from "../controller.ts";
import { card, column, section, setting } from "./layout.ts";

const title = (color: string) => color.charAt(0).toUpperCase() + color.slice(1);

/// The workspace's mark as it shows now, and the marks it can take.
function looks(w: Workspace, colors: readonly PresetColor[]) {
  const own = w.icon ? { image: w.icon } : w.mark ? { icon: w.mark } : null;
  const value = own && !w.useColor ? "icon" : (w.color ?? "");
  return {
    value,
    options: [
      ...(own ? [{ value: "icon", label: w.icon ? "Project icon" : "App icon", ...own }] : []),
      ...colors.map((color) => ({ value: color, label: title(color), icon: "folder-solid", color })),
    ],
  };
}

export function renderWorkspaces(ctx: EffectViewContext<object>, actions: SettingsPage["Service"]) {
  const { workspaces, colors } = actions.state;
  if (!workspaces.length) return htm`<empty>No workspace folders yet. Add one from the sidebar.</empty>`;
  const rows = workspaces.map((w) => {
    const { value, options } = looks(w, colors);
    return setting({
      title: w.name,
      description: w.path,
      control: colors.length
        ? htm`<combobox id=${`workspace-look-${w.id}`} value=${value} width=${220} options=${options}
            onChange=${(e: { value?: string }) => {
              if (!e.value || e.value === value) return;
              ctx.run(actions.setWorkspaceColor(w.id, e.value === "icon" ? null : (e.value as PresetColor)));
            }} />`
        : null,
    });
  });
  return htm`
      <div ...${column} gap="large" padding="small">
        ${section(
          "Workspaces",
          "The icon each workspace shows beside its chats: the project's own icon, or a folder in a colour. A folder without an icon gets a colour of its own. Right-click a workspace in the sidebar's list to change it there.",
          card(rows),
        )}
      </div>`;
}