Add logo, favicon, and loading spinner

web/app/activity/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
+import Spinner from "../components/Spinner";
 
 interface Transaction {
   id: string;
@@ -139,8 +140,8 @@ export default function ActivityPage() {
       {/* Transaction list */}
       <div className="flex-1 overflow-y-auto">
         {loading ? (
-          <div className="flex items-center justify-center py-12 text-slate-500">
-            Loading...
+          <div className="flex items-center justify-center py-12 text-accent">
+            <Spinner size={32} />
           </div>
         ) : filtered.length === 0 ? (
           <div className="flex items-center justify-center py-12 text-slate-500 text-sm">

web/app/components/Sidebar.tsx

@@ -156,13 +156,32 @@ export default function Sidebar() {
     <nav
       className={`${width} bg-slate-800 border-r border-slate-700 flex flex-col shrink-0 transition-[width] duration-150 group/sidebar`}
     >
-      {/* Header row: brand space + collapse chevron (appears on hover) */}
-      <div className="h-10 flex items-center justify-end px-2 border-b border-slate-700/50 shrink-0">
+      {/* Header row: logo + collapse chevron */}
+      <div className="h-10 flex items-center px-2 border-b border-slate-700/50 shrink-0 gap-2">
+        <Link href="/" className="flex items-center gap-2 min-w-0 flex-1">
+          <svg
+            viewBox="0 0 32 32"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className="w-5 h-5 shrink-0 text-accent"
+          >
+            <path
+              d="M16 2C10.477 2 6 6.477 6 12c0 5.523 10 18 10 18s10-12.477 10-18c0-5.523-4.477-10-10-10zm0 14a4 4 0 110-8 4 4 0 010 8z"
+              fill="currentColor"
+              fillRule="evenodd"
+            />
+          </svg>
+          {expanded && (
+            <span className="text-sm font-bold text-slate-200 truncate">
+              WhereTF
+            </span>
+          )}
+        </Link>
         <button
           onClick={() => setExpanded((v) => !v)}
           title={`${expanded ? "Collapse" : "Expand"} sidebar (Ctrl/Cmd + \\)`}
           aria-label={expanded ? "Collapse sidebar" : "Expand sidebar"}
-          className="w-6 h-6 rounded flex items-center justify-center text-slate-500 hover:text-slate-200 hover:bg-slate-700/70 transition-all opacity-0 group-hover/sidebar:opacity-100 focus:opacity-100"
+          className="w-6 h-6 rounded flex items-center justify-center text-slate-500 hover:text-slate-200 hover:bg-slate-700/70 transition-all opacity-0 group-hover/sidebar:opacity-100 focus:opacity-100 shrink-0"
         >
           <svg
             viewBox="0 0 24 24"

web/app/components/Spinner.tsx

@@ -0,0 +1,26 @@
+export default function Spinner({
+  size = 24,
+  className = "",
+}: {
+  size?: number;
+  className?: string;
+}) {
+  return (
+    <svg
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      className={`animate-pulse-pin ${className}`}
+      role="status"
+      aria-label="Loading"
+    >
+      <path
+        d="M16 2C10.477 2 6 6.477 6 12c0 5.523 10 18 10 18s10-12.477 10-18c0-5.523-4.477-10-10-10zm0 14a4 4 0 110-8 4 4 0 010 8z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+}

web/app/globals.css

@@ -2,4 +2,16 @@
 
 @theme {
   --color-accent: #ff6600;
+  --animate-pulse-pin: pulse-pin 1.4s ease-in-out infinite;
+}
+
+@keyframes pulse-pin {
+  0%, 100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  50% {
+    opacity: 0.5;
+    transform: translateY(-12%);
+  }
 }

web/app/inserts/page.tsx

@@ -3,6 +3,7 @@
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Suspense, useCallback, useEffect, useMemo, useState } from "react";
+import Spinner from "../components/Spinner";
 import { CellGrid, type CellRow } from "@/app/_components/CellGrid";
 
 interface Insert {
@@ -170,8 +171,8 @@ function InsertsPageInner() {
 
         <div className="flex-1 overflow-y-auto">
           {loading ? (
-            <div className="p-6 text-center text-slate-500 text-sm">
-              Loading…
+            <div className="flex items-center justify-center p-6 text-accent">
+              <Spinner size={24} />
             </div>
           ) : inserts.length === 0 ? (
             <div className="p-6 text-center text-slate-500 text-sm">

web/app/items/ItemGrid.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useMemo } from "react";
+import Spinner from "../components/Spinner";
 
 interface RichItem {
   id: string;
@@ -68,7 +69,7 @@
   sortBy,
   sortDirection,
   onSort,
   onRefresh,
   onCreateItem,
 }: {
   items: RichItem[];
@@ -188,9 +189,9 @@
               <tr>
                 <td
                   colSpan={columns.length}
-                  className="px-3 py-8 text-center text-slate-500"
+                  className="px-3 py-8 text-center text-accent"
                 >
-                  Loading...
+                  <Spinner size={24} />
                 </td>
               </tr>
             ) : items.length === 0 ? (

web/app/items/page.tsx

@@ -3,6 +3,7 @@
 import { useSearchParams, useRouter } from "next/navigation";
 import { Suspense, useCallback, useEffect, useState } from "react";
 import FilterPanel from "./FilterPanel";
+import Spinner from "../components/Spinner";
 import ItemGrid from "./ItemGrid";
 import ItemDetail from "./ItemDetail";
 import CreateItemModal from "./CreateItemModal";
@@ -292,8 +293,8 @@ export default function ItemsPage() {
   return (
     <Suspense
       fallback={
-        <div className="flex-1 flex items-center justify-center text-slate-500">
-          Loading...
+        <div className="flex-1 flex items-center justify-center text-accent">
+          <Spinner size={32} />
         </div>
       }
     >

web/app/layout.tsx

@@ -5,6 +5,7 @@ import Sidebar from "./components/Sidebar";
 export const metadata: Metadata = {
   title: "WhereTF",
   description: "R&D workshop item tracker",
+  icons: { icon: "/icon.svg" },
 };
 
 export default function RootLayout({

web/app/modules/[id]/page.tsx

@@ -3,6 +3,7 @@
 import { useParams, useRouter } from "next/navigation";
 import Link from "next/link";
 import { useCallback, useEffect, useState, useMemo } from "react";
+import Spinner from "../../components/Spinner";
 import { CellGrid } from "@/app/_components/CellGrid";
 
 // --- Types ---
@@ -898,8 +899,8 @@ export default function ModuleDetailPage() {
 
   if (loading) {
     return (
-      <div className="flex-1 flex items-center justify-center text-slate-500">
-        Loading...
+      <div className="flex-1 flex items-center justify-center text-accent">
+        <Spinner size={32} />
       </div>
     );
   }

web/app/modules/page.tsx

@@ -3,6 +3,7 @@
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
+import Spinner from "../components/Spinner";
 
 interface Module {
   id: string;
@@ -121,8 +122,8 @@ export default function ModulesPage() {
 
   if (loading) {
     return (
-      <div className="flex-1 flex items-center justify-center text-slate-500">
-        Loading…
+      <div className="flex-1 flex items-center justify-center text-accent">
+        <Spinner size={32} />
       </div>
     );
   }

web/app/taxonomy/page.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import CreateFromDesignationDialog from "@/app/items/CreateFromDesignationDialog";
 import GenerateSetDialog from "@/app/items/GenerateSetDialog";
+import Spinner from "../components/Spinner";
 import BulkAspectImport from "./BulkAspectImport";
 import { parseSiValue } from "@/lib/siPrefix";
 
@@ -698,7 +699,7 @@ export function AspectsTab() {
         </div>
         <div className="flex-1 overflow-y-auto">
           {loading ? (
-            <div className="p-4 text-center text-slate-500 text-sm">Loading...</div>
+            <div className="flex items-center justify-center p-4 text-accent"><Spinner size={20} /></div>
           ) : aspects.length === 0 ? (
             <div className="p-4 text-center text-slate-500 text-sm">
               No aspects defined yet.
@@ -1045,8 +1046,8 @@ function AspectParameterMatrix({
 
   if (loading) {
     return (
-      <div className="flex-1 flex items-center justify-center text-slate-500 text-sm">
-        Loading matrix…
+      <div className="flex-1 flex items-center justify-center text-accent">
+        <Spinner size={32} />
       </div>
     );
   }
@@ -1686,9 +1687,7 @@ export function ParametersTab() {
         </div>
         <div className="flex-1 overflow-y-auto">
           {loading ? (
-            <div className="p-4 text-center text-slate-500 text-sm">
-              Loading…
-            </div>
+            <div className="flex items-center justify-center p-4 text-accent"><Spinner size={20} /></div>
           ) : filteredParamDefs.length === 0 ? (
             <div className="p-4 text-center text-slate-500 text-sm">
               {paramDefs.length === 0 ? "No parameters yet." : "No matches."}
@@ -2525,9 +2524,7 @@ export function CategoriesTab() {
         </div>
         <div className="flex-1 overflow-y-auto">
           {loading ? (
-            <div className="p-4 text-center text-slate-500 text-sm">
-              Loading…
-            </div>
+            <div className="flex items-center justify-center p-4 text-accent"><Spinner size={20} /></div>
           ) : filtered.length === 0 ? (
             <div className="p-4 text-center text-slate-500 text-sm">
               {categories.length === 0 ? "No categories yet." : "No matches."}
@@ -3075,7 +3072,7 @@ export function StandardsTab() {
         )}
         <div className="flex-1 overflow-y-auto">
           {loading ? (
-            <div className="p-3 text-xs text-slate-500">Loading…</div>
+            <div className="flex items-center justify-center p-3 text-accent"><Spinner size={16} /></div>
           ) : standards.length === 0 ? (
             <div className="p-3 text-xs text-slate-500 italic">None yet</div>
           ) : (

web/app/templates/_components/TemplateEditor.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { getGridLabel } from "@/lib/gridLabels";
+import Spinner from "../../components/Spinner";
 
 type Origin = "top-left" | "top-right" | "bottom-left" | "bottom-right";
 
@@ -442,8 +443,8 @@ export default function TemplateEditor({
 
   if (loading) {
     return (
-      <div className="flex-1 flex items-center justify-center text-slate-500">
-        Loading…
+      <div className="flex-1 flex items-center justify-center text-accent">
+        <Spinner size={32} />
       </div>
     );
   }

web/app/templates/page.tsx

@@ -3,6 +3,7 @@
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Suspense, useCallback, useEffect, useState } from "react";
+import Spinner from "../components/Spinner";
 import TemplateEditor from "./_components/TemplateEditor";
 
 interface Template {
@@ -92,8 +93,8 @@ function TemplatesPageInner() {
 
         <div className="flex-1 overflow-y-auto">
           {loading ? (
-            <div className="p-6 text-center text-slate-500 text-sm">
-              Loading…
+            <div className="flex items-center justify-center p-6 text-accent">
+              <Spinner size={24} />
             </div>
           ) : templates.length === 0 ? (
             <div className="p-6 text-center text-slate-500 text-sm">
@@ -193,8 +194,8 @@ export default function TemplatesPage() {
   return (
     <Suspense
       fallback={
-        <div className="flex-1 flex items-center justify-center text-slate-500">
-          Loading…
+        <div className="flex-1 flex items-center justify-center text-accent">
+          <Spinner size={32} />
         </div>
       }
     >