STARTLINER/src/components/App.vue

<script setup lang="ts">
import { Ref, computed, onMounted, ref } from 'vue';
import Button from 'primevue/button';
import InputIcon from 'primevue/inputicon';
import InputText from 'primevue/inputtext';
import Tab from 'primevue/tab';
import TabList from 'primevue/tablist';
import TabPanel from 'primevue/tabpanel';
import TabPanels from 'primevue/tabpanels';
import Tabs from 'primevue/tabs';
import ModList from './ModList.vue';
import ModStore from './ModStore.vue';
import OptionList from './OptionList.vue';
import ProfileList from './ProfileList.vue';
import StartButton from './StartButton.vue';
import { invoke } from '../invoke';
import { useGeneralStore, usePkgStore, usePrfStore } from '../stores';
import { Dirs } from '../types';

const pkg = usePkgStore();
const prf = usePrfStore();
const general = useGeneralStore();

pkg.setupListeners();

const currentTab: Ref<string | number> = ref(3);
const pkgSearchTerm = ref('');

const isProfileDisabled = computed(() => prf.current === null);

onMounted(async () => {
    invoke('list_directories').then((d) => {
        general.dirs = d as Dirs;
    });

    const fetch_promise = pkg.fetch(true);

    await Promise.all([prf.reloadList(), prf.reload()]);

    if (prf.current !== null) {
        currentTab.value = 0;
        await pkg.reloadAll();
    }

    fetch_promise.then(async () => {
        await invoke('install_package', {
            key: 'segatools-mu3hook',
            force: false,
        });
    });
});
</script>

<template>
    <main>
        <Tabs
            lazy
            :value="currentTab"
            v-on:update:value="(value) => (currentTab = value)"
            class="h-screen"
        >
            <div class="fixed w-full flex z-100">
                <TabList class="grow">
                    <Tab :disabled="isProfileDisabled" :value="0"
                        ><div class="pi pi-list-check"></div
                    ></Tab>
                    <Tab
                        v-if="pkg.networkStatus === 'online'"
                        :disabled="isProfileDisabled"
                        :value="1"
                        ><div class="pi pi-download"></div
                    ></Tab>
                    <Tab :disabled="isProfileDisabled" :value="2"
                        ><div class="pi pi-cog"></div
                    ></Tab>
                    <Tab :value="3"
                        ><div class="pi pi-question-circle"></div
                    ></Tab>
                    <div class="grow"></div>
                    <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.networkStatus === 'connecting'"
                            class="shrink self-center"
                            icon="pi pi-sync pi-spin"
                            size="small"
                            :disabled="true"
                        />
                        <Button
                            v-if="pkg.networkStatus === 'offline'"
                            class="shrink self-center"
                            icon="pi pi-sync"
                            size="small"
                            @click="pkg.fetch(false)"
                        />
                    </div>
                    <div class="grow"></div>
                    <StartButton />
                </TabList>
            </div>
            <TabPanels class="w-full grow mt-[3rem]">
                <TabPanel :value="0">
                    <ModList :search="pkgSearchTerm" />
                </TabPanel>
                <TabPanel :value="1">
                    <ModStore :search="pkgSearchTerm" />
                </TabPanel>
                <TabPanel :value="2">
                    <OptionList />
                </TabPanel>
                <TabPanel :value="3">
                    <strong>UNDER CONSTRUCTION</strong><br />Some features are
                    missing.<br />Existing features are expected to break
                    sometimes.
                    <ProfileList />
                    <img
                        v-if="prf.current?.game === 'ongeki'"
                        src="/sticker-ongeki.svg"
                        class="fixed bottom-0 right-0 z-999"
                    />
                    <img
                        v-else-if="prf.current?.game === 'chunithm'"
                        src="/sticker-chunithm.svg"
                        class="fixed bottom-0 right-0 z-999"
                    />
                    <br /><br /><br />
                    <footer>
                        <Button
                            icon="pi pi-discord"
                            as="a"
                            target="_blank"
                            href="https://discord.gg/jxvzHjjEmc"
                        />
                    </footer>
                </TabPanel>
            </TabPanels>
        </Tabs>
    </main>
</template>

<style lang="css">
@import 'tailwindcss';
@import 'primeicons/primeicons.css';

.p-tablist-tab-list {
    height: 3rem;
}

html,
body {
    margin: 0;
    padding: 0;
}
</style>