- Add layout options

LetrixZ · Jul 20, 2024 · 1e60101 · 1e60101
1 parent 86c835a
commit 1e60101
Show file tree

Hide file tree

Showing 15 changed files with 152 additions and 58 deletions.
diff --git a/server/Cargo.lock b/server/Cargo.lock
diff --git a/server/Cargo.toml b/server/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "server"
-version = "1.2.2"
+version = "1.3.0"
 edition = "2021"
 
 [dependencies]

diff --git a/web/eslint.config.js b/web/eslint.config.js
@@ -1,8 +1,8 @@
 import js from '@eslint/js';
-import ts from 'typescript-eslint';
-import svelte from 'eslint-plugin-svelte';
 import prettier from 'eslint-config-prettier';
+import svelte from 'eslint-plugin-svelte';
 import globals from 'globals';
+import ts from 'typescript-eslint';
 
 /** @type {import('eslint').Linter.FlatConfig[]} */
 export default [

diff --git a/web/package.json b/web/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "web-kit",
-	"version": "1.2.2",
+	"version": "1.3.0",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",

diff --git a/web/src/lib/components/list-item.svelte b/web/src/lib/components/list-item.svelte
@@ -81,7 +81,7 @@
 
 <div class="group h-auto w-auto space-y-2">
 	<a href={`/g/${archive.id}${$page.url.search}`} tabindex="-1">
-		<div class="overflow-clip rounded-md shadow relative">
+		<div class="relative overflow-clip rounded-md shadow">
 			<img
 				class="bg-neutral-300 dark:bg-neutral-600"
 				{width}

diff --git a/web/src/lib/components/reader-bar.svelte b/web/src/lib/components/reader-bar.svelte
@@ -28,7 +28,7 @@
 	import ChevronRight from 'lucide-svelte/icons/chevron-right';
 	import { onMount } from 'svelte';
 	import { fly } from 'svelte/transition';
-	import { ImageSize } from '../models';
+	import { ImageSize, TouchLayout } from '../models';
 
 	$: currentPage = $page.state.page || parseInt($page.params.page!);
 	$: total = $currentArchive ? $currentArchive.images.length : 0;
@@ -46,6 +46,10 @@
 		$prefs.imageSize = (mode ?? ImageSize.Original) as ImageSize;
 	};
 
+	const onLayoutChange = (mode: string | undefined) => {
+		$prefs.touchLayout = (mode ?? TouchLayout.LeftToRight) as TouchLayout;
+	};
+
 	$: {
 		if ($showBar) {
 			readerTimeout.reset();
@@ -214,6 +218,18 @@
 
 		<h3 class="text-lg font-medium">Touch layout</h3>
 
+		<ToggleGroup.Root
+			id="fit-mode"
+			variant="outline"
+			type="single"
+			value={$prefs.touchLayout}
+			onValueChange={onLayoutChange}
+			class="flex flex-wrap"
+		>
+			<ToggleGroup.Item value={TouchLayout.LeftToRight}>Left to Right</ToggleGroup.Item>
+			<ToggleGroup.Item value={TouchLayout.RightToLeft}>Right to Left</ToggleGroup.Item>
+		</ToggleGroup.Root>
+
 		<div class="flex items-center">
 			<Label for="preview-layout" class="w-full">Preview touch layout</Label>
 			<Checkbox id="preview-layout" bind:checked={$previewLayout} />

diff --git a/web/src/lib/components/reader.svelte b/web/src/lib/components/reader.svelte
@@ -3,20 +3,20 @@
 	import { page } from '$app/stores';
 	import { env } from '$env/dynamic/public';
 	import type { Archive } from '$lib/models';
-	import { ImageSize, type Image } from '$lib/models';
+	import { ImageSize, TouchLayout, type Image } from '$lib/models';
 	import {
 		currentArchive,
 		nextPage,
 		preferencesOpen,
 		prefs,
-		previewLayout,
 		prevPage,
 		readerPage,
-		showBar,
 	} from '$lib/reader-store';
-	import { cn, type ReaderPreferences } from '$lib/utils';
+	import { type ReaderPreferences } from '$lib/utils';
 	import pMap from 'p-map';
 	import { toast } from 'svelte-sonner';
+	import LeftToRight from './touch-layouts/left-to-right.svelte';
+	import RightToLeft from './touch-layouts/right-to-left.svelte';
 
 	export let archive: Archive;
 
@@ -41,9 +41,6 @@
 		$nextPage = currentPage < archive.pages ? currentPage + 1 : undefined;
 	}
 
-	$: prevPageUrl = $prevPage ? `${$prevPage}${$page.url.search}` : undefined;
-	$: nextPageUrl = $nextPage ? `${$nextPage}${$page.url.search}` : undefined;
-
 	$: $currentArchive = archive;
 
 	const changePage = (page?: number) => {
@@ -181,44 +178,13 @@
 <div class="flex h-dvh w-full flex-col overflow-clip">
 	<div bind:this={container} class="relative my-auto flex h-full overflow-auto">
 		<div class="absolute inset-0 flex min-h-full min-w-full max-w-full" style={containerStyle}>
-			<a
-				class={cn('relative h-full flex-grow outline-none', $previewLayout && 'bg-blue-500/50 ')}
-				href={prevPageUrl}
-				draggable="false"
-				on:click|preventDefault={() => changePage($prevPage)}
-			>
-				<span class="sr-only"> Previous page </span>
-			</a>
-			<button
-				class="h-full min-w-28 max-w-56 basis-[20%] outline-none"
-				on:click={() => ($showBar = !$showBar)}
-			/>
-			<a
-				class={cn('relative h-full flex-grow outline-none', $previewLayout && 'bg-red-500/50')}
-				href={nextPageUrl}
-				draggable="false"
-				on:click|preventDefault={() => changePage($nextPage)}
-			>
-				<span class="sr-only"> Next page </span>
-			</a>
+			{#if $prefs.touchLayout === TouchLayout.LeftToRight}
+				<LeftToRight {changePage} />
+			{:else if $prefs.touchLayout === TouchLayout.RightToLeft}
+				<RightToLeft {changePage} />
+			{/if}
 		</div>
 
-		{#if $previewLayout}
-			<div class="pointer-events-none fixed inset-0 flex h-full min-w-full max-w-full opacity-100">
-				<div class="relative flex h-full flex-grow items-center justify-center">
-					<span class="stroke rounded-md text-2xl font-semibold uppercase tracking-wider">
-						Prev
-					</span>
-				</div>
-				<div class="h-full min-w-28 max-w-56 basis-[20%]"></div>
-				<div class="relative flex h-full flex-grow items-center justify-center">
-					<span class="stroke rounded-md text-2xl font-semibold uppercase tracking-wider">
-						Next
-					</span>
-				</div>
-			</div>
-		{/if}
-
 		<img
 			bind:this={imageEl}
 			height={image?.height}

diff --git a/web/src/lib/components/touch-layouts/left-to-right.svelte b/web/src/lib/components/touch-layouts/left-to-right.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { nextPage, previewLayout, prevPage, showBar } from '~/lib/reader-store';
+	import { cn } from '~/lib/utils';
+
+	export let changePage: (page: number | undefined) => void;
+
+	$: prevPageUrl = $prevPage ? `${$prevPage}${$page.url.search}` : undefined;
+	$: nextPageUrl = $nextPage ? `${$nextPage}${$page.url.search}` : undefined;
+</script>
+
+<a
+	class={cn('relative h-full flex-grow outline-none', $previewLayout && 'bg-blue-500/50 ')}
+	href={prevPageUrl}
+	draggable="false"
+	on:click|preventDefault={() => changePage($prevPage)}
+>
+	<span class="sr-only"> Previous page </span>
+
+	{#if $previewLayout}
+		<span
+			class="stroke absolute inset-0 m-auto h-fit w-fit rounded-md text-2xl font-semibold uppercase tracking-wider"
+		>
+			Prev
+		</span>
+	{/if}
+</a>
+<button
+	class="h-full min-w-24 max-w-56 basis-[17.5%] outline-none"
+	on:click={() => ($showBar = !$showBar)}
+/>
+<a
+	class={cn('relative h-full flex-grow outline-none', $previewLayout && 'bg-red-500/50')}
+	href={nextPageUrl}
+	draggable="false"
+	on:click|preventDefault={() => changePage($nextPage)}
+>
+	<span class="sr-only"> Next page </span>
+
+	{#if $previewLayout}
+		<span
+			class="stroke absolute inset-0 m-auto h-fit w-fit rounded-md text-2xl font-semibold uppercase tracking-wider"
+		>
+			Next
+		</span>
+	{/if}
+</a>
diff --git a/web/src/lib/components/touch-layouts/right-to-left.svelte b/web/src/lib/components/touch-layouts/right-to-left.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { nextPage, previewLayout, prevPage, showBar } from '~/lib/reader-store';
+	import { cn } from '~/lib/utils';
+
+	export let changePage: (page: number | undefined) => void;
+
+	$: prevPageUrl = $prevPage ? `${$prevPage}${$page.url.search}` : undefined;
+	$: nextPageUrl = $nextPage ? `${$nextPage}${$page.url.search}` : undefined;
+</script>
+
+<a
+	class={cn('relative h-full flex-grow outline-none', $previewLayout && 'bg-red-500/50 ')}
+	href={nextPageUrl}
+	draggable="false"
+	on:click|preventDefault={() => changePage($nextPage)}
+>
+	<span class="sr-only"> Next page </span>
+
+	{#if $previewLayout}
+		<span
+			class="stroke absolute inset-0 m-auto h-fit w-fit rounded-md text-2xl font-semibold uppercase tracking-wider"
+		>
+			Next
+		</span>
+	{/if}
+</a>
+<button
+	class="h-full min-w-24 max-w-56 basis-[17.5%] outline-none"
+	on:click={() => ($showBar = !$showBar)}
+/>
+<a
+	class={cn('relative h-full flex-grow outline-none', $previewLayout && 'bg-blue-500/50')}
+	href={prevPageUrl}
+	draggable="false"
+	on:click|preventDefault={() => changePage($prevPage)}
+>
+	<span class="sr-only"> Previous page </span>
+
+	{#if $previewLayout}
+		<span
+			class="stroke absolute inset-0 m-auto h-fit w-fit rounded-md text-2xl font-semibold uppercase tracking-wider"
+		>
+			Prev
+		</span>
+	{/if}
+</a>
diff --git a/web/src/lib/models.ts b/web/src/lib/models.ts
@@ -120,6 +120,11 @@ export enum ImageSize {
 	FillHeight = 'fill-height',
 }
 
+export enum TouchLayout {
+	LeftToRight = 'ltr',
+	RightToLeft = 'rtl',
+}
+
 export interface TaxonomyTypes {
 	artists: TaxonomyId[];
 	circles: TaxonomyId[];
@@ -128,4 +133,4 @@ export interface TaxonomyTypes {
 	publishers: TaxonomyId[];
 	parodies: TaxonomyId[];
 	tags: TaxonomyId[];
-}
+}
diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts
@@ -6,7 +6,14 @@ import { cubicOut } from 'svelte/easing';
 import type { TransitionConfig } from 'svelte/transition';
 import { twMerge } from 'tailwind-merge';
 import { z } from 'zod';
-import { ImageSize, type Archive, type Image, type Tag, type Taxonomy } from './models';
+import {
+	ImageSize,
+	TouchLayout,
+	type Archive,
+	type Image,
+	type Tag,
+	type Taxonomy,
+} from './models';
 
 dayjs.extend(localizedFormat);
 
@@ -217,13 +224,15 @@ export function getMetadata(archive: Archive) {
 
 export const preferencesSchema = z.object({
 	imageSize: z.nativeEnum(ImageSize).catch(ImageSize.Original),
+	touchLayout: z.nativeEnum(TouchLayout).catch(TouchLayout.LeftToRight),
 	minWidth: z.number().optional(),
 	maxWidth: z.number().optional().default(1280),
 	barPlacement: z.enum(['top', 'bottom']).catch('bottom'),
 });
 
 export interface ReaderPreferences {
 	imageSize: ImageSize;
+	touchLayout: TouchLayout;
 	minWidth: number | undefined;
 	maxWidth: number | undefined;
 	barPlacement: 'top' | 'bottom';

diff --git a/web/src/routes/(app)/g/[id]/read/[page]/+layout@.svelte b/web/src/routes/(app)/g/[id]/read/[page]/+layout@.svelte
@@ -4,6 +4,7 @@
 	import cookie from 'cookie';
 	import { onMount } from 'svelte';
 	import '~/app.pcss';
+	import { TouchLayout } from '~/lib/models';
 	import { prefs } from '~/lib/reader-store';
 	import type { ReaderPreferences } from '~/lib/utils';
 
@@ -15,6 +16,10 @@
 		if (Object.entries(cookiePerfs).length) {
 			try {
 				$prefs = JSON.parse(cookiePerfs.reader) as ReaderPreferences;
+
+				if ($prefs.touchLayout === undefined) {
+					$prefs.touchLayout = TouchLayout.LeftToRight;
+				}
 			} finally {
 				isMounted = true;
 			}

diff --git a/web/src/routes/(app)/preferences/+page.server.ts b/web/src/routes/(app)/preferences/+page.server.ts
@@ -1,7 +1,7 @@
 import { env } from '$env/dynamic/private';
+import type { TaxonomyTypes } from '~/lib/models';
 import { handleFetchError } from '~/lib/utils';
 import type { PageServerLoad } from './$types';
-import type { TaxonomyTypes } from '~/lib/models';
 
 export const load: PageServerLoad = async ({ fetch }) => {
 	const taxonomies = (await fetch(`${env.SERVER_URL}/taxonomy`).then(

diff --git a/web/src/routes/(app)/preferences/+page.svelte b/web/src/routes/(app)/preferences/+page.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
-	import { DoorClosed } from 'lucide-svelte';
+	import cookie from 'cookie';
 	import { onMount } from 'svelte';
+	import { Checkbox } from '~/lib/components/ui/checkbox/index.js';
 	import Input from '~/lib/components/ui/input/input.svelte';
-	import { cn } from '~/lib/utils';
-	import cookie from 'cookie';
 	import { Label } from '~/lib/components/ui/label/index.js';
-	import { Checkbox } from '~/lib/components/ui/checkbox/index.js';
+	import { cn } from '~/lib/utils';
 
 	export let data;
 

diff --git a/web/vite.config.ts b/web/vite.config.ts
@@ -1,6 +1,6 @@
 import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
 import Icons from 'unplugin-icons/vite';
+import { defineConfig } from 'vite';
 
 export default defineConfig({
 	plugins: [