Merge pull request #59 from sheodox/0.8.0

0.8.0 - Light theme, vote/link theme customization

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "Alexandrite",
-	"version": "0.7.1",
+	"version": "0.8.0",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",
@@ -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.1",
 		"svelte": "^4.1.1",
 		"svelte-check": "^3.4.6",
 		"tslib": "^2.6.1",

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}

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;
 

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();

src/lib/VoteButtons.svelte

@@ -1,32 +1,50 @@
-<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;
 		display: flex;
 		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);

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,18 +184,20 @@
 					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
 					bind:value={$buffer[bk.replyText]}
 					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,

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();

src/lib/feeds/posts/PostEmbed.svelte

@@ -6,10 +6,13 @@
 		max-height: 10rem;
 		overflow: hidden;
 	}
+	div.read {
+		color: var(--sx-muted);
+	}
 </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">

src/lib/feeds/posts/PostTitle.svelte

@@ -1,13 +1,13 @@
 <style lang="scss">
-	a {
+	a.post-title {
 		transition: color 0.1s;
 		color: var(--sx-gray-25);
 		&:hover {
-			color: white !important;
+			color: var(--sx-gray-25) !important;
 		}
 	}
-	a.read {
-		color: var(--sx-gray-200);
+	a.post-title.read {
+		color: var(--sx-muted);
 	}
 	@media (max-width: 800px) {
 		a {

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() };

src/lib/feeds/posts/previews/PostBody.svelte

@@ -6,14 +6,17 @@
 		max-height: 10rem;
 		overflow: hidden;
 	}
+	div.read {
+		color: var(--sx-muted);
+	}
 	.fr {
 		float: right;
 	}
 </style>
 
 {#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
@@ -25,7 +28,7 @@
 					/>
 				</div>
 			{/if}
-			<Markdown noImages md={postView.post.body ?? ''} {viewSource} />
+			<Markdown noImages={preview} md={postView.post.body ?? ''} {viewSource} />
 		</div>
 	</div>
 {/if}