- {children}
-
- );
-}
-
-/* ═══════════════════════════════════════════════════════════
- HEADER
- ═══════════════════════════════════════════════════════════ */
-
-function Header() {
- const [scrolled, setScrolled] = useState(false);
-
- useEffect(() => {
- const fn = () => setScrolled(window.scrollY > 20);
- window.addEventListener('scroll', fn, { passive: true });
- fn();
- return () => window.removeEventListener('scroll', fn);
- }, []);
-
- return (
-
-
-
-
-
- Sign in
-
-
- Get started
-
-
-
-
-
-
-
-
-
-
-
-
- Shared spaces,
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- For shared spaces and recurring groups
-
-
- Shared spaces,
-
- run with clarity
-
- - Commune combines communal finance, responsibilities, group - context, and clear priorities so homes, studios, workspaces, - projects, and trips can run from one hub. -
-
-
-
- {['PM', 'AK', 'JL', 'SR'].map((initials) => (
-
- {initials}
- ))}
- - 2,400+ groups managing shared spaces together -
-
-
-
-
-
-
-
-
-
-
-
- Everything you need to
-
-
-
- Features
-
- Everything you need to
run a shared space
-
- - Built for the way recurring groups actually operate. No spreadsheets, - no scattered admin, no guesswork about what is owed or what is due. -
-
- {features.map((f, i) => (
-
-
- ))}
-
-
-
- {f.icon}
- {f.title}
-{f.desc}
-
-
-
-
-
- How it works
-Three steps to clarity
-- From first download to settled balances in under two minutes. -
-
- {steps.map((s, i) => (
-
-
- ))}
-
-
-
- {s.number}
- {s.title}
-{s.desc}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Built for shared spaces
-- Designed for homes, studios, workspaces, and recurring groups -
-- Bills, responsibilities, member context, notices, and priorities - all live in one place. No more screenshots of transfers, - spreadsheets nobody updates, or key details buried in chat. -
-
-
-
-
- ∞
-Groups per account
-
-
- 2m
-Average setup time
-
-
- £4.2M
-Expenses tracked
-
-
- 4.9
-Average rating
-
-
-
-
-
-
- - “Commune gave our collective one place for money, roles, and the - small operational stuff that usually gets lost in chat. It made the - whole group calmer.” --
-
- PM
-
-
- Priya M.
-- Creative collective, London -
-
-
-
-
-
-
-
- Pricing
-Simple, transparent pricing
-- Start with a 3-day free trial for your first shared space. -
-
- {plans.map((p, i) => (
-
-
- ))}
-
-
- {p.featured && Most popular}
-
- {p.name}
-{p.price}
-{p.period}
- --
- {p.features.map((f) => (
-
- {f} - ))} -
Ready to run your shared space more clearly?
-- Join thousands of groups who replaced scattered admin with one place - for money, responsibilities, and what needs attention. -
- - Get started free - - -
- {item.label}
-
- {formatCurrency(item.amount, currency)}
-
-
- ))}
-
-
-
- Trial status unavailable
-
-
- {error instanceof Error ? error.message : 'Try again in a moment.'}
-
- void refetch()}
- style={{
- color: 'var(--commune-primary-soft, #62c38a)',
- background: 'transparent',
- border: 0,
- padding: 0,
- cursor: 'pointer',
- }}
- >
- Retry
-
-
-
- );
- }
-
- if (!showBanner) return null;
-
- return (
-
-
-
- {daysLeft}d left on trial
-
-
- Choose a plan to keep access.
-
-
- View plans →
-
-
-
- );
-}
diff --git a/.migration-backup/apps/web/src/components/app-shell.tsx b/.migration-backup/apps/web/src/components/app-shell.tsx
deleted file mode 100644
index 8093e7cc..00000000
--- a/.migration-backup/apps/web/src/components/app-shell.tsx
+++ /dev/null
@@ -1,672 +0,0 @@
-import {
- AppShell as MantineAppShell,
- ActionIcon,
- Box,
- Burger,
- Group,
- Menu,
- Text,
- NavLink,
- Avatar,
- Stack,
- TextInput,
- Tooltip,
- UnstyledButton,
- useComputedColorScheme,
- useMantineColorScheme,
-} from '@mantine/core';
-import { useDisclosure, useMediaQuery } from '@mantine/hooks';
-import { Link, useLocation, useNavigate } from '@tanstack/react-router';
-import {
- IconChevronDown,
- IconChevronsLeft,
- IconChevronsRight,
- IconCreditCard,
- IconMoon,
- IconSun,
- IconDotsVertical,
- IconLifebuoy,
- IconLogout,
- IconSearch,
- IconSettings,
- IconUser,
-} from '@tabler/icons-react';
-import { Suspense, lazy, useCallback, useEffect, useState, type KeyboardEvent } from 'react';
-import { useAuthStore } from '../stores/auth';
-import { useGroupStore } from '../stores/group';
-import { useSearchStore } from '../stores/search';
-import { signOut } from '@commune/api';
-import { pinnedLinks, navGroups, type NavGroup } from './nav-links';
-import { useGroupBootstrap } from '../hooks/use-group-bootstrap';
-
-const SIDEBAR_STORAGE_KEY = 'commune-sidebar-collapsed';
-const SIDEBAR_WIDTH_EXPANDED = 230;
-const SIDEBAR_WIDTH_COLLAPSED = 72;
-const SIDEBAR_PAD = 8; // fixed — never changes, so nothing jumps
-
-const sidebarTransitionCss = 'all 250ms cubic-bezier(0.4, 0, 0.2, 1)';
-const fadeTransitionCss = 'opacity 150ms ease-out';
-
-const DeferredNotificationDropdown = lazy(() =>
- import('./notification-dropdown').then((module) => ({
- default: module.NotificationDropdown,
- })),
-);
-
-const DeferredGroupSelector = lazy(() =>
- import('./group-selector').then((module) => ({
- default: module.GroupSelector,
- })),
-);
-
-const DeferredTrialExpiryModal = lazy(() =>
- import('./trial-expiry-modal').then((module) => ({
- default: module.TrialExpiryModal,
- })),
-);
-
-const DeferredSidebarPlanLabel = lazy(() =>
- import('./app-shell-subscription').then((module) => ({
- default: module.SidebarPlanLabel,
- })),
-);
-
-const DeferredSidebarTrialBanner = lazy(() =>
- import('./app-shell-subscription').then((module) => ({
- default: module.SidebarTrialBanner,
- })),
-);
-
-interface AppShellProps {
- children: React.ReactNode;
-}
-
-export function AppShell({ children }: AppShellProps) {
- const [opened, { toggle, close }] = useDisclosure();
- const isMobile = useMediaQuery('(max-width: 47.99em)') ?? false; // matches Mantine 'sm' breakpoint
- const [showDeferredWidgets, setShowDeferredWidgets] = useState(false);
- const [desktopCollapsed, setDesktopCollapsed] = useState(() => {
- try {
- return localStorage.getItem(SIDEBAR_STORAGE_KEY) === 'true';
- } catch {
- return false;
- }
- });
- // On mobile the sidebar is always full-width (expanded), never icon-only
- const collapsed = isMobile ? false : desktopCollapsed;
- const { user } = useAuthStore();
- const { setActiveGroupId } = useGroupStore();
- const { query, setQuery, clearQuery } = useSearchStore();
- const navigate = useNavigate();
- const location = useLocation();
- useGroupBootstrap();
-
- useEffect(() => {
- if (typeof window === 'undefined') {
- return;
- }
-
- const idleWindow = window as Window & {
- requestIdleCallback?: (callback: () => void, options?: { timeout: number }) => number;
- cancelIdleCallback?: (handle: number) => void;
- };
-
- if (idleWindow.requestIdleCallback) {
- const idleHandle = idleWindow.requestIdleCallback(() => {
- setShowDeferredWidgets(true);
- }, { timeout: 400 });
-
- return () => {
- idleWindow.cancelIdleCallback?.(idleHandle);
- };
- }
-
- const timeoutHandle = window.setTimeout(() => {
- setShowDeferredWidgets(true);
- }, 0);
-
- return () => {
- window.clearTimeout(timeoutHandle);
- };
- }, []);
-
- const toggleCollapsed = useCallback(() => {
- setDesktopCollapsed((prev) => {
- const next = !prev;
- try {
- localStorage.setItem(SIDEBAR_STORAGE_KEY, String(next));
- } catch { /* ignore */ }
- return next;
- });
- }, []);
-
- async function handleSignOut() {
- setActiveGroupId(null);
- clearQuery();
- await signOut();
- navigate({ to: '/login' });
- }
-
- function handleSearchKeyDown(event: KeyboardEvent
- {/* ── Top ── */}
-
- {/* Trial banner — only shown during active trial */}
- {showDeferredWidgets && user?.id ? (
-
-
- ) : null}
-
- {/* Expand button (collapsed only) */}
- {collapsed && (
-
-
-
- {/* Logo row — padding-left centers the 44px logo when collapsed */}
-
- {/* Pinned links (always visible, no group header) */}
- {pinnedLinks.map((link) => (
-
-
- ))}
-
- {/* Collapsible groups */}
- {collapsed
- ? /* When sidebar is collapsed, show group icons as dividers + flat link icons */
- navGroups.map((group) => (
-
-
- {/* Workspace selector */}
-
-
- {/* ── Bottom ── */}
-
- 
-
-
- Commune
-
-
-
- {/* Collapse button — desktop only, top right, hover-only, expanded only */}
- {!isMobile && !collapsed && (
-
-
- {/* Menu label */}
-
-
-
-
-
-
- )}
-
-
- Menu
-
-
-
- {/* Nav links — grouped with collapsible sections */}
-
- {/* Group divider icon — centered, subtle */}
-
-
- {group.links.map((link) => (
-
-
- ))}
-
- ))
- : /* When sidebar is expanded, show collapsible groups */
- navGroups.map((group) => (
-
- {group.icon}
-
-
-
- {showDeferredWidgets ? (
- Loading groups…}>
-
- ) : (
- Loading groups…
- )}
-
-
-
-
-
-
-
-
- )}
-
- {/* Profile + menu */}
-
-
-
-
-
- );
-}
diff --git a/.migration-backup/apps/web/src/components/billing-charts.tsx b/.migration-backup/apps/web/src/components/billing-charts.tsx
deleted file mode 100644
index 6af4129d..00000000
--- a/.migration-backup/apps/web/src/components/billing-charts.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { formatCurrency } from '@commune/utils';
-import {
- Bar,
- BarChart,
- CartesianGrid,
- ResponsiveContainer,
- Tooltip,
- XAxis,
- YAxis,
-} from 'recharts';
-
-interface BillingTrendPoint {
- label: string;
- amount: number;
-}
-
-export function BillingTrendChart({
- currency,
- data,
- tickFill,
- gridStroke,
-}: {
- currency?: string;
- data: BillingTrendPoint[];
- tickFill: string;
- gridStroke: string;
-}) {
- return (
-
- {group.icon}
-
- {group.label}
-
-
-
-
-
-
- {group.links.map((link) => (
-
-
-
- Current month total
- {formatCurrency(currentTotal, currency)}
-
-
- Average per month
-
- {formatCurrency(
- items.reduce((sum, item) => sum + item.total, 0) / items.length,
- currency,
- )}
-
-
-
- {formatCategoryLabel(item.category)}
-
- {formatCurrency(item.amount, currency)}
-
-
-