Account

\n You are not logged in. Settings are saved to the server for\n authenticated users.{\" \"}\n \n Go back to the app\n {\" \"}\n to log in.\n

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

Account

\n Logged in as {authUser.email}\n

\n );\n}\n\n// --- Timer Section ---\n\nfunction TimerSection(\n { authUser }: { authUser: ReturnType },\n) {\n const [currentFraction, setCurrentFraction] = useState(null);\n const [loading, setLoading] = useState(true);\n const [saving, setSaving] = useState(false);\n\n useEffect(() => {\n if (!authUser) {\n setLoading(false);\n return;\n }\n fetch(\"/api/me/state\")\n .then((r) => r.ok ? r.json() : null)\n .then((state) => {\n if (state?.breakFraction != null) {\n setCurrentFraction(state.breakFraction);\n }\n })\n .catch(() => {})\n .finally(() => setLoading(false));\n }, [authUser]);\n\n const handleChange = async (fraction: number) => {\n if (!authUser) return;\n setSaving(true);\n try {\n // Load current state, update break fraction, save back\n const resp = await fetch(\"/api/me/state\");\n const state = resp.ok ? await resp.json() : null;\n if (state) {\n await fetch(\"/api/me/state\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n state: { ...state, breakFraction: fraction },\n }),\n });\n }\n setCurrentFraction(fraction);\n } catch {\n // silently fail\n }\n setSaving(false);\n };\n\n return (\n

Timer

\n {!authUser && (\n

\n Log in to change timer settings from here.\n

\n )}\n Break Fraction\n {loading ?

: (\n <>\n

\n {BREAK_FRACTIONS.map((f) => (\n handleChange(f.value)}\n disabled={!authUser || saving}\n title={f.description}\n class={`px-3 py-1.5 text-sm border rounded font-semibold transition-colors disabled:opacity-50 ${\n currentFraction === f.value\n ? \"bg-blue-300 border-blue-400 hover:bg-blue-400\"\n : \"bg-gray-100 border-gray-300 hover:bg-gray-200\"\n }`}\n >\n {f.label}\n \n ))}\n

\n {currentFraction != null && (\n

\n Current:{\" \"}\n {BREAK_FRACTIONS.find((f) => f.value === currentFraction)\n ?.description ?? `1/${Math.round(1 / currentFraction)}`}\n

\n )}\n \n )}\n

\n );\n}\n\n// --- Beeminder Section ---\n\nconst DEFAULT_INTENT_GOALS_YAML = `# Map intentions to Beeminder goal slugs.\n# Each line: intent: goal-slug\n# Example:\n# writing: writing-goal\n# coding: coding-hours\n`;\n\nfunction BeeminderSection(\n { authUser }: { authUser: ReturnType },\n) {\n const [token, setToken] = useState(\"\");\n const [intentGoalsYaml, setIntentGoalsYaml] = useState(\"\");\n const [minutesPerUnit, setMinutesPerUnit] = useState(\"15\");\n const [loading, setLoading] = useState(true);\n const [saving, setSaving] = useState(false);\n const [feedback, setFeedback] = useState<\n { type: \"success\" | \"error\"; message: string } | null\n >(null);\n\n useEffect(() => {\n if (!authUser) {\n setLoading(false);\n return;\n }\n getPreferences()\n .then(async (prefs) => {\n // First check for new YAML format\n if (prefs.beeminder_intent_goals) {\n setToken(prefs.beeminder_token || \"\");\n setIntentGoalsYaml(prefs.beeminder_intent_goals);\n setMinutesPerUnit(prefs.beeminder_minutes_per_unit || \"15\");\n return;\n }\n // Fall back to legacy global goal for migration\n const hasServerPrefs = !!(prefs.beeminder_token || prefs.beeminder_goal_slug);\n if (hasServerPrefs) {\n setToken(prefs.beeminder_token || \"\");\n // Migrate legacy goal to YAML format as a fallback\n if (prefs.beeminder_goal_slug) {\n setIntentGoalsYaml(`(default): ${prefs.beeminder_goal_slug}`);\n } else {\n setIntentGoalsYaml(\"\");\n }\n setMinutesPerUnit(prefs.beeminder_minutes_per_unit || \"15\");\n return;\n }\n // Migrate localStorage values to the server for existing users\n // who configured Beeminder via the Timeline UI before the Settings page existed\n const localToken = getBeeminderToken() || \"\";\n const localLegacyGoal = getBeeminderGoalSlug() || \"\";\n const localMinutes = String(getBeeminderMinutesPerUnit());\n const localYaml = getBeeminderIntentGoals() || \"\";\n setToken(localToken);\n // If YAML exists locally, use it; otherwise migrate legacy goal\n setIntentGoalsYaml(localYaml || (localLegacyGoal ? `(default): ${localLegacyGoal}` : \"\"));\n setMinutesPerUnit(localMinutes);\n if (localToken || localLegacyGoal || localYaml) {\n await setPreferences({\n beeminder_token: localToken,\n beeminder_intent_goals: localYaml || (localLegacyGoal ? `(default): ${localLegacyGoal}` : \"\"),\n beeminder_minutes_per_unit: localMinutes,\n }).catch(() => {});\n }\n })\n .catch(() => {\n // Server unreachable — show localStorage values\n setToken(getBeeminderToken() || \"\");\n setIntentGoalsYaml(getBeeminderIntentGoals() || \"\");\n setMinutesPerUnit(String(getBeeminderMinutesPerUnit()));\n })\n .finally(() => setLoading(false));\n }, [authUser]);\n\n const handleSave = async () => {\n if (!authUser) return;\n setSaving(true);\n setFeedback(null);\n\n // Validate YAML (basic check for non-empty key:value pairs)\n if (intentGoalsYaml.trim()) {\n const lines = intentGoalsYaml.split(\"\\n\").map(l => l.trim()).filter(l => l && !l.startsWith(\"#\"));\n for (const line of lines) {\n if (!line.includes(\":\")) {\n setFeedback({ type: \"error\", message: \"Invalid format: each line must be 'intent: goal-slug'\" });\n setSaving(false);\n return;\n }\n }\n }\n\n try {\n await setPreferences({\n beeminder_token: token,\n beeminder_intent_goals: intentGoalsYaml,\n beeminder_minutes_per_unit: minutesPerUnit,\n });\n // Sync to localStorage so Timeline UI stays consistent\n setBeeminderToken(token || null);\n setBeeminderIntentGoals(intentGoalsYaml || null);\n setBeeminderMinutesPerUnit(Number(minutesPerUnit) || 15);\n setFeedback({ type: \"success\", message: \"Saved\" });\n } catch {\n setFeedback({ type: \"error\", message: \"Failed to save\" });\n }\n setSaving(false);\n };\n\n return (\n

Integrations — Beeminder

\n Map intentions to Beeminder goal slugs. Sessions with unmapped intents cannot be sent to Beeminder.\n

\n {!authUser && (\n

\n )}\n {loading\n ?

\n : (\n

\n Auth Token\n \n

\n Intent Goals (YAML)\n setIntentGoalsYaml((e.target as HTMLTextAreaElement).value)}\n disabled={!authUser}\n rows={6}\n className=\"w-full mt-1 px-3 py-2 text-sm font-mono border border-gray-300 rounded bg-white disabled:opacity-50 disabled:bg-gray-50\"\n placeholder={DEFAULT_INTENT_GOALS_YAML}\n spellcheck={false}\n />\n

\n Format: intention: goal-slug per line. Leave empty to disable Beeminder.\n

\n Minutes per Unit\n \n

\n \n {saving ? \"Saving...\" : \"Save\"}\n \n {feedback && (\n \n {feedback.message}\n \n )}\n

\n )}\n

\n );\n}\n\n// --- Toggl Section ---\n\nfunction TogglSection(\n { authUser }: { authUser: ReturnType },\n) {\n const [token, setToken] = useState(\"\");\n const [workspaceId, setWorkspaceId] = useState(\"\");\n const [loading, setLoading] = useState(true);\n const [saving, setSaving] = useState(false);\n const [fetching, setFetching] = useState(false);\n const [feedback, setFeedback] = useState<\n { type: \"success\" | \"error\"; message: string } | null\n >(null);\n\n useEffect(() => {\n if (!authUser) {\n setLoading(false);\n return;\n }\n getPreferences()\n .then(async (prefs) => {\n const hasServerPrefs =\n !!(prefs.toggl_api_token || prefs.toggl_workspace_id);\n if (hasServerPrefs) {\n setToken(prefs.toggl_api_token || \"\");\n setWorkspaceId(prefs.toggl_workspace_id || \"\");\n return;\n }\n // Migrate localStorage values to the server\n const localToken = getTogglApiToken() || \"\";\n const localWorkspace = getTogglWorkspaceId() || \"\";\n setToken(localToken);\n setWorkspaceId(localWorkspace);\n if (localToken || localWorkspace) {\n await setPreferences({\n toggl_api_token: localToken,\n toggl_workspace_id: localWorkspace,\n }).catch(() => {});\n }\n })\n .catch(() => {\n setToken(getTogglApiToken() || \"\");\n setWorkspaceId(getTogglWorkspaceId() || \"\");\n })\n .finally(() => setLoading(false));\n }, [authUser]);\n\n const handleFetchWorkspace = async () => {\n if (!token) return;\n setFetching(true);\n setFeedback(null);\n try {\n const resp = await fetch(\"/api/integrations/toggl/workspace\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ token }),\n });\n if (!resp.ok) {\n setFeedback({ type: \"error\", message: \"Failed to fetch workspace\" });\n } else {\n const data = await resp.json();\n setWorkspaceId(String(data.workspaceId));\n setFeedback({ type: \"success\", message: \"Workspace fetched\" });\n }\n } catch {\n setFeedback({ type: \"error\", message: \"Network error\" });\n }\n setFetching(false);\n };\n\n const handleSave = async () => {\n if (!authUser) return;\n setSaving(true);\n setFeedback(null);\n try {\n await setPreferences({\n toggl_api_token: token,\n toggl_workspace_id: workspaceId,\n });\n setTogglApiToken(token || null);\n setTogglWorkspaceId(workspaceId || null);\n setFeedback({ type: \"success\", message: \"Saved\" });\n } catch {\n setFeedback({ type: \"error\", message: \"Failed to save\" });\n }\n setSaving(false);\n };\n\n return (\n

\n Integrations — Toggl Track [BETA]\n

\n Send completed work sessions to Toggl from the History timeline.\n

\n {!authUser && (\n

\n Log in to configure Toggl Track.\n

\n )}\n {loading\n ?

\n : (\n

\n API Token\n \n

\n Find your token at{\" \"}\n \n track.toggl.com/profile\n \n

\n Workspace ID\n

\n \n \n {fetching ? \"...\" : \"Fetch\"}\n \n

\n \n {saving ? \"Saving...\" : \"Save\"}\n \n {feedback && (\n \n {feedback.message}\n \n )}\n

\n )}\n

\n );\n}\n\n// --- Notification Section ---\n\nfunction NotificationSection() {\n const [enabled, setEnabled] = useState(() => getNotificationsEnabled());\n const [threshold, setThreshold] = useState(() => String(getNotificationThresholdHours()));\n const [permission, setPermission] = useState(() =>\n typeof Notification !== \"undefined\" ? Notification.permission : \"unavailable\"\n );\n\n const handleEnableTest = async () => {\n if (typeof Notification === \"undefined\") return;\n const result = await Notification.requestPermission();\n setPermission(result);\n if (result === \"granted\") {\n setNotificationsEnabled(true);\n setEnabled(true);\n new Notification(\"Third Timer\", { body: \"Notifications are working!\" });\n }\n };\n\n const handleToggle = () => {\n const next = !enabled;\n setNotificationsEnabled(next);\n setEnabled(next);\n };\n\n const handleThresholdChange = (val: string) => {\n setThreshold(val);\n const num = parseFloat(val);\n if (!isNaN(num) && num > 0) {\n setNotificationThresholdHours(num);\n }\n };\n\n return (\n

Notifications

\n Get a browser notification when your timer has been running for a long time.\n

\n {permission === \"unavailable\" ? (\n

\n Notifications are not supported in this browser.\n

\n ) : (\n

\n {permission === \"denied\" ? (\n

\n Notifications are blocked. Please allow notifications for this site in your browser settings.\n

\n ) : permission !== \"granted\" ? (\n \n Enable & Test\n \n ) : (\n <>\n

\n \n \n Enabled\n \n

\n \n Send test notification\n \n \n )}\n

\n Threshold (hours)\n \n

\n )}\n

\n );\n}\n\n// --- TagTime Section ---\n\nfunction TagTimeSection() {\n const [enabled, setEnabled] = useState(() => getTagTimeEnabled());\n const [gapMinutes, setGapMinutes] = useState(() => String(Math.round(getTagTimeGap() / 60)));\n const [permission, setPermission] = useState(() =>\n typeof Notification !== \"undefined\" ? Notification.permission : \"unavailable\"\n );\n\n const handleToggle = () => {\n const next = !enabled;\n setTagTimeEnabled(next);\n setEnabled(next);\n };\n\n const handleRequestPermission = async () => {\n if (typeof Notification === \"undefined\") return;\n const result = await Notification.requestPermission();\n setPermission(result);\n if (result === \"granted\") {\n setTagTimeEnabled(true);\n setEnabled(true);\n new Notification(\"TagTime Ping\", { body: \"TagTime notifications are working!\" });\n }\n };\n\n const handleGapChange = (val: string) => {\n setGapMinutes(val);\n const num = parseFloat(val);\n if (!isNaN(num) && num > 0) {\n setTagTimeGap(Math.round(num * 60));\n }\n };\n\n return (\n

TagTime Pings

\n Stochastic time-tracking pings at random intervals (Poisson process).\n Requires browser notification permission. Changes take effect on next page load.\n

\n {permission === \"unavailable\" ? (\n

\n Notifications are not supported in this browser.\n

\n ) : (\n

\n {permission === \"denied\" ? (\n

\n Notifications are blocked. Please allow notifications for this site in your browser settings.\n

\n ) : permission !== \"granted\" ? (\n \n Enable Notifications\n \n ) : (\n <>\n

\n \n \n Enabled\n \n

\n Average gap between pings (minutes)\n \n

\n Default: 45 minutes. Use a small value (e.g. 0.5) for testing.\n

\n \n )}\n

\n )}\n

\n );\n}\n\n// --- Focus Mode Section ---\n\nconst DEFAULT_FOCUS_YAML = `sections:\n header: false\n stats: true\n breakFraction: false\n resetSession: false\n history: false\n helpText: false\n footer: false\n`;\n\nfunction FocusModeSection(\n { authUser }: { authUser: ReturnType },\n) {\n const [yamlText, setYamlText] = useState(DEFAULT_FOCUS_YAML);\n const [loading, setLoading] = useState(true);\n const [saving, setSaving] = useState(false);\n const [feedback, setFeedback] = useState<\n { type: \"success\" | \"error\"; message: string } | null\n >(null);\n\n useEffect(() => {\n if (!authUser) {\n setLoading(false);\n return;\n }\n getPreferences()\n .then((prefs) => {\n if (prefs.focus_mode_config) {\n setYamlText(prefs.focus_mode_config);\n }\n })\n .catch(() => {})\n .finally(() => setLoading(false));\n }, [authUser]);\n\n const handleSave = async () => {\n if (!authUser) return;\n setFeedback(null);\n\n // Validate YAML\n try {\n const parsed = yaml.load(yamlText);\n if (!parsed || typeof parsed !== \"object\" || !(parsed as Record).sections) {\n setFeedback({ type: \"error\", message: \"YAML must have a 'sections' key\" });\n return;\n }\n } catch (e) {\n setFeedback({ type: \"error\", message: `Invalid YAML: ${(e as Error).message}` });\n return;\n }\n\n setSaving(true);\n try {\n await setPreferences({ focus_mode_config: yamlText });\n // Sync to localStorage so the main app picks it up\n setFocusModeConfig(yamlText);\n setFeedback({ type: \"success\", message: \"Saved\" });\n } catch {\n setFeedback({ type: \"error\", message: \"Failed to save\" });\n }\n setSaving(false);\n };\n\n return (\n

Focus Mode

\n Configure which UI sections are visible when focus mode is enabled.\n Toggle focus mode on/off from the main timer page.\n

\n {!authUser && (\n

\n )}\n {loading\n ?

\n : (\n

\n YAML Configuration\n setYamlText((e.target as HTMLTextAreaElement).value)}\n disabled={!authUser}\n rows={10}\n class=\"w-full mt-1 px-3 py-2 text-sm font-mono border border-gray-300 rounded bg-white disabled:opacity-50 disabled:bg-gray-50\"\n spellcheck={false}\n />\n

\n \n {saving ? \"Saving...\" : \"Save\"}\n \n {feedback && (\n \n {feedback.message}\n \n )}\n

\n )}\n

\n );\n}\n\n// --- Settings Page ---\n\nfunction SettingsPage() {\n const [authUser] = useState(() => getAuthUser());\n\n return (\n \n

Settings

\n \n ← Back to app\n \n

\n \n \n \n \n \n \n \n

\n \n );\n}\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();\n","deleted","label",[187,188,170],"src","frontend","permalink","https://www.val.town/x/ozanatgreenpt/thirdTimer/code/src/frontend/settings.tsx","extension","actionData","errors"]