\n 🔶 HN Watcher\n

👋

\n Watch HN users & items in real-time with Firebase SSE streaming and Web Push notifications.\n

\n Sign in with your Val Town account to get started.\n

\n \n Sign in with Val Town\n \n

\n Don't have a Val Town account?{\" \"}\n \n Create one for free\n \n

\n (This is not a paid sponsorship, but Val Town is incredible and lets you deploy sites instantly)\n

\n \n

\n );\n }\n\n const watchedCount = watchedUsers.length + watchedItems.length;\n\n // Authenticated\n return (\n

\n 🔶 HN Watcher\n

\n 👤 {user.username}\n {\n try {\n const resp = await fetch(\"/api/test-push\", { method: \"POST\" });\n const data = await resp.json();\n if (!resp.ok) alert(\"Push test failed: \" + (data.error || resp.statusText));\n } catch (err: any) {\n alert(\"Push test error: \" + err.message);\n }\n }}\n disabled={!pushEnabled}\n title={pushEnabled ? \"Send test notification\" : \"Enable notifications first\"}\n >\n 🔔 Test\n \n \n Source\n \n \n

\n\n setPushEnabled(true)} />\n\n {/* Collapsible watch config section */}\n

\n {\n const next = !detailsOpen;\n setDetailsOpen(next);\n setCookie(COOKIE_NAME, next ? \"1\" : \"0\");\n }}\n style={{\n display: \"flex\",\n alignItems: \"center\",\n gap: \"0.5rem\",\n width: \"100%\",\n padding: \"0.6rem 0.8rem\",\n background: \"var(--bg-card)\",\n border: \"1px solid var(--border)\",\n borderRadius: \"8px\",\n color: \"var(--text)\",\n cursor: \"pointer\",\n fontSize: \"0.85rem\",\n fontWeight: 500,\n }}\n >\n \n ▶\n \n ⚙️ Watch Settings\n {watchedCount > 0 && (\n \n {watchedCount}\n \n )}\n \n\n {detailsOpen && (\n

\n \n \n

\n )}\n

\n\n {/* Main tab navigation */}\n

\n setActiveTab(\"notifications\")}\n className={`main-tab ${activeTab === \"notifications\" ? \"active\" : \"\"}`}\n style={{\n flex: 1,\n padding: \"0.7rem 1rem\",\n background: activeTab === \"notifications\" ? \"var(--bg-card)\" : \"transparent\",\n color: activeTab === \"notifications\" ? \"var(--hn-orange)\" : \"var(--text-muted)\",\n border: \"1px solid var(--border)\",\n borderBottom: activeTab === \"notifications\" ? \"none\" : \"1px solid var(--border)\",\n borderRadius: \"8px 8px 0 0\",\n cursor: \"pointer\",\n fontSize: \"0.9rem\",\n fontWeight: activeTab === \"notifications\" ? 600 : 400,\n position: \"relative\",\n }}\n >\n 🔔 Notifications\n {events.length > 0 && (\n \n {events.length}\n \n )}\n \n setActiveTab(\"stories\")}\n className={`main-tab ${activeTab === \"stories\" ? \"active\" : \"\"}`}\n style={{\n flex: 1,\n padding: \"0.7rem 1rem\",\n background: activeTab === \"stories\" ? \"var(--bg-card)\" : \"transparent\",\n color: activeTab === \"stories\" ? \"var(--hn-orange)\" : \"var(--text-muted)\",\n border: \"1px solid var(--border)\",\n borderBottom: activeTab === \"stories\" ? \"none\" : \"1px solid var(--border)\",\n borderLeft: \"none\",\n borderRadius: \"8px 8px 0 0\",\n cursor: \"pointer\",\n fontSize: \"0.9rem\",\n fontWeight: activeTab === \"stories\" ? 600 : 400,\n }}\n >\n 📰 HN Stories\n \n

\n\n {/* Tab content */}\n

\n {activeTab === \"notifications\" && (\n \n )}\n {activeTab === \"stories\" && (\n i.item_id))}\n onWatchItem={addItem}\n />\n )}\n

\n\n \n

\n );\n}\n","deleted","label",[180,181,162],"frontend","components","permalink","https://www.val.town/x/paulkinlan/hn-watcher/code/frontend/components/App.tsx","extension","actionData","errors"]