@remit/web-client 0.0.1

package/src/routes/settings/appearance.tsx

@@ -0,0 +1,140 @@
+/**
+ * Appearance settings — density and theme.
+ * Instant-apply, no save button. Both settings persist in localStorage.
+ *
+ * Theme is driven by theme-preference.ts (setThemePreference /
+ * getThemePreference) so the same preference that boots from theme.ts
+ * is the one the picker shows and changes.
+ */
+import { SegmentedControl, SettingsShell } from "@remit/ui";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
+import {
+	getThemePreference,
+	setThemePreference,
+	type ThemePreference,
+} from "@/lib/theme-preference";
+import { SETTINGS_ID_TO_PATH, SETTINGS_NAV_ITEMS } from "@/routes/settings";
+
+export const Route = createFileRoute("/settings/appearance")({
+	component: AppearanceSettings,
+});
+
+/* ------------------------------------------------------------------ */
+/* Density helpers (local-only until user-preference storage exists)  */
+/* ------------------------------------------------------------------ */
+
+const DENSITY_KEY = "remit.density";
+type Density = "comfortable" | "compact";
+
+function readDensity(): Density {
+	if (typeof localStorage === "undefined") return "comfortable";
+	return (localStorage.getItem(DENSITY_KEY) as Density | null) ?? "comfortable";
+}
+
+/* ------------------------------------------------------------------ */
+/* Help rail copy                                                     */
+/* ------------------------------------------------------------------ */
+
+const appearanceHelp = (
+	<div className="space-y-3">
+		<p>
+			<strong className="text-fg">Density</strong> controls how much information
+			fits on screen. Compact is great on smaller displays; Comfortable gives
+			each item more breathing room.
+		</p>
+		<p>
+			<strong className="text-fg">Theme</strong> switches between light, dark,
+			and system-preference modes instantly. The change takes effect across the
+			whole app immediately.
+		</p>
+		<p className="text-2xs text-fg-subtle">
+			Preferences are stored locally in this browser. Server-side sync is coming
+			soon.
+		</p>
+	</div>
+);
+
+/* ------------------------------------------------------------------ */
+/* Page component                                                     */
+/* ------------------------------------------------------------------ */
+
+function AppearanceSettings() {
+	const navigate = useNavigate();
+	const [helpOpen, setHelpOpen] = useState(true);
+
+	const [density, setDensity] = useState<Density>(readDensity);
+	// Read the current stored preference so the picker reflects the boot-time value
+	const [theme, setTheme] = useState<ThemePreference>(getThemePreference);
+
+	const handleDensity = (value: Density) => {
+		setDensity(value);
+		// Density is read by the mail list from the same localStorage key
+		if (typeof localStorage !== "undefined") {
+			localStorage.setItem(DENSITY_KEY, value);
+		}
+	};
+
+	const handleTheme = (value: ThemePreference) => {
+		setTheme(value);
+		setThemePreference(value); // persists + applies immediately
+	};
+
+	const handleSelectNav = (id: string) => {
+		const path = SETTINGS_ID_TO_PATH[id];
+		if (path) void navigate({ to: path });
+	};
+
+	return (
+		<SettingsShell
+			items={SETTINGS_NAV_ITEMS}
+			activeId="appearance"
+			title="Appearance"
+			description="Display density and colour theme — instant-apply."
+			help={appearanceHelp}
+			helpOpen={helpOpen}
+			onToggleHelp={() => setHelpOpen((v) => !v)}
+			onSelect={handleSelectNav}
+			onBackToMail={() => void navigate({ to: "/mail" })}
+		>
+			<div className="space-y-5">
+				{/* Density */}
+				<div className="space-y-2">
+					<p className="text-sm font-medium text-fg">Density</p>
+					<SegmentedControl
+						name="density"
+						aria-label="Density"
+						value={density}
+						onChange={handleDensity}
+						options={[
+							{ value: "comfortable", label: "Comfortable" },
+							{ value: "compact", label: "Compact" },
+						]}
+					/>
+					<p className="text-xs text-fg-subtle">
+						Controls the spacing of message rows in the mail list.
+					</p>
+				</div>
+
+				{/* Theme */}
+				<div className="space-y-2">
+					<p className="text-sm font-medium text-fg">Theme</p>
+					<SegmentedControl
+						name="theme"
+						aria-label="Theme"
+						value={theme}
+						onChange={handleTheme}
+						options={[
+							{ value: "system", label: "System" },
+							{ value: "light", label: "Light" },
+							{ value: "dark", label: "Dark" },
+						]}
+					/>
+					<p className="text-xs text-fg-subtle">
+						Applies immediately. System default follows your OS preference.
+					</p>
+				</div>
+			</div>
+		</SettingsShell>
+	);
+}

package/src/routes/settings/filters.tsx

@@ -0,0 +1,141 @@
+import {
+	configOperationsGetConfigOptions,
+	mailboxOperationsListMailboxesOptions,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
+import { SettingsShell } from "@remit/ui";
+import { useQuery } from "@tanstack/react-query";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useCallback, useState } from "react";
+import { FiltersList } from "@/components/settings/FiltersList";
+import { ErrorState } from "@/components/ui/ErrorState";
+import { useDeleteFilter, useFilterList } from "@/hooks/useFilters";
+import { getMailboxDisplayName } from "@/lib/folder-roles";
+import { SETTINGS_ID_TO_PATH, SETTINGS_NAV_ITEMS } from "@/routes/settings";
+
+export const Route = createFileRoute("/settings/filters")({
+	component: FiltersSettings,
+});
+
+const filtersHelp = (
+	<div className="space-y-3">
+		<p>
+			Filters are the standing rules Organize creates. A{" "}
+			<strong>Standing</strong> filter keeps working on new mail; a{" "}
+			<strong>Temporary</strong> one stops on its own at the date you picked.
+		</p>
+		<p>
+			An expired filter isn't deleted the instant it lapses — it stays here,
+			marked Expired, so you can see what it did and when it stopped.
+		</p>
+	</div>
+);
+
+function AccountFilters({ account }: { account: RemitImapAccountResponse }) {
+	const accountId = account.accountId;
+	const { filters, isPending, isError, error, refetch } =
+		useFilterList(accountId);
+	const { deleteFilter, deletingFilterId } = useDeleteFilter(accountId);
+
+	const { data: mailboxesData } = useQuery({
+		...mailboxOperationsListMailboxesOptions({ path: { accountId } }),
+		staleTime: Infinity,
+	});
+
+	const mailboxName = useCallback(
+		(mailboxId: string): string | undefined => {
+			const mailbox = mailboxesData?.items.find(
+				(item) => item.mailboxId === mailboxId,
+			);
+			return mailbox ? getMailboxDisplayName(mailbox.fullPath) : undefined;
+		},
+		[mailboxesData?.items],
+	);
+
+	return (
+		<section className="space-y-2">
+			<h2 className="text-sm font-semibold text-fg">{account.email}</h2>
+			{isPending ? (
+				// biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label on loading skeleton provides useful context for assistive tech
+				<div
+					className="h-16 animate-pulse rounded-md border border-line bg-surface"
+					aria-busy="true"
+					aria-label={`Loading filters for ${account.email}`}
+				/>
+			) : isError ? (
+				<ErrorState
+					variant="inline"
+					title={`Couldn't load filters for ${account.email}`}
+					error={error}
+					onRetry={() => {
+						refetch();
+					}}
+				/>
+			) : (
+				<FiltersList
+					filters={filters}
+					mailboxName={mailboxName}
+					onDelete={deleteFilter}
+					deletingFilterId={deletingFilterId}
+				/>
+			)}
+		</section>
+	);
+}
+
+function FiltersSettings() {
+	const navigate = useNavigate();
+	const [helpOpen, setHelpOpen] = useState(true);
+
+	const {
+		data: config,
+		isPending,
+		isError,
+		error,
+		refetch,
+	} = useQuery(configOperationsGetConfigOptions());
+
+	const handleSelectNav = (id: string) => {
+		const path = SETTINGS_ID_TO_PATH[id];
+		if (path) void navigate({ to: path });
+	};
+
+	return (
+		<SettingsShell
+			items={SETTINGS_NAV_ITEMS}
+			activeId="filters"
+			title="Filters"
+			description="Standing and temporary rules created by Organize, per account."
+			help={filtersHelp}
+			helpOpen={helpOpen}
+			onToggleHelp={() => setHelpOpen((v) => !v)}
+			onSelect={handleSelectNav}
+			onBackToMail={() => void navigate({ to: "/mail" })}
+		>
+			{isPending ? (
+				// biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label on loading skeleton provides useful context for assistive tech
+				<div
+					className="h-24 animate-pulse rounded-sm border border-line bg-surface"
+					aria-busy="true"
+					aria-label="Loading accounts"
+				/>
+			) : isError ? (
+				<ErrorState
+					title="Couldn't load accounts"
+					error={error}
+					onRetry={() => {
+						refetch();
+					}}
+				/>
+			) : config.accounts.length === 0 ? (
+				<p className="py-12 text-sm text-fg-muted">No accounts configured.</p>
+			) : (
+				<div className="space-y-8">
+					{config.accounts.map((account) => (
+						<AccountFilters key={account.accountId} account={account} />
+					))}
+				</div>
+			)}
+		</SettingsShell>
+	);
+}

package/src/routes/settings/folders.tsx

@@ -0,0 +1,216 @@
+import {
+	configOperationsGetConfigOptions,
+	configOperationsGetConfigQueryKey,
+	folderRoleOperationsAppointFolderRoleMutation,
+	mailboxDetailOperationsRenameMailboxMutation,
+	mailboxOperationsListMailboxesOptions,
+	mailboxOperationsListMailboxesQueryKey,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
+import {
+	Banner,
+	type CandidateFolder,
+	type FolderRole,
+	RoleAppointmentList,
+	SettingsShell,
+} from "@remit/ui";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
+import { ErrorState } from "@/components/ui/ErrorState";
+import {
+	CANONICAL_TO_NAV_ROLE,
+	NAV_ROLE_TO_CANONICAL,
+} from "@/lib/folder-roles";
+import { SETTINGS_ID_TO_PATH, SETTINGS_NAV_ITEMS } from "@/routes/settings";
+
+export const Route = createFileRoute("/settings/folders")({
+	component: FoldersSettings,
+});
+
+const foldersHelp = (
+	<div className="space-y-3">
+		<p>
+			Each canonical role — Inbox, Drafts, Sent, Archive, Spam, Trash — points
+			at one of your account's real folders. Pick the one that actually holds
+			the mail; the message counts tell real folders from empty look-alikes.
+		</p>
+		<p>
+			Appointing a folder to a role here doesn't touch any other role, and
+			doesn't move or rename anything on the server — it just tells Remit which
+			folder to treat as e.g. "Drafts" everywhere (sidebar, unread badges, the
+			compose flow).
+		</p>
+		<p>
+			<strong className="text-fg">Display name</strong> renames the appointed
+			folder for the sidebar. Leave it blank to use the role's canonical name.
+		</p>
+	</div>
+);
+
+/** One account's folder roles, fed to the kit list. Owns its own queries + mutations. */
+function AccountFolderRoles({
+	account,
+}: {
+	account: RemitImapAccountResponse;
+}) {
+	const queryClient = useQueryClient();
+	const accountId = account.accountId;
+
+	const { data, isPending, isError, error, refetch } = useQuery(
+		mailboxOperationsListMailboxesOptions({ path: { accountId } }),
+	);
+
+	const appointMutation = useMutation({
+		...folderRoleOperationsAppointFolderRoleMutation(),
+		onSuccess: () => {
+			queryClient.invalidateQueries({
+				queryKey: configOperationsGetConfigQueryKey(),
+			});
+		},
+	});
+
+	const renameMutation = useMutation({
+		...mailboxDetailOperationsRenameMailboxMutation(),
+		onSuccess: () => {
+			queryClient.invalidateQueries({
+				queryKey: mailboxOperationsListMailboxesQueryKey({
+					path: { accountId },
+				}),
+			});
+		},
+	});
+
+	const handleAppoint = (role: FolderRole, mailboxId: string | null) => {
+		appointMutation.mutate({
+			path: { accountId, role: NAV_ROLE_TO_CANONICAL[role] },
+			body: { mailboxId },
+		});
+	};
+
+	const handleRename = (mailboxId: string, name: string) => {
+		const trimmed = name.trim();
+		renameMutation.mutate({
+			path: { accountId, mailboxId },
+			body: { displayNameOverride: trimmed === "" ? null : trimmed },
+		});
+	};
+
+	if (isPending) {
+		return (
+			// biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label on loading skeleton provides useful context for assistive tech
+			<div
+				className="h-24 animate-pulse rounded-sm border border-line bg-surface"
+				aria-busy="true"
+				aria-label={`Loading folders for ${account.email}`}
+			/>
+		);
+	}
+
+	if (isError) {
+		return (
+			<ErrorState
+				variant="inline"
+				title={`Couldn't load folders for ${account.email}`}
+				error={error}
+				onRetry={() => {
+					refetch();
+				}}
+			/>
+		);
+	}
+
+	const folders: CandidateFolder[] = data.items.map((mailbox) => ({
+		mailboxId: mailbox.mailboxId,
+		providerPath: mailbox.fullPath,
+		messageCount: mailbox.messageCount,
+	}));
+
+	const appointments: Record<string, string | null> = {};
+	for (const appointment of account.folderAppointments) {
+		const role = CANONICAL_TO_NAV_ROLE[appointment.role];
+		if (role) appointments[role] = appointment.mailboxId ?? null;
+	}
+
+	const displayNames: Record<string, string> = {};
+	for (const mailbox of data.items) {
+		if (mailbox.displayNameOverride) {
+			displayNames[mailbox.mailboxId] = mailbox.displayNameOverride;
+		}
+	}
+
+	return (
+		<div className="space-y-2">
+			{(appointMutation.isError || renameMutation.isError) && (
+				<Banner tone="danger" variant="soft">
+					Couldn't save that change. Please try again.
+				</Banner>
+			)}
+			<RoleAppointmentList
+				accountEmail={account.email}
+				folders={folders}
+				appointments={appointments}
+				displayNames={displayNames}
+				onAppoint={handleAppoint}
+				onRename={handleRename}
+			/>
+		</div>
+	);
+}
+
+function FoldersSettings() {
+	const navigate = useNavigate();
+	const [helpOpen, setHelpOpen] = useState(true);
+
+	const {
+		data: config,
+		isPending,
+		isError,
+		error,
+		refetch,
+	} = useQuery(configOperationsGetConfigOptions());
+
+	const handleSelectNav = (id: string) => {
+		const path = SETTINGS_ID_TO_PATH[id];
+		if (path) void navigate({ to: path });
+	};
+
+	return (
+		<SettingsShell
+			items={SETTINGS_NAV_ITEMS}
+			activeId="folders"
+			title="Folder roles"
+			description="Appoint which real folder fills each canonical role, per account."
+			help={foldersHelp}
+			helpOpen={helpOpen}
+			onToggleHelp={() => setHelpOpen((v) => !v)}
+			onSelect={handleSelectNav}
+			onBackToMail={() => void navigate({ to: "/mail" })}
+		>
+			{isPending ? (
+				// biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label on loading skeleton provides useful context for assistive tech
+				<div
+					className="h-24 animate-pulse rounded-sm border border-line bg-surface"
+					aria-busy="true"
+					aria-label="Loading accounts"
+				/>
+			) : isError ? (
+				<ErrorState
+					title="Couldn't load accounts"
+					error={error}
+					onRetry={() => {
+						refetch();
+					}}
+				/>
+			) : config.accounts.length === 0 ? (
+				<p className="py-12 text-sm text-fg-muted">No accounts configured.</p>
+			) : (
+				<div className="space-y-8">
+					{config.accounts.map((account) => (
+						<AccountFolderRoles key={account.accountId} account={account} />
+					))}
+				</div>
+			)}
+		</SettingsShell>
+	);
+}

package/src/routes/settings/index.tsx

@@ -0,0 +1,5 @@
+import { createFileRoute, Navigate } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/settings/")({
+	component: () => <Navigate to="/settings/accounts" />,
+});