hq/bpist-squalk-forum
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Change background color

Browse source
This commit is contained in:
dtonon 2026-05-08 21:33:10 +01:00
parent 32104ea05d
commit a96af086ba
13 changed files with 153 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/lib/components/ChatSidebar.svelte
View file

@ -144,7 +144,7 @@
<span class="text-[1.5rem] text-brand leading-7">Chat</span> <span class="text-[1.5rem] text-brand leading-7">Chat</span>
<button <button
onclick={onToggle} onclick={onToggle}
class="rounded bg-gray-100 hover:bg-gray-200 transition-colors" class="rounded bg-neutral-100 hover:bg-neutral-200 transition-colors"
aria-label={expanded ? "Collapse chat" : "Expand chat"} aria-label={expanded ? "Collapse chat" : "Expand chat"}
> >
<svg <svg
@ -174,7 +174,7 @@
class="flex-1 overflow-y-auto flex flex-col" class="flex-1 overflow-y-auto flex flex-col"
> >
{#if messages.length === 0} {#if messages.length === 0}
<div class="m-auto text-center text-sm text-gray-400 py-8"> <div class="m-auto text-center text-sm text-neutral-400 py-8">
No messages yet. No messages yet.
</div> </div>
{:else} {:else}
@ -193,20 +193,20 @@
/> />
{:else} {:else}
<span <span
class="h-6 w-6 shrink-0 rounded-full bg-gray-200 flex items-center justify-center text-xs font-semibold text-gray-500" class="h-6 w-6 shrink-0 rounded-full bg-neutral-200 flex items-center justify-center text-xs font-semibold text-neutral-500"
> >
{author.name[0].toUpperCase()} {author.name[0].toUpperCase()}
</span> </span>
{/if} {/if}
<span class="font-medium text-gray-600">{author.name}</span> <span class="font-medium text-neutral-600">{author.name}</span>
<span class="ml-auto text-xs text-gray-400" <span class="ml-auto text-xs text-neutral-400"
>{formatTime(msg.createdAt)}</span >{formatTime(msg.createdAt)}</span
> >
</div> </div>
<div class="mt-0.5"> <div class="mt-0.5">
{#if msg.replyToId} {#if msg.replyToId}
<div <div
class="mb-1 border-l-2 border-gray-300 pl-2 text-xs text-gray-500" class="mb-1 border-l-2 border-neutral-300 pl-2 text-xs text-neutral-500"
> >
{#if parent} {#if parent}
<span class="font-medium">{parentAuthor?.name}</span>: <span class="font-medium">{parentAuthor?.name}</span>:
@ -217,7 +217,7 @@
</div> </div>
{/if} {/if}
<p <p
class="text-gray-700 leading-5 whitespace-pre-wrap break-words" class="text-neutral-700 leading-5 whitespace-pre-wrap break-words"
> >
{msg.content} {msg.content}
</p> </p>
@ -228,7 +228,7 @@
e.stopPropagation(); e.stopPropagation();
openMenuId = openMenuId === msg.id ? null : msg.id; openMenuId = openMenuId === msg.id ? null : msg.id;
}} }}
class="flex items-center justify-center rounded p-0.5 text-gray-300 hover:text-gray-500 hover:bg-gray-100 transition-colors" class="flex items-center justify-center rounded p-0.5 text-neutral-300 hover:text-neutral-500 hover:bg-neutral-100 transition-colors"
aria-label="Message actions" aria-label="Message actions"
> >
<svg <svg
@ -244,16 +244,16 @@
</button> </button>
{#if openMenuId === msg.id} {#if openMenuId === msg.id}
<div <div
class="absolute right-0 bottom-6 z-20 w-36 rounded-lg border border-gray-100 bg-white py-1 shadow-lg text-sm" class="absolute right-0 bottom-6 z-20 w-36 rounded-lg border border-neutral-100 bg-white py-1 shadow-lg text-sm"
> >
<button <button
disabled disabled
class="w-full px-3 py-1.5 text-left text-gray-400 cursor-not-allowed" class="w-full px-3 py-1.5 text-left text-neutral-400 cursor-not-allowed"
aria-disabled="true">React</button aria-disabled="true">React</button
> >
<button <button
disabled disabled
class="w-full px-3 py-1.5 text-left text-gray-400 cursor-not-allowed" class="w-full px-3 py-1.5 text-left text-neutral-400 cursor-not-allowed"
aria-disabled="true">Zap</button aria-disabled="true">Zap</button
> >
<button <button
@ -261,7 +261,7 @@
e.stopPropagation(); e.stopPropagation();
startReply(msg); startReply(msg);
}} }}
class="w-full px-3 py-1.5 text-left hover:bg-gray-50" class="w-full px-3 py-1.5 text-left hover:bg-neutral-50"
>Reply</button >Reply</button
> >
</div> </div>
@ -275,20 +275,22 @@
{/if} {/if}
</div> </div>
<div class="border-t border-gray-200 pt-4"> <div class="border-t border-neutral-200 pt-4">
{#if replyTarget} {#if replyTarget}
{@const replyAuthor = resolveAuthor(replyTarget.pubkey)} {@const replyAuthor = resolveAuthor(replyTarget.pubkey)}
<div <div
class="mb-2 flex items-start gap-2 rounded bg-gray-50 px-2 py-1.5 text-xs text-gray-600" class="mb-2 flex items-start gap-2 rounded bg-neutral-50 px-2 py-1.5 text-xs text-neutral-600"
> >
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<span class="text-gray-400">↳ Reply to </span> <span class="text-neutral-400">↳ Reply to </span>
<span class="font-medium">{replyAuthor.name}</span>: <span class="font-medium">{replyAuthor.name}</span>:
<span class="text-gray-500">{truncate(replyTarget.content, 80)}</span> <span class="text-neutral-500"
>{truncate(replyTarget.content, 80)}</span
>
</div> </div>
<button <button
onclick={cancelReply} onclick={cancelReply}
class="shrink-0 text-gray-400 hover:text-gray-600" class="shrink-0 text-neutral-400 hover:text-neutral-600"
aria-label="Cancel reply" aria-label="Cancel reply"
> >
✕ ✕
@ -309,7 +311,7 @@
rows="1" rows="1"
disabled={sending} disabled={sending}
placeholder={auth.user ? "Message..." : "Login to send messages"} placeholder={auth.user ? "Message..." : "Login to send messages"}
class="w-full resize-none rounded border border-gray-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-brand disabled:opacity-50" class="w-full resize-none rounded border border-neutral-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-brand disabled:opacity-50"
></textarea> ></textarea>
</div> </div>
</aside> </aside>

13
src/lib/components/JoinModal.svelte
View file

@ -47,15 +47,15 @@
onclick={onClose} onclick={onClose}
aria-label="Close" aria-label="Close"
disabled={joinState.busy} disabled={joinState.busy}
class="absolute right-3 top-3 text-2xl leading-none text-gray-400 hover:text-gray-700 disabled:opacity-50" class="absolute right-3 top-3 text-2xl leading-none text-neutral-400 hover:text-neutral-700 disabled:opacity-50"
> >
× ×
</button> </button>
<h2 id="join-title" class="mb-2 text-lg font-semibold text-gray-900"> <h2 id="join-title" class="mb-2 text-lg font-semibold text-neutral-900">
Join this group Join this group
</h2> </h2>
<p class="mb-4 text-sm text-gray-600"> <p class="mb-4 text-sm text-neutral-600">
{#if joinState.codeRequired} {#if joinState.codeRequired}
This community requires an invite code. Enter your code below to This community requires an invite code. Enter your code below to
request access. If you don't have one, contact the admin. request access. If you don't have one, contact the admin.
@ -87,7 +87,7 @@
autocapitalize="off" autocapitalize="off"
spellcheck="false" spellcheck="false"
onkeydown={(e) => e.key === "Enter" && onRetry()} onkeydown={(e) => e.key === "Enter" && onRetry()}
class="mb-3 w-full rounded border border-gray-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-brand disabled:opacity-50" class="mb-3 w-full rounded border border-neutral-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-brand disabled:opacity-50"
/> />
{/if} {/if}
@ -96,15 +96,14 @@
type="button" type="button"
onclick={onClose} onclick={onClose}
disabled={joinState.busy} disabled={joinState.busy}
class="rounded px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 disabled:opacity-50" class="rounded px-3 py-2 text-sm font-medium text-neutral-600 hover:bg-neutral-100 disabled:opacity-50"
> >
Close Close
</button> </button>
<button <button
type="button" type="button"
onclick={onRetry} onclick={onRetry}
disabled={joinState.busy || disabled={joinState.busy || (joinState.codeRequired && !code.trim())}
(joinState.codeRequired && !code.trim())}
class="rounded bg-brand px-3 py-2 text-sm font-medium text-white hover:bg-brand-hover disabled:cursor-not-allowed disabled:opacity-50" class="rounded bg-brand px-3 py-2 text-sm font-medium text-white hover:bg-brand-hover disabled:cursor-not-allowed disabled:opacity-50"
> >
{joinState.busy ? "Trying…" : "Retry"} {joinState.busy ? "Trying…" : "Retry"}

26
src/lib/components/LeftSidebar.svelte
View file

@ -20,29 +20,29 @@
<div> <div>
<a <a
href="/" href="/"
class="flex items-center gap-2 py-1 hover:bg-gray-100 text-gray-700}" class="flex items-center gap-2 py-1 hover:bg-neutral-100 text-neutral-700}"
> >
Home Home
</a> </a>
{#if mode === "simple"} {#if mode === "simple"}
<div class="flex mt-6"> <div class="flex mt-6">
<p class="text-sm text-gray-500">{groupStore.data?.about ?? ""}</p> <p class="text-sm text-neutral-500">{groupStore.data?.about ?? ""}</p>
</div> </div>
{:else} {:else}
<nav class="flex-auto mt-6"> <nav class="flex-auto mt-6">
{#each groups as group} {#each groups as group}
<div class="mb-8"> <div class="mb-8">
<p <p
class="pb-1 text-xs font-semibold uppercase tracking-wider text-gray-400" class="pb-1 text-xs font-semibold uppercase tracking-wider text-neutral-400"
> >
{group} {group}
</p> </p>
{#each rooms.filter((r) => r.group === group) as room} {#each rooms.filter((r) => r.group === group) as room}
<a <a
href="/room/{room.slug}" href="/room/{room.slug}"
class="flex items-center gap-2 py-1 hover:bg-gray-100 class="flex items-center gap-2 py-1 hover:bg-neutral-100
{activeRoom === room.slug ? ' text-brand' : 'text-gray-700'}" {activeRoom === room.slug ? ' text-brand' : 'text-neutral-700'}"
> >
{room.name} {room.name}
</a> </a>
@ -55,15 +55,17 @@
<nav class="flex-auto mt-6"> <nav class="flex-auto mt-6">
<div class=""> <div class="">
<p <p
class="pb-1 text-xs font-semibold uppercase tracking-wider text-gray-400" class="pb-1 text-xs font-semibold uppercase tracking-wider text-neutral-400"
> >
More More
</p> </p>
<a href="/settings" class="block py-1 text-gray-500 hover:text-gray-900" <a
>Settings</a href="/settings"
class="block py-1 text-neutral-500 hover:text-neutral-900">Settings</a
> >
<a href="/contacts" class="block py-1 text-gray-500 hover:text-gray-900" <a
>Contacts</a href="/contacts"
class="block py-1 text-neutral-500 hover:text-neutral-900">Contacts</a
> >
</div> </div>
</nav> </nav>
@ -84,7 +86,7 @@
onclick={() => { onclick={() => {
if (confirm("Log out?")) logout(); if (confirm("Log out?")) logout();
}} }}
class="mt-3 flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm text-gray-700 hover:bg-gray-200" class="mt-3 flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm text-neutral-700 hover:bg-neutral-200"
aria-label="Account options" aria-label="Account options"
> >
{#if auth.user.metadata.picture} {#if auth.user.metadata.picture}
@ -95,7 +97,7 @@
/> />
{:else} {:else}
<span <span
class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-gray-300 text-xs font-semibold text-gray-600" class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-neutral-300 text-xs font-semibold text-neutral-600"
aria-hidden="true" aria-hidden="true"
> >
{auth.user.shortName.slice(0, 1).toUpperCase()} {auth.user.shortName.slice(0, 1).toUpperCase()}

10
src/lib/components/LoginModal.svelte
View file

@ -97,12 +97,12 @@
type="button" type="button"
onclick={onClose} onclick={onClose}
aria-label="Close" aria-label="Close"
class="absolute right-3 top-3 text-2xl leading-none text-gray-400 hover:text-gray-700" class="absolute right-3 top-3 text-2xl leading-none text-neutral-400 hover:text-neutral-700"
> >
× ×
</button> </button>
<h2 id="login-title" class="mb-4 text-lg font-semibold text-gray-900"> <h2 id="login-title" class="mb-4 text-lg font-semibold text-neutral-900">
{view === "extension" ? "Log in" : "Log in with nsec"} {view === "extension" ? "Log in" : "Log in with nsec"}
</h2> </h2>
@ -124,7 +124,7 @@
{busy ? "Connecting…" : "Log in with extension"} {busy ? "Connecting…" : "Log in with extension"}
</button> </button>
{#if !hasExtension} {#if !hasExtension}
<p class="mt-2 text-xs text-gray-500"> <p class="mt-2 text-xs text-neutral-500">
No Nostr extension detected in this browser. No Nostr extension detected in this browser.
</p> </p>
{/if} {/if}
@ -149,7 +149,7 @@
autocorrect="off" autocorrect="off"
spellcheck="false" spellcheck="false"
onkeydown={(e) => e.key === "Enter" && handleNsec()} onkeydown={(e) => e.key === "Enter" && handleNsec()}
class="w-full rounded border border-gray-200 px-3 py-2 font-mono text-sm focus:outline-none focus:ring-1 focus:ring-brand disabled:opacity-50" class="w-full rounded border border-neutral-200 px-3 py-2 font-mono text-sm focus:outline-none focus:ring-1 focus:ring-brand disabled:opacity-50"
/> />
<button <button
onclick={handleNsec} onclick={handleNsec}
@ -158,7 +158,7 @@
> >
{busy ? "Logging in…" : "Log in"} {busy ? "Logging in…" : "Log in"}
</button> </button>
<p class="mt-2 text-xs text-gray-500"> <p class="mt-2 text-xs text-neutral-500">
Your key is kept in this browser. Use only for testing. Your key is kept in this browser. Use only for testing.
</p> </p>
<button <button

36
src/lib/components/MessageEditor.svelte
View file

@ -332,13 +332,13 @@
<div class="flex flex-col {previewing ? 'flex-1 min-h-0' : ''}"> <div class="flex flex-col {previewing ? 'flex-1 min-h-0' : ''}">
{#if previewing} {#if previewing}
<div <div
class="w-full rounded-t border border-gray-200 px-3 py-2 overflow-auto flex-1 min-h-0 max-h-[70vh] {minHeightClass}" class="w-full rounded-t border border-neutral-200 px-3 py-2 overflow-auto flex-1 min-h-0 max-h-[70vh] {minHeightClass}"
aria-label="Preview" aria-label="Preview"
> >
{#if value.trim()} {#if value.trim()}
<PostContent content={value} {threadEventAuthors} /> <PostContent content={value} {threadEventAuthors} />
{:else} {:else}
<p class="text-gray-400 italic">Nothing to preview</p> <p class="text-neutral-400 italic">Nothing to preview</p>
{/if} {/if}
</div> </div>
{:else} {:else}
@ -357,13 +357,13 @@
onblur={onTextareaBlur} onblur={onTextareaBlur}
aria-autocomplete="list" aria-autocomplete="list"
aria-controls={mentionOpen ? "mention-listbox" : undefined} aria-controls={mentionOpen ? "mention-listbox" : undefined}
class="block w-full rounded-t border border-gray-200 px-3 py-2 focus:outline-none focus:ring-1 focus:ring-brand disabled:opacity-50 resize-y {minHeightClass}" class="block w-full rounded-t border border-neutral-200 px-3 py-2 focus:outline-none focus:ring-1 focus:ring-brand disabled:opacity-50 resize-y {minHeightClass}"
></textarea> ></textarea>
{#if mentionOpen} {#if mentionOpen}
<div <div
id="mention-listbox" id="mention-listbox"
bind:this={listboxEl} bind:this={listboxEl}
class="absolute z-30 left-0 right-0 max-h-72 overflow-auto rounded border border-gray-200 bg-white shadow-lg" class="absolute z-30 left-0 right-0 max-h-72 overflow-auto rounded border border-neutral-200 bg-white shadow-lg"
class:bottom-full={anchorAbove} class:bottom-full={anchorAbove}
class:mb-1={anchorAbove} class:mb-1={anchorAbove}
class:top-full={!anchorAbove} class:top-full={!anchorAbove}
@ -371,29 +371,31 @@
> >
{#if mentionQuery === ""} {#if mentionQuery === ""}
<div <div
class="px-3 py-1.5 text-xs text-gray-400" class="px-3 py-1.5 text-xs text-neutral-400"
class:border-b={mergedResults.length > 0} class:border-b={mergedResults.length > 0}
class:border-gray-100={mergedResults.length > 0} class:border-neutral-100={mergedResults.length > 0}
> >
Type to search Type to search
</div> </div>
{:else if remoteSearching && mergedResults.length > 0} {:else if remoteSearching && mergedResults.length > 0}
<div <div
class="px-3 py-1.5 text-xs text-gray-400 flex items-center gap-2 border-b border-gray-100" class="px-3 py-1.5 text-xs text-neutral-400 flex items-center gap-2 border-b border-neutral-100"
aria-live="polite" aria-live="polite"
> >
<span <span
class="h-3 w-3 inline-block rounded-full border border-gray-300 border-t-gray-600 animate-spin" class="h-3 w-3 inline-block rounded-full border border-neutral-300 border-t-neutral-600 animate-spin"
aria-hidden="true" aria-hidden="true"
></span> ></span>
<span>Searching…</span> <span>Searching…</span>
</div> </div>
{/if} {/if}
{#if mergedResults.length === 0 && mentionQuery !== ""} {#if mergedResults.length === 0 && mentionQuery !== ""}
<div class="px-3 py-2 text-xs text-gray-400 flex items-center gap-2"> <div
class="px-3 py-2 text-xs text-neutral-400 flex items-center gap-2"
>
{#if remoteSearching} {#if remoteSearching}
<span <span
class="h-3 w-3 inline-block rounded-full border border-gray-300 border-t-gray-600 animate-spin" class="h-3 w-3 inline-block rounded-full border border-neutral-300 border-t-neutral-600 animate-spin"
aria-hidden="true" aria-hidden="true"
></span> ></span>
<span>Searching…</span> <span>Searching…</span>
@ -408,7 +410,7 @@
role="option" role="option"
aria-selected={i === safeMentionIndex} aria-selected={i === safeMentionIndex}
class="flex items-center gap-2 px-3 py-1.5 cursor-pointer text-sm" class="flex items-center gap-2 px-3 py-1.5 cursor-pointer text-sm"
class:bg-gray-100={i === safeMentionIndex} class:bg-neutral-100={i === safeMentionIndex}
onmousedown={(e) => { onmousedown={(e) => {
e.preventDefault(); e.preventDefault();
selectMention(entry); selectMention(entry);
@ -426,17 +428,17 @@
/> />
{:else} {:else}
<span <span
class="h-6 w-6 rounded-full bg-gray-200 flex items-center justify-center text-xs text-gray-500 flex-shrink-0" class="h-6 w-6 rounded-full bg-neutral-200 flex items-center justify-center text-xs text-neutral-500 flex-shrink-0"
aria-hidden="true" aria-hidden="true"
> >
{profileLabel(entry)[0]?.toUpperCase() ?? "?"} {profileLabel(entry)[0]?.toUpperCase() ?? "?"}
</span> </span>
{/if} {/if}
<span class="font-medium text-gray-700 truncate"> <span class="font-medium text-neutral-700 truncate">
{profileLabel(entry)} {profileLabel(entry)}
</span> </span>
{#if profileSubLabel(entry)} {#if profileSubLabel(entry)}
<span class="text-xs text-gray-400 truncate"> <span class="text-xs text-neutral-400 truncate">
{profileSubLabel(entry)} {profileSubLabel(entry)}
</span> </span>
{/if} {/if}
@ -449,14 +451,14 @@
</div> </div>
{/if} {/if}
<div <div
class="flex flex-shrink-0 items-center gap-4 rounded-b border border-t-0 border-gray-200 bg-gray-50 px-3 py-2 text-sm" class="flex flex-shrink-0 items-center gap-4 rounded-b border border-t-0 border-neutral-200 bg-neutral-50 px-3 py-2 text-sm"
> >
<button <button
type="button" type="button"
onclick={onUploadClick} onclick={onUploadClick}
disabled={uploading || disabled || previewing || !BLOSSOM_URL} disabled={uploading || disabled || previewing || !BLOSSOM_URL}
title={!BLOSSOM_URL ? "Blossom server not configured" : ""} title={!BLOSSOM_URL ? "Blossom server not configured" : ""}
class="inline-flex items-center gap-1.5 text-gray-600 hover:text-gray-900 disabled:opacity-50 disabled:cursor-not-allowed" class="inline-flex items-center gap-1.5 text-neutral-600 hover:text-neutral-900 disabled:opacity-50 disabled:cursor-not-allowed"
> >
<svg <svg
width="16" width="16"
@ -483,7 +485,7 @@
onclick={togglePreview} onclick={togglePreview}
disabled={disabled || uploading} disabled={disabled || uploading}
aria-pressed={previewing} aria-pressed={previewing}
class="ml-auto inline-flex items-center gap-1.5 text-gray-600 hover:text-gray-900 disabled:opacity-50 disabled:cursor-not-allowed" class="ml-auto inline-flex items-center gap-1.5 text-neutral-600 hover:text-neutral-900 disabled:opacity-50 disabled:cursor-not-allowed"
> >
<svg <svg
width="16" width="16"

4
src/lib/components/Navbar.svelte
View file

@ -20,9 +20,9 @@
{name[0].toUpperCase()} {name[0].toUpperCase()}
</div> </div>
{/if} {/if}
<span class="text-[1.7rem] font-medium text-gray-900">{name}</span> <span class="text-[1.7rem] font-medium text-neutral-900">{name}</span>
</div> </div>
<button class="text-sm text-gray-500 hover:text-gray-900" <button class="text-sm text-neutral-500 hover:text-neutral-900"
>Create your own community</button >Create your own community</button
> >
</header> </header>

20
src/lib/components/NewDiscussionModal.svelte
View file

@ -139,7 +139,7 @@
<div class="flex items-start justify-between"> <div class="flex items-start justify-between">
<div> <div>
{#if groupStore.data?.name} {#if groupStore.data?.name}
<p class="text-sm text-gray-700">{groupStore.data.name}</p> <p class="text-sm text-neutral-700">{groupStore.data.name}</p>
{/if} {/if}
<h2 id="newdisc-title" class="text-2xl text-brand">New discussion</h2> <h2 id="newdisc-title" class="text-2xl text-brand">New discussion</h2>
</div> </div>
@ -147,7 +147,7 @@
type="button" type="button"
onclick={iconizeDraft} onclick={iconizeDraft}
aria-label="Minimize draft" aria-label="Minimize draft"
class="rounded bg-gray-50 p-1.5 text-gray-700 hover:bg-gray-100" class="rounded bg-neutral-50 p-1.5 text-neutral-700 hover:bg-neutral-100"
> >
<svg <svg
width="20" width="20"
@ -169,7 +169,7 @@
<div> <div>
<label <label
for="newdisc-title-input" for="newdisc-title-input"
class="block text-xs font-semibold uppercase tracking-wider text-gray-400 mb-1" class="block text-xs font-semibold uppercase tracking-wider text-neutral-400 mb-1"
> >
Title Title
</label> </label>
@ -180,7 +180,7 @@
bind:value={draftState.title} bind:value={draftState.title}
disabled={draftState.publishing} disabled={draftState.publishing}
maxlength="72" maxlength="72"
class="w-full rounded border border-gray-200 px-3 py-2 focus:outline-none focus:ring-1 focus:ring-brand disabled:opacity-50" class="w-full rounded border border-neutral-200 px-3 py-2 focus:outline-none focus:ring-1 focus:ring-brand disabled:opacity-50"
/> />
</div> </div>
@ -189,12 +189,12 @@
<div class="relative"> <div class="relative">
<label <label
for="newdisc-labels-input" for="newdisc-labels-input"
class="block text-xs font-semibold uppercase tracking-wider text-gray-400 mb-1" class="block text-xs font-semibold uppercase tracking-wider text-neutral-400 mb-1"
> >
Labels Labels
</label> </label>
<div <div
class="flex flex-wrap gap-1.5 items-center rounded border border-gray-200 px-3 py-1.5 min-h-[2.5rem] focus-within:ring-1 focus-within:ring-brand" class="flex flex-wrap gap-1.5 items-center rounded border border-neutral-200 px-3 py-1.5 min-h-[2.5rem] focus-within:ring-1 focus-within:ring-brand"
> >
{#each draftState.labels as l} {#each draftState.labels as l}
<span <span
@ -228,7 +228,7 @@
/> />
{#if suggestion} {#if suggestion}
<span <span
class="pointer-events-none absolute inset-0 flex items-center text-sm text-gray-400" class="pointer-events-none absolute inset-0 flex items-center text-sm text-neutral-400"
aria-hidden="true" aria-hidden="true"
> >
<span class="invisible">{labelInput}</span><span <span class="invisible">{labelInput}</span><span
@ -240,7 +240,7 @@
</div> </div>
{#if suggestOpen && filtered.length > 0} {#if suggestOpen && filtered.length > 0}
<div <div
class="absolute left-0 right-0 z-20 mt-1 rounded border border-gray-200 bg-white shadow-lg p-3 flex flex-wrap gap-1.5" class="absolute left-0 right-0 z-20 mt-1 rounded border border-neutral-200 bg-white shadow-lg p-3 flex flex-wrap gap-1.5"
> >
{#each filtered as l} {#each filtered as l}
<button <button
@ -255,7 +255,7 @@
</div> </div>
{/if} {/if}
{#if suggestion} {#if suggestion}
<p class="mt-1 text-xs text-gray-400"> <p class="mt-1 text-xs text-neutral-400">
Press Tab or Enter to add “{suggestion}” Press Tab or Enter to add “{suggestion}”
</p> </p>
{/if} {/if}
@ -284,7 +284,7 @@
type="button" type="button"
onclick={onDiscard} onclick={onDiscard}
disabled={draftState.publishing} disabled={draftState.publishing}
class="rounded bg-gray-700 px-5 py-1.5 text-sm font-medium text-white hover:bg-gray-800 disabled:opacity-50" class="rounded bg-neutral-700 px-5 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 disabled:opacity-50"
> >
Discard Discard
</button> </button>

4
src/lib/components/PostContent.svelte
View file

@ -405,7 +405,7 @@
/> />
{:else if block.type === "blockquote"} {:else if block.type === "blockquote"}
<blockquote <blockquote
class="my-3 pb-1 mb-0 border-l-3 border-gray-200 pl-3 text-gray-500" class="my-3 pb-1 mb-0 border-l-3 border-neutral-200 pl-3 text-neutral-500"
> >
{@render renderBlocks(block.blocks)} {@render renderBlocks(block.blocks)}
</blockquote> </blockquote>
@ -416,7 +416,7 @@
{/snippet} {/snippet}
<div <div
class="prose leading-5 max-w-none text-gray-700 [&_p]:my-3 [&_img]:my-5 [&_blockquote_p]:before:content-none [&_blockquote_p]:after:content-none" class="prose leading-5 max-w-none text-neutral-700 [&_p]:my-3 [&_img]:my-5 [&_blockquote_p]:before:content-none [&_blockquote_p]:after:content-none"
> >
{#each paragraphs as blocks} {#each paragraphs as blocks}
{@render renderBlocks(blocks)} {@render renderBlocks(blocks)}

4
src/lib/components/Reactions.svelte
View file

@ -12,10 +12,10 @@
<div class="flex flex-wrap items-center gap-1.5"> <div class="flex flex-wrap items-center gap-1.5">
{#each reactions as r} {#each reactions as r}
<button <button
class="flex items-center gap-1 rounded-full border border-gray-200 px-2 py-0.5 text-xs hover:bg-gray-50" class="flex items-center gap-1 rounded-full border border-neutral-200 px-2 py-0.5 text-xs hover:bg-neutral-50"
> >
<span>{r.emoji}</span> <span>{r.emoji}</span>
<span class="text-gray-600">{r.count}</span> <span class="text-neutral-600">{r.count}</span>
</button> </button>
{/each} {/each}
{#if zaps > 0} {#if zaps > 0}

33
src/lib/components/ThreadItem.svelte
View file

@ -28,7 +28,7 @@
<img src={a.picture} alt="" class={cls} /> <img src={a.picture} alt="" class={cls} />
{:else} {:else}
<span <span
class="{cls} flex items-center justify-center rounded-full bg-gray-200 text-[10px] font-semibold text-gray-500" class="{cls} flex items-center justify-center rounded-full bg-neutral-200 text-[10px] font-semibold text-neutral-500"
> >
{a.name[0].toUpperCase()} {a.name[0].toUpperCase()}
</span> </span>
@ -37,20 +37,26 @@
<a <a
href="/thread/{thread.id}" href="/thread/{thread.id}"
class="flex items-center gap-6 border-b border-gray-100 py-4 hover:bg-gray-50" class="flex items-center gap-6 border-b border-neutral-100 py-4 hover:bg-neutral-50"
> >
<!-- Col 1: title + byline --> <!-- Col 1: title + byline -->
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<div class="text-lg mb-1.5 text-gray-900 leading-6">{thread.title}</div> <div class="text-lg mb-1.5 text-neutral-900 leading-6">{thread.title}</div>
<div class="flex items-center gap-1.5 text-sm text-gray-500"> <div class="flex items-center gap-1.5 text-sm text-neutral-500">
<span>by</span> <span>by</span>
{@render avatar(thread.author, "h-5 w-5 rounded-full object-cover")} {@render avatar(thread.author, "h-5 w-5 rounded-full object-cover")}
{#if thread.repliers.length > 0} {#if thread.repliers.length > 0}
<span>and</span> <span>and</span>
<div class="flex -space-x-1.5"> <div class="flex -space-x-1.5">
{#each thread.repliers as r, i} {#each thread.repliers as r, i}
<span class="relative" style="z-index: {thread.repliers.length - i}"> <span
{@render avatar(r, "h-5 w-5 rounded-full object-cover ring-1 ring-white")} class="relative"
style="z-index: {thread.repliers.length - i}"
>
{@render avatar(
r,
"h-5 w-5 rounded-full object-cover ring-1 ring-white",
)}
</span> </span>
{/each} {/each}
</div> </div>
@ -68,21 +74,24 @@
<!-- Col 3: replies | score | activity --> <!-- Col 3: replies | score | activity -->
<div class="flex shrink-0 items-center gap-6"> <div class="flex shrink-0 items-center gap-6">
<div class="flex flex-col items-center gap-0.5"> <div class="flex flex-col items-center gap-0.5">
<span class="text-gray-800">{thread.replyCount}</span> <span class="text-neutral-800">{thread.replyCount}</span>
<span class="text-sm text-gray-400">replies</span> <span class="text-sm text-neutral-400">replies</span>
</div> </div>
<div class="flex flex-col items-center gap-0.5"> <div class="flex flex-col items-center gap-0.5">
<span class="text-accent">{thread.score}</span> <span class="text-accent">{thread.score}</span>
<span class="text-sm text-gray-400">score</span> <span class="text-sm text-neutral-400">score</span>
</div> </div>
<div class="flex flex-col items-center gap-0.5"> <div class="flex flex-col items-center gap-0.5">
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
{@render avatar(thread.lastActiveAuthor, "h-5 w-5 rounded-full object-cover")} {@render avatar(
<span class="text-gray-800">{thread.lastActivity}</span> thread.lastActiveAuthor,
"h-5 w-5 rounded-full object-cover",
)}
<span class="text-neutral-800">{thread.lastActivity}</span>
</div> </div>
<span class="text-sm text-gray-400">activity</span> <span class="text-sm text-neutral-400">activity</span>
</div> </div>
</div> </div>
</a> </a>

6
src/lib/components/ThreadScrubber.svelte
View file

@ -149,7 +149,7 @@
> >
<!-- First post date --> <!-- First post date -->
<div <div
class="text-xs text-gray-300 mb-1 text-right leading-tight whitespace-pre" class="text-xs text-neutral-300 mb-1 text-right leading-tight whitespace-pre"
> >
{firstPost ? formatDate(firstPost.createdAt) : ""} {firstPost ? formatDate(firstPost.createdAt) : ""}
</div> </div>
@ -169,7 +169,7 @@
<!-- Thumb --> <!-- Thumb -->
<div <div
class="absolute rounded-full bg-brand hover:bg-gray-800 transition-colors cursor-grab active:cursor-grabbing touch-none" class="absolute rounded-full bg-brand hover:bg-neutral-800 transition-colors cursor-grab active:cursor-grabbing touch-none"
style="width: 4px; right: 3px; top: {thumbTop}px; height: {thumbHeight}px;" style="width: 4px; right: 3px; top: {thumbTop}px; height: {thumbHeight}px;"
onpointerdown={onThumbPointerDown} onpointerdown={onThumbPointerDown}
onpointermove={onThumbPointerMove} onpointermove={onThumbPointerMove}
@ -190,7 +190,7 @@
<!-- Last post date --> <!-- Last post date -->
<div <div
class="text-xs text-gray-300 mt-1 text-right leading-tight whitespace-pre" class="text-xs text-neutral-300 mt-1 text-right leading-tight whitespace-pre"
> >
{lastPost ? formatDate(lastPost.createdAt) : ""} {lastPost ? formatDate(lastPost.createdAt) : ""}
</div> </div>

2
src/routes/layout.css
View file

@ -7,7 +7,7 @@ html {
} }
body { body {
background-color: var(--color-gray-100); background-color: var(--color-neutral-100);
} }
.no-scrollbar { .no-scrollbar {

18
src/routes/thread/[id]/+page.svelte
View file

@ -206,7 +206,7 @@
/> />
{:else} {:else}
<span <span
class="w-12 h-12 flex items-center justify-center rounded-full bg-gray-200 text-lg font-semibold text-gray-500" class="w-12 h-12 flex items-center justify-center rounded-full bg-neutral-200 text-lg font-semibold text-neutral-500"
> >
{author.name[0].toUpperCase()} {author.name[0].toUpperCase()}
</span> </span>
@ -225,8 +225,8 @@
</div> </div>
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<div class="flex items-baseline justify-between mb-2"> <div class="flex items-baseline justify-between mb-2">
<span class="font-medium text-gray-600">{author.name}</span> <span class="font-medium text-neutral-600">{author.name}</span>
<span class="text-sm text-gray-400 ml-4 flex-shrink-0" <span class="text-sm text-neutral-400 ml-4 flex-shrink-0"
>{formatDate(p.createdAt)}</span >{formatDate(p.createdAt)}</span
> >
</div> </div>
@ -236,7 +236,7 @@
<div class="flex items-center justify-between mt-3"> <div class="flex items-center justify-between mt-3">
<Reactions reactions={[]} zaps={0} /> <Reactions reactions={[]} zaps={0} />
<div <div
class="flex items-center gap-4 text-sm text-gray-400 flex-shrink-0" class="flex items-center gap-4 text-sm text-neutral-400 flex-shrink-0"
> >
<button <button
onclick={() => quotePost(p)} onclick={() => quotePost(p)}
@ -280,7 +280,7 @@
</div> </div>
{#if detail.replies.length > 0} {#if detail.replies.length > 0}
<div class="divide-y divide-gray-100 border-t border-gray-100"> <div class="divide-y divide-neutral-100 border-t border-neutral-100">
{#each detail.replies as reply, i} {#each detail.replies as reply, i}
<div class="py-6" bind:this={replyEls[i]}> <div class="py-6" bind:this={replyEls[i]}>
{@render post(reply, i + 1, () => {})} {@render post(reply, i + 1, () => {})}
@ -289,7 +289,7 @@
</div> </div>
{/if} {/if}
<div class="mt-8 border-t border-gray-200 pt-6 pl-18"> <div class="mt-8 border-t border-neutral-200 pt-6 pl-18">
{#if auth.user} {#if auth.user}
{#if replyError} {#if replyError}
<div <div
@ -318,7 +318,7 @@
</button> </button>
</div> </div>
{:else} {:else}
<p class=" text-gray-500 text-center"> <p class=" text-neutral-500 text-center">
To participate and reply, please To participate and reply, please
<button onclick={openLogin} class="text-brand hover:underline" <button onclick={openLogin} class="text-brand hover:underline"
>login now</button >login now</button
@ -336,7 +336,7 @@
/> />
</div> </div>
{:else} {:else}
<div class="py-12 text-center text-gray-400">Loading…</div> <div class="py-12 text-center text-neutral-400">Loading…</div>
{/if} {/if}
{#if selectionTarget && auth.user} {#if selectionTarget && auth.user}
@ -345,7 +345,7 @@
onmousedown={(e) => e.preventDefault()} onmousedown={(e) => e.preventDefault()}
onclick={quoteFromSelection} onclick={quoteFromSelection}
style="top: {selectionTarget.top}px; left: {selectionTarget.left}px;" style="top: {selectionTarget.top}px; left: {selectionTarget.left}px;"
class="fixed -translate-x-1/2 -translate-y-full z-50 rounded bg-gray-900 px-3 py-1 text-xs font-medium text-white shadow-md hover:bg-gray-700" class="fixed -translate-x-1/2 -translate-y-full z-50 rounded bg-neutral-900 px-3 py-1 text-xs font-medium text-white shadow-md hover:bg-neutral-700"
> >
Quote Quote
</button> </button>