@peaske7/readit 0.2.0 → 0.2.1

package/src/components/ShortcutList.svelte

@@ -0,0 +1,145 @@
+<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

@@ -0,0 +1,52 @@
+<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}

package/src/components/TableOfContents.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+import type { Heading } from "../lib/headings";
+import { cn } from "../lib/utils";
+import { FontFamilies } from "../schema";
+import { settings } from "../stores/settings.svelte";
+
+interface Props {
+  headings: Heading[];
+  onheadingclick: (id: string) => void;
+}
+
+let { headings, onheadingclick }: Props = $props();
+
+let fontClass = $derived(
+  settings.fontFamily === FontFamilies.SANS_SERIF ? "font-sans" : "font-serif",
+);
+
+let expandedH2s = $state(new Set<string>());
+
+let h2sWithChildren = $derived.by(() => {
+  const result = new Set<string>();
+  let currentH2: string | null = null;
+
+  for (const heading of headings) {
+    if (heading.level === 2) {
+      currentH2 = heading.id;
+    } else if (heading.level > 2 && currentH2) {
+      result.add(currentH2);
+    } else if (heading.level === 1) {
+      currentH2 = null;
+    }
+  }
+  return result;
+});
+
+let visibleHeadings = $derived.by(() => {
+  let currentH2: string | null = null;
+
+  return headings.filter((heading) => {
+    if (heading.level <= 2) {
+      if (heading.level === 2) {
+        currentH2 = heading.id;
+      } else {
+        currentH2 = null;
+      }
+      return true;
+    }
+
+    return currentH2 !== null && expandedH2s.has(currentH2);
+  });
+});
+
+function toggleH2(id: string) {
+  const next = new Set(expandedH2s);
+  if (next.has(id)) {
+    next.delete(id);
+  } else {
+    next.add(id);
+  }
+  expandedH2s = next;
+}
+
+let observedActiveId = $state<string | null>(null);
+
+$effect(() => {
+  if (headings.length === 0) return;
+
+  const headingElements = headings
+    .map((h) => document.getElementById(h.id))
+    .filter((el): el is HTMLElement => el !== null);
+
+  if (headingElements.length === 0) return;
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          observedActiveId = entry.target.id;
+        }
+      }
+    },
+    {
+      rootMargin: "-80px 0px -60% 0px",
+      threshold: 0,
+    },
+  );
+
+  for (const el of headingElements) {
+    observer.observe(el);
+  }
+
+  return () => observer.disconnect();
+});
+
+let effectiveActiveId = $derived(observedActiveId);
+</script>
+
+{#if headings.length > 0}
+  <nav class={cn("toc", fontClass)} aria-label="Table of contents">
+    {#each visibleHeadings as heading (heading.id)}
+      {@const hasChildren =
+        heading.level === 2 && h2sWithChildren.has(heading.id)}
+      {@const isExpanded = expandedH2s.has(heading.id)}
+      <a
+        href={`#${heading.id}`}
+        title={heading.text}
+        class={`toc-item toc-level-${heading.level}${effectiveActiveId === heading.id ? " toc-active" : ""}`}
+        onclick={(e) => {
+          e.preventDefault();
+          if (hasChildren) {
+            toggleH2(heading.id);
+          }
+          onheadingclick(heading.id);
+        }}
+      >
+        {heading.text}
+        {#if hasChildren}
+          <span class="toc-toggle ml-1 opacity-40">
+            {isExpanded ? "\u25BE" : "\u25B8"}
+          </span>
+        {/if}
+      </a>
+    {/each}
+  </nav>
+{/if}

package/src/components/ui/ActionLink.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+import type { Snippet } from "svelte";
+import { cn } from "../../lib/utils";
+
+const variantStyles = {
+  default: "hover:text-zinc-600",
+  destructive: "hover:text-red-500",
+} as const;
+
+type ActionLinkVariant = keyof typeof variantStyles;
+
+interface Props {
+  variant?: ActionLinkVariant;
+  onclick?: (e: MouseEvent) => void;
+  class?: string;
+  disabled?: boolean;
+  children: Snippet;
+}
+
+let {
+  variant = "default",
+  onclick,
+  class: className,
+  disabled = false,
+  children,
+}: Props = $props();
+</script>
+
+<button
+  type="button"
+  {disabled}
+  class={cn(
+    "cursor-pointer transition-colors duration-150",
+    variantStyles[variant],
+    className,
+  )}
+  {onclick}
+>
+  {@render children()}
+</button>

package/src/components/ui/{Button.tsx → Button.svelte}

@@ -1,3 +1,6 @@
+<script lang="ts">
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
 import { cn } from "../../lib/utils";
 
 const baseStyles =
@@ -25,30 +28,26 @@ const sizeStyles = {
 type ButtonVariant = keyof typeof variantStyles;
 type ButtonSize = keyof typeof sizeStyles;
 
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface Props extends HTMLButtonAttributes {
   variant?: ButtonVariant;
   size?: ButtonSize;
+  children: Snippet;
 }
 
-function Button({
-  className,
+let {
   variant = "default",
   size = "default",
-  ...props
-}: ButtonProps) {
-  return (
-    <button
-      type="button"
-      className={cn(
-        baseStyles,
-        variantStyles[variant],
-        sizeStyles[size],
-        className,
-      )}
-      {...props}
-    />
-  );
-}
+  class: className,
+  type = "button",
+  children,
+  ...rest
+}: Props = $props();
+</script>
 
-export type { ButtonProps, ButtonSize, ButtonVariant };
-export { Button };
+<button
+  {...rest}
+  {type}
+  class={cn(baseStyles, variantStyles[variant], sizeStyles[size], className)}
+>
+  {@render children()}
+</button>

package/src/components/ui/Dialog.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+import { X } from "lucide-svelte";
+import type { Snippet } from "svelte";
+import { cn } from "../../lib/utils";
+
+interface Props {
+  open: boolean;
+  onclose?: () => void;
+  contentClass?: string;
+  children: Snippet;
+  header?: Snippet;
+  headerActions?: Snippet;
+}
+
+let {
+  open = $bindable(false),
+  onclose,
+  contentClass,
+  children,
+  header,
+  headerActions,
+}: Props = $props();
+
+let dialogEl: HTMLDialogElement | undefined = $state();
+
+$effect(() => {
+  if (!dialogEl) return;
+
+  if (open && !dialogEl.open) {
+    dialogEl.showModal();
+  } else if (!open && dialogEl.open) {
+    dialogEl.close();
+  }
+});
+
+$effect(() => {
+  if (!dialogEl) return;
+
+  const handleClose = () => {
+    open = false;
+    onclose?.();
+  };
+
+  dialogEl.addEventListener("close", handleClose);
+  return () => dialogEl!.removeEventListener("close", handleClose);
+});
+
+function handleBackdropClick(e: MouseEvent) {
+  if (e.target === dialogEl && dialogEl?.open) {
+    dialogEl.close();
+  }
+}
+
+function handleCloseClick() {
+  if (dialogEl?.open) dialogEl.close();
+}
+</script>
+
+<dialog
+  bind:this={dialogEl}
+  onclick={handleBackdropClick}
+  class="backdrop:bg-black/20 dark:backdrop:bg-black/40 backdrop:backdrop-blur-sm bg-transparent p-0 m-auto max-w-none"
+>
+  {#if open}
+    <div
+      class={cn(
+        "w-full bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm shadow-lg border border-zinc-200/40 dark:border-zinc-700/40 rounded-xl flex flex-col",
+        contentClass,
+      )}
+    >
+      {#if header}
+        <div
+          class="flex items-center justify-between pl-4 pr-12 py-3 border-b border-zinc-100 dark:border-zinc-800"
+        >
+          <h2 class="text-sm font-medium text-zinc-900 dark:text-zinc-100">
+            {@render header()}
+          </h2>
+          {#if headerActions}
+            {@render headerActions()}
+          {/if}
+        </div>
+      {/if}
+
+      <div class="flex-1 overflow-visible p-4">
+        {@render children()}
+      </div>
+
+      <button
+        type="button"
+        onclick={handleCloseClick}
+        class="absolute top-3 right-3 size-7 inline-flex items-center justify-center rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800"
+      >
+        <X class="w-4 h-4" />
+      </button>
+    </div>
+  {/if}
+</dialog>

package/src/components/ui/DropdownMenu.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+import type { Snippet } from "svelte";
+import { cn } from "../../lib/utils";
+
+interface Props {
+  open?: boolean;
+  trigger: Snippet;
+  align?: "start" | "end";
+  contentClass?: string;
+  children: Snippet;
+}
+
+let {
+  open = $bindable(false),
+  trigger,
+  align = "start",
+  contentClass,
+  children,
+}: Props = $props();
+
+let containerEl: HTMLDivElement | undefined = $state();
+
+function toggle() {
+  open = !open;
+}
+
+function close() {
+  open = false;
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === "Escape" && open) {
+    e.stopPropagation();
+    close();
+  }
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    e.stopPropagation();
+    toggle();
+  }
+}
+
+$effect(() => {
+  if (!open) return;
+
+  function handleClickOutside(e: MouseEvent) {
+    if (containerEl && !containerEl.contains(e.target as Node)) {
+      close();
+    }
+  }
+
+  document.addEventListener("mousedown", handleClickOutside);
+  return () => document.removeEventListener("mousedown", handleClickOutside);
+});
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  bind:this={containerEl}
+  class="relative inline-block"
+  onkeydown={handleKeydown}
+>
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <div onclick={toggle} role="button" tabindex="0" aria-expanded={open}>
+    {@render trigger()}
+  </div>
+
+  {#if open}
+    <div
+      class={cn(
+        "absolute top-full mt-1 z-50 min-w-[8rem] overflow-hidden rounded-xl py-1",
+        "bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm shadow-lg border border-zinc-200/40 dark:border-zinc-700/40",
+        align === "end" ? "right-0" : "left-0",
+        contentClass,
+      )}
+    >
+      {@render children()}
+    </div>
+  {/if}
+</div>
+
+<script lang="ts" module>
+  export { default as DropdownMenuItem } from "./DropdownMenuItem.svelte";
+  export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.svelte";
+</script>

package/src/components/ui/DropdownMenuItem.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+import type { Snippet } from "svelte";
+import { cn } from "../../lib/utils";
+
+interface Props {
+  variant?: "default" | "destructive";
+  onselect?: () => void;
+  class?: string;
+  title?: string;
+  children: Snippet;
+}
+
+let {
+  variant = "default",
+  onselect,
+  class: className,
+  title,
+  children,
+}: Props = $props();
+</script>
+
+<button
+  type="button"
+  role="menuitem"
+  {title}
+  class={cn(
+    "w-full px-3 py-1.5 text-left text-sm outline-none select-none transition-colors duration-150 flex items-center gap-2 cursor-default",
+    variant === "default" &&
+      "text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-zinc-100 focus-visible:bg-zinc-50 dark:focus-visible:bg-zinc-800 focus-visible:text-zinc-900 dark:focus-visible:text-zinc-100",
+    variant === "destructive" &&
+      "text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950 hover:text-red-700 dark:hover:text-red-300 focus-visible:bg-red-50 dark:focus-visible:bg-red-950 focus-visible:text-red-700 dark:focus-visible:text-red-300",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+    className,
+  )}
+  onclick={() => onselect?.()}
+>
+  {@render children()}
+</button>

package/src/components/ui/DropdownMenuSeparator.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+import { cn } from "../../lib/utils";
+
+interface Props {
+  class?: string;
+}
+
+let { class: className }: Props = $props();
+</script>
+
+<div class={cn("my-1 h-px bg-zinc-100 dark:bg-zinc-800", className)}></div>