@lapis-notes/history 0.1.2 → 0.2.0

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;

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

@@ -0,0 +1,129 @@
+<script lang="ts">
+  // Uses the maintained restore-dialog composition for an explicit local decision.
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import * as AlertDialog from "@lapismd/design-core/shadcn/alert-dialog";
+  import type { PendingPublication } from "../../controllers/remote.js";
+  let {
+    pending,
+    busy,
+    canObserve,
+    onObserve,
+    onStop,
+  }: {
+    pending: PendingPublication;
+    busy: boolean;
+    canObserve: boolean;
+    onObserve(id: string): Promise<boolean>;
+    onStop(id: string): Promise<boolean>;
+  } = $props();
+  let confirm = $state(false);
+  let selected = $state<PendingPublication>();
+  const terminal = $derived(
+    ["complete", "stale", "stopped"].includes(pending.outcome),
+  );
+  async function stop() {
+    if (selected && (await onStop(selected.request_id))) confirm = false;
+  }
+</script>
+
+<section class="publication-recovery" aria-label="Original backup push">
+  <strong>Previous push needs review</strong>
+  <p>
+    {terminal
+      ? "Its recorded result can be retained and the local recovery marker cleared."
+      : "The result of this original push has not been confirmed. Checking it never sends the push again."}
+  </p>
+  <dl>
+    <div>
+      <dt>Checkpoint</dt>
+      <dd><code title={pending.after}>{pending.after.slice(0, 12)}</code></dd>
+    </div>
+    <div>
+      <dt>Request</dt>
+      <dd><code>{pending.request_id}</code></dd>
+    </div>
+  </dl>
+  <div class="publication-actions">
+    <Button
+      variant="outline"
+      size="sm"
+      disabled={busy || !canObserve}
+      onclick={() => onObserve(pending.request_id)}>Check original push</Button
+    >
+    <Button
+      variant="outline"
+      size="sm"
+      disabled={busy}
+      onclick={() => {
+        if (terminal) void onStop(pending.request_id);
+        else {
+          selected = pending;
+          confirm = true;
+        }
+      }}>{terminal ? "Finish recovery" : "Stop tracking this push"}</Button
+    >
+  </div>
+  {#if !canObserve}<p>
+      Reconnect the account to check the remote result. You can stop tracking
+      this request locally.
+    </p>{/if}
+</section>
+<AlertDialog.Root
+  open={confirm}
+  onOpenChange={(open) => {
+    if (!busy) confirm = open;
+  }}
+>
+  <AlertDialog.Content>
+    <AlertDialog.Header
+      ><AlertDialog.Title>Stop tracking this push?</AlertDialog.Title
+      ><AlertDialog.Description>
+        Its outcome will remain unknown. This retains the original receipt and
+        all local history, and cannot cancel or undo a push that reached the
+        remote. The next synchronization must fetch and merge before publishing
+        a new request.
+      </AlertDialog.Description></AlertDialog.Header
+    >
+    <AlertDialog.Footer
+      ><AlertDialog.Cancel disabled={busy}>Keep tracking</AlertDialog.Cancel
+      ><Button disabled={busy} onclick={stop}>Stop tracking</Button
+      ></AlertDialog.Footer
+    >
+  </AlertDialog.Content>
+</AlertDialog.Root>
+
+<style>
+  .publication-recovery {
+    border-top: 1px solid var(--border);
+    margin-top: 1.25rem;
+    padding-top: 1rem;
+    font-size: 0.8rem;
+  }
+  p {
+    color: var(--muted-foreground);
+    margin: 0.5rem 0;
+  }
+  dl {
+    margin: 0.75rem 0;
+    display: grid;
+    gap: 0.4rem;
+  }
+  dl div {
+    display: flex;
+    gap: 0.5rem;
+    min-width: 0;
+  }
+  dt {
+    color: var(--muted-foreground);
+  }
+  dd {
+    margin: 0;
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+  .publication-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+</style>

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

@@ -0,0 +1,11 @@
+import type { PendingPublication } from "../../controllers/remote.js";
+type $$ComponentProps = {
+    pending: PendingPublication;
+    busy: boolean;
+    canObserve: boolean;
+    onObserve(id: string): Promise<boolean>;
+    onStop(id: string): Promise<boolean>;
+};
+declare const PublicationRecovery: import("svelte").Component<$$ComponentProps, {}, "">;
+type PublicationRecovery = ReturnType<typeof PublicationRecovery>;
+export default PublicationRecovery;