+
+ )
+}
diff --git a/apps/web/src/components/auth/password-input.tsx b/apps/web/src/components/auth/password-input.tsx
new file mode 100644
index 0000000..53e6c72
--- /dev/null
+++ b/apps/web/src/components/auth/password-input.tsx
@@ -0,0 +1,34 @@
+import {
+ InputGroup,
+ InputGroupAddon,
+ InputGroupButton,
+ InputGroupInput,
+} from "@repo/ui/components/input-group"
+import { Eye, EyeOff } from "lucide-react"
+import { type ComponentProps, useState } from "react"
+
+type PasswordInputProps = Omit
+ {/* Branding */}
+
+
+ 
+
+ Townhall
+
+
+
+ {children}
+
+
+ Townhall
+
+
+ {step === "username" && (
+ <>
+
+
+ Choose a username
+
+
+ Pick a unique username for your Townhall identity.
+
+
+
+
+
+ )}
+
{step === "welcome" && (
<>
diff --git a/apps/web/src/components/settings/notification-settings.tsx b/apps/web/src/components/settings/notification-settings.tsx
new file mode 100644
index 0000000..14250d2
--- /dev/null
+++ b/apps/web/src/components/settings/notification-settings.tsx
@@ -0,0 +1,171 @@
+import { Button } from "@repo/ui/components/button"
+import { Label } from "@repo/ui/components/label"
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@repo/ui/components/select"
+import { Separator } from "@repo/ui/components/separator"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
+import { Bell, Loader2 } from "lucide-react"
+import { useEffect, useState } from "react"
+import { toast } from "sonner"
+import { apiClient } from "@/lib/api-client"
+import {
+ getNotificationPermission,
+ requestNotificationPermission,
+} from "@/lib/notification-dispatcher"
+
+type NotificationSettings = {
+ desktopNotifications: "all_messages" | "mentions_only" | "nothing"
+ dmNotifications: "all_messages" | "nothing"
+}
+
+const DESKTOP_NOTIFICATION_OPTIONS = [
+ { value: "all_messages", label: "All Messages" },
+ { value: "mentions_only", label: "Mentions Only" },
+ { value: "nothing", label: "Nothing" },
+] as const
+
+const DM_NOTIFICATION_OPTIONS = [
+ { value: "all_messages", label: "All Messages" },
+ { value: "nothing", label: "Nothing" },
+] as const
+
+export function NotificationSettings() {
+ const queryClient = useQueryClient()
+ const [permissionState, setPermissionState] = useState<
+ "granted" | "denied" | "default"
+ >("default")
+
+ useEffect(() => {
+ getNotificationPermission().then(setPermissionState)
+ }, [])
+
+ const { data: settings, isPending } = useQuery({
+ queryKey: ["notification-settings"],
+ queryFn: async () => {
+ const res = await apiClient.v1["notification-settings"].$get()
+ if (!res.ok) throw new Error("Failed to fetch notification settings")
+ return res.json() as Promise
+ },
+ })
+
+ const { mutate: updateSettings } = useMutation({
+ mutationFn: async (update: Partial) => {
+ const res = await apiClient.v1["notification-settings"].$patch({
+ json: update,
+ })
+ if (!res.ok) throw new Error("Failed to update notification settings")
+ return res.json() as Promise
+ },
+ onSuccess: (data) => {
+ queryClient.setQueryData(["notification-settings"], data)
+ },
+ onError: () => {
+ toast.error("Failed to update notification setting")
+ },
+ })
+
+ const handleChange = (key: keyof NotificationSettings, value: string) => {
+ updateSettings({ [key]: value })
+ }
+
+ const handleRequestPermission = async () => {
+ const granted = await requestNotificationPermission()
+ setPermissionState(granted ? "granted" : "denied")
+ if (granted) {
+ toast.success("Notifications enabled")
+ } else {
+ toast.error("Notification permission denied")
+ }
+ }
+
+ if (isPending) {
+ return (
+ void
}) {
+ const { getUnreadCount, getMentionCount } = useUnread()
+ const unreadCount = active ? 0 : getUnreadCount(channelId)
+ const mentionCount = active ? 0 : getMentionCount(channelId)
+ const hasUnread = unreadCount > 0
+
const preview =
isGroupDM && lastMessageAuthor && lastMessage
? `${lastMessageAuthor}: ${lastMessage}`
@@ -118,18 +127,26 @@ function DMItem({
onClick={onClick}
className={cn(
"group relative flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 hover:bg-foreground/[0.06]",
- active
- ? "bg-foreground/[0.06] text-foreground"
- : "text-muted-foreground"
+ active && "bg-foreground/[0.06] text-foreground",
+ !active && hasUnread && "text-foreground",
+ !active && !hasUnread && "text-muted-foreground"
)}
>
+ {!active && hasUnread && (
+
+ )}
{isGroupDM ? (
+ markChannelRead: (channelId: string, lastReadMessageId?: string) => void
+}
+
+const UnreadContext = createContext({
+ stateMap: new Map(),
+ markChannelRead: () => {},
+})
+
+export function useUnread() {
+ const { stateMap, markChannelRead } = useContext(UnreadContext)
+
+ const getUnreadCount = useCallback(
+ (channelId: string) => stateMap.get(channelId)?.unreadCount ?? 0,
+ [stateMap]
+ )
+
+ const getMentionCount = useCallback(
+ (channelId: string) => stateMap.get(channelId)?.mentionCount ?? 0,
+ [stateMap]
+ )
+
+ return { getUnreadCount, getMentionCount, markChannelRead }
+}
+
+export function UnreadProvider({ children }: { children: ReactNode }) {
+ const socket = useSocket()
+ const [stateMap, setStateMap] = useState>(
+ () => new Map()
+ )
+
+ useEffect(() => {
+ if (!socket) return
+
+ const onBootstrap = (payload: {
+ readStates: Array<{
+ channelId: string
+ unreadCount: number
+ mentionCount: number
+ lastReadMessageId: string | null
+ }>
+ }) => {
+ const newMap = new Map()
+ for (const rs of payload.readStates) {
+ newMap.set(rs.channelId, {
+ unreadCount: rs.unreadCount,
+ mentionCount: rs.mentionCount,
+ })
+ }
+ setStateMap(newMap)
+ }
+
+ const onUnread = (payload: {
+ channelId: string
+ unreadCountDelta: number
+ }) => {
+ setStateMap((prev) => {
+ const next = new Map(prev)
+ const current = next.get(payload.channelId) ?? {
+ unreadCount: 0,
+ mentionCount: 0,
+ }
+ next.set(payload.channelId, {
+ ...current,
+ unreadCount: current.unreadCount + payload.unreadCountDelta,
+ })
+ return next
+ })
+ }
+
+ const onMention = (payload: { channelId: string }) => {
+ setStateMap((prev) => {
+ const next = new Map(prev)
+ const current = next.get(payload.channelId) ?? {
+ unreadCount: 0,
+ mentionCount: 0,
+ }
+ next.set(payload.channelId, {
+ ...current,
+ mentionCount: current.mentionCount + 1,
+ })
+ return next
+ })
+ }
+
+ const onReadState = (payload: {
+ channelId: string
+ unreadCount: number
+ mentionCount: number
+ }) => {
+ setStateMap((prev) => {
+ const next = new Map(prev)
+ if (payload.unreadCount === 0 && payload.mentionCount === 0) {
+ next.delete(payload.channelId)
+ } else {
+ next.set(payload.channelId, {
+ unreadCount: payload.unreadCount,
+ mentionCount: payload.mentionCount,
+ })
+ }
+ return next
+ })
+ }
+
+ socket.on("notification:bootstrap", onBootstrap)
+ socket.on("notification:unread", onUnread)
+ socket.on("notification:mention", onMention)
+ socket.on("channel:read-state", onReadState)
+
+ return () => {
+ socket.off("notification:bootstrap", onBootstrap)
+ socket.off("notification:unread", onUnread)
+ socket.off("notification:mention", onMention)
+ socket.off("channel:read-state", onReadState)
+ }
+ }, [socket])
+
+ const markChannelRead = useCallback(
+ (channelId: string, lastReadMessageId?: string) => {
+ if (!socket) return
+
+ let snapshot: UnreadState | undefined
+ setStateMap((prev) => {
+ const next = new Map(prev)
+ snapshot = prev.get(channelId)
+ next.delete(channelId)
+ return next
+ })
+
+ socket.emit(
+ "channel:mark-read",
+ { channelId, lastReadMessageId },
+ (res: { ok: boolean }) => {
+ if (!res.ok && snapshot) {
+ const restore = snapshot
+ setStateMap((prev) => {
+ const next = new Map(prev)
+ next.set(channelId, restore)
+ return next
+ })
+ }
+ }
+ )
+ },
+ [socket]
+ )
+
+ return (
+
+ {children}
+
+ )
+}
diff --git a/apps/web/src/hooks/use-auto-mark-read.ts b/apps/web/src/hooks/use-auto-mark-read.ts
new file mode 100644
index 0000000..6b6c88f
--- /dev/null
+++ b/apps/web/src/hooks/use-auto-mark-read.ts
@@ -0,0 +1,69 @@
+import type { RealtimeMessage } from "@repo/realtime-types"
+import { useEffect, useRef } from "react"
+import { useSocket } from "@/context/socket-context"
+import { useUnread } from "@/context/unread-context"
+
+const DEBOUNCE_MS = 1000
+
+export function useAutoMarkRead(channelId: string | undefined) {
+ const { markChannelRead } = useUnread()
+ const socket = useSocket()
+ const timerRef = useRef | null>(null)
+ const channelIdRef = useRef(channelId)
+ channelIdRef.current = channelId
+
+ const debouncedMarkRead = () => {
+ if (!channelIdRef.current) return
+ if (timerRef.current) clearTimeout(timerRef.current)
+ timerRef.current = setTimeout(() => {
+ if (channelIdRef.current) {
+ markChannelRead(channelIdRef.current)
+ }
+ }, DEBOUNCE_MS)
+ }
+
+ // Mark read on mount
+ useEffect(() => {
+ if (!channelId) return
+ if (document.visibilityState !== "visible") return
+ debouncedMarkRead()
+ return () => {
+ if (timerRef.current) clearTimeout(timerRef.current)
+ }
+ }, [channelId])
+
+ // Mark read when tab becomes visible
+ useEffect(() => {
+ if (!channelId) return
+
+ const onVisibilityChange = () => {
+ if (document.visibilityState === "visible") {
+ debouncedMarkRead()
+ }
+ }
+
+ document.addEventListener("visibilitychange", onVisibilityChange)
+ return () => {
+ document.removeEventListener("visibilitychange", onVisibilityChange)
+ }
+ }, [channelId])
+
+ // Mark read when new messages arrive while focused
+ useEffect(() => {
+ if (!socket || !channelId) return
+
+ const onMessageCreated = (message: RealtimeMessage) => {
+ if (
+ message.channelId === channelIdRef.current &&
+ document.visibilityState === "visible"
+ ) {
+ debouncedMarkRead()
+ }
+ }
+
+ socket.on("message:created", onMessageCreated)
+ return () => {
+ socket.off("message:created", onMessageCreated)
+ }
+ }, [socket, channelId])
+}
diff --git a/apps/web/src/hooks/use-browser-notifications.ts b/apps/web/src/hooks/use-browser-notifications.ts
new file mode 100644
index 0000000..091a3fb
--- /dev/null
+++ b/apps/web/src/hooks/use-browser-notifications.ts
@@ -0,0 +1,83 @@
+import type {
+ MentionNotification,
+ UnreadNotification,
+} from "@repo/realtime-types"
+import { useQuery } from "@tanstack/react-query"
+import { useEffect } from "react"
+import { useSocket } from "@/context/socket-context"
+import { apiClient } from "@/lib/api-client"
+import { showNotification } from "@/lib/notification-dispatcher"
+
+type NotificationSettings = {
+ desktopNotifications: "all_messages" | "mentions_only" | "nothing"
+ dmNotifications: "all_messages" | "nothing"
+}
+
+/**
+ * Fires browser/desktop notifications for incoming messages and mentions
+ * based on user's notification preferences.
+ * Only fires when the tab is not focused.
+ */
+export function useBrowserNotifications() {
+ const socket = useSocket()
+ const { data: settings } = useQuery({
+ queryKey: ["notification-settings"],
+ queryFn: async () => {
+ const res = await apiClient.v1["notification-settings"].$get()
+ if (!res.ok) throw new Error("Failed to fetch notification settings")
+ return res.json() as Promise
+ },
+ })
+
+ useEffect(() => {
+ if (!socket) return
+
+ const onMention = (payload: MentionNotification) => {
+ if (document.visibilityState === "visible") return
+ if (!settings) return
+ if (settings.desktopNotifications === "nothing") return
+
+ // For DM mentions, check dmNotifications setting
+ if (payload.guildId === null && settings.dmNotifications === "nothing") {
+ return
+ }
+
+ const mentionType =
+ payload.type === "everyone_mention" ? "@everyone" : "a mention"
+
+ showNotification("New Mention", `You received ${mentionType}`, {
+ tag: `mention-${payload.messageId}`,
+ })
+ }
+
+ const onUnread = (payload: UnreadNotification) => {
+ if (document.visibilityState === "visible") return
+ if (!settings) return
+ if (settings.desktopNotifications !== "all_messages") return
+
+ // For DMs, check dmNotifications setting
+ if (payload.guildId === null && settings.dmNotifications === "nothing") {
+ return
+ }
+
+ const title = payload.authorName
+ const body = payload.contentPreview
+ ? payload.channelName
+ ? `#${payload.channelName}: ${payload.contentPreview}`
+ : payload.contentPreview
+ : "Sent an attachment"
+
+ showNotification(title, body, {
+ tag: `unread-${payload.channelId}`,
+ })
+ }
+
+ socket.on("notification:mention", onMention)
+ socket.on("notification:unread", onUnread)
+
+ return () => {
+ socket.off("notification:mention", onMention)
+ socket.off("notification:unread", onUnread)
+ }
+ }, [socket, settings])
+}
diff --git a/apps/web/src/lib/notification-dispatcher.ts b/apps/web/src/lib/notification-dispatcher.ts
new file mode 100644
index 0000000..ed04d7d
--- /dev/null
+++ b/apps/web/src/lib/notification-dispatcher.ts
@@ -0,0 +1,95 @@
+const isTauri = () =>
+ typeof window !== "undefined" && "__TAURI_INTERNALS__" in window
+
+export async function requestNotificationPermission(): Promise {
+ if (isTauri()) {
+ try {
+ const { requestPermission, isPermissionGranted } = await import(
+ "@tauri-apps/plugin-notification"
+ )
+ if (await isPermissionGranted()) return true
+ const result = await requestPermission()
+ return result === "granted"
+ } catch {
+ return false
+ }
+ }
+
+ if (!("Notification" in window)) return false
+ if (Notification.permission === "granted") return true
+ if (Notification.permission === "denied") return false
+
+ const result = await Notification.requestPermission()
+ return result === "granted"
+}
+
+export function getNotificationPermissionSync():
+ | "granted"
+ | "denied"
+ | "default" {
+ if (isTauri()) return "default"
+ if (!("Notification" in window)) return "denied"
+ return Notification.permission
+}
+
+export async function getNotificationPermission(): Promise<
+ "granted" | "denied" | "default"
+> {
+ if (isTauri()) {
+ try {
+ const { isPermissionGranted } = await import(
+ "@tauri-apps/plugin-notification"
+ )
+ return (await isPermissionGranted()) ? "granted" : "default"
+ } catch {
+ return "denied"
+ }
+ }
+
+ if (!("Notification" in window)) return "denied"
+ return Notification.permission
+}
+
+export async function showNotification(
+ title: string,
+ body: string,
+ options?: {
+ tag?: string
+ onClick?: () => void
+ }
+) {
+ if (isTauri()) {
+ try {
+ const { sendNotification } = await import(
+ "@tauri-apps/plugin-notification"
+ )
+ // Tauri notifications don't support click callbacks natively
+ sendNotification({
+ title,
+ body,
+ ...(options?.tag && { tag: options.tag }),
+ })
+ } catch {
+ // Tauri notification plugin not available
+ }
+ return
+ }
+
+ if (!("Notification" in window) || Notification.permission !== "granted") {
+ return
+ }
+
+ const notification = new Notification(title, {
+ body,
+ tag: options?.tag,
+ icon: "/favicon.ico",
+ })
+
+ if (options?.onClick) {
+ notification.onclick = () => {
+ window.focus()
+ options.onClick?.()
+ notification.close()
+ }
+ }
+}
diff --git a/apps/web/src/routes/_authenticated.tsx b/apps/web/src/routes/_authenticated.tsx
index c2d92b6..2c1d43f 100644
--- a/apps/web/src/routes/_authenticated.tsx
+++ b/apps/web/src/routes/_authenticated.tsx
@@ -12,6 +12,13 @@ import { SettingsDialog } from "../components/settings/settings-dialog"
import { Sidebar } from "../components/sidebar"
import { SettingsProvider } from "../context/settings-context"
import { SocketProvider } from "../context/socket-context"
+import { UnreadProvider } from "../context/unread-context"
+import { useBrowserNotifications } from "../hooks/use-browser-notifications"
+
+function BrowserNotifications() {
+ useBrowserNotifications()
+ return null
+}
const LAST_PATH_KEY = "townhall:last-path"
@@ -68,15 +75,18 @@ function AuthenticatedLayout() {
return (
-
-
+
+
+
+
)
}
diff --git a/apps/web/src/routes/_authenticated/$guildSlug/$channelId.tsx b/apps/web/src/routes/_authenticated/$guildSlug/$channelId.tsx
index 745859d..54389ff 100644
--- a/apps/web/src/routes/_authenticated/$guildSlug/$channelId.tsx
+++ b/apps/web/src/routes/_authenticated/$guildSlug/$channelId.tsx
@@ -16,6 +16,7 @@ import { MessageList } from "@/components/chat/message-list"
import { TypingIndicator } from "@/components/chat/typing-indicator"
import { useRightSidebar } from "@/components/sidebar/right-panel/right-sidebar-context"
import { useSocket } from "@/context/socket-context"
+import { useAutoMarkRead } from "@/hooks/use-auto-mark-read"
import { useBlockedUserIds } from "@/hooks/use-blocked-users"
import { useFileUpload } from "@/hooks/use-file-upload"
import { useMessageDeletion } from "@/hooks/use-message-deletion"
@@ -53,8 +54,10 @@ function ChannelView() {
const { msgId } = Route.useSearch()
const navigate = Route.useNavigate()
const socket = useSocket()
+ useAutoMarkRead(channelId)
const queryClient = useQueryClient()
- const { view, setView, clearView } = useRightSidebar()
+ const { view, setView, clearView, isCollapsed, toggleCollapsed } =
+ useRightSidebar()
const { data: session } = authClient.useSession()
const currentUserId = session?.user.id
const blockedUserIds = useBlockedUserIds()
@@ -192,12 +195,15 @@ function ChannelView() {
})
const togglePinnedMessages = useCallback(() => {
- if (view?.type === "pinned-messages") {
+ if (view?.type === "pinned-messages" && !isCollapsed) {
setView({ type: "guild-members", guildSlug, channelId })
} else {
setView({ type: "pinned-messages", guildSlug, channelId })
+ if (isCollapsed) {
+ toggleCollapsed()
+ }
}
- }, [view, setView, guildSlug, channelId])
+ }, [view, setView, guildSlug, channelId, isCollapsed, toggleCollapsed])
const { replyingTo, setReplyingTo, clearReply } = useReplyState()
diff --git a/apps/web/src/routes/_authenticated/dms/$dmId.tsx b/apps/web/src/routes/_authenticated/dms/$dmId.tsx
index c0b463e..e6414cd 100644
--- a/apps/web/src/routes/_authenticated/dms/$dmId.tsx
+++ b/apps/web/src/routes/_authenticated/dms/$dmId.tsx
@@ -10,6 +10,7 @@ import { ChatHeader } from "@/components/chat/header"
import { MessageList } from "@/components/chat/message-list"
import { TypingIndicator } from "@/components/chat/typing-indicator"
import { useSocket } from "@/context/socket-context"
+import { useAutoMarkRead } from "@/hooks/use-auto-mark-read"
import { useBlockedUserIds } from "@/hooks/use-blocked-users"
import { useFileUpload } from "@/hooks/use-file-upload"
import { useMessageDeletion } from "@/hooks/use-message-deletion"
@@ -46,6 +47,7 @@ function DMConversation() {
const { msgId } = Route.useSearch()
const navigate = Route.useNavigate()
const socket = useSocket()
+ useAutoMarkRead(dmId)
const queryClient = useQueryClient()
const { data: session } = authClient.useSession()
const currentUserId = session?.user.id
diff --git a/apps/web/src/routes/check-email.tsx b/apps/web/src/routes/check-email.tsx
new file mode 100644
index 0000000..398555c
--- /dev/null
+++ b/apps/web/src/routes/check-email.tsx
@@ -0,0 +1,96 @@
+import { authClient } from "@repo/auth/client"
+import { Button } from "@repo/ui/components/button"
+import {
+ Card,
+ CardContent,
+ CardFooter,
+ CardHeader,
+} from "@repo/ui/components/card"
+import { useMutation } from "@tanstack/react-query"
+import { createFileRoute, Link } from "@tanstack/react-router"
+import { Loader2, Mail, MailCheck } from "lucide-react"
+import { AuthLayout } from "../components/auth/auth-layout"
+
+export const Route = createFileRoute("/check-email")({
+ component: CheckEmailPage,
+ validateSearch: (search: Record) => ({
+ email: (search.email as string) ?? "",
+ }),
+})
+
+function CheckEmailPage() {
+ const { email } = Route.useSearch()
+
+ const {
+ mutate: resendEmail,
+ isPending,
+ isSuccess,
+ } = useMutation({
+ mutationFn: async () => {
+ if (!email) return
+ const { error } = await authClient.sendVerificationEmail({
+ email,
+ callbackURL: `${window.location.origin}/`,
+ })
+ if (error)
+ throw new Error(error.message ?? "Failed to resend verification email")
+ },
+ })
+
+ return (
+
+
+
+
+
+
+
+ {email && (
+
+ )}
+
+ Back to sign in
+
+
+
+
+ )
+}
diff --git a/apps/web/src/routes/forgot-password.tsx b/apps/web/src/routes/forgot-password.tsx
new file mode 100644
index 0000000..67d5f40
--- /dev/null
+++ b/apps/web/src/routes/forgot-password.tsx
@@ -0,0 +1,134 @@
+import { authClient } from "@repo/auth/client"
+import { Button } from "@repo/ui/components/button"
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from "@repo/ui/components/card"
+import { Input } from "@repo/ui/components/input"
+import { Label } from "@repo/ui/components/label"
+import { useMutation } from "@tanstack/react-query"
+import { createFileRoute, Link } from "@tanstack/react-router"
+import { AlertCircle, ArrowLeft, Loader2, MailCheck } from "lucide-react"
+import { type FormEvent, useState } from "react"
+import { AuthLayout } from "../components/auth/auth-layout"
+
+export const Route = createFileRoute("/forgot-password")({
+ component: ForgotPasswordPage,
+})
+
+function ForgotPasswordPage() {
+ const [email, setEmail] = useState("")
+
+ const {
+ mutate: sendReset,
+ isPending,
+ isSuccess,
+ error,
+ } = useMutation({
+ mutationFn: async () => {
+ const { error } = await authClient.requestPasswordReset({
+ email,
+ redirectTo: "/reset-password",
+ })
+ if (error) throw new Error(error.message ?? "Failed to send reset email")
+ },
+ })
+
+ if (isSuccess) {
+ return (
+
+
+
+
+
+
+
+
+
+ )
+ }
+
+ return (
+
+
+
+
+ Reset password
+
+
+ Enter your email and we'll send you a reset link
+
+
+
+
+
+ )
+}
diff --git a/apps/web/src/routes/login.tsx b/apps/web/src/routes/login.tsx
index 38bf79a..37b4d67 100644
--- a/apps/web/src/routes/login.tsx
+++ b/apps/web/src/routes/login.tsx
@@ -4,7 +4,6 @@ import {
Card,
CardContent,
CardDescription,
- CardFooter,
CardHeader,
CardTitle,
} from "@repo/ui/components/card"
@@ -12,7 +11,9 @@ import { Input } from "@repo/ui/components/input"
import { Label } from "@repo/ui/components/label"
import { useMutation } from "@tanstack/react-query"
import { createFileRoute, Link, useNavigate } from "@tanstack/react-router"
+import { AlertCircle, Loader2 } from "lucide-react"
import { type FormEvent, useEffect, useState } from "react"
+import { PasswordInput } from "../components/auth/password-input"
export const Route = createFileRoute("/login")({
component: LoginPage,
@@ -36,66 +37,122 @@ function LoginPage() {
error,
} = useMutation({
mutationFn: async () => {
- const { error } = await authClient.signIn.email({ email, password })
- if (error) throw new Error(error.message ?? "Failed to sign in")
+ const { error } = await authClient.signIn.email({
+ email,
+ password,
+ callbackURL: `${window.location.origin}/`,
+ })
+ if (error) {
+ // 403 = email not verified — better-auth re-sends the verification email automatically
+ if (error.status === 403) {
+ navigate({ to: "/check-email", search: { email } })
+ return { needsVerification: true }
+ }
+ throw new Error(error.message ?? "Failed to sign in")
+ }
+ return { needsVerification: false }
+ },
+ onSuccess: (result) => {
+ if (!result?.needsVerification) {
+ navigate({ to: "/" })
+ }
},
- onSuccess: () => navigate({ to: "/" }),
})
return (
-
+
+ )
+ }
+
+ return (
+
+
+ )
+}
diff --git a/apps/web/src/components/settings/settings-dialog.tsx b/apps/web/src/components/settings/settings-dialog.tsx
index f465eb0..8c1ff0a 100644
--- a/apps/web/src/components/settings/settings-dialog.tsx
+++ b/apps/web/src/components/settings/settings-dialog.tsx
@@ -38,6 +38,7 @@ import {
import { useMemo, useState } from "react"
import { useSettings } from "@/context/settings-context"
import { MyAccountSettings } from "./my-account-settings"
+import { NotificationSettings } from "./notification-settings"
import { PrivacySafetySettings } from "./privacy-safety-settings"
interface SettingsNav {
@@ -126,6 +127,8 @@ export function SettingsDialog() {
+
+
+ Notifications
++ Control how and when you receive notifications. +
+
+
+ )}
+
+
+
+ {permissionState === "default" && (
+
+ )}
+ Enable Desktop Notifications
++ {permissionState === "denied" + ? "Notifications are blocked. Please enable them in your browser settings." + : "Allow Townhall to send you desktop notifications."} +
+
+
+
+
+
+
+ + Choose what triggers a desktop notification. +
+ +
+
+
+ + Choose whether you get notified for new direct messages. +
+ +
{activeItem === "My Account" ? (
- e.stopPropagation()}
- className={cn(
- "ml-auto flex size-5 items-center justify-center rounded opacity-0 hover:bg-foreground/10 group-hover:opacity-100",
- menuOpen && "opacity-100"
- )}
- >
-
-
- {
- e.stopPropagation()
- setMenuOpen(false)
- setEditOpen(true)
- }}
+
{canManage && (
+ {mentionCount > 0 && (
+
+ {mentionCount}
+
+ )}
+ {canManage && (
+
+ e.stopPropagation()}
+ className={cn(
+ "flex size-5 items-center justify-center rounded opacity-0 hover:bg-foreground/10 group-hover:opacity-100",
+ menuOpen && "opacity-100"
+ )}
>
- Edit Channel
-
- {
- e.stopPropagation()
- navigator.clipboard.writeText(ch.id)
- setMenuOpen(false)
- }}
- >
- Copy Channel ID
-
- {canDelete && (
- <>
- {
- e.stopPropagation()
- setMenuOpen(false)
- setDeleteOpen(true)
- }}
- className="text-destructive focus:text-destructive"
- >
- Delete Channel
-
-
- )}
-
-
- )}
+
+ {
+ e.stopPropagation()
+ setMenuOpen(false)
+ setEditOpen(true)
+ }}
+ >
+ Edit Channel
+
+ {
+ e.stopPropagation()
+ navigator.clipboard.writeText(ch.id)
+ setMenuOpen(false)
+ }}
+ >
+ Copy Channel ID
+
+ {canDelete && (
+ <>
+ {
+ e.stopPropagation()
+ setMenuOpen(false)
+ setDeleteOpen(true)
+ }}
+ className="text-destructive focus:text-destructive"
+ >
+ Delete Channel
+
+
+ )}
+
+
+ )}
+
-
+ {mentionCount > 0 && (
+
+ {mentionCount}
+
+ )}
)
}
diff --git a/apps/web/src/context/unread-context.tsx b/apps/web/src/context/unread-context.tsx
new file mode 100644
index 0000000..921e7af
--- /dev/null
+++ b/apps/web/src/context/unread-context.tsx
@@ -0,0 +1,169 @@
+import type { ReactNode } from "react"
+import {
+ createContext,
+ useCallback,
+ useContext,
+ useEffect,
+ useState,
+} from "react"
+import { useSocket } from "./socket-context"
+
+type UnreadState = {
+ unreadCount: number
+ mentionCount: number
+}
+
+type UnreadContextValue = {
+ stateMap: Map
+
)}
{name}
{preview && (
@@ -138,6 +155,11 @@ function DMItem({
-
-
-
-
+
+
+
+
+
+
+
+ + Check your email +
++ We sent a verification link to +
+ {email &&{email}
} ++ Click the link in the email to verify your account. If you don't see + it, check your spam folder. +
+
+
+
+
+ + Check your email +
++ If an account exists for{" "} + {email}, we + sent a password reset link. +
+
-
-
- Login
-
- Enter your credentials to access your account
-
-
-