Rewrite + mod types + collapsible mods

TODO.md

@@ -2,6 +2,7 @@
 
 - Clean up the code ofc.
 - som error handling for invalid mod folders
+- check download hash
 
 ## New features
 

package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "@sveltejs/kit": "^2.5.4",
     "@tauri-apps/api": "^1",
-    "bits-ui": "^0.20.0",
+    "bits-ui": "^0.21.8",
     "bottleneck": "^2.19.5",
     "clsx": "^2.1.0",
     "lucide-svelte": "^0.359.0",

src-tauri/tauri.conf.json

@@ -7,7 +7,7 @@
   },
   "package": {
     "productName": "Pavlov Map Manager",
-    "version": "1.1.0"
+    "version": "1.2.0"
   },
   "tauri": {
     "allowlist": {

src/lib/components/modcard.svelte

@@ -32,10 +32,12 @@
 
   let theme: string;
   let deletePopup: boolean;
+  let showType: boolean;
 
   onMount(async () => {
     theme = await config.get("theme");
-    deletePopup = await config.get("deletePopup");
+    deletePopup = await config.get("delete_popup");
+    showType = await config.get("show_type");
   });
 
   export let mod: string;
@@ -48,10 +50,14 @@
     >
   </CardHeader>
   <CardContent>
+    {#if showType}
+      <p class="flex justify-center mb-1.5 text-lg">{$modsStore[mod].type}</p>
+    {/if}
     <button
       on:click={() => open($modsStore[mod].modUrl)}
       role="link"
       tabindex="0"
+      class={!showType ? "mt-3" : ""}
     >
       <img
         src={$modsStore[mod].imageUrl}
@@ -60,7 +66,7 @@
       />
     </button>
     <div class="mt-1.5 flex flex-row justify-between">
-      {#if $modsStore[mod].currentVersion != $modsStore[mod].latestVersion }
+      {#if $modsStore[mod].currentVersion != $modsStore[mod].latestVersion}
         <Button
           on:click={() => addDownload(mod)}
           disabled={$queueStore.includes(mod.toString())}

src/lib/components/ui/accordion/accordion-content.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { Accordion as AccordionPrimitive } from "bits-ui";
+  import { slide } from "svelte/transition";
+  import { cn } from "$lib/utils.js";
+
+  type $$Props = AccordionPrimitive.ContentProps;
+
+  let className: $$Props["class"] = undefined;
+  export let transition: $$Props["transition"] = slide;
+  export let transitionConfig: $$Props["transitionConfig"] = {
+    duration: 200,
+  };
+
+  export { className as class };
+</script>
+
+<AccordionPrimitive.Content
+  class={cn("overflow-hidden text-sm", className)}
+  {transition}
+  {transitionConfig}
+  {...$$restProps}
+>
+  <!--
+	<div class="pb-4 pt-0">
+		<slot />
+	</div>
+-->
+  <slot />
+</AccordionPrimitive.Content>

src/lib/components/ui/accordion/accordion-item.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AccordionPrimitive.ItemProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+	export let value: $$Props["value"];
+</script>
+
+<AccordionPrimitive.Item {value} class={cn("border-b", className)} {...$$restProps}>
+	<slot />
+</AccordionPrimitive.Item>

src/lib/components/ui/accordion/accordion-trigger.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import ChevronDown from "svelte-radix/ChevronDown.svelte";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AccordionPrimitive.TriggerProps;
+	type $$Events = AccordionPrimitive.TriggerEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let level: AccordionPrimitive.HeaderProps["level"] = 3;
+	export { className as class };
+</script>
+
+<AccordionPrimitive.Header {level} class="flex">
+	<AccordionPrimitive.Trigger
+		class={cn(
+			"flex flex-1 items-center justify-between py-4 gap-2 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+			className
+		)}
+		{...$$restProps}
+		on:click
+	>
+		<slot />
+		<ChevronDown
+			class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
+		/>
+	</AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>

src/lib/components/ui/accordion/index.ts

@@ -0,0 +1,17 @@
+import { Accordion as AccordionPrimitive } from "bits-ui";
+import Content from "./accordion-content.svelte";
+import Item from "./accordion-item.svelte";
+import Trigger from "./accordion-trigger.svelte";
+
+const Root = AccordionPrimitive.Root;
+export {
+	Root,
+	Content,
+	Item,
+	Trigger,
+	//
+	Root as Accordion,
+	Content as AccordionContent,
+	Item as AccordionItem,
+	Trigger as AccordionTrigger,
+};

src/lib/components/ui/card/card-header.svelte

@@ -8,6 +8,6 @@
 	export { className as class };
 </script>
 
-<div class={cn("flex flex-col space-y-1.5 p-6", className)} {...$$restProps}>
+<div class={cn("flex flex-col space-y-1.5 pt-4 pb-1 px-6", className)} {...$$restProps}>
 	<slot />
 </div>

src/lib/modio-utils.ts

@@ -33,6 +33,51 @@ export async function modioRequest(
     return response;
 }
 
+export async function loadMods() {
+    let mods = get(modsStore);
+    const app = get(appStore);
+
+    app.loading = true;
+    app.status = "Loading mods";
+    appStore.set(app);
+
+    const localMods = await getLocalMods();
+    const subscriptions = await getSubscriptions();
+
+    for (const modData of subscriptions) {
+        if (assignModData(modData)) {
+            mods = get(modsStore);
+            mods[modData.id].subscribed = true;
+        }
+    }
+
+    for (const mod of localMods) {
+        if (!Object.keys(mods).includes(mod)) {
+            const response = await modioRequest(
+                `/games/3959/mods/${mod}`,
+                "GET"
+            );
+            if (!response.ok) {
+                toast.error("Error while fetching map data for map: " + mod);
+                console.log("Error while fetching map data for map: ", mod, " Error: ", response.status);
+                continue;
+            }
+            const data = await response.json();
+
+            if (assignModData(data)) {
+                mods = get(modsStore);
+                mods[data.id].subscribed = true;
+            }
+        }
+        mods[mod].currentVersion = await getCurrentVersion(mod);
+    }
+
+    modsStore.set(mods);
+    app.loading = false;
+    app.status = "Done";
+    appStore.set(app);
+}
+
 async function downloadQueue() {
     let queue = get(queueStore);
     const app = get(appStore);
@@ -82,7 +127,6 @@ async function downloadMap(mod: string) {
     const modsPath = await config.get("mods_path");
     const oauthToken = await config.get("oauth_token");
 
-    console.log("Old version: ", mods[mod].currentVersion)
     // Set app data
     app.currentlyDownloading = mods[mod].title;
     app.downloadStatus = "Checking new mod version";
@@ -175,9 +219,6 @@ async function downloadMap(mod: string) {
     });
     mods[mod].currentVersion = await getCurrentVersion(mod);
 
-    console.log("New version written: ", mods[mod].currentVersion);
-    console.log(mods[mod]);
-
     app.downloadStatus = "Done";
 
     modsStore.set(mods);
@@ -198,59 +239,25 @@ async function getCurrentVersion(mod: string) {
         return undefined;
     }
 
-    return currentVersion;
+    return parseInt(currentVersion);
 }
 
-export async function getMaps() {
-    let mods = get(modsStore);
+async function getLocalMods() {
     const modsPath = await config.get("mods_path");
 
-    await getSubscriptions();
-
-    let localMods: Array<string> = [];
+    let localMods: Array<any> = [];
     try {
         localMods = await invoke("ls", { path: modsPath });
     } catch (error) {
         toast.error("Error while reading maps from path: " + modsPath);
         console.log("Error while reading maps from path: ", error);
     }
-    console.log(localMods);
 
     localMods = localMods.filter((map: string) => map.startsWith("UGC"));
     localMods = localMods.map((map: string) => map.split("UGC")[1]);
+    localMods = localMods.map((map: string) => parseInt(map));
 
-    console.log(localMods);
-
-    for (const mod of localMods) {
-        if (!Object.keys(mods).includes(mod)) {
-            const response = await modioRequest(
-                `/games/3959/mods/${mod}`,
-                "GET"
-            );
-            if (!response.ok) {
-                toast.error("Error while fetching map data for map: " + mod);
-                console.log("Error while fetching map data for map: ", mod, " Error: ", response.status);
-
-                // Remove the map from the list if it doesn't exist on mod.io
-                mods = Object.fromEntries(
-                    Object.entries(mods).filter(([key]) => key != mod)
-                );
-                continue;
-            }
-            const data = await response.json();
-            assignModData(data);
-            mods[data.id].subscribed = false;
-        }
-
-        mods[mod].currentVersion = await getCurrentVersion(mod);
-        console.log("Read version for mod: ", mod, " Version: ", mods[mod].currentVersion)
-    }
-    for (let mod of Object.keys(mods)) {
-        if (mod == "3853484") {
-            console.log(mods[mod])
-        }
-    }
-    modsStore.set(mods);
+    return localMods;
 }
 
 function assignModData(data: any) {
@@ -267,25 +274,36 @@ function assignModData(data: any) {
             mods[data.id].latestVersion = platform.modfile_live;
         }
     }
+
+    for (const tag of data.tags) {
+        if (tag.name) {
+            mods[data.id].type = tag.name;
+        }
+    }
+
+
     if (mods[data.id].latestVersion == undefined) {
         mods = Object.fromEntries(
             Object.entries(mods).filter(([key]) => key != data.id)
         );
         modsStore.set(mods);
-        return Error;
+        console.log("No windows version for mod: ", data.id);
+        return false;
     }
+
     modsStore.set(mods);
+    return true;
 }
 
 async function getSubscriptions() {
-    const mods = get(modsStore);
-
     let allRead = false;
     let page = 0;
 
+    let subscriptions: Array<any> = [];
+
     while (!allRead) {
         const response = await modioRequest(
-            `/me/subscribed?game_id=3959&platforms=windows`,
+            `/me/subscribed?game_id=3959&platforms=windows&_offset=${page * 100}`,
             "GET"
         );
         if (!response.ok) {
@@ -296,8 +314,7 @@ async function getSubscriptions() {
         const data = await response.json();
 
         for (const mod of data.data) {
-            assignModData(mod);
-            mods[mod.id].subscribed = true;
+            subscriptions.push(mod);
         }
 
         if (data.result_count == 100) {
@@ -306,7 +323,8 @@ async function getSubscriptions() {
             allRead = true;
         }
     }
-    modsStore.set(mods);
+
+    return subscriptions;
 }
 
 export async function subscribe(mod: string) {
@@ -425,7 +443,7 @@ async function setAvatarUrl() {
         const data = await response.json();
         return data.avatar.thumb_100x100;
     } catch (error) {
-        console.error("Error:", error);
+        console.error("Error while setting avatar_url:", error);
         return;
     }
 }

src/lib/types.ts

@@ -3,14 +3,13 @@ export interface ModData {
     title?: string;
     imageUrl?: string;
     modUrl?: string;
-    currentVersion?: string;
-    latestVersion?: string;
+    type?: string;
+    currentVersion?: number;
+    latestVersion?: number;
     subscribed?: boolean;
   }
 }
 
-
-
 export interface AppData {
   loading: boolean;
   status: string;