ginnoir/famapp
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

Apply paper-and-ink design system across all surfaces
Release / build-and-push (push) Has been cancelled
Details

Browse Source 
Replaces the generic shadcn/ui gray theme + horizontal top-bar shell with
the paper-and-ink language from the Claude Design handoff bundle: warm
off-white paper, near-black ink, Source Serif 4 + Inter, hairline borders,
muted ink accents (clay/indigo/sage/plum/ochre) used functionally for
calendars and share scopes.

Theme switcher expanded from 2 dimensions (theme × mode) to 7: palette ×
mode × fontPair × density × dashLayout × calView × navStyle. All exposed
in Settings → Appearance and persisted on the users row. Pre-paint script
applies all four data-* attributes from localStorage so reload doesn't
flash.

App shell restructured to a CSS-grid driven by data-nav on <html>: sidebar
on desktop, bottom-nav + FAB under 760px. Four desktop nav modes wired
(sidebar/rail/top/fab-only). Topbar gets a search-→-CommandPalette button,
notification bell, "+ New" quick-add, avatar.

Dashboard, calendar, lists, notes, settings, login, public share viewer,
and quick-add sheet all reskinned. Dashboard editor gains a Preset menu
(classic/split/glance) that fills the layout from the registered widgets.
FullCalendar wrapped in .fc-skin and inherits all paper-and-ink tokens via
CSS variable overrides. Public share viewer (/s/<token>) rebuilt around
ShareFrame: expiration banner, brand strip, eyebrow chip, 38px serif
title, mini-day + mini-map cards, share-rows.

Schema: drops users.theme; adds theme_palette, theme_font_pair,
theme_density, theme_dash_layout, theme_cal_view, theme_nav_style with
defaults that match the design (clay / serif-sans / regular / classic /
month / rail-desktop). Migration 0014_paper_ink_theme.

Middleware sets x-pathname so the AppShell server component can render
bare for /s/* and /login without a route-group refactor.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
ginnoir
2026-05-07 01:03:21 -05:00
co-authored by Claude Opus 4.7
parent e130cda6c5
commit 9612a54e52
61 changed files with 4173 additions and 894 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+3
View File
@@ -48,3 +48,6 @@ tests/.auth/
# Backups # Backups
deploy/backups/data/ deploy/backups/data/
# Design handoff bundle (reference only, not committed)
.design-tmp/
drizzle/0014_paper_ink_theme.sql
+7
View File
@@ -0,0 +1,7 @@
ALTER TABLE "users" ADD COLUMN "theme_palette" text NOT NULL DEFAULT 'clay';--> statement-breakpoint
ALTER TABLE "users" ADD COLUMN "theme_font_pair" text NOT NULL DEFAULT 'serif-sans';--> statement-breakpoint
ALTER TABLE "users" ADD COLUMN "theme_density" text NOT NULL DEFAULT 'regular';--> statement-breakpoint
ALTER TABLE "users" ADD COLUMN "theme_dash_layout" text NOT NULL DEFAULT 'classic';--> statement-breakpoint
ALTER TABLE "users" ADD COLUMN "theme_cal_view" text NOT NULL DEFAULT 'month';--> statement-breakpoint
ALTER TABLE "users" ADD COLUMN "theme_nav_style" text NOT NULL DEFAULT 'rail-desktop';--> statement-breakpoint
ALTER TABLE "users" DROP COLUMN IF EXISTS "theme";
drizzle/meta/_journal.json
+7
View File
@@ -99,6 +99,13 @@
"when": 1778400000000, "when": 1778400000000,
"tag": "0013_push_notify_reminders", "tag": "0013_push_notify_reminders",
"breakpoints": true "breakpoints": true
},
{
"idx": 14,
"version": "7",
"when": 1778600000000,
"tag": "0014_paper_ink_theme",
"breakpoints": true
} }
] ]
} }
eslint.config.mjs
+9 -1
View File
@@ -5,7 +5,15 @@ import nextConfig from "eslint-config-next/core-web-vitals";
export default tseslint.config( export default tseslint.config(
{ {
ignores: ["node_modules/**", ".next/**", ".claude/**", "dist/**", "drizzle/**", "public/sw.js"], ignores: [
"node_modules/**",
".next/**",
".claude/**",
".design-tmp/**",
"dist/**",
"drizzle/**",
"public/sw.js",
],
}, },
js.configs.recommended, js.configs.recommended,
...tseslint.configs.recommended, ...tseslint.configs.recommended,
src/app/calendar/page.tsx
+11 -2
View File
@@ -1,5 +1,7 @@
import { CalendarShell } from "@/modules/calendar/components/calendar-shell"; import { CalendarShell } from "@/modules/calendar/components/calendar-shell";
import { listCalendars, listEvents } from "@/modules/calendar/server/queries"; import { listCalendars, listEvents } from "@/modules/calendar/server/queries";
import { getCurrentSession } from "@/lib/session";
import type { CalView } from "@/modules/_core/themes";
export default async function CalendarPage() { export default async function CalendarPage() {
const now = new Date(); const now = new Date();
@@ -8,10 +10,17 @@ export default async function CalendarPage() {
const to = new Date(now); const to = new Date(now);
to.setMonth(to.getMonth() + 10); to.setMonth(to.getMonth() + 10);
const [calendars, events] = await Promise.all([ const [{ user }, calendars, events] = await Promise.all([
getCurrentSession(),
listCalendars(), listCalendars(),
listEvents({ from, to, calendarIds: "all" }), listEvents({ from, to, calendarIds: "all" }),
]); ]);
return <CalendarShell calendars={calendars} events={events} />; return (
<CalendarShell
calendars={calendars}
events={events}
defaultView={user.themeCalView as CalView}
/>
);
} }
src/app/d/[slug]/page.tsx
+58 -10
View File
@@ -1,13 +1,20 @@
import { notFound } from "next/navigation"; import { notFound } from "next/navigation";
import { Suspense } from "react"; import { Suspense } from "react";
import { getCurrentSession } from "@/lib/session"; import { getCurrentSession } from "@/lib/session";
import { parseDashboardLayout, computeDefaultLayout } from "@/lib/dashboard"; import { parseDashboardLayout } from "@/lib/dashboard";
import { computeDefaultLayout } from "@/lib/dashboard.server";
import { getWidget, getWidgetMetas } from "@/modules/_core"; import { getWidget, getWidgetMetas } from "@/modules/_core";
import { getDashboardBySlug } from "@/app/d/actions"; import { getDashboardBySlug } from "@/app/d/actions";
import { DashboardEditor } from "@/components/dashboard-editor"; import { DashboardEditor } from "@/components/dashboard-editor";
import { QuickAddFab } from "@/components/quick-add-fab";
import { EditDashboardButton } from "@/components/edit-dashboard-button"; import { EditDashboardButton } from "@/components/edit-dashboard-button";
import { DashboardSwitcher } from "@/components/dashboard-switcher";
import { DashboardTab } from "@/components/dashboard-tab";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { auth } from "@/lib/auth";
import { db } from "@/lib/db";
import { dashboards } from "@/modules/_core/schema";
import { asc, eq } from "drizzle-orm";
import type { DashLayout } from "@/modules/_core/themes";
const smColSpan: Record<number, string> = { const smColSpan: Record<number, string> = {
1: "sm:col-span-1", 1: "sm:col-span-1",
@@ -24,6 +31,9 @@ const smColSpan: Record<number, string> = {
12: "sm:col-span-12", 12: "sm:col-span-12",
}; };
const greetingForHour = (h: number) =>
h < 5 ? "Up early" : h < 12 ? "Good morning" : h < 18 ? "Good afternoon" : "Good evening";
export default async function DashboardPage({ export default async function DashboardPage({
params, params,
searchParams, searchParams,
@@ -52,17 +62,55 @@ export default async function DashboardPage({
); );
} }
// For dashboard tabs sub-header, pull the user's dashboards (small list).
const session = await auth();
const userDashboards = session?.user?.id
? await db
.select({
id: dashboards.id,
name: dashboards.name,
slug: dashboards.slug,
isDefault: dashboards.isDefault,
position: dashboards.position,
})
.from(dashboards)
.where(eq(dashboards.userId, session.user.id))
.orderBy(asc(dashboards.position), asc(dashboards.createdAt))
: [];
const ctx = { userId: user.id, householdId: household.id }; const ctx = { userId: user.id, householdId: household.id };
const placements = [...layout.widgets].sort((a, b) => a.y - b.y || a.x - b.x); const placements = [...layout.widgets].sort((a, b) => a.y - b.y || a.x - b.x);
const dashLayout = (user.themeDashLayout as DashLayout) ?? "classic";
const containerCls =
dashLayout === "glance" ? "max-w-[760px] mx-auto" : dashLayout === "split" ? "" : "";
const greeting = greetingForHour(new Date().getHours());
const today = new Date().toLocaleDateString(undefined, {
weekday: "long",
month: "long",
day: "numeric",
});
const firstName = (user.name ?? "").split(" ")[0] ?? "";
return ( return (
<div className="p-4 sm:p-6"> <div className={containerCls}>
<div className="mb-6 flex items-center justify-between"> {userDashboards.length > 1 && (
<h1 className="text-2xl font-bold">{dashboard.name}</h1> <div className="flex items-center gap-1 mb-4 overflow-x-auto">
<div className="flex items-center gap-2"> {userDashboards.map((d) => (
<QuickAddFab /> <DashboardTab key={d.id} slug={d.slug} name={d.name} />
<EditDashboardButton /> ))}
<DashboardSwitcher dashboards={userDashboards} />
</div> </div>
)}
<div className="mb-6 flex items-end justify-between gap-4 flex-wrap">
<div>
<h1 className="serif text-[26px] sm:text-[30px] leading-tight tracking-tight">
{greeting}
{firstName && `, ${firstName}`}.
</h1>
<p className="muted mt-1 text-[13px]">{today}</p>
</div>
<EditDashboardButton />
</div> </div>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-12"> <div className="grid grid-cols-1 gap-4 sm:grid-cols-12">
@@ -73,8 +121,8 @@ export default async function DashboardPage({
return ( return (
<div key={i} className={`col-span-1 ${colClass}`}> <div key={i} className={`col-span-1 ${colClass}`}>
<Card className="h-full"> <Card className="h-full">
<CardHeader className="pb-2"> <CardHeader>
<CardTitle className="text-base">{widget.title}</CardTitle> <CardTitle>{widget.title}</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<Suspense <Suspense
src/app/d/actions.ts
+2 -1
View File
@@ -8,7 +8,8 @@ import { db } from "@/lib/db";
import { getCurrentSession } from "@/lib/session"; import { getCurrentSession } from "@/lib/session";
import { getWidget } from "@/modules/_core"; import { getWidget } from "@/modules/_core";
import { dashboards } from "@/modules/_core/schema"; import { dashboards } from "@/modules/_core/schema";
import { computeDefaultLayout, type DashboardLayout } from "@/lib/dashboard"; import { type DashboardLayout } from "@/lib/dashboard";
import { computeDefaultLayout } from "@/lib/dashboard.server";
export type DashboardMeta = { export type DashboardMeta = {
id: string; id: string;
src/app/globals.css
+1061 -170
View File
File diff suppressed because it is too large Load Diff
src/app/layout.tsx
+86 -25
View File
@@ -1,8 +1,7 @@
import type { Metadata, Viewport } from "next"; import type { Metadata, Viewport } from "next";
import "./globals.css"; import "./globals.css";
import { Geist } from "next/font/google"; import { Inter, Source_Serif_4, Newsreader, Fraunces, JetBrains_Mono } from "next/font/google";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { AppNav } from "@/components/app-nav";
import "@/modules"; // registers all module manifests import "@/modules"; // registers all module manifests
import { auth } from "@/lib/auth"; import { auth } from "@/lib/auth";
import { db } from "@/lib/db"; import { db } from "@/lib/db";
@@ -15,11 +14,34 @@ import { QuickAddSheet } from "@/components/quick-add-sheet";
import { CommandPalette } from "@/components/command-palette"; import { CommandPalette } from "@/components/command-palette";
import { PwaRegister } from "@/components/pwa-register"; import { PwaRegister } from "@/components/pwa-register";
import { InstallPrompt } from "@/components/install-prompt"; import { InstallPrompt } from "@/components/install-prompt";
import { AppShell } from "@/components/app-shell";
import { DEFAULT_THEME, navStyleToDataNav } from "@/modules/_core/themes";
import type { Palette, ThemeMode, FontPair, Density, NavStyle } from "@/modules/_core/themes";
const geist = Geist({ subsets: ["latin"], variable: "--font-sans" }); const inter = Inter({ subsets: ["latin"], variable: "--sans-inter", display: "swap" });
const sourceSerif = Source_Serif_4({
subsets: ["latin"],
variable: "--serif-source",
display: "swap",
});
const newsreader = Newsreader({
subsets: ["latin"],
variable: "--serif-newsreader",
display: "swap",
});
const fraunces = Fraunces({
subsets: ["latin"],
variable: "--serif-fraunces",
display: "swap",
});
const jetbrains = JetBrains_Mono({
subsets: ["latin"],
variable: "--mono-jb",
display: "swap",
});
export const viewport: Viewport = { export const viewport: Viewport = {
themeColor: "#4F46E5", themeColor: "#1F1B16",
}; };
export const metadata: Metadata = { export const metadata: Metadata = {
@@ -36,34 +58,60 @@ export const metadata: Metadata = {
}, },
}; };
// Runs before paint — reads localStorage / prefers-color-scheme and applies // Pre-paint: read user's theme prefs from localStorage and apply data-* + .dark.
// data-theme + dark class to <html> so signed-out pages also get the right theme. // Falls back to clay/serif-sans/regular/sidebar/system if nothing is stored.
const prePaintScript = `(function(){ const prePaintScript = `(function(){
try { try {
var t = localStorage.getItem('theme') || 'default'; var palette = localStorage.getItem('themePalette') || localStorage.getItem('theme') || 'clay';
var m = localStorage.getItem('themeMode') || 'system'; var mode = localStorage.getItem('themeMode') || 'system';
var dark = m === 'dark' || (m === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches); var fontPair = localStorage.getItem('themeFontPair') || 'serif-sans';
document.documentElement.setAttribute('data-theme', t); var density = localStorage.getItem('themeDensity') || 'regular';
if (dark) document.documentElement.classList.add('dark'); var navStyle = localStorage.getItem('themeNavStyle') || 'rail-desktop';
else document.documentElement.classList.remove('dark'); var dataNav = navStyle === 'compact-rail' ? 'rail'
: navStyle === 'top-nav' ? 'top'
: navStyle === 'fab-only' ? 'fab' : 'sidebar';
if (window.matchMedia && window.matchMedia('(max-width: 759px)').matches) {
dataNav = navStyle === 'fab-only' ? 'fab' : 'bottom';
}
var dark = mode === 'dark' || (mode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
var html = document.documentElement;
html.setAttribute('data-theme', palette);
html.setAttribute('data-font-pair', fontPair);
html.setAttribute('data-density', density);
html.setAttribute('data-nav', dataNav);
if (dark) html.classList.add('dark'); else html.classList.remove('dark');
} catch(e) {} } catch(e) {}
})();`; })();`;
export default async function RootLayout({ children }: { children: React.ReactNode }) { export default async function RootLayout({ children }: { children: React.ReactNode }) {
let theme = "default"; let palette: Palette = DEFAULT_THEME.palette;
let themeMode = "system"; let mode: ThemeMode = DEFAULT_THEME.mode;
let fontPair: FontPair = DEFAULT_THEME.fontPair;
let density: Density = DEFAULT_THEME.density;
let navStyle: NavStyle = DEFAULT_THEME.navStyle;
let userDashboards: DashboardMeta[] = []; let userDashboards: DashboardMeta[] = [];
let signedIn = false;
const session = await auth(); const session = await auth();
if (session?.user?.id) { if (session?.user?.id) {
signedIn = true;
const [row] = await db const [row] = await db
.select({ theme: users.theme, themeMode: users.themeMode }) .select({
themePalette: users.themePalette,
themeMode: users.themeMode,
themeFontPair: users.themeFontPair,
themeDensity: users.themeDensity,
themeNavStyle: users.themeNavStyle,
})
.from(users) .from(users)
.where(eq(users.id, session.user.id)) .where(eq(users.id, session.user.id))
.limit(1); .limit(1);
if (row) { if (row) {
theme = row.theme; palette = row.themePalette as Palette;
themeMode = row.themeMode; mode = row.themeMode as ThemeMode;
fontPair = row.themeFontPair as FontPair;
density = row.themeDensity as Density;
navStyle = row.themeNavStyle as NavStyle;
} }
userDashboards = await db userDashboards = await db
.select({ .select({
@@ -78,25 +126,38 @@ export default async function RootLayout({ children }: { children: React.ReactNo
.orderBy(asc(dashboards.position), asc(dashboards.createdAt)); .orderBy(asc(dashboards.position), asc(dashboards.createdAt));
} }
// For system mode we can't know the preference on the server — the inline // Server-side initial dark guess: only for `dark` mode (system mode is corrected
// script will correct it before paint. We optimistically render light here. // before paint by the inline script). Avoids a flash on signed-in users.
const isDark = themeMode === "dark"; const isDark = mode === "dark";
const initialDataNav = navStyleToDataNav(navStyle);
const quickAdds = getQuickAdds(); const quickAdds = getQuickAdds();
const fontVars = cn(
inter.variable,
sourceSerif.variable,
newsreader.variable,
fraunces.variable,
jetbrains.variable,
);
return ( return (
<html <html
lang="en" lang="en"
data-theme={theme} data-theme={palette}
className={cn("font-sans", geist.variable, isDark ? "dark" : "")} data-font-pair={fontPair}
data-density={density}
data-nav={initialDataNav}
className={cn(fontVars, isDark ? "dark" : "")}
> >
<head> <head>
<script dangerouslySetInnerHTML={{ __html: prePaintScript }} /> <script dangerouslySetInnerHTML={{ __html: prePaintScript }} />
</head> </head>
<body className="min-h-screen"> <body>
<QuickAddProvider actions={quickAdds}> <QuickAddProvider actions={quickAdds}>
<AppNav dashboards={userDashboards} /> <AppShell signedIn={signedIn} navStyle={navStyle} dashboards={userDashboards}>
<main>{children}</main> {children}
</AppShell>
<QuickAddSheet /> <QuickAddSheet />
<CommandPalette /> <CommandPalette />
<InstallPrompt /> <InstallPrompt />
src/app/login/page.tsx
+17 -5
View File
@@ -4,21 +4,32 @@ import { cookies } from "next/headers";
import { redirect } from "next/navigation"; import { redirect } from "next/navigation";
import { DEV_LOGIN_COOKIE, isDevLoginEnabled } from "@/lib/dev-login-config"; import { DEV_LOGIN_COOKIE, isDevLoginEnabled } from "@/lib/dev-login-config";
import { createDevSession } from "@/lib/dev-login"; import { createDevSession } from "@/lib/dev-login";
import { BrandMark } from "@/components/brand-mark";
export default function LoginPage() { export default function LoginPage() {
const devLoginEnabled = isDevLoginEnabled(); const devLoginEnabled = isDevLoginEnabled();
return ( return (
<main className="flex min-h-screen flex-col items-center justify-center p-8"> <main
<div className="flex flex-col items-center gap-6"> className="flex min-h-screen flex-col items-center justify-center p-8"
<h1 className="text-4xl font-bold">famapp</h1> style={{ background: "var(--paper)" }}
>
<div
className="rounded-[var(--r-lg)] shadow-[var(--shadow-2)] p-10 max-w-sm w-full text-center"
style={{ background: "var(--card)", border: "0.5px solid var(--hair)" }}
>
<div className="flex justify-center mb-3">
<BrandMark />
</div>
<h1 className="serif text-[28px] font-medium tracking-tight mb-2">famapp</h1>
<p className="muted text-[13.5px] mb-6">Sign in to your household.</p>
<form <form
action={async () => { action={async () => {
"use server"; "use server";
await signIn("authentik", { redirectTo: "/" }); await signIn("authentik", { redirectTo: "/" });
}} }}
> >
<Button type="submit" size="lg"> <Button type="submit" size="lg" className="w-full">
Sign in with SSO Sign in with SSO
</Button> </Button>
</form> </form>
@@ -36,8 +47,9 @@ export default function LoginPage() {
}); });
redirect("/"); redirect("/");
}} }}
className="mt-3"
> >
<Button type="submit" variant="outline" size="lg"> <Button type="submit" variant="outline" size="lg" className="w-full">
Dev login Dev login
</Button> </Button>
</form> </form>
src/app/s/[token]/page.tsx
+24 -20
View File
@@ -1,14 +1,17 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { headers } from "next/headers"; import { headers } from "next/headers";
import { eq } from "drizzle-orm";
import { resolveShareToken } from "@/modules/_core/share"; import { resolveShareToken } from "@/modules/_core/share";
import { getEntityType } from "@/modules/_core/registry"; import { getEntityType } from "@/modules/_core/registry";
import { isRateLimited, recordFailure } from "@/lib/rate-limit"; import { isRateLimited, recordFailure } from "@/lib/rate-limit";
import { db } from "@/lib/db";
import { users } from "@/modules/_core/schema";
import { ShareFrame } from "@/components/share/share-frame";
export const metadata: Metadata = { export const metadata: Metadata = {
robots: { index: false, follow: false }, robots: { index: false, follow: false },
}; };
// Rate-limit prefix length — must match the value used in middleware.
const RL_PREFIX_LEN = 8; const RL_PREFIX_LEN = 8;
export default async function SharePage({ params }: { params: Promise<{ token: string }> }) { export default async function SharePage({ params }: { params: Promise<{ token: string }> }) {
@@ -20,19 +23,12 @@ export default async function SharePage({ params }: { params: Promise<{ token: s
"0.0.0.0"; "0.0.0.0";
const rlKey = `${ip}:${token.slice(0, RL_PREFIX_LEN)}`; const rlKey = `${ip}:${token.slice(0, RL_PREFIX_LEN)}`;
// Secondary rate-limit check in the Node.js runtime (failure-only bucket).
// The primary 429 enforcement lives in src/middleware.ts which counts all
// requests in the Edge runtime. This page tracks only failed token lookups,
// providing accurate per-failure accounting. The two buckets are independent
// (separate module instances across runtimes); a shared Redis store would
// unify them for multi-replica deployments.
if (isRateLimited(rlKey)) { if (isRateLimited(rlKey)) {
return <ShareRateLimitError />; return <ShareRateLimitError />;
} }
const resolved = await resolveShareToken(token); const resolved = await resolveShareToken(token);
if (!resolved) { if (!resolved) {
// Only failed lookups increment the failure bucket.
recordFailure(rlKey); recordFailure(rlKey);
return <ShareError />; return <ShareError />;
} }
@@ -48,24 +44,32 @@ export default async function SharePage({ params }: { params: Promise<{ token: s
return <ShareError />; return <ShareError />;
} }
// Best-effort lookup of the creator's display name. Doesn't reveal email.
const [creator] = resolved.createdBy
? await db
.select({ name: users.name })
.from(users)
.where(eq(users.id, resolved.createdBy))
.limit(1)
: [];
return ( return (
<div className="min-h-screen"> <ShareFrame
<div className="border-b bg-background px-4 py-3"> expiresAt={resolved.expiresAt}
<p className="text-xs text-muted-foreground"> capabilities={resolved.capabilities}
Shared via famapp token={token}
{resolved.capabilities.write ? " · You can edit this" : " · View only"} sharedByName={creator?.name ?? null}
</p> >
</div>
{entityReg.renderSharedView({ data, capabilities: resolved.capabilities, token })} {entityReg.renderSharedView({ data, capabilities: resolved.capabilities, token })}
</div> </ShareFrame>
); );
} }
function ShareRateLimitError() { function ShareRateLimitError() {
return ( return (
<div className="flex min-h-[60vh] flex-col items-center justify-center gap-3 p-8 text-center"> <div className="flex min-h-[60vh] flex-col items-center justify-center gap-3 p-8 text-center">
<h1 className="text-xl font-semibold">Too many requests</h1> <h1 className="serif text-[28px] font-medium tracking-tight">Too many requests</h1>
<p className="max-w-sm text-sm text-muted-foreground"> <p className="max-w-sm text-[13.5px] muted">
You have made too many requests in a short period. Please wait a minute and try again. You have made too many requests in a short period. Please wait a minute and try again.
</p> </p>
</div> </div>
@@ -75,8 +79,8 @@ function ShareRateLimitError() {
function ShareError({ message }: { message?: string }) { function ShareError({ message }: { message?: string }) {
return ( return (
<div className="flex min-h-[60vh] flex-col items-center justify-center gap-3 p-8 text-center"> <div className="flex min-h-[60vh] flex-col items-center justify-center gap-3 p-8 text-center">
<h1 className="text-xl font-semibold">Link not found</h1> <h1 className="serif text-[28px] font-medium tracking-tight">Link not found</h1>
<p className="max-w-sm text-sm text-muted-foreground"> <p className="max-w-sm text-[13.5px] muted">
{message ?? {message ??
"This share link may have expired or been revoked. Ask the sender for a new link."} "This share link may have expired or been revoked. Ask the sender for a new link."}
</p> </p>
src/app/settings/actions.ts
+62 -6
View File
@@ -4,17 +4,73 @@ import { eq } from "drizzle-orm";
import { revalidatePath } from "next/cache"; import { revalidatePath } from "next/cache";
import { db } from "@/lib/db"; import { db } from "@/lib/db";
import { users } from "@/modules/_core/schema"; import { users } from "@/modules/_core/schema";
import { VALID_THEME_IDS, VALID_THEME_MODES } from "@/modules/_core/themes"; import {
import type { ThemeId, ThemeMode } from "@/modules/_core/themes"; VALID_PALETTES,
VALID_THEME_MODES,
VALID_FONT_PAIRS,
VALID_DENSITIES,
VALID_DASH_LAYOUTS,
VALID_CAL_VIEWS,
VALID_NAV_STYLES,
} from "@/modules/_core/themes";
import type {
Palette,
ThemeMode,
FontPair,
Density,
DashLayout,
CalView,
NavStyle,
} from "@/modules/_core/themes";
import { getCurrentSession } from "@/lib/session"; import { getCurrentSession } from "@/lib/session";
import { revokeShareLink } from "@/modules/_core/share"; import { revokeShareLink } from "@/modules/_core/share";
export async function setUserTheme({ theme, mode }: { theme: ThemeId; mode: ThemeMode }) { export interface ThemePatch {
if (!VALID_THEME_IDS.has(theme)) throw new Error("Invalid theme"); palette?: Palette;
if (!VALID_THEME_MODES.has(mode)) throw new Error("Invalid theme mode"); mode?: ThemeMode;
fontPair?: FontPair;
density?: Density;
dashLayout?: DashLayout;
calView?: CalView;
navStyle?: NavStyle;
}
export async function setUserTheme(patch: ThemePatch) {
const update: Record<string, string> = {};
if (patch.palette !== undefined) {
if (!VALID_PALETTES.has(patch.palette)) throw new Error("Invalid palette");
update["themePalette"] = patch.palette;
}
if (patch.mode !== undefined) {
if (!VALID_THEME_MODES.has(patch.mode)) throw new Error("Invalid theme mode");
update["themeMode"] = patch.mode;
}
if (patch.fontPair !== undefined) {
if (!VALID_FONT_PAIRS.has(patch.fontPair)) throw new Error("Invalid font pair");
update["themeFontPair"] = patch.fontPair;
}
if (patch.density !== undefined) {
if (!VALID_DENSITIES.has(patch.density)) throw new Error("Invalid density");
update["themeDensity"] = patch.density;
}
if (patch.dashLayout !== undefined) {
if (!VALID_DASH_LAYOUTS.has(patch.dashLayout)) throw new Error("Invalid dashboard layout");
update["themeDashLayout"] = patch.dashLayout;
}
if (patch.calView !== undefined) {
if (!VALID_CAL_VIEWS.has(patch.calView)) throw new Error("Invalid calendar view");
update["themeCalView"] = patch.calView;
}
if (patch.navStyle !== undefined) {
if (!VALID_NAV_STYLES.has(patch.navStyle)) throw new Error("Invalid nav style");
update["themeNavStyle"] = patch.navStyle;
}
if (Object.keys(update).length === 0) return;
const { user } = await getCurrentSession(); const { user } = await getCurrentSession();
await db.update(users).set({ theme, themeMode: mode }).where(eq(users.id, user.id)); await db.update(users).set(update).where(eq(users.id, user.id));
} }
export async function setCompletionVisibilityHours(hours: number): Promise<void> { export async function setCompletionVisibilityHours(hours: number): Promise<void> {
src/app/settings/page.tsx
+291 -55
View File
@@ -7,44 +7,183 @@ import { ThemePicker } from "@/components/theme-picker";
import { CompletionDelaySetting } from "@/components/completion-delay-setting"; import { CompletionDelaySetting } from "@/components/completion-delay-setting";
import { PushOptIn } from "@/components/push-opt-in"; import { PushOptIn } from "@/components/push-opt-in";
import { NotifyChannelToggles } from "@/components/notify-channel-toggles"; import { NotifyChannelToggles } from "@/components/notify-channel-toggles";
import { ResponsiveSidebar } from "@/components/settings-section";
import type { SectionId } from "@/components/settings-section";
import { revokeShareLinkAction } from "./actions"; import { revokeShareLinkAction } from "./actions";
import { listCalendars } from "@/modules/calendar/server/queries";
import { listLists } from "@/modules/lists/server/queries";
import Link from "next/link"; import Link from "next/link";
import { NavIcon } from "@/components/nav-icon";
import { Mail, Globe, History, Sun, Bell, Pencil, Lock, Plus } from "lucide-react";
export default async function SettingsPage() { const VALID_SECTIONS = new Set<SectionId>([
const { user } = await getCurrentSession(); "household",
const shareLinks = await getActiveShareLinks(); "sharing",
"notifications",
"calendars",
"appearance",
"data",
]);
export default async function SettingsPage({
searchParams,
}: {
searchParams: Promise<{ s?: string }>;
}) {
const sp = await searchParams;
const section: SectionId = VALID_SECTIONS.has(sp.s as SectionId)
? (sp.s as SectionId)
: "household";
const { user, household } = await getCurrentSession();
const ntfyConfigured = !!(process.env["NTFY_URL"] && process.env["NTFY_TOPIC"]); const ntfyConfigured = !!(process.env["NTFY_URL"] && process.env["NTFY_TOPIC"]);
const vapidKey = process.env["VAPID_PUBLIC_KEY"] ?? ""; const vapidKey = process.env["VAPID_PUBLIC_KEY"] ?? "";
return ( return (
<div className="container max-w-2xl py-8 space-y-6"> <div className="grid gap-5 sm:grid-cols-[220px_1fr]">
<h1 className="text-2xl font-semibold">Settings</h1> <ResponsiveSidebar active={section} />
<div className="space-y-4">
{section === "household" && <HouseholdSection household={household} userName={user.name} />}
{section === "sharing" && <SharingSection />}
{section === "notifications" && (
<NotificationsSection user={user} vapidKey={vapidKey} ntfyConfigured={ntfyConfigured} />
)}
{section === "calendars" && <CalendarsAndListsSection />}
{section === "appearance" && <AppearanceSection user={user} />}
{section === "data" && <DataSection />}
</div>
</div>
);
}
function HouseholdSection({
household,
userName,
}: {
household: { id: string; name: string };
userName: string | null;
}) {
return (
<>
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>Appearance</CardTitle> <CardTitle>{household.name}</CardTitle>
<span className="meta">Self-hosted</span>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ThemePicker <p className="muted text-[13px] mb-3">
initialTheme={user.theme as "default" | "warm"} Household name shown on share links and the iOS PWA.
initialMode={user.themeMode as "light" | "dark" | "system"} </p>
signedIn <Link
/> href="/settings/household"
className="inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-[13px] font-medium border-[0.5px] hover:bg-[var(--shade)]"
style={{ borderColor: "var(--hair-2)" }}
>
<Pencil className="size-3.5" />
Edit household & members
</Link>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>Lists</CardTitle> <CardTitle>You</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<CompletionDelaySetting initialHours={user.completionVisibilityHours} /> <div className="set-row" style={{ borderBottom: "0", padding: 0 }}>
<span className="avatar avatar-lg" style={{ background: "var(--c-household)" }}>
{(userName ?? "?").trim()[0]?.toUpperCase()}
</span>
<div className="label">
<div className="t">{userName ?? "Anonymous"}</div>
<div className="d">Signed in via Authentik</div>
</div>
</div>
</CardContent> </CardContent>
</Card> </Card>
</>
);
}
async function SharingSection() {
const shareLinks = await getActiveShareLinks();
return (
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>Push Notifications</CardTitle> <CardTitle>Public share links</CardTitle>
</CardHeader>
<CardContent>
<p className="muted text-[12.5px] mb-3">
Share any calendar, list, note, or event with people outside the household. Links expire
on their own — no logins needed.
</p>
{shareLinks.length === 0 ? (
<p className="muted text-[13px]">No active share links.</p>
) : (
<div className="flex flex-col gap-2">
{shareLinks.map((link) => {
const registration = getEntityType(link.entityType);
const label = registration?.label.singular ?? link.entityType;
const iconName = link.entityType.startsWith("calendar.")
? "calendar"
: link.entityType.startsWith("notes.")
? "note"
: link.entityType.startsWith("lists.")
? "list"
: "link";
return (
<div
key={link.id}
className="flex items-center gap-3 rounded-[var(--r-md)] border-[0.5px] p-3"
style={{ borderColor: "var(--hair)" }}
>
<div
className="size-9 rounded-md flex items-center justify-center shrink-0"
style={{ background: "var(--paper-2)" }}
>
<NavIcon name={iconName} className="size-4 text-[var(--ink-soft)]" />
</div>
<div className="flex-1 min-w-0">
<div className="text-[13.5px] font-medium">{label}</div>
<div className="flex flex-wrap gap-2 items-center text-[11.5px] muted mt-0.5">
<code style={{ fontFamily: "var(--mono)" }}>
{link.capabilities.write ? "edit" : "view-only"}
</code>
{link.expiresAt && (
<span>· expires {link.expiresAt.toLocaleDateString()}</span>
)}
</div>
</div>
<form action={revokeShareLinkAction}>
<input type="hidden" name="id" value={link.id} />
<Button variant="destructive" size="sm" type="submit">
Revoke
</Button>
</form>
</div>
);
})}
</div>
)}
</CardContent>
</Card>
);
}
function NotificationsSection({
user,
vapidKey,
ntfyConfigured,
}: {
user: { notifPush: boolean; notifInApp: boolean; notifNtfy: boolean };
vapidKey: string;
ntfyConfigured: boolean;
}) {
return (
<>
<Card>
<CardHeader>
<CardTitle>Push notifications</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<PushOptIn vapidKey={vapidKey} /> <PushOptIn vapidKey={vapidKey} />
@@ -53,7 +192,7 @@ export default async function SettingsPage() {
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>Notification Channels</CardTitle> <CardTitle>Notification channels</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<NotifyChannelToggles <NotifyChannelToggles
@@ -64,52 +203,149 @@ export default async function SettingsPage() {
/> />
</CardContent> </CardContent>
</Card> </Card>
</>
);
}
async function CalendarsAndListsSection() {
const [calendars, lists] = await Promise.all([listCalendars(), listLists()]);
return (
<>
<Card>
<CardHeader>
<CardTitle>Calendars</CardTitle>
<Link
href="/calendar"
className="inline-flex items-center gap-1 px-2 py-1 rounded text-[12.5px] hover:bg-[var(--shade)]"
>
<Plus className="size-3.5" />
New
</Link>
</CardHeader>
<div>
{calendars.length === 0 ? (
<div className="muted px-[14px] py-4 text-[13px]">No calendars yet.</div>
) : (
calendars.map((c) => (
<div key={c.id} className="set-row">
<span
className="dot"
style={{ background: c.color ?? "var(--c-household)", width: 12, height: 12 }}
/>
<div className="label">
<div className="t">{c.name}</div>
<div className="d">
{c.visibility === "private" ? "Private" : "Household · everyone sees it"}
</div>
</div>
{c.visibility === "private" && <Lock className="size-3.5 text-[var(--ink-mute)]" />}
</div>
))
)}
</div>
</Card>
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>Active Share Links</CardTitle> <CardTitle>Lists</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
{shareLinks.length === 0 ? ( <CompletionDelaySetting initialHours={24} />
<p className="text-sm text-muted-foreground">No active share links.</p>
) : (
<ul className="space-y-3">
{shareLinks.map((link) => {
const registration = getEntityType(link.entityType);
const label = registration?.label.singular ?? link.entityType;
return (
<li key={link.id} className="flex items-center justify-between gap-4 text-sm">
<div className="min-w-0">
<span className="font-medium">{label}</span>
<span className="text-muted-foreground ml-2">
{link.capabilities.write ? "read + write" : "read-only"}
</span>
{link.expiresAt && (
<span className="text-muted-foreground ml-2">
· expires {link.expiresAt.toLocaleDateString()}
</span>
)}
</div>
<form action={revokeShareLinkAction}>
<input type="hidden" name="id" value={link.id} />
<Button variant="destructive" size="sm" type="submit">
Revoke
</Button>
</form>
</li>
);
})}
</ul>
)}
</CardContent> </CardContent>
</Card> <div>
{lists.length === 0 ? (
<Link <div className="muted px-[14px] py-4 text-[13px]">No lists yet.</div>
href="/settings/household" ) : (
className="inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm hover:bg-accent hover:text-accent-foreground" lists.map((l) => (
> <div key={l.id} className="set-row">
Household Settings <NavIcon
</Link> name={l.type === "shopping" ? "cart" : "check-square"}
className="size-4 text-[var(--ink-soft)]"
/>
<div className="label">
<div className="t">{l.name}</div>
<div className="d">
{l.type} · {l.openCount} open
</div> </div>
</div>
</div>
))
)}
</div>
</Card>
</>
);
}
function AppearanceSection({
user,
}: {
user: {
themePalette: string;
themeMode: string;
themeFontPair: string;
themeDensity: string;
themeDashLayout: string;
themeCalView: string;
themeNavStyle: string;
};
}) {
return (
<Card>
<CardHeader>
<CardTitle>Appearance</CardTitle>
<Sun className="size-4 text-[var(--ink-mute)]" />
</CardHeader>
<CardContent>
<ThemePicker
initialPalette={user.themePalette as "clay" | "indigo" | "sage" | "plum" | "ink"}
initialMode={user.themeMode as "light" | "dark" | "system"}
initialFontPair={
user.themeFontPair as "serif-sans" | "newsreader" | "fraunces" | "sans-only"
}
initialDensity={user.themeDensity as "compact" | "regular" | "comfy"}
initialDashLayout={user.themeDashLayout as "classic" | "split" | "glance"}
initialCalView={user.themeCalView as "month" | "week" | "day"}
initialNavStyle={
user.themeNavStyle as "rail-desktop" | "compact-rail" | "top-nav" | "fab-only"
}
signedIn
/>
</CardContent>
</Card>
);
}
function DataSection() {
return (
<Card>
<CardHeader>
<CardTitle>Data & backups</CardTitle>
</CardHeader>
<div>
<div className="set-row">
<History className="size-4 text-[var(--ink-soft)]" />
<div className="label">
<div className="t">Auto-backup</div>
<div className="d">Daily 03:00 → /var/backups/famapp/. Configured via host cron.</div>
</div>
</div>
<div className="set-row">
<Globe className="size-4 text-[var(--ink-soft)]" />
<div className="label">
<div className="t">Server</div>
<div className="d">Self-hosted via Docker Compose</div>
</div>
</div>
<div className="set-row" style={{ borderBottom: "0" }}>
<Mail className="size-4 text-[var(--ink-soft)]" />
<div className="label">
<div className="t">Export</div>
<div className="d">Not yet implemented — coming in v0.5</div>
</div>
<Bell className="size-4 text-[var(--ink-faint)]" />
</div>
</div>
</Card>
); );
} }
src/components/app-nav.tsx
-82
View File
@@ -1,82 +0,0 @@
import Link from "next/link";
import { Settings } from "lucide-react";
import { desc, eq } from "drizzle-orm";
import { getRegistry } from "@/modules/_core/registry";
import type { DashboardMeta } from "@/app/d/actions";
import { notifications } from "@/modules/_core/schema";
import { db } from "@/lib/db";
import { auth } from "@/lib/auth";
import { DashboardSwitcher } from "./dashboard-switcher";
import { DashboardTab } from "./dashboard-tab";
import { NotificationBell } from "./notification-bell";
async function getNotifications(userId: string) {
const rows = await db
.select()
.from(notifications)
.where(eq(notifications.userId, userId))
.orderBy(desc(notifications.createdAt))
.limit(20);
const unread = rows.filter((n) => !n.readAt).length;
return { rows, unread };
}
export async function AppNav({ dashboards = [] }: { dashboards?: DashboardMeta[] }) {
const { modules } = getRegistry();
const navItems = modules.flatMap((m) => (m.nav ? [m.nav] : []));
const session = await auth();
const userId = session?.user?.id;
const { rows: notifRows, unread } = userId
? await getNotifications(userId)
: { rows: [], unread: 0 };
return (
<header className="border-b">
<nav className="px-4 py-3 flex items-center gap-6">
<Link href="/" className="font-semibold text-sm shrink-0">
famapp
</Link>
{navItems.map((item) => (
<Link
key={item.href}
href={item.href}
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
>
{item.label}
</Link>
))}
<div className="ml-auto flex items-center gap-3">
{userId && (
<NotificationBell
initialUnread={unread}
initialItems={notifRows.map((n) => ({
id: n.id,
title: n.title,
body: n.body,
url: n.url ?? null,
createdAt: n.createdAt,
}))}
/>
)}
<Link
href="/settings"
className="text-muted-foreground hover:text-foreground transition-colors"
aria-label="Settings"
>
<Settings className="size-4" />
</Link>
</div>
</nav>
{dashboards.length > 0 && (
<div className="flex items-center gap-1 border-t px-4 overflow-x-auto">
{dashboards.map((d) => (
<DashboardTab key={d.id} slug={d.slug} name={d.name} />
))}
<DashboardSwitcher dashboards={dashboards} />
</div>
)}
</header>
);
}
src/components/app-shell.tsx
+45
View File
@@ -0,0 +1,45 @@
import { headers } from "next/headers";
import type { NavStyle } from "@/modules/_core/themes";
import type { DashboardMeta } from "@/app/d/actions";
import { Sidebar } from "@/components/sidebar";
import { Topbar } from "@/components/topbar";
import { BottomNav } from "@/components/bottom-nav";
import { Fab } from "@/components/fab";
import { NavModeProvider } from "@/components/nav-mode-provider";
const BARE_PREFIXES = ["/s/", "/login"];
interface Props {
signedIn: boolean;
navStyle: NavStyle;
dashboards: DashboardMeta[];
children: React.ReactNode;
}
export async function AppShell({ signedIn, navStyle, children }: Props) {
const h = await headers();
const pathname = h.get("x-pathname") ?? "";
const bare = BARE_PREFIXES.some(
(p) => pathname === p || pathname.startsWith(p + "/") || pathname === p.replace(/\/$/, ""),
);
if (bare || !signedIn) {
// No shell — share viewer and signed-out pages render bare.
return <>{children}</>;
}
const useTopVariant = navStyle === "top-nav";
return (
<div className="app">
{useTopVariant ? <Sidebar variant="top" /> : <Sidebar variant="side" />}
<main className="main">
<Topbar />
<div className="scroll-area">{children}</div>
</main>
<BottomNav />
<Fab />
<NavModeProvider navStyle={navStyle} />
</div>
);
}
src/components/bottom-nav.tsx
+21
View File
@@ -0,0 +1,21 @@
"use client";
import { NavLink } from "@/components/nav-link";
const ITEMS: Array<{ href: string; label: string; icon: string }> = [
{ href: "/", label: "Dashboard", icon: "home" },
{ href: "/calendar", label: "Calendar", icon: "calendar" },
{ href: "/lists", label: "Lists", icon: "list" },
{ href: "/notes", label: "Notes", icon: "note" },
{ href: "/settings", label: "Settings", icon: "settings" },
];
export function BottomNav() {
return (
<nav className="bottom-nav" aria-label="Primary navigation">
{ITEMS.map((it) => (
<NavLink key={it.href} href={it.href} icon={it.icon} label={it.label} variant="bottom" />
))}
</nav>
);
}
src/components/brand-mark.tsx
+21
View File
@@ -0,0 +1,21 @@
import { cn } from "@/lib/utils";
export function BrandMark({ size = "md", className }: { size?: "sm" | "md"; className?: string }) {
return (
<span
className={cn("brand-mark", size === "sm" && "brand-mark-sm", className)}
aria-hidden="true"
>
f
</span>
);
}
export function BrandWordmark({ className }: { className?: string }) {
return (
<span className={cn("brand", className)}>
<BrandMark />
<span className="brand-name">famapp</span>
</span>
);
}
src/components/dashboard-editor.tsx
+54 -5
View File
@@ -7,8 +7,9 @@ import { useEffect, useState, useTransition } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { GridLayout } from "react-grid-layout"; import { GridLayout } from "react-grid-layout";
import type { Layout } from "react-grid-layout"; import type { Layout } from "react-grid-layout";
import { GripVertical, Settings2, Trash2, RotateCcw, Plus } from "lucide-react"; import { GripVertical, Settings2, Trash2, RotateCcw, Plus, LayoutGrid } from "lucide-react";
import type { DashboardLayout, WidgetPlacement } from "@/lib/dashboard"; import type { DashboardLayout, WidgetPlacement, PresetId } from "@/lib/dashboard";
import { computePresetLayoutFromMetas } from "@/lib/dashboard";
import type { SerializedWidgetMeta } from "@/modules/_core/registry"; import type { SerializedWidgetMeta } from "@/modules/_core/registry";
import { saveDashboardLayout, resetDashboardLayout } from "@/app/d/actions"; import { saveDashboardLayout, resetDashboardLayout } from "@/app/d/actions";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
@@ -34,6 +35,7 @@ export function DashboardEditor({
const [pickerOpen, setPickerOpen] = useState(false); const [pickerOpen, setPickerOpen] = useState(false);
const [configuringIndex, setConfiguringIndex] = useState<number | null>(null); const [configuringIndex, setConfiguringIndex] = useState<number | null>(null);
const [containerWidth, setContainerWidth] = useState(1200); const [containerWidth, setContainerWidth] = useState(1200);
const [presetMenuOpen, setPresetMenuOpen] = useState(false);
useEffect(() => { useEffect(() => {
function measure() { function measure() {
@@ -107,6 +109,13 @@ export function DashboardEditor({
setConfiguringIndex(null); setConfiguringIndex(null);
} }
function applyPreset(preset: PresetId) {
const next = computePresetLayoutFromMetas(preset, widgetMetas);
setPlacements(next.widgets);
setIsDirty(true);
setPresetMenuOpen(false);
}
const gridItems: Layout = placements.map((p, i) => ({ const gridItems: Layout = placements.map((p, i) => ({
i: placementKey(p, i), i: placementKey(p, i),
x: p.x, x: p.x,
@@ -119,10 +128,50 @@ export function DashboardEditor({
})); }));
return ( return (
<div className="p-4 sm:p-6"> <div>
<div className="mb-6 flex items-center justify-between gap-4 flex-wrap"> <div className="mb-6 flex items-center justify-between gap-4 flex-wrap">
<h1 className="text-2xl font-bold">{dashboard.name}</h1> <h1 className="serif text-[26px] tracking-tight">{dashboard.name}</h1>
<div className="flex items-center gap-2 flex-wrap"> <div className="flex items-center gap-2 flex-wrap relative">
<div className="relative">
<Button
variant="outline"
size="sm"
onClick={() => setPresetMenuOpen((o) => !o)}
disabled={isPending}
>
<LayoutGrid className="size-4 mr-1" />
Preset
</Button>
{presetMenuOpen && (
<div
className="absolute right-0 top-9 z-50 min-w-[180px] rounded-md border-[0.5px] bg-card shadow-[var(--shadow-pop)]"
style={{ borderColor: "var(--hair-2)" }}
onMouseLeave={() => setPresetMenuOpen(false)}
>
<button
type="button"
onClick={() => applyPreset("classic")}
className="block w-full text-left px-3 py-2 text-sm hover:bg-[var(--shade)]"
>
Classic — main + side rail
</button>
<button
type="button"
onClick={() => applyPreset("split")}
className="block w-full text-left px-3 py-2 text-sm hover:bg-[var(--shade)]"
>
Split — two even columns
</button>
<button
type="button"
onClick={() => applyPreset("glance")}
className="block w-full text-left px-3 py-2 text-sm hover:bg-[var(--shade)]"
>
Glance — single column
</button>
</div>
)}
</div>
<Button variant="outline" size="sm" onClick={handleReset} disabled={isPending}> <Button variant="outline" size="sm" onClick={handleReset} disabled={isPending}>
<RotateCcw className="size-4 mr-1" /> <RotateCcw className="size-4 mr-1" />
Reset Reset
src/components/edit-dashboard-button.tsx
+1 -5
View File
@@ -7,11 +7,7 @@ export function EditDashboardButton() {
const pathname = usePathname(); const pathname = usePathname();
return ( return (
<button <button type="button" onClick={() => router.push(`${pathname}?edit=1`)} className="btn btn-sm">
type="button"
onClick={() => router.push(`${pathname}?edit=1`)}
className="rounded-md border border-input bg-background px-3 py-1.5 text-sm font-medium shadow-sm hover:bg-accent hover:text-accent-foreground transition-colors"
>
Edit dashboard Edit dashboard
</button> </button>
); );
src/components/fab.tsx
+14
View File
@@ -0,0 +1,14 @@
"use client";
import { useQuickAdd } from "@/components/quick-add-provider";
import { NavIcon } from "@/components/nav-icon";
export function Fab() {
const { openSheet } = useQuickAdd();
return (
<button type="button" className="fab" aria-label="Quick add" onClick={openSheet}>
<NavIcon name="plus" className="size-6" strokeWidth={2.4} />
</button>
);
}
src/components/install-prompt.tsx
+32 -17
View File
@@ -70,36 +70,51 @@ export function InstallPrompt() {
return ( return (
<div <div
role="banner" role="banner"
className="fixed bottom-0 left-0 right-0 z-50 flex items-start gap-3 border-t bg-background px-4 py-3 shadow-lg sm:bottom-4 sm:left-1/2 sm:right-auto sm:-translate-x-1/2 sm:rounded-xl sm:border sm:px-5 sm:py-4 sm:shadow-xl" className="fixed bottom-[80px] left-0 right-0 z-50 flex items-start gap-3 px-4 py-3 sm:bottom-4 sm:left-1/2 sm:right-auto sm:-translate-x-1/2 sm:px-5 sm:py-4"
style={{
background: "var(--card)",
border: "0.5px solid var(--hair-2)",
borderRadius: "var(--r-lg)",
boxShadow: "var(--shadow-pop)",
margin: "0 14px",
}}
> >
{/* App icon */} <div
<div className="mt-0.5 h-10 w-10 shrink-0 overflow-hidden rounded-xl bg-[#4F46E5]"> className="mt-0.5 size-10 shrink-0 overflow-hidden flex items-center justify-center"
{/* eslint-disable-next-line @next/next/no-img-element */} style={{
<img src="/icon-192.png" alt="" className="h-full w-full object-cover" /> borderRadius: 8,
background: "var(--ink)",
color: "var(--paper)",
fontFamily: "var(--serif)",
fontSize: 18,
fontWeight: 500,
}}
>
f
</div> </div>
<div className="flex-1 text-sm"> <div className="flex-1 text-[13.5px]">
<p className="font-semibold leading-snug">Add famapp to your home screen</p> <p className="font-medium leading-snug text-[var(--ink)] m-0">
Add famapp to your home screen
</p>
{prompt === "android" && ( {prompt === "android" && (
<> <>
<p className="mt-0.5 text-muted-foreground"> <p className="mt-1 muted text-[12.5px] m-0">
Install for a faster, app-like experience. Install for a faster, app-like experience.
</p> </p>
<button <button onClick={install} className="btn btn-sm btn-primary mt-2">
onClick={install}
className="mt-2 rounded-md bg-[#4F46E5] px-3 py-1.5 text-xs font-semibold text-white"
>
Install Install
</button> </button>
</> </>
)} )}
{prompt === "ios" && ( {prompt === "ios" && (
<p className="mt-0.5 text-muted-foreground"> <p className="mt-1 muted text-[12.5px] m-0">
Tap <Share className="inline-block h-4 w-4 align-text-bottom" aria-label="Share" /> then{" "} Tap <Share className="inline-block size-3.5 align-text-bottom" aria-label="Share" />{" "}
then{" "}
<strong className="font-medium"> <strong className="font-medium">
<Plus className="inline-block h-3.5 w-3.5 align-text-bottom" /> <Plus className="inline-block size-3 align-text-bottom" />
&nbsp;Add to Home Screen &nbsp;Add to Home Screen
</strong> </strong>
. .
@@ -110,9 +125,9 @@ export function InstallPrompt() {
<button <button
onClick={dismiss} onClick={dismiss}
aria-label="Dismiss" aria-label="Dismiss"
className="mt-0.5 shrink-0 rounded p-1 text-muted-foreground hover:bg-muted" className="mt-0.5 shrink-0 rounded p-1 text-[var(--ink-mute)] hover:bg-[var(--shade)]"
> >
<X className="h-4 w-4" /> <X className="size-4" />
</button> </button>
</div> </div>
); );
src/components/nav-icon.tsx
+83
View File
@@ -0,0 +1,83 @@
import {
Bell,
Calendar,
CalendarDays,
CheckSquare,
ChevronDown,
ChevronLeft,
ChevronRight,
Circle,
Clock,
Eye,
FileText,
Filter,
Globe,
History,
Home,
Link as LinkIcon,
ListChecks,
Lock,
Mail,
Menu,
MoreHorizontal,
Pencil,
Phone,
Pin,
PinOff,
Plus,
Search,
Settings,
Share2,
ShoppingCart,
Sparkles,
Sun,
Trash2,
Users,
X,
} from "lucide-react";
import type { LucideProps } from "lucide-react";
const ICONS: Record<string, React.ComponentType<LucideProps>> = {
home: Home,
calendar: Calendar,
"calendar-days": CalendarDays,
list: ListChecks,
"check-square": CheckSquare,
"file-text": FileText,
note: FileText,
settings: Settings,
history: History,
link: LinkIcon,
people: Users,
users: Users,
plus: Plus,
search: Search,
bell: Bell,
pin: Pin,
"pin-off": PinOff,
cart: ShoppingCart,
"shopping-cart": ShoppingCart,
share: Share2,
lock: Lock,
eye: Eye,
clock: Clock,
sparkles: Sparkles,
pencil: Pencil,
trash: Trash2,
globe: Globe,
phone: Phone,
filter: Filter,
sun: Sun,
mail: Mail,
menu: Menu,
more: MoreHorizontal,
x: X,
"chevron-left": ChevronLeft,
"chevron-right": ChevronRight,
"chevron-down": ChevronDown,
};
export function NavIcon({ name, ...rest }: { name: string } & LucideProps) {
const Icon = ICONS[name] ?? Circle;
return <Icon strokeWidth={1.6} {...rest} />;
}
src/components/nav-link.tsx
+55
View File
@@ -0,0 +1,55 @@
"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { NavIcon } from "@/components/nav-icon";
import { cn } from "@/lib/utils";
function isActive(pathname: string, href: string): boolean {
// Strip query/fragment from href before matching.
const cleaned = href.split("#")[0]?.split("?")[0] ?? href;
if (cleaned === "/") return pathname === "/" || pathname.startsWith("/d/");
return pathname === cleaned || pathname.startsWith(cleaned + "/");
}
interface Props {
href: string;
icon: string;
label: string;
className?: string;
iconClassName?: string;
variant?: "sidebar" | "bottom";
}
export function NavLink({
href,
icon,
label,
className,
iconClassName,
variant = "sidebar",
}: Props) {
const pathname = usePathname() ?? "";
const active = isActive(pathname, href);
if (variant === "bottom") {
return (
<Link href={href} aria-current={active ? "page" : undefined} className={className}>
<NavIcon name={icon} className={cn("size-5", iconClassName)} />
<span>{label}</span>
</Link>
);
}
return (
<Link
href={href}
aria-current={active ? "page" : undefined}
className={cn("nav-item", className)}
title={label}
>
<NavIcon name={icon} className={cn("size-4", iconClassName)} />
<span className="nav-label">{label}</span>
</Link>
);
}
src/components/nav-mode-provider.tsx
+29
View File
@@ -0,0 +1,29 @@
"use client";
import { useEffect } from "react";
import type { NavStyle } from "@/modules/_core/themes";
import { navStyleToDataNav } from "@/modules/_core/themes";
const MOBILE_QUERY = "(max-width: 759px)";
/** Listens to the mobile breakpoint and overrides data-nav on <html>.
* The pre-paint script in layout.tsx already applies the correct value
* on first paint; this picks up subsequent resizes. Runs once and stays
* mounted as long as the shell is mounted. */
export function NavModeProvider({ navStyle }: { navStyle: NavStyle }) {
useEffect(() => {
const html = document.documentElement;
const desktopNav = navStyleToDataNav(navStyle);
const apply = () => {
const isMobile = window.matchMedia(MOBILE_QUERY).matches;
const next = isMobile ? (navStyle === "fab-only" ? "fab" : "bottom") : desktopNav;
html.setAttribute("data-nav", next);
};
apply();
const mq = window.matchMedia(MOBILE_QUERY);
mq.addEventListener("change", apply);
return () => mq.removeEventListener("change", apply);
}, [navStyle]);
return null;
}
src/components/quick-add-fab.tsx
-17
View File
@@ -1,17 +0,0 @@
"use client";
import { useQuickAdd } from "./quick-add-provider";
export function QuickAddFab() {
const { openSheet } = useQuickAdd();
return (
<button
aria-label="Quick add"
onClick={openSheet}
className="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-md transition-opacity hover:opacity-90"
>
<span className="text-xl leading-none">+</span>
</button>
);
}
src/components/quick-add-sheet.tsx
+82 -28
View File
@@ -2,7 +2,9 @@
import { useEffect, useRef } from "react"; import { useEffect, useRef } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { Sparkles, X } from "lucide-react";
import { useQuickAdd } from "./quick-add-provider"; import { useQuickAdd } from "./quick-add-provider";
import { NavIcon } from "./nav-icon";
import type { SerializedQuickAddItem } from "@/modules/_core"; import type { SerializedQuickAddItem } from "@/modules/_core";
function groupByModule( function groupByModule(
@@ -18,6 +20,15 @@ function groupByModule(
return map; return map;
} }
const QUICK_ADD_ICON: Record<string, string> = {
"calendar-plus": "calendar",
"calendar-days": "calendar",
"shopping-cart": "cart",
"list-checks": "check-square",
"list-plus": "list",
"file-plus": "note",
};
export function QuickAddSheet() { export function QuickAddSheet() {
const { sheetOpen, closeSheet, actions } = useQuickAdd(); const { sheetOpen, closeSheet, actions } = useQuickAdd();
const router = useRouter(); const router = useRouter();
@@ -43,64 +54,107 @@ export function QuickAddSheet() {
return ( return (
<> <>
{/* Backdrop */}
<div <div
ref={backdropRef} ref={backdropRef}
className="fixed inset-0 z-40 bg-black/40" className="fixed inset-0 z-40"
style={{ background: "rgba(31,27,22,.32)", backdropFilter: "blur(2px)" }}
onClick={closeSheet} onClick={closeSheet}
aria-hidden="true" aria-hidden="true"
/> />
{/* Sheet panel — bottom on mobile, right-anchored popover on sm+ */}
<div <div
role="dialog" role="dialog"
aria-modal="true" aria-modal="true"
aria-label="Quick add" aria-label="Quick add"
className="fixed bottom-0 left-0 right-0 z-50 rounded-t-2xl bg-background shadow-xl sm:bottom-auto sm:left-auto sm:right-6 sm:top-16 sm:w-72 sm:rounded-xl" className="fixed bottom-0 left-0 right-0 z-50 sm:bottom-auto sm:left-1/2 sm:top-24 sm:-translate-x-1/2 sm:w-[480px] sm:max-w-[calc(100vw-32px)]"
style={{
background: "var(--paper)",
borderRadius: "18px 18px 0 0",
boxShadow: "0 -8px 32px rgba(31,27,22,.16)",
overflow: "hidden",
}}
> >
<div className="flex items-center justify-between border-b px-4 py-3"> <div
<span className="text-sm font-semibold">Quick add</span> style={{
padding: "16px 18px 12px",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
borderBottom: "0.5px solid var(--hair)",
}}
>
<h2
className="serif"
style={{ fontSize: 18, fontWeight: 500, margin: 0, color: "var(--ink)" }}
>
Quick add
</h2>
<button <button
onClick={closeSheet} onClick={closeSheet}
aria-label="Close quick add" aria-label="Close quick add"
className="rounded p-1 text-muted-foreground hover:bg-muted" className="btn btn-icon btn-ghost btn-sm"
> >
✕ <X className="size-3.5" />
</button> </button>
</div> </div>
<div className="max-h-[60vh] overflow-y-auto p-2 sm:max-h-96"> <div style={{ padding: "14px 18px" }}>
{[...groups.entries()].map(([moduleId, group]) => ( <div
<div key={moduleId} className="mb-2"> className="muted"
<p className="px-2 py-1 text-xs font-medium uppercase tracking-wide text-muted-foreground"> style={{
fontSize: 12,
marginBottom: 14,
display: "flex",
alignItems: "center",
gap: 6,
}}
>
<Sparkles className="size-3" />
<span>Pick what to add — or use ⌘K to search.</span>
</div>
<div className="max-h-[60vh] overflow-y-auto">
{[...groups.entries()].map(([moduleId, group], i) => (
<div key={moduleId} className="mb-2.5">
<div className="eyebrow mb-2" style={{ marginTop: i === 0 ? 0 : 8 }}>
{group.name} {group.name}
</p> </div>
<div className="grid grid-cols-2 gap-1.5">
{group.items.map((action) => ( {group.items.map((action) => (
<button <button
key={action.id} key={action.id}
onClick={() => handleAction(action.url)} onClick={() => handleAction(action.url)}
className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground" className="btn btn-sm justify-start"
> >
<span className="text-base leading-none">{iconEmoji(action.icon)}</span> <NavIcon
{action.label} name={QUICK_ADD_ICON[action.icon ?? ""] ?? "plus"}
className="size-3.5"
/>
<span className="truncate">{action.label}</span>
</button> </button>
))} ))}
</div> </div>
</div>
))} ))}
</div> </div>
</div> </div>
<div
className="dialog-foot"
style={{
padding: "12px 18px",
display: "flex",
gap: 8,
justifyContent: "flex-end",
borderTop: "0.5px solid var(--hair)",
background: "var(--paper-2)",
}}
>
<button className="btn btn-sm btn-ghost" onClick={closeSheet}>
Close
</button>
</div>
</div>
</> </>
); );
} }
function iconEmoji(icon?: string): string {
const map: Record<string, string> = {
"calendar-plus": "📅",
"calendar-days": "🗓️",
"shopping-cart": "🛒",
"list-checks": "✅",
"list-plus": "📋",
"file-plus": "📝",
};
return icon ? (map[icon] ?? "➕") : "➕";
}
src/components/settings-section.tsx
+115
View File
@@ -0,0 +1,115 @@
"use client";
import { useEffect, useState } from "react";
import Link from "next/link";
import { useRouter, usePathname, useSearchParams } from "next/navigation";
import { NavIcon } from "@/components/nav-icon";
import { cn } from "@/lib/utils";
const SECTIONS = [
{ id: "household", label: "Household", icon: "people" },
{ id: "sharing", label: "Sharing & links", icon: "link" },
{ id: "notifications", label: "Notifications", icon: "bell" },
{ id: "calendars", label: "Calendars & lists", icon: "calendar" },
{ id: "appearance", label: "Appearance", icon: "sun" },
{ id: "data", label: "Data & backups", icon: "history" },
] as const;
export type SectionId = (typeof SECTIONS)[number]["id"];
export function SettingsSidebar({ active }: { active: SectionId }) {
const router = useRouter();
const pathname = usePathname();
return (
<nav
className="rounded-[var(--r-lg)] border-[0.5px] bg-[var(--card)] shadow-[var(--shadow-1)] h-fit"
style={{ borderColor: "var(--hair)" }}
aria-label="Settings sections"
>
<div className="card-h">
<h3 className="serif text-[15px] m-0 font-medium">Settings</h3>
</div>
<div className="p-1.5">
{SECTIONS.map((s) => (
<button
key={s.id}
type="button"
className={cn("nav-item h-9")}
aria-current={active === s.id ? "page" : undefined}
onClick={() => {
const url = new URL(window.location.href);
url.searchParams.set("s", s.id);
router.replace(url.pathname + "?" + url.searchParams.toString() + url.hash, {
scroll: false,
});
}}
>
<NavIcon name={s.icon} className="size-4" />
<span className="nav-label">{s.label}</span>
</button>
))}
<div className="nav-divider" />
<Link href="/settings/household" className="nav-item h-9">
<NavIcon name="users" className="size-4" />
<span className="nav-label">Manage household</span>
</Link>
</div>
<SectionHashSync pathname={pathname} />
</nav>
);
}
// When the URL changes with a hash like #sharing (used by sidebar Share-links link),
// ensure the matching section opens.
function SectionHashSync({ pathname }: { pathname: string | null }) {
const router = useRouter();
const searchParams = useSearchParams();
useEffect(() => {
if (typeof window === "undefined") return;
const hash = window.location.hash.slice(1);
if (!hash) return;
if (!SECTIONS.some((s) => s.id === hash)) return;
if (searchParams?.get("s") === hash) return;
const url = new URL(window.location.href);
url.searchParams.set("s", hash);
router.replace(url.pathname + "?" + url.searchParams.toString(), { scroll: false });
}, [pathname, router, searchParams]);
return null;
}
export function SettingsTabsMobile({ active }: { active: SectionId }) {
const router = useRouter();
return (
<div className="seg w-full overflow-x-auto" style={{ display: "flex" }}>
{SECTIONS.map((s) => (
<button
key={s.id}
type="button"
role="tab"
aria-selected={active === s.id}
onClick={() => {
const url = new URL(window.location.href);
url.searchParams.set("s", s.id);
router.replace(url.pathname + "?" + url.searchParams.toString(), { scroll: false });
}}
>
{s.label.split(" ")[0]}
</button>
))}
</div>
);
}
export function ResponsiveSidebar({ active }: { active: SectionId }) {
const [isMobile, setIsMobile] = useState(false);
useEffect(() => {
const mq = window.matchMedia("(max-width: 759px)");
const apply = () => setIsMobile(mq.matches);
apply();
mq.addEventListener("change", apply);
return () => mq.removeEventListener("change", apply);
}, []);
if (isMobile) return <SettingsTabsMobile active={active} />;
return <SettingsSidebar active={active} />;
}
src/components/share/mini-day-card.tsx
+43
View File
@@ -0,0 +1,43 @@
interface Props {
date: Date;
/** Optional time string e.g. "7:30 – 9:30 pm" */
time?: string;
}
export function MiniDayCard({ date, time }: Props) {
const month = date.toLocaleDateString(undefined, { weekday: "short", month: "short" });
const day = date.getDate();
return (
<div
className="rounded-[var(--r-md)] p-4"
style={{
background: "var(--card)",
border: "0.5px solid var(--hair)",
}}
>
<div
style={{
fontFamily: "var(--mono)",
fontSize: 11,
color: "var(--bad)",
textTransform: "uppercase",
letterSpacing: "0.08em",
}}
>
{month}
</div>
<div
style={{
fontFamily: "var(--serif)",
fontSize: 32,
lineHeight: 1,
color: "var(--ink)",
margin: "6px 0 4px",
}}
>
{day}
</div>
{time && <div style={{ fontSize: 13, color: "var(--ink-soft)" }}>{time}</div>}
</div>
);
}
src/components/share/mini-map-card.tsx
+72
View File
@@ -0,0 +1,72 @@
interface Props {
name: string;
address?: string;
}
/** A tiny location card with a CSS-only gridded background and a center pin.
* No real map for v1 — just visual context. */
export function MiniMapCard({ name, address }: Props) {
return (
<div
className="rounded-[var(--r-md)] p-4 relative overflow-hidden flex flex-col gap-1.5"
style={{
background: "var(--card)",
border: "0.5px solid var(--hair)",
backgroundImage: `
linear-gradient(rgba(31,27,22,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(31,27,22,.05) 1px, transparent 1px)
`,
backgroundSize: "14px 14px",
backgroundPosition: "16px 16px",
}}
>
<span
style={{
fontFamily: "var(--mono)",
fontSize: 10.5,
color: "var(--ink-mute)",
textTransform: "uppercase",
letterSpacing: "0.06em",
zIndex: 1,
}}
>
Location
</span>
<span
style={{
fontFamily: "var(--serif)",
fontSize: 16,
color: "var(--ink-2)",
zIndex: 1,
}}
>
{name}
</span>
{address && (
<span
style={{
fontSize: 12,
color: "var(--ink-soft)",
zIndex: 1,
}}
>
{address}
</span>
)}
<span
aria-hidden="true"
style={{
position: "absolute",
width: 12,
height: 12,
borderRadius: "50%",
background: "var(--accent)",
boxShadow: "0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent)",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
}}
/>
</div>
);
}
src/components/share/share-banner.tsx
+59
View File
@@ -0,0 +1,59 @@
interface Props {
expiresAt: Date | null;
capabilities: { read: boolean; write: boolean };
token: string;
}
function relativeExpiry(d: Date): string {
const ms = d.getTime() - Date.now();
if (ms <= 0) return "expired";
const days = Math.round(ms / 86400000);
if (days >= 1) return `in ${days} day${days === 1 ? "" : "s"}`;
const hours = Math.round(ms / 3600000);
if (hours >= 1) return `in ${hours} hour${hours === 1 ? "" : "s"}`;
const mins = Math.round(ms / 60000);
return `in ${mins} min`;
}
export function ShareBanner({ expiresAt, capabilities, token }: Props) {
const mode = capabilities.write ? "edit" : "view-only";
return (
<div
className="flex items-center gap-3 px-6 py-2.5 text-[12.5px] flex-wrap"
style={{
background: "var(--paper-2)",
borderBottom: "0.5px solid var(--hair)",
color: "var(--ink-soft)",
}}
>
<span className="dot" style={{ background: "var(--c-bills)", width: 6, height: 6 }} />
<span>
Public share link · <span style={{ textTransform: "lowercase" }}>{mode}</span>
</span>
{expiresAt ? (
<>
<span style={{ color: "var(--ink-2)", fontWeight: 600 }}>
· expires {relativeExpiry(expiresAt)}
</span>
<span>· revoke anytime</span>
</>
) : (
<span>· no expiration</span>
)}
<code
className="ml-auto"
style={{
fontFamily: "var(--mono)",
fontSize: 11,
color: "var(--ink-mute)",
background: "var(--card)",
padding: "3px 8px",
borderRadius: 4,
border: "0.5px solid var(--hair)",
}}
>
/s/{token.slice(0, 12)}
</code>
</div>
);
}
src/components/share/share-brand-strip.tsx
+29
View File
@@ -0,0 +1,29 @@
import { BrandMark } from "@/components/brand-mark";
export function ShareBrandStrip({ sharedByName }: { sharedByName?: string | null }) {
return (
<div
className="px-6 py-7"
style={{ borderBottom: "0.5px solid var(--hair)", background: "var(--card)" }}
>
<div className="flex items-center gap-2.5 max-w-[720px] mx-auto">
<BrandMark />
<span
style={{
fontFamily: "var(--serif)",
fontSize: 15,
color: "var(--ink-2)",
fontWeight: 500,
}}
>
famapp{" "}
{sharedByName && (
<span style={{ color: "var(--ink-mute)", fontWeight: 400 }}>
· shared by {sharedByName}
</span>
)}
</span>
</div>
</div>
);
}
src/components/share/share-detail-card.tsx
+42
View File
@@ -0,0 +1,42 @@
import type { ReactNode } from "react";
export function ShareDetailCard({ children }: { children: ReactNode }) {
return (
<div
className="rounded-[var(--r-md)] mb-3.5"
style={{
background: "var(--card)",
border: "0.5px solid var(--hair)",
padding: "18px 22px",
}}
>
{children}
</div>
);
}
export function ShareRow({ label, children }: { label: string; children: ReactNode }) {
return (
<div
className="grid items-baseline gap-4 py-2.5"
style={{
gridTemplateColumns: "110px 1fr",
borderBottom: "0.5px solid var(--hair)",
fontSize: "14.5px",
}}
>
<span
style={{
fontFamily: "var(--mono)",
fontSize: 11,
color: "var(--ink-mute)",
textTransform: "uppercase",
letterSpacing: "0.06em",
}}
>
{label}
</span>
<span style={{ color: "var(--ink-2)" }}>{children}</span>
</div>
);
}
src/components/share/share-eyebrow.tsx
+21
View File
@@ -0,0 +1,21 @@
import type { ReactNode } from "react";
export function ShareEyebrow({ children }: { children: ReactNode }) {
return (
<span
className="inline-flex items-center gap-2 mb-5"
style={{
fontFamily: "var(--mono)",
fontSize: 11,
color: "var(--ink-mute)",
textTransform: "uppercase",
letterSpacing: "0.06em",
padding: "4px 10px",
borderRadius: 999,
background: "var(--paper-2)",
}}
>
{children}
</span>
);
}
src/components/share/share-frame.tsx
+46
View File
@@ -0,0 +1,46 @@
import Link from "next/link";
import { ShareBanner } from "./share-banner";
import { ShareBrandStrip } from "./share-brand-strip";
interface Props {
expiresAt?: Date | null;
capabilities: { read: boolean; write: boolean };
token: string;
sharedByName?: string | null;
children: React.ReactNode;
}
export function ShareFrame({ expiresAt, capabilities, token, sharedByName, children }: Props) {
return (
<div className="min-h-screen flex flex-col">
<ShareBanner expiresAt={expiresAt ?? null} capabilities={capabilities} token={token} />
<ShareBrandStrip sharedByName={sharedByName} />
<main className="flex-1 w-full mx-auto" style={{ maxWidth: 720, padding: "36px 24px 80px" }}>
{children}
<ShareFoot />
</main>
</div>
);
}
function ShareFoot() {
return (
<div className="muted text-center text-[12px] mt-16 leading-[1.6]">
<p className="mb-1">
This page is a snapshot. The original lives in the host&apos;s famapp household and may
change &mdash; we&apos;ll reflect updates here until the link expires.
</p>
<p className="m-0">
Hosted on <code style={{ fontFamily: "var(--mono)", fontSize: 11 }}>famapp</code> ·
self-hosted ·{" "}
<Link
href="/"
className="underline"
style={{ color: "var(--ink-soft)", textUnderlineOffset: 3 }}
>
about famapp
</Link>
</p>
</div>
);
}
src/components/sidebar.tsx
+155
View File
@@ -0,0 +1,155 @@
import Link from "next/link";
import { eq } from "drizzle-orm";
import { auth } from "@/lib/auth";
import { db } from "@/lib/db";
import { getRegistry } from "@/modules/_core/registry";
import { householdMembers, households, users } from "@/modules/_core/schema";
import { BrandMark } from "@/components/brand-mark";
import { NavIcon } from "@/components/nav-icon";
import { NavLink } from "@/components/nav-link";
type Variant = "side" | "top";
const PRIMARY_NAV: Array<{ href: string; label: string; icon: string }> = [
{ href: "/", label: "Dashboard", icon: "home" },
];
const SECONDARY_NAV: Array<{ href: string; label: string; icon: string }> = [
{ href: "/settings#sharing", label: "Share links", icon: "link" },
];
async function getHouseholdInfo(userId: string) {
const [row] = await db
.select({ household: households })
.from(householdMembers)
.innerJoin(households, eq(householdMembers.householdId, households.id))
.where(eq(householdMembers.userId, userId))
.limit(1);
if (!row) return null;
const members = await db
.select({ id: users.id, name: users.name, image: users.image, email: users.email })
.from(householdMembers)
.innerJoin(users, eq(householdMembers.userId, users.id))
.where(eq(householdMembers.householdId, row.household.id))
.limit(6);
return { household: row.household, members };
}
export async function Sidebar({ variant = "side" }: { variant?: Variant }) {
const { modules } = getRegistry();
const moduleNav = modules.flatMap((m) => (m.nav ? [m.nav] : []));
const navItems = [
...PRIMARY_NAV,
...moduleNav.map((n) => ({ href: n.href, label: n.label, icon: n.icon ?? "circle" })),
{ href: "/settings", label: "Settings", icon: "settings" },
];
const session = await auth();
const householdInfo = session?.user?.id ? await getHouseholdInfo(session.user.id) : null;
if (variant === "top") {
return (
<header className="sidebar sidebar-top">
<Link href="/" className="brand">
<BrandMark />
<span className="brand-name">famapp</span>
</Link>
{navItems.map((n) => (
<NavLink
key={n.href}
href={n.href}
label={n.label}
icon={n.icon}
className="!w-auto !h-9"
/>
))}
<div className="ml-auto" />
{householdInfo && (
<span className="badge">
<NavIcon name="people" className="size-3" />
{householdInfo.household.name}
</span>
)}
</header>
);
}
return (
<aside className="sidebar">
<Link href="/" className="brand">
<BrandMark />
<span className="brand-name">famapp</span>
</Link>
{navItems.map((n) => (
<NavLink key={n.href} href={n.href} label={n.label} icon={n.icon} />
))}
<div className="nav-divider" />
{SECONDARY_NAV.map((n) => (
<NavLink key={n.href} href={n.href} label={n.label} icon={n.icon} />
))}
{householdInfo && <HouseholdPill info={householdInfo} />}
</aside>
);
}
function HouseholdPill({
info,
}: {
info: NonNullable<Awaited<ReturnType<typeof getHouseholdInfo>>>;
}) {
const visible = info.members.slice(0, 3);
return (
<div className="household-pill" title={info.household.name}>
<div style={{ display: "flex" }}>
{visible.map((m, i) => {
const initial = (m.name ?? m.email ?? "?").trim()[0]?.toUpperCase() ?? "?";
return (
<span
key={m.id}
className="avatar avatar-sm"
style={{
background: avatarColor(m.id),
marginLeft: i > 0 ? -6 : 0,
boxShadow: "0 0 0 1.5px var(--card)",
}}
title={m.name ?? m.email ?? undefined}
>
{initial}
</span>
);
})}
</div>
<div className="household-text" style={{ minWidth: 0 }}>
<div
style={{
fontWeight: 500,
color: "var(--ink)",
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
}}
>
{info.household.name}
</div>
<div className="muted" style={{ fontSize: 11 }}>
{info.members.length} {info.members.length === 1 ? "member" : "members"}
</div>
</div>
</div>
);
}
// Stable color from id — uses the 5 functional accents in rotation.
const ACCENT_HUES = [
"var(--c-household)",
"var(--c-private)",
"var(--c-kids)",
"var(--c-work)",
"var(--c-bills)",
];
function avatarColor(id: string): string {
let hash = 0;
for (let i = 0; i < id.length; i++) hash = (hash * 31 + id.charCodeAt(i)) & 0xffff;
return ACCENT_HUES[hash % ACCENT_HUES.length] ?? "var(--c-household)";
}
src/components/theme-picker.tsx
+151 -20
View File
@@ -1,7 +1,23 @@
"use client"; "use client";
import { THEMES, THEME_MODES } from "@/modules/_core/themes"; import {
import type { ThemeId, ThemeMode } from "@/modules/_core/themes"; PALETTES,
THEME_MODES,
FONT_PAIRS,
DENSITIES,
DASH_LAYOUTS,
CAL_VIEWS,
NAV_STYLES,
} from "@/modules/_core/themes";
import type {
Palette,
ThemeMode,
FontPair,
Density,
DashLayout,
CalView,
NavStyle,
} from "@/modules/_core/themes";
import { useTheme } from "@/hooks/use-theme"; import { useTheme } from "@/hooks/use-theme";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { import {
@@ -15,34 +31,64 @@ import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
interface Props { interface Props {
initialTheme?: ThemeId; initialPalette?: Palette;
initialMode?: ThemeMode; initialMode?: ThemeMode;
initialFontPair?: FontPair;
initialDensity?: Density;
initialDashLayout?: DashLayout;
initialCalView?: CalView;
initialNavStyle?: NavStyle;
signedIn?: boolean; signedIn?: boolean;
} }
export function ThemePicker({ export function ThemePicker({
initialTheme = "default", initialPalette = "clay",
initialMode = "system", initialMode = "system",
initialFontPair = "serif-sans",
initialDensity = "regular",
initialDashLayout = "classic",
initialCalView = "month",
initialNavStyle = "rail-desktop",
signedIn = false, signedIn = false,
}: Props) { }: Props) {
const { theme, mode, setTheme, setMode } = useTheme(initialTheme, initialMode, signedIn); const t = useTheme(
{
palette: initialPalette,
mode: initialMode,
fontPair: initialFontPair,
density: initialDensity,
dashLayout: initialDashLayout,
calView: initialCalView,
navStyle: initialNavStyle,
},
signedIn,
);
return ( return (
<div className="space-y-4"> <div className="space-y-5">
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label>Theme</Label> <Label>Palette</Label>
<Select value={theme} onValueChange={(v) => setTheme(v as ThemeId)}> <div className="flex gap-2">
<SelectTrigger className="w-48"> {PALETTES.map((p) => (
<SelectValue /> <button
</SelectTrigger> key={p.id}
<SelectContent> type="button"
{THEMES.map((t) => ( onClick={() => t.setPalette(p.id)}
<SelectItem key={t.id} value={t.id}> aria-pressed={t.palette === p.id}
{t.label} title={p.label}
</SelectItem> className={cn(
"size-7 rounded-md border-[0.5px] cursor-pointer transition-transform",
t.palette === p.id ? "scale-110" : "hover:scale-105",
)}
style={{
background: p.hex,
borderColor: "var(--hair-2)",
outline: t.palette === p.id ? "2px solid var(--ink)" : "none",
outlineOffset: 2,
}}
/>
))} ))}
</SelectContent> </div>
</Select>
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
@@ -53,14 +99,99 @@ export function ThemePicker({
key={m.id} key={m.id}
variant="outline" variant="outline"
size="sm" size="sm"
className={cn(mode === m.id && "bg-primary text-primary-foreground")} className={cn(t.mode === m.id && "bg-primary text-primary-foreground")}
onClick={() => setMode(m.id)} onClick={() => t.setMode(m.id)}
> >
{m.label} {m.label}
</Button> </Button>
))} ))}
</div> </div>
</div> </div>
<div className="space-y-1.5">
<Label>Type pairing</Label>
<Select value={t.fontPair} onValueChange={(v) => t.setFontPair(v as FontPair)}>
<SelectTrigger className="w-72">
<SelectValue />
</SelectTrigger>
<SelectContent>
{FONT_PAIRS.map((f) => (
<SelectItem key={f.id} value={f.id}>
{f.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="space-y-1.5">
<Label>Density</Label>
<div className="flex gap-1">
{DENSITIES.map((d) => (
<Button
key={d.id}
variant="outline"
size="sm"
className={cn(t.density === d.id && "bg-primary text-primary-foreground")}
onClick={() => t.setDensity(d.id)}
>
{d.label}
</Button>
))}
</div>
</div>
<div className="space-y-1.5">
<Label>Dashboard layout</Label>
<Select value={t.dashLayout} onValueChange={(v) => t.setDashLayout(v as DashLayout)}>
<SelectTrigger className="w-72">
<SelectValue />
</SelectTrigger>
<SelectContent>
{DASH_LAYOUTS.map((d) => (
<SelectItem key={d.id} value={d.id}>
{d.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="space-y-1.5">
<Label>Calendar default</Label>
<div className="flex gap-1">
{CAL_VIEWS.map((c) => (
<Button
key={c.id}
variant="outline"
size="sm"
className={cn(t.calView === c.id && "bg-primary text-primary-foreground")}
onClick={() => t.setCalView(c.id)}
>
{c.label}
</Button>
))}
</div>
</div>
<div className="space-y-1.5">
<Label>Navigation</Label>
<Select value={t.navStyle} onValueChange={(v) => t.setNavStyle(v as NavStyle)}>
<SelectTrigger className="w-72">
<SelectValue />
</SelectTrigger>
<SelectContent>
{NAV_STYLES.map((n) => (
<SelectItem key={n.id} value={n.id}>
{n.label}
</SelectItem>
))}
</SelectContent>
</Select>
<p className="text-xs text-muted-foreground">
Mobile (under 760px) always uses bottom nav + FAB.
</p>
</div>
</div> </div>
); );
} }
src/components/topbar-new-button.tsx
+20
View File
@@ -0,0 +1,20 @@
"use client";
import { useQuickAdd } from "@/components/quick-add-provider";
import { NavIcon } from "@/components/nav-icon";
export function TopbarNewButton() {
const { openSheet } = useQuickAdd();
return (
<button
type="button"
onClick={openSheet}
className="btn btn-primary btn-sm"
aria-label="Quick add"
>
<NavIcon name="plus" className="size-3.5" />
<span className="hidden md:inline">New</span>
</button>
);
}
src/components/topbar-search.tsx
+27
View File
@@ -0,0 +1,27 @@
"use client";
import { useQuickAdd } from "@/components/quick-add-provider";
import { NavIcon } from "@/components/nav-icon";
export function TopbarSearch() {
const { openPalette } = useQuickAdd();
return (
<button
type="button"
onClick={openPalette}
aria-label="Search (⌘K)"
className="hidden md:flex items-center gap-2 h-8 px-2.5 rounded-md text-[13px]"
style={{
border: "0.5px solid var(--hair-2)",
background: "var(--card)",
color: "var(--ink-mute)",
width: 220,
}}
>
<NavIcon name="search" className="size-3.5" />
<span style={{ flex: 1, textAlign: "left" }}>Search…</span>
<span className="kbd">⌘K</span>
</button>
);
}
src/components/topbar-title.tsx
+33
View File
@@ -0,0 +1,33 @@
"use client";
import { usePathname } from "next/navigation";
const TITLES: Array<{ test: (p: string) => boolean; title: string; sub?: string }> = [
{ test: (p) => p === "/" || p.startsWith("/d/"), title: "Today", sub: "Dashboard" },
{
test: (p) => p === "/calendar" || p.startsWith("/calendar/"),
title: "Calendar",
sub: "household + private",
},
{ test: (p) => p === "/lists" || p.startsWith("/lists/"), title: "Lists" },
{ test: (p) => p === "/notes" || p.startsWith("/notes/"), title: "Notes" },
{ test: (p) => p === "/settings" || p.startsWith("/settings/"), title: "Settings" },
{ test: (p) => p === "/login", title: "Sign in" },
];
export function TopbarTitle() {
const pathname = usePathname() ?? "";
const match = TITLES.find((t) => t.test(pathname)) ?? { title: "famapp" };
return (
<div style={{ minWidth: 0 }}>
<h1
className="serif"
style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
>
{match.title}
</h1>
{"sub" in match && match.sub && <div className="crumb">{match.sub}</div>}
</div>
);
}
src/components/topbar.tsx
+91
View File
@@ -0,0 +1,91 @@
import { desc, eq } from "drizzle-orm";
import { auth } from "@/lib/auth";
import { db } from "@/lib/db";
import { notifications, users } from "@/modules/_core/schema";
import { NotificationBell } from "@/components/notification-bell";
import { TopbarSearch } from "@/components/topbar-search";
import { TopbarTitle } from "@/components/topbar-title";
import { TopbarNewButton } from "@/components/topbar-new-button";
import { NavIcon } from "@/components/nav-icon";
async function getNotifications(userId: string) {
const rows = await db
.select()
.from(notifications)
.where(eq(notifications.userId, userId))
.orderBy(desc(notifications.createdAt))
.limit(20);
const unread = rows.filter((n) => !n.readAt).length;
return { rows, unread };
}
async function getUserAvatar(userId: string) {
const [row] = await db
.select({ name: users.name, email: users.email, image: users.image })
.from(users)
.where(eq(users.id, userId))
.limit(1);
return row;
}
export async function Topbar() {
const session = await auth();
const userId = session?.user?.id;
const { rows: notifRows, unread } = userId
? await getNotifications(userId)
: { rows: [], unread: 0 };
const userRow = userId ? await getUserAvatar(userId) : null;
const initial = (userRow?.name ?? userRow?.email ?? "?").trim()[0]?.toUpperCase() ?? "?";
return (
<div className="topbar">
<TopbarTitle />
<div className="topbar-actions">
<TopbarSearch />
{userId && (
<NotificationBell
initialUnread={unread}
initialItems={notifRows.map((n) => ({
id: n.id,
title: n.title,
body: n.body,
url: n.url ?? null,
createdAt: n.createdAt,
}))}
/>
)}
<TopbarNewButton />
{userId && (
<span
className="avatar"
style={{ width: 28, height: 28, fontSize: 12, background: "var(--c-household)" }}
title={userRow?.name ?? userRow?.email ?? undefined}
>
{userRow?.image ? (
// eslint-disable-next-line @next/next/no-img-element
<img
src={userRow.image}
alt=""
style={{ width: "100%", height: "100%", borderRadius: "50%", objectFit: "cover" }}
/>
) : (
initial
)}
</span>
)}
</div>
</div>
);
}
export function TopbarSpacer() {
return (
<div className="topbar">
<h1 className="serif">famapp</h1>
<div className="topbar-actions">
<NavIcon name="bell" className="size-4 text-[var(--ink-mute)]" />
</div>
</div>
);
}
src/components/ui/card.tsx
+11 -14
View File
@@ -12,7 +12,8 @@ function Card({
data-slot="card" data-slot="card"
data-size={size} data-size={size}
className={cn( className={cn(
"group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", "group/card flex flex-col overflow-hidden rounded-[var(--r-lg)] bg-card text-sm text-card-foreground",
"border-[0.5px] border-[var(--hair)] shadow-[var(--shadow-1)]",
className, className,
)} )}
{...props} {...props}
@@ -25,7 +26,9 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
<div <div
data-slot="card-header" data-slot="card-header"
className={cn( className={cn(
"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3", "group/card-header flex items-center justify-between gap-2",
"px-[14px] pt-3 pb-[10px] border-b-[0.5px] border-[var(--hair)]",
"has-data-[slot=card-description]:flex-col has-data-[slot=card-description]:items-start has-data-[slot=card-description]:gap-1",
className, className,
)} )}
{...props} {...props}
@@ -35,10 +38,10 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
function CardTitle({ className, ...props }: React.ComponentProps<"div">) { function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
return ( return (
<div <h3
data-slot="card-title" data-slot="card-title"
className={cn( className={cn(
"font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", "font-[family-name:var(--serif)] text-[16px] font-medium tracking-tight m-0 text-[var(--ink)]",
className, className,
)} )}
{...props} {...props}
@@ -50,7 +53,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
return ( return (
<div <div
data-slot="card-description" data-slot="card-description"
className={cn("text-sm text-muted-foreground", className)} className={cn("text-xs text-muted-foreground", className)}
{...props} {...props}
/> />
); );
@@ -60,20 +63,14 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
return ( return (
<div <div
data-slot="card-action" data-slot="card-action"
className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)} className={cn("ml-auto flex items-center gap-2 text-xs text-muted-foreground", className)}
{...props} {...props}
/> />
); );
} }
function CardContent({ className, ...props }: React.ComponentProps<"div">) { function CardContent({ className, ...props }: React.ComponentProps<"div">) {
return ( return <div data-slot="card-content" className={cn("px-[14px] py-3", className)} {...props} />;
<div
data-slot="card-content"
className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
{...props}
/>
);
} }
function CardFooter({ className, ...props }: React.ComponentProps<"div">) { function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -81,7 +78,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
<div <div
data-slot="card-footer" data-slot="card-footer"
className={cn( className={cn(
"flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3", "flex items-center justify-end gap-2 px-[14px] py-3 border-t-[0.5px] border-[var(--hair)] bg-[var(--paper-2)]",
className, className,
)} )}
{...props} {...props}
src/hooks/use-theme.ts
+155 -22
View File
@@ -1,49 +1,182 @@
"use client"; "use client";
import { useCallback, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import type { ThemeId, ThemeMode } from "@/modules/_core/themes"; import type {
Palette,
ThemeMode,
FontPair,
Density,
DashLayout,
CalView,
NavStyle,
} from "@/modules/_core/themes";
import { navStyleToDataNav } from "@/modules/_core/themes";
import { setUserTheme } from "@/app/settings/actions"; import { setUserTheme } from "@/app/settings/actions";
function applyTheme(theme: ThemeId, mode: ThemeMode) { const MOBILE_QUERY = "(max-width: 759px)";
const DARK_QUERY = "(prefers-color-scheme: dark)";
function applyTheme(state: {
palette: Palette;
mode: ThemeMode;
fontPair: FontPair;
density: Density;
navStyle: NavStyle;
}) {
const html = document.documentElement; const html = document.documentElement;
html.setAttribute("data-theme", theme); html.setAttribute("data-theme", state.palette);
html.setAttribute("data-font-pair", state.fontPair);
html.setAttribute("data-density", state.density);
const isMobile = window.matchMedia(MOBILE_QUERY).matches;
const desktopNav = navStyleToDataNav(state.navStyle);
const dataNav = isMobile ? (state.navStyle === "fab-only" ? "fab" : "bottom") : desktopNav;
html.setAttribute("data-nav", dataNav);
const dark = const dark =
mode === "dark" || state.mode === "dark" || (state.mode === "system" && window.matchMedia(DARK_QUERY).matches);
(mode === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);
html.classList.toggle("dark", dark); html.classList.toggle("dark", dark);
try { try {
localStorage.setItem("theme", theme); localStorage.setItem("themePalette", state.palette);
localStorage.setItem("themeMode", mode); localStorage.setItem("themeMode", state.mode);
localStorage.setItem("themeFontPair", state.fontPair);
localStorage.setItem("themeDensity", state.density);
localStorage.setItem("themeNavStyle", state.navStyle);
} catch { } catch {
// storage blocked // storage blocked
} }
} }
export function useTheme( export function useTheme(
initialTheme: ThemeId = "default", initial: {
initialMode: ThemeMode = "system", palette?: Palette;
mode?: ThemeMode;
fontPair?: FontPair;
density?: Density;
dashLayout?: DashLayout;
calView?: CalView;
navStyle?: NavStyle;
} = {},
signedIn = false, signedIn = false,
) { ) {
const [theme, setThemeState] = useState<ThemeId>(initialTheme); const [palette, setPaletteState] = useState<Palette>(initial.palette ?? "clay");
const [mode, setModeState] = useState<ThemeMode>(initialMode); const [mode, setModeState] = useState<ThemeMode>(initial.mode ?? "system");
const [fontPair, setFontPairState] = useState<FontPair>(initial.fontPair ?? "serif-sans");
const [density, setDensityState] = useState<Density>(initial.density ?? "regular");
const [dashLayout, setDashLayoutState] = useState<DashLayout>(initial.dashLayout ?? "classic");
const [calView, setCalViewState] = useState<CalView>(initial.calView ?? "month");
const [navStyle, setNavStyleState] = useState<NavStyle>(initial.navStyle ?? "rail-desktop");
const setTheme = useCallback( // Re-apply data-nav whenever the viewport crosses the mobile breakpoint.
(next: ThemeId) => { useEffect(() => {
setThemeState(next); const mq = window.matchMedia(MOBILE_QUERY);
applyTheme(next, mode); const onChange = () => applyTheme({ palette, mode, fontPair, density, navStyle });
if (signedIn) void setUserTheme({ theme: next, mode }); mq.addEventListener("change", onChange);
return () => mq.removeEventListener("change", onChange);
}, [palette, mode, fontPair, density, navStyle]);
// Re-apply dark when system pref flips and we're in 'system' mode.
useEffect(() => {
if (mode !== "system") return;
const mq = window.matchMedia(DARK_QUERY);
const onChange = () => applyTheme({ palette, mode, fontPair, density, navStyle });
mq.addEventListener("change", onChange);
return () => mq.removeEventListener("change", onChange);
}, [palette, mode, fontPair, density, navStyle]);
const persist = useCallback(
(patch: Parameters<typeof setUserTheme>[0]) => {
if (signedIn) void setUserTheme(patch);
}, },
[mode, signedIn], [signedIn],
);
const setPalette = useCallback(
(next: Palette) => {
setPaletteState(next);
applyTheme({ palette: next, mode, fontPair, density, navStyle });
persist({ palette: next });
},
[mode, fontPair, density, navStyle, persist],
); );
const setMode = useCallback( const setMode = useCallback(
(next: ThemeMode) => { (next: ThemeMode) => {
setModeState(next); setModeState(next);
applyTheme(theme, next); applyTheme({ palette, mode: next, fontPair, density, navStyle });
if (signedIn) void setUserTheme({ theme, mode: next }); persist({ mode: next });
}, },
[theme, signedIn], [palette, fontPair, density, navStyle, persist],
); );
return { theme, mode, setTheme, setMode }; const setFontPair = useCallback(
(next: FontPair) => {
setFontPairState(next);
applyTheme({ palette, mode, fontPair: next, density, navStyle });
persist({ fontPair: next });
},
[palette, mode, density, navStyle, persist],
);
const setDensity = useCallback(
(next: Density) => {
setDensityState(next);
applyTheme({ palette, mode, fontPair, density: next, navStyle });
persist({ density: next });
},
[palette, mode, fontPair, navStyle, persist],
);
const setDashLayout = useCallback(
(next: DashLayout) => {
setDashLayoutState(next);
try {
localStorage.setItem("themeDashLayout", next);
} catch {
// storage blocked
}
persist({ dashLayout: next });
},
[persist],
);
const setCalView = useCallback(
(next: CalView) => {
setCalViewState(next);
try {
localStorage.setItem("themeCalView", next);
} catch {
// storage blocked
}
persist({ calView: next });
},
[persist],
);
const setNavStyle = useCallback(
(next: NavStyle) => {
setNavStyleState(next);
applyTheme({ palette, mode, fontPair, density, navStyle: next });
persist({ navStyle: next });
},
[palette, mode, fontPair, density, persist],
);
return {
palette,
mode,
fontPair,
density,
dashLayout,
calView,
navStyle,
setPalette,
setMode,
setFontPair,
setDensity,
setDashLayout,
setCalView,
setNavStyle,
};
} }
src/lib/auth.ts
+1 -6
View File
@@ -1,12 +1,7 @@
import { DrizzleAdapter } from "@auth/drizzle-adapter"; import { DrizzleAdapter } from "@auth/drizzle-adapter";
import NextAuth, { type DefaultSession } from "next-auth"; import NextAuth, { type DefaultSession } from "next-auth";
import { db } from "@/lib/db"; import { db } from "@/lib/db";
import { import { accounts, sessions, users, verificationTokens } from "@/modules/_core/schema";
accounts,
sessions,
users,
verificationTokens,
} from "@/modules/_core/schema";
declare module "next-auth" { declare module "next-auth" {
interface Session { interface Session {
src/lib/dashboard.server.ts
+31
View File
@@ -0,0 +1,31 @@
import "server-only";
import { getRegistry } from "@/modules/_core";
import type { SerializedWidgetMeta } from "@/modules/_core/registry";
import type { DashboardLayout, PresetId } from "./dashboard";
import { computePresetLayoutFromMetas } from "./dashboard";
/** Build a layout matching one of the design's three dashboard arrangements
* using the live module registry. Server-only — the registry is empty on
* the client. */
export function computePresetLayout(preset: PresetId): DashboardLayout {
const { widgets } = getRegistry();
if (widgets.length === 0) return { version: 1, widgets: [] };
const sorted = [...widgets].sort((a, b) => a.defaultPriority - b.defaultPriority);
const metas: SerializedWidgetMeta[] = sorted.map((w) => ({
id: w.id,
title: w.title,
description: w.description,
category: w.category,
defaultSize: w.defaultSize,
minSize: w.minSize,
maxSize: w.maxSize,
defaultConfig: w.defaultConfig,
}));
return computePresetLayoutFromMetas(preset, metas);
}
export function computeDefaultLayout(): DashboardLayout {
return computePresetLayout("classic");
}
src/lib/dashboard.ts
+93 -22
View File
@@ -1,5 +1,5 @@
import { z } from "zod"; import { z } from "zod";
import { getRegistry } from "@/modules/_core"; import type { SerializedWidgetMeta } from "@/modules/_core/registry";
export type WidgetPlacement = { export type WidgetPlacement = {
widgetId: string; widgetId: string;
@@ -35,33 +35,104 @@ export function parseDashboardLayout(raw: unknown): DashboardLayout | null {
return result.data; return result.data;
} }
export function computeDefaultLayout(): DashboardLayout { export type PresetId = "classic" | "split" | "glance";
const { widgets } = getRegistry();
const sorted = [...widgets].sort((a, b) => a.defaultPriority - b.defaultPriority);
/** Client-safe layout builder: pass the metas explicitly. The server-only
* variants (`computePresetLayout`, `computeDefaultLayout`) live in
* `dashboard.server.ts` because they reach into the module registry. */
export function computePresetLayoutFromMetas(
preset: PresetId,
metas: SerializedWidgetMeta[],
): DashboardLayout {
switch (preset) {
case "classic":
return classicLayout(metas);
case "split":
return splitLayout(metas);
case "glance":
return glanceLayout(metas);
}
}
function classicLayout(metas: SerializedWidgetMeta[]): DashboardLayout {
const placements: WidgetPlacement[] = []; const placements: WidgetPlacement[] = [];
let curX = 0; let mainY = 0;
let curY = 0; let railY = 0;
let rowH = 0;
for (const widget of sorted) { metas.forEach((m, i) => {
const { w, h } = widget.defaultSize; const inRail = i % 3 === 0 && i > 0;
if (curX + w > 12) { if (inRail) {
curY += rowH;
curX = 0;
rowH = 0;
}
placements.push({ placements.push({
widgetId: widget.id, widgetId: m.id,
config: widget.defaultConfig, config: m.defaultConfig,
x: curX, x: 8,
y: curY, y: railY,
w, w: 4,
h, h: m.defaultSize.h,
}); });
curX += w; railY += m.defaultSize.h;
rowH = Math.max(rowH, h); } else {
placements.push({
widgetId: m.id,
config: m.defaultConfig,
x: 0,
y: mainY,
w: 8,
h: m.defaultSize.h,
});
mainY += m.defaultSize.h;
} }
});
return { version: 1, widgets: placements }; return { version: 1, widgets: placements };
} }
function splitLayout(metas: SerializedWidgetMeta[]): DashboardLayout {
const placements: WidgetPlacement[] = [];
let leftY = 0;
let rightY = 0;
metas.forEach((m, i) => {
const left = i % 2 === 0;
if (left) {
placements.push({
widgetId: m.id,
config: m.defaultConfig,
x: 0,
y: leftY,
w: 6,
h: m.defaultSize.h,
});
leftY += m.defaultSize.h;
} else {
placements.push({
widgetId: m.id,
config: m.defaultConfig,
x: 6,
y: rightY,
w: 6,
h: m.defaultSize.h,
});
rightY += m.defaultSize.h;
}
});
return { version: 1, widgets: placements };
}
function glanceLayout(metas: SerializedWidgetMeta[]): DashboardLayout {
const placements: WidgetPlacement[] = [];
let y = 0;
metas.forEach((m) => {
placements.push({
widgetId: m.id,
config: m.defaultConfig,
x: 0,
y,
w: 12,
h: m.defaultSize.h,
});
y += m.defaultSize.h;
});
return { version: 1, widgets: placements };
}
src/middleware.ts
+7 -2
View File
@@ -15,6 +15,11 @@ export function middleware(request: NextRequest) {
return response; return response;
} }
function withPathname(response: NextResponse, pathname: string): NextResponse {
response.headers.set("x-pathname", pathname);
return response;
}
function route(request: NextRequest): NextResponse { function route(request: NextRequest): NextResponse {
const { pathname } = request.nextUrl; const { pathname } = request.nextUrl;
@@ -38,10 +43,10 @@ function route(request: NextRequest): NextResponse {
} }
if (PUBLIC_PATHS.has(pathname) || PUBLIC_PREFIXES.some((p) => pathname.startsWith(p))) { if (PUBLIC_PATHS.has(pathname) || PUBLIC_PREFIXES.some((p) => pathname.startsWith(p))) {
return NextResponse.next(); return withPathname(NextResponse.next(), pathname);
} }
if (hasSessionCookie(request)) return NextResponse.next(); if (hasSessionCookie(request)) return withPathname(NextResponse.next(), pathname);
const loginUrl = new URL("/login", request.url); const loginUrl = new URL("/login", request.url);
loginUrl.searchParams.set("callbackUrl", request.url); loginUrl.searchParams.set("callbackUrl", request.url);
src/modules/_core/manifest.tsx
+10 -8
View File
@@ -22,25 +22,27 @@ async function ActivityWidget({ config }: { config: unknown }) {
.limit(parsed.limit ?? 20); .limit(parsed.limit ?? 20);
if (entries.length === 0) { if (entries.length === 0) {
return <p className="text-sm text-muted-foreground">No recent activity</p>; return <p className="text-sm text-[var(--ink-mute)]">No recent activity</p>;
} }
return ( return (
<ul className="space-y-2"> <div className="flex flex-col">
{entries.map((entry) => { {entries.map((entry) => {
const reg = getEntityType(entry.entityType); const reg = getEntityType(entry.entityType);
const description = const description =
reg?.renderActivity?.(entry as ActivityLogEntry) ?? `${entry.action} ${entry.entityType}`; reg?.renderActivity?.(entry as ActivityLogEntry) ?? `${entry.action} ${entry.entityType}`;
return ( return (
<li key={entry.id} className="flex items-start gap-2 text-sm"> <div key={entry.id} className="activity-row">
<span className="mt-0.5 shrink-0 text-xs text-muted-foreground"> <div className="flex-1 leading-[1.4]">
<span className="obj">{description}</span>
</div>
<time>
{entry.createdAt.toLocaleDateString(undefined, { month: "short", day: "numeric" })} {entry.createdAt.toLocaleDateString(undefined, { month: "short", day: "numeric" })}
</span> </time>
<span className="leading-snug">{description}</span> </div>
</li>
); );
})} })}
</ul> </div>
); );
} }
src/modules/_core/schema.ts
+6 -1
View File
@@ -23,8 +23,13 @@ export const users = pgTable("users", {
email: varchar("email", { length: 255 }).notNull().unique(), email: varchar("email", { length: 255 }).notNull().unique(),
emailVerified: timestamp("email_verified", { withTimezone: true }), emailVerified: timestamp("email_verified", { withTimezone: true }),
image: text("image"), image: text("image"),
theme: text("theme").notNull().default("default"), themePalette: text("theme_palette").notNull().default("clay"),
themeMode: text("theme_mode").notNull().default("system"), themeMode: text("theme_mode").notNull().default("system"),
themeFontPair: text("theme_font_pair").notNull().default("serif-sans"),
themeDensity: text("theme_density").notNull().default("regular"),
themeDashLayout: text("theme_dash_layout").notNull().default("classic"),
themeCalView: text("theme_cal_view").notNull().default("month"),
themeNavStyle: text("theme_nav_style").notNull().default("rail-desktop"),
completionVisibilityHours: integer("completion_visibility_hours").notNull().default(24), completionVisibilityHours: integer("completion_visibility_hours").notNull().default(24),
notifPush: boolean("notif_push").notNull().default(true), notifPush: boolean("notif_push").notNull().default(true),
notifInApp: boolean("notif_inapp").notNull().default(true), notifInApp: boolean("notif_inapp").notNull().default(true),
src/modules/_core/share.ts
+4
View File
@@ -64,6 +64,8 @@ export async function resolveShareToken(rawToken: string): Promise<{
entityId: string; entityId: string;
capabilities: ShareLinkCapabilities; capabilities: ShareLinkCapabilities;
householdId: string; householdId: string;
expiresAt: Date | null;
createdBy: string;
} | null> { } | null> {
const tokenHash = hashToken(rawToken); const tokenHash = hashToken(rawToken);
@@ -82,6 +84,8 @@ export async function resolveShareToken(rawToken: string): Promise<{
entityId: link.entityId, entityId: link.entityId,
capabilities: link.capabilities, capabilities: link.capabilities,
householdId: link.householdId, householdId: link.householdId,
expiresAt: link.expiresAt,
createdBy: link.createdBy,
}; };
} }
src/modules/_core/themes.ts
+87 -6
View File
@@ -1,9 +1,50 @@
export type ThemeMode = "light" | "dark" | "system"; export type ThemeMode = "light" | "dark" | "system";
export type ThemeId = "default" | "warm" | (string & {});
export const THEMES: ReadonlyArray<{ id: ThemeId; label: string }> = [ export type Palette = "clay" | "indigo" | "sage" | "plum" | "ink";
{ id: "default", label: "Default" }, export type FontPair = "serif-sans" | "newsreader" | "fraunces" | "sans-only";
{ id: "warm", label: "Warm" }, export type Density = "compact" | "regular" | "comfy";
export type DashLayout = "classic" | "split" | "glance";
export type CalView = "month" | "week" | "day";
export type NavStyle = "rail-desktop" | "compact-rail" | "top-nav" | "fab-only";
export const PALETTES: ReadonlyArray<{ id: Palette; label: string; hex: string }> = [
{ id: "clay", label: "Clay", hex: "#B85C3C" },
{ id: "indigo", label: "Indigo ink", hex: "#3E5B8A" },
{ id: "sage", label: "Sage", hex: "#6F8B5E" },
{ id: "plum", label: "Plum", hex: "#7B4F6E" },
{ id: "ink", label: "Ink (mono)", hex: "#1F1B16" },
];
export const FONT_PAIRS: ReadonlyArray<{ id: FontPair; label: string }> = [
{ id: "serif-sans", label: "Source Serif + Inter" },
{ id: "newsreader", label: "Newsreader + Inter" },
{ id: "fraunces", label: "Fraunces + Inter" },
{ id: "sans-only", label: "Inter only" },
];
export const DENSITIES: ReadonlyArray<{ id: Density; label: string }> = [
{ id: "compact", label: "Compact" },
{ id: "regular", label: "Regular" },
{ id: "comfy", label: "Comfy" },
];
export const DASH_LAYOUTS: ReadonlyArray<{ id: DashLayout; label: string }> = [
{ id: "classic", label: "Classic" },
{ id: "split", label: "Split" },
{ id: "glance", label: "Glance" },
];
export const CAL_VIEWS: ReadonlyArray<{ id: CalView; label: string }> = [
{ id: "month", label: "Month" },
{ id: "week", label: "Week" },
{ id: "day", label: "Day" },
];
export const NAV_STYLES: ReadonlyArray<{ id: NavStyle; label: string }> = [
{ id: "rail-desktop", label: "Sidebar" },
{ id: "compact-rail", label: "Compact rail" },
{ id: "top-nav", label: "Top nav" },
{ id: "fab-only", label: "FAB only" },
]; ];
export const THEME_MODES: ReadonlyArray<{ id: ThemeMode; label: string }> = [ export const THEME_MODES: ReadonlyArray<{ id: ThemeMode; label: string }> = [
@@ -12,5 +53,45 @@ export const THEME_MODES: ReadonlyArray<{ id: ThemeMode; label: string }> = [
{ id: "system", label: "System" }, { id: "system", label: "System" },
]; ];
export const VALID_THEME_IDS = new Set(THEMES.map((t) => t.id)); export const VALID_PALETTES = new Set<string>(PALETTES.map((p) => p.id));
export const VALID_THEME_MODES = new Set<string>(["light", "dark", "system"]); export const VALID_FONT_PAIRS = new Set<string>(FONT_PAIRS.map((p) => p.id));
export const VALID_DENSITIES = new Set<string>(DENSITIES.map((p) => p.id));
export const VALID_DASH_LAYOUTS = new Set<string>(DASH_LAYOUTS.map((p) => p.id));
export const VALID_CAL_VIEWS = new Set<string>(CAL_VIEWS.map((p) => p.id));
export const VALID_NAV_STYLES = new Set<string>(NAV_STYLES.map((p) => p.id));
export const VALID_THEME_MODES = new Set<string>(THEME_MODES.map((p) => p.id));
export type ThemeState = {
palette: Palette;
mode: ThemeMode;
fontPair: FontPair;
density: Density;
dashLayout: DashLayout;
calView: CalView;
navStyle: NavStyle;
};
export const DEFAULT_THEME: ThemeState = {
palette: "clay",
mode: "system",
fontPair: "serif-sans",
density: "regular",
dashLayout: "classic",
calView: "month",
navStyle: "rail-desktop",
};
// Map our nav style preference to the data-nav attribute we set on <html>.
// On mobile (handled by NavModeProvider) we override to "bottom" or "fab".
export function navStyleToDataNav(style: NavStyle): "sidebar" | "rail" | "top" | "fab" {
switch (style) {
case "compact-rail":
return "rail";
case "top-nav":
return "top";
case "fab-only":
return "fab";
default:
return "sidebar";
}
}
src/modules/calendar/components/calendar-shell.tsx
+50 -11
View File
@@ -12,6 +12,7 @@ import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { ShareButton } from "@/components/share-button"; import { ShareButton } from "@/components/share-button";
import type { CalView } from "@/modules/_core/themes";
import { import {
Select, Select,
SelectContent, SelectContent,
@@ -43,14 +44,38 @@ type EventDraft = {
remindMinutesBefore: number | null; remindMinutesBefore: number | null;
}; };
const DEFAULT_COLOR = "#2563eb"; const DEFAULT_COLOR = "#B85C3C";
const VIEW_MAP: Record<CalView, string> = {
month: "dayGridMonth",
week: "timeGridWeek",
day: "timeGridDay",
};
function withAlpha(hex: string, alpha: number): string {
// Accept #RGB / #RRGGBB / non-hex (return as-is for non-hex e.g. var(--))
if (!hex.startsWith("#")) return hex;
let h = hex.slice(1);
if (h.length === 3)
h = h
.split("")
.map((c) => c + c)
.join("");
if (h.length !== 6) return hex;
const a = Math.round(Math.min(1, Math.max(0, alpha)) * 255)
.toString(16)
.padStart(2, "0");
return `#${h}${a}`;
}
export function CalendarShell({ export function CalendarShell({
calendars, calendars,
events, events,
defaultView = "month",
}: { }: {
calendars: CalendarDto[]; calendars: CalendarDto[];
events: CalendarEventDto[]; events: CalendarEventDto[];
defaultView?: CalView;
}) { }) {
const [calendarRows, setCalendarRows] = useState(calendars); const [calendarRows, setCalendarRows] = useState(calendars);
const [eventRows, setEventRows] = useState(events); const [eventRows, setEventRows] = useState(events);
@@ -380,15 +405,22 @@ export function CalendarShell({
</div> </div>
</aside> </aside>
<section className="min-w-0 p-4"> <section className="fc-skin min-w-0 p-4">
<FullCalendar <FullCalendar
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]} plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
initialView="dayGridMonth" initialView={VIEW_MAP[defaultView]}
headerToolbar={{ headerToolbar={{
left: "prev,next today", left: "prev,next today",
center: "title", center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay", right: "dayGridMonth,timeGridWeek,timeGridDay",
}} }}
buttonText={{
today: "Today",
month: "Month",
week: "Week",
day: "Day",
}}
dayHeaderFormat={{ weekday: "short" }}
selectable selectable
editable editable
eventResizableFromStart eventResizableFromStart
@@ -396,19 +428,26 @@ export function CalendarShell({
eventClick={openExistingEvent} eventClick={openExistingEvent}
eventDrop={moveEvent} eventDrop={moveEvent}
eventResize={moveEvent} eventResize={moveEvent}
events={visibleEvents.map((event) => ({ events={visibleEvents.map((event) => {
const color =
calendarRows.find((calendar) => calendar.id === event.calendarId)?.color ??
DEFAULT_COLOR;
return {
id: event.id, id: event.id,
title: event.title, title: event.title,
start: event.startAt, start: event.startAt,
end: event.endAt, end: event.endAt,
allDay: event.allDay, allDay: event.allDay,
backgroundColor: backgroundColor: withAlpha(color, 0.14),
calendarRows.find((calendar) => calendar.id === event.calendarId)?.color ?? borderColor: color,
DEFAULT_COLOR, textColor: "var(--ink-2)",
borderColor: extendedProps: { calendarId: event.calendarId, color },
calendarRows.find((calendar) => calendar.id === event.calendarId)?.color ?? };
DEFAULT_COLOR, })}
}))} eventClassNames={(arg) => {
const id = String(arg.event.extendedProps["calendarId"] ?? "");
return id ? [`fc-cal-${id.slice(0, 8)}`] : [];
}}
height="auto" height="auto"
/> />
</section> </section>
src/modules/calendar/components/shared-view.tsx
+140 -50
View File
@@ -1,77 +1,167 @@
import { MapPin, StickyNote } from "lucide-react"; import { Calendar as CalendarIcon, MapPin } from "lucide-react";
import type { CalendarShareData, EventShareData } from "../server/share-queries"; import type { CalendarShareData, EventShareData } from "../server/share-queries";
import { ShareEyebrow } from "@/components/share/share-eyebrow";
import { MiniDayCard } from "@/components/share/mini-day-card";
import { MiniMapCard } from "@/components/share/mini-map-card";
import { ShareDetailCard, ShareRow } from "@/components/share/share-detail-card";
function formatEventTime(startAt: string, endAt: string, allDay: boolean): string { function formatTime(d: Date): string {
return d.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
}
function formatTimeRange(startAt: string, endAt: string, allDay: boolean): string {
const start = new Date(startAt); const start = new Date(startAt);
const end = new Date(endAt); const end = new Date(endAt);
if (allDay) { if (allDay) return "All day";
return start.toLocaleDateString(undefined, { weekday: "short", month: "long", day: "numeric" }); return `${formatTime(start)} – ${formatTime(end)}`;
} }
const dateStr = start.toLocaleDateString(undefined, {
weekday: "short", function formatFullDate(d: Date): string {
return d.toLocaleDateString(undefined, {
weekday: "long",
month: "long", month: "long",
day: "numeric", day: "numeric",
year: "numeric",
}); });
const startTime = start.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
const endTime = end.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
return `${dateStr} · ${startTime}–${endTime}`;
} }
export function EventSharedView({ data }: { data: EventShareData }) { export function EventSharedView({ data }: { data: EventShareData }) {
const start = new Date(data.startAt);
const end = new Date(data.endAt);
const time = data.allDay ? "All day" : `${formatTime(start)} – ${formatTime(end)}`;
return ( return (
<div className="mx-auto max-w-xl space-y-4 p-4"> <>
<header className="space-y-1"> <ShareEyebrow>
<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground"> <CalendarIcon className="size-3" />
{data.calendarName} Event
</ShareEyebrow>
<h1
className="serif"
style={{
fontSize: "clamp(28px, 6vw, 38px)",
lineHeight: 1.15,
letterSpacing: "-0.02em",
color: "var(--ink)",
margin: "0 0 8px",
textWrap: "pretty",
}}
>
{data.title}
</h1>
{data.calendarName && (
<p
className="serif"
style={{
fontSize: 17,
color: "var(--ink-soft)",
margin: "0 0 28px",
}}
>
On the {data.calendarName} calendar.
</p> </p>
<h1 className="text-2xl font-semibold">{data.title}</h1> )}
<p className="text-sm text-muted-foreground">
{formatEventTime(data.startAt, data.endAt, data.allDay)} <div
</p> className="grid gap-3.5 mb-6"
</header> style={{ gridTemplateColumns: data.location ? "1fr 1fr" : "1fr" }}
>
<MiniDayCard date={start} time={time} />
{data.location && <MiniMapCard name={data.location} />}
</div>
<ShareDetailCard>
<ShareRow label="When">
{formatFullDate(start)}
{!data.allDay && (
<>
{" · "}
{formatTimeRange(data.startAt, data.endAt, data.allDay)}
</>
)}
</ShareRow>
{data.location && ( {data.location && (
<div className="flex items-start gap-2 text-sm"> <ShareRow label="Where">
<MapPin className="mt-0.5 size-4 shrink-0 text-muted-foreground" /> <span className="inline-flex items-center gap-1.5">
<span>{data.location}</span> <MapPin className="size-3.5 text-[var(--ink-mute)]" />
</div> {data.location}
</span>
</ShareRow>
)} )}
<ShareRow label="Calendar">{data.calendarName}</ShareRow>
</ShareDetailCard>
{data.notes && ( {data.notes && (
<div className="flex items-start gap-2 text-sm"> <p
<StickyNote className="mt-0.5 size-4 shrink-0 text-muted-foreground" /> className="serif"
<p className="whitespace-pre-wrap">{data.notes}</p> style={{
</div> fontSize: 16,
lineHeight: 1.65,
color: "var(--ink-2)",
background: "var(--paper-2)",
borderRadius: 8,
padding: "18px 22px",
margin: "14px 0 24px",
textWrap: "pretty",
whiteSpace: "pre-wrap",
}}
>
{data.notes}
</p>
)} )}
</div> </>
); );
} }
export function CalendarSharedView({ data }: { data: CalendarShareData }) { export function CalendarSharedView({ data }: { data: CalendarShareData }) {
return ( return (
<div className="mx-auto max-w-xl space-y-4 p-4"> <>
<header> <ShareEyebrow>
<h1 className="text-2xl font-semibold">{data.name}</h1> <CalendarIcon className="size-3" />
<p className="text-sm text-muted-foreground">Upcoming events — next 90 days</p> Calendar
</header> </ShareEyebrow>
<h1
className="serif"
style={{
fontSize: "clamp(28px, 6vw, 38px)",
lineHeight: 1.15,
letterSpacing: "-0.02em",
color: "var(--ink)",
margin: "0 0 8px",
textWrap: "pretty",
}}
>
{data.name}
</h1>
<p className="serif" style={{ fontSize: 17, color: "var(--ink-soft)", margin: "0 0 28px" }}>
Upcoming events — next 90 days.
</p>
<ShareDetailCard>
{data.events.length === 0 ? ( {data.events.length === 0 ? (
<p className="text-sm text-muted-foreground">No upcoming events.</p> <p className="muted text-[13.5px] py-2">No upcoming events.</p>
) : ( ) : (
<ul className="divide-y rounded-lg border bg-background"> data.events.map((event) => {
{data.events.map((event) => ( const start = new Date(event.startAt);
<li key={event.id} className="flex flex-col gap-0.5 px-4 py-3"> return (
<span className="font-medium">{event.title}</span> <div key={event.id} className="list-row" style={{ padding: "10px 0" }}>
<span className="text-xs text-muted-foreground"> <span className="dot" style={{ background: data.color ?? "var(--c-household)" }} />
{formatEventTime(event.startAt, event.endAt, event.allDay)} <div className="flex-1 min-w-0">
</span> <div className="text-[14px] font-medium text-[var(--ink-2)]">{event.title}</div>
{event.location && ( <div className="muted tnum text-[12px] mt-0.5">
<span className="flex items-center gap-1 text-xs text-muted-foreground"> {start.toLocaleDateString(undefined, {
<MapPin className="size-3" /> month: "short",
{event.location} day: "numeric",
</span> })}
)} {!event.allDay && ` · ${formatTime(start)}`}
</li> {event.location && ` · ${event.location}`}
))} </div>
</ul> </div>
)}
</div> </div>
); );
})
)}
</ShareDetailCard>
</>
);
} }
src/modules/calendar/manifest.tsx
+68 -25
View File
@@ -18,6 +18,22 @@ const upcomingConfigSchema = z.object({
const monthConfigSchema = z.object({ calendarIds: calendarIdsSchema }); const monthConfigSchema = z.object({ calendarIds: calendarIdsSchema });
function dayLabel(d: Date): string {
const today = new Date();
today.setHours(0, 0, 0, 0);
const tomorrow = new Date(today);
tomorrow.setDate(tomorrow.getDate() + 1);
const target = new Date(d);
target.setHours(0, 0, 0, 0);
if (target.getTime() === today.getTime()) return "Today";
if (target.getTime() === tomorrow.getTime()) return "Tomorrow";
return d.toLocaleDateString(undefined, { weekday: "long" });
}
function formatTime(d: Date): string {
return d.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
}
async function UpcomingEventsWidget({ config }: { config: unknown; ctx: WidgetContext }) { async function UpcomingEventsWidget({ config }: { config: unknown; ctx: WidgetContext }) {
const parsed = upcomingConfigSchema.parse(config); const parsed = upcomingConfigSchema.parse(config);
const now = new Date(); const now = new Date();
@@ -32,26 +48,52 @@ async function UpcomingEventsWidget({ config }: { config: unknown; ctx: WidgetCo
); );
} }
// Group by day
const groups = new Map<string, { day: Date; events: typeof events }>();
for (const e of events) {
const start = new Date(e.startAt);
const key = start.toDateString();
if (!groups.has(key)) groups.set(key, { day: start, events: [] });
groups.get(key)!.events.push(e);
}
return ( return (
<ul className="space-y-2"> <div className="flex flex-col gap-3">
{events.slice(0, 8).map((event) => { {[...groups.values()].slice(0, 4).map((group, gi) => (
<div key={gi}>
<div className="eyebrow mb-1.5 flex items-baseline gap-2">
<span>{dayLabel(group.day)}</span>
<span className="text-[var(--ink-faint)] font-medium tracking-normal">
{group.day.toLocaleDateString(undefined, { month: "short", day: "numeric" })}
</span>
</div>
<div className="flex flex-col gap-1">
{group.events.map((event) => {
const start = new Date(event.startAt); const start = new Date(event.startAt);
const label = event.allDay
? start.toLocaleDateString(undefined, { month: "short", day: "numeric" })
: start.toLocaleString(undefined, {
month: "short",
day: "numeric",
hour: "numeric",
minute: "2-digit",
});
return ( return (
<li key={event.id} className="flex items-start gap-2 text-sm"> <div
<span className="mt-0.5 shrink-0 text-xs text-muted-foreground">{label}</span> key={event.id}
<span className="font-medium leading-snug">{event.title}</span> className="flex items-start gap-2.5 px-2 py-1.5 rounded-md hover:bg-[var(--shade)]"
</li> >
<span className="dot mt-2" style={{ background: "var(--c-household)" }} />
<div className="min-w-[56px] tnum text-[var(--ink-mute)] text-[12px] mt-px">
{event.allDay ? "all day" : formatTime(start)}
</div>
<div className="flex-1 min-w-0">
<div className="text-[13.5px] font-medium text-[var(--ink)] truncate">
{event.title}
</div>
{event.location && (
<div className="text-[11.5px] text-[var(--ink-mute)]">{event.location}</div>
)}
</div>
</div>
); );
})} })}
</ul> </div>
</div>
))}
</div>
); );
} }
@@ -69,28 +111,29 @@ async function MonthWidget({ config }: { config: unknown; ctx: WidgetContext })
const monthName = now.toLocaleDateString(undefined, { month: "long", year: "numeric" }); const monthName = now.toLocaleDateString(undefined, { month: "long", year: "numeric" });
return ( return (
<div className="space-y-2"> <div className="flex flex-col gap-2">
<p className="text-xs font-medium text-muted-foreground">{monthName}</p> <div className="eyebrow">{monthName}</div>
{events.length === 0 ? ( {events.length === 0 ? (
<p className="text-sm text-muted-foreground">No events this month</p> <p className="text-sm text-[var(--ink-mute)]">No events this month</p>
) : ( ) : (
<ul className="space-y-1"> <div className="flex flex-col">
{events.slice(0, 10).map((event) => { {events.slice(0, 10).map((event) => {
const eventStart = new Date(event.startAt); const eventStart = new Date(event.startAt);
const day = eventStart.getDate(); const day = eventStart.getDate();
return ( return (
<li key={event.id} className="flex items-center gap-2 text-sm"> <div key={event.id} className="flex items-center gap-3 py-1.5 text-sm">
<span className="w-5 shrink-0 text-center text-xs font-semibold text-muted-foreground"> <span className="w-6 shrink-0 text-center font-medium text-[var(--ink-mute)] tnum">
{day} {day}
</span> </span>
<span className="truncate">{event.title}</span> <span className="dot" style={{ background: "var(--c-household)" }} />
</li> <span className="truncate text-[var(--ink-2)]">{event.title}</span>
</div>
); );
})} })}
{events.length > 10 && ( {events.length > 10 && (
<li className="text-xs text-muted-foreground">+{events.length - 10} more</li> <div className="text-xs text-[var(--ink-mute)] mt-1">+{events.length - 10} more</div>
)} )}
</ul> </div>
)} )}
</div> </div>
); );
src/modules/lists/components/list-detail.tsx
+119 -60
View File
@@ -1,7 +1,7 @@
"use client"; "use client";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { Archive, GripVertical, Plus, Trash2 } from "lucide-react"; import { Archive, Plus, Trash2 } from "lucide-react";
import { useEffect, useRef, useState, useTransition } from "react"; import { useEffect, useRef, useState, useTransition } from "react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
@@ -23,7 +23,6 @@ export function ListDetail({ initialList }: { initialList: ListDetailDto }) {
const [draft, setDraft] = useState(""); const [draft, setDraft] = useState("");
const [isPending, startTransition] = useTransition(); const [isPending, startTransition] = useTransition();
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLInputElement>(null);
const swipeStart = useRef<Record<string, number>>({});
useEffect(() => { useEffect(() => {
const events = new EventSource(`/api/lists/${initialList.id}/events`); const events = new EventSource(`/api/lists/${initialList.id}/events`);
@@ -95,97 +94,157 @@ export function ListDetail({ initialList }: { initialList: ListDetailDto }) {
}); });
} }
const openItems = list.items.filter((i) => !i.done);
const doneItems = list.items.filter((i) => i.done);
return ( return (
<div className="mx-auto grid w-full max-w-3xl gap-5 p-4"> <div className="mx-auto grid w-full max-w-3xl gap-4">
<header className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"> <header className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div className="min-w-0"> <div className="min-w-0 flex items-center gap-3 flex-1">
<Input <Input
aria-label="List name" aria-label="List name"
className="h-auto border-transparent px-0 text-2xl font-semibold shadow-none focus-visible:border-transparent focus-visible:ring-0" className="serif h-auto border-transparent !bg-transparent px-0 text-[22px] font-medium tracking-tight shadow-none focus-visible:border-transparent focus-visible:ring-0"
value={list.name} value={list.name}
onChange={(event) => setList({ ...list, name: event.target.value })} onChange={(event) => setList({ ...list, name: event.target.value })}
onBlur={commitListName} onBlur={commitListName}
/> />
<div className="text-sm text-muted-foreground"> <span className="badge">
{list.type} / {list.openCount} open / {list.doneCount} done {list.type} · {list.openCount} open
</div> </span>
</div> </div>
<div className="flex items-center gap-2">
<ShareButton entityType="lists.list" entityId={list.id} canWrite={true} /> <ShareButton entityType="lists.list" entityId={list.id} canWrite={true} />
<Button variant="outline" onClick={archiveCurrentList} disabled={isPending}> <Button variant="outline" size="sm" onClick={archiveCurrentList} disabled={isPending}>
<Archive /> <Archive className="size-3.5" />
Archive list Archive
</Button> </Button>
</div>
</header> </header>
<div
className="rounded-[var(--r-lg)] border-[0.5px] bg-[var(--card)] shadow-[var(--shadow-1)] overflow-hidden"
style={{ borderColor: "var(--hair)" }}
>
<form <form
className="flex gap-2" className="flex items-center gap-2 px-[14px] py-3 border-b-[0.5px]"
style={{ borderColor: "var(--hair)" }}
onSubmit={(event) => { onSubmit={(event) => {
event.preventDefault(); event.preventDefault();
submitItem(); submitItem();
}} }}
> >
<Plus className="size-4 text-[var(--ink-mute)]" />
<Input <Input
ref={inputRef} ref={inputRef}
aria-label="Add item" aria-label="Add item"
autoFocus autoFocus
placeholder={list.type === "shopping" ? "Add milk, eggs, coffee..." : "Add a task..."} placeholder={list.type === "shopping" ? "Add to list…" : "Add a task…"}
className="!border-0 !bg-transparent !shadow-none focus-visible:!ring-0 px-0 h-7"
value={draft} value={draft}
onChange={(event) => setDraft(event.target.value)} onChange={(event) => setDraft(event.target.value)}
/> />
<Button type="submit" disabled={!draft.trim() || isPending}> <span className="kbd">↵</span>
<Plus />
Add
</Button>
</form> </form>
<div className="overflow-hidden rounded-lg border bg-background"> {openItems.length === 0 && doneItems.length === 0 && (
{list.items.length === 0 ? ( <div className="muted px-[14px] py-8 text-center text-[13px]">Nothing here yet.</div>
<div className="p-8 text-center text-sm text-muted-foreground">Nothing here yet.</div> )}
) : (
<ul className="divide-y"> {openItems.map((item) => (
{list.items.map((item) => ( <ListItemRow
<li
key={item.id} key={item.id}
className="grid grid-cols-[auto_1fr_auto] items-center gap-3 p-3" item={item}
onPointerDown={(event) => { onToggle={(done) => setItemDone(item, done)}
swipeStart.current[item.id] = event.clientX; onEdit={(text) => editItemText(item, text)}
}} onCommit={() => commitItemText(item)}
onPointerUp={(event) => { onRemove={() => removeItem(item)}
const start = swipeStart.current[item.id];
if (start !== undefined && event.clientX - start < -60) removeItem(item);
delete swipeStart.current[item.id];
}}
>
<input
aria-label={`Complete ${item.text}`}
type="checkbox"
className="size-5 accent-primary"
checked={item.done}
onChange={(event) => setItemDone(item, event.target.checked)}
/> />
<Input
aria-label={`${item.text} text`}
className={item.done ? "text-muted-foreground line-through" : ""}
value={item.text}
onChange={(event) => editItemText(item, event.target.value)}
onBlur={() => commitItemText(item)}
/>
<div className="flex items-center gap-1">
<GripVertical className="size-4 text-muted-foreground" />
<Button
size="icon-sm"
variant="ghost"
aria-label={`Delete ${item.text}`}
onClick={() => removeItem(item)}
>
<Trash2 />
</Button>
</div>
</li>
))} ))}
</ul>
{doneItems.length > 0 && (
<>
<div className="eyebrow px-[14px] pt-3 pb-[6px]">Done · {doneItems.length}</div>
{doneItems.map((item) => (
<ListItemRow
key={item.id}
item={item}
onToggle={(done) => setItemDone(item, done)}
onEdit={(text) => editItemText(item, text)}
onCommit={() => commitItemText(item)}
onRemove={() => removeItem(item)}
/>
))}
</>
)} )}
</div> </div>
</div> </div>
); );
} }
function ListItemRow({
item,
onToggle,
onEdit,
onCommit,
onRemove,
}: {
item: ListItemDto;
onToggle: (done: boolean) => void;
onEdit: (text: string) => void;
onCommit: () => void;
onRemove: () => void;
}) {
const swipeStart = useRef<number | null>(null);
return (
<div
className={`list-row ${item.done ? "checked" : ""} group/row`}
onPointerDown={(event) => {
swipeStart.current = event.clientX;
}}
onPointerUp={(event) => {
const start = swipeStart.current;
if (start !== null && event.clientX - start < -60) onRemove();
swipeStart.current = null;
}}
>
<button
type="button"
aria-label={`Complete ${item.text}`}
aria-pressed={item.done}
className={`checkbox ${item.done ? "on" : ""}`}
onClick={() => onToggle(!item.done)}
>
{item.done && (
<svg
width="12"
height="12"
viewBox="0 0 24 24"
fill="none"
stroke="white"
strokeWidth="2.4"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M5 12l5 5L20 7" />
</svg>
)}
</button>
<Input
aria-label={`${item.text} text`}
className="!border-0 !bg-transparent !shadow-none focus-visible:!ring-0 row-text flex-1 px-0 h-7 text-[13.5px]"
value={item.text}
onChange={(event) => onEdit(event.target.value)}
onBlur={onCommit}
/>
<Button
size="icon-sm"
variant="ghost"
aria-label={`Delete ${item.text}`}
onClick={onRemove}
className="opacity-0 group-hover/row:opacity-100 transition-opacity"
>
<Trash2 className="size-3.5" />
</Button>
</div>
);
}
src/modules/lists/components/list-widget.tsx
+34 -15
View File
@@ -24,31 +24,50 @@ export function ListWidget({ initialItems }: { initialItems: WidgetItem[] }) {
} }
if (items.length === 0) { if (items.length === 0) {
return <p className="text-sm text-muted-foreground">No open items</p>; return <p className="text-sm text-[var(--ink-mute)]">No open items</p>;
} }
return ( return (
<ul className="space-y-1"> <div className="-mx-[14px] -my-[12px]">
{items.map((item) => ( {items.map((item) => (
<li key={item.id} className="flex items-center gap-2 text-sm"> <div
<input key={item.id}
type="checkbox" className={`list-row ${item.done ? "checked" : ""}`}
style={{ padding: "8px 14px" }}
>
<button
type="button"
aria-label={`Complete ${item.text}`} aria-label={`Complete ${item.text}`}
className="size-4 shrink-0 accent-primary" aria-pressed={item.done}
checked={item.done} className={`checkbox ${item.done ? "on" : ""}`}
onChange={(e) => toggle(item, e.target.checked)} onClick={() => toggle(item, !item.done)}
/> >
{item.done && (
<svg
width="12"
height="12"
viewBox="0 0 24 24"
fill="none"
stroke="white"
strokeWidth="2.4"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M5 12l5 5L20 7" />
</svg>
)}
</button>
<Link <Link
href={`/lists/${item.listId}`} href={`/lists/${item.listId}`}
className={`truncate hover:underline transition-colors ${ className="row-text flex-1 text-[13.5px] truncate hover:text-[var(--ink)]"
item.done ? "text-muted-foreground line-through" : ""
}`}
> >
{item.text} {item.text}
</Link> </Link>
<span className="ml-auto shrink-0 text-xs text-muted-foreground">{item.listName}</span> <span className="ml-auto shrink-0 text-[11.5px] text-[var(--ink-mute)]">
</li> {item.listName}
</span>
</div>
))} ))}
</ul> </div>
); );
} }
src/modules/lists/components/lists-index.tsx
+58 -37
View File
@@ -62,13 +62,16 @@ export function ListsIndex({ lists }: { lists: ListWithItemsDto[] }) {
} }
return ( return (
<div className="mx-auto grid w-full max-w-5xl gap-6 p-4"> <div className="mx-auto grid w-full max-w-5xl gap-6">
<div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between"> <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
<div> <div>
<h1 className="text-2xl font-semibold">Lists</h1> <h2 className="serif text-[22px] tracking-tight">Lists</h2>
<p className="text-sm text-muted-foreground">Shopping, tasks, and whatever comes next.</p> <p className="muted text-[13px] mt-1">Shopping, tasks, and whatever comes next.</p>
</div> </div>
<div className="grid gap-2 rounded-lg border bg-background p-3 sm:grid-cols-[140px_220px_auto]"> <div
className="grid gap-2 rounded-[var(--r-md)] border-[0.5px] bg-[var(--card)] p-3 sm:grid-cols-[140px_220px_auto]"
style={{ borderColor: "var(--hair)" }}
>
<div className="space-y-1"> <div className="space-y-1">
<Label htmlFor="new-list-type">Type</Label> <Label htmlFor="new-list-type">Type</Label>
<Input <Input
@@ -86,7 +89,7 @@ export function ListsIndex({ lists }: { lists: ListWithItemsDto[] }) {
/> />
</div> </div>
<Button className="self-end" onClick={addList} disabled={!type || !name}> <Button className="self-end" onClick={addList} disabled={!type || !name}>
<Plus /> <Plus className="size-3.5" />
New list New list
</Button> </Button>
</div> </div>
@@ -95,9 +98,7 @@ export function ListsIndex({ lists }: { lists: ListWithItemsDto[] }) {
<div className="grid gap-6"> <div className="grid gap-6">
{grouped.map(([groupType, groupLists]) => ( {grouped.map(([groupType, groupLists]) => (
<section key={groupType} className="grid gap-3"> <section key={groupType} className="grid gap-3">
<h2 className="text-sm font-medium uppercase tracking-normal text-muted-foreground"> <div className="eyebrow">{groupType}</div>
{groupType}
</h2>
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3"> <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
{groupLists.map((list) => ( {groupLists.map((list) => (
<ListCard key={list.id} list={list} onToggle={handleToggle} /> <ListCard key={list.id} list={list} onToggle={handleToggle} />
@@ -120,25 +121,32 @@ function ListCard({
const [expanded, setExpanded] = useState(true); const [expanded, setExpanded] = useState(true);
return ( return (
<div className="rounded-lg border bg-card text-card-foreground"> <div
<div className="flex items-center gap-2 p-4"> className="rounded-[var(--r-lg)] border-[0.5px] bg-[var(--card)] text-[var(--ink)] shadow-[var(--shadow-1)]"
style={{ borderColor: "var(--hair)" }}
>
<div className="card-h">
<div className="flex items-center gap-2 min-w-0">
<button <button
type="button" type="button"
onClick={() => setExpanded((v) => !v)} onClick={() => setExpanded((v) => !v)}
className="text-muted-foreground hover:text-foreground transition-colors" className="text-[var(--ink-mute)] hover:text-[var(--ink)] transition-colors"
aria-label={expanded ? "Collapse" : "Expand"} aria-label={expanded ? "Collapse" : "Expand"}
> >
{expanded ? <ChevronDown className="size-4" /> : <ChevronRight className="size-4" />} {expanded ? <ChevronDown className="size-4" /> : <ChevronRight className="size-4" />}
</button> </button>
<div className="min-w-0 flex-1"> <div className="min-w-0">
<div className="font-medium truncate">{list.name}</div> <h3 className="serif text-[15px] truncate text-[var(--ink)] m-0 font-medium">
<div className="text-xs text-muted-foreground"> {list.name}
</h3>
<div className="meta">
{list.openCount} open · {list.doneCount} done {list.openCount} open · {list.doneCount} done
</div> </div>
</div> </div>
</div>
<Link <Link
href={`/lists/${list.id}`} href={`/lists/${list.id}`}
className="shrink-0 text-muted-foreground hover:text-foreground transition-colors" className="shrink-0 text-[var(--ink-mute)] hover:text-[var(--ink)] transition-colors"
aria-label={`Open ${list.name}`} aria-label={`Open ${list.name}`}
> >
<ExternalLink className="size-4" /> <ExternalLink className="size-4" />
@@ -146,42 +154,55 @@ function ListCard({
</div> </div>
{expanded && ( {expanded && (
<div className="border-t"> <div>
{list.items.length === 0 ? ( {list.items.length === 0 ? (
<p className="px-4 py-3 text-sm text-muted-foreground"> <p className="muted px-[14px] py-3 text-[13px]">
{list.openCount === 0 ? "All done!" : "No items to show."} {list.openCount === 0 ? "All done!" : "No items to show."}
</p> </p>
) : ( ) : (
<ul className="divide-y"> <div>
{list.items.map((item) => ( {list.items.map((item) => (
<li key={item.id} className="flex items-center gap-3 px-4 py-2"> <div
<input key={item.id}
type="checkbox" className={`list-row ${item.done ? "checked" : ""}`}
aria-label={`Complete ${item.text}`} style={{ padding: "8px 14px" }}
className="size-4 accent-primary shrink-0"
checked={item.done}
onChange={(e) => onToggle(list.id, item, e.target.checked)}
/>
<span
className={`text-sm truncate transition-colors ${
item.done ? "text-muted-foreground line-through" : ""
}`}
> >
{item.text} <button
</span> type="button"
</li> aria-label={`Complete ${item.text}`}
aria-pressed={item.done}
className={`checkbox ${item.done ? "on" : ""}`}
onClick={() => onToggle(list.id, item, !item.done)}
>
{item.done && (
<svg
width="12"
height="12"
viewBox="0 0 24 24"
fill="none"
stroke="white"
strokeWidth="2.4"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M5 12l5 5L20 7" />
</svg>
)}
</button>
<span className="row-text flex-1 text-[13.5px] truncate">{item.text}</span>
</div>
))} ))}
{list.openCount > list.items.filter((i) => !i.done).length && ( {list.openCount > list.items.filter((i) => !i.done).length && (
<li className="px-4 py-2"> <div className="px-[14px] py-2">
<Link <Link
href={`/lists/${list.id}`} href={`/lists/${list.id}`}
className="text-xs text-muted-foreground hover:text-foreground transition-colors" className="text-[12px] text-[var(--ink-mute)] hover:text-[var(--ink)] transition-colors"
> >
+{list.openCount - list.items.filter((i) => !i.done).length} more — open list +{list.openCount - list.items.filter((i) => !i.done).length} more — open list
</Link> </Link>
</li> </div>
)} )}
</ul> </div>
)} )}
</div> </div>
)} )}
src/modules/lists/components/shared-view.tsx
+62 -30
View File
@@ -1,8 +1,10 @@
"use client"; "use client";
import { ListChecks } from "lucide-react";
import { useOptimistic, useTransition } from "react"; import { useOptimistic, useTransition } from "react";
import type { ListShareData, ListShareItem } from "../server/share-queries"; import type { ListShareData, ListShareItem } from "../server/share-queries";
import { toggleShareListItem } from "../server/share-actions"; import { toggleShareListItem } from "../server/share-actions";
import { ShareEyebrow } from "@/components/share/share-eyebrow";
export function ListSharedView({ export function ListSharedView({
data, data,
@@ -33,38 +35,59 @@ export function ListSharedView({
const done = optimisticItems.filter((i) => i.done); const done = optimisticItems.filter((i) => i.done);
return ( return (
<div className="mx-auto max-w-xl space-y-4 p-4"> <>
<header> <ShareEyebrow>
<h1 className="text-2xl font-semibold">{data.name}</h1> <ListChecks className="size-3" />
<p className="text-sm text-muted-foreground capitalize">{data.type}</p> List
</header> </ShareEyebrow>
<h1
className="serif"
style={{
fontSize: "clamp(28px, 6vw, 38px)",
lineHeight: 1.15,
letterSpacing: "-0.02em",
color: "var(--ink)",
margin: "0 0 8px",
textWrap: "pretty",
}}
>
{data.name}
</h1>
<p className="muted text-[13px] capitalize mb-6">{data.type}</p>
{optimisticItems.length === 0 ? ( {optimisticItems.length === 0 ? (
<p className="text-sm text-muted-foreground">This list is empty.</p> <p className="muted text-[13.5px]">This list is empty.</p>
) : ( ) : (
<div className="space-y-4"> <div
className="rounded-[var(--r-md)] overflow-hidden"
style={{
background: "var(--card)",
border: "0.5px solid var(--hair)",
}}
>
{open.length > 0 && ( {open.length > 0 && (
<ul className="divide-y rounded-lg border bg-background"> <>
{open.map((item) => ( {open.map((item) => (
<ItemRow key={item.id} item={item} canWrite={canWrite} onToggle={toggle} /> <ItemRow key={item.id} item={item} canWrite={canWrite} onToggle={toggle} />
))} ))}
</ul> </>
)} )}
{done.length > 0 && ( {done.length > 0 && (
<details className="group"> <details className="group">
<summary className="cursor-pointer select-none text-sm text-muted-foreground"> <summary
{done.length} completed className="cursor-pointer select-none eyebrow"
style={{ padding: "12px 14px 8px", borderTop: "0.5px solid var(--hair)" }}
>
Done · {done.length}
</summary> </summary>
<ul className="mt-2 divide-y rounded-lg border bg-background">
{done.map((item) => ( {done.map((item) => (
<ItemRow key={item.id} item={item} canWrite={canWrite} onToggle={toggle} /> <ItemRow key={item.id} item={item} canWrite={canWrite} onToggle={toggle} />
))} ))}
</ul>
</details> </details>
)} )}
</div> </div>
)} )}
</div> </>
); );
} }
@@ -78,25 +101,34 @@ function ItemRow({
onToggle: (item: ListShareItem) => void; onToggle: (item: ListShareItem) => void;
}) { }) {
return ( return (
<li className="flex items-center gap-3 px-4 py-3"> <div className={`list-row ${item.done ? "checked" : ""}`}>
{canWrite ? ( <button
<input type="button"
type="checkbox"
aria-label={`Complete ${item.text}`} aria-label={`Complete ${item.text}`}
className="size-5 accent-primary" aria-pressed={item.done}
checked={item.done} className={`checkbox ${item.done ? "on" : ""}`}
onChange={() => onToggle(item)} disabled={!canWrite}
/> onClick={() => onToggle(item)}
) : ( >
<span {item.done && (
aria-hidden <svg
className={`size-5 shrink-0 rounded-sm border border-border ${item.done ? "bg-muted" : ""}`} width="12"
/> height="12"
viewBox="0 0 24 24"
fill="none"
stroke="white"
strokeWidth="2.4"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M5 12l5 5L20 7" />
</svg>
)} )}
<span className={`text-sm ${item.done ? "text-muted-foreground line-through" : ""}`}> </button>
<span className="row-text flex-1 text-[13.5px]">
{item.text} {item.text}
{item.qty && <span className="ml-1 text-xs text-muted-foreground">×{item.qty}</span>} {item.qty && <span className="ml-1 text-[11.5px] muted">×{item.qty}</span>}
</span> </span>
</li> </div>
); );
} }
src/modules/notes/components/note-editor.tsx
+32 -18
View File
@@ -64,35 +64,40 @@ export function NoteEditor({ note }: { note?: NoteDto }) {
} }
return ( return (
<div className="mx-auto grid w-full max-w-6xl gap-5 p-4"> <div className="mx-auto grid w-full max-w-6xl gap-4">
<header className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"> <header className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
<div> <div className="flex items-center gap-2 min-w-0 flex-1">
<h1 className="text-2xl font-semibold">{currentNote ? currentNote.title : "New note"}</h1> {pinned && <Pin className="size-3.5 text-[var(--accent)]" />}
<p className="text-sm text-muted-foreground">Markdown notes shared with the household.</p> <h2 className="serif text-[24px] font-medium tracking-tight truncate">
{currentNote ? currentNote.title : "New note"}
</h2>
</div> </div>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{currentNote ? ( {currentNote ? (
<Button variant="outline" onClick={togglePinned} disabled={isPending}> <Button variant="outline" size="sm" onClick={togglePinned} disabled={isPending}>
{pinned ? <PinOff /> : <Pin />} {pinned ? <PinOff className="size-3.5" /> : <Pin className="size-3.5" />}
{pinned ? "Unpin note" : "Pin note"} {pinned ? "Unpin" : "Pin"}
</Button> </Button>
) : null} ) : null}
{currentNote ? <ShareButton entityType="notes.note" entityId={currentNote.id} /> : null} {currentNote ? <ShareButton entityType="notes.note" entityId={currentNote.id} /> : null}
{currentNote ? ( {currentNote ? (
<Button variant="destructive" onClick={removeNote} disabled={isPending}> <Button variant="destructive" size="sm" onClick={removeNote} disabled={isPending}>
<Trash2 /> <Trash2 className="size-3.5" />
Delete note Delete
</Button> </Button>
) : null} ) : null}
<Button onClick={saveNote} disabled={!title.trim() || isPending}> <Button size="sm" onClick={saveNote} disabled={!title.trim() || isPending}>
<Save /> <Save className="size-3.5" />
Save note Save
</Button> </Button>
</div> </div>
</header> </header>
<div className="grid gap-5 lg:grid-cols-[minmax(0,1fr)_minmax(280px,420px)]"> <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(280px,420px)]">
<section className="grid gap-4 rounded-lg border bg-background p-4"> <section
className="grid gap-4 rounded-[var(--r-lg)] border-[0.5px] bg-[var(--card)] p-4 shadow-[var(--shadow-1)]"
style={{ borderColor: "var(--hair)" }}
>
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label htmlFor="note-title">Title</Label> <Label htmlFor="note-title">Title</Label>
<Input <Input
@@ -106,7 +111,13 @@ export function NoteEditor({ note }: { note?: NoteDto }) {
<textarea <textarea
id="note-body" id="note-body"
aria-label="Body" aria-label="Body"
className="min-h-80 w-full rounded-lg border border-input bg-transparent px-3 py-2 text-sm leading-6 outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50" className="min-h-80 w-full rounded-[var(--r-md)] border-[0.5px] bg-transparent px-3 py-2 leading-[1.6] outline-none transition-colors placeholder:text-[var(--ink-faint)] focus-visible:border-[var(--ink)] focus-visible:ring-3 focus-visible:ring-[var(--ink)]/8"
style={{
fontFamily: "var(--serif)",
fontSize: "15px",
color: "var(--ink-2)",
borderColor: "var(--hair-2)",
}}
value={body} value={body}
onChange={(event) => setBody(event.target.value)} onChange={(event) => setBody(event.target.value)}
placeholder="# Dinner ideas&#10;&#10;- Tacos&#10;- Soup" placeholder="# Dinner ideas&#10;&#10;- Tacos&#10;- Soup"
@@ -123,8 +134,11 @@ export function NoteEditor({ note }: { note?: NoteDto }) {
</div> </div>
</section> </section>
<aside className="rounded-lg border bg-card p-4 text-card-foreground"> <aside
<h2 className="mb-3 text-sm font-medium text-muted-foreground">Preview</h2> className="rounded-[var(--r-lg)] border-[0.5px] bg-[var(--card)] p-4 text-[var(--ink)] shadow-[var(--shadow-1)]"
style={{ borderColor: "var(--hair)" }}
>
<div className="eyebrow mb-3">Preview</div>
<MarkdownPreview markdown={body} /> <MarkdownPreview markdown={body} />
</aside> </aside>
</div> </div>
src/modules/notes/components/notes-index.tsx
+87 -18
View File
@@ -3,50 +3,119 @@ import { Plus, Pin } from "lucide-react";
import { buttonVariants } from "@/components/ui/button"; import { buttonVariants } from "@/components/ui/button";
import type { NoteDto } from "../server/queries"; import type { NoteDto } from "../server/queries";
function relTime(date: Date | string): string {
const d = new Date(date);
const now = new Date();
const diffMs = now.getTime() - d.getTime();
const days = Math.round(diffMs / 86400000);
if (days <= 0) return "today";
if (days === 1) return "yesterday";
if (days < 7) return `${days}d ago`;
if (days < 30) return `${Math.round(days / 7)}w ago`;
return `${Math.round(days / 30)}mo ago`;
}
export function NotesIndex({ notes }: { notes: NoteDto[] }) { export function NotesIndex({ notes }: { notes: NoteDto[] }) {
const pinned = notes.filter((n) => n.pinned);
const others = notes.filter((n) => !n.pinned);
return ( return (
<div className="mx-auto grid w-full max-w-5xl gap-6 p-4"> <div className="mx-auto grid w-full max-w-5xl gap-5">
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"> <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div> <div>
<h1 className="text-2xl font-semibold">Notes</h1> <h2 className="serif text-[22px] tracking-tight">Notes</h2>
<p className="text-sm text-muted-foreground"> <p className="muted text-[13px] mt-1">
Shared reminders, reference notes, and loose household details. Shared reminders, reference notes, and loose household details.
</p> </p>
</div> </div>
<Link href="/notes/new" className={buttonVariants()}> <Link href="/notes/new" className={buttonVariants({ size: "sm" })}>
<Plus /> <Plus className="size-3.5" />
New note New note
</Link> </Link>
</div> </div>
{notes.length === 0 ? ( {notes.length === 0 ? (
<div className="rounded-lg border bg-background p-8 text-center text-sm text-muted-foreground"> <div
className="rounded-[var(--r-md)] border-[0.5px] bg-[var(--card)] p-8 text-center text-[13px] muted"
style={{ borderColor: "var(--hair)" }}
>
No notes yet. No notes yet.
</div> </div>
) : ( ) : (
<>
{pinned.length > 0 && (
<div>
<div className="eyebrow mb-2 flex items-center gap-1.5">
<Pin className="size-3" /> Pinned
</div>
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3"> <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
{notes.map((note) => ( {pinned.map((note) => (
<NoteCardLink key={note.id} note={note} />
))}
</div>
</div>
)}
<div>
<div className="eyebrow mb-2">All notes · {others.length}</div>
<div
className="rounded-[var(--r-md)] border-[0.5px] bg-[var(--card)] overflow-hidden"
style={{ borderColor: "var(--hair)" }}
>
{others.map((note, i) => (
<Link <Link
key={note.id} key={note.id}
href={`/notes/${note.id}`} href={`/notes/${note.id}`}
className="grid min-h-32 gap-3 rounded-lg border bg-card p-4 text-card-foreground transition-colors hover:bg-muted" className="flex gap-3 px-[14px] py-3 hover:bg-[var(--shade)]"
style={{
borderBottom: i === others.length - 1 ? "0" : "0.5px solid var(--hair)",
}}
>
<div className="flex-1 min-w-0">
<h4 className="serif text-[15px] font-medium text-[var(--ink)] m-0">
{note.title}
</h4>
<div
className="muted text-[12.5px] mt-0.5 truncate"
style={{ color: "var(--ink-mute)" }}
> >
<div className="flex items-start justify-between gap-3">
<h2 className="font-medium">{note.title}</h2>
{note.pinned ? (
<Pin aria-label="Pinned" className="mt-0.5 size-4 shrink-0 text-primary" />
) : null}
</div>
<p className="line-clamp-3 text-sm text-muted-foreground">
{note.body || "No body text."} {note.body || "No body text."}
</p> </div>
<div className="text-xs text-muted-foreground"> </div>
Updated {new Date(note.updatedAt).toLocaleDateString()} <div className="muted text-[11.5px] shrink-0 self-center">
{relTime(note.updatedAt)}
</div> </div>
</Link> </Link>
))} ))}
{others.length === 0 && (
<div className="muted px-[14px] py-6 text-center text-[13px]">No notes match.</div>
)}
</div> </div>
</div>
</>
)} )}
</div> </div>
); );
} }
function NoteCardLink({ note }: { note: NoteDto }) {
return (
<Link href={`/notes/${note.id}`} className="note-card">
{note.pinned && <Pin className="pin size-3" />}
<h4 className="text-[15.5px]">{note.title}</h4>
<p
style={{
display: "-webkit-box",
WebkitLineClamp: 3,
WebkitBoxOrient: "vertical",
overflow: "hidden",
}}
>
{note.body || "No body text."}
</p>
<div className="flex items-center gap-1.5 mt-1 text-[11.5px] muted">
<span>{relTime(note.updatedAt)}</span>
</div>
</Link>
);
}
src/modules/notes/components/shared-view.tsx
+42 -10
View File
@@ -1,26 +1,58 @@
import { Pin } from "lucide-react"; import { FileText, Pin } from "lucide-react";
import type { NoteShareData } from "../server/share-queries"; import type { NoteShareData } from "../server/share-queries";
import { ShareEyebrow } from "@/components/share/share-eyebrow";
export function NoteSharedView({ data }: { data: NoteShareData }) { export function NoteSharedView({ data }: { data: NoteShareData }) {
const updatedAt = new Date(data.updatedAt).toLocaleDateString(undefined, { const updated = new Date(data.updatedAt).toLocaleDateString(undefined, {
year: "numeric", year: "numeric",
month: "long", month: "long",
day: "numeric", day: "numeric",
}); });
return ( return (
<div className="mx-auto max-w-xl space-y-4 p-4"> <>
<header className="space-y-1"> <ShareEyebrow>
<FileText className="size-3" />
Note
</ShareEyebrow>
<h1
className="serif"
style={{
fontSize: "clamp(28px, 6vw, 38px)",
lineHeight: 1.15,
letterSpacing: "-0.02em",
color: "var(--ink)",
margin: "0 0 8px",
textWrap: "pretty",
}}
>
{data.title}
</h1>
<p className="muted text-[13px] mb-6 inline-flex items-center gap-2">
{data.pinned && ( {data.pinned && (
<span className="flex items-center gap-1 text-xs text-muted-foreground"> <span className="inline-flex items-center gap-1">
<Pin className="size-3" /> <Pin className="size-3 text-[var(--accent)]" />
Pinned Pinned
</span> </span>
)} )}
<h1 className="text-2xl font-semibold">{data.title}</h1> {data.pinned && <span>·</span>}
<p className="text-xs text-muted-foreground">Updated {updatedAt}</p> <span>Updated {updated}</span>
</header> </p>
{data.body && <p className="whitespace-pre-wrap text-sm leading-relaxed">{data.body}</p>}
{data.body && (
<div
className="serif"
style={{
fontSize: 16,
lineHeight: 1.7,
color: "var(--ink-2)",
whiteSpace: "pre-wrap",
textWrap: "pretty",
}}
>
{data.body}
</div> </div>
)}
</>
); );
} }
src/modules/notes/manifest.tsx
+34 -7
View File
@@ -15,21 +15,48 @@ async function NotesWidget({ config }: { config: unknown; ctx: WidgetContext })
if (notes.length === 0) { if (notes.length === 0) {
return ( return (
<p className="text-sm text-muted-foreground"> <p className="text-sm text-[var(--ink-mute)]">
{parsed.filter === "pinned" ? "No pinned notes" : "No notes"} {parsed.filter === "pinned" ? "No pinned notes" : "No notes"}
</p> </p>
); );
} }
return ( return (
<ul className="space-y-2"> <div className="grid gap-2 sm:grid-cols-2">
{notes.map((note) => ( {notes.map((note) => (
<li key={note.id} className="space-y-0.5"> <a key={note.id} href={`/notes/${note.id}`} className="note-card">
<p className="text-sm font-medium leading-snug">{note.title}</p> {parsed.filter === "pinned" && (
{note.body && <p className="line-clamp-2 text-xs text-muted-foreground">{note.body}</p>} <svg
</li> className="pin"
width="12"
height="12"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.8"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M12 17v5" />
<path d="M9 4h6l1 6 3 3H5l3-3 1-6z" />
</svg>
)}
<h4 className="text-[14px]">{note.title}</h4>
{note.body && (
<p
style={{
display: "-webkit-box",
WebkitLineClamp: 3,
WebkitBoxOrient: "vertical",
overflow: "hidden",
}}
>
{note.body}
</p>
)}
</a>
))} ))}
</ul> </div>
); );
} }