Ryan/drop-app
1
0
Fork 0
mirror of https://github.com/Drop-OSS/drop-app.git synced 2025-11-14 00:31:33 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat(library ui): add installed ui in the library menu

Browse Source
This commit is contained in:
DecDuck
2025-01-05 18:32:22 +11:00
parent 02f8591a60
commit 2c8164e54f
3 changed files with 35 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
pages/library.vue
View File

@ -1,21 +1,25 @@
<template>
<div class="flex flex-row h-full">
<div class="flex-none max-h-full overflow-y-auto w-64 bg-zinc-950 px-2 py-1">
<div
class="flex-none max-h-full overflow-y-auto w-64 bg-zinc-950 px-2 py-1"
>
<ul class="flex flex-col gap-y-1">
<NuxtLink
v-for="(nav, navIdx) in navigation"
:key="nav.route"
:class="[
'transition-all duration-200 rounded-lg flex items-center py-1.5 px-3',
navIdx === currentNavigationIndex
? 'bg-zinc-800 text-zinc-100'
: 'bg-zinc-900/50 text-zinc-400 hover:bg-zinc-800/70 hover:text-zinc-300',
navIdx === currentNavigationIndex
? 'bg-zinc-800 text-zinc-100'
: nav.isInstalled.value
? 'text-zinc-300 hover:bg-zinc-800/90 hover:text-zinc-200'
: 'text-zinc-500 hover:bg-zinc-800/70 hover:text-zinc-300',
]"
:href="nav.route"
>
<div class="flex items-center w-full gap-x-3">
<img
class="h-8 w-10 flex-none object-cover bg-zinc-900"
class="size-6 flex-none object-cover bg-zinc-900 rounded"
:src="icons[navIdx]"
alt=""
/>
@ -34,16 +38,26 @@
<script setup lang="ts">
import { invoke } from "@tauri-apps/api/core";
import type { Game, NavigationItem } from "~/types";
import { GameStatusEnum, type Game, type NavigationItem } from "~/types";
const games: Array<Game> = await invoke("fetch_library");
const icons = await Promise.all(games.map((e) => useObject(e.mIconId)));
const rawGames: Array<Game> = await invoke("fetch_library");
const games = await Promise.all(rawGames.map((e) => useGame(e.id)));
const icons = await Promise.all(
games.map(({ game, status }) => useObject(game.mIconId))
);
const navigation = games.map((e) => {
const item: NavigationItem = {
label: e.mName,
route: `/library/${e.id}`,
prefix: `/library/${e.id}`,
const navigation = games.map(({ game, status }) => {
const isInstalled = computed(
() =>
status.value.type == GameStatusEnum.Installed ||
status.value.type == GameStatusEnum.SetupRequired
);
const item = {
label: game.mName,
route: `/library/${game.id}`,
prefix: `/library/${game.id}`,
isInstalled,
};
return item;
});