@knotpad/app 0.1.5 → 0.1.7

package/components/calendar/day-detail-popover.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import { useState, useEffect, useLayoutEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import Link from "next/link";
+import { useKanbanStatuses } from "@/components/kanban/kanban-status-context";
+import type { CalTask, BusyBlockEntry, HolidayEntry } from "./calendar-types";
+import { getStatusDot, feedBg, feedText, countryFlag } from "./calendar-types";
+import { MobileBottomSheet } from "@/components/notes/mobile-bottom-sheet";
+
+const POPOVER_WIDTH = 256;
+
+function formatDate(dateKey: string): string {
+  const d = new Date(dateKey + "T00:00:00");
+  return d.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" });
+}
+
+function formatTime(iso: string): string {
+  return new Date(iso).toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
+}
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  dateKey: string | null;
+  kind: "busy" | "tasks" | "holidays";
+  busyBlocks: BusyBlockEntry[];
+  tasks: CalTask[];
+  holidays?: HolidayEntry[];
+  holidayCountry?: string;
+  taskHref: (taskId: string) => string;
+  isOverdue: (task: CalTask) => boolean;
+  anchorRect: DOMRect | null;
+};
+
+export function DayDetailPopover({
+  open,
+  onClose,
+  dateKey,
+  kind,
+  busyBlocks,
+  tasks,
+  holidays = [],
+  holidayCountry = "MY",
+  taskHref,
+  isOverdue,
+  anchorRect,
+}: Props) {
+  const kanbanStatuses = useKanbanStatuses();
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const [pos, setPos] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
+
+  useLayoutEffect(() => {
+    if (!open || !anchorRect) return;
+    const popoverHeight = popoverRef.current?.offsetHeight ?? 320;
+    let top = anchorRect.bottom + 4;
+    let left = anchorRect.left;
+    if (top + popoverHeight > window.innerHeight) {
+      top = Math.max(4, anchorRect.top - popoverHeight - 4);
+    }
+    if (left + POPOVER_WIDTH > window.innerWidth) {
+      left = Math.max(8, window.innerWidth - POPOVER_WIDTH - 8);
+    }
+    if (left < 0) left = 8;
+    setPos({ top, left });
+  }, [open, anchorRect]);
+
+  // Escape key dismissal
+  useEffect(() => {
+    if (!open) return;
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") onClose();
+    }
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+
+  // Close on scroll/resize (desktop popover only)
+  useEffect(() => {
+    if (!open || !anchorRect) return;
+    function handle() {
+      onClose();
+    }
+    window.addEventListener("scroll", handle, true);
+    window.addEventListener("resize", handle);
+    return () => {
+      window.removeEventListener("scroll", handle, true);
+      window.removeEventListener("resize", handle);
+    };
+  }, [open, anchorRect, onClose]);
+
+  if (!open || !dateKey) return null;
+
+  const count = kind === "busy" ? busyBlocks.length : kind === "holidays" ? holidays.length : tasks.length;
+
+  const content = (
+    <>
+      <div className="flex items-center justify-between border-b border-zinc-800 px-3 py-2">
+        <span className="text-sm font-medium text-zinc-200">{formatDate(dateKey)}</span>
+        <span className="rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] text-zinc-400">
+          {count} {kind === "busy" ? "busy" : kind === "holidays" ? "holiday" + (count === 1 ? "" : "s") : "task" + (count === 1 ? "" : "s")}
+        </span>
+      </div>
+      <div className="max-h-[50vh] overflow-y-auto p-2">
+        {kind === "busy"
+          ? busyBlocks.map((b, i) => (
+              <div
+                key={`${b.title}-${i}`}
+                className={`mb-1 rounded border px-2 py-1.5 text-xs ${feedBg(b.feedColor)} ${feedText(b.feedColor)}`}
+              >
+                <div className="truncate">
+                  {b.allDay ? b.title : `${formatTime(b.start)} ${b.title}`}
+                </div>
+                <div className="truncate text-[10px] opacity-60">{b.feedLabel}</div>
+              </div>
+            ))
+          : kind === "holidays"
+          ? holidays.map((h) => (
+              <div
+                key={h.name}
+                className="mb-1 rounded border border-amber-800/40 bg-amber-950/50 px-2 py-1.5 text-xs text-amber-300"
+              >
+                <div className="flex items-center gap-1.5 truncate">
+                  <span className="shrink-0 text-[10px]">{countryFlag(holidayCountry)}</span>
+                  <span className="truncate">{h.name}{h.is_subject_to_change ? " *" : ""}</span>
+                </div>
+              </div>
+            ))
+          : tasks.map((task) => {
+              const overdue = isOverdue(task);
+              return (
+                <Link
+                  key={task.id}
+                  href={taskHref(task.id)}
+                  onClick={onClose}
+                  className="flex items-center gap-2 rounded px-2 py-1.5 text-sm transition-colors hover:bg-zinc-800"
+                >
+                  <span
+                    className={`h-2 w-2 shrink-0 rounded-full ${overdue ? "bg-red-400" : getStatusDot(kanbanStatuses, task.status)}`}
+                  />
+                  <span className={`flex-1 truncate ${overdue ? "text-red-300" : "text-zinc-200"}`}>
+                    {task.title}
+                  </span>
+                  <span className="shrink-0 truncate text-xs text-zinc-600 max-w-[80px]">{task.noteTitle}</span>
+                </Link>
+              );
+            })}
+      </div>
+    </>
+  );
+
+  return (
+    <>
+      {anchorRect &&
+        createPortal(
+          <>
+            <div className="fixed inset-0 z-40 hidden md:block" onClick={onClose} aria-hidden />
+            <div
+              ref={popoverRef}
+              className="fixed z-50 hidden w-64 rounded-lg border border-zinc-700 bg-zinc-900 shadow-xl shadow-black/40 md:block"
+              style={{ top: pos.top, left: pos.left }}
+            >
+              {content}
+            </div>
+          </>,
+          document.body,
+        )}
+
+      <MobileBottomSheet open={open} onClose={onClose}>
+        <div className="px-1">{content}</div>
+      </MobileBottomSheet>
+    </>
+  );
+}

package/components/calendar/task-chip.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import Link from "next/link";
+import { useKanbanStatuses } from "@/components/kanban/kanban-status-context";
+import type { CalTask } from "./calendar-types";
+import { getStatusDot } from "./calendar-types";
+
+export function TaskChip({
+  task,
+  href,
+  isSaving,
+  isOverdue,
+  onDragStart,
+  onDragEnd,
+  onEdgeDragStart,
+  resizable = false,
+  compact = false,
+}: {
+  task: CalTask;
+  href: string;
+  isSaving: boolean;
+  isOverdue: boolean;
+  onDragStart: (e: React.DragEvent) => void;
+  onDragEnd: () => void;
+  onEdgeDragStart?: (e: React.DragEvent, edge: "start" | "end") => void;
+  resizable?: boolean;
+  compact?: boolean;
+}) {
+  const kanbanStatuses = useKanbanStatuses();
+  const showHandles = resizable && !!onEdgeDragStart;
+  return (
+    <div
+      className={`flex items-center overflow-hidden rounded border text-[11px] leading-tight transition ${
+        isSaving ? "opacity-50" : ""
+      } ${
+        isOverdue
+          ? "border-red-800/50 bg-red-900/60"
+          : compact
+            ? "border-zinc-800 bg-zinc-900"
+            : "border-zinc-700/50 bg-zinc-800/70"
+      }`}
+      title={`${task.title} · ${task.noteTitle}${isOverdue ? " · Overdue" : ""}`}
+    >
+      {showHandles && (
+        <span
+          draggable
+          onDragStart={(e) => { e.stopPropagation(); onEdgeDragStart!(e, "start"); }}
+          onDragEnd={(e) => { e.stopPropagation(); onDragEnd(); }}
+          aria-label={`Resize start for ${task.title}`}
+          title="Drag to set start date"
+          className="flex w-3.5 shrink-0 cursor-ew-resize items-center justify-center self-stretch border-r border-white/10 bg-black/25 text-[9px] leading-none text-white/60 hover:bg-black/45 hover:text-white/90"
+        >
+          &lt;
+        </span>
+      )}
+      <div
+        draggable
+        onDragStart={(e) => { e.stopPropagation(); onDragStart(e); }}
+        onDragEnd={(e) => { e.stopPropagation(); onDragEnd(); }}
+        className="flex min-w-0 flex-1 cursor-grab items-center gap-1 px-1 py-0.5 transition hover:opacity-90 active:cursor-grabbing"
+      >
+        <Link
+          href={href}
+          draggable={false}
+          onClick={(e) => e.stopPropagation()}
+          className="flex min-w-0 flex-1 items-center gap-1 overflow-hidden"
+        >
+          <span className={`shrink-0 h-1.5 w-1.5 rounded-full ${isOverdue ? "bg-red-400" : getStatusDot(kanbanStatuses, task.status)}`} />
+          <span className={`truncate max-w-[100px] ${isOverdue ? "text-red-300" : "text-zinc-300"}`}>{task.title}</span>
+        </Link>
+      </div>
+      {showHandles && (
+        <span
+          draggable
+          onDragStart={(e) => { e.stopPropagation(); onEdgeDragStart!(e, "end"); }}
+          onDragEnd={(e) => { e.stopPropagation(); onDragEnd(); }}
+          aria-label={`Resize end for ${task.title}`}
+          title="Drag to set end date"
+          className="flex w-3.5 shrink-0 cursor-ew-resize items-center justify-center self-stretch border-l border-white/10 bg-black/25 text-[9px] leading-none text-white/60 hover:bg-black/45 hover:text-white/90"
+        >
+          &gt;
+        </span>
+      )}
+    </div>
+  );
+}

package/components/command/command-palette.test.tsx

@@ -0,0 +1,33 @@
+// @vitest-environment jsdom
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { CommandPaletteProvider } from "@/components/command/command-palette";
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn() }),
+}));
+
+beforeAll(() => {
+  window.HTMLElement.prototype.scrollIntoView = vi.fn();
+});
+
+describe("CommandPalette", () => {
+  it("shows an empty state with recovery hints when no results match", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <CommandPaletteProvider data={{ notes: [], tasks: [], folders: [], notesHref: "/notes" }}>
+        <button>Child</button>
+      </CommandPaletteProvider>
+    );
+
+    await user.keyboard("{Meta>}k{/Meta}");
+    await user.type(screen.getByRole("textbox"), "zzzz");
+
+    expect(screen.getByText('No results for "zzzz"')).toBeInTheDocument();
+    expect(
+      screen.getByText(/try a note title, a task name, or a command like "calendar" or "settings"\./i)
+    ).toBeInTheDocument();
+  });
+});

package/components/command/command-palette.tsx

@@ -0,0 +1,310 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useRouter } from "next/navigation";
+import {
+  Search,
+  FileText,
+  Folder,
+  Plus,
+  Kanban,
+  List as ListIcon,
+  Calendar,
+  Share2,
+  Settings,
+  CheckSquare,
+  CornerDownLeft,
+} from "lucide-react";
+
+export type CommandData = {
+  notes: { id: string; title: string }[];
+  tasks: { id: string; title: string; note: { id: string; title: string } | null }[];
+  folders: { id: string; name: string }[];
+  notesHref: string;
+};
+
+type Item = {
+  key: string;
+  section: string;
+  icon: React.ComponentType<{ size?: number; className?: string }>;
+  label: string;
+  sublabel?: string;
+  run: () => void;
+};
+
+/**
+ * Lightweight relevance score. Returns -1 for no match; higher is better.
+ * exact > prefix > substring > subsequence. No external dependency.
+ */
+function score(textRaw: string, qRaw: string): number {
+  const text = textRaw.toLowerCase();
+  const q = qRaw.toLowerCase();
+  if (!q) return 0;
+  if (text === q) return 1000;
+  if (text.startsWith(q)) return 600 - text.length;
+  const idx = text.indexOf(q);
+  if (idx >= 0) return 300 - idx;
+  // subsequence fallback (fuzzy)
+  let ti = 0;
+  for (const ch of q) {
+    ti = text.indexOf(ch, ti);
+    if (ti === -1) return -1;
+    ti++;
+  }
+  return 50;
+}
+
+const Ctx = createContext<{ open: () => void }>({ open: () => {} });
+export function useCommandPalette() {
+  return useContext(Ctx);
+}
+
+export function CommandPaletteProvider({
+  data,
+  children,
+}: {
+  data: CommandData;
+  children: React.ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+        e.preventDefault();
+        setOpen((o) => !o);
+      }
+    }
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, []);
+
+  return (
+    <Ctx.Provider value={{ open: () => setOpen(true) }}>
+      {children}
+      {open && <CommandPalette data={data} onClose={() => setOpen(false)} />}
+    </Ctx.Provider>
+  );
+}
+
+function CommandPalette({ data, onClose }: { data: CommandData; onClose: () => void }) {
+  const router = useRouter();
+  const [query, setQuery] = useState("");
+  const [active, setActive] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  const go = (href: string) => {
+    onClose();
+    router.push(href);
+  };
+
+  async function createNote() {
+    onClose();
+    try {
+      const res = await fetch("/api/notes", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ title: "Untitled", content: "" }),
+      });
+      if (res.ok) {
+        const note = await res.json();
+        router.push(`/notes/${note.id}`);
+      }
+    } catch {
+      /* ignore */
+    }
+  }
+
+  const items = useMemo<Item[]>(() => {
+    const q = query.trim();
+    const out: Item[] = [];
+
+    const navCmds: Omit<Item, "section" | "key">[] = [
+      { label: "Go to Notes", icon: FileText, run: () => go(data.notesHref) },
+      { label: "Go to List", icon: ListIcon, run: () => go("/list") },
+      { label: "Go to Kanban", icon: Kanban, run: () => go("/kanban") },
+      { label: "Go to Calendar", icon: Calendar, run: () => go("/calendar") },
+      { label: "Go to Graph", icon: Share2, run: () => go("/graph") },
+      { label: "Go to Settings", icon: Settings, run: () => go("/settings") },
+      { label: "Create new note", icon: Plus, run: createNote },
+    ];
+
+    if (!q) {
+      navCmds.forEach((c, i) => out.push({ key: `cmd-${i}`, section: "Jump to", ...c }));
+      data.notes.slice(0, 5).forEach((n) =>
+        out.push({
+          key: `recent-${n.id}`,
+          section: "Recent notes",
+          icon: FileText,
+          label: n.title || "Untitled",
+          run: () => go(`/notes/${n.id}`),
+        })
+      );
+      return out;
+    }
+
+    const ranked = <T,>(arr: T[], text: (t: T) => string, limit: number) =>
+      arr
+        .map((t) => ({ t, s: score(text(t), q) }))
+        .filter((x) => x.s >= 0)
+        .sort((a, b) => b.s - a.s)
+        .slice(0, limit)
+        .map((x) => x.t);
+
+    ranked(data.notes, (n) => n.title || "Untitled", 6).forEach((n) =>
+      out.push({
+        key: `note-${n.id}`,
+        section: "Notes",
+        icon: FileText,
+        label: n.title || "Untitled",
+        run: () => go(`/notes/${n.id}`),
+      })
+    );
+
+    ranked(data.tasks, (t) => t.title, 6).forEach((t) =>
+      out.push({
+        key: `task-${t.id}`,
+        section: "Tasks",
+        icon: CheckSquare,
+        label: t.title,
+        sublabel: t.note?.title,
+        run: () => go(`/tasks/${t.id}`),
+      })
+    );
+
+    ranked(data.folders, (f) => f.name, 4).forEach((f) =>
+      out.push({
+        key: `folder-${f.id}`,
+        section: "Folders",
+        icon: Folder,
+        label: f.name,
+        run: () => go(`/list?folder=${f.id}`),
+      })
+    );
+
+    navCmds
+      .filter((c) => score(c.label, q) >= 0)
+      .forEach((c, i) => out.push({ key: `cmd-${i}`, section: "Commands", ...c }));
+
+    return out;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query, data]);
+
+  // Clamp during render (no effect) so the active row is always in range even
+  // as results shrink/grow.
+  const activeIdx = items.length === 0 ? -1 : Math.min(active, items.length - 1);
+
+  function onKeyDown(e: React.KeyboardEvent) {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActive(Math.min(activeIdx + 1, items.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActive(Math.max(activeIdx - 1, 0));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      items[activeIdx]?.run();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      onClose();
+    }
+  }
+
+  // Scroll the active row into view.
+  useEffect(() => {
+    const el = listRef.current?.querySelector<HTMLElement>(`[data-idx="${activeIdx}"]`);
+    el?.scrollIntoView({ block: "nearest" });
+  }, [activeIdx]);
+
+  let lastSection = "";
+
+  return (
+    <div
+      className="fixed inset-0 z-[100] flex items-start justify-center bg-black/60 px-4 pt-[12vh]"
+      onMouseDown={onClose}
+    >
+      <div
+        className="w-full max-w-lg overflow-hidden rounded-xl border border-zinc-700 bg-zinc-900 shadow-2xl"
+        onMouseDown={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-label="Command palette"
+      >
+        <div className="flex items-center gap-2 border-b border-zinc-800 px-3">
+          <Search size={16} className="shrink-0 text-zinc-500" />
+          <input
+            ref={inputRef}
+            value={query}
+            onChange={(e) => {
+              setQuery(e.target.value);
+              setActive(0);
+            }}
+            onKeyDown={onKeyDown}
+            placeholder="Search notes, tasks, or jump to…"
+            aria-label="Search notes, tasks, or jump to a view"
+            className="w-full bg-transparent py-3 text-sm text-zinc-100 placeholder:text-zinc-600 outline-none"
+          />
+          <kbd className="hidden shrink-0 rounded border border-zinc-700 px-1.5 py-0.5 text-[10px] text-zinc-500 sm:block">
+            Esc
+          </kbd>
+        </div>
+
+        <div ref={listRef} className="max-h-[55vh] overflow-y-auto py-1">
+          {items.length === 0 && (
+            <div className="border-t border-zinc-800 px-4 py-6 text-sm text-zinc-500">
+              <p className="font-medium text-zinc-300">No results for "{query.trim()}"</p>
+              <p className="mt-1">
+                Try a note title, a task name, or a command like "calendar" or
+                "settings".
+              </p>
+            </div>
+          )}
+          {items.map((item, i) => {
+            const header = item.section !== lastSection ? item.section : null;
+            lastSection = item.section;
+            const Icon = item.icon;
+            return (
+              <div key={item.key}>
+                {header && (
+                  <p className="px-3 pb-1 pt-2 text-[10px] font-medium uppercase tracking-wide text-zinc-600">
+                    {header}
+                  </p>
+                )}
+                <button
+                  data-idx={i}
+                  onMouseMove={() => setActive(i)}
+                  onClick={() => item.run()}
+                  className={`flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm transition-colors ${
+                    activeIdx === i ? "bg-zinc-800 text-zinc-100" : "text-zinc-300"
+                  }`}
+                >
+                  <Icon size={15} className="shrink-0 text-zinc-500" />
+                  <span className="flex-1 truncate">{item.label}</span>
+                  {item.sublabel && (
+                    <span className="shrink-0 max-w-[40%] truncate text-xs text-zinc-600">
+                      {item.sublabel}
+                    </span>
+                  )}
+                  {activeIdx === i && (
+                    <CornerDownLeft size={13} className="shrink-0 text-zinc-600" />
+                  )}
+                </button>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/download-cta.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+
+type Platform = "windows" | "macos" | "linux" | "unknown";
+
+function detectPlatform(): Platform {
+  if (typeof navigator === "undefined") return "unknown";
+  const ua = navigator.userAgent.toLowerCase();
+  if (ua.includes("win")) return "windows";
+  if (ua.includes("mac") || ua.includes("darwin")) return "macos";
+  if (ua.includes("linux")) return "linux";
+  return "unknown";
+}
+
+
+export default function DownloadCTA() {
+  const [platform, setPlatform] = useState<Platform>("unknown");
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setPlatform(detectPlatform());
+    setIsMounted(true);
+  }, []);
+
+  // Don't flash wrong content during SSR — render minimal state
+  if (!isMounted) {
+    return (
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
+        <div className="inline-flex items-center justify-center rounded-lg bg-zinc-100 px-6 py-3 text-sm font-semibold text-zinc-900 animate-pulse">
+          Loading…
+        </div>
+        <div className="flex flex-col gap-0.5 rounded-lg border border-zinc-800 bg-zinc-900 px-4 py-3">
+          <code className="text-sm font-mono text-zinc-300">npx @knotpad/app</code>
+        </div>
+      </div>
+    );
+  }
+
+  const isMac = platform === "macos";
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* Primary CTA */}
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
+        {isMac ? (
+          <div className="flex flex-col gap-2">
+            <div className="inline-flex items-center gap-2 rounded-full border border-amber-800/40 bg-amber-950/30 px-3 py-1 w-fit">
+              <span className="h-1.5 w-1.5 rounded-full bg-amber-400 animate-pulse" />
+              <span className="text-xs text-amber-300">macOS coming soon</span>
+            </div>
+            <Link
+              href="/register"
+              className="inline-flex items-center justify-center rounded-lg bg-zinc-100 px-6 py-3 text-sm font-semibold text-zinc-900 hover:bg-white transition-colors"
+            >
+              Get started free →
+            </Link>
+          </div>
+        ) : (
+          <Link
+            href="/download"
+            className="inline-flex items-center justify-center rounded-lg bg-zinc-100 px-6 py-3 text-sm font-semibold text-zinc-900 hover:bg-white transition-colors"
+          >
+            Download ↓
+          </Link>
+        )}
+
+        <div className="flex flex-col gap-0.5 rounded-lg border border-zinc-800 bg-zinc-900 px-4 py-3">
+          <code className="text-sm font-mono text-zinc-300">npx @knotpad/app</code>
+        </div>
+      </div>
+
+      {/* All platforms fallback (for unknown / mobile) */}
+      {platform === "unknown" && (
+        <div className="flex flex-wrap gap-3 pt-1">
+          <Link
+            href="/download"
+            className="inline-flex items-center gap-2 rounded-md border border-zinc-800 bg-zinc-900 px-3 py-1.5 text-xs text-zinc-400 hover:text-zinc-200 hover:border-zinc-700 transition-colors"
+          >
+            View all downloads
+          </Link>
+        </div>
+      )}
+    </div>
+  );
+}