Files
famapp/src/app/settings/actions.ts
T
ginnoirandClaude Opus 4.7 9612a54e52
Release / build-and-push (push) Has been cancelled
Apply paper-and-ink design system across all surfaces
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>
2026-05-07 01:03:21 -05:00

91 lines
2.8 KiB
TypeScript

"use server";
import { eq } from "drizzle-orm";
import { revalidatePath } from "next/cache";
import { db } from "@/lib/db";
import { users } from "@/modules/_core/schema";
import {
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 { revokeShareLink } from "@/modules/_core/share";
export interface ThemePatch {
palette?: Palette;
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();
await db.update(users).set(update).where(eq(users.id, user.id));
}
export async function setCompletionVisibilityHours(hours: number): Promise<void> {
const parsed = Number(hours);
if (!Number.isInteger(parsed) || parsed < 0 || parsed > 8760)
throw new Error("Invalid hours value");
const { user } = await getCurrentSession();
await db.update(users).set({ completionVisibilityHours: parsed }).where(eq(users.id, user.id));
revalidatePath("/settings");
}
export async function revokeShareLinkAction(formData: FormData): Promise<void> {
const id = formData.get("id");
if (typeof id !== "string") throw new Error("Missing id");
await revokeShareLink(id);
revalidatePath("/settings");
}