@pylonsync/create-pylon 0.19.1 → 0.20.0

package/templates/saas/app.ts

@@ -111,7 +111,8 @@ const OrgInvite = entity(
 const Project = entity(
   "Project",
   {
-    orgId: field.id("Org"),
+    // `.readonly()`: set on insert, rejected on any client update.
+    orgId: field.id("Org").readonly(),
     name: field.string(),
     description: field.string().optional(),
     // "active" | "archived" — archived projects stay in the workspace but drop
@@ -122,6 +123,38 @@ const Project = entity(
   { indexes: [{ name: "by_org", fields: ["orgId"], unique: false }] },
 );
 
+// A unit of work inside a project. `orgId` is copied from the project when
+// the task is created, so the same one-line tenant policy scopes it.
+// Statuses and priorities are listed in lib/tasks.ts. `assigneeName` is a
+// copy of the assignee's display name, so the board renders names on the
+// first server paint (the User policy only lets people read their own row);
+// updateProfile refreshes it when a person renames themselves.
+const Task = entity(
+  "Task",
+  {
+    orgId: field.id("Org").readonly(),
+    projectId: field.id("Project").readonly(),
+    title: field.string(),
+    status: field.string().default("todo"),
+    priority: field.string().default("none"),
+    assigneeId: field.id("User").optional(),
+    assigneeName: field.string().optional(),
+    // Calendar day, `YYYY-MM-DD`.
+    dueDate: field.string().optional(),
+    // Stamped by updateTask when the status moves to done; cleared when it
+    // moves back.
+    completedAt: field.datetime().optional(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  {
+    indexes: [
+      { name: "by_org", fields: ["orgId"], unique: false },
+      { name: "by_project", fields: ["projectId"], unique: false },
+      { name: "by_assignee", fields: ["assigneeId"], unique: false },
+    ],
+  },
+);
+
 // User rows: read your own; the auth subsystem owns writes.
 const userPolicy = policy({
   name: "user_self",
@@ -161,17 +194,31 @@ const orgInvitePolicy = policy({
   allowDelete: "false",
 });
 
-// Projects are scoped to your ACTIVE tenant. `auth.tenantId == data.orgId`
-// gates reads, edits, and deletes. Inserts go through the `createProject`
-// function instead, which enforces the free plan's project cap on the server
-// (lib/plans.ts) — a client cannot skip the paywall by writing the row itself.
+// Projects and tasks are readable in your ACTIVE tenant only. Every write
+// goes through a server function (functions/*Project.ts, *Task.ts):
+//   - createProject and setProjectStatus enforce the free plan's project cap
+//     (lib/plans.ts), so a client cannot skip the paywall.
+//   - An update policy is checked against the row as it is BEFORE the write,
+//     so `auth.tenantId == data.orgId` alone would let a client PATCH `orgId`
+//     and move a row into another workspace. `orgId` is `.readonly()`, and
+//     the functions never take `orgId` from the caller; they re-check
+//     membership against the row's own workspace.
+//   - deleteProject removes the project's tasks with it.
 const projectPolicy = policy({
   name: "project_tenant",
   entity: "Project",
   allowRead: "auth.tenantId == data.orgId",
   allowInsert: "false",
-  allowUpdate: "auth.tenantId == data.orgId",
-  allowDelete: "auth.tenantId == data.orgId",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+const taskPolicy = policy({
+  name: "task_tenant",
+  entity: "Task",
+  allowRead: "auth.tenantId == data.orgId",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
 });
 
 // Every non-internal function in functions/ becomes a manifest entry —
@@ -182,7 +229,7 @@ const fns = await discoverFunctions();
 const manifest = buildManifest({
   name: "__APP_NAME__",
   version: "0.1.0",
-  entities: [User, Org, OrgMember, OrgInvite, Project, ...billing.manifest.entities],
+  entities: [User, Org, OrgMember, OrgInvite, Project, Task, ...billing.manifest.entities],
   queries: fns.queries,
   // The billing actions (createCheckoutSession / createBillingPortalSession /
   // cancelSubscription / restoreSubscription / stripeWebhook) are re-exported
@@ -199,25 +246,33 @@ const manifest = buildManifest({
     orgMemberPolicy,
     orgInvitePolicy,
     projectPolicy,
+    taskPolicy,
     ...billing.manifest.policies,
   ],
   // Email/password is on by default against the User entity. The org entities
   // above are named with the framework defaults (Org / OrgMember / OrgInvite),
   // so `/api/auth/orgs/*` + `/api/auth/select-org` work with no extra config.
   auth: auth(),
-  // Self-hosted Inter (next/font parity): the build fetches the woff2, serves it
-  // same-origin (no third-party request, no FOUT), preloads it, and synthesizes a
-  // size-adjusted fallback face so there's no layout shift. globals.css reads it
-  // via `var(--font-sans, …)`; layout.tsx carries no font <link>.
+  // Self-hosted Geist + Geist Mono: the build fetches the woff2, serves it
+  // same-origin, preloads it, and synthesizes a size-adjusted fallback face so
+  // there's no layout shift. globals.css reads them via `var(--font-sans, …)`
+  // and `var(--font-geist-mono, …)`; layout.tsx carries no font <link>.
   fonts: [
     font({
-      family: "Inter",
+      family: "Geist",
       variable: "--font-sans",
       weights: ["400", "500", "600", "700"],
       subsets: ["latin"],
       display: "swap",
       preload: true,
     }),
+    font({
+      family: "Geist Mono",
+      variable: "--font-geist-mono",
+      weights: ["400", "500"],
+      subsets: ["latin"],
+      display: "swap",
+    }),
   ],
   routes: await discoverAppRoutes(),
 });

package/templates/saas/components/dashboard-shell.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import React from "react";
+import React, { useState } from "react";
 import { Link, useRouter } from "@pylonsync/react";
 import { useAuth, OrganizationSwitcher } from "@pylonsync/client";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
 import {
-  LayoutDashboard,
+  LayoutGrid,
   FolderKanban,
   Users,
   CreditCard,
@@ -12,207 +13,286 @@ import {
   LogOut,
   ExternalLink,
   ChevronsUpDown,
+  ChevronRight,
+  Menu,
+  X,
   type LucideIcon,
 } from "lucide-react";
+import { Avatar, ProjectMark } from "@/components/task-ui";
+import { useLiveRows } from "@/lib/use-live";
+import { siteConfig } from "@/lib/site.config";
 
 export type NavKey = "overview" | "projects" | "members" | "billing" | "settings";
 
-// Exported so `app/dashboard/layout.tsx` can derive the active item + page
-// title from the request URL — one table drives both the sidebar and the
-// layout's routing awareness. `group` splits the sidebar into sections:
-// ungrouped items render first, then each named group under an eyebrow label.
+// Exported so `app/dashboard/layout.tsx` can derive the active item and the
+// page title from the request URL. One table drives both the sidebar and the
+// layout. `group: "workspace"` items render in the lower block.
 export const NAV: {
   key: NavKey;
   label: string;
   href: string;
   Icon: LucideIcon;
-  group?: string;
+  group?: "workspace";
 }[] = [
-  { key: "overview", label: "Overview", href: "/dashboard", Icon: LayoutDashboard },
+  { key: "overview", label: "Overview", href: "/dashboard", Icon: LayoutGrid },
   { key: "projects", label: "Projects", href: "/dashboard/projects", Icon: FolderKanban },
-  { key: "members", label: "Members", href: "/dashboard/members", Icon: Users, group: "Workspace" },
-  { key: "billing", label: "Billing", href: "/dashboard/billing", Icon: CreditCard, group: "Workspace" },
-  { key: "settings", label: "Settings", href: "/dashboard/settings", Icon: SettingsIcon, group: "Workspace" },
+  { key: "members", label: "Members", href: "/dashboard/members", Icon: Users, group: "workspace" },
+  { key: "billing", label: "Billing", href: "/dashboard/billing", Icon: CreditCard, group: "workspace" },
+  { key: "settings", label: "Settings", href: "/dashboard/settings", Icon: SettingsIcon, group: "workspace" },
 ];
 
-// Dashboard chrome: a fixed sidebar (logo, workspace switcher, grouped nav,
-// account card pinned to the bottom) plus a slim top bar. Rendered by
-// `app/dashboard/layout.tsx`, which wraps every /dashboard page — /dashboard
-// sits outside the `(marketing)` route group, so this shell is the only chrome
-// here. `userEmail` is resolved on the server (serverData.get("User", …)) and
-// passed in, so the menu shows a real email instead of a raw id.
+export interface ShellProject {
+  id: string;
+  orgId: string;
+  name: string;
+  status?: string;
+}
+
+// Dashboard chrome. From md up: a sidebar on a grey frame with the page in a
+// raised white panel. Below md: a top bar whose menu button opens the same
+// sidebar as a drawer. Rendered by `app/dashboard/layout.tsx`, which resolves
+// every prop on the server, so the first paint has the real names.
 export function DashboardShell({
   active,
   title,
+  parent,
+  activeProjectId,
+  tenantId,
+  userId,
+  userName,
   userEmail,
   orgName,
+  projects,
   children,
 }: {
   active: NavKey;
   title: string;
+  /** Breadcrumb parent, e.g. Projects on a project's board. */
+  parent?: { label: string; href: string };
+  activeProjectId?: string;
+  tenantId: string;
+  userId: string;
+  userName: string;
   userEmail: string;
-  // Active org name, resolved on the server, so the workspace switcher renders
-  // the real name on first paint instead of flashing in after hydration.
   orgName?: string;
+  projects: ShellProject[];
   children: React.ReactNode;
 }) {
-  const router = useRouter();
-  const ungrouped = NAV.filter((n) => !n.group);
-  const groups = [...new Set(NAV.map((n) => n.group).filter(Boolean))] as string[];
+  const [drawer, setDrawer] = useState(false);
+  const sidebar = (
+    <Sidebar
+      active={active}
+      activeProjectId={activeProjectId}
+      tenantId={tenantId}
+      userId={userId}
+      userName={userName}
+      userEmail={userEmail}
+      orgName={orgName}
+      projects={projects}
+      onNavigate={() => setDrawer(false)}
+    />
+  );
   return (
-    <div className="flex min-h-screen bg-white text-zinc-900">
-      <aside className="hidden w-60 shrink-0 flex-col border-r border-zinc-200/70 bg-zinc-50/80 md:flex">
-        <div className="flex h-14 shrink-0 items-center px-4">
-          <Link href="/" className="flex items-center gap-2">
-            <span className="flex size-6 items-center justify-center rounded-[7px] bg-zinc-900 text-[13px] font-bold text-white">
-              A
-            </span>
-            <span className="text-[15px] font-semibold tracking-tight">Acme</span>
-          </Link>
+    <div className="min-h-screen bg-[#f4f4f5] text-zinc-900 md:flex">
+      <aside className="sticky top-0 hidden h-screen w-[244px] shrink-0 md:block">{sidebar}</aside>
+
+      {/* Mobile top bar + drawer. */}
+      <DialogPrimitive.Root open={drawer} onOpenChange={setDrawer}>
+        <header className="sticky top-0 z-30 flex h-14 items-center gap-2 border-b border-zinc-200/80 bg-white/90 px-3 backdrop-blur md:hidden">
+          <DialogPrimitive.Trigger
+            aria-label="Open navigation"
+            className="flex size-9 items-center justify-center rounded-lg text-zinc-600 transition-colors hover:bg-zinc-100"
+          >
+            <Menu className="size-[18px]" strokeWidth={1.75} />
+          </DialogPrimitive.Trigger>
+          <div className="min-w-0 flex-1 truncate text-[14px] font-medium">{title}</div>
+          <Avatar id={userId} name={userName} />
+        </header>
+        <DialogPrimitive.Portal>
+          <DialogPrimitive.Overlay className="fixed inset-0 z-40 bg-zinc-950/30 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 md:hidden" />
+          <DialogPrimitive.Content className="fixed inset-y-0 left-0 z-50 w-[280px] max-w-[85vw] bg-[#f4f4f5] shadow-[0_0_0_1px_rgba(0,0,0,0.06),0_24px_64px_-12px_rgba(0,0,0,0.3)] data-[state=open]:animate-in data-[state=open]:slide-in-from-left data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left md:hidden">
+            <DialogPrimitive.Title className="sr-only">Navigation</DialogPrimitive.Title>
+            <DialogPrimitive.Description className="sr-only">
+              Pages and projects in this workspace
+            </DialogPrimitive.Description>
+            <DialogPrimitive.Close
+              aria-label="Close navigation"
+              className="absolute right-2.5 top-3 z-10 flex size-8 items-center justify-center rounded-lg text-zinc-500 hover:bg-zinc-200/60"
+            >
+              <X className="size-4" />
+            </DialogPrimitive.Close>
+            {sidebar}
+          </DialogPrimitive.Content>
+        </DialogPrimitive.Portal>
+      </DialogPrimitive.Root>
+
+      <div className="min-w-0 flex-1 md:py-2 md:pr-2">
+        <div className="flex min-h-screen flex-col bg-white md:min-h-[calc(100vh-1rem)] md:rounded-xl md:shadow-[0_0_0_1px_rgba(0,0,0,0.06),0_1px_2px_rgba(0,0,0,0.04)]">
+          <div className="hidden h-12 shrink-0 items-center gap-1.5 border-b border-zinc-100 px-6 text-[13px] md:flex">
+            {parent ? (
+              <>
+                <Link href={parent.href} className="text-zinc-500 transition-colors hover:text-zinc-900">
+                  {parent.label}
+                </Link>
+                <ChevronRight className="size-3.5 text-zinc-300" />
+              </>
+            ) : null}
+            <span className="truncate font-medium text-zinc-900">{title}</span>
+          </div>
+          <main className="min-w-0 flex-1 px-4 py-6 sm:px-6 md:px-8 md:py-8">{children}</main>
         </div>
+      </div>
+    </div>
+  );
+}
+
+function Sidebar({
+  active,
+  activeProjectId,
+  tenantId,
+  userId,
+  userName,
+  userEmail,
+  orgName,
+  projects,
+  onNavigate,
+}: {
+  active: NavKey;
+  activeProjectId?: string;
+  tenantId: string;
+  userId: string;
+  userName: string;
+  userEmail: string;
+  orgName?: string;
+  projects: ShellProject[];
+  onNavigate: () => void;
+}) {
+  const router = useRouter();
+  const live = useLiveRows<ShellProject>("Project", projects, tenantId)
+    .filter((p) => (p.status ?? "active") !== "archived")
+    .sort((a, b) => a.name.localeCompare(b.name, "en"));
+  const main = NAV.filter((n) => !n.group);
+  const workspace = NAV.filter((n) => n.group === "workspace");
+  return (
+    <div className="flex h-full flex-col px-3 pb-3">
+      <div className="flex h-14 shrink-0 items-center gap-2 px-2">
+        <Link href="/" className="flex items-center gap-2" onClick={onNavigate}>
+          <span className="flex size-[22px] items-center justify-center rounded-[6px] bg-zinc-900 text-[12px] font-bold text-white">
+            {siteConfig.brand.letter}
+          </span>
+          <span className="text-[14px] font-semibold tracking-tight">{siteConfig.brand.name}</span>
+        </Link>
+      </div>
 
-        <div className="px-3 pb-1">
-          {/* Every view's data is resolved server-side for the active tenant,
-              so switching orgs re-renders the dashboard for the new workspace.
-              A soft client navigation (router.push) re-fetches the SSR page —
-              all data updates — without the full-reload white flash. */}
-          <OrganizationSwitcher
-            hidePersonal
-            initialActiveName={orgName}
-            onSwitched={() => router.push("/dashboard")}
-          />
+      {/* Switching workspaces re-renders the dashboard for the new tenant.
+          router.push re-fetches the SSR page without a full reload. */}
+      <div className="[&>div]:w-full [&_button[aria-haspopup]]:w-full [&_button[aria-haspopup]]:justify-start [&_button[aria-haspopup]]:border-zinc-200/80 [&_button[aria-haspopup]]:bg-white [&_button[aria-haspopup]]:px-2 [&_button[aria-haspopup]]:py-1.5 [&_button[aria-haspopup]]:text-[13px] [&_button[aria-haspopup]]:shadow-[0_1px_1px_rgba(0,0,0,0.03)] [&_button[aria-haspopup]>span:nth-child(2)]:flex-1 [&_button[aria-haspopup]>span:nth-child(2)]:text-left">
+        <OrganizationSwitcher
+          hidePersonal
+          initialActiveName={orgName}
+          onSwitched={() => {
+            onNavigate();
+            router.push("/dashboard");
+          }}
+        />
+      </div>
+
+      <nav className="mt-4 flex-1 overflow-y-auto">
+        <div className="space-y-px">
+          {main.map((n) => (
+            <NavItem key={n.key} item={n} isActive={active === n.key && !activeProjectId} onNavigate={onNavigate} />
+          ))}
         </div>
 
-        <nav className="flex-1 overflow-y-auto px-3 pt-3">
-          <div className="space-y-0.5">
-            {ungrouped.map((n) => (
-              <NavItem key={n.key} item={n} isActive={active === n.key} />
-            ))}
-          </div>
-          {groups.map((g) => (
-            <div key={g} className="mt-6">
-              <div className="mb-1.5 px-2.5 text-[11px] font-semibold uppercase tracking-wider text-zinc-400">
-                {g}
-              </div>
-              <div className="space-y-0.5">
-                {NAV.filter((n) => n.group === g).map((n) => (
-                  <NavItem key={n.key} item={n} isActive={active === n.key} />
-                ))}
-              </div>
+        {live.length > 0 ? (
+          <div className="mt-5">
+            <div className="px-2 pb-1 text-[12px] font-medium text-zinc-400">Active projects</div>
+            <div className="space-y-px">
+              {live.map((p) => (
+                <Link
+                  key={p.id}
+                  href={`/dashboard/projects/${p.id}`}
+                  onClick={onNavigate}
+                  className={
+                    "flex items-center gap-2 rounded-md px-2 py-[5px] text-[13px] transition-colors " +
+                    (activeProjectId === p.id
+                      ? "bg-white font-medium text-zinc-900 shadow-[0_0_0_1px_rgba(0,0,0,0.05),0_1px_2px_rgba(0,0,0,0.05)]"
+                      : "text-zinc-600 hover:bg-zinc-200/50 hover:text-zinc-900")
+                  }
+                >
+                  <ProjectMark id={p.id} name={p.name} className="size-[18px] text-[8.5px]" />
+                  <span className="truncate">{p.name}</span>
+                </Link>
+              ))}
             </div>
-          ))}
-        </nav>
+          </div>
+        ) : null}
 
-        {/* Account card pinned to the bottom of the column — the sidebar's
-            base holds the session controls instead of trailing off into
-            empty space. The dropdown opens UPWARD (bottom-full). */}
-        <div className="border-t border-zinc-200/70 p-3">
-          <UserMenu email={userEmail} direction="up" />
+        <div className="mt-5">
+          <div className="px-2 pb-1 text-[12px] font-medium text-zinc-400">Workspace</div>
+          <div className="space-y-px">
+            {workspace.map((n) => (
+              <NavItem key={n.key} item={n} isActive={active === n.key} onNavigate={onNavigate} />
+            ))}
+          </div>
         </div>
-      </aside>
+      </nav>
 
-      <div className="flex min-w-0 flex-1 flex-col">
-        <header className="flex h-14 shrink-0 items-center justify-between border-b border-zinc-200/70 px-6">
-          <h1 className="text-[15px] font-semibold">{title}</h1>
-          {/* The sidebar (and its account card) is hidden below md, so the
-              top bar carries the account menu on small screens only. */}
-          <div className="md:hidden">
-            <UserMenu email={userEmail} direction="down" />
-          </div>
-        </header>
-        <main className="flex-1 p-6">
-          <div className="mx-auto max-w-4xl">{children}</div>
-        </main>
-      </div>
+      <UserMenu userId={userId} name={userName} email={userEmail} />
     </div>
   );
 }
 
-// A single sidebar row. The active row reads as a raised white card — layered
-// translucent shadows instead of a hard border, so it sits naturally on the
-// zinc-50 column. Inactive rows tint on hover only.
 function NavItem({
   item,
   isActive,
+  onNavigate,
 }: {
   item: (typeof NAV)[number];
   isActive: boolean;
+  onNavigate: () => void;
 }) {
   return (
     <Link
       href={item.href}
+      onClick={onNavigate}
       className={
-        "flex items-center gap-2.5 rounded-lg px-2.5 py-[7px] text-[13px] font-medium transition-colors " +
+        "flex items-center gap-2.5 rounded-md px-2 py-[6px] text-[13px] transition-colors " +
         (isActive
-          ? "bg-white text-zinc-900 shadow-[0_1px_2px_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.05)]"
+          ? "bg-white font-medium text-zinc-900 shadow-[0_0_0_1px_rgba(0,0,0,0.05),0_1px_2px_rgba(0,0,0,0.05)]"
           : "text-zinc-600 hover:bg-zinc-200/50 hover:text-zinc-900")
       }
     >
-      <item.Icon
-        className={"size-[17px] " + (isActive ? "text-zinc-700" : "text-zinc-400")}
-        strokeWidth={2}
-      />
+      <item.Icon className={"size-4 " + (isActive ? "text-zinc-800" : "text-zinc-400")} strokeWidth={1.75} />
       {item.label}
     </Link>
   );
 }
 
-// Avatar + dropdown (email, View site, Sign out). Native <details> so it opens
-// on click with no extra state. In the sidebar it renders as a full-width
-// account card whose menu opens upward; in the mobile top bar it's a compact
-// avatar with a downward menu.
-function UserMenu({
-  email,
-  direction,
-}: {
-  email: string;
-  direction: "up" | "down";
-}) {
+// Account card pinned to the bottom of the sidebar. Native <details>, so it
+// opens on click with no extra state; the menu opens upward.
+function UserMenu({ userId, name, email }: { userId: string; name: string; email: string }) {
   const { signOut } = useAuth();
-  const initial = (email.trim()[0] || "?").toUpperCase();
   async function onSignOut() {
     await signOut();
     window.location.assign("/");
   }
-  const up = direction === "up";
   return (
-    <details className="group relative">
-      <summary
-        className={
-          "cursor-pointer select-none list-none marker:hidden [&::-webkit-details-marker]:hidden " +
-          (up
-            ? "flex w-full items-center gap-2.5 rounded-lg px-2 py-2 transition-colors hover:bg-zinc-200/50"
-            : "flex size-9 items-center justify-center")
-        }
-      >
-        <span className="flex size-7 shrink-0 items-center justify-center rounded-full bg-zinc-900 text-[11px] font-semibold text-white">
-          {initial}
+    <details className="relative">
+      <summary className="flex cursor-pointer select-none list-none items-center gap-2.5 rounded-lg px-2 py-2 transition-colors marker:hidden hover:bg-zinc-200/50 [&::-webkit-details-marker]:hidden">
+        <Avatar id={userId} name={name} />
+        <span className="min-w-0 flex-1 leading-tight">
+          <span className="block truncate text-[13px] font-medium text-zinc-800">{name}</span>
+          <span className="block truncate text-[11.5px] text-zinc-500">{email}</span>
         </span>
-        {up ? (
-          <>
-            <span className="min-w-0 flex-1 truncate text-[13px] font-medium text-zinc-700">
-              {email || "Signed in"}
-            </span>
-            <ChevronsUpDown className="size-3.5 shrink-0 text-zinc-400" strokeWidth={2} />
-          </>
-        ) : null}
+        <ChevronsUpDown className="size-3.5 shrink-0 text-zinc-400" strokeWidth={1.75} />
       </summary>
-      <div
-        className={
-          "absolute z-40 w-56 overflow-hidden rounded-xl bg-white p-1 shadow-[0_0_0_1px_rgba(0,0,0,0.06),0_16px_48px_-16px_rgba(0,0,0,0.25)] " +
-          (up ? "bottom-full left-0 mb-2" : "right-0 top-full mt-2")
-        }
-      >
-        <div className="border-b border-zinc-100 px-2.5 py-2">
-          <div className="truncate text-[13px] font-medium text-zinc-900">
-            {email || "Signed in"}
-          </div>
-        </div>
+      <div className="absolute bottom-full left-0 z-40 mb-2 w-full min-w-52 overflow-hidden rounded-xl bg-white p-1 shadow-[0_0_0_1px_rgba(0,0,0,0.06),0_16px_48px_-16px_rgba(0,0,0,0.25)]">
         <a
           href="/"
           className="flex items-center gap-2 rounded-lg px-2.5 py-2 text-[13px] text-zinc-700 transition-colors hover:bg-zinc-50"
         >
-          <ExternalLink className="size-4 text-zinc-400" strokeWidth={2} />
+          <ExternalLink className="size-4 text-zinc-400" strokeWidth={1.75} />
           View site
         </a>
         <button
@@ -220,7 +300,7 @@ function UserMenu({
           onClick={onSignOut}
           className="flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-[13px] text-zinc-700 transition-colors hover:bg-zinc-50"
         >
-          <LogOut className="size-4 text-zinc-400" strokeWidth={2} />
+          <LogOut className="size-4 text-zinc-400" strokeWidth={1.75} />
           Sign out
         </button>
       </div>