merge activity into projects: card grid + per-project detail

app/src/App.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react";
-import { AuditTab } from "./tabs/AuditTab";
 import { ProjectsTab } from "./tabs/ProjectsTab";
 import { ReposTab } from "./tabs/ReposTab";
 import { SettingsTab } from "./tabs/SettingsTab";
@@ -9,7 +8,6 @@ import { TeamProvider, useTeam, type TeamId } from "./teamContext";
 import { useSetupStatus, SetupBanner } from "./SetupStatus";
 
 const TABS = [
-  { id: "audit", label: "Activity", Comp: AuditTab },
   { id: "projects", label: "Projects", Comp: ProjectsTab },
   { id: "repos", label: "Repos", Comp: ReposTab },
   { id: "settings", label: "Settings", Comp: SettingsTab },
@@ -32,13 +30,13 @@ function Inner() {
   const setup = useSetupStatus(teamId);
 
   // First-signin default: a fresh user with no required setup done
-  // lands on settings (wizard) instead of an empty Activity tab. The
-  // choice is sticky once they navigate (recorded in localStorage),
-  // so we don't keep forcing settings on every page load.
+  // lands on settings (wizard). The choice is sticky once they navigate
+  // (recorded in localStorage), so we don't keep forcing settings on
+  // every page load.
   const [tab, setTab] = useState<(typeof TABS)[number]["id"]>(() => {
-    if (typeof window === "undefined") return "audit";
+    if (typeof window === "undefined") return "projects";
     const saved = window.localStorage.getItem("otto.lastTab");
-    return saved && isTabId(saved) ? saved : "audit";
+    return saved && isTabId(saved) ? saved : "projects";
   });
   const Comp = TABS.find((t) => t.id === tab)!.Comp;
 
@@ -50,7 +48,7 @@ function Inner() {
       typeof window !== "undefined"
         ? window.localStorage.getItem("otto.lastTab")
         : null;
-    if (!saved && tab === "audit" && setup.done === 0) setTab("settings");
+    if (!saved && tab === "projects" && setup.done === 0) setTab("settings");
   }, [setup.loading, setup.done, tab]);
 
   // Persist the selected tab so refreshes don't bounce people back
@@ -75,6 +73,7 @@ function Inner() {
         </div>
         <SignOutButton />
       </header>
+      <SetupBanner status={setup} onResume={() => setTab("settings")} />
       <div className="tabs">
         {TABS.map((t) => (
           <button
@@ -86,7 +85,6 @@ function Inner() {
           </button>
         ))}
       </div>
-      <SetupBanner status={setup} onResume={() => setTab("settings")} />
       {!teamId ? (
         <p className="muted" style={{ marginTop: 24 }}>
           {bootstrapping || teams === undefined

app/src/styles.css

@@ -551,3 +551,52 @@ a:hover { color: var(--otto-ink); text-decoration-color: var(--otto-ink); }
   font-style: italic;
   font-weight: 400;
 }
+
+/* Project grid — clickable cards in the merged Projects tab. */
+.project-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: var(--otto-space-3);
+  margin-top: var(--otto-space-3);
+  margin-bottom: var(--otto-space-6);
+}
+.project-card {
+  appearance: none;
+  text-align: left;
+  width: 100%;
+  background: var(--otto-cream);
+  border: var(--otto-border-hair);
+  padding: var(--otto-space-4) var(--otto-space-5);
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  transition: background 0.1s ease, border-color 0.1s ease;
+}
+.project-card:hover {
+  background: var(--otto-bg);
+  border-color: var(--otto-ink);
+}
+.project-card:focus-visible {
+  outline: 2px solid var(--otto-amber, #c89045);
+  outline-offset: 2px;
+}
+
+/* Modal — used by CreateProjectModal in the projects tab. */
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(28, 26, 22, 0.55);
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--otto-space-4);
+}
+.modal-panel {
+  background: var(--otto-cream);
+  border: var(--otto-border-hair);
+  padding: var(--otto-space-5) var(--otto-space-6);
+  width: 100%;
+  max-width: 420px;
+  box-shadow: 6px 6px 0 rgba(28, 26, 22, 0.15);
+}