@backmatter/studio 0.0.6 → 0.0.8

package/src/pages/SettingsGithubPage.tsx

@@ -9,16 +9,15 @@ import {
   unbindGithub,
 } from "../api";
 import { Button, ButtonLink } from "../ui/Button";
-import { Field } from "../ui/Field";
 import { Input } from "../ui/Input";
 import { ConfirmDialog } from "../ui/ConfirmDialog";
-import { PageHeader, Panel, Stack } from "../ui/Page";
+import { PageHeader } from "../ui/Page";
 import { Text } from "../ui/Text";
 import * as stylex from "@stylexjs/stylex";
 import { colors, space, type } from "../styles/tokens.stylex";
 import type { WorkspaceOutletContext } from "../workspace/types";
 import { githubConnectPath } from "../workspace-path";
-import { SelectRepositoriesLink } from "./SelectRepositoriesLink";
+import { GithubRepositoryAccess } from "./SelectRepositoriesLink";
 
 export function SettingsGithubPage() {
   const { workspace, reload } = useOutletContext<WorkspaceOutletContext>();
@@ -34,6 +33,7 @@ export function SettingsGithubPage() {
   const [directory, setDirectory] = useState(workspace.githubDirectory ?? "");
   const [directoryError, setDirectoryError] = useState<string | null>(null);
   const [savingDirectory, setSavingDirectory] = useState(false);
+  const directoryDirty = directory !== (workspace.githubDirectory ?? "");
 
   useEffect(() => {
     setDirectory(workspace.githubDirectory ?? "");
@@ -119,121 +119,36 @@ export function SettingsGithubPage() {
           <Text tone="danger">{error}</Text>
         </div>
       ) : null}
-      <Panel>
-        {connected ? (
-          <Stack>
-            <dl {...stylex.props(styles.dl)}>
-              <div>
-                <dt {...stylex.props(styles.dt)}>Repository</dt>
-                <dd {...stylex.props(styles.dd)}>{workspace.githubRepoFullName}</dd>
-              </div>
-              <div>
-                <dt {...stylex.props(styles.dt)}>Branch</dt>
-                <dd {...stylex.props(styles.dd)}>
-                  {workspace.githubDefaultBranch}
-                </dd>
-              </div>
-              {!canEdit ? (
-                <div>
-                  <dt {...stylex.props(styles.dt)}>Directory</dt>
-                  <dd {...stylex.props(styles.dd)}>
-                    {workspace.githubDirectory ?? "Repository root"}
-                  </dd>
-                </div>
-              ) : null}
-            </dl>
-            {canEdit ? (
-              <form onSubmit={(e) => void onSaveDirectory(e)}>
-                <Stack>
-                  <Field
-                    label="Directory"
-                    hint="Folder inside the repository that contains this site. Leave empty for the repository root."
-                  >
-                    <Input
-                      value={directory}
-                      onChange={(e) => setDirectory(e.target.value)}
-                    />
-                  </Field>
-                  {directoryError ? (
-                    <Text tone="danger">{directoryError}</Text>
-                  ) : null}
-                  <div>
-                    <Button type="submit" disabled={savingDirectory}>
-                      {savingDirectory ? "Saving…" : "Save"}
-                    </Button>
-                  </div>
-                </Stack>
-              </form>
-            ) : null}
-            {canEdit ? (
-              <div {...stylex.props(styles.actions)}>
-                <ButtonLink
-                  variant="secondary"
-                  to={githubConnectPath(workspace.slug)}
-                >
-                  Change repository
-                </ButtonLink>
-                <SelectRepositoriesLink workspaceId={workspace.id} />
-                <Button
-                  variant="danger"
-                  disabled={disconnecting}
-                  onClick={() => setConfirmDisconnect(true)}
-                >
-                  Disconnect
-                </Button>
-              </div>
-            ) : null}
-          </Stack>
-        ) : (
-          <Stack>
-            <Text tone="muted" size="sm">
-              {workspace.githubInstallationId
-                ? "The list only includes repositories this GitHub App can access. Select repositories on GitHub to grant more. Saving there does not return to Backmatter."
-                : "Connect finds the backmatter CMS installation on your GitHub account and opens the repository list here. Saving on GitHub does not return to Backmatter."}
-            </Text>
-            {canEdit ? (
-              <div {...stylex.props(styles.actions)}>
-                {workspace.githubInstallationId ? (
-                  <ButtonLink to={githubConnectPath(workspace.slug)}>
-                    Choose repository
-                  </ButtonLink>
-                ) : choices ? (
-                  choices.map((choice) => (
-                    <Button
-                      key={choice.id}
-                      disabled={connecting}
-                      onClick={() => void onConnect(choice.id)}
-                    >
-                      {choice.account ?? choice.id}
-                    </Button>
-                  ))
-                ) : (
-                  <Button disabled={connecting} onClick={() => void onConnect()}>
-                    {connecting ? "Connecting…" : "Connect GitHub"}
-                  </Button>
-                )}
-                {workspace.githubInstallationId ? (
-                  <SelectRepositoriesLink workspaceId={workspace.id} />
-                ) : null}
-                {installUrl ? (
-                  <ButtonLink href={installUrl} newTab={false} variant="secondary">
-                    Install on GitHub
-                  </ButtonLink>
-                ) : null}
-                {workspace.githubInstallationId ? (
-                  <Button
-                    variant="danger"
-                    disabled={disconnecting}
-                    onClick={() => setConfirmDisconnect(true)}
-                  >
-                    Disconnect
-                  </Button>
-                ) : null}
-              </div>
-            ) : null}
-          </Stack>
-        )}
-      </Panel>
+      {connected ? (
+        <ConnectedGithub
+          repo={workspace.githubRepoFullName ?? ""}
+          branch={workspace.githubDefaultBranch ?? ""}
+          directory={directory}
+          directoryDirty={directoryDirty}
+          directoryError={directoryError}
+          savingDirectory={savingDirectory}
+          canEdit={canEdit}
+          changeTo={githubConnectPath(workspace.slug)}
+          workspaceId={workspace.id}
+          disconnecting={disconnecting}
+          onDirectoryChange={setDirectory}
+          onSaveDirectory={(e) => void onSaveDirectory(e)}
+          onDisconnect={() => setConfirmDisconnect(true)}
+        />
+      ) : (
+        <DisconnectedGithub
+          canEdit={canEdit}
+          connecting={connecting}
+          choices={choices}
+          installUrl={installUrl}
+          hasInstallation={Boolean(workspace.githubInstallationId)}
+          chooseTo={githubConnectPath(workspace.slug)}
+          workspaceId={workspace.id}
+          disconnecting={disconnecting}
+          onConnect={(id) => void onConnect(id)}
+          onDisconnect={() => setConfirmDisconnect(true)}
+        />
+      )}
       <ConfirmDialog
         open={confirmDisconnect}
         onOpenChange={(open) => {
@@ -254,28 +169,402 @@ export function SettingsGithubPage() {
   );
 }
 
+function ConnectedGithub({
+  repo,
+  branch,
+  directory,
+  directoryDirty,
+  directoryError,
+  savingDirectory,
+  canEdit,
+  changeTo,
+  workspaceId,
+  disconnecting,
+  onDirectoryChange,
+  onSaveDirectory,
+  onDisconnect,
+}: {
+  repo: string;
+  branch: string;
+  directory: string;
+  directoryDirty: boolean;
+  directoryError: string | null;
+  savingDirectory: boolean;
+  canEdit: boolean;
+  changeTo: string;
+  workspaceId: string;
+  disconnecting: boolean;
+  onDirectoryChange: (value: string) => void;
+  onSaveDirectory: (e: React.FormEvent) => void;
+  onDisconnect: () => void;
+}) {
+  return (
+    <div {...stylex.props(styles.groups)}>
+      <SettingsGroup title="Connection" titleId="github-connection">
+        <SettingsRow
+          label="Repository"
+          control={
+            <>
+              <span {...stylex.props(styles.value)}>{repo}</span>
+              {canEdit ? (
+                <ButtonLink variant="secondary" to={changeTo}>
+                  Change
+                </ButtonLink>
+              ) : null}
+            </>
+          }
+        />
+        <SettingsRow
+          label="Branch"
+          control={<span {...stylex.props(styles.value)}>{branch}</span>}
+        />
+        <SettingsRow
+          label="Directory"
+          htmlFor={canEdit ? "github-directory" : undefined}
+          description={
+            <>
+              Folder inside the repository. Empty means the repository root.
+              {directoryError ? <Text tone="danger">{directoryError}</Text> : null}
+            </>
+          }
+          control={
+            canEdit ? (
+              <form onSubmit={onSaveDirectory} {...stylex.props(styles.directoryForm)}>
+                <div {...stylex.props(styles.directoryField)}>
+                  <Input
+                    id="github-directory"
+                    value={directory}
+                    spellCheck={false}
+                    autoCapitalize="off"
+                    autoCorrect="off"
+                    aria-invalid={directoryError ? true : undefined}
+                    onChange={(e) => onDirectoryChange(e.target.value)}
+                  />
+                </div>
+                {directoryDirty ? (
+                  <Button type="submit" disabled={savingDirectory}>
+                    {savingDirectory ? "Saving…" : "Save"}
+                  </Button>
+                ) : null}
+              </form>
+            ) : (
+              <span {...stylex.props(styles.value)}>
+                {directory || "Repository root"}
+              </span>
+            )
+          }
+        />
+      </SettingsGroup>
+      {canEdit ? (
+        <SettingsGroup title="Access" titleId="github-access">
+          <SettingsRow
+            label="Repository access"
+            description="Repositories the app can see on GitHub. Saving there does not return here."
+            control={
+              <GithubRepositoryAccess workspaceId={workspaceId}>
+                {(url) => (
+                  <ButtonLink href={url} variant="secondary">
+                    Manage on GitHub
+                  </ButtonLink>
+                )}
+              </GithubRepositoryAccess>
+            }
+          />
+        </SettingsGroup>
+      ) : null}
+      {canEdit ? (
+        <SettingsGroup separated>
+          <SettingsRow
+            label="Disconnect"
+            description="Stops commits and imports. Content already here stays."
+            control={
+              <Button variant="danger" disabled={disconnecting} onClick={onDisconnect}>
+                Disconnect
+              </Button>
+            }
+          />
+        </SettingsGroup>
+      ) : null}
+    </div>
+  );
+}
+
+function DisconnectedGithub({
+  canEdit,
+  connecting,
+  choices,
+  installUrl,
+  hasInstallation,
+  chooseTo,
+  workspaceId,
+  disconnecting,
+  onConnect,
+  onDisconnect,
+}: {
+  canEdit: boolean;
+  connecting: boolean;
+  choices: GithubInstallationChoice[] | null;
+  installUrl: string | null;
+  hasInstallation: boolean;
+  chooseTo: string;
+  workspaceId: string;
+  disconnecting: boolean;
+  onConnect: (installationId?: string) => void;
+  onDisconnect: () => void;
+}) {
+  if (choices) {
+    return (
+      <SettingsGroup
+        title="GitHub accounts"
+        titleId="github-accounts"
+        description="Connect finds the backmatter CMS installation on your GitHub account and opens the repository list here. Saving on GitHub does not return to Backmatter."
+      >
+        {choices.map((choice) => (
+          <SettingsRow
+            key={choice.id}
+            label={choice.account ?? choice.id}
+            control={
+              canEdit ? (
+                <Button
+                  variant="secondary"
+                  disabled={connecting}
+                  onClick={() => onConnect(choice.id)}
+                >
+                  Connect
+                </Button>
+              ) : null
+            }
+          />
+        ))}
+      </SettingsGroup>
+    );
+  }
+
+  if (hasInstallation) {
+    return (
+      <div {...stylex.props(styles.groups)}>
+        <SettingsGroup title="Connection" titleId="github-connection">
+          <SettingsRow
+            label="Repository"
+            description="The list only includes repositories this GitHub App can access."
+            control={
+              canEdit ? (
+                <ButtonLink to={chooseTo}>Choose repository</ButtonLink>
+              ) : null
+            }
+          />
+        </SettingsGroup>
+        {canEdit ? (
+          <SettingsGroup title="Access" titleId="github-access">
+            <SettingsRow
+              label="Repository access"
+              description="Grant more repositories on GitHub. Saving there does not return here."
+              control={
+                <GithubRepositoryAccess workspaceId={workspaceId}>
+                  {(url) => (
+                    <ButtonLink href={url} variant="secondary">
+                      Manage on GitHub
+                    </ButtonLink>
+                  )}
+                </GithubRepositoryAccess>
+              }
+            />
+          </SettingsGroup>
+        ) : null}
+        {canEdit ? (
+          <SettingsGroup separated>
+            <SettingsRow
+              label="Disconnect"
+              description="Removes the GitHub App from this workspace. You can connect again later."
+              control={
+                <Button
+                  variant="danger"
+                  disabled={disconnecting}
+                  onClick={onDisconnect}
+                >
+                  Disconnect
+                </Button>
+              }
+            />
+          </SettingsGroup>
+        ) : null}
+      </div>
+    );
+  }
+
+  return (
+    <SettingsGroup>
+      <SettingsRow
+        label="Not connected"
+        description="Connect finds the backmatter CMS installation on your GitHub account and opens the repository list here. Saving on GitHub does not return to Backmatter."
+        control={
+          canEdit ? (
+            installUrl ? (
+              <ButtonLink href={installUrl} newTab={false}>
+                Install on GitHub
+              </ButtonLink>
+            ) : (
+              <Button disabled={connecting} onClick={() => onConnect()}>
+                {connecting ? "Connecting…" : "Connect GitHub"}
+              </Button>
+            )
+          ) : null
+        }
+      />
+    </SettingsGroup>
+  );
+}
+
+function SettingsGroup({
+  title,
+  titleId,
+  description,
+  separated,
+  children,
+}: {
+  title?: string;
+  titleId?: string;
+  description?: string;
+  separated?: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <section
+      aria-labelledby={title ? titleId : undefined}
+      {...stylex.props(styles.group, separated && styles.groupSeparated)}
+    >
+      {title && titleId ? (
+        <h2 id={titleId} {...stylex.props(styles.groupTitle)}>
+          {title}
+        </h2>
+      ) : null}
+      {description ? (
+        <p {...stylex.props(styles.groupDescription)}>{description}</p>
+      ) : null}
+      <div {...stylex.props(styles.rows)}>{children}</div>
+    </section>
+  );
+}
+
+function SettingsRow({
+  label,
+  description,
+  htmlFor,
+  control,
+}: {
+  label: string;
+  description?: React.ReactNode;
+  htmlFor?: string;
+  control?: React.ReactNode;
+}) {
+  return (
+    <div {...stylex.props(styles.row)}>
+      <div {...stylex.props(styles.rowText)}>
+        {htmlFor ? (
+          <label htmlFor={htmlFor} {...stylex.props(styles.rowLabel)}>
+            {label}
+          </label>
+        ) : (
+          <div {...stylex.props(styles.rowLabel)}>{label}</div>
+        )}
+        {description ? (
+          <div {...stylex.props(styles.rowDescription)}>{description}</div>
+        ) : null}
+      </div>
+      {control ? <div {...stylex.props(styles.rowControl)}>{control}</div> : null}
+    </div>
+  );
+}
+
 const styles = stylex.create({
-  dl: {
+  groups: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.xxl,
+  },
+  group: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.xs,
+  },
+  groupSeparated: {
+    paddingTop: space.lg,
+    borderTopWidth: 1,
+    borderTopStyle: "solid",
+    borderTopColor: colors.border,
+  },
+  groupTitle: {
     margin: 0,
+    fontSize: type.sm,
+    fontWeight: 500,
+    color: colors.textMuted,
+  },
+  groupDescription: {
+    margin: 0,
+    color: colors.textMuted,
+    fontSize: type.sm,
+    lineHeight: 1.45,
+  },
+  rows: {
     display: "flex",
     flexDirection: "column",
+  },
+  row: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    flexWrap: "wrap",
     gap: space.lg,
+    minHeight: "44px",
+    paddingBlock: space.lg,
+    borderBottomWidth: 1,
+    borderBottomStyle: "solid",
+    borderBottomColor: colors.border,
+    ":last-child": {
+      borderBottomWidth: 0,
+    },
+  },
+  rowText: {
+    flex: "1 1 16rem",
+    minWidth: 0,
+    display: "flex",
+    flexDirection: "column",
+    gap: space.xs,
+  },
+  rowLabel: {
     fontSize: type.md,
+    fontWeight: 500,
+    color: colors.text,
   },
-  dt: {
+  rowDescription: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.xs,
     color: colors.textMuted,
     fontSize: type.sm,
+    lineHeight: 1.45,
   },
-  dd: {
-    margin: 0,
+  rowControl: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    flexShrink: 0,
+    gap: space.sm,
+    marginLeft: "auto",
+  },
+  value: {
+    fontSize: type.md,
     fontWeight: 500,
+    color: colors.text,
   },
-  actions: {
+  directoryForm: {
     display: "flex",
-    flexWrap: "wrap",
     alignItems: "center",
     gap: space.sm,
   },
+  directoryField: {
+    width: "240px",
+  },
   error: {
     marginBottom: space.lg,
   },

package/src/pages/SettingsUsagePage.tsx

@@ -22,8 +22,16 @@ const WORK: { key: keyof WorkspaceUsage["work"]; label: string }[] = [
   { key: "imports", label: "Imports" },
   { key: "importFiles", label: "Files imported" },
   { key: "saves", label: "Saves" },
+  { key: "mediaTransforms", label: "Image transforms" },
 ];
 
+function formatBytes(value: number): string {
+  if (value < 1024) return `${value} B`;
+  if (value < 1024 * 1024) return `${(value / 1024).toFixed(1)} KB`;
+  if (value < 1024 * 1024 * 1024) return `${(value / (1024 * 1024)).toFixed(1)} MB`;
+  return `${(value / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+}
+
 function formatCount(value: number): string {
   return new Intl.NumberFormat("en-US").format(value);
 }
@@ -109,6 +117,17 @@ export function SettingsUsagePage() {
               ))}
             </dl>
           </Panel>
+          <Panel>
+            <Text as="h2" size="lg" weight="medium">
+              Media
+            </Text>
+            <dl {...stylex.props(styles.list)}>
+              <div {...stylex.props(styles.row)}>
+                <dt {...stylex.props(styles.label)}>Stored</dt>
+                <dd {...stylex.props(styles.value)}>{formatBytes(usage.mediaBytes)}</dd>
+              </div>
+            </dl>
+          </Panel>
           <Panel>
             <Text as="h2" size="lg" weight="medium">
               AI