tr]:last:border-b-0",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+ return (
+ [role=checkbox]]:translate-y-[2px]",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+ return (
+ [role=checkbox]]:translate-y-[2px]",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function TableCaption({
+ className,
+ ...props
+}: React.ComponentProps<"caption">) {
+ return (
+ ) {
+ return (
+ &
+ VariantProps) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+
+
Dashboard
+
+ A live snapshot of the LOVE.NET community.
+
+
+ {query.isError && (
+
+ {errorMessages(query.error).map((line) => (
+
{line}
+ ))}
+
+ )}
+
+
+ {query.isPending &&
+ stats.map((stat) => (
+
+
+
+
+
+
+ ))}
+
+ {query.data &&
+ stats.map((stat) =>
)}
+
+
+
+
+
+
+
{stat.label}
+
{value.toLocaleString()}
+
+
+ );
+
+ if (!stat.to) return card;
+
+ return (
+ !open && onClose()}>
+
+
+ {isBan ? "Ban user" : "Unban user"}
+
+ {isBan
+ ? `${user?.userName ?? "This user"} will be banned until the selected date.`
+ : `${user?.userName ?? "This user"} will regain access immediately.`}
+
+
+
+ {isBan && (
+
+ Banned until
+
+ )}
+
+ {mutation.isError && (
+
+ {errorMessages(mutation.error).map((line) => (
+
{line}
+ ))}
+
+
+ Cancel
+
+
+ {mutation.isPending ? "Saving…" : isBan ? "Ban" : "Unban"}
+
+
+
+
+ );
+}
diff --git a/web/src/features/admin/users-page.tsx b/web/src/features/admin/users-page.tsx
new file mode 100644
index 0000000..ec162ee
--- /dev/null
+++ b/web/src/features/admin/users-page.tsx
@@ -0,0 +1,234 @@
+import {
+ useInfiniteQuery,
+ useQueryClient,
+ type InfiniteData,
+} from "@tanstack/react-query";
+import { Search } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useSearchParams } from "react-router";
+import { getUsers } from "@/api/admin";
+import type { AccountDetails, AdminUsersResponse } from "@/api/types";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/ui/table";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { ageFrom } from "@/lib/dates";
+import { errorMessages } from "@/lib/errors";
+import ModerateDialog from "./moderate-dialog";
+
+export default function UsersPage() {
+ const [searchParams, setSearchParams] = useSearchParams();
+ const [showBanned, setShowBanned] = useState(searchParams.get("banned") === "1");
+ const [searchInput, setSearchInput] = useState("");
+ const [search, setSearch] = useState("");
+ const [moderateTarget, setModerateTarget] = useState(null);
+ const queryClient = useQueryClient();
+
+ // Debounce the free-text search into the query key.
+ useEffect(() => {
+ const handle = setTimeout(() => setSearch(searchInput.trim()), 300);
+ return () => clearTimeout(handle);
+ }, [searchInput]);
+
+ const query = useInfiniteQuery({
+ queryKey: ["admin", "users", search, showBanned],
+ queryFn: ({ pageParam }) =>
+ getUsers({ page: pageParam, search: search || undefined, showBanned }),
+ initialPageParam: 1,
+ getNextPageParam: (lastPage, allPages) => {
+ const loaded = allPages.reduce((count, page) => count + page.users.length, 0);
+ return loaded < lastPage.totalUsers ? allPages.length + 1 : undefined;
+ },
+ });
+
+ const users = query.data?.pages.flatMap((page) => page.users) ?? [];
+
+ function onTabChange(value: string) {
+ const banned = value === "banned";
+ setShowBanned(banned);
+ setSearchParams(banned ? { banned: "1" } : {}, { replace: true });
+ }
+
+ function onModerated(userId: string, isBanned: boolean) {
+ // Patch the row in every cached filter combination.
+ queryClient.setQueriesData>(
+ { queryKey: ["admin", "users"] },
+ (old) =>
+ old && {
+ ...old,
+ pages: old.pages.map((page) => ({
+ ...page,
+ users: page.users.map((u) => (u.id === userId ? { ...u, isBanned } : u)),
+ })),
+ },
+ );
+ }
+
+ return (
+
+
+
+
Users
+
+ Search, review, and moderate the community.
+
+
+
+
+
+
+
+ All
+ Banned
+
+
+
+
+
+ {query.isError && (
+
+ {errorMessages(query.error).map((line) => (
+
{line}
+ ))}
+
+ )}
+
+
+
+
+
+ User
+ Email
+ Location
+ Age
+ Status
+
+
+
+ {query.isPending &&
+
+ No users found.
+
+
+ )}
+
+ {users.map((user) => (
+ setModerateTarget(user)} />
+ ))}
+
+
+
+
+ {query.hasNextPage && (
+
+ void query.fetchNextPage()}
+ disabled={query.isFetchingNextPage}
+ >
+ {query.isFetchingNextPage ? "Loading…" : "Load more"}
+
+
+ )}
+
+
setModerateTarget(null)}
+ onModerated={onModerated}
+ />
+
+
+
+
+ {user.userName[0]?.toUpperCase()}
+
+
{user.userName}
+
+ {user.email}
+ {location}
+ {ageFrom(user.birthdate)}
+
+ {user.isBanned ? (
+ Banned
+ ) : (
+ Active
+ )}
+
+
+
+ {user.isBanned ? "Unban" : "Ban"}
+
+
+
+ );
+}
+
+function SkeletonRows() {
+ return (
+ <>
+ {Array.from({ length: 5 }, (_, index) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ))}
+
+ );
+}
diff --git a/web/src/features/auth/auth-card.tsx b/web/src/features/auth/auth-card.tsx
new file mode 100644
index 0000000..a159d9a
--- /dev/null
+++ b/web/src/features/auth/auth-card.tsx
@@ -0,0 +1,35 @@
+import { Heart } from "lucide-react";
+import type { ReactNode } from "react";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface AuthCardProps {
+ title: string;
+ subtitle: string;
+ /** Width override, e.g. "max-w-md" for the wider register wizard. */
+ widthClass?: string;
+ children: ReactNode;
+}
+
+/** Centered auth page shell matching the login page's look. */
+export default function AuthCard({
+ title,
+ subtitle,
+ widthClass = "max-w-sm",
+ children,
+}: AuthCardProps) {
+ return (
+
+
+
+
+
+ {title}
+ {subtitle}
+
+ {children}
+
+
;
+
+export default function LoginPage() {
+ const storeLogin = useAuthStore((s) => s.login);
+ const navigate = useNavigate();
+
+ const form = useForm({
+ resolver: zodResolver(schema),
+ defaultValues: { email: "", password: "" },
+ });
+
+ const mutation = useMutation({
+ mutationFn: (values: FormValues) => login(values.email, values.password),
+ onSuccess: (data) => {
+ storeLogin(data);
+ void navigate(data.isAdmin ? "/admin" : "/", { replace: true });
+ },
+ });
+
+ return (
+
+
+
+
+
+ Welcome back
+ Log in to keep the sparks flying
+
+
+
+
+
+
+
+ Forgot your password?{" "}
+
+
+ New here?{" "}
+
+
+
+
+
+ Add photos
+ JPG or PNG — you can pick several
+
+
+ {photos.length > 0 && (
+ <>
+
+ {photos.map((photo) => {
+ const isProfile = photo.id === profileId;
+ return (
+
+
+
onChooseProfile(photo.id)}
+ className={cn(
+ "absolute top-1 left-1 grid size-6 place-items-center rounded-full",
+ "bg-black/50 transition-colors hover:bg-black/70",
+ isProfile ? "text-amber-400" : "text-white",
+ )}
+ >
+
+
onRemove(photo.id)}
+ className={cn(
+ "absolute top-1 right-1 grid size-6 place-items-center rounded-full",
+ "bg-black/50 text-white transition-colors hover:bg-black/70",
+ )}
+ >
+
+
+ );
+ })}
+
+
+ The starred photo becomes your profile picture.
+
+
+ )}
+
;
+
+const STEP_LABELS = ["Account", "About you", "Photos & finish"] as const;
+
+const STEP_FIELDS: FieldPath[][] = [
+ ["email", "userName", "password", "confirmPassword", "birthdate"],
+ ["genderId", "countryId", "cityId", "bio"],
+ [],
+];
+
+const stepVariants = {
+ enter: (direction: number) => ({ opacity: 0, x: direction * 32 }),
+ center: { opacity: 1, x: 0 },
+ exit: (direction: number) => ({ opacity: 0, x: direction * -32 }),
+};
+
+export default function RegisterPage() {
+ const navigate = useNavigate();
+ const [step, setStep] = useState(0);
+ const [direction, setDirection] = useState(1);
+ const [photos, setPhotos] = useState([]);
+ const [profileId, setProfileId] = useState(null);
+ const [agreed, setAgreed] = useState(false);
+
+ const form = useForm({
+ resolver: zodResolver(schema),
+ defaultValues: {
+ email: "",
+ userName: "",
+ password: "",
+ confirmPassword: "",
+ birthdate: "",
+ genderId: "",
+ countryId: "",
+ cityId: "",
+ bio: "",
+ },
+ });
+
+ const gendersQuery = useQuery({ queryKey: ["genders"], queryFn: getGenders });
+ const countriesQuery = useQuery({ queryKey: ["countries"], queryFn: getCountries });
+
+ const selectedCountryId = Number(form.watch("countryId") || "0");
+ const citiesQuery = useQuery({
+ queryKey: ["cities", selectedCountryId],
+ queryFn: () => getCitiesByCountry(selectedCountryId),
+ enabled: selectedCountryId > 0,
+ });
+
+ const bioLength = form.watch("bio").length;
+
+ // Falls back to the first photo so a lone upload is the profile picture.
+ const effectiveProfileId = profileId ?? photos[0]?.id ?? null;
+
+ // Revoke preview object URLs when the page unmounts.
+ const photosRef = useRef(photos);
+ photosRef.current = photos;
+ useEffect(
+ () => () => {
+ for (const photo of photosRef.current) URL.revokeObjectURL(photo.url);
+ },
+ [],
+ );
+
+ const addPhotos = (files: File[]) => {
+ setPhotos((previous) => {
+ // The register API matches the profile picture by file name, so names must be unique.
+ const existingNames = new Set(previous.map((photo) => photo.file.name));
+ const added = files
+ .filter((file) => !existingNames.has(file.name))
+ .map((file) => ({
+ id: crypto.randomUUID(),
+ file,
+ url: URL.createObjectURL(file),
+ }));
+ return [...previous, ...added];
+ });
+ };
+
+ const removePhoto = (id: string) => {
+ setPhotos((previous) => {
+ const removed = previous.find((photo) => photo.id === id);
+ if (removed) URL.revokeObjectURL(removed.url);
+ return previous.filter((photo) => photo.id !== id);
+ });
+ setProfileId((previous) => (previous === id ? null : previous));
+ };
+
+ const mutation = useMutation({
+ mutationFn: (values: FormValues) => {
+ const profile = photos.find((photo) => photo.id === effectiveProfileId);
+ return register({
+ email: values.email,
+ password: values.password,
+ confirmPassword: values.confirmPassword,
+ userName: values.userName,
+ bio: values.bio,
+ birthdate: values.birthdate,
+ countryId: Number(values.countryId),
+ genderId: Number(values.genderId),
+ cityId: Number(values.cityId),
+ image: profile?.file ?? null,
+ newImages: photos.map((photo) => photo.file),
+ });
+ },
+ onSuccess: (_data, values) => {
+ void navigate(`/verify?email=${encodeURIComponent(values.email)}`);
+ },
+ });
+
+ const isLastStep = step === STEP_LABELS.length - 1;
+
+ const goNext = async () => {
+ const valid = await form.trigger(STEP_FIELDS[step], { shouldFocus: true });
+ if (!valid) return;
+ setDirection(1);
+ setStep((current) => current + 1);
+ };
+
+ const goBack = () => {
+ setDirection(-1);
+ setStep((current) => current - 1);
+ };
+
+ const genders = gendersQuery.data ?? [];
+ // Index 0 of countries/cities is a "choose here" placeholder row (id 0).
+ const countries = (countriesQuery.data ?? []).filter((country) => country.countryId !== 0);
+ const cities = (citiesQuery.data?.cities ?? []).filter((city) => city.cityId !== 0);
+
+ return (
+
+
+
+
+
+
+
+
+ Already have an account?{" "}
+
+
+ );
+}
diff --git a/web/src/features/auth/reset-page.tsx b/web/src/features/auth/reset-page.tsx
new file mode 100644
index 0000000..130d91e
--- /dev/null
+++ b/web/src/features/auth/reset-page.tsx
@@ -0,0 +1,219 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation } from "@tanstack/react-query";
+import { BadgeCheck, MailCheck } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { Link, useSearchParams } from "react-router";
+import { z } from "zod";
+import { resetPassword, sendResetPasswordLink } from "@/api/identity";
+import { Button } from "@/components/ui/button";
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import AuthCard from "@/features/auth/auth-card";
+import { validation } from "@/lib/constants";
+import { errorMessages } from "@/lib/errors";
+
+// Dual mode like the old app: without a token we email a reset link,
+// with a token (+ email) we set the new password.
+export default function ResetPage() {
+ const [searchParams] = useSearchParams();
+ const token = searchParams.get("token");
+ const email = searchParams.get("email") ?? "";
+
+ return token ? ;
+
+function RequestLinkForm() {
+ const form = useForm({
+ resolver: zodResolver(requestSchema),
+ defaultValues: { email: "" },
+ });
+
+ const mutation = useMutation({
+ mutationFn: (values: RequestValues) => sendResetPasswordLink(values.email),
+ });
+
+ if (mutation.isSuccess) {
+ return (
+
+
+
+
+ We sent a password reset link to{" "}
+
+ {form.getValues("email")}
+
+ . Follow it to choose a new password.
+
+
mutation.reset()}
+ >
+ Use a different email
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+const passwordSchema = z
+ .object({
+ password: z.string().min(validation.PASSWORD_MIN_LENGTH, "Password is too short"),
+ confirmPassword: z.string().min(1, "Confirm your password"),
+ })
+ .refine((values) => values.password === values.confirmPassword, {
+ message: "Passwords do not match",
+ path: ["confirmPassword"],
+ });
+
+type PasswordValues = z.infer;
+
+function NewPasswordForm({ token, email }: { token: string; email: string }) {
+ const form = useForm({
+ resolver: zodResolver(passwordSchema),
+ defaultValues: { password: "", confirmPassword: "" },
+ });
+
+ const mutation = useMutation({
+ mutationFn: (values: PasswordValues) =>
+ resetPassword({
+ token,
+ email,
+ password: values.password,
+ confirmPassword: values.confirmPassword,
+ }),
+ });
+
+ if (mutation.isSuccess) {
+ return (
+
+
+
+
+ {mutation.data || "Your password was reset — log in with the new one."}
+
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+function ErrorLines({ error }: { error: unknown }) {
+ return (
+
+ {errorMessages(error).map((line) => (
+
{line}
+ ))}
+
+ Remembered it?{" "}
+
+ );
+}
diff --git a/web/src/features/auth/step-indicator.tsx b/web/src/features/auth/step-indicator.tsx
new file mode 100644
index 0000000..3c89518
--- /dev/null
+++ b/web/src/features/auth/step-indicator.tsx
@@ -0,0 +1,30 @@
+import { cn } from "@/lib/utils";
+
+interface StepIndicatorProps {
+ /** Zero-based current step. */
+ step: number;
+ labels: readonly string[];
+}
+
+/** Segmented wizard progress: one bar per step plus a "Step x of y" caption. */
+export default function StepIndicator({ step, labels }: StepIndicatorProps) {
+ return (
+
+
+ {labels.map((label, index) => (
+
+ ))}
+
+
+ Step {step + 1} of {labels.length} —{" "}
+ {labels[step]}
+
+
+ {children}
+
+
+ Terms and conditions
+
+ The short version of the rules for using LOVE.NET.
+
+
+
+
+
+ Welcome to LOVE.NET! By creating an account or continuing to use the
+ site you accept these terms and conditions; if you do not agree with
+ them, please do not use LOVE.NET.
+
+
+ Cookies
+
+ We use cookies to keep parts of the site working (such as staying
+ logged in), in line with our privacy policy.
+
+
+
+ License
+
+ LOVE.NET and its licensors own the material on the site. You may use
+ it for personal purposes only — you must not republish, sell, rent,
+ reproduce, or redistribute it.
+
+
+
+ Your content
+
+ You are responsible for anything you post. It must be yours to
+ share, must not infringe anyone's rights, and must not be
+ defamatory, offensive, unlawful, or used to promote business or
+ unlawful activity. We may monitor and remove content that breaches
+ these terms, and by posting you grant LOVE.NET a non-exclusive
+ license to use, reproduce, and edit it.
+
+
+
+ Linking and framing
+
+ Approved organizations may link to our site as long as the link is
+ not deceptive and does not falsely imply endorsement. You may not
+ frame our pages or use our logo without written permission, and we
+ may ask for links to be removed at any time.
+
+
+
+ Disclaimer
+
+ The service is provided free of charge and as-is. To the maximum
+ extent permitted by law we exclude all warranties and are not liable
+ for any loss or damage arising from its use — except for liability
+ that cannot be excluded under applicable law. We do not guarantee
+ the information on the site is complete, accurate, or always
+ available.
+
+
+
+
+
+ );
+}
diff --git a/web/src/features/auth/verify-page.tsx b/web/src/features/auth/verify-page.tsx
new file mode 100644
index 0000000..95da3e1
--- /dev/null
+++ b/web/src/features/auth/verify-page.tsx
@@ -0,0 +1,101 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { BadgeCheck, Loader2, MailCheck } from "lucide-react";
+import { Link, useSearchParams } from "react-router";
+import { resendVerificationEmail, verifyEmail } from "@/api/identity";
+import { Button } from "@/components/ui/button";
+import AuthCard from "@/features/auth/auth-card";
+import { errorMessages } from "@/lib/errors";
+
+export default function VerifyPage() {
+ const [searchParams] = useSearchParams();
+ const token = searchParams.get("token");
+ const email = searchParams.get("email") ?? "";
+
+ const verifyQuery = useQuery({
+ queryKey: ["verify-email", token, email],
+ queryFn: () => verifyEmail(token ?? "", email),
+ enabled: token !== null,
+ retry: false,
+ });
+
+ const resend = useMutation({ mutationFn: () => resendVerificationEmail(email) });
+
+ const resendBlock = (
+
+ {resend.isError && (
+
+ {errorMessages(resend.error).map((line) => (
+
{line}
+ ))}
+
+ )}
+ {resend.isSuccess &&
{resend.data}
}
+
resend.mutate()}
+ >
+ {resend.isPending ? "Sending…" : "Resend email"}
+
+
Confirming your email…
+
+ );
+ } else if (token !== null && verifyQuery.isSuccess) {
+ content = (
+ <>
+ Email confirmed — you can now login.
+
+
+
+ );
+ } else if (token !== null) {
+ content = (
+ <>
+
+ {errorMessages(verifyQuery.error).map((line) => (
+
{line}
+ ))}
+
Check your inbox
+
+ We sent a verification link to{" "}
+ {email || "your email address"}
+ . Click it to activate your account.
+
+ {resendBlock}
+
+ );
+ }
+
+ return (
+
+
+ {content}
+
+ Already verified?{" "}
+
+
+ );
+}
diff --git a/web/src/features/discover/discover-page.tsx b/web/src/features/discover/discover-page.tsx
new file mode 100644
index 0000000..206ed7d
--- /dev/null
+++ b/web/src/features/discover/discover-page.tsx
@@ -0,0 +1,142 @@
+import { useMemo, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { HeartOff, RotateCw } from "lucide-react";
+import { AnimatePresence } from "motion/react";
+import { Navigate } from "react-router";
+import { getUsersToSwipe, likeUser } from "@/api/dating";
+import type { UserCard } from "@/api/types";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { distanceInKms } from "@/lib/distance";
+import MatchOverlay from "@/features/discover/match-overlay";
+import PreferencesSheet from "@/features/discover/preferences-sheet";
+import SwipeDeck, { type SwipeDirection } from "@/features/discover/swipe-deck";
+import { useAuthStore } from "@/stores/auth";
+import { usePreferencesStore } from "@/stores/preferences";
+
+export default function DiscoverPage() {
+ const user = useAuthStore((s) => s.user);
+ const location = useAuthStore((s) => s.location);
+ const maxAge = usePreferencesStore((s) => s.maxAge);
+ const maxDistance = usePreferencesStore((s) => s.maxDistance);
+ const aroundTheWorld = usePreferencesStore((s) => s.aroundTheWorld);
+ const gender = usePreferencesStore((s) => s.gender);
+
+ const queryClient = useQueryClient();
+ const deckQuery = useQuery({
+ queryKey: ["deck"],
+ queryFn: getUsersToSwipe,
+ enabled: !user?.isAdmin,
+ });
+
+ // Swiped cards disappear locally without refetching the deck.
+ const [removedIds, setRemovedIds] = useState>(new Set());
+ const [match, setMatch] = useState(null);
+
+ const likeMutation = useMutation({
+ mutationFn: likeUser,
+ onSuccess: (response) => {
+ if (response.isMatch && response.user) setMatch(response.user);
+ },
+ });
+
+ const cards = useMemo(
+ () =>
+ (deckQuery.data ?? []).filter((candidate) => {
+ if (removedIds.has(candidate.id)) return false;
+ if (candidate.age > maxAge) return false;
+ if (gender !== -1 && candidate.genderId !== gender) return false;
+ if (!aroundTheWorld && location) {
+ const km = distanceInKms(
+ location.latitude,
+ location.longitude,
+ candidate.latitude,
+ candidate.longitude,
+ );
+ return km <= maxDistance;
+ }
+ return true;
+ }),
+ [deckQuery.data, removedIds, maxAge, gender, aroundTheWorld, location, maxDistance],
+ );
+
+ if (user?.isAdmin) {
+ return
+
+
+
Discover
+
Find your next spark
+
+
+
+ {deckQuery.isPending ? (
+
+
+
+ {match && setMatch(null)} />}
+
+
+
+
+
+
+
No more profiles
+
+ You have seen everyone nearby — check back later.
+
+
+
+
+
+ );
+}
diff --git a/web/src/features/discover/match-overlay.tsx b/web/src/features/discover/match-overlay.tsx
new file mode 100644
index 0000000..e2e28b1
--- /dev/null
+++ b/web/src/features/discover/match-overlay.tsx
@@ -0,0 +1,77 @@
+import { Heart } from "lucide-react";
+import { motion } from "motion/react";
+import { useNavigate } from "react-router";
+import type { UserCard } from "@/api/types";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { useAuthStore } from "@/stores/auth";
+
+interface MatchOverlayProps {
+ user: UserCard;
+ onDismiss: () => void;
+}
+
+/** Full-screen celebration shown when a right-swipe comes back as a mutual match. */
+export default function MatchOverlay({ user, onDismiss }: MatchOverlayProps) {
+ const me = useAuthStore((s) => s.user);
+ const navigate = useNavigate();
+ const theirPhoto = user.images.find((image) => image.isProfilePicture) ?? user.images[0];
+
+ return (
+
+
+
+
+ It's a match!
+
+
You and {user.userName} liked each other.
+
+
+
+ {me?.userName?.[0]?.toUpperCase()}
+
+
+
+ {user.userName[0]?.toUpperCase()}
+
+
+
+
+ void navigate(user.roomId ? `/messages/${user.roomId}` : "/messages")}
+ >
+ Send a message
+
+
+ Keep swiping
+
+
+
+
+ );
+}
diff --git a/web/src/features/discover/preferences-sheet.tsx b/web/src/features/discover/preferences-sheet.tsx
new file mode 100644
index 0000000..84dd3b2
--- /dev/null
+++ b/web/src/features/discover/preferences-sheet.tsx
@@ -0,0 +1,105 @@
+import { useQuery } from "@tanstack/react-query";
+import { SlidersHorizontal } from "lucide-react";
+import { getGenders } from "@/api/geo";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Separator } from "@/components/ui/separator";
+import {
+ Sheet,
+ SheetContent,
+ SheetDescription,
+ SheetHeader,
+ SheetTitle,
+ SheetTrigger,
+} from "@/components/ui/sheet";
+import { Slider } from "@/components/ui/slider";
+import { usePreferencesStore } from "@/stores/preferences";
+
+/** Filter controls writing straight to the persisted preferences store (live filtering). */
+export default function PreferencesSheet() {
+ const { maxAge, maxDistance, aroundTheWorld, gender, set } = usePreferencesStore();
+ const gendersQuery = useQuery({ queryKey: ["genders"], queryFn: getGenders });
+ const genderOptions = [{ id: -1, name: "All" }, ...(gendersQuery.data ?? [])];
+
+ return (
+
+
+
+
+
+
+
+ Preferences
+ Filters apply to your deck instantly.
+
+
+
+
+
+ Age
+ up to {maxAge}
+
+ set({ maxAge: value })}
+ />
+
+
+
+
+
+ Distance
+
+ set({ aroundTheWorld: checked === true })}
+ />
+
+ All over the world
+
+
+
+ Max distance
+ {maxDistance} km
+
+ set({ maxDistance: value })}
+ aria-label="Max distance"
+ />
+
+
+
+
+
+ Interested in
+ set({ gender: Number(value) })}
+ >
+ {genderOptions.map((option) => (
+
+
+ {option.name}
+
+
+ ))}
+
+
+
+
+ );
+}
diff --git a/web/src/features/discover/swipe-card.tsx b/web/src/features/discover/swipe-card.tsx
new file mode 100644
index 0000000..e837301
--- /dev/null
+++ b/web/src/features/discover/swipe-card.tsx
@@ -0,0 +1,115 @@
+import { useMemo, useState } from "react";
+import { MapPin } from "lucide-react";
+import { motion, type MotionValue } from "motion/react";
+import type { UserCard } from "@/api/types";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+interface SwipeCardProps {
+ card: UserCard;
+ /** Kilometers from the logged-in user, or null when their location is unknown. */
+ distanceKm: number | null;
+ /** Stamp opacities driven by the drag x motion value; only passed for the top card. */
+ likeOpacity?: MotionValue;
+ nopeOpacity?: MotionValue;
+}
+
+/** Presentational swipe card: full-bleed photo carousel, info overlay, LIKE/NOPE stamps. */
+export default function SwipeCard({ card, distanceKm, likeOpacity, nopeOpacity }: SwipeCardProps) {
+ const photos = useMemo(
+ () => [...card.images].sort((a, b) => Number(b.isProfilePicture) - Number(a.isProfilePicture)),
+ [card.images],
+ );
+ const [photoIndex, setPhotoIndex] = useState(0);
+ const photo = photos[Math.min(photoIndex, photos.length - 1)];
+
+ const caption = [
+ [card.cityName, card.countryName].filter(Boolean).join(", "),
+ card.genderName,
+ ]
+ .filter(Boolean)
+ .join(" · ");
+
+ return (
+
+ {photo ? (
+
+ ) : (
+
+
+ {card.userName[0]?.toUpperCase()}
+
+
+ )}
+
+ {/* Tap left/right halves to step through photos. */}
+ {photos.length > 1 && (
+ <>
+
setPhotoIndex((i) => Math.max(0, i - 1))}
+ />
+ setPhotoIndex((i) => Math.min(photos.length - 1, i + 1))}
+ />
+
+ {photos.map((p, i) => (
+
+
+ )}
+
+ {likeOpacity && (
+
+ LIKE
+
+ )}
+ {nopeOpacity && (
+
+ NOPE
+
+ )}
+
+
+
+
+ {card.userName}
+ {card.age}
+
+ {distanceKm !== null && (
+
+
+ )}
+
+ {card.bio &&
{card.bio}
}
+ {caption &&
{caption}
}
+
(null);
+ const registerTopCard = useCallback((handle: DeckCardHandle) => {
+ topCardRef.current = handle;
+ return () => {
+ if (topCardRef.current === handle) {
+ topCardRef.current = null;
+ }
+ };
+ }, []);
+
+ const visible = cards.slice(0, VISIBLE_CARDS);
+ const actionsDisabled = likePending || visible.length === 0;
+
+ return (
+
+
+
+ {visible.map((card, index) => (
+
+
+
+
+ topCardRef.current?.swipe("left")}
+ >
+
+ topCardRef.current?.swipe("right")}
+ >
+
+
+
{
+ if (suppressClick.current) {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ }}
+ >
+
+ );
+}
diff --git a/web/src/features/landing/landing-page.tsx b/web/src/features/landing/landing-page.tsx
new file mode 100644
index 0000000..faf696a
--- /dev/null
+++ b/web/src/features/landing/landing-page.tsx
@@ -0,0 +1,122 @@
+import { Bell, Flame, Heart, MessageCircle, Quote } from "lucide-react";
+import { motion } from "motion/react";
+import { Link } from "react-router";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+
+const features = [
+ {
+ icon: Flame,
+ title: "Swipe & match",
+ description:
+ "Discover people near you and around the world. Like who catches your eye — when it's mutual, it's a match.",
+ },
+ {
+ icon: MessageCircle,
+ title: "Chat in realtime",
+ description:
+ "Every match opens a private room. Messages, photos, and typing indicators arrive instantly.",
+ },
+ {
+ icon: Bell,
+ title: "Stay notified",
+ description:
+ "New match? New message? You'll know the moment it happens, on any device.",
+ },
+] as const;
+
+// Condensed from the classic LOVE.NET dating advice.
+const advices = [
+ "Be yourself — genuine beats impressive when building a real connection.",
+ "Communicate openly and honestly; trust is what turns dates into relationships.",
+ "Stay safe: meet in public and let a friend know where you're going.",
+ "Be patient — great relationships take time, so enjoy getting to know each other.",
+] as const;
+
+const fadeUp = {
+ initial: { opacity: 0, y: 16 },
+ animate: { opacity: 1, y: 0 },
+} as const;
+
+export default function LandingPage() {
+ return (
+
+
+ {/* Hero */}
+
+
+
+
+ LOVE.NET
+
+
+ Match with people around the world and chat in real time.
+
+
+
+
+
+
+
+
+
+ {/* Features */}
+
+ {features.map((feature, index) => (
+
+
+
+
+
+ {feature.title}
+ {feature.description}
+
+
+
+ ))}
+
+
+ {/* Dating advice strip */}
+
+
+ Dating advice
+
+
+ {advices.map((advice) => (
+
+ ))}
+
+
+
+
+ © {new Date().getFullYear()} LOVE.NET
+
+
(null);
+ const [busy, setBusy] = useState(false);
+ const lastTypingAt = useRef(0);
+ const fileInputRef = useRef(null);
+
+ // Release the preview object URL whenever the image is replaced or cleared.
+ useEffect(() => {
+ return () => {
+ if (image) URL.revokeObjectURL(image.previewUrl);
+ };
+ }, [image]);
+
+ function onTextChange(e: ChangeEvent) {
+ setText(e.target.value);
+ const now = Date.now();
+ if (now - lastTypingAt.current >= TYPING_THROTTLE_MS) {
+ lastTypingAt.current = now;
+ realtime.typing(roomId);
+ }
+ }
+
+ function pickImage(file: File | null | undefined) {
+ if (!file || !file.type.startsWith("image/")) return;
+ setImage({ file, previewUrl: URL.createObjectURL(file) });
+ }
+
+ function onPaste(e: ClipboardEvent) {
+ const item = Array.from(e.clipboardData.items).find((i) => i.type.startsWith("image/"));
+ if (item) pickImage(item.getAsFile());
+ }
+
+ function appendOptimistic(body: { text?: string | null; imageUrl?: string | null }): ChatMessage {
+ const temp: ChatMessage = {
+ id: `temp-${crypto.randomUUID()}`,
+ roomId,
+ userId: user?.id ?? "",
+ text: body.text ?? null,
+ profilePicture: user?.profilePicture ?? null,
+ imageUrl: body.imageUrl ?? null,
+ createdOn: new Date().toISOString(),
+ pending: true,
+ };
+ queryClient.setQueryData>(["messages", roomId], (data) => {
+ if (!data || data.pages.length === 0) return data;
+ const [first, ...rest] = data.pages;
+ return {
+ ...data,
+ pages: [
+ { messages: [temp, ...first.messages], totalMessages: first.totalMessages + 1 },
+ ...rest,
+ ],
+ };
+ });
+ return temp;
+ }
+
+ function removeOptimistic(id: string) {
+ queryClient.setQueryData>(["messages", roomId], (data) => {
+ if (!data) return data;
+ return {
+ ...data,
+ pages: data.pages.map((page) =>
+ page.messages.some((m) => m.id === id)
+ ? {
+ messages: page.messages.filter((m) => m.id !== id),
+ totalMessages: page.totalMessages - 1,
+ }
+ : page,
+ ),
+ };
+ });
+ }
+
+ async function deliver(body: { text?: string | null; imageUrl?: string | null }) {
+ const temp = appendOptimistic(body);
+ onSent?.();
+ try {
+ await realtime.sendMessage({ roomId, ...body, profilePicture: user?.profilePicture ?? null });
+ } catch {
+ removeOptimistic(temp.id);
+ toast.error("Message failed to send. Try again.");
+ }
+ }
+
+ async function onSubmit(e: FormEvent) {
+ e.preventDefault();
+ if (busy) return;
+
+ const trimmed = text.trim();
+ const picked = image;
+ if (!trimmed && !picked) return;
+
+ setText("");
+ setBusy(true);
+ try {
+ // Text and image travel as two separate messages (old-app contract).
+ if (trimmed) await deliver({ text: trimmed });
+ if (picked) {
+ try {
+ const imageUrl = await uploadChatImage(picked.file);
+ setImage(null);
+ await deliver({ imageUrl });
+ } catch {
+ toast.error("Couldn't upload the image.");
+ }
+ }
+ } finally {
+ setBusy(false);
+ }
+ }
+
+ return (
+
+ );
+}
diff --git a/web/src/features/messages/conversation-list.tsx b/web/src/features/messages/conversation-list.tsx
new file mode 100644
index 0000000..2320333
--- /dev/null
+++ b/web/src/features/messages/conversation-list.tsx
@@ -0,0 +1,261 @@
+import { Heart, Search, Users } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { NavLink } from "react-router";
+import type { Chatroom } from "@/api/types";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Skeleton } from "@/components/ui/skeleton";
+import type { Conversation } from "@/hooks/use-conversations";
+import { conversationTime } from "@/lib/dates";
+import { cn } from "@/lib/utils";
+import * as events from "@/realtime/events";
+import { useAuthStore } from "@/stores/auth";
+
+const TYPING_FLASH_MS = 3_000;
+
+interface ConversationListProps {
+ conversations: Conversation[];
+ chatrooms: Chatroom[];
+ search: string;
+ onSearchChange: (value: string) => void;
+ isLoading: boolean;
+ hasNextPage: boolean;
+ onLoadMore: () => void;
+}
+
+/** Left column: search, match conversations, and public "Communities" rooms. */
+export default function ConversationList({
+ conversations,
+ chatrooms,
+ search,
+ onSearchChange,
+ isLoading,
+ hasNextPage,
+ onLoadMore,
+}: ConversationListProps) {
+ const myId = useAuthStore((s) => s.user?.id);
+ const typingRooms = useTypingRooms(myId);
+ const rows = conversations.filter((c) => !!c.match.roomId);
+
+ return (
+
+
+
Messages
+
+
+
+
+
+ {isLoading ? (
+
+ ) : rows.length === 0 ? (
+
+
+ ) : (
+
+ {rows.map((conversation) => (
+
+
+ ))}
+
+ )}
+ {hasNextPage && !isLoading &&
}
+
+ {chatrooms.length > 0 && (
+ <>
+
+ Communities
+
+
+ {chatrooms.map((room) => (
+
+
+ ))}
+
+
+ )}
+
+
{
+ const [typingRooms, setTypingRooms] = useState>({});
+ const timers = useRef(new Map());
+
+ useEffect(() => {
+ const off = events.on("peerTyping", (payload) => {
+ if (payload.userId === myId) return;
+ setTypingRooms((prev) => (prev[payload.roomId] ? prev : { ...prev, [payload.roomId]: true }));
+
+ const existing = timers.current.get(payload.roomId);
+ if (existing) window.clearTimeout(existing);
+ timers.current.set(
+ payload.roomId,
+ window.setTimeout(() => {
+ timers.current.delete(payload.roomId);
+ setTypingRooms((prev) => {
+ const next = { ...prev };
+ delete next[payload.roomId];
+ return next;
+ });
+ }, TYPING_FLASH_MS),
+ );
+ });
+
+ const currentTimers = timers.current;
+ return () => {
+ off();
+ for (const timer of currentTimers.values()) window.clearTimeout(timer);
+ currentTimers.clear();
+ };
+ }, [myId]);
+
+ return typingRooms;
+}
+
+function MatchRow({
+ conversation,
+ typing,
+ myId,
+}: {
+ conversation: Conversation;
+ typing: boolean;
+ myId: string | undefined;
+}) {
+ const { match, summary } = conversation;
+ const picture = match.images.find((i) => i.isProfilePicture)?.url ?? match.images[0]?.url;
+ const unread = summary?.unreadCount ?? 0;
+
+ const mine = !!summary?.lastMessageSenderId && summary.lastMessageSenderId === myId;
+ const body = summary?.lastMessageText ?? (summary?.lastMessageImageUrl ? "📷 Photo" : null);
+ const preview = typing ? "typing…" : body ? (mine ? `You: ${body}` : body) : "You matched — say hi!";
+
+ return (
+
+
+ {match.userName[0]?.toUpperCase()}
+
+
+
+ {match.userName}
+ {summary?.lastMessageAt && (
+
+ {conversationTime(summary.lastMessageAt)}
+
+ )}
+
+
+ 0
+ ? "text-foreground font-medium"
+ : "text-muted-foreground",
+ )}
+ >
+ {preview}
+
+ {unread > 0 && (
+
+ {unread > 9 ? "9+" : unread}
+
+ )}
+
+
+ );
+}
+
+function ChatroomRow({ room, typing }: { room: Chatroom; typing: boolean }) {
+ return (
+
+
+
+
+
+
+ {room.title}
+
+ {typing ? "typing…" : "Public room"}
+
+
+
+ );
+}
+
+function rowClass({ isActive }: { isActive: boolean }) {
+ return cn(
+ "flex items-center gap-3 rounded-xl px-3 py-2.5 transition-colors",
+ isActive ? "bg-primary/10" : "hover:bg-accent",
+ );
+}
+
+function LoadMoreSentinel({ onLoadMore }: { onLoadMore: () => void }) {
+ const ref = useRef(null);
+ const onLoadMoreRef = useRef(onLoadMore);
+ onLoadMoreRef.current = onLoadMore;
+
+ useEffect(() => {
+ const el = ref.current;
+ if (!el) return;
+ const observer = new IntersectionObserver(
+ (entries) => {
+ if (entries.some((entry) => entry.isIntersecting)) onLoadMoreRef.current();
+ },
+ { rootMargin: "120px 0px" },
+ );
+ observer.observe(el);
+ return () => observer.disconnect();
+ }, []);
+
+ return (
+
+ Loading more…
+
+ );
+}
+
+function RowSkeletons() {
+ return (
+
+ {Array.from({ length: 6 }, (_, i) => (
+
+ ))}
+
+
+ void list.fetchNextPage()}
+ />
+
+
+
+
+
+
+
+
Pick a conversation
+
+ Choose a match on the left and start something lovely.
+
+
+
();
+ const unique: ChatMessage[] = [];
+ for (const message of flat) {
+ if (!seen.has(message.id)) {
+ seen.add(message.id);
+ unique.push(message);
+ }
+ }
+ return unique.reverse();
+ }, [query.data]);
+
+ // The summaries cache only refetches every 60s; zero the badge locally
+ // whenever we tell the server this room is read.
+ const clearUnread = useCallback(() => {
+ queryClient.setQueryData(["summaries"], (summaries) =>
+ summaries?.map((s) => (s.roomId === roomId ? { ...s, unreadCount: 0 } : s)),
+ );
+ }, [queryClient, roomId]);
+
+ // ---- room lifecycle: active room, join, mark read, reconnect recovery ----
+ useEffect(() => {
+ realtime.setActiveRoom(roomId);
+ realtime
+ .joinRoom(roomId, myPfp)
+ .then(() => realtime.markRead(roomId))
+ .then(clearUnread)
+ .catch((error) => console.error("Failed to join room", error));
+
+ const offReconnected = events.on("reconnected", () => {
+ realtime
+ .joinRoom(roomId, myPfp)
+ .then(() => realtime.markRead(roomId))
+ .then(clearUnread)
+ .catch((error) => console.error("Failed to re-join room", error));
+ void queryClient.invalidateQueries({ queryKey: ["messages", roomId] });
+ });
+
+ return () => {
+ offReconnected();
+ realtime.setActiveRoom(null);
+ void realtime.leaveRoom(roomId);
+ };
+ }, [roomId, myPfp, realtime, queryClient, clearUnread]);
+
+ // ---- typing indicator (transient signal, ~3s flash reset per ping) ----
+ const [peerTypingName, setPeerTypingName] = useState(null);
+ const typingTimer = useRef(null);
+ useEffect(() => {
+ const off = events.on("peerTyping", (payload) => {
+ if (payload.roomId !== roomId || payload.userId === myId) return;
+ setPeerTypingName(payload.userName || "Someone");
+ if (typingTimer.current) window.clearTimeout(typingTimer.current);
+ typingTimer.current = window.setTimeout(() => setPeerTypingName(null), TYPING_FLASH_MS);
+ });
+ return () => {
+ off();
+ if (typingTimer.current) window.clearTimeout(typingTimer.current);
+ };
+ }, [roomId, myId]);
+
+ // ---- read receipts: live event beats the (also patched) summaries cache ----
+ const [liveReadAt, setLiveReadAt] = useState(null);
+ useEffect(() => {
+ return events.on("readReceipt", (receipt) => {
+ if (receipt.roomId === roomId) setLiveReadAt(receipt.readAt);
+ });
+ }, [roomId]);
+
+ const summaryReadAt = conversation?.summary?.peerLastReadAt ?? null;
+ const peerReadAt = useMemo(() => {
+ const candidates = [summaryReadAt, liveReadAt].filter((v): v is string => !!v);
+ if (candidates.length === 0) return null;
+ return candidates.reduce((a, b) => (Date.parse(a) >= Date.parse(b) ? a : b));
+ }, [summaryReadAt, liveReadAt]);
+
+ // ---- presence + join/leave notes (public rooms) ----
+ const [usersInRoom, setUsersInRoom] = useState([]);
+ const [notes, setNotes] = useState([]);
+ const usersRef = useRef([]);
+ useEffect(() => {
+ return events.on("refreshUsersList", (payload) => {
+ if (payload.roomId && payload.roomId !== roomId) return;
+ const changed = findChangedUser(usersRef.current, payload.users, payload.hasLeft);
+ usersRef.current = payload.users;
+ setUsersInRoom(payload.users);
+
+ if (isPublic && changed) {
+ const name = changed.id === myId ? "You" : (changed.userName ?? "Someone");
+ const text = payload.hasLeft
+ ? `${name} left the chat.`
+ : `${name} joined the chat — say hi!`;
+ setNotes((prev) => [
+ ...prev,
+ { id: crypto.randomUUID(), text, at: new Date().toISOString() },
+ ]);
+ }
+ });
+ }, [roomId, myId, isPublic]);
+
+ // ---- keep unread at 0 while the thread is visible (debounced re-markRead) ----
+ const latestPeerMessageId = useMemo(() => {
+ const last = messages[messages.length - 1];
+ return last && !last.pending && last.userId !== myId ? last.id : null;
+ }, [messages, myId]);
+
+ useEffect(() => {
+ if (!latestPeerMessageId) return;
+ setPeerTypingName(null); // they just spoke; retire the dots early
+ const timer = window.setTimeout(
+ () => void realtime.markRead(roomId).then(clearUnread),
+ MARK_READ_DEBOUNCE_MS,
+ );
+ return () => window.clearTimeout(timer);
+ }, [latestPeerMessageId, roomId, realtime, clearUnread]);
+
+ // ---- flatten into render entries: day markers, notes, grouped messages ----
+ const entries = useMemo(
+ () => buildEntries(messages, notes, myId),
+ [messages, notes, myId],
+ );
+
+ const lastOwnId = useMemo(() => {
+ for (let i = messages.length - 1; i >= 0; i--) {
+ if (messages[i].userId === myId) return messages[i].id;
+ }
+ return null;
+ }, [messages, myId]);
+
+ const peerName = conversation?.match.userName ?? null;
+ const peerMessagePicture = useMemo(() => {
+ for (let i = messages.length - 1; i >= 0; i--) {
+ const m = messages[i];
+ if (m.userId !== myId && m.profilePicture) return m.profilePicture;
+ }
+ return null;
+ }, [messages, myId]);
+ const peerAvatarUrl =
+ conversation?.match.images.find((i) => i.isProfilePicture)?.url ??
+ conversation?.match.images[0]?.url ??
+ peerMessagePicture;
+
+ const title = peerName ?? chatroom?.title ?? (listLoading ? null : "Conversation");
+ const headerImage = conversation ? peerAvatarUrl : chatroom?.url;
+
+ const [membersOpen, setMembersOpen] = useState(false);
+ const [sentTick, setSentTick] = useState(0);
+
+ return (
+
+ {/* Header */}
+
+
+ {/* Thread + composer share the scroller context so sends can jump to the end. */}
+
+
+
+
+ {query.isLoading ? (
+
+ ) : (
+
+
+
+ {query.hasNextPage && (
+ {
+ if (!query.isFetchingNextPage) void query.fetchNextPage();
+ }}
+ />
+ )}
+
+ {entries.length === 0 && (
+
+ No messages yet — break the ice!
+
+ )}
+
+ {entries.map((entry) => {
+ if (entry.kind === "day") {
+ return (
+
+
+ {entry.label}
+
+
+ );
+ }
+ if (entry.kind === "note") {
+ return (
+
+
+
+ {entry.text}
+
+
+
+ );
+ }
+
+ const m = entry.message;
+ const isLastOwn = entry.isOwn && !!conversation && m.id === lastOwnId;
+ return (
+
+
+ {!entry.isOwn &&
+ (entry.showAvatar ? (
+
+
+
+ {(peerName?.[0] ?? "?").toUpperCase()}
+
+
+
+ ) : (
+
+ ))}
+
+
+
+ {m.imageUrl ? (
+
+
+ {m.pending ? (
+
+ Sending…
+
+ ) : isLastOwn ? (
+
+ {peerReadAt &&
+ Date.parse(peerReadAt) >= Date.parse(m.createdOn)
+ ? `Seen ${messageTime(peerReadAt)}`
+ : "Delivered"}
+
+ ) : entry.groupEnd ? (
+ {messageTime(m.createdOn)}
+ ) : null}
+
+
+
+ );
+ })}
+
+ {peerTypingName && (
+
+ {conversation && (
+
+
+ {(peerName?.[0] ?? "?").toUpperCase()}
+
+
+ )}
+
+
+
+
+ )}
+
+
+
setSentTick((tick) => tick + 1)} />
+
+
+ {isPublic && membersOpen && (
+
+ )}
+
+
(null);
+ const onLoadRef = useRef(onLoad);
+ onLoadRef.current = onLoad;
+
+ useEffect(() => {
+ const el = ref.current;
+ if (!el) return;
+ const observer = new IntersectionObserver(
+ (observed) => {
+ if (observed.some((entry) => entry.isIntersecting)) onLoadRef.current();
+ },
+ { rootMargin: "200px 0px" },
+ );
+ observer.observe(el);
+ return () => observer.disconnect();
+ }, []);
+
+ return (
+
+
+ {loading ? "Loading earlier messages…" : "Load earlier messages"}
+
+
+ );
+}
+
+/** Lives inside the scroller provider; jumps to the newest message on send. */
+function ScrollToEndOnSend({ tick }: { tick: number }) {
+ const { scrollToEnd } = useMessageScroller();
+ const lastTick = useRef(tick);
+
+ useEffect(() => {
+ if (tick !== lastTick.current) {
+ lastTick.current = tick;
+ scrollToEnd({ behavior: "smooth" });
+ }
+ }, [tick, scrollToEnd]);
+
+ return null;
+}
+
+function ThreadSkeleton() {
+ return (
+
+
+ );
+}
diff --git a/web/src/features/messages/typing-dots.tsx b/web/src/features/messages/typing-dots.tsx
new file mode 100644
index 0000000..cbe263c
--- /dev/null
+++ b/web/src/features/messages/typing-dots.tsx
@@ -0,0 +1,14 @@
+/** Animated three-dot "peer is typing" bubble. */
+export default function TypingDots() {
+ return (
+
+
+ );
+}
diff --git a/web/src/features/profile/photo-manager.tsx b/web/src/features/profile/photo-manager.tsx
new file mode 100644
index 0000000..f9781b5
--- /dev/null
+++ b/web/src/features/profile/photo-manager.tsx
@@ -0,0 +1,121 @@
+import { ImagePlus, Star, Trash2, X } from "lucide-react";
+import type { ImageModel } from "@/api/types";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+
+export interface NewPhoto {
+ file: File;
+ /** Object URL used for the preview; revoke it when the photo is dropped. */
+ url: string;
+}
+
+interface PhotoManagerProps {
+ images: ImageModel[];
+ newPhotos: NewPhoto[];
+ onMakeProfilePicture: (id: number) => void;
+ onRemoveImage: (id: number) => void;
+ onAddFiles: (files: FileList | null) => void;
+ onRemoveNewPhoto: (url: string) => void;
+}
+
+export default function PhotoManager({
+ images,
+ newPhotos,
+ onMakeProfilePicture,
+ onRemoveImage,
+ onAddFiles,
+ onRemoveNewPhoto,
+}: PhotoManagerProps) {
+ return (
+
+ {images.map((image) => (
+
onMakeProfilePicture(image.id)}
+ onRemove={() => onRemoveImage(image.id)}
+ />
+ ))}
+
+ {newPhotos.map((photo) => (
+
+
+
+ New
+
+
onRemoveNewPhoto(photo.url)}
+ >
+
+
+
+
+
+
+
+
+ {image.isProfilePicture ? (
+
+
+ ) : (
+ // Visible on touch; revealed on hover/focus for pointer devices.
+
+
+
+
+
+
+ )}
+
;
+
+function toFormValues(account: AccountDetails): FormValues {
+ return {
+ userName: account.userName,
+ bio: account.bio ?? "",
+ birthdate: dayjs(account.birthdate).format("YYYY-MM-DD"),
+ genderId: account.genderId > 0 ? String(account.genderId) : "",
+ countryId: account.countryId > 0 ? String(account.countryId) : "",
+ cityId: account.cityId > 0 ? String(account.cityId) : "",
+ };
+}
+
+export default function ProfilePage() {
+ const myId = useAuthStore((s) => s.user?.id);
+
+ const accountQuery = useQuery({
+ queryKey: ["account", myId],
+ queryFn: () => getAccount(myId!),
+ enabled: !!myId,
+ });
+
+ if (accountQuery.isPending) return
+ {errorMessages(accountQuery.error).map((line) => (
+
{line}
+ ))}
+
(account.images);
+ const [newPhotos, setNewPhotos] = useState([]);
+
+ // Revoke outstanding preview URLs on unmount.
+ const newPhotosRef = useRef(newPhotos);
+ newPhotosRef.current = newPhotos;
+ useEffect(
+ () => () => {
+ for (const photo of newPhotosRef.current) URL.revokeObjectURL(photo.url);
+ },
+ [],
+ );
+
+ const form = useForm({
+ resolver: zodResolver(schema),
+ defaultValues: toFormValues(account),
+ });
+
+ const countryId = Number(form.watch("countryId"));
+ const bioLength = form.watch("bio").length;
+
+ const gendersQuery = useQuery({ queryKey: ["genders"], queryFn: getGenders });
+ const countriesQuery = useQuery({ queryKey: ["countries"], queryFn: getCountries });
+ const citiesQuery = useQuery({
+ queryKey: ["cities", countryId],
+ queryFn: () => getCitiesByCountry(countryId),
+ enabled: countryId > 0,
+ });
+
+ // Placeholder entries with id 0 are skipped.
+ const genders = (gendersQuery.data ?? []).filter((g) => g.id !== 0);
+ const countries = (countriesQuery.data ?? []).filter((c) => c.countryId !== 0);
+ const cities = (citiesQuery.data?.cities ?? []).filter((c) => c.cityId !== 0);
+
+ const mutation = useMutation({
+ mutationFn: (values: FormValues) =>
+ editAccount({
+ id: account.id,
+ email: account.email,
+ userName: values.userName,
+ bio: values.bio,
+ birthdate: values.birthdate,
+ countryId: Number(values.countryId),
+ genderId: Number(values.genderId),
+ cityId: Number(values.cityId),
+ images: keptImages,
+ newImages: newPhotos.map((photo) => photo.file),
+ }),
+ onSuccess: (data) => {
+ queryClient.setQueryData(["account", account.id], data);
+ setKeptImages(data.images);
+ for (const photo of newPhotos) URL.revokeObjectURL(photo.url);
+ setNewPhotos([]);
+ form.reset(toFormValues(data));
+ toast.success("Profile updated");
+ },
+ });
+
+ function makeProfilePicture(id: number) {
+ setKeptImages((images) =>
+ images.map((image) => ({ ...image, isProfilePicture: image.id === id })),
+ );
+ }
+
+ function removeImage(id: number) {
+ setKeptImages((images) => {
+ const rest = images.filter((image) => image.id !== id);
+ // Keep exactly one profile picture flag alive when images remain.
+ if (rest.length > 0 && !rest.some((image) => image.isProfilePicture)) {
+ return rest.map((image, index) => ({ ...image, isProfilePicture: index === 0 }));
+ }
+ return rest;
+ });
+ }
+
+ function addFiles(files: FileList | null) {
+ if (!files) return;
+ const added = Array.from(files).map((file) => ({
+ file,
+ url: URL.createObjectURL(file),
+ }));
+ setNewPhotos((photos) => [...photos, ...added]);
+ }
+
+ function removeNewPhoto(url: string) {
+ URL.revokeObjectURL(url);
+ setNewPhotos((photos) => photos.filter((photo) => photo.url !== url));
+ }
+
+ function onSubmit(values: FormValues) {
+ if (keptImages.length + newPhotos.length === 0) {
+ toast.error("Keep or add at least one photo");
+ return;
+ }
+ mutation.mutate(values);
+ }
+
+ return (
+
+
Your profile
+
+ Keep your photos and details fresh — they are what others swipe on.
+
+
+
+
+
+
+
+
+
+
+
+ {Array.from({ length: 4 }, (_, index) => (
+
+
+
+
+
+ {Array.from({ length: 5 }, (_, index) => (
+
+
+ ))}
+
+
+
+
;
+
+ if (Array.isArray(data)) return data.map(String);
+ if (typeof data === "string") return [data];
+
+ const lines: string[] = [];
+ if (typeof data.Error === "string") lines.push(data.Error);
+ if (Array.isArray(data.errors)) lines.push(...data.errors.map(String));
+ else if (data.errors && typeof data.errors === "object") {
+ for (const value of Object.values(data.errors as Record)) {
+ if (Array.isArray(value)) lines.push(...value.map(String));
+ else lines.push(String(value));
+ }
+ }
+ if (lines.length > 0) return lines.flatMap((l) => l.split("\n"));
+ }
+
+ if (error instanceof Error && error.message) return error.message.split("\n");
+ return ["Something went wrong"];
+}
diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts
new file mode 100644
index 0000000..a5ef193
--- /dev/null
+++ b/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/web/src/main.tsx b/web/src/main.tsx
new file mode 100644
index 0000000..96d0814
--- /dev/null
+++ b/web/src/main.tsx
@@ -0,0 +1,32 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { RouterProvider } from "react-router/dom";
+import { ThemeProvider } from "@/components/theme-provider";
+import { Toaster } from "@/components/ui/sonner";
+import { RealtimeProvider } from "@/realtime/connection";
+import { router } from "@/router";
+import "./index.css";
+
+const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ retry: 1,
+ staleTime: 30_000,
+ refetchOnWindowFocus: false,
+ },
+ },
+});
+
+createRoot(document.getElementById("root")!).render(
+
+
+
+
+
+
+
+ ,
+);
diff --git a/web/src/realtime/connection.tsx b/web/src/realtime/connection.tsx
new file mode 100644
index 0000000..09cc511
--- /dev/null
+++ b/web/src/realtime/connection.tsx
@@ -0,0 +1,207 @@
+import {
+ HubConnectionBuilder,
+ HubConnectionState,
+ LogLevel,
+ type HubConnection,
+} from "@microsoft/signalr";
+import { useQueryClient, type InfiniteData } from "@tanstack/react-query";
+import { createContext, useContext, useEffect, useMemo, useRef, type ReactNode } from "react";
+import { toast } from "sonner";
+import type {
+ ChatMessage,
+ ChatPage,
+ MatchReceived,
+ MessageNotification,
+ PeerTyping,
+ ReadReceipt,
+ RefreshUsersList,
+ RoomSummary,
+} from "@/api/types";
+import { BASE_URL } from "@/lib/constants";
+import { MatchToast, MessageToast } from "@/realtime/toasts";
+import * as events from "@/realtime/events";
+import { isLogged, useAuthStore } from "@/stores/auth";
+
+interface RealtimeApi {
+ joinRoom: (roomId: string, profilePictureUrl?: string | null) => Promise;
+ leaveRoom: (roomId: string) => Promise;
+ sendMessage: (message: {
+ roomId: string;
+ text?: string | null;
+ imageUrl?: string | null;
+ profilePicture?: string | null;
+ }) => Promise;
+ typing: (roomId: string) => void;
+ markRead: (roomId: string) => Promise;
+ /** The room whose thread is on screen; message toasts are suppressed for it. */
+ setActiveRoom: (roomId: string | null) => void;
+}
+
+const RealtimeContext = createContext(null);
+
+export function useRealtime(): RealtimeApi {
+ const api = useContext(RealtimeContext);
+ if (!api) throw new Error("useRealtime must be used inside ");
+ return api;
+}
+
+export function RealtimeProvider({ children }: { children: ReactNode }) {
+ const logged = useAuthStore(isLogged);
+ const queryClient = useQueryClient();
+ const connectionRef = useRef(null);
+ const activeRoomRef = useRef(null);
+
+ useEffect(() => {
+ if (!logged) return;
+
+ const connection = new HubConnectionBuilder()
+ .withUrl(`${BASE_URL}/chat`, {
+ accessTokenFactory: () => useAuthStore.getState().user?.token ?? "",
+ })
+ .configureLogging(LogLevel.Warning)
+ .withAutomaticReconnect()
+ .build();
+
+ const myId = useAuthStore.getState().user?.id;
+
+ connection.on("ReceiveMessage", (message: ChatMessage) => {
+ appendToThread(message);
+ void queryClient.invalidateQueries({ queryKey: ["summaries"] });
+ });
+
+ connection.on("MessageNotification", (notification: MessageNotification) => {
+ void queryClient.invalidateQueries({ queryKey: ["summaries"] });
+
+ if (notification.userId !== myId && activeRoomRef.current !== notification.roomId) {
+ toast.custom((id) => (["summaries"], (summaries) =>
+ summaries?.map((s) =>
+ s.roomId === receipt.roomId ? { ...s, peerLastReadAt: receipt.readAt } : s,
+ ),
+ );
+ });
+
+ connection.on("RefreshUsersList", (payload: RefreshUsersList) =>
+ events.emit("refreshUsersList", payload),
+ );
+
+ connection.onreconnecting(() => {
+ toast.loading("Reconnecting…", { id: "hub-reconnect" });
+ });
+ connection.onreconnected(() => {
+ toast.dismiss("hub-reconnect");
+ events.emit("reconnected", undefined);
+ });
+
+ connection.start().catch((error) => {
+ console.error("Realtime connection failed", error);
+ });
+ connectionRef.current = connection;
+
+ return () => {
+ connectionRef.current = null;
+ void connection.stop();
+ };
+ }, [logged, queryClient]);
+
+ function appendToThread(message: ChatMessage) {
+ queryClient.setQueryData>(["messages", message.roomId], (data) => {
+ if (!data || data.pages.length === 0) return data;
+
+ const already = data.pages.some((p) => p.messages.some((m) => m.id === message.id));
+ if (already) return data;
+
+ const [first, ...rest] = data.pages;
+
+ // Replace the matching optimistic bubble (same author + body) if present.
+ const pendingIndex = first.messages.findIndex(
+ (m) => m.pending && m.userId === message.userId &&
+ m.text === message.text && m.imageUrl === message.imageUrl,
+ );
+
+ const messages =
+ pendingIndex >= 0
+ ? first.messages.map((m, i) => (i === pendingIndex ? { ...message } : m))
+ : [message, ...first.messages];
+
+ return {
+ ...data,
+ pages: [
+ { messages, totalMessages: first.totalMessages + (pendingIndex >= 0 ? 0 : 1) },
+ ...rest,
+ ],
+ };
+ });
+ }
+
+ const api = useMemo(
+ () => ({
+ joinRoom: async (roomId, profilePictureUrl = null) => {
+ await ready();
+ await connectionRef.current!.invoke("JoinRoom", { roomId, profilePictureUrl });
+ },
+ leaveRoom: async (roomId) => {
+ if (connectionRef.current?.state === HubConnectionState.Connected) {
+ await connectionRef.current.invoke("LeaveRoom", { roomId, profilePictureUrl: null });
+ }
+ },
+ sendMessage: async (message) => {
+ await ready();
+ await connectionRef.current!.invoke("SendMessage", {
+ roomId: message.roomId,
+ text: message.text ?? null,
+ imageUrl: message.imageUrl ?? null,
+ profilePicture: message.profilePicture ?? null,
+ });
+ },
+ typing: (roomId) => {
+ if (connectionRef.current?.state === HubConnectionState.Connected) {
+ void connectionRef.current.send("Typing", roomId);
+ }
+ },
+ markRead: async (roomId) => {
+ if (connectionRef.current?.state === HubConnectionState.Connected) {
+ await connectionRef.current.invoke("MarkRead", roomId);
+ }
+ },
+ setActiveRoom: (roomId) => {
+ activeRoomRef.current = roomId;
+ },
+ }),
+ [],
+ );
+
+ async function ready(): Promise {
+ const connection = connectionRef.current;
+ if (!connection) throw new Error("Realtime connection is not available");
+
+ if (connection.state === HubConnectionState.Disconnected) {
+ await connection.start();
+ }
+
+ // Wait out an in-flight (re)connect instead of failing the invoke.
+ const deadline = Date.now() + 10_000;
+ while (connection.state !== HubConnectionState.Connected && Date.now() < deadline) {
+ await new Promise((resolve) => setTimeout(resolve, 100));
+ }
+ }
+
+ return {children} ;
+}
diff --git a/web/src/realtime/events.ts b/web/src/realtime/events.ts
new file mode 100644
index 0000000..1be7726
--- /dev/null
+++ b/web/src/realtime/events.ts
@@ -0,0 +1,30 @@
+import type { PeerTyping, ReadReceipt, RefreshUsersList } from "@/api/types";
+
+// Transient hub signals that shouldn't live in the query cache: thread
+// components subscribe directly (typing dots, presence, seen ticks).
+type EventMap = {
+ peerTyping: PeerTyping;
+ readReceipt: ReadReceipt;
+ refreshUsersList: RefreshUsersList & { roomId?: string };
+ reconnected: void;
+};
+
+type Handler = (payload: T) => void;
+
+const handlers: { [K in keyof EventMap]: Set> } = {
+ peerTyping: new Set(),
+ readReceipt: new Set(),
+ refreshUsersList: new Set(),
+ reconnected: new Set(),
+};
+
+export function on(event: K, handler: Handler): () => void {
+ handlers[event].add(handler);
+ return () => handlers[event].delete(handler);
+}
+
+export function emit(event: K, payload: EventMap[K]): void {
+ for (const handler of handlers[event]) {
+ handler(payload);
+ }
+}
diff --git a/web/src/realtime/toasts.tsx b/web/src/realtime/toasts.tsx
new file mode 100644
index 0000000..851e33e
--- /dev/null
+++ b/web/src/realtime/toasts.tsx
@@ -0,0 +1,63 @@
+import { Heart, MessageCircle } from "lucide-react";
+import { toast } from "sonner";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import type { MatchReceived, MessageNotification } from "@/api/types";
+import { router } from "@/router";
+
+export function MatchToast({ toastId, match }: { toastId: string | number; match: MatchReceived }) {
+ return (
+
+
+
+ {match.user.userName[0]?.toUpperCase()}
+
+
+
+
+
+
It's a match!
+
You and {match.user.userName} liked each other.
+
+
{
+ toast.dismiss(toastId);
+ void router.navigate(`/messages/${match.roomId}`);
+ }}
+ >
+ Say hi
+
+
{
+ toast.dismiss(toastId);
+ void router.navigate(`/messages/${notification.roomId}`);
+ }}
+ >
+
+
+
+ {notification.senderUserName}
+
+ {notification.text ?? "Sent a photo"}
+
+
+
+ );
+}
diff --git a/web/src/router.tsx b/web/src/router.tsx
new file mode 100644
index 0000000..ceb24c3
--- /dev/null
+++ b/web/src/router.tsx
@@ -0,0 +1,51 @@
+import { createBrowserRouter, Navigate } from "react-router";
+import AppShell from "@/components/app-shell";
+import { AdminGuard, AuthGuard, NoAuthGuard } from "@/components/guards";
+import DashboardPage from "@/features/admin/dashboard-page";
+import UsersPage from "@/features/admin/users-page";
+import LoginPage from "@/features/auth/login-page";
+import RegisterPage from "@/features/auth/register-page";
+import ResetPage from "@/features/auth/reset-page";
+import VerifyPage from "@/features/auth/verify-page";
+import DiscoverPage from "@/features/discover/discover-page";
+import LandingPage from "@/features/landing/landing-page";
+import MessagesPage from "@/features/messages/messages-page";
+import ProfilePage from "@/features/profile/profile-page";
+
+// Exported instance (not just JSX) so non-component code — e.g. toast
+// actions — can navigate via router.navigate().
+export const router = createBrowserRouter([
+ {
+ element: (key: string): T | null {
+ try {
+ const raw = localStorage.getItem(key);
+ return raw ? (JSON.parse(raw) as T) : null;
+ } catch {
+ return null;
+ }
+}
+
+export const useAuthStore = create()((set) => ({
+ user: read(AUTH_KEY),
+ location: read(LOCATION_KEY),
+
+ login: (data) => {
+ localStorage.setItem(AUTH_KEY, JSON.stringify(data));
+ const location = { latitude: data.latitude, longitude: data.longitude };
+ localStorage.setItem(LOCATION_KEY, JSON.stringify(location));
+ set({ user: data, location });
+ },
+
+ logout: () => {
+ localStorage.removeItem(AUTH_KEY);
+ localStorage.removeItem(LOCATION_KEY);
+ set({ user: null, location: null });
+ },
+
+ patchToken: (token) =>
+ set((state) => {
+ if (!state.user) return state;
+ const user = { ...state.user, token };
+ localStorage.setItem(AUTH_KEY, JSON.stringify(user));
+ return { user };
+ }),
+
+ setLocation: (location) => {
+ localStorage.setItem(LOCATION_KEY, JSON.stringify(location));
+ set({ location });
+ },
+}));
+
+export const isLogged = (state: { user: LoginResponse | null }) => !!state.user?.token;
+
+/** Non-hook accessors for the axios/SignalR layers. */
+export function currentToken(): string | undefined {
+ return useAuthStore.getState().user?.token;
+}
+
+export function currentUserId(): string | undefined {
+ return useAuthStore.getState().user?.id;
+}
diff --git a/web/src/stores/preferences.ts b/web/src/stores/preferences.ts
new file mode 100644
index 0000000..5fd98f2
--- /dev/null
+++ b/web/src/stores/preferences.ts
@@ -0,0 +1,33 @@
+import { create } from "zustand";
+import { persist, createJSONStorage } from "zustand/middleware";
+
+export interface Preferences {
+ maxAge: number;
+ maxDistance: number;
+ aroundTheWorld: boolean;
+ gender: number; // -1 = all
+}
+
+interface PreferencesState extends Preferences {
+ set: (patch: Partial) => void;
+}
+
+export const defaultPreferences: Preferences = {
+ maxAge: 100,
+ maxDistance: 600,
+ aroundTheWorld: false,
+ gender: -1,
+};
+
+export const usePreferencesStore = create()(
+ persist(
+ (set) => ({
+ ...defaultPreferences,
+ set: (patch) => set(patch),
+ }),
+ {
+ name: "preferences",
+ storage: createJSONStorage(() => localStorage),
+ },
+ ),
+);
diff --git a/web/tsconfig.app.json b/web/tsconfig.app.json
new file mode 100644
index 0000000..32f1723
--- /dev/null
+++ b/web/tsconfig.app.json
@@ -0,0 +1,29 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "target": "es2023",
+ "lib": ["ES2023", "DOM"],
+ "module": "esnext",
+ "types": ["vite/client"],
+ "paths": {
+ "@/*": ["./src/*"]
+ },
+ "allowArbitraryExtensions": true,
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"]
+}
diff --git a/web/tsconfig.json b/web/tsconfig.json
new file mode 100644
index 0000000..c36d52a
--- /dev/null
+++ b/web/tsconfig.json
@@ -0,0 +1,12 @@
+{
+ "files": [],
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ],
+ "compilerOptions": {
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ }
+}
diff --git a/web/tsconfig.node.json b/web/tsconfig.node.json
new file mode 100644
index 0000000..8455dcb
--- /dev/null
+++ b/web/tsconfig.node.json
@@ -0,0 +1,23 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "target": "es2023",
+ "lib": ["ES2023"],
+ "types": ["node"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "module": "nodenext",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/web/vite.config.ts b/web/vite.config.ts
new file mode 100644
index 0000000..b2fcb18
--- /dev/null
+++ b/web/vite.config.ts
@@ -0,0 +1,23 @@
+import path from "node:path";
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+// Port 3000 is load-bearing: the gateway CORS policy and the JWT
+// issuer/audience are configured for http://localhost:3000.
+export default defineConfig({
+ plugins: [react(), tailwindcss()],
+ resolve: {
+ alias: {
+ "@": path.resolve(__dirname, "./src"),
+ },
+ },
+ server: {
+ port: 3000,
+ strictPort: true,
+ },
+ preview: {
+ port: 3000,
+ strictPort: true,
+ },
+});
-