feat(seeder): work on staff page with mock

seeder/electron.vite.config.ts

@@ -73,7 +73,8 @@ export default defineConfig({
 				"@routes": resolve(__dirname, "./src/renderer/routes"),
 				"@layouts": resolve(__dirname, "./src/renderer/layouts"),
 				"@constants": resolve(__dirname, "./src/renderer/constants"),
-				"@utils": resolve(__dirname, "./src/renderer/utils")
+				"@utils": resolve(__dirname, "./src/renderer/utils"),
+				"@stores": resolve(__dirname, "./src/renderer/stores")
 			}
 		},
 		plugins: [solid(), svg()]

seeder/package.json

@@ -24,6 +24,7 @@
 		"@electron-toolkit/utils": "^3.0.0",
 		"better-sqlite3": "^11.1.2",
 		"cors": "^2.8.5",
+		"diff": "^5.2.0",
 		"electron-updater": "^6.1.7",
 		"express": "^4.19.2",
 		"local-devices": "^4.0.0"
@@ -35,9 +36,11 @@
 		"@electron-toolkit/tsconfig": "^1.0.1",
 		"@eslint/eslintrc": "^3.1.0",
 		"@eslint/js": "^9.9.0",
+		"@solid-primitives/event-dispatcher": "^0.0.107",
 		"@solidjs/router": "^0.14.1",
 		"@types/better-sqlite3": "^7.6.11",
 		"@types/cors": "^2.8.17",
+		"@types/diff": "^5.2.1",
 		"@types/express": "^4.17.21",
 		"@types/node": "^22.2.0",
 		"@typescript-eslint/eslint-plugin": "^8.0.1",

seeder/src/renderer/components/CommandInitializer.tsx

@@ -0,0 +1,61 @@
+import { PLATFORMS } from "@renderer/constants/shiinobi";
+import { Component, createSignal, For } from "solid-js";
+import { createEventDispatcher } from "@solid-primitives/event-dispatcher";
+
+type Props = {
+	title: string;
+	onFetchClick: (e: CustomEvent<string>) => void;
+};
+
+const CommandInitializer: Component<Props> = (props) => {
+	const [platform, setPlatform] = createSignal<(typeof PLATFORMS)[0]>("myanimelist");
+
+	const dispatch = createEventDispatcher(props);
+
+	const handleFetchClick = () => {
+		dispatch("fetchClick", platform());
+	};
+
+	return (
+		<div class="flex items-center gap-2">
+			<h2 class="text-lg font-bold">{props.title}</h2>
+			<div class="ml-auto flex items-center gap-2">
+				<span class="text-sm">Select Platform: </span>
+				<div class="dropdown dropdown-end">
+					<div tabindex="0" role="button" class="flex items-center gap-1 text-warning">
+						{platform()}
+						{/*
+					// @ts-ignore: solid-js doesn't support web-component with typescript */}
+						<coreproject-shape-chevron class="size-3"></coreproject-shape-chevron>
+					</div>
+					<ul
+						tabindex="0"
+						class="dropdown-content mt-1 min-w-full rounded bg-neutral p-1"
+					>
+						<For each={PLATFORMS.filter((pl) => pl !== platform())}>
+							{(pl) => (
+								<li
+									onClick={() => setPlatform(pl)}
+									class="cursor-pointer rounded px-2 py-0.5 text-sm hover:bg-primary hover:text-accent"
+								>
+									{pl}
+								</li>
+							)}
+						</For>
+					</ul>
+				</div>
+			</div>
+			<button
+				onClick={handleFetchClick}
+				class="btn btn-primary h-max min-h-full rounded px-4 py-2 text-accent outline-none"
+			>
+				Fetch
+				{/*
+					// @ts-ignore: solid-js doesn't support web-component with typescript */}
+				<coreproject-shape-upload class="size-3"></coreproject-shape-upload>
+			</button>
+		</div>
+	);
+};
+
+export default CommandInitializer;

seeder/src/renderer/components/RenderDiffField.tsx

@@ -0,0 +1,37 @@
+import { Change } from "diff";
+import { Component, For } from "solid-js";
+
+type Props = {
+	diff: {
+		[key: string]: Change[];
+	};
+	field: string;
+	type: "old" | "new";
+};
+
+const RenderDiffField: Component<Props> = (props) => {
+	return (
+		<div class="flex flex-col gap-1">
+			<For
+				each={props.diff[props.field].filter((part) =>
+					props.type === "old" ? !part.added : !part.removed
+				)}
+			>
+				{(part) => (
+					<span
+						classList={{
+							"text-accent w-max leading-none p-1 rounded whitespace-pre-line break-words":
+								part.removed || part.added,
+							"bg-error/35": part.removed,
+							"bg-success/25": part.added
+						}}
+					>
+						{part.removed ? "-" : part.added ? "+" : ""} {part.value}
+					</span>
+				)}
+			</For>
+		</div>
+	);
+};
+
+export default RenderDiffField;

seeder/src/renderer/components/navbar/index.tsx

@@ -1,14 +1,22 @@
 import type { Component } from "solid-js";
 import CoreLogo from "@assets/icons/core/logo.svg?component-solid";
 import CoreSeederLogo from "@assets/icons/core/coreseeder.svg?component-solid";
+import sidebarStore from "@stores/sidebar";
 
 const Navbar: Component = () => {
 	return (
-		<div class="relative flex w-full items-center justify-between md:h-14 md:p-3">
-			<div class="flex h-full items-center md:gap-3">
+		<div class="relative flex h-14 w-full items-center justify-between p-3">
+			<div class="flex h-full items-center gap-3">
+				<button
+					onClick={() => sidebarStore.setOpen((prev) => !prev)}
+					class="btn btn-neutral aspect-square h-full min-h-full rounded outline-none"
+				>
+					{/* @ts-ignore: solid support issue */}
+					<coreproject-shape-list class="size-5"></coreproject-shape-list>
+				</button>
 				<CoreLogo class="h-full w-auto" />
-				<CoreSeederLogo class="w-auto md:h-4" />
 			</div>
+			<CoreSeederLogo class="absolute left-1/2 h-4 w-auto -translate-x-1/2 transform" />
 			<div class="h-full">
 				<button class="btn btn-neutral h-full min-h-full rounded outline-none">
 					Logout

seeder/src/renderer/components/sidebar/index.tsx

@@ -5,18 +5,18 @@ import { Component, For } from "solid-js";
 
 const Sidebar: Component = () => {
 	return (
-		<div class="flex flex-col md:w-40 md:gap-1">
-			<div class="flex h-full flex-col md:gap-1">
+		<div class="flex h-full w-40 flex-col gap-1">
+			<div class="flex h-full flex-col gap-1">
 				<A
 					href="/"
-					class="btn h-max min-h-max w-full justify-start rounded border-none font-normal outline-none transition-none hover:bg-primary hover:bg-primary/10 md:p-2"
+					class="btn h-max min-h-max w-full justify-start rounded border-none p-2 font-normal outline-none transition-none hover:bg-primary hover:bg-primary/10"
 					activeClass="!bg-primary text-accent"
 					inactiveClass="bg-transparent"
 					end
 				>
 					{/*
 					// @ts-ignore: solid-js doesn't support web-component with typescript */}
-					<coreproject-shape-home class="text-warning md:size-3" />
+					<coreproject-shape-home class="size-3 text-warning" />
 					Home
 				</A>
 				<For each={Object.entries(COMMANDS_MAPPING)}>
@@ -33,7 +33,7 @@ const Sidebar: Component = () => {
 									{([command_title, obj]) => (
 										<A
 											href={obj.command}
-											class="btn h-max min-h-max w-full justify-start rounded border-none bg-transparent font-normal outline-none transition-none hover:bg-primary/10 md:p-2"
+											class="btn h-max min-h-max w-full justify-start rounded border-none bg-transparent p-2 font-normal outline-none transition-none hover:bg-primary/10"
 											activeClass="!bg-primary text-accent"
 										>
 											<span innerHTML={obj.icon} class="text-warning" />
@@ -46,7 +46,7 @@ const Sidebar: Component = () => {
 					)}
 				</For>
 			</div>
-			<span class="md:text-xs">version: {VERSION}</span>
+			<span class="text-xs">version: {VERSION}</span>
 		</div>
 	);
 };

seeder/src/renderer/constants/shiinobi.ts

@@ -1,4 +1,4 @@
-export const PLATFORMS = ["myanimelist"];
+export const PLATFORMS = ["myanimelist", "anilist", "kitsu"];
 
 export const COMMANDS_MAPPING = {
 	shared: {

seeder/src/renderer/layouts/RootLayout.tsx

@@ -1,14 +1,17 @@
 import Navbar from "@components/navbar";
 import Sidebar from "@components/sidebar";
 import { RouteSectionProps } from "@solidjs/router";
-import { Component } from "solid-js";
+import { Component, Show } from "solid-js";
+import sidebarStore from "@stores/sidebar";
 
 const HomeLayout: Component<RouteSectionProps> = (props) => {
 	return (
-		<div class="flex h-screen w-screen flex-col">
+		<div class="flex h-screen w-screen flex-col overflow-hidden">
 			<Navbar />
-			<div class="flex flex-1 md:gap-3 md:p-3">
-				<Sidebar />
+			<div class="flex flex-1 gap-3 overflow-hidden p-3">
+				<Show when={sidebarStore.open()}>
+					<Sidebar />
+				</Show>
 				<div class="w-full">{props.children}</div>
 			</div>
 		</div>

seeder/src/renderer/routes/home/index.tsx

@@ -3,10 +3,10 @@ import { Component } from "solid-js";
 
 const Home: Component = () => {
 	return (
-		<div class="flex size-full flex-col md:gap-10 md:px-10">
+		<div class="flex size-full flex-col gap-10">
 			<div>
-				<h1 class="font-bold text-warning md:text-3xl">Hello, Sora</h1>
-				<span class="md:text-sm">{get_humanize_time()}!</span>
+				<h1 class="text-3xl font-bold text-warning">Hello, Sora</h1>
+				<span class="text-sm">{get_humanize_time()}!</span>
 			</div>
 		</div>
 	);

seeder/src/renderer/stores/sidebar.ts

@@ -0,0 +1,8 @@
+import { createRoot, createSignal } from "solid-js";
+
+function createSidebarStore() {
+	const [open, setOpen] = createSignal(false);
+	return { open, setOpen };
+}
+
+export default createRoot(createSidebarStore);

seeder/src/renderer/utils/diff.ts

@@ -0,0 +1,4 @@
+import { Change } from "diff";
+
+export const hasDiff = (diff: { [key: string]: Change[] }) =>
+	Object.values(diff).some((field) => field.some((part) => part.added || part.removed));

seeder/tsconfig.web.json

@@ -10,17 +10,17 @@
     "types": [
       "vite-plugin-solid-svg/types",
       "vite/client",
-    ],		
+    ],
     "allowJs": true,
 		"checkJs": true,
-    "composite": true,	
+    "composite": true,
     "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,
 		"skipLibCheck": true,
 		"sourceMap": true,
 		"strict": true,
 		"module": "esnext",
-		"target": "esnext",		
+		"target": "esnext",
     "moduleResolution": "bundler",
     "jsxImportSource": "solid-js",
     "baseUrl": ".",
@@ -31,7 +31,8 @@
       "@routes/*": ["./src/renderer/routes/*"],
       "@layouts/*": ["./src/renderer/layouts/*"],
       "@constants/*": ["./src/renderer/constants/*"],
-      "@utils/*": ["./src/renderer/utils/*"]
+      "@utils/*": ["./src/renderer/utils/*"],
+      "@stores/*": ["./src/renderer/stores/*"]
     }
   }
 }