add event

seeder/package.json

@@ -33,6 +33,7 @@
 		"@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/cors": "^2.8.17",
 		"@types/express": "^4.17.21",

seeder/src/renderer/components/CommandInitializer.tsx

@@ -1,27 +1,58 @@
 import { PLATFORMS } from "@renderer/constants/shiinobi";
 import { Component, createSignal, For } from "solid-js";
+import { createEventDispatcher } from "@solid-primitives/event-dispatcher";
 
-const CommandInitializer: Component = () => {
-  const [platform, setPlatform] = createSignal<typeof PLATFORMS[0]>("myanimelist")
+type Props = {
+	title: string;
+	onFetchClick: (e: CustomEvent<string>) => void;
+};
 
-  return (
-    <div>
-      <div class="flex items-center gap-2">
-        <span class="text-sm">Select Platform: </span>
-        <div class="dropdown">
-          <div tabindex="0" role="button" class="text-warning flex items-center gap-1">
-            {platform()}
-            <coreproject-shape-chevron class="size-3"></coreproject-shape-chevron>
-          </div>
-          <ul tabindex="0" class="dropdown-content bg-neutral p-1 mt-1 rounded min-w-full">
-            <For each={PLATFORMS.filter((pl) => pl !== platform())}>
-              {(pl) => <li onClick={() => setPlatform(pl)} class="text-sm hover:bg-primary px-2 py-0.5 cursor-pointer rounded hover:text-accent">{pl}</li>}
-            </For>
-          </ul>
-        </div>
-      </div>
-    </div>
-  )
-}
+const CommandInitializer: Component<Props> = (props) => {
+	const [platform, setPlatform] = createSignal<(typeof PLATFORMS)[0]>("myanimelist");
 
-export default CommandInitializer
+	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/constants/shiinobi.ts

@@ -1,28 +1,28 @@
 export const PLATFORMS = ["myanimelist", "anilist", "kitsu"];
 
 export const COMMANDS_MAPPING = {
-  shared: {
-    Characters: {
-      command: "character-urls",
-      icon: `<coreproject-shape-user class="md:size-3"></coreproject-shape-user>`
-    },
-    Staffs: {
-      command: "staff-urls",
-      icon: `<coreproject-shape-headphone class="md:size-3"></coreproject-shape-headphone>`
-    }
-  },
-  anime: {
-    Animes: {
-      command: "anime-urls",
-      icon: `<coreproject-shape-play class="md:size-3"></coreproject-shape-play>`
-    },
-    Genres: {
-      command: "anime-genres",
-      icon: `<coreproject-shape-explore class="md:size-3"></coreproject-shape-misc>`
-    },
-    Themes: {
-      command: "anime-themes",
-      icon: `<coreproject-shape-preference class="md:size-3"></coreproject-shape-preference>`
-    }
-  }
+	shared: {
+		Characters: {
+			command: "character-urls",
+			icon: `<coreproject-shape-user class="md:size-3"></coreproject-shape-user>`
+		},
+		Staffs: {
+			command: "staff-urls",
+			icon: `<coreproject-shape-headphone class="md:size-3"></coreproject-shape-headphone>`
+		}
+	},
+	anime: {
+		Animes: {
+			command: "anime-urls",
+			icon: `<coreproject-shape-play class="md:size-3"></coreproject-shape-play>`
+		},
+		Genres: {
+			command: "anime-genres",
+			icon: `<coreproject-shape-explore class="md:size-3"></coreproject-shape-misc>`
+		},
+		Themes: {
+			command: "anime-themes",
+			icon: `<coreproject-shape-preference class="md:size-3"></coreproject-shape-preference>`
+		}
+	}
 };