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>
<button
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"}
>
<svg
@ -174,7 +174,7 @@
class="flex-1 overflow-y-auto flex flex-col"
>
{#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.
</div>
{:else}
@ -193,20 +193,20 @@
/>
{:else}
<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()}
</span>
{/if}
<span class="font-medium text-gray-600">{author.name}</span>
<span class="ml-auto text-xs text-gray-400"
<span class="font-medium text-neutral-600">{author.name}</span>
<span class="ml-auto text-xs text-neutral-400"
>{formatTime(msg.createdAt)}</span
>
</div>
<div class="mt-0.5">
{#if msg.replyToId}
<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}
<span class="font-medium">{parentAuthor?.name}</span>:
@ -217,7 +217,7 @@
</div>
{/if}
<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}
</p>
@ -228,7 +228,7 @@
e.stopPropagation();
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"
>
<svg
@ -244,16 +244,16 @@
</button>
{#if openMenuId === msg.id}
<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
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
>
<button
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
>
<button
@ -261,7 +261,7 @@
e.stopPropagation();
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
>
</div>
@ -275,20 +275,22 @@
{/if}
</div>
<div class="border-t border-gray-200 pt-4">
<div class="border-t border-neutral-200 pt-4">
{#if replyTarget}
{@const replyAuthor = resolveAuthor(replyTarget.pubkey)}
<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">
<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="text-gray-500">{truncate(replyTarget.content, 80)}</span>
<span class="text-neutral-500"
>{truncate(replyTarget.content, 80)}</span
>
</div>
<button
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"
>
✕
@ -309,7 +311,7 @@
rows="1"
disabled={sending}
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>
</div>
</aside>

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

@ -47,15 +47,15 @@
onclick={onClose}
aria-label="Close"
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>
<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
</h2>
<p class="mb-4 text-sm text-gray-600">
<p class="mb-4 text-sm text-neutral-600">
{#if joinState.codeRequired}
This community requires an invite code. Enter your code below to
request access. If you don't have one, contact the admin.
@ -87,7 +87,7 @@
autocapitalize="off"
spellcheck="false"
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}
@ -96,15 +96,14 @@
type="button"
onclick={onClose}
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
</button>
<button
type="button"
onclick={onRetry}
disabled={joinState.busy ||
(joinState.codeRequired && !code.trim())}
disabled={joinState.busy || (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"
>
{joinState.busy ? "Trying…" : "Retry"}

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

@ -20,29 +20,29 @@
<div>
<a
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
</a>
{#if mode === "simple"}
<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>
{:else}
<nav class="flex-auto mt-6">
{#each groups as group}
<div class="mb-8">
<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}
</p>
{#each rooms.filter((r) => r.group === group) as room}
<a
href="/room/{room.slug}"
class="flex items-center gap-2 py-1 hover:bg-gray-100
{activeRoom === room.slug ? ' text-brand' : 'text-gray-700'}"
class="flex items-center gap-2 py-1 hover:bg-neutral-100
{activeRoom === room.slug ? ' text-brand' : 'text-neutral-700'}"
>
{room.name}
</a>
@ -55,15 +55,17 @@
<nav class="flex-auto mt-6">
<div class="">
<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
</p>
<a href="/settings" class="block py-1 text-gray-500 hover:text-gray-900"
>Settings</a
<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"
>Contacts</a
<a
href="/contacts"
class="block py-1 text-neutral-500 hover:text-neutral-900">Contacts</a
>
</div>
</nav>
@ -84,7 +86,7 @@
onclick={() => {
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"
>
{#if auth.user.metadata.picture}
@ -95,7 +97,7 @@
/>
{:else}
<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"
>
{auth.user.shortName.slice(0, 1).toUpperCase()}

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

@ -97,12 +97,12 @@
type="button"
onclick={onClose}
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>
<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"}
</h2>
@ -124,7 +124,7 @@
{busy ? "Connecting…" : "Log in with extension"}
</button>
{#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.
</p>
{/if}
@ -149,7 +149,7 @@
autocorrect="off"
spellcheck="false"
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
onclick={handleNsec}
@ -158,7 +158,7 @@
>
{busy ? "Logging in…" : "Log in"}
</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.
</p>
<button

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

@ -332,13 +332,13 @@
<div class="flex flex-col {previewing ? 'flex-1 min-h-0' : ''}">
{#if previewing}
<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"
>
{#if value.trim()}
<PostContent content={value} {threadEventAuthors} />
{:else}
<p class="text-gray-400 italic">Nothing to preview</p>
<p class="text-neutral-400 italic">Nothing to preview</p>
{/if}
</div>
{:else}
@ -357,13 +357,13 @@
onblur={onTextareaBlur}
aria-autocomplete="list"
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>
{#if mentionOpen}
<div
id="mention-listbox"
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:mb-1={anchorAbove}
class:top-full={!anchorAbove}
@ -371,29 +371,31 @@
>
{#if mentionQuery === ""}
<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-gray-100={mergedResults.length > 0}
class:border-neutral-100={mergedResults.length > 0}
>
Type to search
</div>
{:else if remoteSearching && mergedResults.length > 0}
<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"
>
<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"
></span>
<span>Searching…</span>
</div>
{/if}
{#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}
<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"
></span>
<span>Searching…</span>
@ -408,7 +410,7 @@
role="option"
aria-selected={i === safeMentionIndex}
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) => {
e.preventDefault();
selectMention(entry);
@ -426,17 +428,17 @@
/>
{:else}
<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"
>
{profileLabel(entry)[0]?.toUpperCase() ?? "?"}
</span>
{/if}
<span class="font-medium text-gray-700 truncate">
<span class="font-medium text-neutral-700 truncate">
{profileLabel(entry)}
</span>
{#if profileSubLabel(entry)}
<span class="text-xs text-gray-400 truncate">
<span class="text-xs text-neutral-400 truncate">
{profileSubLabel(entry)}
</span>
{/if}
@ -449,14 +451,14 @@
</div>
{/if}
<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
type="button"
onclick={onUploadClick}
disabled={uploading || disabled || previewing || !BLOSSOM_URL}
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
width="16"
@ -483,7 +485,7 @@
onclick={togglePreview}
disabled={disabled || uploading}
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
width="16"

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

@ -20,9 +20,9 @@
{name[0].toUpperCase()}
</div>
{/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>
<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
>
</header>

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

@ -139,7 +139,7 @@
<div class="flex items-start justify-between">
<div>
{#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}
<h2 id="newdisc-title" class="text-2xl text-brand">New discussion</h2>
</div>
@ -147,7 +147,7 @@
type="button"
onclick={iconizeDraft}
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
width="20"
@ -169,7 +169,7 @@
<div>
<label
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
</label>
@ -180,7 +180,7 @@
bind:value={draftState.title}
disabled={draftState.publishing}
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>
@ -189,12 +189,12 @@
<div class="relative">
<label
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
</label>
<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}
<span
@ -228,7 +228,7 @@
/>
{#if suggestion}
<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"
>
<span class="invisible">{labelInput}</span><span
@ -240,7 +240,7 @@
</div>
{#if suggestOpen && filtered.length > 0}
<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}
<button
@ -255,7 +255,7 @@
</div>
{/if}
{#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}”
</p>
{/if}
@ -284,7 +284,7 @@
type="button"
onclick={onDiscard}
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
</button>

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

@ -405,7 +405,7 @@
/>
{:else if block.type === "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)}
</blockquote>
@ -416,7 +416,7 @@
{/snippet}
<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}
{@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">
{#each reactions as r}
<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 class="text-gray-600">{r.count}</span>
<span class="text-neutral-600">{r.count}</span>
</button>
{/each}
{#if zaps > 0}

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

@ -28,7 +28,7 @@
<img src={a.picture} alt="" class={cls} />
{:else}
<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()}
</span>
@ -37,20 +37,26 @@
<a
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 -->
<div class="flex-1 min-w-0">
<div class="text-lg mb-1.5 text-gray-900 leading-6">{thread.title}</div>
<div class="flex items-center gap-1.5 text-sm text-gray-500">
<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-neutral-500">
<span>by</span>
{@render avatar(thread.author, "h-5 w-5 rounded-full object-cover")}
{#if thread.repliers.length > 0}
<span>and</span>
<div class="flex -space-x-1.5">
{#each thread.repliers as r, i}
<span 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
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>
{/each}
</div>
@ -68,21 +74,24 @@
<!-- Col 3: replies | score | activity -->
<div class="flex shrink-0 items-center gap-6">
<div class="flex flex-col items-center gap-0.5">
<span class="text-gray-800">{thread.replyCount}</span>
<span class="text-sm text-gray-400">replies</span>
<span class="text-neutral-800">{thread.replyCount}</span>
<span class="text-sm text-neutral-400">replies</span>
</div>
<div class="flex flex-col items-center gap-0.5">
<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 class="flex flex-col items-center gap-0.5">
<div class="flex items-center gap-1">
{@render avatar(thread.lastActiveAuthor, "h-5 w-5 rounded-full object-cover")}
<span class="text-gray-800">{thread.lastActivity}</span>
{@render avatar(
thread.lastActiveAuthor,
"h-5 w-5 rounded-full object-cover",
)}
<span class="text-neutral-800">{thread.lastActivity}</span>
</div>
<span class="text-sm text-gray-400">activity</span>
<span class="text-sm text-neutral-400">activity</span>
</div>
</div>
</a>

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

@ -149,7 +149,7 @@
>
<!-- First post date -->
<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) : ""}
</div>
@ -169,7 +169,7 @@
<!-- Thumb -->
<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;"
onpointerdown={onThumbPointerDown}
onpointermove={onThumbPointerMove}
@ -190,7 +190,7 @@
<!-- Last post date -->
<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) : ""}
</div>

2
src/routes/layout.css
View file

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

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

@ -206,7 +206,7 @@
/>
{:else}
<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()}
</span>
@ -225,8 +225,8 @@
</div>
<div class="flex-1 min-w-0">
<div class="flex items-baseline justify-between mb-2">
<span class="font-medium text-gray-600">{author.name}</span>
<span class="text-sm text-gray-400 ml-4 flex-shrink-0"
<span class="font-medium text-neutral-600">{author.name}</span>
<span class="text-sm text-neutral-400 ml-4 flex-shrink-0"
>{formatDate(p.createdAt)}</span
>
</div>
@ -236,7 +236,7 @@
<div class="flex items-center justify-between mt-3">
<Reactions reactions={[]} zaps={0} />
<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
onclick={() => quotePost(p)}
@ -280,7 +280,7 @@
</div>
{#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}
<div class="py-6" bind:this={replyEls[i]}>
{@render post(reply, i + 1, () => {})}
@ -289,7 +289,7 @@
</div>
{/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 replyError}
<div
@ -318,7 +318,7 @@
</button>
</div>
{:else}
<p class=" text-gray-500 text-center">
<p class=" text-neutral-500 text-center">
To participate and reply, please
<button onclick={openLogin} class="text-brand hover:underline"
>login now</button
@ -336,7 +336,7 @@
/>
</div>
{: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 selectionTarget && auth.user}
@ -345,7 +345,7 @@
onmousedown={(e) => e.preventDefault()}
onclick={quoteFromSelection}
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
</button>