From 60609fa0f28ae06d5373b1c42c0ec3c231ce0084 Mon Sep 17 00:00:00 2001
From: sheodox <imagamer27@msn.com>
Date: Mon, 14 Aug 2023 20:10:14 -0500
Subject: [PATCH 1/7] Move the button to ban a reporter to a menu button

It's pretty unlikely a mod needs to use this button, but it was way too prominently featured.
---
 .../(app)/[instance]/reports/BanButton.svelte |  6 +++-
 .../(app)/[instance]/reports/Report.svelte    | 35 ++++++++++++-------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/routes/(app)/[instance]/reports/BanButton.svelte b/src/routes/(app)/[instance]/reports/BanButton.svelte
index 9ff493e..94ec468 100644
--- a/src/routes/(app)/[instance]/reports/BanButton.svelte
+++ b/src/routes/(app)/[instance]/reports/BanButton.svelte
@@ -5,7 +5,7 @@
 	{small}
 	icon={banned ? 'check' : 'ban'}
 >
-	{banned ? 'Unban' : 'Ban'}
+	{buttonText}
 </BusyButton>
 
 <script lang="ts">
@@ -26,10 +26,14 @@
 	export let personId: number;
 	export let personName: string;
 	export let communityId: number;
+	// if we know the user is banned, show a disclaimer otherwise
+	export let banStateKnown = true;
 	export let small = false;
 
 	const busy = getModActionPending('ban-person', personId);
 
+	$: buttonText = [banned ? 'Unban' : 'Ban', banStateKnown ? '' : '(Unsure if banned)'].filter((x) => !!x).join(' ');
+
 	async function toggleBan() {
 		const res = await modContext.banPerson({ personId, personName, ban: !banned, communityId });
 
diff --git a/src/routes/(app)/[instance]/reports/Report.svelte b/src/routes/(app)/[instance]/reports/Report.svelte
index 9806dd0..6213003 100644
--- a/src/routes/(app)/[instance]/reports/Report.svelte
+++ b/src/routes/(app)/[instance]/reports/Report.svelte
@@ -4,6 +4,10 @@
 		background: var(--sx-gray-transparent);
 		border-radius: 5px;
 	}
+	.menu-button-trigger {
+		width: 1em;
+		display: block;
+	}
 </style>
 
 <div class="report p-2">
@@ -12,18 +16,22 @@
 			<Stack dir="r" gap={1} align="center" cl="f-1">
 				Report by <UserLink user={creator} /><UserBadges user={creator} {bannedFromCommunity} />
 			</Stack>
-			<Stack dir="r" gap={2} align="center">
-				{#if !$bannedUsers.has(creator.id)}
-					<span class="sx-badge-gray">Unsure if banned.</span>
-				{/if}
-				<BanButton
-					banned={bannedFromCommunity}
-					personId={creator.id}
-					{communityId}
-					on:ban
-					personName={creator.display_name || creator.name}
-				/>
-			</Stack>
+			<MenuButton triggerClasses="small">
+				<span slot="trigger" class="menu-button-trigger">
+					<Icon icon="ellipsis-vertical" />
+					<span class="sr-only">Menu</span>
+				</span>
+				<ul slot="menu">
+					<BanButton
+						banned={bannedFromCommunity}
+						personId={creator.id}
+						{communityId}
+						on:ban
+						personName={creator.display_name || creator.name}
+						{banStateKnown}
+					/>
+				</ul>
+			</MenuButton>
 		</div>
 		<p class="m-0">
 			<span class="muted fw-bold">Reason:</span>
@@ -53,7 +61,7 @@
 </div>
 
 <script lang="ts">
-	import { Stack } from 'sheodox-ui';
+	import { Stack, MenuButton, Icon } from 'sheodox-ui';
 	import BusyButton from '$lib/BusyButton.svelte';
 	import BanButton from './BanButton.svelte';
 	import UserLink from '$lib/UserLink.svelte';
@@ -72,4 +80,5 @@
 	export let reason: string;
 	export let busy: boolean;
 	$: bannedFromCommunity = $bannedUsers.get(creator.id) ?? false;
+	$: banStateKnown = $bannedUsers.has(creator.id);
 </script>

From baee421c011b322570ff9a290a62af731ca095cf Mon Sep 17 00:00:00 2001
From: sheodox <imagamer27@msn.com>
Date: Mon, 14 Aug 2023 21:44:53 -0500
Subject: [PATCH 2/7] Light theme, more theme customization

---
 package-lock.json                             |  8 +-
 package.json                                  |  2 +-
 src/lib/VoteButtons.svelte                    | 50 ++++++-----
 src/lib/feeds/posts/PostTitle.svelte          |  2 +-
 src/lib/settings-context.ts                   | 13 +++
 src/routes/(app)/[instance]/+layout.svelte    | 22 ++++-
 .../(app)/[instance]/settings/+page.svelte    | 34 ++------
 .../[instance]/settings/ThemeSettings.svelte  | 83 +++++++++++++++++++
 .../[instance]/settings/ThemeSlider.svelte    | 29 +++++++
 src/routes/(meta)/+layout.svelte              |  2 +-
 src/routes/+layout.svelte                     |  4 +-
 vite.config.ts                                |  4 +
 12 files changed, 195 insertions(+), 58 deletions(-)
 create mode 100644 src/routes/(app)/[instance]/settings/ThemeSettings.svelte
 create mode 100644 src/routes/(app)/[instance]/settings/ThemeSlider.svelte

diff --git a/package-lock.json b/package-lock.json
index aeac42a..bb654be 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,7 +33,7 @@
 				"prettier": "^3.0.0",
 				"prettier-plugin-svelte": "^3.0.0",
 				"sass": "^1.64.1",
-				"sheodox-ui": "^0.19.38",
+				"sheodox-ui": "^0.20.0",
 				"svelte": "^4.1.1",
 				"svelte-check": "^3.4.6",
 				"tslib": "^2.6.1",
@@ -3533,9 +3533,9 @@
 			}
 		},
 		"node_modules/sheodox-ui": {
-			"version": "0.19.38",
-			"resolved": "https://registry.npmjs.org/sheodox-ui/-/sheodox-ui-0.19.38.tgz",
-			"integrity": "sha512-O3u/VNkHuzDa2pgAPQec5hY19refPSqCNPhD5irR3UbeZbPCnITl9yyKFAmqcBCq8QhFCeW6I2jA5dg0Q6xRgw==",
+			"version": "0.20.0",
+			"resolved": "https://registry.npmjs.org/sheodox-ui/-/sheodox-ui-0.20.0.tgz",
+			"integrity": "sha512-cleXaJjlEuliaORPtaxJm+RwhPG6GBdGF7RYDTe37dCxLmlwzdWypg+emkbpNtDIdLtBX1RjJbKxbjTF+L8+5Q==",
 			"dev": true,
 			"dependencies": {
 				"@floating-ui/dom": "^1.2.9",
diff --git a/package.json b/package.json
index 6614ff2..038d277 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
 		"prettier": "^3.0.0",
 		"prettier-plugin-svelte": "^3.0.0",
 		"sass": "^1.64.1",
-		"sheodox-ui": "^0.19.38",
+		"sheodox-ui": "^0.20.0",
 		"svelte": "^4.1.1",
 		"svelte-check": "^3.4.6",
 		"tslib": "^2.6.1",
diff --git a/src/lib/VoteButtons.svelte b/src/lib/VoteButtons.svelte
index f86f317..0e37d9e 100644
--- a/src/lib/VoteButtons.svelte
+++ b/src/lib/VoteButtons.svelte
@@ -1,18 +1,28 @@
-<style>
+<style lang="scss">
 	button {
 		color: var(--sx-gray-200);
 	}
-	.vote-up:enabled:hover {
-		color: var(--sx-pink-500);
+	.vote-up:enabled {
+		&:hover,
+		&[aria-pressed='true'] {
+			:global(.sx-theme-dark) & {
+				color: hsl(var(--upvote-hue), 85%, 70%);
+			}
+			:global(.sx-theme-light) & {
+				color: hsl(var(--upvote-hue), 85%, 50%);
+			}
+		}
 	}
-	.vote-up[aria-pressed='true'] {
-		color: var(--sx-pink-400);
-	}
-	.vote-down:enabled:hover {
-		color: var(--sx-blue-500);
-	}
-	.vote-down[aria-pressed='true'] {
-		color: var(--sx-blue-400);
+	.vote-down:enabled {
+		&:hover,
+		&[aria-pressed='true'] {
+			:global(.sx-theme-dark) & {
+				color: hsl(var(--downvote-hue), 85%, 70%);
+			}
+			:global(.sx-theme-light) & {
+				color: hsl(var(--downvote-hue), 85%, 50%);
+			}
+		}
 	}
 	.vote-counter {
 		height: 1.4rem;
@@ -20,13 +30,21 @@
 		align-items: center;
 		justify-content: center;
 		min-width: 3em;
+		border-radius: 5px;
+
+		.voted--1 & {
+			color: hsl(var(--downvote-hue), 85%, 70%);
+		}
+		.voted-1 & {
+			color: hsl(var(--upvote-hue), 85%, 70%);
+		}
 	}
 	.icon {
 		width: 1em;
 	}
 </style>
 
-<div class="{dir === 'row' ? 'f-row' : 'f-column'} align-items-center">
+<div class="vote-buttons {dir === 'row' ? 'f-row' : 'f-column'} align-items-center voted-{vote}">
 	<button
 		aria-pressed={votedUp}
 		class="vote-up"
@@ -48,7 +66,7 @@
 				<Icon icon="arrow-down" /><span class="sr-only">Down:</span>
 				{downvotes}
 			</span>
-			<span class="vote-counter sx-badge-{counterColor} text-align-center align-self-center responsive-text">
+			<span class="vote-counter text-align-center align-self-center responsive-text fw-bold">
 				{#if votePending}
 					<Spinner />
 				{:else}
@@ -101,12 +119,6 @@
 	// no vote is 0
 	$: votedDown = vote === -1;
 
-	$: counterColor = {
-		'-1': 'blue',
-		'0': 'gray',
-		'1': 'pink'
-	}[vote ?? 0];
-
 	function voteAs(clickedVote: number) {
 		const newVote = vote === clickedVote ? 0 : clickedVote;
 		dispatch('vote', newVote);
diff --git a/src/lib/feeds/posts/PostTitle.svelte b/src/lib/feeds/posts/PostTitle.svelte
index caf66c6..c31f996 100644
--- a/src/lib/feeds/posts/PostTitle.svelte
+++ b/src/lib/feeds/posts/PostTitle.svelte
@@ -3,7 +3,7 @@
 		transition: color 0.1s;
 		color: var(--sx-gray-25);
 		&:hover {
-			color: white !important;
+			color: var(--sx-gray-25) !important;
 		}
 	}
 	a.read {
diff --git a/src/lib/settings-context.ts b/src/lib/settings-context.ts
index 6030865..f17f22a 100644
--- a/src/lib/settings-context.ts
+++ b/src/lib/settings-context.ts
@@ -66,7 +66,14 @@ export const PostPreviewLayoutOptions: {
 ];
 
 export interface AlexandriteSettings {
+	//theme options
+	colorScheme: 'light' | 'dark' | null;
 	themeHue: number;
+	linkHue: number;
+	upvoteHue: number;
+	downvoteHue: number;
+	themeSaturation: number;
+	//other options
 	nsfwImageHandling: NSFWImageHandling;
 	sidebarVisible: boolean;
 	navSidebarDocked: boolean;
@@ -79,7 +86,13 @@ export interface AlexandriteSettings {
 const probablyMobile = window.innerWidth < 800;
 
 export const AlexandriteSettingsDefaults: AlexandriteSettings = {
+	// null uses the system default
+	colorScheme: null,
 	themeHue: 280,
+	linkHue: 197,
+	upvoteHue: 298,
+	downvoteHue: 212,
+	themeSaturation: 1,
 	nsfwImageHandling: 'HIDE',
 	sidebarVisible: !probablyMobile,
 	navSidebarDocked: false,
diff --git a/src/routes/(app)/[instance]/+layout.svelte b/src/routes/(app)/[instance]/+layout.svelte
index a62af47..0638943 100644
--- a/src/routes/(app)/[instance]/+layout.svelte
+++ b/src/routes/(app)/[instance]/+layout.svelte
@@ -107,7 +107,7 @@
 	import { afterNavigate, beforeNavigate, goto, invalidateAll } from '$app/navigation';
 	import CommunityContext from '$lib/community-context/CommunityContext.svelte';
 	import ModContext from '$lib/mod/ModContext.svelte';
-	import { Sidebar, Header, Icon, Search, Toasts, Modals } from 'sheodox-ui';
+	import { Sidebar, Header, Icon, Search, Toasts, Modals, getSxColorSchemeContext } from 'sheodox-ui';
 	import ProfileOverlay from '$lib/profiles/ProfileOverlay.svelte';
 	import { onDestroy, onMount } from 'svelte';
 	import AppSidebar from './AppSidebar.svelte';
@@ -164,6 +164,10 @@
 
 	const sidebarVisible = localStorageBackedStore('sidebar-visible', AlexandriteSettingsDefaults.sidebarVisible),
 		themeHue = localStorageBackedStore('theme-hue', AlexandriteSettingsDefaults.themeHue),
+		linkHue = localStorageBackedStore('link-hue', AlexandriteSettingsDefaults.linkHue),
+		upvoteHue = localStorageBackedStore('upvote-hue', AlexandriteSettingsDefaults.upvoteHue),
+		downvoteHue = localStorageBackedStore('downvote-hue', AlexandriteSettingsDefaults.downvoteHue),
+		themeSaturation = localStorageBackedStore('theme-saturation', AlexandriteSettingsDefaults.themeSaturation),
 		nsfwImageHandling = localStorageBackedStore('nsfw-handling', AlexandriteSettingsDefaults.nsfwImageHandling),
 		loadImagesAsWebp = localStorageBackedStore('load-images-as-webp', AlexandriteSettingsDefaults.loadImagesAsWebp),
 		feedLayout = localStorageBackedStore('feed-layout', AlexandriteSettingsDefaults.feedLayout),
@@ -174,8 +178,13 @@
 		),
 		navSidebarOpen = writable(false),
 		navSidebarDocked = localStorageBackedStore('nav-sidebar-docked', AlexandriteSettingsDefaults.navSidebarDocked),
+		colorScheme = localStorageBackedStore('color-scheme', AlexandriteSettingsDefaults.colorScheme),
 		cssVariables = writable<Record<string, string | number>>({});
 
+	const sxColorScheme = getSxColorSchemeContext();
+
+	$: $sxColorScheme = $colorScheme;
+
 	async function checkUnread() {
 		if (!jwt) {
 			return;
@@ -237,7 +246,12 @@
 	});
 
 	setSettingsContext({
+		colorScheme,
 		themeHue,
+		linkHue,
+		upvoteHue,
+		downvoteHue,
+		themeSaturation,
 		nsfwImageHandling,
 		sidebarVisible,
 		loadImagesAsWebp,
@@ -257,7 +271,11 @@
 		headerResizeObserver: ResizeObserver,
 		storeUnsubs: Unsubscriber[] = [];
 
-	$: $cssVariables['--sx-hue-gray'] = $themeHue + ' !important';
+	$: $cssVariables['--sxo-hue-gray'] = $themeHue;
+	$: $cssVariables['--sxo-hue-link'] = $linkHue;
+	$: $cssVariables['--upvote-hue'] = $upvoteHue;
+	$: $cssVariables['--downvote-hue'] = $downvoteHue;
+	$: $cssVariables['--sxo-hue-gray-saturation-strength'] = $themeSaturation;
 
 	onMount(async () => {
 		// track the height of the header, wanted for some styling in various places
diff --git a/src/routes/(app)/[instance]/settings/+page.svelte b/src/routes/(app)/[instance]/settings/+page.svelte
index 3198ec6..fb1b1ba 100644
--- a/src/routes/(app)/[instance]/settings/+page.svelte
+++ b/src/routes/(app)/[instance]/settings/+page.svelte
@@ -1,43 +1,23 @@
-<style lang="scss">
-	.description {
-		width: 20rem;
-	}
-</style>
-
 <Stack dir="c" gap={4} align="start">
 	<div class="mx-2">
 		<Checkbox bind:checked={$navSidebarDocked}>Keep navigation sidebar open</Checkbox>
 		<Checkbox bind:checked={$loadImagesAsWebp}>Load images as <code>.webp</code></Checkbox>
 	</div>
-	<Fieldset legend="Theme">
-		<Stack dir="r" align="center" gap={4}>
-			<label class="f-1">
-				Hue
-				<br />
-				<input type="range" min={0} max={360} step={1} bind:value={$themeHue} />
-			</label>
-			<button
-				on:click={() => ($themeHue = AlexandriteSettingsDefaults.themeHue)}
-				disabled={$themeHue === AlexandriteSettingsDefaults.themeHue}
-			>
-				Default
-			</button>
-		</Stack>
-		<p class="muted description">
-			<Icon icon="question-circle" variant="regular" /> If you use DarkReader, make sure to disable it for this site.
-		</p>
-	</Fieldset>
+	<div class="f-row gap-4 f-wrap align-items-start">
+		<ThemeSettings />
+	</div>
 	<DescriptiveToggles legend="NSFW Thumbnails" options={NSFWHandlingOptions} bind:group={$nsfwImageHandling} />
 	<FeedPostLayoutSettings />
 	<FeedLayoutSettings />
 </Stack>
 
 <script lang="ts">
-	import { getSettingsContext, AlexandriteSettingsDefaults, NSFWHandlingOptions } from '$lib/settings-context';
-	import { Stack, Fieldset, Checkbox, Icon } from 'sheodox-ui';
+	import { getSettingsContext, NSFWHandlingOptions } from '$lib/settings-context';
+	import { Stack, Checkbox } from 'sheodox-ui';
 	import FeedLayoutSettings from '$lib/FeedLayoutSettings.svelte';
 	import DescriptiveToggles from '$lib/DescriptiveToggles.svelte';
 	import FeedPostLayoutSettings from './FeedPostLayoutSettings.svelte';
+	import ThemeSettings from './ThemeSettings.svelte';
 
-	const { themeHue, nsfwImageHandling, navSidebarDocked, loadImagesAsWebp } = getSettingsContext();
+	const { nsfwImageHandling, navSidebarDocked, loadImagesAsWebp } = getSettingsContext();
 </script>
diff --git a/src/routes/(app)/[instance]/settings/ThemeSettings.svelte b/src/routes/(app)/[instance]/settings/ThemeSettings.svelte
new file mode 100644
index 0000000..bf0978f
--- /dev/null
+++ b/src/routes/(app)/[instance]/settings/ThemeSettings.svelte
@@ -0,0 +1,83 @@
+<style lang="scss">
+	.description {
+		width: 20rem;
+	}
+	.theme-preview {
+		pointer-events: none;
+	}
+</style>
+
+<Fieldset legend="Theme">
+	<Stack dir="r" gap={4}>
+		<Stack dir="c" gap={4} cl="f-1">
+			<label>
+				Color Scheme
+				<br />
+				<select bind:value={$colorScheme}>
+					{#each colorSchemes as opt}
+						<option value={opt.value}>{opt.label}</option>
+					{/each}
+				</select>
+			</label>
+			<ThemeSlider label="Theme Hue" min={0} max={360} step={1} bind:value={$themeHue} />
+			<ThemeSlider label="Theme Saturation" min={0} max={5} step={0.1} bind:value={$themeSaturation} />
+			<ThemeSlider label="Link Hue" min={0} max={360} step={1} bind:value={$linkHue} />
+			<ThemeSlider label="Upvote Hue" min={0} max={360} step={1} bind:value={$upvoteHue} />
+			<ThemeSlider label="Downvote Hue" min={0} max={360} step={1} bind:value={$downvoteHue} />
+		</Stack>
+	</Stack>
+	<p class="muted description">
+		<Icon icon="question-circle" variant="regular" /> If you use DarkReader, make sure to disable it for this site.
+	</p>
+	<div class="text-align-right">
+		<button class="tertiary" on:click={onDefaultTheme}>
+			<Icon icon="trash-can" />
+			Default
+		</button>
+	</div>
+</Fieldset>
+
+<Fieldset legend="Theme Preview">
+	<div class="card-body theme-preview">
+		<a href="/" class="inline-link">Link Text</a>
+
+		<VoteButtons score={1} vote={1} />
+		<VoteButtons score={1} vote={0} />
+		<VoteButtons score={1} vote={-1} />
+	</div>
+</Fieldset>
+
+<script lang="ts">
+	import { getSettingsContext, AlexandriteSettingsDefaults } from '$lib/settings-context';
+	import { Stack, Fieldset, Icon } from 'sheodox-ui';
+	import VoteButtons from '$lib/VoteButtons.svelte';
+	import ThemeSlider from './ThemeSlider.svelte';
+
+	const { themeHue, themeSaturation, linkHue, upvoteHue, downvoteHue, colorScheme } = getSettingsContext();
+
+	const colorSchemes = [
+		{
+			value: null,
+			label: 'System Default'
+		},
+		{
+			value: 'light',
+			label: 'Light'
+		},
+		{
+			value: 'dark',
+			label: 'Dark'
+		}
+	];
+
+	function onDefaultTheme() {
+		if (confirm('Are you sure you want to reset your theme?')) {
+			$themeHue = AlexandriteSettingsDefaults.themeHue;
+			$themeSaturation = AlexandriteSettingsDefaults.themeSaturation;
+			$colorScheme = AlexandriteSettingsDefaults.colorScheme;
+			$linkHue = AlexandriteSettingsDefaults.linkHue;
+			$upvoteHue = AlexandriteSettingsDefaults.upvoteHue;
+			$downvoteHue = AlexandriteSettingsDefaults.downvoteHue;
+		}
+	}
+</script>
diff --git a/src/routes/(app)/[instance]/settings/ThemeSlider.svelte b/src/routes/(app)/[instance]/settings/ThemeSlider.svelte
new file mode 100644
index 0000000..fcdd016
--- /dev/null
+++ b/src/routes/(app)/[instance]/settings/ThemeSlider.svelte
@@ -0,0 +1,29 @@
+<style>
+	.output {
+		width: 3rem;
+	}
+</style>
+
+<Stack dir="r" gap={2} align="end" cl="f-1">
+	<label class="f-1 f-column">
+		{label}
+		<input type="range" {min} {max} {step} bind:value class="f-1" />
+	</label>
+
+	<div aria-hidden>
+		<Tooltip>
+			<span slot="tooltip">{label}</span>
+			<input {value} readonly class="output" />
+		</Tooltip>
+	</div>
+</Stack>
+
+<script lang="ts">
+	import { Stack, Tooltip } from 'sheodox-ui';
+
+	export let label: string;
+	export let value: number;
+	export let min: number;
+	export let max: number;
+	export let step: number;
+</script>
diff --git a/src/routes/(meta)/+layout.svelte b/src/routes/(meta)/+layout.svelte
index 01e3d8a..9b6feaf 100644
--- a/src/routes/(meta)/+layout.svelte
+++ b/src/routes/(meta)/+layout.svelte
@@ -1,6 +1,6 @@
 <style>
 	:root {
-		--sx-hue-gray: 280 !important;
+		--sxo-hue-gray: 280;
 	}
 </style>
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 76d0195..5837cb3 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,4 @@
-<slot />
-
-<SheodoxUIStyles />
+<SheodoxUIStyles><slot /></SheodoxUIStyles>
 
 <script lang="ts">
 	import { SheodoxUIStyles } from 'sheodox-ui';
diff --git a/vite.config.ts b/vite.config.ts
index ab882da..e23894b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -9,5 +9,9 @@ export default defineConfig({
 	},
 	define: {
 		__ALEXANDRITE_VERSION__: JSON.stringify(process.env.npm_package_version)
+	},
+	optimizeDeps: {
+		// let `npm link sheodox-ui` work without wiping out `node_modules/.vite` and restarting Vite between every change
+		exclude: ['sheodox-ui']
 	}
 });

From 5a4799d40ecd855db348e2db513a1b7fe9a68560 Mon Sep 17 00:00:00 2001
From: sheodox <imagamer27@msn.com>
Date: Mon, 14 Aug 2023 21:48:29 -0500
Subject: [PATCH 3/7] Bump to version 0.8.0

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index bb654be..2a5fb6a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "Alexandrite",
-	"version": "0.7.1",
+	"version": "0.8.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "Alexandrite",
-			"version": "0.7.1",
+			"version": "0.8.0",
 			"dependencies": {
 				"@fortawesome/fontawesome-free": "^6.4.0",
 				"date-fns": "^2.30.0",
diff --git a/package.json b/package.json
index 038d277..e561503 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "Alexandrite",
-	"version": "0.7.1",
+	"version": "0.8.0",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",

From 387b826636721f1a85cd0e006d9738600c2fc33f Mon Sep 17 00:00:00 2001
From: sheodox <imagamer27@msn.com>
Date: Mon, 14 Aug 2023 22:17:37 -0500
Subject: [PATCH 4/7] Change which class is applied when a post is read

---
 src/lib/feeds/posts/PostEmbed.svelte         | 5 ++++-
 src/lib/feeds/posts/PostTitle.svelte         | 4 ++--
 src/lib/feeds/posts/previews/PostBody.svelte | 5 ++++-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/lib/feeds/posts/PostEmbed.svelte b/src/lib/feeds/posts/PostEmbed.svelte
index ba3fd11..1380f2d 100644
--- a/src/lib/feeds/posts/PostEmbed.svelte
+++ b/src/lib/feeds/posts/PostEmbed.svelte
@@ -6,10 +6,13 @@
 		max-height: 10rem;
 		overflow: hidden;
 	}
+	div.read {
+		color: var(--sx-gray-200);
+	}
 </style>
 
 {#if hasEmbedText}
-	<div class="m-0 card embed-preview responsive-text" class:muted={postView.read && reflectRead} class:preview>
+	<div class="m-0 card embed-preview responsive-text" class:read={postView.read && reflectRead} class:preview>
 		<p class="card-body m-0">
 			{#if postView.post.embed_title}
 				<span class="muted fw-bold embed-title-hint">
diff --git a/src/lib/feeds/posts/PostTitle.svelte b/src/lib/feeds/posts/PostTitle.svelte
index c31f996..5c91773 100644
--- a/src/lib/feeds/posts/PostTitle.svelte
+++ b/src/lib/feeds/posts/PostTitle.svelte
@@ -1,12 +1,12 @@
 <style lang="scss">
-	a {
+	a.post-title {
 		transition: color 0.1s;
 		color: var(--sx-gray-25);
 		&:hover {
 			color: var(--sx-gray-25) !important;
 		}
 	}
-	a.read {
+	a.post-title.read {
 		color: var(--sx-gray-200);
 	}
 	@media (max-width: 800px) {
diff --git a/src/lib/feeds/posts/previews/PostBody.svelte b/src/lib/feeds/posts/previews/PostBody.svelte
index 4ddcea7..35479cb 100644
--- a/src/lib/feeds/posts/previews/PostBody.svelte
+++ b/src/lib/feeds/posts/previews/PostBody.svelte
@@ -6,6 +6,9 @@
 		max-height: 10rem;
 		overflow: hidden;
 	}
+	div.read {
+		color: var(--sx-gray-200);
+	}
 	.fr {
 		float: right;
 	}
@@ -13,7 +16,7 @@
 
 {#if postAssertions.has.body && (!dedupeEmbed || postView.post.body !== postView.post.embed_description)}
 	<div class="card m-0">
-		<div class="card-body embed-preview responsive-text" class:muted={postView.read && reflectRead} class:preview>
+		<div class="card-body embed-preview responsive-text" class:read={postView.read && reflectRead} class:preview>
 			{#if !preview}
 				<div class="fr">
 					<IconButton

From d9e282e593a7c4f3748c3c51675356ab8f93df6d Mon Sep 17 00:00:00 2001
From: sheodox <imagamer27@msn.com>
Date: Tue, 15 Aug 2023 17:47:22 -0500
Subject: [PATCH 5/7] Light theme style improvements

Colors for read post text are better, code blocks and view source styles look better in light mode.
---
 package-lock.json                            |  8 ++++----
 package.json                                 |  2 +-
 src/lib/Markdown.svelte                      |  2 +-
 src/lib/PostPage.svelte                      | 12 ++++++++++--
 src/lib/feeds/posts/PostEmbed.svelte         |  2 +-
 src/lib/feeds/posts/PostTitle.svelte         |  2 +-
 src/lib/feeds/posts/previews/PostBody.svelte |  4 ++--
 src/lib/markdown.scss                        | 16 ++++++++++++++++
 8 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2a5fb6a..645ba44 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,7 +33,7 @@
 				"prettier": "^3.0.0",
 				"prettier-plugin-svelte": "^3.0.0",
 				"sass": "^1.64.1",
-				"sheodox-ui": "^0.20.0",
+				"sheodox-ui": "^0.20.1",
 				"svelte": "^4.1.1",
 				"svelte-check": "^3.4.6",
 				"tslib": "^2.6.1",
@@ -3533,9 +3533,9 @@
 			}
 		},
 		"node_modules/sheodox-ui": {
-			"version": "0.20.0",
-			"resolved": "https://registry.npmjs.org/sheodox-ui/-/sheodox-ui-0.20.0.tgz",
-			"integrity": "sha512-cleXaJjlEuliaORPtaxJm+RwhPG6GBdGF7RYDTe37dCxLmlwzdWypg+emkbpNtDIdLtBX1RjJbKxbjTF+L8+5Q==",
+			"version": "0.20.1",
+			"resolved": "https://registry.npmjs.org/sheodox-ui/-/sheodox-ui-0.20.1.tgz",
+			"integrity": "sha512-83X7ZGaTdGfdsXwMQur+ai597F70VQGNs6ZoRAIzHab+EkVM8BXIlP4PCRBJZkcH+O91H4MQVVjjTw7Qg34kMA==",
 			"dev": true,
 			"dependencies": {
 				"@floating-ui/dom": "^1.2.9",
diff --git a/package.json b/package.json
index e561503..4801896 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
 		"prettier": "^3.0.0",
 		"prettier-plugin-svelte": "^3.0.0",
 		"sass": "^1.64.1",
-		"sheodox-ui": "^0.20.0",
+		"sheodox-ui": "^0.20.1",
 		"svelte": "^4.1.1",
 		"svelte-check": "^3.4.6",
 		"tslib": "^2.6.1",
diff --git a/src/lib/Markdown.svelte b/src/lib/Markdown.svelte
index 91335e9..527512e 100644
--- a/src/lib/Markdown.svelte
+++ b/src/lib/Markdown.svelte
@@ -2,7 +2,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="markdown-renderer has-inline-links" on:click={toggleFullSize}>
 	{#if viewSource}
-		<pre class="ws-pre-line">{md}</pre>
+		<pre class="ws-pre-line view-source">{md}</pre>
 	{:else}
 		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 		{@html rendered}
diff --git a/src/lib/PostPage.svelte b/src/lib/PostPage.svelte
index 9ac7c04..a632613 100644
--- a/src/lib/PostPage.svelte
+++ b/src/lib/PostPage.svelte
@@ -65,7 +65,7 @@
 			</div>
 			<PostLayout
 				{postView}
-				expandPostContent={showPost}
+				bind:expandPostContent={showPost}
 				supportsOverlay={false}
 				forceLayout="LIST"
 				bind:api={postLayoutApi}
@@ -76,6 +76,12 @@
 					<a href="#comments" class="button tertiary {small}"
 						><Icon icon="chevron-down" /> To Comments ({postView.counts.comments})</a
 					>
+					{#if postAssertions.has.any}
+						<button class="tertiary {small}" on:click={() => (showPost = !showPost)}>
+							<Icon icon={showPost ? 'eye-slash' : 'newspaper'} />
+							{showPost ? 'Hide' : 'Show'} Content
+						</button>
+					{/if}
 				</Stack>
 			</PostLayout>
 			<hr class="w-100" id="comments" />
@@ -201,7 +207,7 @@
 	import type { VirtualFeedAPI } from './virtual-feed';
 	import type { CommentAPI, CommentBranch } from './comments/comment-utils';
 	import { getCommunityContext } from './community-context/community-context';
-	import type { PostLayoutAPI } from './feeds/posts/post-utils';
+	import { makePostAssertions, type PostLayoutAPI } from './feeds/posts/post-utils';
 	import { getAppContext } from './app-context';
 
 	const dispatch = createEventDispatcher<{ close: void }>();
@@ -227,6 +233,8 @@
 	$: client = $profile.client;
 	$: jwt = $profile.jwt;
 
+	$: postAssertions = makePostAssertions(postView);
+
 	const postCVStore = getContentViewStore();
 
 	const commentCVStore = createContentViewStore();
diff --git a/src/lib/feeds/posts/PostEmbed.svelte b/src/lib/feeds/posts/PostEmbed.svelte
index 1380f2d..f98e41f 100644
--- a/src/lib/feeds/posts/PostEmbed.svelte
+++ b/src/lib/feeds/posts/PostEmbed.svelte
@@ -7,7 +7,7 @@
 		overflow: hidden;
 	}
 	div.read {
-		color: var(--sx-gray-200);
+		color: var(--sx-muted);
 	}
 </style>
 
diff --git a/src/lib/feeds/posts/PostTitle.svelte b/src/lib/feeds/posts/PostTitle.svelte
index 5c91773..d14eeed 100644
--- a/src/lib/feeds/posts/PostTitle.svelte
+++ b/src/lib/feeds/posts/PostTitle.svelte
@@ -7,7 +7,7 @@
 		}
 	}
 	a.post-title.read {
-		color: var(--sx-gray-200);
+		color: var(--sx-muted);
 	}
 	@media (max-width: 800px) {
 		a {
diff --git a/src/lib/feeds/posts/previews/PostBody.svelte b/src/lib/feeds/posts/previews/PostBody.svelte
index 35479cb..552a8f9 100644
--- a/src/lib/feeds/posts/previews/PostBody.svelte
+++ b/src/lib/feeds/posts/previews/PostBody.svelte
@@ -7,7 +7,7 @@
 		overflow: hidden;
 	}
 	div.read {
-		color: var(--sx-gray-200);
+		color: var(--sx-muted);
 	}
 	.fr {
 		float: right;
@@ -28,7 +28,7 @@
 					/>
 				</div>
 			{/if}
-			<Markdown noImages md={postView.post.body ?? ''} {viewSource} />
+			<Markdown noImages={preview} md={postView.post.body ?? ''} {viewSource} />
 		</div>
 	</div>
 {/if}
diff --git a/src/lib/markdown.scss b/src/lib/markdown.scss
index 543e61d..d02ce83 100644
--- a/src/lib/markdown.scss
+++ b/src/lib/markdown.scss
@@ -19,9 +19,25 @@
 		border-radius: 5px;
 		padding: var(--sx-spacing-1);
 
+		&.view-source {
+			.sx-theme-dark & {
+				color: var(--sx-text-color);
+			}
+			.sx-theme-light & {
+				color: var(--sx-gray-900);
+			}
+		}
+
 		code {
 			background: none;
 		}
+
+		.sx-theme-dark & {
+			background: var(--sx-gray-transparent-light);
+		}
+		.sx-theme-light & {
+			background: var(--sx-gray-100);
+		}
 	}
 	summary {
 		cursor: pointer;

From 673cabcdd265c8768003003f0ddd372e209d4f8d Mon Sep 17 00:00:00 2001
From: sheodox <imagamer27@msn.com>
Date: Tue, 15 Aug 2023 17:49:04 -0500
Subject: [PATCH 6/7] Bring back the large "Show Content" button, move buttons
 below when on mobile

The large "Show Content" button was a lot more obvious than the tiny icon-only button in the post. When viewing nsfw posts it was not obvious that there's a button to show the post contents.
---
 .../posts/previews/ListPostPreview.svelte     | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/lib/feeds/posts/previews/ListPostPreview.svelte b/src/lib/feeds/posts/previews/ListPostPreview.svelte
index b6d743c..b358cb8 100644
--- a/src/lib/feeds/posts/previews/ListPostPreview.svelte
+++ b/src/lib/feeds/posts/previews/ListPostPreview.svelte
@@ -43,16 +43,25 @@
 				{#if direction === 'row' && mode === 'list'}
 					<ListContentPreviews {postView} />
 				{/if}
-				<Stack dir="r" gap={2} align="center" cl="responsive-text">
-					<slot name="embed-expand" />
-					<slot name="actions" />
-					<PostTime {postView} />
-				</Stack>
+				{#if !buttonsBelow}
+					<Stack dir="r" gap={2} align="center" cl="responsive-text">
+						<slot name="embed-expand" />
+						<slot name="actions" />
+						<PostTime {postView} />
+					</Stack>
+				{/if}
 			</Stack>
 		</div>
 		{#if direction === 'column' && mode === 'list'}
 			<ListContentPreviews {postView} />
 		{/if}
+		{#if buttonsBelow}
+			<Stack dir="r" gap={2} align="center" cl="responsive-text">
+				<slot name="embed-expand" />
+				<slot name="actions" />
+				<PostTime {postView} />
+			</Stack>
+		{/if}
 	</Stack>
 </article>
 
@@ -76,12 +85,15 @@
 	export let mode: 'show' | 'list' = 'list';
 	export let supportsOverlay = true;
 	let direction = 'row';
+	let buttonsBelow = false;
 
 	const { screenDimensions } = getAppContext();
 
 	function checkSize(el: HTMLElement) {
 		const obs = new ResizeObserver((entries) => {
-			direction = (entries.at(0)?.borderBoxSize[0]?.inlineSize ?? 0) < 900 ? 'column' : 'row';
+			const availableWidth = entries.at(0)?.borderBoxSize[0]?.inlineSize ?? 0;
+			direction = availableWidth < 900 ? 'column' : 'row';
+			buttonsBelow = availableWidth < 600;
 		});
 		obs.observe(el);
 		return { destroy: () => obs.disconnect() };

From 2bcc7cb7838d5acf6b3e1ce1fe3cc30ba55436c2 Mon Sep 17 00:00:00 2001
From: sheodox <imagamer27@msn.com>
Date: Tue, 15 Aug 2023 18:17:41 -0500
Subject: [PATCH 7/7] Autofocus the comment editor, submit comment on
 ctrl/cmd+enter

---
 src/lib/MarkdownEditor.svelte         |  3 +++
 src/lib/comments/Comment.svelte       | 14 +++++++++++---
 src/lib/comments/CommentEditor.svelte |  3 ++-
 src/lib/utils.ts                      | 28 +++++++++++++++++++++++++++
 4 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/src/lib/MarkdownEditor.svelte b/src/lib/MarkdownEditor.svelte
index 5fe1de6..3d42871 100644
--- a/src/lib/MarkdownEditor.svelte
+++ b/src/lib/MarkdownEditor.svelte
@@ -17,6 +17,7 @@
 	<Stack dir="c">
 		<Stack dir="c">
 			<label for={textareaId} class="fw-bold p-2">{label}</label>
+			<!-- svelte-ignore a11y-autofocus -->
 			<textarea
 				id={textareaId}
 				rows="6"
@@ -26,6 +27,7 @@
 				bind:this={textarea}
 				{required}
 				on:keydown={keydown}
+				{autofocus}
 			/>
 			<Stack dir="r" gap={1}>
 				<IconButton icon="bold" text="Bold" type="button" on:click={format.bold} />
@@ -76,6 +78,7 @@
 	export let name: string;
 	export let disabled = false;
 	export let required = true;
+	export let autofocus = false;
 
 	let busy = false;
 
diff --git a/src/lib/comments/Comment.svelte b/src/lib/comments/Comment.svelte
index f08d725..f3f6f42 100644
--- a/src/lib/comments/Comment.svelte
+++ b/src/lib/comments/Comment.svelte
@@ -174,7 +174,7 @@
 			</Stack>
 		{/if}
 		{#if $buffer[bk.showEditComposer] && !postLocked}
-			<form bind:this={editForm} class="reply-editor">
+			<form bind:this={editForm} class="reply-editor" use:submitOnHardEnter>
 				<input type="hidden" name="commentId" value={comment.id} />
 				<CommentEditor
 					bind:value={$buffer[bk.editText]}
@@ -184,11 +184,12 @@
 					on:cancel={() => ($buffer[bk.showEditComposer] = false)}
 					submitting={$editState.busy}
 					community={contentView.view.community}
+					autofocus
 				/>
 			</form>
 		{/if}
 		{#if $buffer[bk.showReplyComposer] && $profile.loggedIn && !postLocked}
-			<form bind:this={replyForm} class="reply-editor">
+			<form bind:this={replyForm} class="reply-editor" use:submitOnHardEnter>
 				<input type="hidden" name="parentId" value={comment.id} />
 				<CommentEditor
 					cancellable
@@ -196,6 +197,7 @@
 					on:cancel={() => ($buffer[bk.showReplyComposer] = false)}
 					submitting={$replyState.busy}
 					community={contentView.view.community}
+					autofocus
 				/>
 			</form>
 		{/if}
@@ -228,7 +230,13 @@
 	import CommunityLink from '../CommunityLink.svelte';
 	import EllipsisText from '$lib/EllipsisText.svelte';
 	import { getCommentContextId, nameAtInstance } from '../nav-utils';
-	import { createStatefulForm, type ActionFn, createStatefulAction, type ExtraAction } from '../utils';
+	import {
+		createStatefulForm,
+		type ActionFn,
+		createStatefulAction,
+		type ExtraAction,
+		submitOnHardEnter
+	} from '../utils';
 	import { getVirtualFeedBuffer } from '../virtual-feed';
 	import {
 		commentViewToContentView,
diff --git a/src/lib/comments/CommentEditor.svelte b/src/lib/comments/CommentEditor.svelte
index b508852..269fca4 100644
--- a/src/lib/comments/CommentEditor.svelte
+++ b/src/lib/comments/CommentEditor.svelte
@@ -8,7 +8,7 @@
 <div class:submitting>
 	<Stack dir="c" gap={2}>
 		<Stack dir="c">
-			<MarkdownEditor name="content" {label} bind:value />
+			<MarkdownEditor name="content" {label} bind:value {autofocus} />
 		</Stack>
 
 		<Stack dir="r" justify="between" align="center">
@@ -54,6 +54,7 @@
 	export let showSubmit = true;
 	export let useLanguage = true;
 	export let community: Community | undefined = undefined;
+	export let autofocus = false;
 	const initialValue = value;
 
 	const communityContext = getCommunityContext();
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index f929deb..1d4ec0a 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,5 +1,6 @@
 import { goto } from '$app/navigation';
 import { readable, writable } from 'svelte/store';
+import { getCtrlBasedHotkeys } from './app-context';
 
 // a wrapper for things in a MenuButton, used by ExtraActions.svelte
 export interface ExtraAction {
@@ -263,3 +264,30 @@ export function isElementEditable(el: HTMLElement) {
 
 	return ['input', 'textarea', 'select'].includes(nodeName);
 }
+
+export function submitOnHardEnter(formEl: HTMLFormElement) {
+	// make a button that can trigger a proper form submit.
+	// we need a button that would trigger submitting a form if
+	// clicked, so formEl.requestSubmit works. and
+	// formEL.submit() is unusable because it doesn't run handlers
+	// and does an unwanted full page navigation
+	const submitEl = document.createElement('button');
+	submitEl.style.display = 'none';
+	submitEl.classList.add('hard-enter-submit-button');
+
+	formEl.appendChild(submitEl);
+	function onKeydown(e: KeyboardEvent) {
+		const ctrl = getCtrlBasedHotkeys() ? e.ctrlKey : e.metaKey;
+
+		if (e.key === 'Enter' && ctrl) {
+			formEl.requestSubmit(submitEl);
+		}
+	}
+
+	formEl.addEventListener('keydown', onKeydown);
+	return {
+		destroy: () => {
+			formEl.addEventListener('keydown', onKeydown);
+		}
+	};
+}