\n {/* Header */}\n

Settings

\n \n ×\n \n

\n\n {/* Tabs */}\n

\n setActiveTab(\"transit\")}\n className={`py-3 border-b-2 text-sm font-medium ${\n activeTab === \"transit\"\n ? \"border-blue-500 text-blue-600\"\n : \"border-transparent text-gray-500 hover:text-gray-700\"\n }`}\n >\n Transit Destinations\n \n setActiveTab(\"notifications\")}\n className={`py-3 border-b-2 text-sm font-medium ${\n activeTab === \"notifications\"\n ? \"border-blue-500 text-blue-600\"\n : \"border-transparent text-gray-500 hover:text-gray-700\"\n }`}\n >\n Notifications\n \n setActiveTab(\"group\")}\n className={`py-3 border-b-2 text-sm font-medium ${\n activeTab === \"group\"\n ? \"border-blue-500 text-blue-600\"\n : \"border-transparent text-gray-500 hover:text-gray-700\"\n }`}\n >\n Group\n \n

\n\n {/* Content */}\n

\n {activeTab === \"transit\" && }\n {activeTab === \"notifications\" && }\n {activeTab === \"group\" && }\n

\n );\n}\n\n// ==================== Transit Preferences Tab ====================\n\nfunction TransitPreferencesTab({ groupId }: { groupId: string }) {\n const [preferences, setPreferences] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n const [showAddForm, setShowAddForm] = useState(false);\n const [error, setError] = useState(\"\");\n\n const fetchPreferences = useCallback(async () => {\n try {\n const response = await fetch(`/api/preferences/transit?group_id=${groupId}&include_inactive=true`);\n const data = await response.json();\n setPreferences(data.preferences || []);\n } catch (err) {\n setError(String(err));\n } finally {\n setIsLoading(false);\n }\n }, [groupId]);\n\n useEffect(() => {\n fetchPreferences();\n }, [fetchPreferences]);\n\n const deletePreference = async (id: string) => {\n if (!confirm(\"Are you sure you want to delete this destination?\")) return;\n \n try {\n await fetch(`/api/preferences/transit/${id}`, { method: \"DELETE\" });\n fetchPreferences();\n } catch (err) {\n setError(String(err));\n }\n };\n\n const toggleActive = async (id: string, isActive: boolean) => {\n try {\n await fetch(`/api/preferences/transit/${id}`, {\n method: \"PUT\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ is_active: !isActive }),\n });\n fetchPreferences();\n } catch (err) {\n setError(String(err));\n }\n };\n\n if (isLoading) {\n return

;\n }\n\n return (\n

Transit Destinations

Calculate commute times from listings to these locations.

\n setShowAddForm(true)}\n className=\"px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm\"\n >\n Add Destination\n \n

\n\n {error && (\n

{error}

\n )}\n\n

\n {preferences.map(pref => (\n \n

\n {pref.name}\n \n {pref.type}\n \n \n via {pref.travel_mode}\n \n

\n {pref.address && (\n

{pref.address}

\n )}\n

\n \n

\n toggleActive(pref.id, pref.is_active)}\n className={`text-xs px-3 py-1 rounded ${\n pref.is_active\n ? \"bg-green-100 text-green-700\"\n : \"bg-gray-100 text-gray-500\"\n }`}\n >\n {pref.is_active ? \"Active\" : \"Inactive\"}\n \n deletePreference(pref.id)}\n className=\"text-red-500 hover:text-red-700 text-sm\"\n >\n Delete\n \n

\n ))}\n \n {preferences.length === 0 && (\n

\n No transit destinations configured. Add one to start calculating commute times.\n

\n )}\n

\n\n {showAddForm && (\n setShowAddForm(false)}\n onCreated={() => {\n setShowAddForm(false);\n fetchPreferences();\n }}\n />\n )}\n

\n );\n}\n\nfunction AddTransitPreferenceForm({ \n groupId, \n onClose, \n onCreated \n}: { \n groupId: string; \n onClose: () => void; \n onCreated: () => void;\n}) {\n const [name, setName] = useState(\"\");\n const [type, setType] = useState(\"custom\");\n const [address, setAddress] = useState(\"\");\n const [travelMode, setTravelMode] = useState(\"transit\");\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(\"\");\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!name.trim()) return;\n\n setIsLoading(true);\n setError(\"\");\n\n try {\n const response = await fetch(\"/api/preferences/transit\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n group_id: groupId,\n name: name.trim(),\n type,\n address: address.trim() || undefined,\n travel_mode: travelMode,\n }),\n });\n\n if (!response.ok) {\n const data = await response.json();\n throw new Error(data.message || \"Failed to create preference\");\n }\n\n onCreated();\n } catch (err) {\n setError(String(err));\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n

Add Transit Destination

\n \n

\n Name\n setName(e.target.value)}\n placeholder=\"e.g., Work, Gym, Grocery Store\"\n className=\"w-full px-3 py-2 border rounded-lg\"\n required\n />\n

\n\n

\n Type\n setType(e.target.value as TransitPreferenceType)}\n className=\"w-full px-3 py-2 border rounded-lg\"\n >\n \n \n \n \n \n

\n\n

\n Address\n setAddress(e.target.value)}\n placeholder=\"e.g., 123 Main St, San Francisco, CA\"\n className=\"w-full px-3 py-2 border rounded-lg\"\n />\n

\n\n

\n Travel Mode\n setTravelMode(e.target.value as TravelMode)}\n className=\"w-full px-3 py-2 border rounded-lg\"\n >\n \n \n \n \n \n

\n\n {error &&

{error}

}\n\n

\n \n Cancel\n \n \n {isLoading ? \"Creating...\" : \"Add\"}\n \n

\n );\n}\n\n// ==================== Notifications Tab ====================\n\nfunction NotificationsTab() {\n const [prefs, setPrefs] = useState(null);\n const [isLoading, setIsLoading] = useState(true);\n const [isSaving, setIsSaving] = useState(false);\n const [error, setError] = useState(\"\");\n\n useEffect(() => {\n fetchPrefs();\n }, []);\n\n const fetchPrefs = async () => {\n try {\n const response = await fetch(\"/api/preferences/notifications\");\n const data = await response.json();\n setPrefs(data.preferences);\n } catch (err) {\n setError(String(err));\n } finally {\n setIsLoading(false);\n }\n };\n\n const updatePref = async (key: keyof NotificationPrefs, value: boolean) => {\n if (!prefs) return;\n \n setIsSaving(true);\n setError(\"\");\n\n try {\n const response = await fetch(\"/api/preferences/notifications\", {\n method: \"PUT\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ [key]: value }),\n });\n\n if (!response.ok) throw new Error(\"Failed to update preferences\");\n\n const data = await response.json();\n setPrefs(data.preferences);\n } catch (err) {\n setError(String(err));\n } finally {\n setIsSaving(false);\n }\n };\n\n if (isLoading) {\n return

;\n }\n\n return (\n

Email Notifications

Choose which notifications you'd like to receive via email.

\n\n {error && (\n

{error}

\n )}\n\n

\n \n

New Listings

Get notified when new listings match your criteria

\n updatePref(\"notify_new_listing\", e.target.checked)}\n disabled={isSaving}\n className=\"w-5 h-5 rounded\"\n />\n \n\n \n

Comment Requests

Get notified when a group member requests your feedback

\n updatePref(\"notify_comment_request\", e.target.checked)}\n disabled={isSaving}\n className=\"w-5 h-5 rounded\"\n />\n \n\n \n

Apply Reminders

Get reminded to submit applications for listings you're interested in

\n updatePref(\"notify_apply_reminder\", e.target.checked)}\n disabled={isSaving}\n className=\"w-5 h-5 rounded\"\n />\n \n

\n );\n}\n\n// ==================== Group Tab ====================\n\nfunction GroupTab({ groupId }: { groupId: string }) {\n const [group, setGroup] = useState(null);\n const [isLoading, setIsLoading] = useState(true);\n const [showInviteCode, setShowInviteCode] = useState(false);\n const [error, setError] = useState(\"\");\n\n useEffect(() => {\n fetchGroup();\n }, [groupId]);\n\n const fetchGroup = async () => {\n try {\n const response = await fetch(`/api/groups/${groupId}`);\n const data = await response.json();\n setGroup(data.group);\n } catch (err) {\n setError(String(err));\n } finally {\n setIsLoading(false);\n }\n };\n\n const regenerateInviteCode = async () => {\n if (!confirm(\"Are you sure you want to generate a new invite code? The old code will no longer work.\")) return;\n \n try {\n const response = await fetch(`/api/groups/${groupId}/regenerate-invite`, { method: \"POST\" });\n const data = await response.json();\n setGroup({ ...group, invite_code: data.invite_code });\n } catch (err) {\n setError(String(err));\n }\n };\n\n const copyInviteCode = () => {\n navigator.clipboard.writeText(group.invite_code);\n alert(\"Invite code copied to clipboard!\");\n };\n\n if (isLoading) {\n return

;\n }\n\n if (!group) {\n return

Failed to load group details.

;\n }\n\n return (\n

\n {/* Group Info */}\n

Group Details

{group.name}

\n\n {error && (\n

{error}

\n )}\n\n {/* Invite Code */}\n

Invite Code

\n setShowInviteCode(!showInviteCode)}\n className=\"text-sm text-blue-600 hover:text-blue-800\"\n >\n {showInviteCode ? \"Hide\" : \"Show\"}\n \n

\n \n {showInviteCode && (\n

\n \n {group.invite_code}\n \n \n Copy\n \n \n Regenerate\n \n

\n )}\n \n

\n Share this code with others to invite them to your group.\n

\n\n {/* Members */}\n

Members ({group.members?.length || 0})

\n {group.members?.map((member: any) => (\n

\n {member.user.avatar_url ? (\n $\"\"$ \n ) : (\n

\n {(member.user.name || member.user.email).charAt(0).toUpperCase()}\n

\n )}\n

\n {member.user.name || member.user.email}\n

\n {member.user.name && (\n

{member.user.email}

\n )}\n

\n \n \n {member.role}\n \n

\n ))}\n

\n );\n}\n\nexport default PreferencesView;\n","deleted","label",[175,176,158],"frontend","views","permalink","https://www.val.town/x/shapedlines/loki/code/frontend/views/PreferencesView.tsx","extension","actionData","errors"]