From 93dd57a336a2df5d30ba117e2ce40ee132132cff Mon Sep 17 00:00:00 2001 From: Frederik Spirgi Date: Wed, 9 Sep 2026 09:47:48 +0200 Subject: [PATCH] overhaul chat structure --- public/account.html | 63 ++++++ public/app/workspaceNavigation.js | 17 ++ public/chat.html | 358 ++++++++++++++++++++++++++++++ public/discover.html | 37 +++ public/favicon.svg | 1 + public/home.html | 57 +++++ public/landing.html | 32 +++ public/pages.css | 51 +++++ public/pages.js | 114 ++++++++++ public/shell.css | 71 ++++++ src/pageLayout.js | 23 ++ 11 files changed, 824 insertions(+) create mode 100644 public/account.html create mode 100644 public/app/workspaceNavigation.js create mode 100644 public/chat.html create mode 100644 public/discover.html create mode 100644 public/favicon.svg create mode 100644 public/home.html create mode 100644 public/landing.html create mode 100644 public/pages.css create mode 100644 public/pages.js create mode 100644 public/shell.css create mode 100644 src/pageLayout.js diff --git a/public/account.html b/public/account.html new file mode 100644 index 0000000..c019bab --- /dev/null +++ b/public/account.html @@ -0,0 +1,63 @@ + + + + + +Sign in · Elsewhere + + + + + + + + + +
+ + +
+ + + + + \ No newline at end of file diff --git a/public/app/workspaceNavigation.js b/public/app/workspaceNavigation.js new file mode 100644 index 0000000..302d007 --- /dev/null +++ b/public/app/workspaceNavigation.js @@ -0,0 +1,17 @@ +import {post} from './api.js'; + +// Every page gets this control from the same server-rendered header. +for (const button of document.querySelectorAll('[data-sign-out]')) { + button.addEventListener('click', async () => { + button.disabled = true; + const result = await post('/logout', {}); + if (result.error) { + button.disabled = false; + const notice = document.querySelector('#shellNotice'); + notice.textContent = result.error; + notice.classList.remove('hidden'); + return; + } + location.assign('/'); + }); +} diff --git a/public/chat.html b/public/chat.html new file mode 100644 index 0000000..81aac0a --- /dev/null +++ b/public/chat.html @@ -0,0 +1,358 @@ + + + + + + Elsewhere + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + diff --git a/public/discover.html b/public/discover.html new file mode 100644 index 0000000..83ab944 --- /dev/null +++ b/public/discover.html @@ -0,0 +1,37 @@ + + + + + +Discover personas · Elsewhere + + + + + + + + + +
+

From the community

+

Find your next conversation.

+

Discover characters and personas made by the community. Sign in when you're ready to bring one into your workspace.

+ +
Loading personas…
+
+ + + + + \ No newline at end of file diff --git a/public/favicon.svg b/public/favicon.svg new file mode 100644 index 0000000..eec30a4 --- /dev/null +++ b/public/favicon.svg @@ -0,0 +1 @@ + diff --git a/public/home.html b/public/home.html new file mode 100644 index 0000000..ad18956 --- /dev/null +++ b/public/home.html @@ -0,0 +1,57 @@ + + + + + +Home · Elsewhere + + + + + + + + + + +
+

Welcome home

+

What would you like to do?

+

Start somewhere new, or pick up a conversation.

+
+ +01 / ASK +

New conversation

+

Make space for a question or an idea.

+Start chatting → + + +02 / EXPLORE +

Chat with a character

+

Find someone with a different perspective.

+Discover personas → + + +03 / CREATE +

Create a persona

+

Give a new character a voice of their own.

+Create persona → + +
+
+
+

Recent conversations

+View all → +
+
Loading conversations…
+
+

+

+
+ + + + + \ No newline at end of file diff --git a/public/landing.html b/public/landing.html new file mode 100644 index 0000000..d88a241 --- /dev/null +++ b/public/landing.html @@ -0,0 +1,32 @@ + + + + + + Elsewhere + + + + + + + + + +
+ +
+

A space for every conversation.

+

Take a thought
somewhere.

+

Talk it through. Make something up.
Meet a character and see where it goes.

+
+ Step inside + Meet the personas +
+
+
+ + + + + diff --git a/public/pages.css b/public/pages.css new file mode 100644 index 0000000..794d1c6 --- /dev/null +++ b/public/pages.css @@ -0,0 +1,51 @@ +/* Shared page content; the persistent navigation is defined in shell.css. */ +.site-actions,.section-heading,.site-footer { display:flex; align-items:center; gap:24px; } +.hero-copy { color:var(--text-soft); font-size:1rem; max-width:550px; margin:18px 0 28px; line-height:1.7; } +.muted { color:var(--text-soft); margin-top:20px; font-size:.9rem; } +.site-section { padding:28px 0; } +.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:24px; } +.feature-card { padding:24px; border:1px solid var(--border); border-radius:14px; background:var(--surface); overflow-wrap:anywhere; } +.feature-card p { color:var(--text-soft); line-height:1.65; margin:14px 0; } +.feature-number { display:block; font-size:.7rem; letter-spacing:.1em; color:var(--brand-strong); margin-bottom:20px; } +.action-card { color:var(--text); text-decoration:none; } +.action-card:hover { border-color:var(--brand); background:var(--surface-hover); } +.action-card h2 { font-size:1.2rem; } +.action-card > span:last-child { font-size:.85rem; color:var(--brand-strong); } +.section-heading { justify-content:space-between; } +.site-footer { width:min(1248px,calc(100% - 64px)); margin:0 auto; border-top:1px solid var(--border); padding:24px 0; flex-wrap:wrap; font-size:.8rem; color:var(--text-soft); } +.site-footer span { margin-right:auto; } +.site-footer a { color:var(--text-soft); } +.site-brand { color:var(--text); text-decoration:none; font-weight:700; } +.account-layout { min-height:calc(100dvh - 160px); display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; } +.account-intro h1 { font-size:clamp(2.5rem,4vw,3.5rem); } +.account-intro p:not(.eyebrow) { margin:24px 0; max-width:420px; color:var(--text-soft); line-height:1.8; } +.account-box { padding:32px; border:1px solid var(--border); background:var(--surface); border-radius:18px; } +#accountForm { display:grid; gap:16px; } +.text-button { background:none; border:none; padding:0; justify-self:start; color:var(--brand-strong); cursor:pointer; } +.chat-row { display:flex; justify-content:space-between; gap:20px; padding:20px 0; border-bottom:1px solid var(--border); color:var(--text); text-decoration:none; } +.chat-row strong { overflow-wrap:anywhere; } +.chat-row span { color:var(--brand-strong); flex-shrink:0; } +.empty-state { padding:26px; background:var(--surface); border:1px dashed var(--border-strong); border-radius:14px; } +.starter-links { display:flex; gap:12px; flex-wrap:wrap; } +/* One small entrance, using the same doorway as the Elsewhere mark. */ +.landing-page { display:flex; flex-direction:column; min-height:100dvh; } +.landing-entry { width:min(800px,calc(100% - 64px)); flex:1; margin:auto; padding:64px 0; display:grid; grid-template-columns:180px 1fr; align-content:center; align-items:center; gap:72px; } +.entry-copy h1 { font-size:clamp(2.8rem,5vw,4.25rem); line-height:1.04; letter-spacing:-.055em; } +.entry-copy > p:not(.eyebrow) { color:var(--text-soft); line-height:1.8; margin:22px 0 28px; } +.entry-copy .eyebrow { margin-bottom:18px; } +.entry-copy .site-actions { gap:22px; flex-wrap:wrap; font-size:.9rem; } +.entry-copy .primary-action { gap:22px; } +.entry-door { position:relative; width:160px; height:230px; border:2px solid var(--brand); border-radius:85px 85px 2px 2px; background:var(--brand-soft); } +.entry-door::before { content:""; position:absolute; inset:9px; border:1px solid var(--brand); border-radius:76px 76px 0 0; } +.entry-door span { position:absolute; inset:10px 10px 0 35px; background:var(--canvas); border:2px solid var(--brand); border-radius:64px 64px 0 0; transform:skewY(-12deg); transform-origin:100% 100%; } +.entry-door span::after { content:""; position:absolute; left:14px; top:60%; width:5px; height:5px; border-radius:50%; background:var(--brand); } +.entry-door::after { content:""; position:absolute; left:-25px; right:-25px; bottom:-16px; height:1px; background:var(--border-strong); transform:rotate(-5deg); } +@media(max-width:850px) { .feature-grid { grid-template-columns:1fr; }.account-layout { gap:35px; }.landing-entry { gap:36px; grid-template-columns:160px 1fr; } } +@media(max-width:600px) { + .account-layout { display:block; }.account-intro { display:none; }.account-box { padding:24px; } + .section-heading { align-items:flex-start; gap:20px; }.site-actions { gap:12px; flex-wrap:wrap; } + .site-footer { width:calc(100% - 32px); gap:16px; padding:18px 0; } + .landing-entry { width:calc(100% - 40px); grid-template-columns:1fr; gap:32px; padding:40px 0; } + .entry-door { width:65px; height:92px; border-width:1px; }.entry-door::before { inset:4px; }.entry-door span { inset:4px 4px 0 14px; border-width:1px; }.entry-door span::after { width:3px; height:3px; left:5px; }.entry-door::after { bottom:-8px; left:-10px; right:-10px; } + .entry-copy h1 { font-size:2.8rem; }.entry-copy > p:not(.eyebrow) { margin:18px 0 24px; } +} diff --git a/public/pages.js b/public/pages.js new file mode 100644 index 0000000..22ad43d --- /dev/null +++ b/public/pages.js @@ -0,0 +1,114 @@ +import {get, post} from "/app/api.js"; + +const params = new URLSearchParams(location.search); +function returnPath() { + const candidate = params.get("next"); + if (!candidate) return "/app"; + try { + const url = new URL(candidate, location.origin); + if (url.origin === location.origin && (url.pathname === "/market" || /^\/app(?:\/|$)/.test(url.pathname))) return url.pathname + url.search; + } catch { /* Use workspace home for invalid return URLs. */ } + return "/app"; +} +const session = await get("/session"); +if (session.user) { + document.querySelectorAll("[data-start-link]").forEach(link => { link.href = "/app"; link.textContent = "Open workspace"; }); +} + +const form = document.querySelector("#accountForm"); +if (form) { + const register = location.pathname === "/register"; + const status = document.querySelector("#accountStatus"); + const submit = document.querySelector("#accountSubmit"); + const label = register ? "Create account" : "Sign in"; + document.title = `${label} · Elsewhere`; + document.querySelector("#accountTitle").textContent = label; + submit.textContent = label; + form.elements.password.autocomplete = register ? "new-password" : "current-password"; + document.querySelector("#consentField").classList.toggle("hidden", !register); + form.elements.consent.required = register; + const invite = register && session.inviteOnlyRegistration; + document.querySelector("#inviteField").classList.toggle("hidden", !invite); + form.elements.inviteCode.required = Boolean(invite); + if (register) { + document.querySelector("#accountHeadline").textContent = "Your next conversation starts here."; + document.querySelector("#accountDescription").textContent = "Choose a username and a password of at least 6 characters."; + } + if (session.error) status.textContent = session.error; + const switchText = document.querySelector("#accountSwitch"); + switchText.append(register ? "Already have an account? " : "New to Elsewhere? "); + const link = document.createElement("a"); + link.href = `${register ? "/login" : "/register"}?next=${encodeURIComponent(returnPath())}`; + link.textContent = register ? "Sign in" : "Create account"; + switchText.append(link); + document.querySelector("#showPassword").addEventListener("click", event => { + const show = form.elements.password.type === "password"; + form.elements.password.type = show ? "text" : "password"; + event.currentTarget.textContent = show ? "Hide password" : "Show password"; + event.currentTarget.setAttribute("aria-pressed", String(show)); + }); + form.addEventListener("submit", async event => { + event.preventDefault(); + submit.disabled = true; + status.textContent = register ? "Creating your account…" : "Signing in…"; + const result = await post(register ? "/register" : "/login", { + username: form.elements.username.value.trim(), password: form.elements.password.value, + ...(register ? {inviteCode: form.elements.inviteCode.value.trim()} : {}) + }); + if (result.error) { status.textContent = result.error; submit.disabled = false; return; } + location.assign(returnPath()); + }); +} + +const recent = document.querySelector("#recentChats"); +if (recent) { + if (!session.user) location.replace(`/login?next=${encodeURIComponent(location.pathname)}`); + else { + document.querySelector("#welcomeName").textContent = `Welcome home, ${session.user}`; + const result = await get("/chats"); + recent.replaceChildren(); + if (result.error) recent.textContent = result.error; + else if (!result.chats?.length) { + const empty = document.createElement("div"); empty.className = "empty-state"; + const title = document.createElement("h3"); title.textContent = "Your first conversation is waiting"; + const copy = document.createElement("p"); copy.textContent = "Choose a starter, or bring a thought of your own."; + const starters = document.createElement("div"); starters.className = "starter-links"; + for (const prompt of ["Explain a complex topic in simple terms.", "Help me brainstorm a story idea."]) { + const link = document.createElement("a"); link.className = "secondary-action"; link.href = `/app/chats/new?prompt=${encodeURIComponent(prompt)}`; link.textContent = prompt; starters.append(link); + } + empty.append(title, copy, starters); recent.append(empty); + } else for (const chat of result.chats.slice(0, 6)) { + const link = document.createElement("a"); link.className = "chat-row"; link.href = `/app/chats/${chat.id}`; + const title = document.createElement("strong"); title.textContent = chat.title || "Untitled conversation"; + const action = document.createElement("span"); action.textContent = "Continue \u2192"; + link.append(title, action); recent.append(link); + } + } +} + +const featured = document.querySelector("#featuredPersonas"); +if (featured) { + const result = await get("/api/discover"); + const search = document.querySelector("#publicSearch"); + function render() { + featured.replaceChildren(); + if (result.error) { featured.textContent = result.error; return; } + const query = search?.value.trim().toLowerCase() || ""; + let personas = (result.personas || []).filter(persona => `${persona.name} ${persona.description || ""}`.toLowerCase().includes(query)); + if (!search) personas = personas.slice(0, 3); + if (!personas.length) { featured.textContent = query ? "No personas match your search." : "The community is just getting started. Create a persona and give the next story its voice."; return; } + for (const persona of personas) { + const card = document.createElement("article"); card.className = "feature-card"; + const category = document.createElement("span"); category.className = "feature-number"; category.textContent = persona.persona_type === "assistant" ? "AI CHARACTER" : "USER PERSONA"; + const title = document.createElement("h3"); title.textContent = persona.name; + const description = document.createElement("p"); description.textContent = persona.description || "A community persona, ready for a new conversation."; + const creator = document.createElement("p"); creator.textContent = `By ${persona.creator_username}`; + const link = document.createElement("a"); const destination = `/market?persona=${persona.id}`; + link.href = session.user ? destination : `/login?next=${encodeURIComponent(destination)}`; + link.textContent = session.user ? "Explore persona \u2192" : "Sign in to use persona \u2192"; + card.append(category, title, description, creator, link); featured.append(card); + } + } + render(); search?.addEventListener("input", render); +} + diff --git a/public/shell.css b/public/shell.css new file mode 100644 index 0000000..712da4d --- /dev/null +++ b/public/shell.css @@ -0,0 +1,71 @@ +/* The same navigation and page frame on every route. */ +:root { --shell-header-height:76px; } +html { scrollbar-gutter:stable; } +body.site-page { width:100%; max-width:none; margin:0; padding:0; background:var(--canvas); } +.shell-header { position:sticky; top:0; z-index:60; flex-shrink:0; height:var(--shell-header-height); display:grid; grid-template-columns:220px minmax(0,1fr) auto; align-items:center; gap:24px; padding:0 32px; border-bottom:1px solid var(--border); background:var(--surface); } +.shell-header a { text-decoration:none; } +.shell-brand { display:flex; align-items:center; gap:10px; color:var(--text); font:700 25px var(--font-heading); letter-spacing:-1px; width:fit-content; } +.shell-brand .logo { width:28px; height:34px; flex-shrink:0; } +.shell-nav { display:flex; align-items:center; gap:4px; height:100%; min-width:0; } +.shell-nav a { position:relative; display:flex; align-items:center; padding:0 14px; height:100%; color:var(--text-soft); font-size:.9rem; white-space:nowrap; } +.shell-nav a:hover { color:var(--text); background:var(--surface-soft); } +.shell-nav a[aria-current="page"] { color:var(--brand-strong); } +.shell-nav a[aria-current="page"]::after { content:""; position:absolute; left:14px; right:14px; bottom:0; height:3px; background:var(--brand); } +.shell-account { display:flex; align-items:center; justify-content:flex-end; gap:16px; min-width:0; font-size:.85rem; } +.shell-account > a:not(.primary-action) { color:var(--text-soft); } +.shell-account > a[aria-current] { text-decoration:underline; text-underline-offset:5px; } +.shell-account .primary-action { min-height:38px; padding:9px 14px; font-size:.8rem; } +.shell-username { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-soft); } +.shell-header .shell-sign-out { min-height:36px; padding:6px 10px; border:1px solid var(--border); border-radius:9px; background:transparent; font-size:.8rem; white-space:nowrap; } +.shell-notice { position:fixed; top:var(--shell-header-height); right:16px; padding:12px 18px; background:var(--danger-soft); color:var(--danger); border:1px solid var(--danger); border-radius:8px; z-index:100; } +.site-page .page-content { width:min(1320px,100%); margin:0 auto; padding:40px 32px; min-width:0; min-height:0; } +.site-page .page-content > h1,.site-page .market-header h1 { font-size:clamp(1.8rem,3vw,2.5rem); } +.site-page .settings-shell,.site-page .market-shell { border:0; border-radius:0; box-shadow:none; background:transparent; } +.site-page .settings-layout { grid-template-columns:180px minmax(0,1fr); } +.site-page .settings-nav { top:calc(var(--shell-header-height) + 18px); } +.site-page .settings-nav[hidden] { display:none; } +.site-page .market-header { padding:0 0 16px; border-bottom:1px solid var(--border); } +.site-page .market-header .eyebrow { margin-bottom:8px; } +.skip-link { position:absolute; left:-9999px; }.skip-link:focus { left:20px; top:10px; padding:8px; background:var(--surface); z-index:200; } +/* Chat history is a contextual panel beneath the global navigation. */ +.chat-page { height:100dvh; overflow:hidden; } +.chat-page .app-shell { width:100%; margin:0; } +.chat-page .chat-card { height:calc(100dvh - var(--shell-header-height)); min-height:0; border:0; border-radius:0; box-shadow:none; } +.chat-page .chat-layout { grid-template-columns:260px minmax(0,1fr); } +.chat-page .chat-sidebar { position:static; inset:auto; width:auto; transform:none; box-shadow:none; grid-template-rows:auto minmax(0,1fr); padding:24px 18px; gap:20px; } +.chat-page .sidebar-workspace-card { gap:16px; border:0; padding:0; } +.chat-page .sidebar-workspace-card h2 { margin:0; font-size:.85rem; letter-spacing:0; font-family:var(--font-body); color:var(--text-soft); } +.chat-page .chat-main { grid-template-rows:auto minmax(0,1fr) auto; } +.chat-heading { min-width:0; } +.chat-heading #workspaceNotice { margin:0; padding:10px 24px; border-width:0 0 1px; border-radius:0; font-size:.85rem; } +.chat-page .chat-header { min-height:76px; } +@media(max-width:1100px) { .shell-header { grid-template-columns:170px minmax(0,1fr) auto; gap:12px; padding:0 24px; }.shell-nav a { padding:0 10px; }.shell-username { max-width:90px; } } +@media(max-width:980px) { + .chat-page .chat-layout { grid-template-columns:1fr; } + .chat-page .chat-sidebar { position:fixed; inset:var(--shell-header-height) auto 0 0; width:min(320px,88vw); z-index:80; transform:translateX(-104%); box-shadow:var(--shadow-lg); } + .chat-page.sidebar-open .chat-sidebar { transform:translateX(0); } + .chat-page .sidebar-toggle { display:inline-flex; width:auto; min-width:0; padding:8px 12px; font-size:.8rem; border-radius:10px; } + .site-page .settings-layout { grid-template-columns:1fr; } + .site-page .settings-nav { display:flex; flex-wrap:wrap; } +} +@media(max-width:850px) { + :root { --shell-header-height:112px; } + .shell-header { grid-template-columns:1fr auto; grid-template-rows:64px 48px; gap:0 16px; padding:0 16px; } + .shell-brand { font-size:23px; }.shell-nav { grid-column:1/-1; grid-row:2; overflow-x:auto; scrollbar-width:none; }.shell-nav::-webkit-scrollbar { display:none; }.shell-nav a { padding:0 8px; flex-shrink:0; font-size:.8rem; }.shell-nav a:first-child { padding-left:0; }.shell-nav a:first-child::after { left:0; } + .shell-account { grid-column:2; grid-row:1; gap:12px; }.shell-username { max-width:90px; font-size:.8rem; } + .site-page .page-content { padding:28px 20px; } +} +@media(max-width:600px) { + .shell-username { display:none; }.shell-brand { font-size:21px; }.shell-brand .logo { width:25px; height:30px; }.shell-account { gap:10px; } + .site-page .page-content { padding:24px 16px; }.site-page .settings-layout { grid-template-columns:1fr; } + .site-page .settings-nav { display:flex; gap:8px; flex-wrap:wrap; }.site-page .settings-nav[hidden] { display:none; } + .site-page .market-header { align-items:center; } +} + +.site-page.legal-page { display:block; min-height:100dvh; } +.site-page .legal-content { margin:32px auto; box-shadow:none; } + +@media(max-width:360px) { + .shell-brand { font-size:18px; gap:6px; }.shell-brand .logo { width:20px; height:26px; } + .shell-account { gap:8px; font-size:.75rem; }.shell-account .primary-action { padding:8px 10px; font-size:.7rem; } +} diff --git a/src/pageLayout.js b/src/pageLayout.js new file mode 100644 index 0000000..4f01de8 --- /dev/null +++ b/src/pageLayout.js @@ -0,0 +1,23 @@ +const escapeHtml = (value) => String(value).replace(/[&<>"']/g, (character) => ({ + "&": "&", "<": "<", ">": ">", '"': """, "'": "'" +})[character]); + +export function renderSiteHeader({user, pathname}) { + const destinations = user + ? [["/app", "Home"], ["/app/chats", "Chats"], ["/app/personas", "My personas"], ["/market", "Discover"], ["/app/settings", "Settings"]] + : [["/market", "Discover"]]; + const navigation = destinations.map(([href, label]) => { + const active = pathname === href || (href === "/app/chats" && pathname.startsWith("/app/chats/")); + return `${label}`; + }).join(""); + const account = user + ? `${escapeHtml(user)}` + : `Sign inCreate account`; + return ` +
+ elsewhere + + +
+`; +}