Error063/STARTLINER
1
0
Fork 0
forked from akanyan/STARTLINER
Code Pull Requests Activity

feat: categories and option search

Browse Source
This commit is contained in:
あかニャン
2025-03-15 15:32:45 +00:00
parent 97831caf75
commit 08d6a2a2fe
11 changed files with 214 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
rust/src/model/rainy.rs
View File

@ -9,6 +9,8 @@ pub struct V1Package {
pub owner: String,
pub package_url: String,
pub is_deprecated: bool,
pub has_nsfw_content: bool,
pub categories: Vec<String>,
pub versions: Vec<V1Version>,
}

6
rust/src/pkg.rs
View File

@ -49,7 +49,9 @@ pub struct Remote {
pub package_url: String,
pub download_url: String,
pub deprecated: bool,
pub dependencies: BTreeSet<PkgKey>
pub nsfw: bool,
pub categories: Vec<String>,
pub dependencies: BTreeSet<PkgKey>,
}
impl Package {
@ -70,7 +72,9 @@ impl Package {
package_url: p.package_url,
download_url: v.download_url,
deprecated: p.is_deprecated,
nsfw: p.has_nsfw_content,
version: v.version_number,
categories: p.categories,
dependencies: Self::sanitize_deps(v.dependencies)
})
})

55
src/components/App.vue
View File

@ -24,8 +24,7 @@ const general = useGeneralStore();
pkg.setupListeners();
const currentTab: Ref<string | number> = ref(3);
const searchPkg = ref('');
const searchCfg = ref('');
const pkgSearchTerm = ref('');
const isProfileDisabled = computed(() => prf.current === null);
@ -34,7 +33,7 @@ onMounted(async () => {
general.dirs = d as Dirs;
});
const fetch_promise = pkg.fetch();
const fetch_promise = pkg.fetch(true);
await Promise.all([prf.reloadList(), prf.reload()]);
@ -65,7 +64,10 @@ onMounted(async () => {
<Tab :disabled="isProfileDisabled" :value="0"
><div class="pi pi-list-check"></div
></Tab>
<Tab :disabled="isProfileDisabled" :value="1"
<Tab
v-if="!pkg.offline"
:disabled="isProfileDisabled"
:value="1"
><div class="pi pi-download"></div
></Tab>
<Tab :disabled="isProfileDisabled" :value="2"
@ -75,23 +77,32 @@ onMounted(async () => {
><div class="pi pi-question-circle"></div
></Tab>
<div class="grow"></div>
<div class="flex" v-if="currentTab !== 3">
<InputIcon class="self-center mr-2">
<i class="pi pi-search" />
</InputIcon>
<InputText
v-if="currentTab === 2"
class="self-center"
<div class="flex gap-4">
<div class="flex" v-if="currentTab !== 3">
<InputIcon class="self-center mr-2">
<i class="pi pi-search" />
</InputIcon>
<InputText
v-if="currentTab === 2"
class="self-center"
size="small"
placeholder="Search"
v-model="general.cfgSearchTerm"
/>
<InputText
v-else
class="self-center"
size="small"
placeholder="Search"
v-model="pkgSearchTerm"
/>
</div>
<Button
v-if="pkg.offline"
class="shrink self-center"
icon="pi pi-sync"
size="small"
placeholder="Search"
v-model="searchCfg"
/>
<InputText
v-else
class="self-center"
size="small"
placeholder="Search"
v-model="searchPkg"
@click="pkg.fetch(false)"
/>
</div>
<div class="grow"></div>
@ -100,10 +111,10 @@ onMounted(async () => {
</div>
<TabPanels class="w-full grow mt-[3rem]">
<TabPanel :value="0">
<ModList :search="searchPkg" />
<ModList :search="pkgSearchTerm" />
</TabPanel>
<TabPanel :value="1">
<ModStore :search="searchPkg" />
<ModStore :search="pkgSearchTerm" />
</TabPanel>
<TabPanel :value="2">
<OptionList />

34
src/components/ModStore.vue
View File

@ -1,5 +1,8 @@
<script setup lang="ts">
import { ref } from 'vue';
import Divider from 'primevue/divider';
import MultiSelect from 'primevue/multiselect';
import ToggleSwitch from 'primevue/toggleswitch';
import ModStoreEntry from './ModStoreEntry.vue';
import { usePkgStore } from '../stores';
@ -28,6 +31,37 @@ const list = () => {
</script>
<template>
<div class="flex gap-4 items-center">
<div class="flex flex-col gap-2">
<div class="flex gap-2">
<div class="text-amber-400 grow">Show deprecated</div>
<ToggleSwitch v-model="pkgs.showDeprecated" />
</div>
<div class="flex gap-2">
<div class="text-red-400 grow">Show NSFW</div>
<ToggleSwitch v-model="pkgs.showNSFW" />
</div>
</div>
<div class="flex flex-col gap-2 grow">
<MultiSelect
size="small"
:showToggleAll="false"
placeholder="Include categories"
v-model="pkgs.includeCategories"
:options="[...pkgs.availableCategories]"
class="w-full"
/>
<MultiSelect
size="small"
:showToggleAll="false"
placeholder="Exclude categories"
v-model="pkgs.excludeCategories"
:options="[...pkgs.availableCategories]"
class="w-full"
/>
</div>
</div>
<Divider />
<div v-for="p in list()" class="flex flex-row">
<ModStoreEntry :pkg="p" />
</div>

2
src/components/ModStoreEntry.vue
View File

@ -11,7 +11,7 @@ defineProps({
</script>
<template>
<ModTitlecard :pkg="pkg" showNamespace />
<ModTitlecard :pkg="pkg" show-namespace show-categories />
<InstallButton :pkg="pkg" />
<Button
rounded

26
src/components/ModTitlecard.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import Chip from 'primevue/chip';
import { convertFileSrc } from '@tauri-apps/api/core';
import { Package } from '../types';
import { needsUpdate } from '../util';
@ -7,6 +8,7 @@ const props = defineProps({
pkg: Object as () => Package,
showNamespace: Boolean,
showVersion: Boolean,
showCategories: Boolean,
});
const iconSrc = () => {
@ -34,6 +36,18 @@ const iconSrc = () => {
<span class="text-lg">
{{ pkg?.name ?? 'Untitled' }}
</span>
<span
v-if="pkg?.rmt?.deprecated"
v-tooltip="'deprecated'"
class="pi pi-exclamation-circle ml-1 text-amber-400"
>
</span>
<span
v-if="pkg?.rmt?.nsfw"
v-tooltip="'NSFW'"
class="pi pi-exclamation-triangle ml-1 text-red-400"
>
</span>
<span
v-if="showNamespace && pkg?.namespace"
class="text-sm opacity-75"
@ -58,5 +72,17 @@ const iconSrc = () => {
<div class="text-sm opacity-75">
{{ pkg?.description ?? 'No description' }}
</div>
<div v-if="showCategories" class="mt-1 flex gap-1">
<span class="text-xs" v-for="c in pkg?.rmt?.categories"
><Chip :label="c"
/></span>
</div>
</label>
</template>
<style scoped>
.p-chip {
padding: 0.4rem !important;
font-size: 0.66rem !important;
}
</style>

9
src/components/OptionCategory.vue
View File

@ -1,5 +1,8 @@
<script setup lang="ts">
import Fieldset from 'primevue/fieldset';
import { useGeneralStore } from '../stores';
const general = useGeneralStore();
defineProps({
title: String,
@ -7,7 +10,11 @@ defineProps({
</script>
<template>
<Fieldset :legend="title" :toggleable="true">
<Fieldset
:legend="title"
:toggleable="true"
v-show="general.cfgCategories.has(title ?? '')"
>
<div class="flex w-full flex-col gap-1">
<slot />
</div>

22
src/components/OptionRow.vue
View File

@ -1,11 +1,29 @@
<script setup lang="ts">
defineProps({
import { computed, getCurrentInstance } from 'vue';
import { useGeneralStore } from '../stores';
const general = useGeneralStore();
const category = getCurrentInstance()?.parent?.parent?.parent?.parent; // yes indeed
const props = defineProps({
title: String,
});
const searched = computed(() => {
const term = general.cfgSearchTerm.toLowerCase();
const categoryTitle = category?.props?.title as string | undefined;
const res =
props.title?.toLowerCase().includes(term) ||
categoryTitle?.toLowerCase().includes(term);
if (res === true && categoryTitle !== undefined) {
general.cfgCategories.add(categoryTitle);
}
return res;
});
</script>
<template>
<div class="flex flex-row w-full p-2 gap-2 items-center">
<div v-if="searched" class="flex flex-row w-full p-2 gap-2 items-center">
<div class="grow">{{ title }}</div>
<slot />
</div>

13
src/invoke.ts
View File

@ -24,3 +24,16 @@ export const invoke = async <T>(
throw e;
}
};
export const invoke_nopopup = async <T>(
cmd: string,
args?: InvokeArgs,
options?: InvokeOptions
): Promise<T> => {
try {
return await real_invoke(cmd, args, options);
} catch (e: unknown) {
console.error(`Error invoking ${cmd}: ${e}`);
throw e;
}
};

76
src/stores.ts
View File

@ -2,7 +2,7 @@ import { Ref, computed, ref, watchEffect } from 'vue';
import { defineStore } from 'pinia';
import { listen } from '@tauri-apps/api/event';
import * as path from '@tauri-apps/api/path';
import { invoke } from './invoke';
import { invoke, invoke_nopopup } from './invoke';
import { Dirs, Game, Package, Profile, ProfileMeta } from './types';
import { changePrimaryColor, pkgKey } from './util';
@ -12,6 +12,17 @@ type InstallStatus = {
export const useGeneralStore = defineStore('general', () => {
const dirs: Ref<Dirs | null> = ref(null);
const cfgCategories = ref(new Set<string>());
const _cfgSearchTerm = ref('');
const cfgSearchTerm = computed({
set(value: string) {
cfgCategories.value.clear();
_cfgSearchTerm.value = value;
},
get() {
return _cfgSearchTerm.value;
},
});
const configDir = computed(() => {
if (dirs.value === null) {
@ -32,13 +43,35 @@ export const useGeneralStore = defineStore('general', () => {
return dirs.value.cache_dir;
});
return { dirs, configDir, dataDir, cacheDir };
return {
dirs,
_cfgSearchTerm,
cfgSearchTerm,
cfgCategories,
configDir,
dataDir,
cacheDir,
};
});
export const usePkgStore = defineStore('pkg', {
state: (): { pkg: { [key: string]: Package } } => {
state: (): {
pkg: { [key: string]: Package };
offline: boolean;
showDeprecated: boolean;
showNSFW: boolean;
availableCategories: Set<string>;
includeCategories: string[];
excludeCategories: string[];
} => {
return {
pkg: {},
offline: false,
showDeprecated: false,
showNSFW: false,
availableCategories: new Set(),
includeCategories: [],
excludeCategories: [],
};
},
getters: {
@ -48,7 +81,21 @@ export const usePkgStore = defineStore('pkg', {
all: (state) => Object.values(state),
allLocal: (state) =>
Object.values(state.pkg).filter((p) => p.loc?.kind === 'Mod'),
allRemote: (state) => Object.values(state.pkg).filter((p) => p.rmt),
allRemote: (state) =>
Object.values(state.pkg).filter(
(p) =>
p.rmt !== null &&
(state.showDeprecated || !p.rmt.deprecated) &&
(state.showNSFW || !p.rmt.nsfw) &&
(state.includeCategories.length === 0 ||
p.rmt.categories.some((c) =>
state.includeCategories.includes(c)
)) &&
(state.excludeCategories.length === 0 ||
p.rmt.categories.every(
(c) => !state.excludeCategories.includes(c)
))
),
hooks: (state) =>
Object.values(state.pkg).filter((p) => p.loc?.kind === 'Hook'),
ios: (state) =>
@ -74,6 +121,7 @@ export const usePkgStore = defineStore('pkg', {
const data = (await invoke('get_all_packages')) as {
[key: string]: Package;
};
this.availableCategories.clear();
for (const [k, v] of Object.entries(data)) {
this.reloadWith(k, v);
@ -97,10 +145,26 @@ export const usePkgStore = defineStore('pkg', {
this.pkg[key].rmt = null;
}
Object.assign(this.pkg[key], pkg);
if (pkg.rmt !== null) {
pkg.rmt.categories.forEach((c) =>
this.availableCategories.add(c)
);
}
},
async fetch() {
await invoke('fetch_listings');
async fetch(nopopup: boolean) {
try {
if (nopopup) {
await invoke_nopopup('fetch_listings');
} else {
await invoke('fetch_listings');
}
this.offline = false;
} catch (e) {
this.offline = true;
return;
}
await this.reloadAll();
},
},

2
src/types.ts
View File

@ -14,6 +14,8 @@ export interface Package {
package_url: string;
download_url: string;
deprecated: boolean;
nsfw: boolean;
categories: string[];
} | null;
js: {
busy: boolean;