feat: new grouping options

src/components/ModList.vue

@@ -4,13 +4,15 @@ import Button from 'primevue/button';
 import Dialog from 'primevue/dialog';
 import Fieldset from 'primevue/fieldset';
 import InputText from 'primevue/inputtext';
+import MultiSelect from 'primevue/multiselect';
 import SelectButton from 'primevue/selectbutton';
 import ToggleSwitch from 'primevue/toggleswitch';
+import { emit } from '@tauri-apps/api/event';
 import ModListEntry from './ModListEntry.vue';
 import ModTitlecard from './ModTitlecard.vue';
 import { invoke } from '../invoke';
 import { useClientStore, usePkgStore, usePrfStore } from '../stores';
-import { Game, Package } from '../types';
+import { Feature, Game, Package } from '../types';
 import { pkgKey } from '../util';
 import { useI18n } from 'vue-i18n';
 
@@ -35,36 +37,105 @@ const loadPackages = () => {
 
 loadPackages();
 
-const group = computed(() => {
-    const grouped = Object.groupBy(
-        pkgs.allLocal
-            .filter((p) => gameSublist.value.includes(pkgKey(p)))
-            .filter(
-                (p) =>
-                    props.search === undefined ||
-                    p.name.toLowerCase().includes(props.search.toLowerCase()) ||
-                    p.namespace
-                        .toLowerCase()
-                        .includes(props.search.toLowerCase())
-            ),
-        ({ namespace }) => namespace
-    );
-    if (!('local' in grouped)) {
-        grouped['local'] = [];
+const allCategories = computed(() => {
+    const res = new Set<string>();
+    for (const pkg of pkgs.allLocal) {
+        for (const cat of pkg.rmt?.categories ?? []) {
+            res.add(cat);
+        }
     }
-    const res: [string, Package[]][] = [];
+    return [...res.values()].sort((a, b) => a.localeCompare(b));
+});
+
+const local = computed(() => {
+    return pkgs.allLocal
+        .filter((p) => gameSublist.value.includes(pkgKey(p)))
+        .filter((p) => p.namespace === 'local');
+});
+
+const groupedList = computed(() => {
+    const searchedPkgs = pkgs.allLocal
+        .filter((p) => gameSublist.value.includes(pkgKey(p)))
+        .filter((p) => p.namespace !== 'local')
+        .filter(
+            (p) =>
+                props.search === undefined ||
+                p.name.toLowerCase().includes(props.search.toLowerCase()) ||
+                p.namespace.toLowerCase().includes(props.search.toLowerCase())
+        );
+
+    let grouped;
+    if (client.pkgListMode === 'namespace') {
+        grouped = Object.groupBy(searchedPkgs, ({ namespace }) => namespace);
+    } else if (client.pkgListMode === 'type') {
+        grouped = {
+            standard: [] as Package[],
+            native: [] as Package[],
+            segatools: [] as Package[],
+            unsupported: [] as Package[] | undefined,
+        };
+        grouped.unsupported = [];
+        for (const pkg of searchedPkgs) {
+            const loc = pkg.loc;
+            if (!loc || !loc.status || typeof loc.status === 'string') {
+                grouped.unsupported.push(pkg);
+            } else {
+                if (
+                    loc.status.OK[0] &
+                    (Feature.GameDLL | Feature.Mempatcher | Feature.AmdDLL)
+                ) {
+                    grouped.native.push(pkg);
+                } else if (loc.status.OK[0] & Feature.Mod) {
+                    grouped.standard.push(pkg);
+                }
+                if (
+                    loc.status.OK[0] &
+                    (Feature.AMNet |
+                        Feature.Aime |
+                        Feature.ChuniIO |
+                        Feature.ChusanHook |
+                        Feature.Mu3IO |
+                        Feature.Mu3Hook)
+                ) {
+                    grouped.segatools.push(pkg);
+                }
+            }
+        }
+        if (grouped.unsupported.length === 0) {
+            delete grouped.unsupported;
+        }
+    } else {
+        grouped = {} as { [key: string]: Package[] };
+        for (const pkg of searchedPkgs) {
+            for (const cat of pkg.rmt?.categories ?? []) {
+                if (client.hiddenCategories.includes(cat)) {
+                    continue;
+                }
+                if (!(cat in grouped)) {
+                    grouped[cat] = [] as Package[];
+                }
+                grouped[cat].push(pkg);
+            }
+        }
+    }
+
+    let res: [string, Package[]][] = [];
     for (const [k, v] of Object.entries(grouped)) {
         if (v !== undefined) {
             res.push([k, v]);
         }
     }
-    res.sort((a, b) => {
-        return a[0] === 'local'
-            ? -1000
-            : b[0] === 'local'
-              ? 1000
-              : `${a[0]}`.localeCompare(`${b[0]}`);
-    });
+
+    if (
+        client.pkgListMode === 'namespace' ||
+        client.pkgListMode === 'category'
+    ) {
+        res.sort((a, b) => `${a[0]}`.localeCompare(`${b[0]}`));
+    } else if (client.pkgListMode === 'type') {
+        for (const entry of res) {
+            entry[0] = t(`pkglist.${entry[0]}`);
+        }
+    }
 
     return res;
 });
@@ -199,7 +270,43 @@ const gameModelChunithm = gameModel('chunithm');
             />
         </div>
     </Dialog>
-    <Fieldset :legend="t('store.missing')" v-if="(missing?.length ?? 0) > 0">
+    <div class="flex flex-row">
+        <SelectButton
+            :options="[
+                { title: t('pkglist.namespace'), value: 'namespace' },
+                { title: t('pkglist.type'), value: 'type' },
+                { title: t('pkglist.category'), value: 'category' },
+            ]"
+            v-model="client.pkgListMode"
+            v-on:update:model-value="
+                client.save();
+                emit('reload-icons');
+            "
+            :allow-empty="false"
+            option-label="title"
+            option-value="value"
+        />
+
+        <div
+            class="grow text-right mr-2 self-center"
+            v-if="client.pkgListMode === 'category'"
+        >
+            {{ t('pkglist.exclusions') }}
+        </div>
+        <MultiSelect
+            v-if="client.pkgListMode === 'category'"
+            style="width: 30%"
+            :showToggleAll="false"
+            v-model="client.hiddenCategories"
+            v-on:value-change="
+                client.save();
+                emit('reload-icons');
+            "
+            :options="allCategories"
+            class="w-full grow"
+        />
+    </div>
+    <Fieldset :legend="t('pkglist.missing')" v-if="(missing?.length ?? 0) > 0">
         <div class="flex items-center" v-for="p in missing">
             <ModTitlecard
                 show-namespace
@@ -222,20 +329,21 @@ const gameModelChunithm = gameModel('chunithm');
             />
         </div>
     </Fieldset>
-    <Fieldset v-for="[namespace, pkgs] in group" :legend="namespace">
+    <Fieldset :legend="t('pkglist.local')">
+        <ModListEntry v-for="p in local" :pkg="p" />
+        <Button
+            rounded
+            icon="pi pi-plus"
+            severity="success"
+            aria-label="install"
+            size="small"
+            class="self-center"
+            style="width: 2rem; height: 2rem"
+            v-on:click="() => (dialogVisible = true)"
+        />
+    </Fieldset>
+    <Fieldset v-for="[namespace, pkgs] in groupedList" :legend="namespace">
         <ModListEntry v-for="p in pkgs" :pkg="p" />
-        <div v-if="namespace === 'local'">
-            <Button
-                rounded
-                icon="pi pi-plus"
-                severity="success"
-                aria-label="install"
-                size="small"
-                class="self-center"
-                style="width: 2rem; height: 2rem"
-                v-on:click="() => (dialogVisible = true)"
-            />
-        </div>
     </Fieldset>
 </template>
 

src/components/ModListEntry.vue

@@ -7,7 +7,7 @@ import LinkButton from './LinkButton.vue';
 import ModTitlecard from './ModTitlecard.vue';
 import UpdateButton from './UpdateButton.vue';
 import { invoke } from '../invoke';
-import { usePkgStore, usePrfStore } from '../stores';
+import { useClientStore, usePkgStore, usePrfStore } from '../stores';
 import { Feature, Package } from '../types';
 import { hasFeature } from '../util';
 import { useI18n } from 'vue-i18n';
@@ -16,6 +16,7 @@ const { t } = useI18n();
 
 const prf = usePrfStore();
 const pkgs = usePkgStore();
+const client = useClientStore();
 
 const props = defineProps({
     pkg: Object as () => Package,
@@ -39,7 +40,13 @@ if (unsupported.value === true && model.value === true) {
 
 <template>
     <div class="flex items-center">
-        <ModTitlecard show-version show-icon show-description :pkg="pkg" />
+        <ModTitlecard
+            show-version
+            show-icon
+            show-description
+            :show-namespace="client.pkgListMode !== 'namespace'"
+            :pkg="pkg"
+        />
         <UpdateButton :pkg="pkg" />
         <span v-tooltip="unsupported && t('store.incompatible')">
             <ToggleSwitch

src/components/ModTitlecard.vue

@@ -2,9 +2,13 @@
 import { ref } from 'vue';
 import Chip from 'primevue/chip';
 import { convertFileSrc } from '@tauri-apps/api/core';
+import { listen } from '@tauri-apps/api/event';
 import { invoke } from '../invoke';
 import { Feature, Package } from '../types';
 import { hasFeature, needsUpdate } from '../util';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const props = defineProps({
     pkg: Object as () => Package,
@@ -17,7 +21,7 @@ const props = defineProps({
 
 const icon = ref('/no-icon.png');
 
-(async () => {
+const reloadIcons = async () => {
     const src = props.pkg?.loc?.icon ?? props.pkg?.rmt?.icon;
 
     if (src === undefined) {
@@ -32,7 +36,11 @@ const icon = ref('/no-icon.png');
             icon.value = '/no-icon.png';
         }
     }
-})();
+};
+
+reloadIcons();
+
+listen('reload-icons', reloadIcons);
 </script>
 
 <template>
@@ -97,7 +105,12 @@ const icon = ref('/no-icon.png');
                 v-if="showNamespace && pkg?.namespace"
                 class="text-sm opacity-75"
             >
-                by&nbsp;{{ pkg.namespace }}
+                &nbsp;{{
+                    t('by', { namespace: pkg.namespace }).replaceAll(
+                        ' ',
+                        '&nbsp;'
+                    )
+                }}
             </span>
             <span class="m-2">
                 <span