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",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+export {
+ Card,
+ CardHeader,
+ CardFooter,
+ CardTitle,
+ CardAction,
+ CardDescription,
+ CardContent,
+}
diff --git a/lined-web/src/components/ui/dialog.tsx b/lined-web/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..3fc1dda
--- /dev/null
+++ b/lined-web/src/components/ui/dialog.tsx
@@ -0,0 +1,158 @@
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+ return
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+ return
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+ return
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+ return
+}
+
+function DialogOverlay({
+ className,
+ ...props
+}: DialogPrimitive.Backdrop.Props) {
+ return (
+
+ )
+}
+
+function DialogContent({
+ className,
+ children,
+ showCloseButton = true,
+ ...props
+}: DialogPrimitive.Popup.Props & {
+ showCloseButton?: boolean
+}) {
+ return (
+
+
+
+ {children}
+ {showCloseButton && (
+
+ }
+ >
+
+ Close
+
+ )}
+
+
+ )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function DialogFooter({
+ className,
+ showCloseButton = false,
+ children,
+ ...props
+}: React.ComponentProps<"div"> & {
+ showCloseButton?: boolean
+}) {
+ return (
+
+ {children}
+ {showCloseButton && (
+ }>
+ Close
+
+ )}
+
+ )
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+ return (
+
+ )
+}
+
+function DialogDescription({
+ className,
+ ...props
+}: DialogPrimitive.Description.Props) {
+ return (
+
+ )
+}
+
+export {
+ Dialog,
+ DialogClose,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogOverlay,
+ DialogPortal,
+ DialogTitle,
+ DialogTrigger,
+}
diff --git a/lined-web/src/components/ui/dropdown-menu.tsx b/lined-web/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..9d5ebbd
--- /dev/null
+++ b/lined-web/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,268 @@
+"use client"
+
+import * as React from "react"
+import { Menu as MenuPrimitive } from "@base-ui/react/menu"
+
+import { cn } from "@/lib/utils"
+import { ChevronRightIcon, CheckIcon } from "lucide-react"
+
+function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
+ return
+}
+
+function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
+ return
+}
+
+function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
+ return
+}
+
+function DropdownMenuContent({
+ align = "start",
+ alignOffset = 0,
+ side = "bottom",
+ sideOffset = 4,
+ className,
+ ...props
+}: MenuPrimitive.Popup.Props &
+ Pick<
+ MenuPrimitive.Positioner.Props,
+ "align" | "alignOffset" | "side" | "sideOffset"
+ >) {
+ return (
+
+
+
+
+
+ )
+}
+
+function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
+ return
+}
+
+function DropdownMenuLabel({
+ className,
+ inset,
+ ...props
+}: MenuPrimitive.GroupLabel.Props & {
+ inset?: boolean
+}) {
+ return (
+
+ )
+}
+
+function DropdownMenuItem({
+ className,
+ inset,
+ variant = "default",
+ ...props
+}: MenuPrimitive.Item.Props & {
+ inset?: boolean
+ variant?: "default" | "destructive"
+}) {
+ return (
+
+ )
+}
+
+function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
+ return
+}
+
+function DropdownMenuSubTrigger({
+ className,
+ inset,
+ children,
+ ...props
+}: MenuPrimitive.SubmenuTrigger.Props & {
+ inset?: boolean
+}) {
+ return (
+
+ {children}
+
+
+ )
+}
+
+function DropdownMenuSubContent({
+ align = "start",
+ alignOffset = -3,
+ side = "right",
+ sideOffset = 0,
+ className,
+ ...props
+}: React.ComponentProps
) {
+ return (
+
+ )
+}
+
+function DropdownMenuCheckboxItem({
+ className,
+ children,
+ checked,
+ inset,
+ ...props
+}: MenuPrimitive.CheckboxItem.Props & {
+ inset?: boolean
+}) {
+ return (
+
+
+
+
+
+
+ {children}
+
+ )
+}
+
+function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
+ return (
+
+ )
+}
+
+function DropdownMenuRadioItem({
+ className,
+ children,
+ inset,
+ ...props
+}: MenuPrimitive.RadioItem.Props & {
+ inset?: boolean
+}) {
+ return (
+
+
+
+
+
+
+ {children}
+
+ )
+}
+
+function DropdownMenuSeparator({
+ className,
+ ...props
+}: MenuPrimitive.Separator.Props) {
+ return (
+
+ )
+}
+
+function DropdownMenuShortcut({
+ className,
+ ...props
+}: React.ComponentProps<"span">) {
+ return (
+
+ )
+}
+
+export {
+ DropdownMenu,
+ DropdownMenuPortal,
+ DropdownMenuTrigger,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuLabel,
+ DropdownMenuItem,
+ DropdownMenuCheckboxItem,
+ DropdownMenuRadioGroup,
+ DropdownMenuRadioItem,
+ DropdownMenuSeparator,
+ DropdownMenuShortcut,
+ DropdownMenuSub,
+ DropdownMenuSubTrigger,
+ DropdownMenuSubContent,
+}
diff --git a/lined-web/src/components/ui/input.tsx b/lined-web/src/components/ui/input.tsx
new file mode 100644
index 0000000..7d21bab
--- /dev/null
+++ b/lined-web/src/components/ui/input.tsx
@@ -0,0 +1,20 @@
+import * as React from "react"
+import { Input as InputPrimitive } from "@base-ui/react/input"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+ return (
+
+ )
+}
+
+export { Input }
diff --git a/lined-web/src/components/ui/label.tsx b/lined-web/src/components/ui/label.tsx
new file mode 100644
index 0000000..f162996
--- /dev/null
+++ b/lined-web/src/components/ui/label.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Label({ className, ...props }: React.ComponentProps<"label">) {
+ return (
+
+ )
+}
+
+export { Label }
diff --git a/lined-web/src/components/ui/scroll-area.tsx b/lined-web/src/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..72000e5
--- /dev/null
+++ b/lined-web/src/components/ui/scroll-area.tsx
@@ -0,0 +1,54 @@
+"use client"
+
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+ className,
+ children,
+ ...props
+}: ScrollAreaPrimitive.Root.Props) {
+ return (
+
+
+ {children}
+
+
+
+
+ )
+}
+
+function ScrollBar({
+ className,
+ orientation = "vertical",
+ ...props
+}: ScrollAreaPrimitive.Scrollbar.Props) {
+ return (
+
+
+
+ )
+}
+
+export { ScrollArea, ScrollBar }
diff --git a/lined-web/src/components/ui/separator.tsx b/lined-web/src/components/ui/separator.tsx
new file mode 100644
index 0000000..4f65961
--- /dev/null
+++ b/lined-web/src/components/ui/separator.tsx
@@ -0,0 +1,23 @@
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+ className,
+ orientation = "horizontal",
+ ...props
+}: SeparatorPrimitive.Props) {
+ return (
+
+ )
+}
+
+export { Separator }
diff --git a/lined-web/src/components/ui/sheet.tsx b/lined-web/src/components/ui/sheet.tsx
new file mode 100644
index 0000000..78c0a76
--- /dev/null
+++ b/lined-web/src/components/ui/sheet.tsx
@@ -0,0 +1,138 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Sheet({ ...props }: SheetPrimitive.Root.Props) {
+ return
+}
+
+function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
+ return
+}
+
+function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
+ return
+}
+
+function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
+ return
+}
+
+function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
+ return (
+
+ )
+}
+
+function SheetContent({
+ className,
+ children,
+ side = "right",
+ showCloseButton = true,
+ ...props
+}: SheetPrimitive.Popup.Props & {
+ side?: "top" | "right" | "bottom" | "left"
+ showCloseButton?: boolean
+}) {
+ return (
+
+
+
+ {children}
+ {showCloseButton && (
+
+ }
+ >
+
+ Close
+
+ )}
+
+
+ )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
+ return (
+
+ )
+}
+
+function SheetDescription({
+ className,
+ ...props
+}: SheetPrimitive.Description.Props) {
+ return (
+
+ )
+}
+
+export {
+ Sheet,
+ SheetTrigger,
+ SheetClose,
+ SheetContent,
+ SheetHeader,
+ SheetFooter,
+ SheetTitle,
+ SheetDescription,
+}
diff --git a/lined-web/src/components/ui/tabs.tsx b/lined-web/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..2adaeb6
--- /dev/null
+++ b/lined-web/src/components/ui/tabs.tsx
@@ -0,0 +1,80 @@
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+ className,
+ orientation = "horizontal",
+ ...props
+}: TabsPrimitive.Root.Props) {
+ return (
+
+ )
+}
+
+const tabsListVariants = cva(
+ "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+ {
+ variants: {
+ variant: {
+ default: "bg-muted",
+ line: "gap-1 bg-transparent",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+function TabsList({
+ className,
+ variant = "default",
+ ...props
+}: TabsPrimitive.List.Props & VariantProps) {
+ return (
+
+ )
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+ return (
+
+ )
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+ return (
+
+ )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
diff --git a/lined-web/src/hooks/useEvents.ts b/lined-web/src/hooks/useEvents.ts
new file mode 100644
index 0000000..eeeff62
--- /dev/null
+++ b/lined-web/src/hooks/useEvents.ts
@@ -0,0 +1,34 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { listEvents, createEvent, deleteEvent } from '@/api/events';
+import { QUERY_KEYS } from '@/lib/constants';
+import { addDays } from '@/lib/calendarUtils';
+
+export function useWeekEvents(weekStart: Date) {
+ const from = weekStart.toISOString();
+ const to = addDays(weekStart, 7).toISOString();
+
+ return useQuery({
+ queryKey: [...QUERY_KEYS.events, from],
+ queryFn: () => listEvents({ from, to }),
+ });
+}
+
+export function useCreateEvent() {
+ const queryClient = useQueryClient();
+ return useMutation({
+ mutationFn: createEvent,
+ onSuccess: () => {
+ void queryClient.invalidateQueries({ queryKey: QUERY_KEYS.events });
+ },
+ });
+}
+
+export function useDeleteEvent() {
+ const queryClient = useQueryClient();
+ return useMutation({
+ mutationFn: (id: number) => deleteEvent(id),
+ onSuccess: () => {
+ void queryClient.invalidateQueries({ queryKey: QUERY_KEYS.events });
+ },
+ });
+}
diff --git a/lined-web/src/hooks/useLobbies.ts b/lined-web/src/hooks/useLobbies.ts
new file mode 100644
index 0000000..449c77f
--- /dev/null
+++ b/lined-web/src/hooks/useLobbies.ts
@@ -0,0 +1,18 @@
+import { useQuery } from '@tanstack/react-query';
+import { getMyLobbies, getLobby } from '@/api/lobbies';
+import { QUERY_KEYS } from '@/lib/constants';
+
+export function useMyLobbies() {
+ return useQuery({
+ queryKey: QUERY_KEYS.lobbies,
+ queryFn: getMyLobbies,
+ });
+}
+
+export function useLobby(id: number | undefined) {
+ return useQuery({
+ queryKey: QUERY_KEYS.lobbyDetail(id ?? 0),
+ queryFn: () => getLobby(id!),
+ enabled: id != null,
+ });
+}
diff --git a/lined-web/src/index.css b/lined-web/src/index.css
new file mode 100644
index 0000000..dc99142
--- /dev/null
+++ b/lined-web/src/index.css
@@ -0,0 +1,176 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+ --font-sans: 'Inter', system-ui, sans-serif;
+
+ /* Brand */
+ --color-brand-green: #5B9B6B;
+ --color-brand-green-light: #E8F5EE;
+ --color-brand-green-dark: #3D7050;
+ --color-brand-sidebar: #1B2A1F;
+ --color-brand-sidebar-hover: #283D2B;
+ --color-brand-beige: #F7F3ED;
+ --color-brand-beige-dark: #EDE7DC;
+
+ /* Lobby types */
+ --color-lobby-couple: #F4479B;
+ --color-lobby-family: #FB8A2F;
+ --color-lobby-friends: #A78BFA;
+ --color-lobby-work: #3FA6FA;
+
+ /* Task status */
+ --color-task-todo: #94A3B8;
+ --color-task-inprog: #3B82F6;
+ --color-task-done: #10B981;
+
+ /* Text */
+ --color-text-primary: #1A1A2E;
+ --color-text-secondary: #6B7280;
+ --color-text-muted: #9CA3AF;
+ --color-text-light: #C8D4C9;
+
+ /* UI */
+ --color-border: #E5E7EB;
+ --color-input-bg: #F9F9FB;
+ --color-bg: #F4F4F7;
+
+ /* Shadows */
+ --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
+ --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
+ --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
+}
+
+body {
+ margin: 0;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+@theme inline {
+ --font-heading: var(--font-sans);
+ --font-sans: 'Inter', system-ui, sans-serif;
+ --color-sidebar-ring: var(--sidebar-ring);
+ --color-sidebar-border: var(--sidebar-border);
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+ --color-sidebar-accent: var(--sidebar-accent);
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+ --color-sidebar-primary: var(--sidebar-primary);
+ --color-sidebar-foreground: var(--sidebar-foreground);
+ --color-sidebar: var(--sidebar);
+ --color-chart-5: var(--chart-5);
+ --color-chart-4: var(--chart-4);
+ --color-chart-3: var(--chart-3);
+ --color-chart-2: var(--chart-2);
+ --color-chart-1: var(--chart-1);
+ --color-ring: var(--ring);
+ --color-input: var(--input);
+ --color-border: var(--border);
+ --color-destructive: var(--destructive);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-accent: var(--accent);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-muted: var(--muted);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-secondary: var(--secondary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-primary: var(--primary);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-popover: var(--popover);
+ --color-card-foreground: var(--card-foreground);
+ --color-card: var(--card);
+ --color-foreground: var(--foreground);
+ --color-background: var(--background);
+ --radius-sm: calc(var(--radius) * 0.6);
+ --radius-md: calc(var(--radius) * 0.8);
+ --radius-lg: var(--radius);
+ --radius-xl: calc(var(--radius) * 1.4);
+ --radius-2xl: calc(var(--radius) * 1.8);
+ --radius-3xl: calc(var(--radius) * 2.2);
+ --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+ --background: oklch(1 0 0);
+ --foreground: oklch(0.145 0 0);
+ --card: oklch(1 0 0);
+ --card-foreground: oklch(0.145 0 0);
+ --popover: oklch(1 0 0);
+ --popover-foreground: oklch(0.145 0 0);
+ --primary: oklch(0.205 0 0);
+ --primary-foreground: oklch(0.985 0 0);
+ --secondary: oklch(0.97 0 0);
+ --secondary-foreground: oklch(0.205 0 0);
+ --muted: oklch(0.97 0 0);
+ --muted-foreground: oklch(0.556 0 0);
+ --accent: oklch(0.97 0 0);
+ --accent-foreground: oklch(0.205 0 0);
+ --destructive: oklch(0.577 0.245 27.325);
+ --border: oklch(0.922 0 0);
+ --input: oklch(0.922 0 0);
+ --ring: oklch(0.708 0 0);
+ --chart-1: oklch(0.87 0 0);
+ --chart-2: oklch(0.556 0 0);
+ --chart-3: oklch(0.439 0 0);
+ --chart-4: oklch(0.371 0 0);
+ --chart-5: oklch(0.269 0 0);
+ --radius: 0.625rem;
+ --sidebar: oklch(0.985 0 0);
+ --sidebar-foreground: oklch(0.145 0 0);
+ --sidebar-primary: oklch(0.205 0 0);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.97 0 0);
+ --sidebar-accent-foreground: oklch(0.205 0 0);
+ --sidebar-border: oklch(0.922 0 0);
+ --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+ --background: oklch(0.145 0 0);
+ --foreground: oklch(0.985 0 0);
+ --card: oklch(0.205 0 0);
+ --card-foreground: oklch(0.985 0 0);
+ --popover: oklch(0.205 0 0);
+ --popover-foreground: oklch(0.985 0 0);
+ --primary: oklch(0.922 0 0);
+ --primary-foreground: oklch(0.205 0 0);
+ --secondary: oklch(0.269 0 0);
+ --secondary-foreground: oklch(0.985 0 0);
+ --muted: oklch(0.269 0 0);
+ --muted-foreground: oklch(0.708 0 0);
+ --accent: oklch(0.269 0 0);
+ --accent-foreground: oklch(0.985 0 0);
+ --destructive: oklch(0.704 0.191 22.216);
+ --border: oklch(1 0 0 / 10%);
+ --input: oklch(1 0 0 / 15%);
+ --ring: oklch(0.556 0 0);
+ --chart-1: oklch(0.87 0 0);
+ --chart-2: oklch(0.556 0 0);
+ --chart-3: oklch(0.439 0 0);
+ --chart-4: oklch(0.371 0 0);
+ --chart-5: oklch(0.269 0 0);
+ --sidebar: oklch(0.205 0 0);
+ --sidebar-foreground: oklch(0.985 0 0);
+ --sidebar-primary: oklch(0.488 0.243 264.376);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.269 0 0);
+ --sidebar-accent-foreground: oklch(0.985 0 0);
+ --sidebar-border: oklch(1 0 0 / 10%);
+ --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+ * {
+ @apply border-border outline-ring/50;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+ html {
+ @apply font-sans;
+ }
+}
\ No newline at end of file
diff --git a/lined-web/src/lib/calendarUtils.ts b/lined-web/src/lib/calendarUtils.ts
new file mode 100644
index 0000000..b7cd696
--- /dev/null
+++ b/lined-web/src/lib/calendarUtils.ts
@@ -0,0 +1,143 @@
+import type { EventDto } from '@/types';
+
+export const GRID_START_HOUR = 8; // 8 AM
+export const GRID_END_HOUR = 22; // 10 PM
+export const HOUR_HEIGHT = 80; // px per hour
+
+export const GRID_HOURS = Array.from(
+ { length: GRID_END_HOUR - GRID_START_HOUR },
+ (_, i) => i + GRID_START_HOUR,
+); // [8, 9, 10, ..., 21]
+
+/** Returns the Monday of the week containing `date`. */
+export function getWeekStart(date: Date = new Date()): Date {
+ const d = new Date(date);
+ d.setHours(0, 0, 0, 0);
+ const day = d.getDay(); // 0=Sun, 1=Mon, ā¦
+ const diff = day === 0 ? -6 : 1 - day;
+ d.setDate(d.getDate() + diff);
+ return d;
+}
+
+export function addDays(date: Date, days: number): Date {
+ const d = new Date(date);
+ d.setDate(d.getDate() + days);
+ return d;
+}
+
+export function isSameDay(a: Date, b: Date): boolean {
+ return (
+ a.getFullYear() === b.getFullYear() &&
+ a.getMonth() === b.getMonth() &&
+ a.getDate() === b.getDate()
+ );
+}
+
+export function isToday(date: Date): boolean {
+ return isSameDay(date, new Date());
+}
+
+/** "April 2026" */
+export function formatMonthYear(date: Date): string {
+ return date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+}
+
+/** "Mon 13" */
+export function formatDayLabel(date: Date): string {
+ const weekday = date.toLocaleDateString('en-US', { weekday: 'short' });
+ return `${weekday} ${date.getDate()}`;
+}
+
+/** "9 AM", "12 PM", "2 PM" */
+export function formatHour(hour: number): string {
+ if (hour === 12) return '12 PM';
+ if (hour > 12) return `${hour - 12} PM`;
+ return `${hour} AM`;
+}
+
+/** "Mon 13 Apr Ā· 9:00 ā 10:00 AM" */
+export function formatEventTime(startAt: string, endAt: string): string {
+ const start = new Date(startAt);
+ const end = new Date(endAt);
+
+ const dateStr = start.toLocaleDateString('en-US', {
+ weekday: 'short',
+ day: 'numeric',
+ month: 'short',
+ });
+
+ const formatTime = (d: Date): string => {
+ const h = d.getHours();
+ const m = d.getMinutes();
+ const ampm = h >= 12 ? 'PM' : 'AM';
+ const hour = h % 12 || 12;
+ return m === 0
+ ? `${hour} ${ampm}`
+ : `${hour}:${m.toString().padStart(2, '0')} ${ampm}`;
+ };
+
+ return `${dateStr} Ā· ${formatTime(start)} ā ${formatTime(end)}`;
+}
+
+/** Pixel offset from the top of the time grid. */
+export function getEventTop(startAt: string): number {
+ const d = new Date(startAt);
+ const hours = d.getHours() + d.getMinutes() / 60;
+ return (hours - GRID_START_HOUR) * HOUR_HEIGHT;
+}
+
+/** Pixel height of the event block. */
+export function getEventHeight(startAt: string, endAt: string): number {
+ const start = new Date(startAt);
+ const end = new Date(endAt);
+ const durationHours = (end.getTime() - start.getTime()) / (1000 * 60 * 60);
+ return durationHours * HOUR_HEIGHT;
+}
+
+export interface FreeSlot {
+ startHour: number;
+ endHour: number;
+}
+
+/** Compute gaps between events within the visible grid range (ā„ 30 min). */
+export function computeFreeSlots(events: EventDto[]): FreeSlot[] {
+ if (events.length === 0) return [];
+
+ const MIN_SLOT_HOURS = 0.5;
+
+ const ranges = events
+ .map((e) => ({
+ start:
+ new Date(e.startAt).getHours() + new Date(e.startAt).getMinutes() / 60,
+ end:
+ new Date(e.endAt).getHours() + new Date(e.endAt).getMinutes() / 60,
+ }))
+ .sort((a, b) => a.start - b.start);
+
+ const freeSlots: FreeSlot[] = [];
+ let cursor = GRID_START_HOUR;
+
+ for (const range of ranges) {
+ if (range.start > cursor + MIN_SLOT_HOURS) {
+ freeSlots.push({ startHour: cursor, endHour: range.start });
+ }
+ cursor = Math.max(cursor, range.end);
+ }
+
+ if (cursor < GRID_END_HOUR - MIN_SLOT_HOURS) {
+ freeSlots.push({ startHour: cursor, endHour: GRID_END_HOUR });
+ }
+
+ return freeSlots;
+}
+
+/** Format a Date as "YYYY-MM-DDTHH:mm" for datetime-local inputs. */
+export function toDatetimeLocal(date: Date): string {
+ const pad = (n: number) => n.toString().padStart(2, '0');
+ return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+
+/** Parse a "YYYY-MM-DDTHH:mm" string into a local Date. */
+export function fromDatetimeLocal(value: string): Date {
+ return new Date(value);
+}
diff --git a/lined-web/src/lib/constants.ts b/lined-web/src/lib/constants.ts
new file mode 100644
index 0000000..79612f7
--- /dev/null
+++ b/lined-web/src/lib/constants.ts
@@ -0,0 +1,36 @@
+import type { LobbyType, TaskStatus } from '@/types';
+
+export const LOBBY_TYPE_LABELS: Record = {
+ COUPLE: 'Couple',
+ FAMILY: 'Family',
+ FRIENDS: 'Friends',
+ WORK: 'Work',
+};
+
+export const LOBBY_TYPE_COLORS: Record = {
+ COUPLE: 'bg-lobby-couple',
+ FAMILY: 'bg-lobby-family',
+ FRIENDS: 'bg-lobby-friends',
+ WORK: 'bg-lobby-work',
+};
+
+export const TASK_STATUS_LABELS: Record = {
+ TODO: 'To Do',
+ IN_PROGRESS: 'In Progress',
+ DONE: 'Done',
+};
+
+export const TASK_STATUS_COLORS: Record = {
+ TODO: 'bg-task-todo',
+ IN_PROGRESS: 'bg-task-inprog',
+ DONE: 'bg-task-done',
+};
+
+export const QUERY_KEYS = {
+ users: ['users'] as const,
+ user: (id: number) => ['users', id] as const,
+ lobbies: ['lobbies'] as const,
+ lobbyDetail: (id: number) => ['lobbies', id] as const,
+ tasks: ['tasks'] as const,
+ events: ['events'] as const,
+} as const;
diff --git a/lined-web/src/lib/utils.ts b/lined-web/src/lib/utils.ts
new file mode 100644
index 0000000..bd0c391
--- /dev/null
+++ b/lined-web/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/lined-web/src/main.tsx b/lined-web/src/main.tsx
new file mode 100644
index 0000000..97fcafd
--- /dev/null
+++ b/lined-web/src/main.tsx
@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './index.css';
+import { App } from './App';
+
+async function enableMocking() {
+ if (import.meta.env.VITE_ENABLE_MSW !== 'true') {
+ return;
+ }
+ const { worker } = await import('./test/browser');
+ return worker.start({ onUnhandledRequest: 'bypass' });
+}
+
+enableMocking().then(() => {
+ createRoot(document.getElementById('root')!).render(
+
+
+ ,
+ );
+});
diff --git a/lined-web/src/pages/CalendarPage.tsx b/lined-web/src/pages/CalendarPage.tsx
new file mode 100644
index 0000000..49b6ca6
--- /dev/null
+++ b/lined-web/src/pages/CalendarPage.tsx
@@ -0,0 +1,91 @@
+import { CalendarTopBar } from '@/components/CalendarTopBar';
+import { CreateEventModal } from '@/components/CreateEventModal';
+import { EventDetailPanel } from '@/components/EventDetailPanel';
+import { WeekGrid } from '@/components/WeekGrid';
+import { useWeekEvents, useDeleteEvent } from '@/hooks/useEvents';
+import { useMyLobbies } from '@/hooks/useLobbies';
+import { useCalendarStore } from '@/store/calendar';
+
+export function CalendarPage() {
+ const {
+ weekStart,
+ viewMode,
+ selectedEventId,
+ isCreateModalOpen,
+ goToPrevWeek,
+ goToNextWeek,
+ goToToday,
+ setViewMode,
+ setSelectedEventId,
+ openCreateModal,
+ closeCreateModal,
+ } = useCalendarStore();
+
+ const { data: events = [] } = useWeekEvents(weekStart);
+ const { data: lobbies = [] } = useMyLobbies();
+ const deleteEvent = useDeleteEvent();
+
+ const lobbyMap = new Map(lobbies.map((l) => [l.id, l]));
+ const selectedEvent =
+ selectedEventId != null
+ ? (events.find((e) => e.id === selectedEventId) ?? null)
+ : null;
+ const selectedLobby = selectedEvent
+ ? (lobbyMap.get(selectedEvent.lobbyId) ?? null)
+ : null;
+
+ function handleDelete() {
+ if (selectedEventId == null) return;
+ deleteEvent.mutate(selectedEventId, {
+ onSuccess: () => setSelectedEventId(null),
+ });
+ }
+
+ return (
+ // h-full fills the flex-1 main area; overflow-hidden so the grid controls its own scroll
+
+
+
+
+
+
+ {selectedEvent && selectedLobby && (
+ setSelectedEventId(null)}
+ onEdit={() => {
+ /* TODO: open edit modal */
+ }}
+ onDelete={handleDelete}
+ />
+ )}
+
+
+ {isCreateModalOpen && (
+
{
+ closeCreateModal();
+ setSelectedEventId(event.id);
+ }}
+ />
+ )}
+
+
+ Welcome back, Alex
+
+
+ Your dashboard with lobbies, events, and tasks will appear here.
+
+
+
+ Lobby #{id}
+
+
+ Active tab: {tab}
+
+
+ Lobby detail view with Tasks / Calendar / Members tabs coming soon...
+
+
+
+ Lobby Settings
+
+
+ Settings for lobby #{id} coming soon...
+
+
+
+
+
Lined
+
+ Where life and quality time meet.
+
+
+
+ Sign in form coming soon...
+
+
+ Don't have an account?{' '}
+
+ Sign up
+
+
+
+
+
+
+
Lined
+
+ Create your account
+
+
+
+ Sign up form coming soon...
+
+
+ Already have an account?{' '}
+
+ Sign in
+
+
+
+
+
Tasks
+
+ Kanban board with To Do / In Progress / Done columns coming soon...
+
+
+
Settings
+
+ Profile, security, notifications, and appearance settings coming
+ soon...
+
+