forked from BRETT/BRETT
79 lines
2.6 KiB
Vue
79 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { useEventListener } from '@vueuse/core'
|
|
import {
|
|
CommandDialog,
|
|
CommandEmpty,
|
|
CommandGroup,
|
|
CommandInput,
|
|
CommandItem,
|
|
CommandList,
|
|
CommandSeparator,
|
|
CommandShortcut,
|
|
} from '@/components/ui/command'
|
|
|
|
const { open } = useCommandPalette()
|
|
const { user, can } = useAuth()
|
|
|
|
useEventListener('keydown', (e: KeyboardEvent) => {
|
|
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') {
|
|
e.preventDefault()
|
|
open.value = !open.value
|
|
}
|
|
})
|
|
|
|
async function go(to: string) {
|
|
open.value = false
|
|
await navigateTo(to)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<CommandDialog
|
|
v-model:open="open"
|
|
title="Schnellsuche"
|
|
description="Seiten, Tags oder Uploader suchen"
|
|
class="rounded-md!"
|
|
>
|
|
<CommandInput placeholder="Seiten, Tags oder Uploader suchen…" />
|
|
<CommandList>
|
|
<CommandEmpty>Keine Ergebnisse.</CommandEmpty>
|
|
|
|
<CommandGroup heading="Seiten">
|
|
<CommandItem value="Startseite" class="gap-2" @select="go('/')">
|
|
<Icon name="ph:house-fill" class="size-4 text-muted-foreground" />
|
|
Startseite
|
|
<CommandShortcut>/</CommandShortcut>
|
|
</CommandItem>
|
|
<CommandItem value="Benutzer" class="gap-2" @select="go('/users')">
|
|
<Icon name="ph:users-fill" class="size-4 text-muted-foreground" />
|
|
Benutzer
|
|
<CommandShortcut>/users</CommandShortcut>
|
|
</CommandItem>
|
|
<CommandItem v-if="user" value="Mein Profil" class="gap-2" @select="go(`/user/${user.id}`)">
|
|
<Icon name="ph:user-fill" class="size-4 text-muted-foreground" />
|
|
Mein Profil
|
|
</CommandItem>
|
|
<CommandItem v-if="user" value="Einstellungen" class="gap-2" @select="go('/settings')">
|
|
<Icon name="ph:gear-fill" class="size-4 text-muted-foreground" />
|
|
Einstellungen
|
|
</CommandItem>
|
|
<CommandItem v-if="can('admin.access')" value="Admin-Bereich" class="gap-2" @select="go('/admin')">
|
|
<Icon name="ph:shield-fill" class="size-4 text-muted-foreground" />
|
|
Admin-Bereich
|
|
</CommandItem>
|
|
<CommandItem v-if="!user" value="Login" class="gap-2" @select="go('/login')">
|
|
<Icon name="ph:sign-in-fill" class="size-4 text-muted-foreground" />
|
|
Login
|
|
</CommandItem>
|
|
<CommandItem v-if="!user" value="Registrieren" class="gap-2" @select="go('/register')">
|
|
<Icon name="ph:user-plus-fill" class="size-4 text-muted-foreground" />
|
|
Registrieren
|
|
</CommandItem>
|
|
</CommandGroup>
|
|
|
|
<CommandSeparator />
|
|
<CommandPaletteResults @select="go" />
|
|
</CommandList>
|
|
</CommandDialog>
|
|
</template>
|