frontend/app/components/sidebars/footer/footer-actions.vue

<script setup lang="ts">
import {
    ChevronsUpDown,
    Cog,
    DownloadCloud,
    Pen,
    UserPlus,
} from "lucide-vue-next";
import TinyCard from "~/components/profiles/tiny-card.vue";
import { Button } from "~/components/ui/button";
import {
    SidebarFooter,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
} from "~/components/ui/sidebar";
import * as m from "~~/paraglide/messages.js";
import AccountManager from "../account/account-manager.vue";

const { $pwa } = useNuxtApp();
const authStore = useAuthStore();
</script>

<template>
    <SidebarFooter>
        <SidebarMenu class="gap-3">
            <SidebarMenuItem>
                <AccountManager>
                    <SidebarMenuButton v-if="authStore.account && authStore.instance" size="lg">
                        <TinyCard :account="authStore.account" :domain="authStore.instance.domain" naked />
                        <ChevronsUpDown class="ml-auto size-4" />
                    </SidebarMenuButton>
                    <SidebarMenuButton v-else>
                        <UserPlus />
                        {{ m.sunny_pink_hyena_walk() }}
                        <ChevronsUpDown class="ml-auto size-4" />
                    </SidebarMenuButton>
                </AccountManager>
            </SidebarMenuItem>
            <SidebarMenuItem class="flex flex-col gap-2">
                <Button v-if="authStore.isSignedIn" variant="default" size="lg" class="w-full group-data-[collapsible=icon]:px-4"
                    @click="useEvent('composer:open')">
                    <Pen />
                    <span class="group-data-[collapsible=icon]:hidden">
                        {{ m.salty_aloof_turkey_nudge() }}
                    </span>
                </Button>
                <Button v-if="authStore.isSignedIn" size="lg" variant="secondary" @click="useEvent('preferences:open')">
                    <Cog />
                    Preferences
                </Button>
                <Button v-if="$pwa?.needRefresh" variant="destructive" size="lg"
                    class="w-full group-data-[collapsible=icon]:px-4" @click="$pwa?.updateServiceWorker(true)">
                    <DownloadCloud />
                    <span class="group-data-[collapsible=icon]:hidden">
                        {{ m.quaint_low_felix_pave() }}
                    </span>
                </Button>
            </SidebarMenuItem>
        </SidebarMenu>
    </SidebarFooter>
</template>