fix: broken list

src/components/ModList.vue

@@ -40,7 +40,7 @@ const group = () => {
 };
 
 const missing = computed(() => {
-    return prf.current?.mods.filter((m) => !pkgs.hasLocal(m));
+    return prf.current?.mods.filter((m) => !pkgs.hasLocal(m)) ?? [];
 });
 </script>
 

src/components/ModListEntry.vue

@@ -8,7 +8,8 @@ import LinkButton from './LinkButton.vue';
 import ModTitlecard from './ModTitlecard.vue';
 import UpdateButton from './UpdateButton.vue';
 import { usePkgStore, usePrfStore } from '../stores';
-import { Package } from '../types';
+import { Feature, Package } from '../types';
+import { hasFeature } from '../util';
 
 const prf = usePrfStore();
 const pkgs = usePkgStore();
@@ -33,10 +34,10 @@ const model = computed({
         <UpdateButton :pkg="pkg" />
         <!-- @vue-expect-error Can't 'as any' because it breaks VSCode -->
         <ToggleSwitch
-            v-if="pkg?.loc?.kind === 'Mod' || pkg?.loc?.kind === 'Unsupported'"
+            v-if="hasFeature(pkg, Feature.Mod)"
             class="scale-[1.33] shrink-0"
             inputId="switch"
-            :disabled="pkg!.loc!.kind === 'Unsupported'"
+            :disabled="pkg!.loc!.status === 'Unsupported'"
             v-model="model"
         />
         <InstallButton :pkg="pkg" />

src/components/ModTitlecard.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import Chip from 'primevue/chip';
 import { convertFileSrc } from '@tauri-apps/api/core';
-import { Package } from '../types';
-import { needsUpdate } from '../util';
+import { Feature, Package } from '../types';
+import { hasFeature, needsUpdate } from '../util';
 
 const props = defineProps({
     pkg: Object as () => Package,
@@ -52,21 +52,19 @@ const iconSrc = () => {
             >
             </span>
             <span
-                v-if="pkg?.loc?.kind === 'Hook'"
+                v-if="hasFeature(pkg, Feature.Hook)"
                 v-tooltip="'Hook'"
                 class="pi pi-wrench ml-1 text-blue-400"
             >
             </span>
             <span
-                v-if="pkg?.loc?.kind === 'GameIO'"
+                v-if="hasFeature(pkg, Feature.GameIO)"
                 v-tooltip="'IO'"
                 class="pi pi-wrench ml-1 text-green-400"
             >
             </span>
             <span
-                v-if="
-                    pkg?.loc?.kind === 'AMNet' || pkg?.loc?.kind === 'AimeOther'
-                "
+                v-if="hasFeature(pkg, Feature.Aime)"
                 v-tooltip="'Aime'"
                 class="pi pi-wrench ml-1 text-purple-400"
             >

src/stores.ts

@@ -83,7 +83,7 @@ export const usePkgStore = defineStore('pkg', {
         all: (state) => Object.values(state),
         allLocal: (state) => Object.values(state.pkg).filter((p) => p.loc),
         hasLocal: (state) => (key: string) =>
-            key in state.pkg && state.pkg[key].loc,
+            state.pkg.hasOwnProperty(key) && state.pkg[key].loc,
         allRemote: (state) =>
             Object.values(state.pkg).filter(
                 (p) =>

src/types.ts

@@ -23,10 +23,11 @@ export interface Package {
 }
 
 export enum Feature {
-    Hook = 0b00001,
-    GameIO = 0b00010,
-    Aime = 0b00100,
-    AMNet = 0b01000,
+    Mod = 0b00001,
+    Hook = 0b00010,
+    GameIO = 0b00100,
+    Aime = 0b01000,
+    AMNet = 0b10000,
 }
 
 export type Status =

src/util.ts

@@ -46,9 +46,11 @@ export const needsUpdate = (pkg: Package | undefined) => {
     return l1 < r1;
 };
 
-export const hasFeature = (pkg: Package, feature: Feature) => {
+export const hasFeature = (pkg: Package | undefined, feature: Feature) => {
     return (
+        pkg !== undefined &&
         pkg.loc !== null &&
+        pkg.loc !== undefined &&
         typeof pkg.loc?.status !== 'string' &&
         pkg.loc.status.OK & feature
     );