💄 Add secondary colour

src/lib/posts/PostBottomBar.svelte

@@ -62,7 +62,7 @@
 		<div>{postView.counts.score}</div>
 		<button
 			class:text-muted={votePending}
-			class:text-primary={!votePending && (postView.my_vote ?? 0) < 0}
+			class:text-secondary={!votePending && (postView.my_vote ?? 0) < 0}
 			disabled={votePending || !myUser}
 			onclick={dislike}
 			title="Downvote ({postView.counts.downvotes})"

src/routes/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { browser } from '$app/environment'
 	import { goto } from '$app/navigation'
+	import Dismissable from '$lib/Dismissable.svelte'
 	import Spinner from '$lib/Spinner.svelte'
 	import {
 		findDefaultHomeSite,
@@ -13,29 +14,31 @@
 	import { onMount } from 'svelte'
 	import HomeSiteCard from './HomeSiteCard.svelte'
 
-	let input: string
-	let message: string | undefined
+	let input: string = $state('')
+	let message: string | undefined = $state()
+	let detail: string | undefined = $state()
 
 	onMount(() => {
 		void (async () => {
 			const homeSite = await findDefaultHomeSite()
-
 			if (homeSite) await goto(siteLink(homeSite.siteResponse.site_view.site))
 		})()
 	})
 
 	async function submit() {
-		if (input.startsWith('http://')) input = input.replace('http://', 'https://')
-		if (!input.startsWith('https://')) input = `https://${input}`
-
-		const url = newUrl(input)
+		const inputUrl = input.indexOf('//') === -1 ? `https://${input}` : input
+		const url = newUrl(inputUrl)
 		if (!url) {
 			message = 'Please enter a valid URL.'
 			return
 		}
 
-		const client = new LemmyHttp(input, { fetchFunction: clientFetch(undefined) })
-		const siteResponse = await client.getSite()
+		const client = new LemmyHttp(url.href, { fetchFunction: clientFetch(undefined) })
+		const siteResponse = await client.getSite().catch((error: unknown) => {
+			message = 'Failed to connect to the Lemmy instance.'
+			if (error instanceof Error) detail = error.message
+		})
+		if (!siteResponse) return
 
 		// Hidden sites need a way to connect to them
 		const found = await findHomeSite(siteResponse.site_view.site, siteResponse.my_user)
@@ -52,10 +55,9 @@
 		return goto(siteLink(siteResponse.site_view.site))
 	}
 
-	$: homeSitesPromise = browser && getHomeSites()
-
+	let homeSitesPromise = $state(getHomeSites())
 	function reloadHomeSites() {
-		homeSitesPromise = browser && getHomeSites()
+		if (browser) homeSitesPromise = getHomeSites()
 	}
 </script>
 
@@ -76,20 +78,29 @@
 			bind:value={input}
 			class="base-container rounded border-none p-2"
 			id="input"
-			on:keypress={k => k.key === 'Enter' && submit()}
-			on:submit={submit}
+			onkeypress={k => k.key === 'Enter' && submit()}
+			onsubmit={submit}
 			type="url"
 		/>
 
-		<button class="base-container rounded px-4 py-2" on:click={submit} type="submit">
+		<button class="base-container rounded px-4 py-2" onclick={submit} type="submit">
 			Submit
 		</button>
 	</div>
 
 	{#if message}
-		<p class="rounded-md bg-danger-container p-4 text-on-danger-container">
-			{message}
-		</p>
+		<Dismissable
+			on:dismiss={() => (message = undefined)}
+			class="bg-danger-container text-on-danger-container"
+		>
+			{@html message}
+
+			{#if detail}
+				<p class="text-muted">
+					{detail}
+				</p>
+			{/if}
+		</Dismissable>
 	{/if}
 
 	<h2 class="text-2xl font-semibold">Logins</h2>

src/routes/HomeSiteCard.svelte

@@ -3,12 +3,14 @@
 	import PersonInfobanner from './PersonInfobanner.svelte'
 	import SiteInfobanner from './SiteInfobanner.svelte'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly homeSite: HomeSite
+	}
 
-	export let homeSite: HomeSite
+	let { class: className = undefined, homeSite }: Props = $props()
 
-	$: if (homeSite.hidden) throw new Error('Attempting to render a hidden home site.')
+	if (homeSite.hidden) throw new Error('Attempting to render a hidden home site.')
 </script>
 
 <div class="flex flex-col justify-between {className}">

src/routes/debug/theme/+page.server.ts

@@ -0,0 +1,16 @@
+import { LemmyHttp } from 'lemmy-js-client'
+import { serverFetch } from '$lib/index.js'
+import type { PageServerLoad } from './$types.js'
+
+export const load = (async ({ fetch }) => {
+	const client = new LemmyHttp('https://lemmy.world', {
+		fetchFunction: serverFetch(fetch, undefined),
+	})
+
+	const site = await client.getSite()
+	const post = await client.getPost({ id: 21074811 })
+
+	return { post, site }
+}) satisfies PageServerLoad
+
+export const prerender = true

src/routes/debug/theme/+page.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+	import CommunitySidebar from '$lib/community/CommunitySidebar.svelte'
+	import Post from '$lib/posts/Post.svelte'
+	import type { PageData } from './$types.js'
+	import BgColourTest from './BgColourTest.svelte'
+	import TextColourTests from './TextColourTests.svelte'
+
+	export let data: PageData
+</script>
+
+<div class="container mx-auto mt-32 flex flex-col items-center gap-4">
+	<div>
+		<h1 class="text-4xl font-bold">Debug</h1>
+	</div>
+
+	<div>
+		<h2 class="text-2xl font-bold">Elements</h2>
+	</div>
+
+	<div class="flex flex-row gap-2">
+		<Post
+			class="container mx-auto"
+			allLanguages={[]}
+			communityView={undefined}
+			jwt={undefined}
+			moderators={[]}
+			myUser={undefined}
+			personView={undefined}
+			postView={data.post.post_view}
+			site={data.site.site_view.site}
+		/>
+
+		<CommunitySidebar
+			class=""
+			communityView={data.post.community_view}
+			jwt={undefined}
+			myUser={undefined}
+			siteView={data.site.site_view}
+		/>
+	</div>
+
+	<div>
+		<h2 class="text-2xl font-bold">Colours</h2>
+	</div>
+
+	<!-- Base -->
+	<BgColourTest class="bg-base text-on-base" title="Base" message="All elements are on the base." />
+
+	<BgColourTest
+		class="bg-base-container text-on-base-container"
+		title="Base Container"
+		message="Elements on the base may be inside of a container."
+	/>
+
+	<!-- Surface -->
+	<BgColourTest
+		class="bg-surface text-on-surface"
+		title="Surface"
+		message="It heavily contrasts with the base colour."
+	/>
+
+	<BgColourTest
+		class="bg-surface-container text-on-surface-container"
+		title="Surface Container"
+		message="It slightly contrasts with the base container colour."
+	/>
+
+	<!-- Muted -->
+	<BgColourTest
+		class="bg-muted text-on-muted"
+		title="Muted"
+		message="For disabled or unimportant elements."
+	/>
+
+	<!-- Primary -->
+	<BgColourTest
+		class="bg-primary text-on-primary"
+		title="Primary"
+		message="This is the primary colour."
+	/>
+
+	<BgColourTest
+		class="bg-primary-container text-on-primary-container"
+		title="Primary Container"
+		message="This is the colour of a primary container."
+	/>
+
+	<!-- Secondary -->
+	<BgColourTest
+		class="bg-secondary text-on-secondary"
+		title="Secondary"
+		message="This is the secondary colour."
+	/>
+
+	<BgColourTest
+		class="bg-secondary-container text-on-secondary-container"
+		title="Secondary Container"
+		message="This is the colour of a secondary container."
+	/>
+
+	<!-- Success -->
+	<BgColourTest
+		class="bg-success text-on-success"
+		title="Success"
+		message="This is the colour of success."
+	>
+		<TextColourTests />
+	</BgColourTest>
+
+	<BgColourTest
+		class="bg-success-container text-on-success-container"
+		title="Success Container"
+		message="This contains success."
+	/>
+
+	<!-- Warning -->
+	<BgColourTest
+		class="bg-warning text-on-warning"
+		title="Warning"
+		message="This is the colour of warnings."
+	/>
+
+	<BgColourTest
+		class="bg-warning-container text-on-warning-container"
+		title="Warning Container"
+		message="Are you sure you want to proceed?"
+	/>
+
+	<!-- Danger -->
+	<BgColourTest
+		class="bg-danger text-on-danger"
+		title="Danger"
+		message="This is the colour of danger."
+	/>
+
+	<BgColourTest
+		class="bg-danger-container text-on-danger-container"
+		title="Danger Container"
+		message="This action will permanently delete something."
+	/>
+</div>

src/routes/debug/theme/BgColourTest.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import TextColourTests from './TextColourTests.svelte'
+
+	interface Props {
+		readonly class?: string | undefined
+		readonly title: string
+		readonly message: string
+	}
+
+	const { class: className = '', title, message }: Props = $props()
+</script>
+
+<div class="w-full p-4 {className}">
+	<h2 class="text-lg font-semibold">{title}</h2>
+	<p>{message}</p>
+	<TextColourTests />
+</div>

src/routes/debug/theme/TextColourTests.svelte

@@ -0,0 +1,6 @@
+<script lang="ts"></script>
+
+Test for text colours: <span class="text-base">base</span>, <span class="text-danger">danger</span>,
+<span class="text-muted">muted</span>, <span class="text-primary">primary</span>,
+<span class="text-secondary">secondary</span>, <span class="text-success">success</span>,
+<span class="text-surface">surface</span>, <span class="text-warning">warning</span>

tailwind.config.cjs

@@ -12,6 +12,7 @@ export default {
 				danger: { container: colors.rose[800], DEFAULT: colors.rose[600] },
 				muted: colors.zinc[400],
 				primary: { container: colors.sky[900], DEFAULT: colors.sky[600] },
+				secondary: { container: colors.yellow[700], DEFAULT: colors.yellow[400] },
 				success: { container: colors.emerald[950], DEFAULT: colors.emerald[400] },
 				surface: { container: colors.neutral[800], DEFAULT: colors.neutral[200] },
 				warning: { container: colors.amber[900], DEFAULT: colors.amber[600] },
@@ -20,6 +21,7 @@ export default {
 					danger: { container: colors.rose[50], DEFAULT: colors.rose[50] },
 					muted: colors.zinc[50],
 					primary: { container: colors.sky[100], DEFAULT: colors.sky[50] },
+					secondary: { container: colors.yellow[200], DEFAULT: colors.yellow[800] },
 					success: { container: colors.emerald[50], DEFAULT: colors.emerald[950] },
 					surface: { container: colors.neutral[200], DEFAULT: colors.neutral[950] },
 					warning: { container: colors.amber[100], DEFAULT: colors.amber[50] },