@remit/web-client 0.0.238 → 0.0.239

package/src/routeTree.gen.ts

@@ -25,6 +25,7 @@ import { Route as SettingsIndexRouteImport } from './routes/settings/index'
 import { Route as SettingsAccountsRouteImport } from './routes/settings/accounts'
 import { Route as SettingsAdvancedRouteImport } from './routes/settings/advanced'
 import { Route as SettingsAppearanceRouteImport } from './routes/settings/appearance'
+import { Route as SettingsCalendarsRouteImport } from './routes/settings/calendars'
 import { Route as SettingsFiltersRouteImport } from './routes/settings/filters'
 import { Route as SettingsFoldersRouteImport } from './routes/settings/folders'
 import { Route as SettingsLabelsRouteImport } from './routes/settings/labels'
@@ -138,6 +139,11 @@ const SettingsAppearanceRoute = SettingsAppearanceRouteImport.update({
   path: '/appearance',
   getParentRoute: () => SettingsRoute,
 } as any)
+const SettingsCalendarsRoute = SettingsCalendarsRouteImport.update({
+  id: '/calendars',
+  path: '/calendars',
+  getParentRoute: () => SettingsRoute,
+} as any)
 const SettingsFiltersRoute = SettingsFiltersRouteImport.update({
   id: '/filters',
   path: '/filters',
@@ -335,6 +341,7 @@ export interface FileRoutesByFullPath {
   '/settings/accounts': typeof SettingsAccountsRoute
   '/settings/advanced': typeof SettingsAdvancedRoute
   '/settings/appearance': typeof SettingsAppearanceRoute
+  '/settings/calendars': typeof SettingsCalendarsRoute
   '/settings/filters': typeof SettingsFiltersRoute
   '/settings/folders': typeof SettingsFoldersRoute
   '/settings/labels': typeof SettingsLabelsRoute
@@ -378,6 +385,7 @@ export interface FileRoutesByTo {
   '/settings/accounts': typeof SettingsAccountsRoute
   '/settings/advanced': typeof SettingsAdvancedRoute
   '/settings/appearance': typeof SettingsAppearanceRoute
+  '/settings/calendars': typeof SettingsCalendarsRoute
   '/settings/filters': typeof SettingsFiltersRoute
   '/settings/folders': typeof SettingsFoldersRoute
   '/settings/labels': typeof SettingsLabelsRoute
@@ -424,6 +432,7 @@ export interface FileRoutesById {
   '/settings/accounts': typeof SettingsAccountsRoute
   '/settings/advanced': typeof SettingsAdvancedRoute
   '/settings/appearance': typeof SettingsAppearanceRoute
+  '/settings/calendars': typeof SettingsCalendarsRoute
   '/settings/filters': typeof SettingsFiltersRoute
   '/settings/folders': typeof SettingsFoldersRoute
   '/settings/labels': typeof SettingsLabelsRoute
@@ -476,6 +485,7 @@ export interface FileRouteTypes {
     | '/settings/accounts'
     | '/settings/advanced'
     | '/settings/appearance'
+    | '/settings/calendars'
     | '/settings/filters'
     | '/settings/folders'
     | '/settings/labels'
@@ -519,6 +529,7 @@ export interface FileRouteTypes {
     | '/settings/accounts'
     | '/settings/advanced'
     | '/settings/appearance'
+    | '/settings/calendars'
     | '/settings/filters'
     | '/settings/folders'
     | '/settings/labels'
@@ -564,6 +575,7 @@ export interface FileRouteTypes {
     | '/settings/accounts'
     | '/settings/advanced'
     | '/settings/appearance'
+    | '/settings/calendars'
     | '/settings/filters'
     | '/settings/folders'
     | '/settings/labels'
@@ -724,6 +736,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SettingsAppearanceRouteImport
       parentRoute: typeof SettingsRoute
     }
+    '/settings/calendars': {
+      id: '/settings/calendars'
+      path: '/calendars'
+      fullPath: '/settings/calendars'
+      preLoaderRoute: typeof SettingsCalendarsRouteImport
+      parentRoute: typeof SettingsRoute
+    }
     '/settings/filters': {
       id: '/settings/filters'
       path: '/filters'
@@ -1177,6 +1196,7 @@ interface SettingsRouteChildren {
   SettingsAccountsRoute: typeof SettingsAccountsRoute
   SettingsAdvancedRoute: typeof SettingsAdvancedRoute
   SettingsAppearanceRoute: typeof SettingsAppearanceRoute
+  SettingsCalendarsRoute: typeof SettingsCalendarsRoute
   SettingsFiltersRoute: typeof SettingsFiltersRoute
   SettingsFoldersRoute: typeof SettingsFoldersRoute
   SettingsLabelsRoute: typeof SettingsLabelsRoute
@@ -1189,6 +1209,7 @@ const SettingsRouteChildren: SettingsRouteChildren = {
   SettingsAccountsRoute: SettingsAccountsRoute,
   SettingsAdvancedRoute: SettingsAdvancedRoute,
   SettingsAppearanceRoute: SettingsAppearanceRoute,
+  SettingsCalendarsRoute: SettingsCalendarsRoute,
   SettingsFiltersRoute: SettingsFiltersRoute,
   SettingsFoldersRoute: SettingsFoldersRoute,
   SettingsLabelsRoute: SettingsLabelsRoute,

package/src/routes/settings/calendars.tsx

@@ -0,0 +1,73 @@
+import { SettingsShell } from "@remit/ui";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
+import { CalendarFeedPanel } from "@/components/settings/CalendarFeedPanel";
+import { useCalendars } from "@/hooks/calendar/useCalendars";
+import { SETTINGS_ID_TO_PATH, SETTINGS_NAV_ITEMS } from "@/routes/settings";
+
+export const Route = createFileRoute("/settings/calendars")({
+	component: CalendarsSettings,
+});
+
+const calendarsHelp = (
+	<div className="space-y-3">
+		<p>
+			A subscription address lets Apple Calendar, Google Calendar, Outlook and
+			Thunderbird show a calendar from here, read-only and kept up to date.
+		</p>
+		<p>
+			Those clients never sign in, so the address itself is the credential.
+			Anyone who has it can read the calendar; nobody who has it can change
+			anything.
+		</p>
+		<p>
+			Only a hash of the address is stored, so it is shown once and cannot be
+			looked up later. Replacing it breaks every subscription built on the old
+			one, which is how a shared address is taken back.
+		</p>
+	</div>
+);
+
+function CalendarsSettings() {
+	const navigate = useNavigate();
+	const [helpOpen, setHelpOpen] = useState(true);
+	const { calendars, isLoading } = useCalendars();
+
+	return (
+		<SettingsShell
+			items={SETTINGS_NAV_ITEMS}
+			activeId="calendars"
+			title="Calendars"
+			description="Share a calendar with any client that can subscribe to a URL."
+			help={calendarsHelp}
+			helpOpen={helpOpen}
+			onToggleHelp={() => setHelpOpen((open) => !open)}
+			onSelect={(id) => {
+				const path = SETTINGS_ID_TO_PATH[id];
+				if (path) void navigate({ to: path });
+			}}
+			onBackToMail={() => void navigate({ to: "/mail" })}
+		>
+			{isLoading ? (
+				// biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label on a loading skeleton is what assistive tech has to go on
+				<div
+					className="h-24 animate-pulse rounded-sm border border-line bg-surface"
+					aria-busy="true"
+					aria-label="Loading calendars"
+				/>
+			) : calendars.length === 0 ? (
+				<p className="py-12 text-sm text-fg-muted">No calendars yet.</p>
+			) : (
+				<div className="space-y-4">
+					{calendars.map((calendar) => (
+						<CalendarFeedPanel
+							key={calendar.id}
+							calendarId={calendar.id}
+							calendarName={calendar.name}
+						/>
+					))}
+				</div>
+			)}
+		</SettingsShell>
+	);
+}

package/src/routes/settings.tsx

@@ -10,7 +10,15 @@
  */
 import type { SettingsNavItem } from "@remit/ui";
 import { createFileRoute, Outlet } from "@tanstack/react-router";
-import { Filter, FolderTree, Inbox, Palette, Tag, Users } from "lucide-react";
+import {
+	CalendarDays,
+	Filter,
+	FolderTree,
+	Inbox,
+	Palette,
+	Tag,
+	Users,
+} from "lucide-react";
 import { AdvancedNavIcon } from "@/components/settings/AdvancedNavIcon";
 
 /* ------------------------------------------------------------------ */
@@ -39,6 +47,11 @@ export const SETTINGS_NAV_ITEMS: SettingsNavItem[] = [
 		label: "Labels",
 		icon: <Tag className="size-4" />,
 	},
+	{
+		id: "calendars",
+		label: "Calendars",
+		icon: <CalendarDays className="size-4" />,
+	},
 	{
 		id: "appearance",
 		label: "Appearance",
@@ -53,6 +66,7 @@ export const SETTINGS_ID_TO_PATH: Record<string, string> = {
 	folders: "/settings/folders",
 	filters: "/settings/filters",
 	labels: "/settings/labels",
+	calendars: "/settings/calendars",
 	appearance: "/settings/appearance",
 	advanced: "/settings/advanced",
 };