Merge pull request #665 from tonymushah/theme-and-profiles-integration

Theme and profiles integration

package.json

@@ -64,6 +64,7 @@
     "sass": "^1.77.8",
     "storybook": "^8.2.7",
     "svelte": "^4.2.18",
+    "svelte-awesome-color-picker": "^3.1.4",
     "svelte-check": "^3.8.5",
     "svelte-markdown": "^0.4.1",
     "svelte2tsx": "^0.7.15",

src-tauri/core/tauri.conf.json5

@@ -2,7 +2,7 @@
     "$schema": "../../node_modules/@tauri-apps/cli/schema.json",
     "build": {
         "beforeBuildCommand": "pnpm run vite:build",
-        "beforeDevCommand": "pnpm run storybook:dev",
+        "beforeDevCommand": "pnpm run vite:dev",
         "devPath": "http://localhost:9305",
         "distDir": "../../build",
         "withGlobalTauri": false

src-tauri/mangadex/src/error.rs

@@ -74,6 +74,8 @@ pub enum Error {
     ),
     #[error("Got an error while joining a thread")]
     StdThreadJoinError,
+    #[error("No default theme selected")]
+    NoDefaultThemeSelected,
 }
 
 impl From<favicon_picker::error::Error> for Error {

src-tauri/mangadex/src/mutation/user_option.rs

@@ -128,6 +128,24 @@ impl UserOptionMutations {
         watches.manga_list_style.send_data(inner)?;
         Ok(MangaListStyleStore::extract_from_store(&store_write)?.into())
     }
+    pub async fn update_default_theme(
+        &self,
+        ctx: &Context<'_>,
+        theme: Option<MangaDexTheme>,
+    ) -> Result<MangaDexTheme> {
+        let theme = theme.unwrap_or_default();
+        let store = get_store::<tauri::Wry>(ctx).await?;
+        let mut store_write = store.write().await;
+        let name = (*ThemeProfileDefaultKey::extract_from_store(&store_write)?)
+            .clone()
+            .ok_or(crate::Error::NoDefaultThemeSelected)?;
+        let watches = get_watches_from_graphql_context::<tauri::Wry>(ctx)?;
+        let mut inner = ThemeProfiles::extract_from_store(&store_write)?;
+        (*inner).insert(name, theme.clone());
+        inner.insert_and_save(&mut store_write)?;
+        watches.themes.send_data(inner)?;
+        Ok(theme)
+    }
     pub async fn set_default_theme_profile(
         &self,
         ctx: &Context<'_>,

src/lib/ROUTES.ts

@@ -37,6 +37,7 @@ const PAGES = {
   "/mangadex/list/new": `/mangadex/list/new`,
   "/mangadex/login": `/mangadex/login`,
   "/mangadex/settings": `/mangadex/settings`,
+  "/mangadex/settings/themes": `/mangadex/settings/themes`,
   "/mangadex/tag/[id]": (params: { id: (string | number) }) => {
     return `/mangadex/tag/${params.id}`
   },
@@ -185,7 +186,7 @@ export function route<T extends keyof AllTypes>(key: T, ...params: any[]): strin
 * ```
 */
 export type KIT_ROUTES = {
-  PAGES: { '/': never, '/grid-test': never, '/mangadex': never, '/mangadex/author/[id]': 'id', '/mangadex/chapter/[id]': 'id', '/mangadex/graphiql': never, '/mangadex/group': never, '/mangadex/group/[id]': 'id', '/mangadex/group/[id]/titles': 'id', '/mangadex/group/[id]/uploads': 'id', '/mangadex/group/new': never, '/mangadex/list': never, '/mangadex/list/[id]': 'id', '/mangadex/list/new': never, '/mangadex/login': never, '/mangadex/settings': never, '/mangadex/tag/[id]': 'id', '/mangadex/title/[id]': 'id', '/mangadex/title/[id]/covers': 'id', '/mangadex/title/[id]/related': 'id', '/mangadex/titles': never, '/mangadex/titles/feed': never, '/mangadex/upload': never, '/mangadex/user': never, '/mangadex/user/[id]': 'id', '/mangadex/user/[id]/lists': 'id', '/mangadex/user/[id]/uploads': 'id', '/mangadex/user/me': never, '/mangadex/user/me/lists': never, '/mangadex/user/me/uploads': never }
+  PAGES: { '/': never, '/grid-test': never, '/mangadex': never, '/mangadex/author/[id]': 'id', '/mangadex/chapter/[id]': 'id', '/mangadex/graphiql': never, '/mangadex/group': never, '/mangadex/group/[id]': 'id', '/mangadex/group/[id]/titles': 'id', '/mangadex/group/[id]/uploads': 'id', '/mangadex/group/new': never, '/mangadex/list': never, '/mangadex/list/[id]': 'id', '/mangadex/list/new': never, '/mangadex/login': never, '/mangadex/settings': never, '/mangadex/settings/themes': never, '/mangadex/tag/[id]': 'id', '/mangadex/title/[id]': 'id', '/mangadex/title/[id]/covers': 'id', '/mangadex/title/[id]/related': 'id', '/mangadex/titles': never, '/mangadex/titles/feed': never, '/mangadex/upload': never, '/mangadex/user': never, '/mangadex/user/[id]': 'id', '/mangadex/user/[id]/lists': 'id', '/mangadex/user/[id]/uploads': 'id', '/mangadex/user/me': never, '/mangadex/user/me/lists': never, '/mangadex/user/me/uploads': never }
   SERVERS: Record<string, never>
   ACTIONS: Record<string, never>
   LINKS: Record<string, never>

src/lib/mangadex/componnents/chapter/page/ChapterPage.svelte

@@ -61,6 +61,7 @@
 			height: -webkit-fill-available;
 			overflow: hidden;
 			display: grid;
+			height: 100cqh;
 		}
 	}
 	article {

src/lib/mangadex/componnents/chapter/page/top-info/stories/ChapterPageHeader.stories.ts

@@ -4,44 +4,46 @@ import MangadexThemeProviderForStory from "@mangadex/componnents/theme/MangadexT
 import Header from "./ChapterPageHeaderForStories.svelte";
 import { data } from "../../readinMode/tests/bee8582d-dbed-4075-be3d-4361052d31c1/data.json";
 import {
-	CurrentChapterData,
-	CurrentChapterGroup,
-	CurrentChapterTitle,
-	CurrentChapterUploader
+    CurrentChapterData,
+    CurrentChapterGroup,
+    CurrentChapterTitle,
+    CurrentChapterUploader
 } from "../../contexts/currentChapter";
+import { Language } from "@mangadex/gql/graphql";
 
 const meta = {
-	decorators: [() => MangadexThemeProviderForStory],
-	title: "MangaDex/chapter/page/Header",
-	component: Header,
-	tags: ["autodocs"]
+    decorators: [() => MangadexThemeProviderForStory],
+    title: "MangaDex/chapter/page/Header",
+    component: Header,
+    tags: ["autodocs"]
 } satisfies Meta<Header>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-	args: {
-		currentChapter: new CurrentChapterData({
-			id: data.id,
-			volume: data.attributes.volume,
-			title: data.attributes.title ?? undefined,
-			chapterNumber: data.attributes.chapter,
-			uploader: new CurrentChapterUploader({
-				name: data.relationships[2].attributes.username ?? "",
-				id: data.relationships[2].id
-			}),
-			groups: [
-				new CurrentChapterGroup({
-					name: data.relationships[0].attributes.name ?? "",
-					id: data.relationships[0].id
-				})
-			],
-			series: new CurrentChapterTitle({
-				id: data.relationships[1].id,
-				title: data.relationships[1].attributes.title?.en ?? ""
-			})
-		})
-	}
+    args: {
+        currentChapter: new CurrentChapterData({
+            id: data.id,
+            volume: data.attributes.volume,
+            title: data.attributes.title ?? undefined,
+            chapterNumber: data.attributes.chapter,
+            uploader: new CurrentChapterUploader({
+                name: data.relationships[2].attributes.username ?? "",
+                id: data.relationships[2].id
+            }),
+            groups: [
+                new CurrentChapterGroup({
+                    name: data.relationships[0].attributes.name ?? "",
+                    id: data.relationships[0].id
+                })
+            ],
+            series: new CurrentChapterTitle({
+                id: data.relationships[1].id,
+                title: data.relationships[1].attributes.title?.en ?? ""
+            }),
+            translatedLanguage: Language.English
+        })
+    }
 };

src/lib/mangadex/componnents/sidebar/Sidebar.svelte

@@ -40,6 +40,7 @@
 		position: absolute;
 		top: 0;
 		z-index: 10;
+		height: 100vh;
 	}
 	.sidebar.show.float:not(.rtl) {
 		left: 0;

src/lib/mangadex/componnents/sidebar/SidebarBody.svelte

@@ -4,6 +4,7 @@
 	import Home from "./body/Home.svelte";
 	import OfflineServer from "./body/OfflineServer.svelte";
 	import Search from "./body/Search.svelte";
+	import Settings from "./body/Settings.svelte";
 	import Titles from "./body/Titles.svelte";
 </script>
 
@@ -18,3 +19,5 @@
 <Search />
 
 <Graphql />
+
+<Settings />

src/lib/mangadex/componnents/sidebar/body/Settings.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { route } from "$lib/ROUTES";
+	import { SettingsIcon } from "svelte-feather-icons";
+	import Menu from "../base/Menu.svelte";
+</script>
+
+<Menu label="Settings" href={route("/mangadex/settings")}>
+	<SettingsIcon slot="icon" size="24" />
+</Menu>

src/lib/mangadex/componnents/theme/MangaDexDefaultThemeProvider.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import defaultTheme from "@mangadex/theme/graphql/defaultTheme";
+	import { setMangaDexThemeContextWritable } from "@mangadex/utils/contexts";
+	import { setMangaDexFontsContext } from "@mangadex/utils/contexts/fonts";
+	import { writable } from "svelte/store";
+	import MangaDexVarThemeProvider from "./MangaDexVarThemeProvider.svelte";
+	import MangadexBackground from "./MangadexBackground.svelte";
+	import Toaster from "./toast/Toaster.svelte";
+
+	export let fonts = "Poppins";
+	$: setMangaDexThemeContextWritable(defaultTheme);
+	$: setMangaDexFontsContext(writable(fonts));
+</script>
+
+<MangaDexVarThemeProvider>
+	<Toaster />
+	<MangadexBackground>
+		<slot />
+	</MangadexBackground>
+</MangaDexVarThemeProvider>

src/lib/mangadex/componnents/theme/MangaDexVarThemeProvider.svelte

@@ -17,19 +17,19 @@
 	--accent-active={$theme_store.accents.default.active}
 	--accent-l1={$theme_store.accents.l1.default}
 	--accent-l1-hover={$theme_store.accents.l1.hover}
-	--accent-l1-active={$theme_store.accents.l1.default}
+	--accent-l1-active={$theme_store.accents.l1.active}
 	--accent-l2={$theme_store.accents.l2.default}
 	--accent-l2-hover={$theme_store.accents.l2.hover}
-	--accent-l2-active={$theme_store.accents.l2.default}
+	--accent-l2-active={$theme_store.accents.l2.active}
 	--accent-l3={$theme_store.accents.l3.default}
 	--accent-l3-hover={$theme_store.accents.l3.hover}
-	--accent-l3-active={$theme_store.accents.l3.default}
+	--accent-l3-active={$theme_store.accents.l3.active}
 	--accent-l4={$theme_store.accents.l4.default}
 	--accent-l4-hover={$theme_store.accents.l4.hover}
-	--accent-l4-active={$theme_store.accents.l4.default}
+	--accent-l4-active={$theme_store.accents.l4.active}
 	--accent-l5={$theme_store.accents.l5.default}
 	--accent-l5-hover={$theme_store.accents.l5.hover}
-	--accent-l5-active={$theme_store.accents.l5.default}
+	--accent-l5-active={$theme_store.accents.l5.active}
 	--mid-tone={$theme_store.mid_tone}
 	--contrast-l1={$theme_store.contrast.l1}
 	--scrollbar-color={$theme_store.scrollbar.default}

src/lib/mangadex/componnents/theme/MangadexThemeProviderBase.svelte

@@ -9,8 +9,9 @@
 
 	export let theme: MangadexTheme;
 	export let fonts = "Poppins";
-	$: theme_store = writable(theme);
-	$: setMangaDexThemeContextWritable(theme_store);
+	const theme_store = writable(theme);
+	$: theme_store.set(theme);
+    $: setMangaDexThemeContextWritable(theme_store);
 	$: setMangaDexFontsContext(writable(fonts));
 </script>
 

src/lib/mangadex/componnents/theme/editor/AccentColorPickers.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Accent } from "@mangadex/theme";
+	import Title from "../texts/title/Title.svelte";
+	import ColorPicker from "svelte-awesome-color-picker";
+
+	export let accent: Accent;
+	export let title: string;
+</script>
+
+<section>
+	<Title type={4}>{title}</Title>
+	<div class="colors-picker">
+		<ColorPicker label="Default" bind:hex={accent.default} />
+		<ColorPicker label="Hover" bind:hex={accent.hover} />
+		<ColorPicker label="Active" bind:hex={accent.active} />
+	</div>
+</section>

src/lib/mangadex/componnents/theme/editor/ColorPickerThemeVarProvider.svelte

@@ -0,0 +1,15 @@
+<div>
+	<slot />
+</div>
+
+<style lang="scss">
+	div {
+		display: contents;
+		--cp-bg-color: var(--main-background);
+		--cp-border-color: var(--mid-tone);
+		--cp-text-color: var(--text-color);
+		--cp-input-color: var(--accent-l2);
+		--cp-button-hover-color: var(--accent-l2-hover);
+		--focus-color: var(--primary);
+	}
+</style>

src/lib/mangadex/componnents/theme/editor/MangaDexThemeEditor.svelte

@@ -0,0 +1,25 @@
+<script>
+	import MangaDexThemeEditorInner from "./MangaDexThemeEditorInner.svelte";
+</script>
+
+<div class="editor">
+	<MangaDexThemeEditorInner>
+		<svelte:fragment slot="profile">
+			<slot name="profile" />
+		</svelte:fragment>
+	</MangaDexThemeEditorInner>
+</div>
+
+<style lang="scss">
+	.editor {
+		background-color: var(--main-background);
+		border: 3px solid var(--mid-tone);
+		border-radius: 8px;
+		padding: 8px;
+		transition: box-shadow 400ms ease-in-out;
+		box-shadow: 0 4px 0 var(--mid-tone);
+	}
+	.editor:hover {
+		box-shadow: 0 2px 0 var(--mid-tone);
+	}
+</style>