refactor: formatting and accessibility improvements across admin components

- Enforce consistent code formatting via ESLint rules
- Add accessibility enhancements (input IDs, labels, ARIA attributes)
- Replace Svelte store initialization patterns with reactive $effect
- Use $derived for reactive computed values
- Update error-codes and og-types indentation to spaces
- Add TypeScript definitions for html-minifier-terser
- Use resolve() for internal links in error and login pages

web/eslint.config.js

@@ -25,6 +25,16 @@ export default ts.config(
         parser: ts.parser,
       },
     },
+    rules: {
+      // Disable resolve() requirement for dynamic hrefs in components
+      "svelte/no-navigation-without-resolve": "off",
+    },
+  },
+  {
+    files: ["**/*.svelte.ts"],
+    languageOptions: {
+      parser: ts.parser,
+    },
   },
   {
     ignores: ["build/", ".svelte-kit/", "dist/"],

web/src/html-minifier-terser.d.ts

@@ -0,0 +1,22 @@
+declare module "html-minifier-terser" {
+  export interface Options {
+    collapseBooleanAttributes?: boolean;
+    collapseWhitespace?: boolean;
+    conservativeCollapse?: boolean;
+    decodeEntities?: boolean;
+    html5?: boolean;
+    ignoreCustomComments?: RegExp[];
+    minifyCSS?: boolean;
+    minifyJS?: boolean;
+    removeAttributeQuotes?: boolean;
+    removeComments?: boolean;
+    removeOptionalTags?: boolean;
+    removeRedundantAttributes?: boolean;
+    removeScriptTypeAttributes?: boolean;
+    removeStyleLinkTypeAttributes?: boolean;
+    sortAttributes?: boolean;
+    sortClassName?: boolean;
+  }
+
+  export function minify(html: string, options?: Options): string;
+}

web/src/lib/admin-types.ts

@@ -78,7 +78,12 @@ export interface AuthSession {
   expiresAt: string; // ISO 8601
 }
 
-export type SocialPlatform = "github" | "linkedin" | "discord" | "email" | "pgp";
+export type SocialPlatform =
+  | "github"
+  | "linkedin"
+  | "discord"
+  | "email"
+  | "pgp";
 
 export interface SocialLink {
   id: string;

web/src/lib/api.ts

@@ -9,9 +9,6 @@ import type {
   CreateTagData,
   UpdateTagData,
   SiteSettings,
-  SiteIdentity,
-  SocialLink,
-  AdminPreferences,
 } from "./admin-types";
 
 // ============================================================================
@@ -19,30 +16,110 @@ import type {
 // ============================================================================
 
 // Mock data storage (in-memory for now)
-let MOCK_TAGS: AdminTag[] = [
+const MOCK_TAGS: AdminTag[] = [
-  { id: "tag-1", slug: "rust", name: "Rust", createdAt: "2024-01-15T10:00:00Z" },
+  {
-  { id: "tag-2", slug: "typescript", name: "TypeScript", createdAt: "2024-01-16T10:00:00Z" },
+    id: "tag-1",
+    slug: "rust",
+    name: "Rust",
+    createdAt: "2024-01-15T10:00:00Z",
+  },
+  {
+    id: "tag-2",
+    slug: "typescript",
+    name: "TypeScript",
+    createdAt: "2024-01-16T10:00:00Z",
+  },
   { id: "tag-3", slug: "web", name: "Web", createdAt: "2024-01-17T10:00:00Z" },
   { id: "tag-4", slug: "cli", name: "CLI", createdAt: "2024-01-18T10:00:00Z" },
   { id: "tag-5", slug: "api", name: "API", createdAt: "2024-01-19T10:00:00Z" },
-  { id: "tag-6", slug: "database", name: "Database", createdAt: "2024-01-20T10:00:00Z" },
+  {
-  { id: "tag-7", slug: "svelte", name: "Svelte", createdAt: "2024-01-21T10:00:00Z" },
+    id: "tag-6",
-  { id: "tag-8", slug: "python", name: "Python", createdAt: "2024-01-22T10:00:00Z" },
+    slug: "database",
-  { id: "tag-9", slug: "machine-learning", name: "Machine Learning", createdAt: "2024-01-23T10:00:00Z" },
+    name: "Database",
-  { id: "tag-10", slug: "docker", name: "Docker", createdAt: "2024-01-24T10:00:00Z" },
+    createdAt: "2024-01-20T10:00:00Z",
-  { id: "tag-11", slug: "kubernetes", name: "Kubernetes", createdAt: "2024-01-25T10:00:00Z" },
+  },
-  { id: "tag-12", slug: "react", name: "React", createdAt: "2024-01-26T10:00:00Z" },
+  {
-  { id: "tag-13", slug: "nextjs", name: "Next.js", createdAt: "2024-01-27T10:00:00Z" },
+    id: "tag-7",
-  { id: "tag-14", slug: "tailwind", name: "Tailwind CSS", createdAt: "2024-01-28T10:00:00Z" },
+    slug: "svelte",
-  { id: "tag-15", slug: "graphql", name: "GraphQL", createdAt: "2024-01-29T10:00:00Z" },
+    name: "Svelte",
-  { id: "tag-16", slug: "postgres", name: "PostgreSQL", createdAt: "2024-01-30T10:00:00Z" },
+    createdAt: "2024-01-21T10:00:00Z",
-  { id: "tag-17", slug: "redis", name: "Redis", createdAt: "2024-01-31T10:00:00Z" },
+  },
+  {
+    id: "tag-8",
+    slug: "python",
+    name: "Python",
+    createdAt: "2024-01-22T10:00:00Z",
+  },
+  {
+    id: "tag-9",
+    slug: "machine-learning",
+    name: "Machine Learning",
+    createdAt: "2024-01-23T10:00:00Z",
+  },
+  {
+    id: "tag-10",
+    slug: "docker",
+    name: "Docker",
+    createdAt: "2024-01-24T10:00:00Z",
+  },
+  {
+    id: "tag-11",
+    slug: "kubernetes",
+    name: "Kubernetes",
+    createdAt: "2024-01-25T10:00:00Z",
+  },
+  {
+    id: "tag-12",
+    slug: "react",
+    name: "React",
+    createdAt: "2024-01-26T10:00:00Z",
+  },
+  {
+    id: "tag-13",
+    slug: "nextjs",
+    name: "Next.js",
+    createdAt: "2024-01-27T10:00:00Z",
+  },
+  {
+    id: "tag-14",
+    slug: "tailwind",
+    name: "Tailwind CSS",
+    createdAt: "2024-01-28T10:00:00Z",
+  },
+  {
+    id: "tag-15",
+    slug: "graphql",
+    name: "GraphQL",
+    createdAt: "2024-01-29T10:00:00Z",
+  },
+  {
+    id: "tag-16",
+    slug: "postgres",
+    name: "PostgreSQL",
+    createdAt: "2024-01-30T10:00:00Z",
+  },
+  {
+    id: "tag-17",
+    slug: "redis",
+    name: "Redis",
+    createdAt: "2024-01-31T10:00:00Z",
+  },
   { id: "tag-18", slug: "aws", name: "AWS", createdAt: "2024-02-01T10:00:00Z" },
-  { id: "tag-19", slug: "devops", name: "DevOps", createdAt: "2024-02-02T10:00:00Z" },
+  {
-  { id: "tag-20", slug: "security", name: "Security", createdAt: "2024-02-03T10:00:00Z" },
+    id: "tag-19",
+    slug: "devops",
+    name: "DevOps",
+    createdAt: "2024-02-02T10:00:00Z",
+  },
+  {
+    id: "tag-20",
+    slug: "security",
+    name: "Security",
+    createdAt: "2024-02-03T10:00:00Z",
+  },
 ];
 
-let MOCK_PROJECTS: AdminProject[] = [
+const MOCK_PROJECTS: AdminProject[] = [
   {
     id: "proj-1",
     slug: "portfolio-site",
@@ -167,7 +244,8 @@ let MOCK_PROJECTS: AdminProject[] = [
     id: "proj-9",
     slug: "security-scanner",
     title: "Security Scanner",
-    description: "Automated security vulnerability scanner for web applications",
+    description:
+      "Automated security vulnerability scanner for web applications",
     status: "active",
     githubRepo: "xevion/sec-scanner",
     demoUrl: null,
@@ -197,7 +275,8 @@ let MOCK_PROJECTS: AdminProject[] = [
     id: "proj-11",
     slug: "deployment-tools",
     title: "Deployment Automation Tools",
-    description: "CLI tools for automated deployments to multiple cloud providers",
+    description:
+      "CLI tools for automated deployments to multiple cloud providers",
     status: "active",
     githubRepo: "xevion/deploy-tools",
     demoUrl: null,
@@ -270,7 +349,7 @@ let MOCK_PROJECTS: AdminProject[] = [
   },
 ];
 
-let MOCK_EVENTS: AdminEvent[] = [
+const MOCK_EVENTS: AdminEvent[] = [
   {
     id: "evt-1",
     timestamp: "2025-01-06T10:30:00Z",
@@ -455,7 +534,9 @@ export async function getAdminProjects(): Promise<AdminProject[]> {
   return [...MOCK_PROJECTS].sort((a, b) => b.priority - a.priority);
 }
 
-export async function getAdminProject(id: string): Promise<AdminProject | null> {
+export async function getAdminProject(
+  id: string,
+): Promise<AdminProject | null> {
   // TODO: Replace with apiFetch(`/admin/api/projects/${id}`) when backend ready
   await new Promise((resolve) => setTimeout(resolve, 50));
   return MOCK_PROJECTS.find((p) => p.id === id) || null;
@@ -743,7 +824,9 @@ export async function getSettings(): Promise<SiteSettings> {
   return structuredClone(MOCK_SETTINGS);
 }
 
-export async function updateSettings(settings: SiteSettings): Promise<SiteSettings> {
+export async function updateSettings(
+  settings: SiteSettings,
+): Promise<SiteSettings> {
   // TODO: Replace with apiFetch('/admin/api/settings', { method: 'PUT', body: JSON.stringify(settings) })
   await new Promise((resolve) => setTimeout(resolve, 200));
 

web/src/lib/components/admin/Button.svelte

@@ -33,8 +33,7 @@
       "bg-transparent text-admin-text border border-zinc-700 hover:border-zinc-600 hover:bg-zinc-800/50 focus-visible:ring-zinc-500",
     danger:
       "bg-red-600 text-white hover:bg-red-500 focus-visible:ring-red-500 shadow-sm hover:shadow",
-    ghost:
+    ghost: "text-admin-text hover:bg-zinc-800/50 focus-visible:ring-zinc-500",
-      "text-admin-text hover:bg-zinc-800/50 focus-visible:ring-zinc-500",
   };
 
   const sizeStyles = {
@@ -47,7 +46,13 @@
 {#if href}
   <a
     {href}
-    class={cn(baseStyles, variantStyles[variant], sizeStyles[size], "cursor-pointer", className)}
+    class={cn(
+      baseStyles,
+      variantStyles[variant],
+      sizeStyles[size],
+      "cursor-pointer",
+      className,
+    )}
     aria-disabled={disabled}
   >
     {@render children?.()}

web/src/lib/components/admin/EventLog.svelte

@@ -34,28 +34,30 @@
 
 <OverlayScrollbarsComponent
   options={{
-    scrollbars: { autoHide: "leave", autoHideDelay: 800 }
+    scrollbars: { autoHide: "leave", autoHideDelay: 800 },
   }}
   defer
   style="max-height: {maxHeight}"
 >
   <div class="divide-y divide-zinc-800/50 bg-zinc-950">
-    {#each events as event}
+    {#each events as event (event.id)}
       {@const levelColors = {
         info: "text-cyan-500/60",
         warning: "text-amber-500/70",
-        error: "text-rose-500/70"
+        error: "text-rose-500/70",
       }}
       {@const levelLabels = {
         info: "INFO",
         warning: "WARN",
-        error: "ERR"
+        error: "ERR",
       }}
       <div class="hover:bg-zinc-900/50 transition-colors">
         <div class="px-4 py-1.5">
           <div class="flex items-center justify-between gap-4 text-xs">
             <div class="flex items-center gap-2.5 flex-1 min-w-0">
-              <span class={`${levelColors[event.level]} font-mono font-medium shrink-0 w-10`}>
+              <span
+                class={`${levelColors[event.level]} font-mono font-medium shrink-0 w-10`}
+              >
                 {levelLabels[event.level]}
               </span>
               <span class="text-zinc-300 truncate">
@@ -82,9 +84,15 @@
         </div>
         {#if showMetadata && expandedEventId === event.id && event.metadata}
           <div class="px-4 pb-2">
-            <div class="bg-zinc-900 border border-zinc-800 rounded p-3 text-[11px]">
+            <div
+              class="bg-zinc-900 border border-zinc-800 rounded p-3 text-[11px]"
+            >
               <p class="text-zinc-500 mb-2 font-medium">Metadata:</p>
-              <pre class="text-zinc-400 overflow-x-auto">{JSON.stringify(event.metadata, null, 2)}</pre>
+              <pre class="text-zinc-400 overflow-x-auto">{JSON.stringify(
+                  event.metadata,
+                  null,
+                  2,
+                )}</pre>
             </div>
           </div>
         {/if}

web/src/lib/components/admin/Input.svelte

@@ -3,7 +3,14 @@
 
   interface Props {
     label?: string;
-    type?: "text" | "number" | "email" | "password" | "url" | "textarea" | "select";
+    type?:
+      | "text"
+      | "number"
+      | "email"
+      | "password"
+      | "url"
+      | "textarea"
+      | "select";
     value: string | number;
     placeholder?: string;
     disabled?: boolean;
@@ -17,9 +24,9 @@
   }
 
   let {
-    label,
     type = "text",
-    value = $bindable(""),
+    value = $bindable(),
+    label,
     placeholder,
     disabled = false,
     required = false,
@@ -31,15 +38,21 @@
     oninput,
   }: Props = $props();
 
+  // Generate unique ID for accessibility
+  const inputId = `input-${Math.random().toString(36).substring(2, 11)}`;
+
   const inputStyles =
     "block w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-200 placeholder:text-zinc-500 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 disabled:cursor-not-allowed disabled:opacity-50 transition-colors";
 
-  const errorStyles = error
+  const errorStyles = $derived(
-    ? "border-red-500 focus:border-red-500 focus:ring-red-500"
+    error ? "border-red-500 focus:border-red-500 focus:ring-red-500" : "",
-    : "";
+  );
 
   function handleInput(e: Event) {
-    const target = e.target as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+    const target = e.target as
+      | HTMLInputElement
+      | HTMLTextAreaElement
+      | HTMLSelectElement;
     const newValue = type === "number" ? Number(target.value) : target.value;
     value = newValue;
     oninput?.(newValue);
@@ -48,7 +61,7 @@
 
 <div class={cn("space-y-1.5", className)}>
   {#if label}
-    <label class="block text-sm font-medium text-admin-text">
+    <label for={inputId} class="block text-sm font-medium text-admin-text">
       {label}
       {#if required}
         <span class="text-red-500">*</span>
@@ -58,6 +71,7 @@
 
   {#if type === "textarea"}
     <textarea
+      id={inputId}
       bind:value
       {placeholder}
       {disabled}
@@ -68,6 +82,7 @@
     ></textarea>
   {:else if type === "select"}
     <select
+      id={inputId}
       bind:value
       {disabled}
       {required}
@@ -77,12 +92,13 @@
       {#if placeholder}
         <option value="" disabled>{placeholder}</option>
       {/if}
-      {#each options as option}
+      {#each options as option (option.value)}
         <option value={option.value}>{option.label}</option>
       {/each}
     </select>
   {:else}
     <input
+      id={inputId}
       {type}
       bind:value
       {placeholder}

web/src/lib/components/admin/Modal.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { cn } from "$lib/utils";
   import Button from "./Button.svelte";
 
   interface Props {
@@ -47,11 +46,14 @@
   <div
     class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4"
     onclick={handleBackdropClick}
-    role="dialog"
+    onkeydown={(e) => e.key === "Escape" && handleCancel()}
-    aria-modal="true"
+    role="presentation"
+    tabindex="-1"
   >
     <div
       class="relative w-full max-w-md rounded-xl bg-zinc-900 border border-zinc-800 p-8 shadow-xl shadow-black/50"
+      role="dialog"
+      aria-modal="true"
     >
       {#if title}
         <h2 class="text-lg font-semibold text-zinc-50 mb-2">

web/src/lib/components/admin/ProjectForm.svelte

@@ -2,7 +2,12 @@
   import Button from "./Button.svelte";
   import Input from "./Input.svelte";
   import TagPicker from "./TagPicker.svelte";
-  import type { AdminProject, AdminTag, CreateProjectData, ProjectStatus } from "$lib/admin-types";
+  import type {
+    AdminProject,
+    AdminTag,
+    CreateProjectData,
+    ProjectStatus,
+  } from "$lib/admin-types";
 
   interface Props {
     project?: AdminProject | null;
@@ -19,18 +24,32 @@
   }: Props = $props();
 
   // Form state
-  let title = $state(project?.title ?? "");
+  let title = $state("");
-  let slug = $state(project?.slug ?? "");
+  let slug = $state("");
-  let description = $state(project?.description ?? "");
+  let description = $state("");
-  let status = $state<ProjectStatus>(project?.status ?? "active");
+  let status = $state<ProjectStatus>("active");
-  let githubRepo = $state(project?.githubRepo ?? "");
+  let githubRepo = $state("");
-  let demoUrl = $state(project?.demoUrl ?? "");
+  let demoUrl = $state("");
-  let icon = $state(project?.icon ?? "");
+  let icon = $state("");
-  let priority = $state(project?.priority ?? 0);
+  let priority = $state(0);
-  let selectedTagIds = $state<string[]>(project?.tags.map(t => t.id) ?? []);
+  let selectedTagIds = $state<string[]>([]);
+
+  // Initialize form from project prop
+  $effect(() => {
+    if (project) {
+      title = project.title;
+      slug = project.slug;
+      description = project.description;
+      status = project.status;
+      githubRepo = project.githubRepo ?? "";
+      demoUrl = project.demoUrl ?? "";
+      icon = project.icon ?? "";
+      priority = project.priority;
+      selectedTagIds = project.tags.map((t) => t.id);
+    }
+  });
 
   let submitting = $state(false);
-  let slugTouched = $state(false);
 
   const statusOptions = [
     { value: "active", label: "Active" },
@@ -45,11 +64,10 @@
       .toLowerCase()
       .replace(/[^\w\s-]/g, "")
       .replace(/[\s_-]+/g, "-")
-      .replace(/^-+|-+$/g, "")
+      .replace(/^-+|-+$/g, ""),
   );
 
   function handleSlugInput(value: string | number) {
-    slugTouched = true;
     slug = value as string;
   }
 
@@ -76,8 +94,6 @@
       submitting = false;
     }
   }
-
-
 </script>
 
 <form onsubmit={handleSubmit} class="space-y-6">
@@ -170,15 +186,8 @@
 
   <!-- Media Upload Placeholder -->
   <div class="space-y-1.5">
-    <label class="block text-sm font-medium text-admin-text">
+    <div class="block text-sm font-medium text-admin-text">Media</div>
-      Media
+    <Button type="button" variant="secondary" disabled class="w-full">
-    </label>
-    <Button
-      type="button"
-      variant="secondary"
-      disabled
-      class="w-full"
-    >
       <i class="fa-solid fa-upload mr-2"></i>
       Upload Images/Videos (Coming Soon)
     </Button>
@@ -189,17 +198,8 @@
 
   <!-- Actions -->
   <div class="flex justify-end gap-3 pt-4 border-t border-admin-border">
-    <Button
+    <Button variant="secondary" href="/admin/projects">Cancel</Button>
-      variant="secondary"
+    <Button type="submit" variant="primary" disabled={submitting || !title}>
-      href="/admin/projects"
-    >
-      Cancel
-    </Button>
-    <Button
-      type="submit"
-      variant="primary"
-      disabled={submitting || !title}
-    >
       {submitting ? "Saving..." : submitLabel}
     </Button>
   </div>

web/src/lib/components/admin/Sidebar.svelte

@@ -24,17 +24,22 @@
   interface NavItem {
     href: string;
     label: string;
-    icon: any;
+    icon: import("svelte").Component;
     badge?: number;
   }
 
-  const navItems: NavItem[] = [
+  const navItems = $derived<NavItem[]>([
     { href: "/admin", label: "Dashboard", icon: IconLayoutDashboard },
-    { href: "/admin/projects", label: "Projects", icon: IconFolder, badge: projectCount },
+    {
+      href: "/admin/projects",
+      label: "Projects",
+      icon: IconFolder,
+      badge: projectCount,
+    },
     { href: "/admin/tags", label: "Tags", icon: IconTags, badge: tagCount },
     { href: "/admin/events", label: "Events", icon: IconList },
     { href: "/admin/settings", label: "Settings", icon: IconSettings },
-  ];
+  ]);
 
   const pathname = $derived($page.url.pathname as string);
 
@@ -67,7 +72,7 @@
 <aside
   class={cn(
     "fixed left-0 top-0 z-40 h-screen w-64 border-r border-zinc-800 bg-admin-bg transition-transform lg:translate-x-0",
-    mobileMenuOpen ? "translate-x-0" : "-translate-x-full"
+    mobileMenuOpen ? "translate-x-0" : "-translate-x-full",
   )}
 >
   <div class="flex h-full flex-col">
@@ -81,14 +86,14 @@
 
     <!-- Navigation -->
     <nav class="flex-1 space-y-0.5 p-3">
-      {#each navItems as item}
+      {#each navItems as item (item.href)}
         <a
           href={item.href}
           class={cn(
             "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-all relative",
             isActive(item.href)
               ? "bg-zinc-800/50 text-zinc-50 before:absolute before:left-0 before:top-1 before:bottom-1 before:w-0.5 before:bg-indigo-500 before:rounded-r"
-              : "text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800/30"
+              : "text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800/30",
           )}
         >
           <item.icon class="w-4 h-4 flex-shrink-0" />
@@ -127,5 +132,8 @@
   <div
     class="fixed inset-0 z-30 bg-black/50 lg:hidden"
     onclick={() => (mobileMenuOpen = false)}
+    onkeydown={(e) => e.key === "Escape" && (mobileMenuOpen = false)}
+    role="presentation"
+    tabindex="-1"
   ></div>
 {/if}

web/src/lib/components/admin/Table.svelte

@@ -9,7 +9,9 @@
   let { class: className, children }: Props = $props();
 </script>
 
-<div class={cn("overflow-x-auto rounded-lg border border-admin-border", className)}>
+<div
+  class={cn("overflow-x-auto rounded-lg border border-admin-border", className)}
+>
   <table class="w-full text-sm">
     {@render children?.()}
   </table>

web/src/lib/components/admin/TagPicker.svelte

@@ -23,16 +23,19 @@
   let dropdownOpen = $state(false);
   let inputRef: HTMLInputElement | undefined = $state();
 
+  // Generate unique ID for accessibility
+  const inputId = `tagpicker-${Math.random().toString(36).substring(2, 11)}`;
+
   const selectedTags = $derived(
-    availableTags.filter((tag) => selectedTagIds.includes(tag.id))
+    availableTags.filter((tag) => selectedTagIds.includes(tag.id)),
   );
 
   const filteredTags = $derived(
     availableTags.filter(
       (tag) =>
         !selectedTagIds.includes(tag.id) &&
-        tag.name.toLowerCase().includes(searchTerm.toLowerCase())
+        tag.name.toLowerCase().includes(searchTerm.toLowerCase()),
-    )
+    ),
   );
 
   function addTag(tagId: string) {
@@ -59,7 +62,7 @@
 
 <div class={cn("space-y-1.5", className)}>
   {#if label}
-    <label class="block text-sm font-medium text-admin-text">
+    <label for={inputId} class="block text-sm font-medium text-admin-text">
       {label}
     </label>
   {/if}
@@ -70,7 +73,7 @@
       class="min-h-[42px] w-full rounded-md border border-admin-border bg-admin-panel px-3 py-2"
     >
       <div class="flex flex-wrap gap-2">
-        {#each selectedTags as tag}
+        {#each selectedTags as tag (tag.id)}
           <span
             class="inline-flex items-center gap-1 rounded-full bg-blue-500/10 px-2.5 py-0.5 text-xs font-medium text-blue-400 ring-1 ring-inset ring-blue-500/20"
           >
@@ -88,6 +91,7 @@
 
         <!-- Search input -->
         <input
+          id={inputId}
           bind:this={inputRef}
           type="text"
           bind:value={searchTerm}
@@ -104,7 +108,7 @@
       <div
         class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md border border-admin-border bg-admin-panel py-1 shadow-lg"
       >
-        {#each filteredTags as tag}
+        {#each filteredTags as tag (tag.id)}
           <button
             type="button"
             class="w-full px-3 py-2 text-left text-sm text-admin-text hover:bg-admin-hover transition-colors"

web/src/routes/+error.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { resolve } from "$app/paths";
   import AppWrapper from "$lib/components/AppWrapper.svelte";
   import { page } from "$app/stores";
 
@@ -27,7 +28,7 @@
       <p class="mb-8 text-2xl text-zinc-400">{message}</p>
       {#if showHomeLink}
         <a
-          href="/"
+          href={resolve("/")}
           class="inline-block rounded-sm bg-zinc-900 px-4 py-2 text-zinc-100 transition-colors hover:bg-zinc-800"
         >
           Return home

web/src/routes/admin/+layout.server.ts

@@ -19,10 +19,7 @@ export const load: LayoutServerLoad = async ({ request, url }) => {
     }
 
     // For other paths, include next parameter
-    throw redirect(
+    throw redirect(302, `/admin/login?next=${encodeURIComponent(targetPath)}`);
-      302,
-      `/admin/login?next=${encodeURIComponent(targetPath)}`
-    );
   }
 
   return {

web/src/routes/admin/+layout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
+  import { resolve } from "$app/paths";
   import { page } from "$app/stores";
   import Sidebar from "$lib/components/admin/Sidebar.svelte";
   import AppWrapper from "$lib/components/AppWrapper.svelte";
@@ -10,7 +11,6 @@
   let { children, data } = $props();
 
   let stats = $state<AdminStats | null>(null);
-  let loading = $state(true);
 
   const pathname = $derived($page.url.pathname as string);
   const isLoginPage = $derived(pathname === "/admin/login");
@@ -23,14 +23,16 @@
       stats = await getAdminStats();
     } catch (error) {
       console.error("Failed to load stats:", error);
-    } finally {
-      loading = false;
     }
   }
 
   // Sync authStore with server session on mount
   $effect(() => {
-    if (data?.session?.authenticated && data.session.username && !authStore.isAuthenticated) {
+    if (
+      data?.session?.authenticated &&
+      data.session.username &&
+      !authStore.isAuthenticated
+    ) {
       authStore.setSession(data.session.username);
     }
   });
@@ -44,7 +46,7 @@
 
   function handleLogout() {
     authStore.logout();
-    goto("/admin/login");
+    goto(resolve("/admin/login"));
   }
 </script>
 

web/src/routes/admin/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { resolve } from "$app/paths";
   import Button from "$lib/components/admin/Button.svelte";
   import EventLog from "$lib/components/admin/EventLog.svelte";
   import { getAdminEvents } from "$lib/api";
@@ -51,20 +52,20 @@
       <Button variant="secondary" href="/admin/projects">
         View All Projects
       </Button>
-      <Button variant="secondary" href="/admin/tags">
+      <Button variant="secondary" href="/admin/tags">Manage Tags</Button>
-        Manage Tags
+      <Button variant="secondary" href="/admin/events">View Events</Button>
-      </Button>
-      <Button variant="secondary" href="/admin/events">
-        View Events
-      </Button>
     </div>
 
     <!-- Recent Events -->
-    <div class="rounded-xl border border-zinc-800 bg-zinc-900/50 overflow-hidden shadow-sm shadow-black/20">
+    <div
-      <div class="flex items-center justify-between px-6 py-3.5 bg-zinc-800/30 border-b border-zinc-800">
+      class="rounded-xl border border-zinc-800 bg-zinc-900/50 overflow-hidden shadow-sm shadow-black/20"
+    >
+      <div
+        class="flex items-center justify-between px-6 py-3.5 bg-zinc-800/30 border-b border-zinc-800"
+      >
         <h2 class="text-sm font-medium text-zinc-300">Recent Events</h2>
         <a
-          href="/admin/events"
+          href={resolve("/admin/events")}
           class="text-sm text-indigo-400 hover:text-indigo-300 transition-colors"
         >
           View all →
@@ -72,9 +73,7 @@
       </div>
 
       {#if recentEvents.length === 0}
-        <p class="text-sm text-zinc-500 text-center py-8">
+        <p class="text-sm text-zinc-500 text-center py-8">No events yet</p>
-          No events yet
-        </p>
       {:else}
         <EventLog events={recentEvents} maxHeight="400px" />
       {/if}

web/src/routes/admin/events/+page.svelte

@@ -31,14 +31,10 @@
     }
   }
 
+  // Load events on mount and when filters change
   $effect(() => {
-    loadEvents();
+    void filterLevel;
-  });
+    void filterTarget;
-
-  // Reload when filters change
-  $effect(() => {
-    filterLevel;
-    filterTarget;
     loadEvents();
   });
 </script>
@@ -57,7 +53,9 @@
   </div>
 
   <!-- Filters -->
-  <div class="rounded-xl border border-zinc-800 bg-zinc-900 p-6 shadow-sm shadow-black/20">
+  <div
+    class="rounded-xl border border-zinc-800 bg-zinc-900 p-6 shadow-sm shadow-black/20"
+  >
     <h3 class="text-sm font-medium text-zinc-400 mb-4">Filters</h3>
     <div class="grid gap-4 md:grid-cols-2">
       <Input
@@ -77,15 +75,15 @@
 
   <!-- Events Log -->
   {#if loading}
-    <div class="text-center py-12 text-zinc-500">
+    <div class="text-center py-12 text-zinc-500">Loading events...</div>
-      Loading events...
-    </div>
   {:else if events.length === 0}
     <div class="text-center py-12">
       <p class="text-zinc-500">No events found</p>
     </div>
   {:else}
-    <div class="rounded-xl border border-zinc-800 bg-zinc-900/50 overflow-hidden shadow-sm shadow-black/20">
+    <div
+      class="rounded-xl border border-zinc-800 bg-zinc-900/50 overflow-hidden shadow-sm shadow-black/20"
+    >
       <div class="px-6 py-3.5 bg-zinc-800/30 border-b border-zinc-800">
         <h2 class="text-sm font-medium text-zinc-300">
           Event Log
@@ -94,7 +92,7 @@
           </span>
         </h2>
       </div>
-      <EventLog events={events} maxHeight="600px" showMetadata={true} />
+      <EventLog {events} maxHeight="600px" showMetadata={true} />
     </div>
   {/if}
 </div>

web/src/routes/admin/login/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
+  import { resolve } from "$app/paths";
   import { page } from "$app/stores";
   import Button from "$lib/components/admin/Button.svelte";
   import Input from "$lib/components/admin/Input.svelte";
@@ -42,9 +43,7 @@
   <div class="flex min-h-screen items-center justify-center px-4">
     <div class="w-full max-w-md space-y-4">
       <!-- Login Form -->
-      <div
+      <div class="rounded-lg bg-admin-panel p-8 shadow-2xl shadow-zinc-500/20">
-        class="rounded-lg bg-admin-panel p-8 shadow-2xl shadow-zinc-500/20"
-      >
         <form onsubmit={handleSubmit} class="space-y-6">
           <Input
             label="Username"
@@ -86,7 +85,7 @@
       <!-- Back to site link -->
       <div class="text-center">
         <a
-          href="/"
+          href={resolve("/")}
           class="text-sm text-admin-text-muted hover:text-admin-text transition-colors"
         >
           ← Back to site

web/src/routes/admin/projects/+page.svelte

@@ -84,9 +84,7 @@
   <div class="flex items-center justify-between">
     <div>
       <h1 class="text-xl font-semibold text-zinc-50">Projects</h1>
-      <p class="mt-1 text-sm text-zinc-500">
+      <p class="mt-1 text-sm text-zinc-500">Manage your project portfolio</p>
-        Manage your project portfolio
-      </p>
     </div>
     <Button variant="primary" href="/admin/projects/new">
       <IconPlus class="w-4 h-4 mr-2" />
@@ -96,13 +94,13 @@
 
   <!-- Projects Table -->
   {#if loading}
-    <div class="text-center py-12 text-zinc-500">
+    <div class="text-center py-12 text-zinc-500">Loading projects...</div>
-      Loading projects...
-    </div>
   {:else if projects.length === 0}
     <div class="text-center py-12">
       <p class="text-zinc-500 mb-4">No projects yet</p>
-      <Button variant="primary" href="/admin/projects/new">Create your first project</Button>
+      <Button variant="primary" href="/admin/projects/new"
+        >Create your first project</Button
+      >
     </div>
   {:else}
     <Table>
@@ -129,7 +127,7 @@
         </tr>
       </thead>
       <tbody class="divide-y divide-zinc-800/50">
-        {#each projects as project}
+        {#each projects as project (project.id)}
           <tr class="hover:bg-zinc-800/30 transition-colors">
             <td class="px-4 py-3">
               <div class="flex items-center gap-3">
@@ -150,7 +148,7 @@
             </td>
             <td class="px-4 py-3">
               <div class="flex flex-wrap gap-1">
-                {#each project.tags.slice(0, 3) as tag}
+                {#each project.tags.slice(0, 3) as tag (tag.id)}
                   <Badge variant="default">{tag.name}</Badge>
                 {/each}
                 {#if project.tags.length > 3}

web/src/routes/admin/projects/[id]/+page.svelte

@@ -1,9 +1,16 @@
 <script lang="ts">
   import { page } from "$app/stores";
   import { goto } from "$app/navigation";
+  import { resolve } from "$app/paths";
   import ProjectForm from "$lib/components/admin/ProjectForm.svelte";
   import { getAdminProject, getAdminTags, updateAdminProject } from "$lib/api";
-  import type { AdminProject, AdminTag, AdminTagWithCount, CreateProjectData, UpdateProjectData } from "$lib/admin-types";
+  import type {
+    AdminProject,
+    AdminTag,
+    AdminTagWithCount,
+    CreateProjectData,
+    UpdateProjectData,
+  } from "$lib/admin-types";
 
   const projectId = $derived(($page.params as { id: string }).id);
 
@@ -19,16 +26,18 @@
       ]);
 
       project = projectData;
-      tags = tagsWithCounts.map((t: AdminTagWithCount): AdminTag => ({ 
+      tags = tagsWithCounts.map(
+        (t: AdminTagWithCount): AdminTag => ({
           id: t.id,
           slug: t.slug,
           name: t.name,
-        createdAt: t.createdAt 
+          createdAt: t.createdAt,
-      }));
+        }),
+      );
     } catch (error) {
       console.error("Failed to load data:", error);
       alert("Failed to load project");
-      goto("/admin/projects");
+      goto(resolve("/admin/projects"));
     } finally {
       loading = false;
     }
@@ -44,7 +53,7 @@
       id: projectId,
     };
     await updateAdminProject(updateData);
-    goto("/admin/projects");
+    goto(resolve("/admin/projects"));
   }
 </script>
 
@@ -63,13 +72,14 @@
 
   <!-- Form -->
   {#if loading}
-    <div class="text-center py-12 text-admin-text-muted">
+    <div class="text-center py-12 text-admin-text-muted">Loading...</div>
-      Loading...
-    </div>
   {:else if !project}
     <div class="text-center py-12">
       <p class="text-admin-text-muted mb-4">Project not found</p>
-      <a href="/admin/projects" class="text-blue-400 hover:text-blue-300">
+      <a
+        href={resolve("/admin/projects")}
+        class="text-blue-400 hover:text-blue-300"
+      >
         ← Back to projects
       </a>
     </div>

web/src/routes/admin/projects/new/+page.svelte

@@ -1,8 +1,13 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
+  import { resolve } from "$app/paths";
   import ProjectForm from "$lib/components/admin/ProjectForm.svelte";
   import { getAdminTags, createAdminProject } from "$lib/api";
-  import type { AdminTag, AdminTagWithCount, CreateProjectData } from "$lib/admin-types";
+  import type {
+    AdminTag,
+    AdminTagWithCount,
+    CreateProjectData,
+  } from "$lib/admin-types";
 
   let tags = $state<AdminTag[]>([]);
   let loading = $state(true);
@@ -10,12 +15,14 @@
   async function loadTags() {
     try {
       const tagsWithCounts = await getAdminTags();
-      tags = tagsWithCounts.map((t: AdminTagWithCount): AdminTag => ({ 
+      tags = tagsWithCounts.map(
+        (t: AdminTagWithCount): AdminTag => ({
           id: t.id,
           slug: t.slug,
           name: t.name,
-        createdAt: t.createdAt 
+          createdAt: t.createdAt,
-      }));
+        }),
+      );
     } catch (error) {
       console.error("Failed to load tags:", error);
     } finally {
@@ -29,7 +36,7 @@
 
   async function handleSubmit(data: CreateProjectData) {
     await createAdminProject(data);
-    goto("/admin/projects");
+    goto(resolve("/admin/projects"));
   }
 </script>
 
@@ -48,9 +55,7 @@
 
   <!-- Form -->
   {#if loading}
-    <div class="text-center py-12 text-admin-text-muted">
+    <div class="text-center py-12 text-admin-text-muted">Loading...</div>
-      Loading...
-    </div>
   {:else}
     <div class="rounded-lg border border-admin-border bg-admin-panel p-6">
       <ProjectForm

web/src/routes/admin/settings/[[tab]]/+page.svelte

@@ -22,7 +22,9 @@
   let activeTab = $derived.by(() => {
     const params = $page.params as { tab?: string };
     const tab = params.tab as Tab | undefined;
-    return tab && ["identity", "social", "admin"].includes(tab) ? tab : "identity";
+    return tab && ["identity", "social", "admin"].includes(tab)
+      ? tab
+      : "identity";
   });
 
   // Form state - will be populated when settings load
@@ -98,6 +100,7 @@
   }
 
   function navigateToTab(tab: Tab) {
+    // eslint-disable-next-line svelte/no-navigation-without-resolve
     goto(`/admin/settings/${tab}`, { replaceState: true });
   }
 </script>
@@ -127,7 +130,7 @@
             "pb-3 px-1 text-sm font-medium border-b-2 transition-colors",
             activeTab === "identity"
               ? "border-indigo-500 text-zinc-50"
-              : "border-transparent text-zinc-400 hover:text-zinc-300 hover:border-zinc-700"
+              : "border-transparent text-zinc-400 hover:text-zinc-300 hover:border-zinc-700",
           )}
           onclick={() => navigateToTab("identity")}
         >
@@ -139,7 +142,7 @@
             "pb-3 px-1 text-sm font-medium border-b-2 transition-colors",
             activeTab === "social"
               ? "border-indigo-500 text-zinc-50"
-              : "border-transparent text-zinc-400 hover:text-zinc-300 hover:border-zinc-700"
+              : "border-transparent text-zinc-400 hover:text-zinc-300 hover:border-zinc-700",
           )}
           onclick={() => navigateToTab("social")}
         >
@@ -151,7 +154,7 @@
             "pb-3 px-1 text-sm font-medium border-b-2 transition-colors",
             activeTab === "admin"
               ? "border-indigo-500 text-zinc-50"
-              : "border-transparent text-zinc-400 hover:text-zinc-300 hover:border-zinc-700"
+              : "border-transparent text-zinc-400 hover:text-zinc-300 hover:border-zinc-700",
           )}
           onclick={() => navigateToTab("admin")}
         >
@@ -161,10 +164,14 @@
     </div>
 
     <!-- Tab Content -->
-    <div class="rounded-xl border border-zinc-800 bg-zinc-900 p-6 shadow-sm shadow-black/20">
+    <div
+      class="rounded-xl border border-zinc-800 bg-zinc-900 p-6 shadow-sm shadow-black/20"
+    >
       {#if activeTab === "identity"}
         <div class="space-y-4">
-          <h3 class="text-base font-medium text-zinc-200 mb-4">Site Identity</h3>
+          <h3 class="text-base font-medium text-zinc-200 mb-4">
+            Site Identity
+          </h3>
           <Input
             label="Display Name"
             type="text"
@@ -204,7 +211,7 @@
           </p>
 
           <div class="space-y-3">
-            {#each formData.socialLinks as link}
+            {#each formData.socialLinks as link (link.id)}
               {@const Icon = getSocialIcon(link.platform)}
               <div
                 class="rounded-lg border border-zinc-800 bg-zinc-900/50 p-4 hover:border-zinc-700 transition-colors"
@@ -215,7 +222,9 @@
                   </div>
                   <div class="flex-1 space-y-3">
                     <div class="flex items-center justify-between">
-                      <span class="text-sm font-medium text-zinc-200">{link.label}</span>
+                      <span class="text-sm font-medium text-zinc-200"
+                        >{link.label}</span
+                      >
                       <label class="flex items-center gap-2 cursor-pointer">
                         <span class="text-xs text-zinc-500">Visible</span>
                         <input
@@ -238,7 +247,9 @@
         </div>
       {:else if activeTab === "admin"}
         <div class="space-y-4">
-          <h3 class="text-base font-medium text-zinc-200 mb-4">Admin Preferences</h3>
+          <h3 class="text-base font-medium text-zinc-200 mb-4">
+            Admin Preferences
+          </h3>
           <Input
             label="Session Timeout"
             type="number"

web/src/routes/admin/tags/+page.svelte

@@ -3,8 +3,17 @@
   import Input from "$lib/components/admin/Input.svelte";
   import Table from "$lib/components/admin/Table.svelte";
   import Modal from "$lib/components/admin/Modal.svelte";
-  import { getAdminTags, createAdminTag, updateAdminTag, deleteAdminTag } from "$lib/api";
+  import {
-  import type { AdminTagWithCount, CreateTagData, UpdateTagData } from "$lib/admin-types";
+    getAdminTags,
+    createAdminTag,
+    updateAdminTag,
+    deleteAdminTag,
+  } from "$lib/api";
+  import type {
+    AdminTagWithCount,
+    CreateTagData,
+    UpdateTagData,
+  } from "$lib/admin-types";
   import IconPlus from "~icons/lucide/plus";
   import IconX from "~icons/lucide/x";
 
@@ -148,7 +157,10 @@
         Manage project tags and categories
       </p>
     </div>
-    <Button variant="primary" onclick={() => (showCreateForm = !showCreateForm)}>
+    <Button
+      variant="primary"
+      onclick={() => (showCreateForm = !showCreateForm)}
+    >
       {#if showCreateForm}
         <IconX class="w-4 h-4 mr-2" />
       {:else}
@@ -160,7 +172,9 @@
 
   <!-- Create Form -->
   {#if showCreateForm}
-    <div class="rounded-xl border border-zinc-800 bg-zinc-900 p-6 shadow-sm shadow-black/20">
+    <div
+      class="rounded-xl border border-zinc-800 bg-zinc-900 p-6 shadow-sm shadow-black/20"
+    >
       <h3 class="text-base font-medium text-zinc-200 mb-4">Create New Tag</h3>
       <div class="grid gap-4 md:grid-cols-2">
         <Input
@@ -194,9 +208,7 @@
 
   <!-- Tags Table -->
   {#if loading}
-    <div class="text-center py-12 text-zinc-500">
+    <div class="text-center py-12 text-zinc-500">Loading tags...</div>
-      Loading tags...
-    </div>
   {:else if tags.length === 0}
     <div class="text-center py-12">
       <p class="text-zinc-500 mb-4">No tags yet</p>
@@ -223,7 +235,7 @@
         </tr>
       </thead>
       <tbody class="divide-y divide-zinc-800/50">
-        {#each tags as tag}
+        {#each tags as tag (tag.id)}
           <tr class="hover:bg-zinc-800/30 transition-colors">
             {#if editingId === tag.id}
               <!-- Edit mode -->
@@ -315,7 +327,10 @@
     <div class="rounded-md bg-zinc-800/50 border border-zinc-700 p-3">
       <p class="font-medium text-zinc-200">{deleteTarget.name}</p>
       <p class="text-sm text-zinc-500">
-        Used in {deleteTarget.projectCount} project{deleteTarget.projectCount === 1 ? "" : "s"}
+        Used in {deleteTarget.projectCount} project{deleteTarget.projectCount ===
+        1
+          ? ""
+          : "s"}
       </p>
     </div>
   {/if}

web/src/routes/errors/[code]/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { resolve } from "$app/paths";
   import AppWrapper from "$components/AppWrapper.svelte";
-  import Dots from "$lib/components/Dots.svelte";
 
   let { data } = $props();
 

web/src/routes/internal/ogp/+page.svelte

@@ -2,6 +2,7 @@
   import { onMount } from "svelte";
   import { browser } from "$app/environment";
   import type { PageData } from "./$types";
+  import { resolve } from "$app/paths";
 
   let { data }: { data: PageData } = $props();
 
@@ -62,7 +63,7 @@
   <div class="examples">
     <h2>Example URLs:</h2>
     <ul>
-      <li><a href="/internal/ogp?type=index">Index page</a></li>
+      <li><a href={resolve("/internal/ogp")}>Index page</a></li>
       <li><a href="/internal/ogp?type=projects">Projects page</a></li>
       <li>
         <a href="/internal/ogp?type=project&id=example-id"

web/vite-plugin-json-logger.ts

@@ -25,6 +25,7 @@ function railwayFormatter(record: LogRecord): string {
 }
 
 function stripAnsi(str: string): string {
+  // eslint-disable-next-line no-control-regex
   return str.replace(/\u001b\[[0-9;]*m/g, "").trim();
 }
 
@@ -115,7 +116,6 @@ export function jsonLogger(): Plugin {
       server = s;
       const logger = getLogger(["vite"]);
 
-      const originalPrintUrls = server.printUrls;
       server.printUrls = () => {
         const urls = server.resolvedUrls;
         if (urls) {