@lapis-notes/history 0.1.4 → 0.2.2

package/dist/repository/components/backup/BackupSettingsField.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { onDestroy, untrack } from "svelte";
+  import type { WorkspaceCustomSettingProps } from "@lapis-notes/api";
+  import type { BackupSettingsFieldDefinition } from "./backup-settings.js";
+  import BackupSettings from "./BackupSettings.svelte";
+  let { field }: Pick<WorkspaceCustomSettingProps, "field"> = $props();
+  const panel = untrack(() =>
+    (field as BackupSettingsFieldDefinition).openPanel(),
+  );
+  onDestroy(() => void panel.close().catch(panel.report));
+</script>
+
+<BackupSettings {...panel.props} />

package/dist/repository/components/backup/BackupSettingsField.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { WorkspaceCustomSettingProps } from "@lapis-notes/api";
+declare const BackupSettingsField: import("svelte").Component<Pick<WorkspaceCustomSettingProps<unknown>, "field">, {}, "">;
+type BackupSettingsField = ReturnType<typeof BackupSettingsField>;
+export default BackupSettingsField;

package/dist/repository/components/backup/ForgeAccounts.svelte

@@ -0,0 +1,231 @@
+<script lang="ts">
+  // Adapted from jj-store StoreIntegrations.svelte (Apache-2.0).
+  import { onMount, tick, type Snippet } from "svelte";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import * as Menu from "@lapismd/design-core/shadcn/dropdown-menu";
+  import * as Empty from "@lapismd/design-core/shadcn/empty";
+  import { Skeleton } from "@lapismd/design-core/shadcn/skeleton";
+  import { Badge } from "@lapismd/design-core/shadcn/badge";
+  import Plus from "@lucide/svelte/icons/plus";
+  import Trash2 from "@lucide/svelte/icons/trash-2";
+  import KeyRound from "@lucide/svelte/icons/key-round";
+  import RefreshCw from "@lucide/svelte/icons/refresh-cw";
+  import RepositoryAuthorAvatar from "../RepositoryAuthorAvatar.svelte";
+  import ForgeAuthorization from "./ForgeAuthorization.svelte";
+  import ForgeIcon from "./ForgeIcon.svelte";
+  import BackupCard from "./BackupCard.svelte";
+  import type { ForgeController } from "../../controllers/forge-controller.js";
+  import type { ForgeState } from "../../controllers/forge-accounts.js";
+  let {
+    controller,
+    remoteSettings,
+  }: { controller: ForgeController; remoteSettings?: Snippet } = $props();
+  let snapshot = $state<ForgeState>({ busy: true, flow: "" });
+  let menu = $state(false);
+  onMount(() => {
+    const unsubscribe = controller.subscribe((value) => (snapshot = value));
+    void controller.refresh();
+    return unsubscribe;
+  });
+  async function choose(method: "oauth" | "pat" | "enterprise" | "forgejo") {
+    menu = false;
+    await tick();
+    if (method === "oauth") await controller.begin();
+    else controller.tokenFlow(method);
+  }
+</script>
+
+<section
+  class="backup-settings"
+  aria-label="Repository backup settings"
+  aria-busy={snapshot.busy}
+>
+  <BackupCard
+    title="GitHub and Forgejo"
+    description="Connect an account for remote vault backup."
+    padded={false}
+  >
+    {#snippet icon()}<ForgeIcon provider="github" />{/snippet}
+    {#snippet actions()}
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        disabled={snapshot.busy}
+        aria-label="Refresh forge accounts"
+        onclick={() => controller.refresh()}><RefreshCw /></Button
+      >
+    {/snippet}
+    {#if !snapshot.inventory && snapshot.busy}<div
+        class="account-row"
+        role="status"
+        aria-label="Loading forge accounts"
+      >
+        <Skeleton style="height:2.5rem;width:2.5rem" /><Skeleton
+          style="height:1rem;width:60%"
+        />
+      </div>
+    {:else if !snapshot.inventory}<Empty.Root
+        ><Empty.Header
+          ><Empty.Media variant="icon"><KeyRound /></Empty.Media><Empty.Title
+            >Accounts unavailable</Empty.Title
+          ><Empty.Description
+            >Refresh to load your forge accounts.</Empty.Description
+          ></Empty.Header
+        ></Empty.Root
+      >
+    {:else}
+      {#each snapshot.inventory.accounts as account (account.id)}<div
+          class="account-row"
+        >
+          <RepositoryAuthorAvatar
+            name={account.name || account.login}
+            avatarUrl={account.avatar_url || undefined}
+            email={account.email || ""}
+            handle={account.login}
+            size="md"
+          />
+          <div class="account-identity">
+            <div>
+              <ForgeIcon
+                provider={account.api_url.includes("/api/v1")
+                  ? "forgejo"
+                  : "github"}
+              /><strong>{account.login}</strong><Badge variant="secondary"
+                >{account.method === "oauth"
+                  ? "OAuth"
+                  : account.method === "enterprise"
+                    ? "Enterprise PAT"
+                    : "PAT"}</Badge
+              >
+            </div>
+            {#if account.email}<span>{account.email}</span>{/if}<span
+              >{new URL(account.api_url).host} · {account.available
+                ? "Connected"
+                : "Reconnect required"}</span
+            >
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={snapshot.busy || Boolean(snapshot.flow)}
+            aria-label={`Forget ${account.login} ${account.method} account`}
+            onclick={() => controller.forget(account.id)}
+            >Forget<Trash2 data-icon="inline-end" /></Button
+          >
+        </div>{/each}
+      {#if !snapshot.inventory.accounts.length}<p class="guidance">
+          Connect an account to choose a remote backup repository.
+        </p>{/if}
+    {/if}
+    {#snippet footer()}
+      <span class="guidance"
+        ><ForgeIcon provider="github" /><ForgeIcon provider="forgejo" />Forge
+        account access</span
+      >
+      <Menu.Root bind:open={menu}
+        ><Menu.Trigger
+          >{#snippet child({ props })}<Button
+              {...props}
+              variant="outline"
+              disabled={snapshot.busy || Boolean(snapshot.flow)}
+              aria-label="Add forge account"
+              >Add forge account<Plus data-icon="inline-end" /></Button
+            >{/snippet}</Menu.Trigger
+        >
+        <Menu.Content
+          align="end"
+          style="width:max-content;min-width:14rem;max-width:calc(100dvw - 1rem);white-space:nowrap"
+          ><Menu.Group>
+            <Menu.Item
+              disabled={!snapshot.inventory?.oauth_available}
+              onSelect={() => void choose("oauth")}
+              ><ForgeIcon provider="github" decorative />Authorize GitHub
+              Account</Menu.Item
+            >
+            <Menu.Item onSelect={() => void choose("pat")}
+              ><KeyRound />Add Personal Access Token</Menu.Item
+            >
+            <Menu.Item onSelect={() => void choose("enterprise")}
+              ><ForgeIcon provider="github" decorative />Add GitHub Enterprise
+              Account</Menu.Item
+            >
+            <Menu.Item onSelect={() => void choose("forgejo")}
+              ><ForgeIcon provider="forgejo" decorative />Add Forgejo Account</Menu.Item
+            >
+          </Menu.Group></Menu.Content
+        >
+      </Menu.Root>
+    {/snippet}
+  </BackupCard>
+  {#if snapshot.inventory && !snapshot.inventory.oauth_available}<p
+      class="guidance"
+    >
+      Device sign-in uses the public OAuth client ID configured for jj-store.
+      Configure that ID or connect with a personal token.
+    </p>{/if}
+  <ForgeAuthorization manager={controller} {snapshot} />
+  {@render remoteSettings?.()}
+  <p class="guidance">
+    <KeyRound />Credentials are saved locally in your OS credential store.
+  </p>
+</section>
+
+<style>
+  .backup-settings {
+    display: grid;
+    gap: 1rem;
+    min-width: 0;
+    color: var(--foreground);
+  }
+  .account-row {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.85rem 1rem;
+    min-width: 0;
+  }
+  .account-identity {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 0.2rem;
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+  .account-identity > div {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+  .account-row + .account-row {
+    border-top: 1px solid var(--border);
+  }
+  p.guidance {
+    padding: 1rem;
+  }
+  .account-identity > span,
+  .guidance {
+    font-size: 0.8rem;
+    color: var(--muted-foreground);
+  }
+  .guidance {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin: 0;
+  }
+  .guidance :global(svg) {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+  }
+  @media (max-width: 40rem) {
+    .account-row {
+      flex-wrap: wrap;
+    }
+    .account-identity {
+      min-width: 50%;
+    }
+  }
+</style>

package/dist/repository/components/backup/ForgeAccounts.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type Snippet } from "svelte";
+import type { ForgeController } from "../../controllers/forge-controller.js";
+type $$ComponentProps = {
+    controller: ForgeController;
+    remoteSettings?: Snippet;
+};
+declare const ForgeAccounts: import("svelte").Component<$$ComponentProps, {}, "">;
+type ForgeAccounts = ReturnType<typeof ForgeAccounts>;
+export default ForgeAccounts;

package/dist/repository/components/backup/ForgeAuthorization.svelte

@@ -0,0 +1,267 @@
+<script lang="ts">
+  // Adapted from jj-store StoreIntegrationAuth.svelte (Apache-2.0).
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import { Input } from "@lapismd/design-core/shadcn/input";
+  import * as InputGroup from "@lapismd/design-core/shadcn/input-group";
+  import * as Field from "@lapismd/design-core/shadcn/field";
+  import { Separator } from "@lapismd/design-core/shadcn/separator";
+  import Copy from "@lucide/svelte/icons/copy";
+  import ArrowUpRight from "@lucide/svelte/icons/arrow-up-right";
+  import X from "@lucide/svelte/icons/x";
+  import Eye from "@lucide/svelte/icons/eye";
+  import EyeOff from "@lucide/svelte/icons/eye-off";
+  import BackupCard from "./BackupCard.svelte";
+  import ForgeIcon from "./ForgeIcon.svelte";
+
+  import BackupField from "./BackupField.svelte";
+  import type { ForgeController } from "../../controllers/forge-controller.js";
+  import type { ForgeState } from "../../controllers/forge-accounts.js";
+  import { Skeleton } from "@lapismd/design-core/shadcn/skeleton";
+  let {
+    manager,
+    snapshot,
+  }: { manager: ForgeController; snapshot: ForgeState } = $props();
+  let token = $state("");
+  let api = $state("");
+  let visible = $state(false);
+  const flow = $derived(snapshot.flow);
+  $effect(() => {
+    flow;
+    visible = false;
+    token = "";
+    api = "";
+  });
+  const id = $props.id();
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(
+        snapshot.inventory?.authorization?.user_code ?? "",
+      );
+    } catch {
+      manager.feedback.report(
+        new Error("Could not copy the verification code."),
+      );
+    }
+  }
+</script>
+
+{#if snapshot.flow}
+  <BackupCard
+    padded={false}
+    title={snapshot.flow === "oauth"
+      ? "Authorize GitHub Account"
+      : snapshot.flow === "forgejo"
+        ? "Add Forgejo Account"
+        : snapshot.flow === "enterprise"
+          ? "Add GitHub Enterprise Account"
+          : "Add Personal Access Token"}
+  >
+    {#snippet icon()}<ForgeIcon
+        provider={snapshot.flow === "forgejo" ? "forgejo" : "github"}
+      />{/snippet}
+    {#snippet actions()}<Button
+        variant="ghost"
+        size="icon-sm"
+        aria-label="Cancel authorization"
+        disabled={snapshot.busy && snapshot.flow !== "oauth"}
+        onclick={() => manager.cancel()}><X /></Button
+      >{/snippet}
+    {#if snapshot.flow === "oauth"}
+      {@const auth = snapshot.inventory?.authorization}
+      {#if auth}
+        <div class="integration-auth__device">
+          <ol class="integration-auth__steps">
+            <li>
+              <p>Copy the following verification code:</p>
+              <div class="integration-auth__code">
+                <strong>{auth.user_code}</strong><Button
+                  variant="outline"
+                  size="sm"
+                  onclick={copy}
+                  >Copy to Clipboard<Copy data-icon="inline-end" /></Button
+                >
+              </div>
+            </li>
+            <li>
+              <Separator />
+              <p>
+                Navigate to the GitHub activation page and paste the code you
+                copied.
+              </p>
+              <Button onclick={() => manager.openAuthorization()}
+                >Open GitHub activation page<ArrowUpRight
+                  data-icon="inline-end"
+                /></Button
+              >
+            </li>
+          </ol>
+          <p class="integration-auth__waiting" role="status" aria-live="polite">
+            {auth.state === "pending"
+              ? "Waiting for GitHub authorization…"
+              : `Authorization ${auth.state}`}
+          </p>
+        </div>
+      {:else if snapshot.busy}<div
+          class="integration-auth__device"
+          role="status"
+          aria-label="Requesting GitHub verification code"
+        >
+          <Skeleton style="height:2rem;width:14rem" /><Skeleton
+            style="height:1rem;width:75%"
+          />
+        </div>
+      {:else}<div class="integration-auth__device">
+          <p>Authorization is unavailable. Start again to request a code.</p>
+          <Button variant="outline" onclick={() => manager.begin()}
+            >Try GitHub sign-in</Button
+          >
+        </div>{/if}
+    {:else}
+      <form
+        onsubmit={(event) => {
+          event.preventDefault();
+          void manager
+            .addToken(
+              snapshot.flow === "pat" ? "https://api.github.com" : api,
+              token,
+            )
+            .then((saved) => {
+              if (saved) {
+                token = "";
+                api = "";
+              }
+            });
+        }}
+      >
+        <Field.Group style="gap:0">
+          {#if snapshot.flow === "enterprise" || snapshot.flow === "forgejo"}<BackupField
+              label="API Base URL"
+              id={`${id}-api`}
+              description={snapshot.flow === "forgejo"
+                ? "For example, https://forge.example/api/v1"
+                : "For example, https://github.example.com/api/v3"}
+            >
+              <Input
+                id={`${id}-api`}
+                type="url"
+                required
+                bind:value={api}
+                disabled={snapshot.busy}
+                placeholder={snapshot.flow === "forgejo"
+                  ? "https://forge.example/api/v1"
+                  : "https://github.example.com/api/v3"}
+              />
+            </BackupField>{/if}
+          <BackupField
+            label="Personal Access Token"
+            id={`${id}-token`}
+            description="Saved in your OS Keychain / Credential Manager."
+          >
+            <InputGroup.Root>
+              <InputGroup.Input
+                id={`${id}-token`}
+                type={visible ? "text" : "password"}
+                autocomplete="off"
+                required
+                bind:value={token}
+                disabled={snapshot.busy}
+              />
+              <InputGroup.Addon align="inline-end"
+                ><InputGroup.Button
+                  aria-label={visible ? "Hide token" : "Show token"}
+                  onclick={() => (visible = !visible)}
+                  >{#if visible}<EyeOff />{:else}<Eye />{/if}</InputGroup.Button
+                ></InputGroup.Addon
+              >
+            </InputGroup.Root>
+          </BackupField>
+        </Field.Group>
+        <div class="auth-actions">
+          <Button
+            variant="outline"
+            type="button"
+            disabled={snapshot.busy}
+            onclick={() => manager.cancel()}>Cancel</Button
+          >
+          <Button
+            type="submit"
+            disabled={snapshot.busy ||
+              !token.trim() ||
+              (snapshot.flow === "enterprise" && !api)}
+          >
+            {snapshot.busy ? "Connecting…" : "Add account"}</Button
+          >
+        </div>
+      </form>
+    {/if}
+  </BackupCard>
+{/if}
+
+<style>
+  .auth-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    padding: 0.85rem 1rem;
+  }
+  .integration-auth__device {
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  .integration-auth__device p {
+    margin: 0;
+  }
+  .integration-auth__steps {
+    margin: 0;
+    padding: 0 0 0 1.75rem;
+    list-style: none;
+    border-inline-start: 1px dashed var(--border);
+  }
+  .integration-auth__steps li {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    padding-block: 0.25rem 1rem;
+  }
+  .integration-auth__steps li::before {
+    content: "";
+    position: absolute;
+    inset-inline-start: -2.05rem;
+    top: 0.65rem;
+    width: 0.6rem;
+    height: 0.6rem;
+    border-radius: 50%;
+    background: var(--muted-foreground);
+    box-shadow: 0 0 0 4px var(--background);
+  }
+  .integration-auth__steps li :global([data-ui-component="separator"]) {
+    align-self: stretch;
+    margin-block-end: 0.5rem;
+  }
+  .integration-auth__steps li:last-child::before {
+    top: 2.2rem;
+  }
+  .integration-auth__code {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+    padding: 0.4rem;
+    padding-inline-start: 0.75rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+  }
+  .integration-auth__code strong {
+    font-size: 1.35rem;
+    letter-spacing: 0.08em;
+  }
+  .integration-auth__waiting {
+    color: var(--muted-foreground);
+    font-size: 0.8rem;
+    padding-inline-start: 1.75rem;
+  }
+</style>

package/dist/repository/components/backup/ForgeAuthorization.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ForgeController } from "../../controllers/forge-controller.js";
+import type { ForgeState } from "../../controllers/forge-accounts.js";
+type $$ComponentProps = {
+    manager: ForgeController;
+    snapshot: ForgeState;
+};
+declare const ForgeAuthorization: import("svelte").Component<$$ComponentProps, {}, "">;
+type ForgeAuthorization = ReturnType<typeof ForgeAuthorization>;
+export default ForgeAuthorization;

package/dist/repository/components/backup/ForgeIcon.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  // Adapted from jj-store StoreForgeIcon.svelte (Apache-2.0).
+  import { forgeIcons } from "./forge-icons.js";
+  let {
+    provider,
+    decorative = false,
+  }: { provider: "github" | "forgejo"; decorative?: boolean } = $props();
+  const icon = $derived(forgeIcons[provider]);
+</script>
+
+<svg
+  role={decorative ? undefined : "img"}
+  aria-label={decorative ? undefined : icon.name}
+  aria-hidden={decorative || undefined}
+  viewBox="0 0 24 24"
+  width="16"
+  height="16"
+  fill="currentColor"
+>
+  <title>{icon.name}</title><path d={icon.path} />
+</svg>

package/dist/repository/components/backup/ForgeIcon.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    provider: "github" | "forgejo";
+    decorative?: boolean;
+};
+declare const ForgeIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type ForgeIcon = ReturnType<typeof ForgeIcon>;
+export default ForgeIcon;