Merge pull request #104 from Suwayomi/main

spelling

.vscode/settings.json

@@ -120,5 +120,7 @@
 	},
 	"licenser.license": "MPLv2",
 	"licenser.projectName": "Suwayomi project",
-	"licenser.author": "Contributors to the Suwayomi project"
+	"licenser.author": "Contributors to the Suwayomi project",
+	"cSpell.words": ["iconify", "localsourcelang", "tipclass"],
+	"cSpell.ignoreRegExpList": ["\\s*import (.+\n?)+ from '.*';"]
 }

src/gql/Queries.gql

@@ -98,7 +98,7 @@ query sourceMigrationManga($sourceId: LongString!) {
 	}
 }
 
-query sourceMigrationsource($sourceId: LongString!) {
+query sourceMigrationSource($sourceId: LongString!) {
 	source(id: $sourceId) {
 		displayName
 	}

src/lib/components/Image.svelte

@@ -59,19 +59,20 @@
 	export let aspect: CssClasses = '';
 	export let rounded: CssClasses = 'rounded-lg';
 	export let LoadingHeight: CssClasses = '';
-	export let Loadingwidth: CssClasses = '';
+	export let LoadingWidth: CssClasses = '';
+	export let draggable = true;
 </script>
 
 <div
 	class="relative {aspect} 
-		{State === state.loading && Loadingwidth.length ? Loadingwidth : width}
+		{State === state.loading && LoadingWidth.length ? LoadingWidth : width}
 		{State === state.loading && LoadingHeight.length ? LoadingHeight : height}
 		{$$props.class}"
 >
 	{#if State === state.error}
 		<div
 			class="card flex justify-center items-center {rounded} {aspect}
-			{Loadingwidth.length ? Loadingwidth : width}
+			{LoadingWidth.length ? LoadingWidth : width}
 			{LoadingHeight.length ? LoadingHeight : height}
 			{$$props.class}"
 		>
@@ -80,7 +81,7 @@
 	{:else if State === state.loading}
 		<div
 			class="placeholder absolute top-0 bottom-0 left-0 right-0 animate-pulse {rounded} {aspect} 
-			{Loadingwidth.length ? Loadingwidth : width}
+			{LoadingWidth.length ? LoadingWidth : width}
 			{LoadingHeight.length ? LoadingHeight : height}
 			 {$$props.class}"
 		/>
@@ -94,6 +95,7 @@
 			{title}
 			{src}
 			{alt}
+			{draggable}
 		/>
 	{/if}
 </div>

src/lib/components/LangFilterbutton.svelte → src/lib/components/LangFilterButton.svelte

@@ -13,15 +13,15 @@
 	import { getModalStore } from '@skeletonlabs/skeleton';
 
 	export let langs: Set<string>;
-	export let langfilt: Writable<Set<string>>;
+	export let langFilter: Writable<Set<string>>;
 	const modalStore = getModalStore();
 </script>
 
 <TooltipIconButton
 	on:click={() => {
 		modalStore.trigger({
 			type: 'component',
-			component: { ref: LangFilterModal, props: { langs, langfilt } }
+			component: { ref: LangFilterModal, props: { langs, langFilter } }
 		});
 	}}
 	tipclass="z-20"

src/lib/components/LangFilterModal.svelte

@@ -13,7 +13,7 @@
 	import Slide from '$lib/components/Slide.svelte';
 	const modalStore = getModalStore();
 	export let langs: Set<string>;
-	export let langfilt: Writable<Set<string>>;
+	export let langFilter: Writable<Set<string>>;
 </script>
 
 {#if $modalStore[0]}
@@ -24,16 +24,16 @@
 				{#each langs as lang}
 					<Slide
 						class="outline-0 p-1 pl-2 hover:variant-glass-surface"
-						on:changee={(e) => {
+						on:changeE={(e) => {
 							if (e.detail) {
-								$langfilt.add(lang);
-								$langfilt = $langfilt;
+								$langFilter.add(lang);
+								$langFilter = $langFilter;
 								return;
 							}
-							$langfilt.delete(lang);
-							$langfilt = $langfilt;
+							$langFilter.delete(lang);
+							$langFilter = $langFilter;
 						}}
-						checked={$langfilt.has(lang)}
+						checked={$langFilter.has(lang)}
 					>
 						{FindLangName(lang)}
 					</Slide>

src/lib/components/MangaCard.svelte

@@ -14,13 +14,14 @@
 
 	export let thumbnailUrl = '';
 	export let title = '';
-	export let titla: string | undefined = undefined;
+	export let titleA: string | undefined = undefined;
 	export let fit: CssClasses = 'object-cover';
 	export let rounded: CssClasses = 'rounded-lg';
 	export let aspect: CssClasses = '';
+	export let draggable = true;
 </script>
 
 <div class="relative h-full w-full {$$props.class}" in:fade>
-	<Image {fit} {aspect} src={thumbnailUrl} alt={title} title={titla} {rounded} />
+	<Image {draggable} {fit} {aspect} src={thumbnailUrl} alt={title} title={titleA} {rounded} />
 	<slot />
 </div>

src/lib/components/Search.svelte

@@ -30,7 +30,7 @@
 		value = '';
 	}
 
-	function handelchange() {
+	function handelChange() {
 		timeoutCancel = setTimeout(() => {
 			$query = value;
 		}, 100);
@@ -60,7 +60,7 @@
 		type="text"
 		placeholder="input text"
 		bind:value
-		on:change={handelchange}
+		on:change={handelChange}
 		on:keydown={handelEscapeInput}
 	/>
 </div>

src/lib/components/Slide.svelte

@@ -16,7 +16,7 @@
 	// Event Dispatcher
 	type SlideToggleEvent = {
 		keyup: SvelteEvent<KeyboardEvent, HTMLDivElement>;
-		changee: boolean;
+		changeE: boolean;
 	};
 	const dispatch = createEventDispatcher<SlideToggleEvent>();
 
@@ -42,7 +42,7 @@
 	/** Provide classes to set border radius styles. */
 	export let rounded: CssClasses = 'rounded-full';
 	/** Provide classes for the label div */
-	export let labelclass: CssClasses = 'ml-3';
+	export let labelClass: CssClasses = 'ml-3';
 
 	// Props (a11y)
 	/** Provide a semantic label. */
@@ -116,11 +116,11 @@
 		switch (checked) {
 			case true:
 				checked = false;
-				dispatch('changee', checked);
+				dispatch('changeE', checked);
 				break;
 			case false:
 				checked = true;
-				dispatch('changee', checked);
+				dispatch('changeE', checked);
 				break;
 		}
 	}
@@ -129,7 +129,6 @@
 <div
 	id={label}
 	class="slide-toggle {classesBase} "
-	data-testid="slide-toggle"
 	on:keydown={onKeyDown}
 	role="switch"
 	aria-label={label}
@@ -155,7 +154,7 @@
 			disabled={$$props.disabled}
 		/>
 		<!-- Label -->
-		{#if $$slots.default}<div class="slide-toggle-text flex-1 {labelclass}"><slot /></div>{/if}
+		{#if $$slots.default}<div class="slide-toggle-text flex-1 {labelClass}"><slot /></div>{/if}
 		<!-- Slider Track/Thumb -->
 		<div class="slide-toggle-track {classesTrack}" class:cursor-not-allowed={$$props.disabled}>
 			<div

src/lib/components/Toast/Toast.svelte

@@ -148,7 +148,7 @@
 
 {#if $toastStore.length}
 	<!-- Wrapper -->
-	<div class="snackbar-wrapper {classesWrapper}" data-testid="snackbar-wrapper">
+	<div class="snackbar-wrapper {classesWrapper}">
 		<!-- List -->
 		<div class="snackbar {classesSnackbar}">
 			{#each filteredToasts as t, i (t)}
@@ -170,10 +170,7 @@
 					aria-live="polite"
 				>
 					<!-- Toast -->
-					<div
-						class="toast {classesToast} {t.background ?? background} {t.classes ?? ''}"
-						data-testid="toast"
-					>
+					<div class="toast {classesToast} {t.background ?? background} {t.classes ?? ''}">
 						<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 						<div class="text-base">{@html t.message}</div>
 						{#if t.action || !t.hideDismiss}

src/lib/components/Toast/stores.ts

@@ -12,7 +12,7 @@ import type { ToastSettings, Toast } from './types.js';
 
 const toastDefaults: ToastSettings = {
 	message: 'Missing Toast Message',
-	autohide: true,
+	autoHide: true,
 	timeout: 5000
 };
 
@@ -84,7 +84,7 @@ function toastService() {
 
 	// If toast should auto-hide, wait X time, then close by ID
 	function handleAutoHide(toast: Toast) {
-		if (toast.autohide === true) {
+		if (toast.autoHide === true) {
 			return setTimeout(() => {
 				close(toast.id);
 			}, toast.timeout);
@@ -100,8 +100,8 @@ function toastService() {
 			update((tStore) => {
 				// Trigger Callback
 				if (toast && toast.callback) toast.callback({ id, status: 'queued' });
-				// activate autohide when dismiss button is hidden.
-				if (toast.hideDismiss) toast.autohide = true;
+				// activate autoHide when dismiss button is hidden.
+				if (toast.hideDismiss) toast.autoHide = true;
 				// Merge with defaults
 				const tMerged: Toast = { ...toastDefaults, ...toast, id };
 				// Handle auto-hide, if needed

src/lib/components/Toast/types.ts

@@ -16,7 +16,7 @@ export interface ToastSettings {
 	/** Provide CSS classes to set the background color. */
 	background?: string;
 	/** Enables auto-hide after the timeout duration. */
-	autohide?: boolean;
+	autoHide?: boolean;
 	/** Set the auto-hide timeout duration. */
 	timeout?: number;
 	/** Generate a custom action button UI. */
@@ -40,6 +40,6 @@ export interface ToastSettings {
 export interface Toast extends ToastSettings {
 	/** A UUID will be auto-assigned on `.trigger()`. */
 	id: string;
-	/** The id of the `setTimeout` if `autohide` is enabled  */
+	/** The id of the `setTimeout` if `autoHide` is enabled  */
 	timeoutId?: ReturnType<typeof setTimeout>;
 }

src/lib/components/TriStateSlide.svelte

@@ -17,7 +17,7 @@
 	// Event Dispatcher
 	type SlideToggleEvent = {
 		keyup: SvelteEvent<KeyboardEvent, HTMLDivElement>;
-		changee: boolean;
+		changeE: boolean;
 	};
 	const dispatch = createEventDispatcher<SlideToggleEvent>();
 
@@ -30,7 +30,7 @@
 	/** The checked state of the input element. */
 	export let checked: boolean | null = null;
 
-	export let tristat = true;
+	export let triState = true;
 
 	// Props (styles)
 	export let size: 'sm' | 'md' | 'lg' = 'md';
@@ -45,7 +45,7 @@
 	/** Provide classes to set border radius styles. */
 	export let rounded: CssClasses = 'rounded-full';
 	/** Provide classes for the label div */
-	export let labelclass: CssClasses = 'ml-3';
+	export let labelClass: CssClasses = 'ml-3';
 
 	// Props (a11y)
 	/** Provide a semantic label. */
@@ -123,7 +123,7 @@
 
 	export let state: TriState = checked === null ? 0 : checked ? 1 : 2;
 	export function handelClick() {
-		if (tristat) {
+		if (triState) {
 			switch (state) {
 				case 0:
 					state = 1;
@@ -140,12 +140,12 @@
 				case 1:
 					state = 2;
 					checked = false;
-					dispatch('changee', checked);
+					dispatch('changeE', checked);
 					break;
 				case 2:
 					state = 1;
 					checked = true;
-					dispatch('changee', checked);
+					dispatch('changeE', checked);
 					break;
 			}
 		}
@@ -155,7 +155,6 @@
 <div
 	id={label}
 	class="slide-toggle {classesBase} "
-	data-testid="slide-toggle"
 	on:keydown={onKeyDown}
 	role="switch"
 	aria-label={label}
@@ -181,7 +180,7 @@
 			disabled={$$props.disabled}
 		/>
 		<!-- Label -->
-		{#if $$slots.default}<div class="slide-toggle-text flex-1 {labelclass}"><slot /></div>{/if}
+		{#if $$slots.default}<div class="slide-toggle-text flex-1 {labelClass}"><slot /></div>{/if}
 		<!-- Slider Track/Thumb -->
 		<div class="slide-toggle-track {classesTrack}" class:cursor-not-allowed={$$props.disabled}>
 			<div