@peaske7/readit 0.2.1 → 0.3.0-rc.1

package/src/components/RawModal.svelte

@@ -1,126 +0,0 @@
-<script lang="ts">
-import { Copy } from "lucide-svelte";
-import { app } from "../stores/app.svelte";
-import { t } from "../stores/locale.svelte";
-import Button from "./ui/Button.svelte";
-import Dialog from "./ui/Dialog.svelte";
-import Text from "./ui/Text.svelte";
-
-interface Props {
-  open: boolean;
-  onclose: () => void;
-}
-
-let { open = $bindable(false), onclose }: Props = $props();
-
-type ModalState =
-  | { status: "idle" }
-  | { status: "loading" }
-  | { status: "error"; error: string }
-  | { status: "empty"; path: string }
-  | { status: "success"; content: string; path: string };
-
-let modalState = $state<ModalState>({ status: "idle" });
-
-$effect(() => {
-  if (!open) {
-    modalState = { status: "idle" };
-    return;
-  }
-
-  modalState = { status: "loading" };
-
-  const query = app.activeDocumentPath
-    ? `?path=${encodeURIComponent(app.activeDocumentPath)}`
-    : "";
-
-  fetch(`/api/comments/raw${query}`)
-    .then((response) => {
-      if (!response.ok) {
-        throw new Error("Failed to fetch raw comments");
-      }
-      return response.json();
-    })
-    .then((result) => {
-      if (result.content === null) {
-        modalState = { status: "empty", path: result.path };
-      } else {
-        modalState = {
-          status: "success",
-          content: result.content,
-          path: result.path,
-        };
-      }
-    })
-    .catch((err) => {
-      modalState = {
-        status: "error",
-        error: err instanceof Error ? err.message : "Unknown error",
-      };
-    });
-});
-
-async function handleCopy() {
-  if (modalState.status !== "success") return;
-
-  try {
-    await navigator.clipboard.writeText(modalState.content);
-  } catch {}
-}
-</script>
-
-<Dialog bind:open {onclose} contentClass="max-w-2xl max-h-[80vh]">
-  {#snippet header()}
-    {t("rawModal.title")}
-  {/snippet}
-
-  {#snippet headerActions()}
-    {#if modalState.status === "success"}
-      <Button
-        variant="ghost"
-        size="icon"
-        class="size-7"
-        onclick={handleCopy}
-        title={t("rawModal.copyTitle")}
-      >
-        <Copy class="w-4 h-4" />
-      </Button>
-    {/if}
-  {/snippet}
-
-  {#if modalState.status === "success" || modalState.status === "empty"}
-    <div
-      class="px-4 py-2 border-b border-zinc-50 dark:border-zinc-800 text-xs text-zinc-400 dark:text-zinc-500 font-mono truncate -mt-4 -mx-4 mb-4"
-    >
-      {modalState.path}
-    </div>
-  {/if}
-
-  {#if modalState.status === "loading"}
-    <Text variant="caption" class="text-center py-8">
-      {t("rawModal.loading")}
-    </Text>
-  {/if}
-
-  {#if modalState.status === "error"}
-    <Text variant="body" class="text-red-500 text-center py-8">
-      {modalState.error}
-    </Text>
-  {/if}
-
-  {#if modalState.status === "empty"}
-    <Text variant="caption" class="text-center py-8">
-      {t("rawModal.noComments")}
-    </Text>
-  {/if}
-
-  {#if modalState.status === "success"}
-    <Text
-      variant="body"
-      as="pre"
-      class="text-xs font-mono whitespace-pre-wrap break-words leading-relaxed"
-    >
-      {modalState.content}
-    </Text>
-  {/if}
-</Dialog>

package/src/components/ReanchorConfirm.svelte

@@ -1,30 +0,0 @@
-<script lang="ts">
-import { t } from "../stores/locale.svelte";
-import Button from "./ui/Button.svelte";
-import Text from "./ui/Text.svelte";
-
-interface Props {
-  selectionText: string;
-  onconfirm: () => void;
-  oncancel: () => void;
-}
-
-let { selectionText, onconfirm, oncancel }: Props = $props();
-</script>
-
-<div class="border-t border-zinc-200 dark:border-zinc-700 pt-2 pb-3 pl-6">
-  <Text variant="body" class="mb-2">
-    {t("reanchor.question")}
-  </Text>
-  <Text variant="caption" class="italic line-clamp-2 mb-2">
-    "{selectionText}"
-  </Text>
-  <div class="flex gap-3 text-sm">
-    <Button variant="link" size="sm" onclick={onconfirm}>
-      {t("reanchor.confirm")}
-    </Button>
-    <Button variant="ghost" size="sm" onclick={oncancel}>
-      {t("reanchor.cancel")}
-    </Button>
-  </div>
-</div>

package/src/components/SettingsModal.svelte

@@ -1,220 +0,0 @@
-<script lang="ts">
-import { Check, ChevronDown } from "lucide-svelte";
-import { type Locale, Locales } from "../lib/i18n";
-import { cn } from "../lib/utils";
-import { FontFamilies, type FontFamily, ThemeModes } from "../schema";
-import { localeState, setLocale, t } from "../stores/locale.svelte";
-import {
-  settings,
-  updateFontFamily,
-  updateThemeMode,
-} from "../stores/settings.svelte";
-import ShortcutList from "./ShortcutList.svelte";
-import Dialog from "./ui/Dialog.svelte";
-import DropdownMenu from "./ui/DropdownMenu.svelte";
-import DropdownMenuItem from "./ui/DropdownMenuItem.svelte";
-import Text from "./ui/Text.svelte";
-
-interface Props {
-  open: boolean;
-  onclose: () => void;
-}
-
-let { open = $bindable(false), onclose }: Props = $props();
-
-const LOCALE_OPTIONS = [
-  { value: Locales.JA, label: "日本語" },
-  { value: Locales.EN, label: "English" },
-] as const;
-
-let themeOptions = $derived([
-  { value: ThemeModes.SYSTEM, label: t("settings.theme.system") },
-  { value: ThemeModes.LIGHT, label: t("settings.theme.light") },
-  { value: ThemeModes.DARK, label: t("settings.theme.dark") },
-]);
-
-let fontOptions = $derived([
-  {
-    value: FontFamilies.SERIF,
-    label: t("settings.font.serif"),
-    fontClass: "font-serif",
-  },
-  {
-    value: FontFamilies.SANS_SERIF,
-    label: t("settings.font.sansSerif"),
-    fontClass: "font-sans",
-  },
-]);
-
-let activeTheme = $derived(
-  themeOptions.find((o) => o.value === settings.themeMode) ?? themeOptions[0],
-);
-let activeFont = $derived(
-  fontOptions.find((o) => o.value === settings.fontFamily) ?? fontOptions[0],
-);
-let activeLocale = $derived(
-  LOCALE_OPTIONS.find((o) => o.value === localeState.locale) ??
-    LOCALE_OPTIONS[0],
-);
-
-const triggerClassName = cn(
-  "inline-flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-sm",
-  "border border-zinc-200 dark:border-zinc-700",
-  "bg-white dark:bg-zinc-800",
-  "text-zinc-700 dark:text-zinc-300",
-  "hover:bg-zinc-50 dark:hover:bg-zinc-700/50",
-  "transition-colors cursor-pointer",
-);
-
-let themeDropdownOpen = $state(false);
-let fontDropdownOpen = $state(false);
-let localeDropdownOpen = $state(false);
-</script>
-
-<Dialog bind:open {onclose} contentClass="max-w-md">
-  {#snippet header()}
-    {t("settings.title")}
-  {/snippet}
-
-  <div class="space-y-4">
-    <div>
-      <Text variant="overline" as="h3" class="mb-3">
-        {t("settings.theme")}
-      </Text>
-      <DropdownMenu bind:open={themeDropdownOpen} align="start" contentClass="min-w-[160px]">
-        {#snippet trigger()}
-          <button type="button" class={triggerClassName}>
-            {#if activeTheme.value === ThemeModes.SYSTEM}
-              <span
-                class="size-2.5 rounded-full bg-gradient-to-r from-amber-400 to-indigo-400"
-              ></span>
-            {:else}
-              <span
-                class={cn(
-                  "size-2.5 rounded-full",
-                  activeTheme.value === ThemeModes.LIGHT
-                    ? "bg-amber-400"
-                    : "bg-indigo-400",
-                )}
-              ></span>
-            {/if}
-            <span
-              class="text-[10px] font-semibold leading-none text-zinc-500 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-800 rounded px-1 py-0.5"
-            >Aa</span>
-            <span>{activeTheme.label}</span>
-            <ChevronDown class="size-3 text-zinc-400 dark:text-zinc-500" />
-          </button>
-        {/snippet}
-
-        {#each themeOptions as option (option.value)}
-          <DropdownMenuItem
-            onselect={() => {
-              updateThemeMode(option.value);
-              themeDropdownOpen = false;
-            }}
-            class="flex items-center gap-2"
-          >
-            {#if option.value === ThemeModes.SYSTEM}
-              <span
-                class="size-2.5 rounded-full bg-gradient-to-r from-amber-400 to-indigo-400"
-              ></span>
-            {:else}
-              <span
-                class={cn(
-                  "size-2.5 rounded-full",
-                  option.value === ThemeModes.LIGHT
-                    ? "bg-amber-400"
-                    : "bg-indigo-400",
-                )}
-              ></span>
-            {/if}
-            <span
-              class="text-[10px] font-semibold leading-none text-zinc-500 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-800 rounded px-1 py-0.5"
-            >Aa</span>
-            <span class="flex-1">{option.label}</span>
-            {#if settings.themeMode === option.value}
-              <Check class="size-3.5 text-zinc-500 dark:text-zinc-400" />
-            {/if}
-          </DropdownMenuItem>
-        {/each}
-      </DropdownMenu>
-    </div>
-
-    <div>
-      <Text variant="overline" as="h3" class="mb-3">
-        {t("settings.font")}
-      </Text>
-      <DropdownMenu bind:open={fontDropdownOpen} align="start" contentClass="min-w-[160px]">
-        {#snippet trigger()}
-          <button type="button" class={triggerClassName}>
-            <span
-              class={cn(
-                "text-[10px] font-semibold leading-none text-zinc-500 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-800 rounded px-1 py-0.5",
-                activeFont.fontClass,
-              )}
-            >Aa</span>
-            <span>{activeFont.label}</span>
-            <ChevronDown class="size-3 text-zinc-400 dark:text-zinc-500" />
-          </button>
-        {/snippet}
-
-        {#each fontOptions as option (option.value)}
-          <DropdownMenuItem
-            onselect={() => {
-              updateFontFamily(option.value as FontFamily);
-              fontDropdownOpen = false;
-            }}
-            class="flex items-center gap-2"
-          >
-            <span
-              class={cn(
-                "text-[10px] font-semibold leading-none text-zinc-500 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-800 rounded px-1 py-0.5",
-                option.fontClass,
-              )}
-            >Aa</span>
-            <span class="flex-1">{option.label}</span>
-            {#if settings.fontFamily === option.value}
-              <Check class="size-3.5 text-zinc-500 dark:text-zinc-400" />
-            {/if}
-          </DropdownMenuItem>
-        {/each}
-      </DropdownMenu>
-    </div>
-
-    <div>
-      <Text variant="overline" as="h3" class="mb-3">
-        {t("settings.language")}
-      </Text>
-      <DropdownMenu bind:open={localeDropdownOpen} align="start" contentClass="min-w-[160px]">
-        {#snippet trigger()}
-          <button type="button" class={triggerClassName}>
-            <span>{activeLocale.label}</span>
-            <ChevronDown class="size-3 text-zinc-400 dark:text-zinc-500" />
-          </button>
-        {/snippet}
-
-        {#each LOCALE_OPTIONS as option (option.value)}
-          <DropdownMenuItem
-            onselect={() => {
-              setLocale(option.value as Locale);
-              localeDropdownOpen = false;
-            }}
-            class="flex items-center gap-2"
-          >
-            <span class="flex-1">{option.label}</span>
-            {#if localeState.locale === option.value}
-              <Check class="size-3.5 text-zinc-500 dark:text-zinc-400" />
-            {/if}
-          </DropdownMenuItem>
-        {/each}
-      </DropdownMenu>
-    </div>
-
-    <div>
-      <Text variant="overline" as="h3" class="mb-3">
-        {t("shortcuts.title")}
-      </Text>
-      <ShortcutList />
-    </div>
-  </div>
-</Dialog>

package/src/components/ShortcutCapture.svelte

@@ -1,82 +0,0 @@
-<script lang="ts">
-import { onMount } from "svelte";
-import {
-  eventToBinding,
-  formatBinding,
-  isReservedBinding,
-} from "../lib/shortcut-registry";
-import { cn } from "../lib/utils";
-import type { ShortcutBinding } from "../schema";
-import { t } from "../stores/locale.svelte";
-
-interface Props {
-  oncapture: (binding: ShortcutBinding) => void;
-  oncancel: () => void;
-}
-
-let { oncapture, oncancel }: Props = $props();
-
-let captureEl: HTMLDivElement | undefined = $state();
-let error = $state<string | null>(null);
-const isMac = navigator.platform.includes("Mac");
-
-function handleKeyDown(e: KeyboardEvent) {
-  e.preventDefault();
-  e.stopPropagation();
-
-  if (
-    e.key === "Alt" ||
-    e.key === "Shift" ||
-    e.key === "Control" ||
-    e.key === "Meta"
-  ) {
-    return;
-  }
-
-  if (e.key === "Escape" && !e.altKey && !e.metaKey && !e.shiftKey) {
-    oncancel();
-    return;
-  }
-
-  const binding = eventToBinding(e);
-
-  if (isReservedBinding(binding, isMac)) {
-    error = t("shortcutCapture.reserved", {
-      binding: formatBinding(binding, isMac),
-    });
-    return;
-  }
-
-  error = null;
-  oncapture(binding);
-}
-
-onMount(() => {
-  captureEl?.focus();
-});
-</script>
-
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<div
-  role="button"
-  aria-label={t("shortcutCapture.ariaLabel")}
-  bind:this={captureEl}
-  tabindex={0}
-  onkeydown={handleKeyDown}
-  onblur={oncancel}
-  class={cn(
-    "inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium",
-    "bg-amber-50 dark:bg-amber-900/30",
-    "border border-amber-300 dark:border-amber-600",
-    "text-amber-700 dark:text-amber-300",
-    "outline-none ring-2 ring-amber-400/50",
-    "animate-pulse",
-  )}
->
-  <span>{t("shortcutCapture.pressKeys")}</span>
-  {#if error}
-    <span class="text-red-500 dark:text-red-400 text-[10px] animate-none"
-      >{error}</span
-    >
-  {/if}
-</div>

package/src/components/ShortcutList.svelte

@@ -1,145 +0,0 @@
-<script lang="ts">
-import {
-  bindingsEqual,
-  formatBinding,
-  SHORTCUT_GROUPS,
-  type ShortcutDefinition,
-} from "../lib/shortcut-registry";
-import { cn } from "../lib/utils";
-import type { ShortcutBinding } from "../schema";
-import { t } from "../stores/locale.svelte";
-import {
-  resetToDefaults,
-  shortcutState,
-  toggleEnabled,
-  updateBinding,
-} from "../stores/shortcuts.svelte";
-import ShortcutCapture from "./ShortcutCapture.svelte";
-import Button from "./ui/Button.svelte";
-import Text from "./ui/Text.svelte";
-
-const isMac = navigator.platform.includes("Mac");
-let capturingId = $state<string | null>(null);
-
-function handleCapture(id: string, binding: ShortcutBinding) {
-  capturingId = null;
-  updateBinding(id, binding);
-}
-
-function handleCancelCapture() {
-  capturingId = null;
-}
-
-function startCapture(id: string) {
-  capturingId = id;
-}
-
-function getShortcut(id: string): ShortcutDefinition | undefined {
-  return shortcutState.shortcuts.find((s) => s.id === id);
-}
-
-function isModified(shortcut: ShortcutDefinition): boolean {
-  return (
-    !shortcut.enabled ||
-    !bindingsEqual(shortcut.binding, shortcut.defaultBinding)
-  );
-}
-
-let hasModifications = $derived(
-  shortcutState.shortcuts.some((s) => isModified(s)),
-);
-</script>
-
-<div class="space-y-4">
-  {#each SHORTCUT_GROUPS as group (group.label)}
-    <div>
-      <Text variant="caption" as="div" class="mb-2 font-medium">
-        {t(group.label)}
-      </Text>
-
-      <div class="space-y-1">
-        {#each group.ids as id (id)}
-          {@const shortcut = getShortcut(id)}
-          {#if shortcut}
-            <div
-              class={cn(
-                "flex items-center gap-3 px-2 py-1.5 rounded-lg",
-                "hover:bg-zinc-50 dark:hover:bg-zinc-800/50",
-                !shortcut.enabled && "opacity-50",
-              )}
-            >
-              <div class="flex-1 min-w-0">
-                <div class="text-xs text-zinc-700 dark:text-zinc-300">
-                  {t(shortcut.label)}
-                </div>
-              </div>
-
-              <div class="flex items-center gap-2">
-                {#if capturingId === shortcut.id}
-                  <ShortcutCapture
-                    oncapture={(binding) =>
-                      handleCapture(shortcut.id, binding)}
-                    oncancel={handleCancelCapture}
-                  />
-                {:else}
-                  <button
-                    type="button"
-                    onclick={() => startCapture(shortcut.id)}
-                    class={cn(
-                      "inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[11px] font-mono",
-                      "bg-zinc-100 dark:bg-zinc-800",
-                      "border border-zinc-200 dark:border-zinc-700",
-                      "text-zinc-600 dark:text-zinc-400",
-                      "hover:bg-zinc-200 dark:hover:bg-zinc-700",
-                      "transition-colors cursor-pointer",
-                      isModified(shortcut) &&
-                        "ring-1 ring-blue-400/50 dark:ring-blue-500/50",
-                    )}
-                  >
-                    {formatBinding(shortcut.binding, isMac)}
-                  </button>
-                {/if}
-
-                <label
-                  class="relative inline-flex items-center cursor-pointer"
-                  title={t("shortcuts.enableDisable")}
-                >
-                  <input
-                    type="checkbox"
-                    checked={shortcut.enabled}
-                    onchange={() => toggleEnabled(shortcut.id)}
-                    class="sr-only peer"
-                  />
-                  <div
-                    class={cn(
-                      "w-7 h-4 rounded-full transition-colors",
-                      "bg-zinc-200 dark:bg-zinc-700",
-                      "peer-checked:bg-blue-500 dark:peer-checked:bg-blue-600",
-                      "after:content-[''] after:absolute after:top-0.5 after:start-[2px]",
-                      "after:bg-white after:rounded-full after:size-3",
-                      "after:transition-all after:duration-150",
-                      "peer-checked:after:translate-x-full peer-checked:after:translate-x-3",
-                    )}
-                  ></div>
-                </label>
-              </div>
-            </div>
-          {/if}
-        {/each}
-      </div>
-    </div>
-  {/each}
-
-  {#if hasModifications}
-    <div class="pt-2 border-t border-zinc-100 dark:border-zinc-800">
-      <Button
-        variant="ghost"
-        size="sm"
-        onclick={resetToDefaults}
-        class="text-xs"
-      >
-        {t("shortcuts.resetToDefaults")}
-      </Button>
-    </div>
-  {/if}
-</div>

package/src/components/TabBar.svelte

@@ -1,52 +0,0 @@
-<script lang="ts">
-import { cn } from "../lib/utils";
-import { app, closeDocument, setActiveDocument } from "../stores/app.svelte";
-</script>
-
-{#if app.documentOrder.length > 1}
-  <div
-    class="flex border-b border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900 px-2 overflow-x-auto"
-    role="tablist"
-  >
-    {#each app.documentOrder as filePath (filePath)}
-      {@const docState = app.documents.get(filePath)}
-      {@const isActive = filePath === app.activeDocumentPath}
-
-      {#if docState}
-        <div
-          role="tab"
-          tabindex={isActive ? 0 : -1}
-          aria-selected={isActive}
-          class={cn(
-            "flex items-center gap-1.5 px-3 py-1.5 text-sm border-b-2 whitespace-nowrap cursor-pointer select-none",
-            isActive
-              ? "border-zinc-900 dark:border-zinc-100 text-zinc-900 dark:text-zinc-100"
-              : "border-transparent text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800",
-          )}
-          onclick={() => setActiveDocument(filePath)}
-          onkeydown={(e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              setActiveDocument(filePath);
-            }
-          }}
-        >
-          <span>{docState.document.fileName}</span>
-          <button
-            type="button"
-            aria-label="Close tab"
-            class="ml-1 rounded p-0.5 hover:bg-zinc-200 dark:hover:bg-zinc-700"
-            onclick={(e) => {
-              e.stopPropagation();
-              closeDocument(filePath);
-            }}
-          >
-            <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-              <path d="M18 6 6 18M6 6l12 12"></path>
-            </svg>
-          </button>
-        </div>
-      {/if}
-    {/each}
-  </div>
-{/if}