@pylonsync/create-pylon 0.19.1 → 0.20.0

package/templates/projects/app/projects-view.tsx

@@ -8,16 +8,23 @@ import { PageHeader } from "@/components/page-header";
 import { DataTable, type ColumnDef } from "@/components/data-table";
 import { EmptyState } from "@/components/empty-state";
 import { RecordDialog } from "@/components/record-dialog";
+import { FilterTabs } from "@/components/filter-tabs";
+import { Meter } from "@/components/meter";
 import {
+  DEFAULT_PROJECT_TAB,
+  PROJECT_STATUSES,
+  PROJECT_TABS,
   budgetState,
   duration,
-  isOpen,
+  inProjectTab,
   minutesForProject,
   parseDuration,
+  portfolio,
   progress,
 } from "@/lib/work";
+import { SummaryBar } from "@/components/summary-bar";
 import { RequireAuth } from "@/components/require-auth";
-import { Workspace, type ProjectRow } from "./workspace";
+import { Workspace, type ProjectRow, type TaskRow } from "./workspace";
 
 export function ProjectsView({
   openNew,
@@ -26,20 +33,47 @@ export function ProjectsView({
 }) {
   const router = useRouter();
   const [open, setOpen] = useState(Boolean(openNew));
+  const [tab, setTab] = useState(DEFAULT_PROJECT_TAB);
 
   return (
-    <RequireAuth title="Projects" description="Your team shares one set of projects. Anyone with an account sees it.">
+    <RequireAuth>
       <Workspace pathname="/">
       {(data) => {
+        const tasksByProject = new Map<string, TaskRow[]>();
+        for (const task of data.tasks) {
+          const list = tasksByProject.get(task.projectId) ?? [];
+          list.push(task);
+          tasksByProject.set(task.projectId, list);
+        }
+        const logged = new Map(
+          data.projects.map((p) => [p.id, minutesForProject(p.id, data.entries)] as const),
+        );
+
         const columns: ColumnDef<ProjectRow>[] = [
           {
             key: "name",
             header: "Project",
-            cell: (row) => <span className="truncate font-medium">{row.name}</span>,
+            className: "w-[58%] md:w-[28%]",
+            cell: (row) => (
+              <span className="min-w-0">
+                <span className="flex items-center gap-2">
+                  <span className="truncate font-medium">{row.name}</span>
+                  {row.status !== "active" && tab === "all" ? (
+                    <span className="shrink-0 rounded bg-foreground/[0.06] px-1.5 text-[11px] font-medium text-muted-foreground">
+                      {PROJECT_STATUSES.find((s) => s.id === row.status)?.label ?? row.status}
+                    </span>
+                  ) : null}
+                </span>
+                <span className="block truncate text-[12px] text-muted-foreground md:hidden">
+                  {data.clientName(row.clientId) ?? "No client"}
+                </span>
+              </span>
+            ),
           },
           {
             key: "client",
             header: "Client",
+            hideBelow: "md",
             cell: (row) => (
               <span className="text-muted-foreground">
                 {data.clientName(row.clientId) ?? "—"}
@@ -47,57 +81,53 @@ export function ProjectsView({
             ),
           },
           {
-            key: "tasks",
-            header: "Tasks",
+            key: "progress",
+            header: "Progress",
+            className: "w-[42%] md:w-[190px]",
             cell: (row) => {
-              const tasks = data.tasks.filter((t) => t.projectId === row.id);
-              const p = progress(tasks);
+              const p = progress(tasksByProject.get(row.id) ?? []);
               return (
-                <span className="tabular text-muted-foreground">
-                  {p.done}/{p.total}
-                </span>
+                <Meter
+                  ratio={p.ratio ?? 0}
+                  tone="primary"
+                  label={`${p.done}/${p.total}`}
+                  title={`${p.done} of ${p.total} tasks done`}
+                />
               );
             },
           },
-          {
-            key: "open",
-            header: "Open",
-            numeric: true,
-            cell: (row) =>
-              data.tasks.filter((t) => t.projectId === row.id && isOpen(t)).length,
-          },
           {
             key: "time",
-            header: "Logged",
-            numeric: true,
+            header: "Budget used",
+            hideBelow: "lg",
+            className: "w-[220px]",
             cell: (row) => {
-              const logged = minutesForProject(row.id, data.entries);
-              const state = budgetState(row.budgetMinutes, logged);
-              return (
-                <span
-                  className={
-                    state === "over"
-                      ? "text-destructive"
-                      : state === "near"
-                        ? "text-stage-proposal"
-                        : ""
-                  }
+              const minutes = logged.get(row.id) ?? 0;
+              const state = budgetState(row.budgetMinutes, minutes);
+              const budget = Number(row.budgetMinutes) || 0;
+              return state === "none" ? (
+                <span className="text-muted-foreground">{duration(minutes)} logged</span>
+              ) : (
+                <Meter
+                  ratio={minutes / budget}
+                  tone={state === "over" ? "danger" : state === "near" ? "warn" : "neutral"}
+                  label={`${duration(minutes)} / ${duration(budget)}`}
                   title={
-                    row.budgetMinutes
-                      ? `Budget ${duration(row.budgetMinutes)}`
-                      : undefined
+                    state === "over"
+                      ? `Over budget by ${duration(minutes - budget)}`
+                      : `${duration(budget - minutes)} left`
                   }
-                >
-                  {duration(logged)}
-                </span>
+                />
               );
             },
           },
           {
             key: "due",
             header: "Due",
+            hideBelow: "sm",
+            className: "w-[90px]",
             cell: (row) => (
-              <span className="text-muted-foreground">
+              <span className="tabular text-muted-foreground">
                 {row.dueDate
                   ? new Date(row.dueDate).toLocaleDateString("en-US", {
                       month: "short",
@@ -109,36 +139,59 @@ export function ProjectsView({
           },
         ];
 
-        // Active first, then by name — a finished project shouldn\'t sit above
-        // the work in flight.
-        const rows = [...data.projects].sort((a, b) => {
-          const rank = (p: ProjectRow) => (p.status === "active" ? 0 : p.status === "paused" ? 1 : 2);
-          return rank(a) - rank(b) || a.name.localeCompare(b.name);
-        });
+        // Soonest due first, then by name. A project without a date sorts last.
+        const rows = data.projects
+          .filter((project) => inProjectTab(tab, project))
+          .sort(
+            (a, b) =>
+              (a.dueDate ?? "9999").localeCompare(b.dueDate ?? "9999") ||
+              a.name.localeCompare(b.name),
+          );
 
         return (
           <>
-            <PageHeader title="Projects" count={rows.length}>
+            <PageHeader title="Projects" count={data.navCounts["/"]}>
               <Button size="sm" onClick={() => setOpen(true)}>
                 <Plus />
-                New project
+                <span className="max-sm:sr-only">New project</span>
               </Button>
             </PageHeader>
 
+            <SummaryBar portfolio={portfolio(data.projects, data.entries)} />
+
+            <FilterTabs
+              label="Project status"
+              value={tab}
+              onChange={setTab}
+              tabs={PROJECT_TABS.map((t) => ({
+                id: t.id,
+                label: t.label,
+                count: data.projectCounts[t.id],
+              }))}
+            />
+
             <DataTable
               rows={rows}
               columns={columns}
+              loading={data.loading}
+              label="Projects"
               onRowClick={(row) => router.push(`/projects/${row.id}`)}
               empty={
                 <EmptyState
                   icon={<FolderKanban />}
-                  title={data.loading ? "Loading…" : "No projects yet"}
-                  description="A project holds a task board and the time logged against it. Create one to get started."
+                  title={data.projects.length === 0 ? "No projects yet" : "No projects with this status"}
+                  description={
+                    data.projects.length === 0
+                      ? "A project holds a task board and the time logged against it. Create one to get started."
+                      : "Pick another tab to see the rest."
+                  }
                   action={
-                    <Button size="sm" onClick={() => setOpen(true)}>
-                      <Plus />
-                      New project
-                    </Button>
+                    data.projects.length === 0 ? (
+                      <Button size="sm" onClick={() => setOpen(true)}>
+                        <Plus />
+                        New project
+                      </Button>
+                    ) : undefined
                   }
                 />
               }

package/templates/projects/app/workspace.tsx

@@ -3,10 +3,18 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { callFn, db, useRouter } from "@pylonsync/react";
 import { useAuth } from "@pylonsync/client";
-import { Sidebar } from "@/components/sidebar";
+import { FolderKanban, SquareCheck } from "lucide-react";
+import { AppShell } from "@/components/app-shell";
 import { CommandPalette } from "@/components/command-palette";
 import type { SearchItem } from "@/lib/search";
-import { minutesByTask, type Project, type Task, type TimeEntry } from "@/lib/work";
+import {
+  DEFAULT_PROJECT_TAB,
+  minutesByTask,
+  projectTabCounts,
+  type Project,
+  type Task,
+  type TimeEntry,
+} from "@/lib/work";
 
 export interface ClientRow {
   id: string;
@@ -33,6 +41,13 @@ export interface WorkspaceData {
   clientName: (id: string | null | undefined) => string | null;
   memberName: (id: string | null | undefined) => string | null;
   members: UserRow[];
+  /** Project count per list tab; see PROJECT_TABS. */
+  projectCounts: Record<string, number>;
+  /**
+   * The number beside each nav link, keyed by href. Page headers and tabs
+   * read the same counts, so the sidebar and the page can't disagree.
+   */
+  navCounts: Record<string, number>;
   loading: boolean;
 }
 
@@ -67,8 +82,7 @@ export function Workspace({
 
   // Whoever is signed in, named from the synced User row rather than an
   // SSR prop — see the note on useAuth above.
-  const signedInEmail =
-    (users ?? []).find((user) => user.id === userId)?.email ?? "";
+  const me = (users ?? []).find((user) => user.id === userId);
 
   const [paletteOpen, setPaletteOpen] = useState(false);
   const seeded = useRef(false);
@@ -126,14 +140,14 @@ export function Workspace({
     () => [
       ...projectList.map((project) => ({
         id: `project:${project.id}`,
-        type: "company" as const,
+        type: "project",
         title: project.name,
         subtitle: clientById.get(project.clientId ?? "")?.name,
         href: `/projects/${project.id}`,
       })),
       ...taskList.map((task) => ({
         id: `task:${task.id}`,
-        type: "deal" as const,
+        type: "task",
         title: task.title,
         href: `/projects/${task.projectId}`,
       })),
@@ -141,6 +155,12 @@ export function Workspace({
     [projectList, taskList, clientById],
   );
 
+  const projectCounts = projectTabCounts(projectList);
+  const navCounts = {
+    "/": projectCounts[DEFAULT_PROJECT_TAB],
+    "/clients": clientList.length,
+  };
+
   const data: WorkspaceData = {
     clients: clientList,
     projects: projectList,
@@ -153,23 +173,22 @@ export function Workspace({
       return user?.displayName || user?.email || null;
     },
     members: users ?? [],
+    projectCounts,
+    navCounts,
     loading,
   };
 
   return (
-    <div className="flex h-screen overflow-hidden">
-      <Sidebar
-        workspace="Projects"
-        email={signedInEmail}
-        pathname={pathname}
-        counts={{
-          "/": projectList.filter((p) => p.status === "active").length,
-          "/clients": clientList.length,
-        }}
-        onOpenCommand={() => setPaletteOpen(true)}
-        onSignOut={() => void signOut()}
-      />
-      <main className="flex min-w-0 flex-1 flex-col">{children(data)}</main>
+    <AppShell
+      sidebar={{
+        user: { name: me?.displayName ?? "", email: me?.email ?? "" },
+        pathname,
+        counts: navCounts,
+        onOpenCommand: () => setPaletteOpen(true),
+        onSignOut: () => void signOut(),
+      }}
+    >
+      {children(data)}
 
       <CommandPalette
         open={paletteOpen}
@@ -186,9 +205,11 @@ export function Workspace({
             run: () => router.push("/clients"),
           },
         ]}
+        placeholder="Search projects and tasks…"
+        icons={{ project: <FolderKanban />, task: <SquareCheck /> }}
         onClose={() => setPaletteOpen(false)}
         onSelect={(item) => router.push(item.href)}
       />
-    </div>
+    </AppShell>
   );
 }

package/templates/projects/app.ts

@@ -10,7 +10,7 @@ import {
 } from "@pylonsync/sdk";
 
 // ---------------------------------------------------------------------------
-// projects — client project delivery for a small team: projects, a task board,
+// Workbench (the projects template) — client project delivery for a small team: projects, a task board,
 // and time logged against the work.
 //
 // TIME IS A LEDGER. A task\'s logged hours are the sum of its TimeEntry rows,
@@ -176,7 +176,7 @@ const manifest = buildManifest({
   auth: auth(),
   fonts: [
     font({
-      family: "Inter",
+      family: "Manrope",
       variable: "--font-sans",
       weights: ["400", "500", "600", "700"],
       subsets: ["latin"],

package/templates/projects/components/app-shell.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import React, { createContext, useContext, useEffect, useState } from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { BRAND } from "@/lib/brand";
+import { Sidebar } from "@/components/sidebar";
+
+interface ShellControls {
+  /** Opens the navigation drawer. Only reachable on narrow screens. */
+  openNav: () => void;
+  openCommand: () => void;
+}
+
+const ShellContext = createContext<ShellControls | null>(null);
+
+/** The shell's controls, or null outside a shell (a component test). */
+export function useShell(): ShellControls | null {
+  return useContext(ShellContext);
+}
+
+type SidebarProps = React.ComponentProps<typeof Sidebar>;
+
+/**
+ * The page frame. From the `md` breakpoint up, the sidebar is a fixed
+ * 240px rail and the main column scrolls on its own. Below it, the rail
+ * is hidden and the same sidebar opens as a drawer from the menu button
+ * in each page header, so a phone gets the full width for content.
+ */
+export function AppShell({
+  sidebar,
+  children,
+}: {
+  sidebar: Omit<SidebarProps, "onNavigate" | "className">;
+  children: React.ReactNode;
+}) {
+  const [navOpen, setNavOpen] = useState(false);
+  const { pathname, onOpenCommand } = sidebar;
+
+  // A route change closes the drawer, including one made from ⌘K.
+  useEffect(() => {
+    setNavOpen(false);
+  }, [pathname]);
+
+  // Widening past md hides the drawer, so close it rather than leave an
+  // invisible modal holding focus.
+  useEffect(() => {
+    const wide = window.matchMedia("(min-width: 768px)");
+    const onChange = () => {
+      if (wide.matches) setNavOpen(false);
+    };
+    wide.addEventListener("change", onChange);
+    return () => wide.removeEventListener("change", onChange);
+  }, []);
+
+  return (
+    <ShellContext.Provider
+      value={{ openNav: () => setNavOpen(true), openCommand: onOpenCommand }}
+    >
+      <div className="flex h-dvh overflow-hidden bg-background">
+        <aside className="hidden w-[240px] shrink-0 border-r border-border md:flex">
+          <Sidebar {...sidebar} />
+        </aside>
+
+        <DialogPrimitive.Root open={navOpen} onOpenChange={setNavOpen}>
+          <DialogPrimitive.Portal>
+            <DialogPrimitive.Overlay className="fixed inset-0 z-40 bg-black/40 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-40 flex w-[min(300px,86vw)] border-r border-border shadow-xl outline-none md:hidden " +
+                "duration-200 data-[state=open]:animate-in data-[state=open]:slide-in-from-left " +
+                "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left"
+              }
+            >
+              <DialogPrimitive.Title className="sr-only">{BRAND.name} navigation</DialogPrimitive.Title>
+              <DialogPrimitive.Description className="sr-only">
+                Links to every section, search, and your account.
+              </DialogPrimitive.Description>
+              <Sidebar
+                {...sidebar}
+                onNavigate={() => setNavOpen(false)}
+                onOpenCommand={() => {
+                  setNavOpen(false);
+                  onOpenCommand();
+                }}
+              />
+            </DialogPrimitive.Content>
+          </DialogPrimitive.Portal>
+        </DialogPrimitive.Root>
+
+        <main className="flex min-w-0 flex-1 flex-col">{children}</main>
+      </div>
+    </ShellContext.Provider>
+  );
+}

package/templates/projects/components/auth-form.tsx

@@ -21,8 +21,16 @@ import { Label } from "@/components/ui/label";
  * SSR cookie, which browsers withhold inside the builder's cross-site preview
  * iframe — that's the sign-in loop this avoids.
  */
-export function AuthForm() {
-  const [mode, setMode] = useState<"login" | "signup">("login");
+export type AuthMode = "login" | "signup";
+
+export function AuthForm({
+  mode,
+  onModeChange,
+}: {
+  mode: AuthMode;
+  onModeChange: (mode: AuthMode) => void;
+}) {
+  const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState<string | null>(null);
@@ -36,7 +44,11 @@ export function AuthForm() {
       const session =
         mode === "login"
           ? await passwordLogin({ email, password })
-          : await passwordRegister({ email, password });
+          : await passwordRegister({
+              email,
+              password,
+              ...(name.trim() ? { displayName: name.trim() } : {}),
+            });
       // No navigation: persistSession notifies the sync engine, RequireAuth
       // re-renders, and the app appears in place. A full page load here would
       // depend on the SSR session cookie, which a cross-site iframe withholds.
@@ -50,6 +62,18 @@ export function AuthForm() {
   return (
     <div className="space-y-5">
       <form onSubmit={onSubmit} className="space-y-3.5">
+        {mode === "signup" ? (
+          <div className="space-y-1.5">
+            <Label htmlFor="name">Name</Label>
+            <Input
+              id="name"
+              value={name}
+              onChange={(event) => setName(event.target.value)}
+              autoComplete="name"
+              placeholder="Jordan Lee"
+            />
+          </div>
+        ) : null}
         <div className="space-y-1.5">
           <Label htmlFor="email">Email</Label>
           <Input
@@ -80,7 +104,13 @@ export function AuthForm() {
           </p>
         ) : null}
         <Button type="submit" disabled={pending} className="w-full">
-          {pending ? "…" : mode === "login" ? "Sign in" : "Create account"}
+          {pending
+            ? mode === "login"
+              ? "Signing in…"
+              : "Creating account…"
+            : mode === "login"
+              ? "Sign in"
+              : "Create account"}
         </Button>
       </form>
 
@@ -89,7 +119,7 @@ export function AuthForm() {
         <button
           type="button"
           onClick={() => {
-            setMode(mode === "login" ? "signup" : "login");
+            onModeChange(mode === "login" ? "signup" : "login");
             setError(null);
           }}
           className="font-medium text-foreground underline underline-offset-2"

package/templates/projects/components/avatar.tsx

@@ -17,10 +17,13 @@ const ACCENTS = [
 export function Avatar({
   name,
   size = "md",
+  shape = "round",
   className,
 }: {
   name: string | null | undefined;
   size?: "sm" | "md";
+  /** Square for an organisation, round for a person. */
+  shape?: "round" | "square";
   className?: string;
 }) {
   const label = initials(name);
@@ -28,7 +31,8 @@ export function Avatar({
     <span
       aria-hidden="true"
       className={cn(
-        "inline-flex shrink-0 select-none items-center justify-center rounded-full font-medium",
+        "inline-flex shrink-0 select-none items-center justify-center font-semibold",
+        shape === "square" ? "rounded-md" : "rounded-full",
         size === "sm" ? "size-5 text-[9px]" : "size-6 text-[10px]",
         ACCENTS[accentIndex(name ?? "?", ACCENTS.length)],
         className,

package/templates/projects/components/board-skeleton.tsx

@@ -2,17 +2,17 @@ import React from "react";
 import { TASK_STATUSES } from "@/lib/work";
 
 /**
- * The board\'s shape while the replica hydrates. Showing the real columns keeps
+ * The board's shape while the replica hydrates. Showing the real columns keeps
  * the beat before the first row lands from reading as "this project has no
  * tasks", and nothing jumps when the data arrives.
  */
 export function BoardSkeleton() {
   return (
-    <div className="flex h-full gap-3 overflow-hidden p-4" aria-hidden="true">
+    <div className="flex h-full gap-3 overflow-hidden p-4 md:px-5" aria-hidden="true">
       {TASK_STATUSES.map((status, column) => (
         <section
           key={status.id}
-          className="flex w-[268px] shrink-0 flex-col rounded-xl border border-border bg-surface-1/50"
+          className="flex w-[84vw] shrink-0 flex-col rounded-xl border border-border/70 bg-surface-1 md:w-auto md:min-w-[220px] md:max-w-[360px] md:flex-1"
         >
           <header className="flex items-center gap-2 px-3 py-2.5">
             <span className="text-[12px] font-medium text-muted-foreground">

package/templates/projects/components/brand-mark.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * The Workbench mark: three board columns of falling height, on the accent
+ * square. app/icon.svg draws the same shape for the favicon.
+ */
+export function BrandMark({ className }: { className?: string }) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "inline-flex size-6 shrink-0 items-center justify-center rounded-[7px] bg-primary text-primary-foreground",
+        "shadow-[inset_0_1px_0_rgb(255_255_255/0.18),0_1px_2px_rgb(0_0_0/0.12)]",
+        className,
+      )}
+    >
+      <svg viewBox="0 0 16 16" className="size-[62%]" fill="currentColor">
+        <rect x="1.5" y="1.5" width="3.6" height="13" rx="1.2" />
+        <rect x="6.2" y="1.5" width="3.6" height="9.5" rx="1.2" />
+        <rect x="10.9" y="1.5" width="3.6" height="6" rx="1.2" />
+      </svg>
+    </span>
+  );
+}