From cada630e819d966d4b79fcade3afd1fd4d1fd983 Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Tue, 24 Dec 2024 11:43:36 +1100
Subject: [PATCH] fix: moved icons and created PlatformClient so we can use the
 enum on the frontend

---
 components/{icons => Icons}/DiscordLogo.vue   |  0
 components/{icons => Icons}/GithubLogo.vue    |  0
 components/{icons => Icons}/LinuxLogo.vue     |  0
 .../SimpleAuthenticationLogo.vue              |  0
 components/{icons => Icons}/WindowsLogo.vue   |  0
 components/PlatformSelector.vue               |  7 +++----
 components/UserFooter.vue                     |  7 +++----
 composables/types.d.ts                        | 13 -------------
 composables/types.ts                          | 18 ++++++++++++++++++
 pages/admin/auth/index.vue                    |  4 ++--
 pages/store/[id]/index.vue                    | 19 +++++++++++--------
 11 files changed, 37 insertions(+), 31 deletions(-)
 rename components/{icons => Icons}/DiscordLogo.vue (100%)
 rename components/{icons => Icons}/GithubLogo.vue (100%)
 rename components/{icons => Icons}/LinuxLogo.vue (100%)
 rename components/{icons => Icons}/SimpleAuthenticationLogo.vue (100%)
 rename components/{icons => Icons}/WindowsLogo.vue (100%)
 delete mode 100644 composables/types.d.ts
 create mode 100644 composables/types.ts

diff --git a/components/icons/DiscordLogo.vue b/components/Icons/DiscordLogo.vue
similarity index 100%
rename from components/icons/DiscordLogo.vue
rename to components/Icons/DiscordLogo.vue
diff --git a/components/icons/GithubLogo.vue b/components/Icons/GithubLogo.vue
similarity index 100%
rename from components/icons/GithubLogo.vue
rename to components/Icons/GithubLogo.vue
diff --git a/components/icons/LinuxLogo.vue b/components/Icons/LinuxLogo.vue
similarity index 100%
rename from components/icons/LinuxLogo.vue
rename to components/Icons/LinuxLogo.vue
diff --git a/components/icons/SimpleAuthenticationLogo.vue b/components/Icons/SimpleAuthenticationLogo.vue
similarity index 100%
rename from components/icons/SimpleAuthenticationLogo.vue
rename to components/Icons/SimpleAuthenticationLogo.vue
diff --git a/components/icons/WindowsLogo.vue b/components/Icons/WindowsLogo.vue
similarity index 100%
rename from components/icons/WindowsLogo.vue
rename to components/Icons/WindowsLogo.vue
diff --git a/components/PlatformSelector.vue b/components/PlatformSelector.vue
index 5db9592..d84f242 100644
--- a/components/PlatformSelector.vue
+++ b/components/PlatformSelector.vue
@@ -74,6 +74,7 @@
 </template>
 
 <script setup lang="ts">
+import { IconsLinuxLogo, IconsWindowsLogo } from "#components";
 import {
   Listbox,
   ListboxButton,
@@ -83,19 +84,17 @@ import {
 } from "@headlessui/vue";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
 import type { Component } from "vue";
-import LinuxLogo from "./icons/LinuxLogo.vue";
-import WindowsLogo from "./icons/WindowsLogo.vue";
 
 const model = defineModel<string>();
 
 const values: { [key: string]: { name: string; icon: Component } } = {
   Linux: {
     name: "Linux",
-    icon: LinuxLogo,
+    icon: IconsLinuxLogo,
   },
   Windows: {
     name: "Windows",
-    icon: WindowsLogo,
+    icon: IconsWindowsLogo,
   },
 };
 </script>
diff --git a/components/UserFooter.vue b/components/UserFooter.vue
index 397f8bd..adfeb86 100644
--- a/components/UserFooter.vue
+++ b/components/UserFooter.vue
@@ -63,8 +63,7 @@
 </template>
 
 <script setup lang="ts">
-import GithubLogo from './icons/GithubLogo.vue';
-import DiscordLogo from './icons/DiscordLogo.vue';
+import { IconsDiscordLogo, IconsGithubLogo } from '#components';
 
 const navigation = {
     games: [
@@ -92,12 +91,12 @@ const navigation = {
         {
             name: 'GitHub',
             href: 'https://github.com/Drop-OSS',
-            icon: GithubLogo,
+            icon: IconsGithubLogo,
         },
         {
             name: "Discord",
             href: "https://discord.gg/NHx46XKJWA",
-            icon: DiscordLogo
+            icon: IconsDiscordLogo
         }
     ],
 }
diff --git a/composables/types.d.ts b/composables/types.d.ts
deleted file mode 100644
index 9b5af13..0000000
--- a/composables/types.d.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { Component } from "vue"
-
-export type NavigationItem = {
-    prefix: string,
-    route: string,
-    label: string,
-}
-
-export type QuickActionNav = {
-    icon: Component,
-    notifications?: Ref<number>,
-    action: () => Promise<void>,
-}
\ No newline at end of file
diff --git a/composables/types.ts b/composables/types.ts
new file mode 100644
index 0000000..676e727
--- /dev/null
+++ b/composables/types.ts
@@ -0,0 +1,18 @@
+import type { Component } from "vue";
+
+export type NavigationItem = {
+  prefix: string;
+  route: string;
+  label: string;
+};
+
+export type QuickActionNav = {
+  icon: Component;
+  notifications?: Ref<number>;
+  action: () => Promise<void>;
+};
+
+export enum PlatformClient {
+  Windows = "Windows",
+  Linux = "Linux",
+}
diff --git a/pages/admin/auth/index.vue b/pages/admin/auth/index.vue
index 60421bf..5f72b3f 100644
--- a/pages/admin/auth/index.vue
+++ b/pages/admin/auth/index.vue
@@ -97,11 +97,11 @@
 </template>
 
 <script setup lang="ts">
+import { IconsSimpleAuthenticationLogo } from "#components";
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
 import { EllipsisHorizontalIcon } from "@heroicons/vue/20/solid";
 import { CheckIcon, XMarkIcon } from "@heroicons/vue/24/solid";
 import type { Component } from "vue";
-import SimpleAuthenticationLogo from "~/components/icons/SimpleAuthenticationLogo.vue";
 
 const authenticationMechanisms: Array<{
   name: string;
@@ -113,7 +113,7 @@ const authenticationMechanisms: Array<{
   {
     name: "Simple (username/password)",
     enabled: true,
-    icon: SimpleAuthenticationLogo,
+    icon: IconsSimpleAuthenticationLogo,
     route: "/admin/auth/simple",
   },
 ];
diff --git a/pages/store/[id]/index.vue b/pages/store/[id]/index.vue
index 6768b71..679de79 100644
--- a/pages/store/[id]/index.vue
+++ b/pages/store/[id]/index.vue
@@ -70,13 +70,10 @@
                 <td
                   class="whitespace-nowrap inline-flex gap-x-4 px-3 py-4 text-sm text-zinc-400"
                 >
-                  <IconsWindowsLogo
+                  <component
+                    v-for="platform in platforms"
+                    :is="icons[platform]"
                     class="text-blue-600 w-6 h-6"
-                    v-if="platforms.includes(Platform.Windows)"
-                  />
-                  <IconsLinuxLogo
-                    class="text-blue-600 w-6 h-6"
-                    v-if="platforms.includes(Platform.Linux)"
                   />
                   <span
                     v-if="platforms.length == 0"
@@ -162,12 +159,14 @@
 </template>
 
 <script setup lang="ts">
+import { IconsLinuxLogo, IconsWindowsLogo } from "#components";
 import { PlusIcon } from "@heroicons/vue/20/solid";
 import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
 import { StarIcon } from "@heroicons/vue/24/solid";
-import { Platform, type Game, type GameVersion } from "@prisma/client";
+import { type Game, type GameVersion } from "@prisma/client";
 import { micromark } from "micromark";
 import moment from "moment";
+import { PlatformClient } from "~/composables/types";
 
 const route = useRoute();
 const gameId = route.params.id.toString();
@@ -205,7 +204,7 @@ const descriptionHTML = micromark(game.mDescription);
 
 const showReadMore = previewHTML != descriptionHTML;
 const platforms = game.versions
-  .map((e) => e.platform)
+  .map((e) => e.platform as PlatformClient)
   .flat()
   .filter((e, i, u) => u.indexOf(e) === i);
 
@@ -213,6 +212,10 @@ const rating = Math.round(game.mReviewRating * 5);
 const ratingArray = Array(5)
   .fill(null)
   .map((_, i) => i + 1 <= rating);
+const icons = {
+  [PlatformClient.Linux]: IconsLinuxLogo,
+  [PlatformClient.Windows]: IconsWindowsLogo,
+};
 
 useHead({
   title: game.mName,