forked from BRETT/BRETT
79 lines
2.8 KiB
Vue
79 lines
2.8 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="$t('palette.title')"
|
|
:description="$t('palette.desc')"
|
|
class="rounded-md!"
|
|
>
|
|
<CommandInput :placeholder="$t('palette.placeholder')" />
|
|
<CommandList>
|
|
<CommandEmpty>{{ $t('palette.empty') }}</CommandEmpty>
|
|
|
|
<CommandGroup :heading="$t('palette.pages')">
|
|
<CommandItem :value="$t('palette.home')" class="gap-2" @select="go('/')">
|
|
<Icon name="ph:house-fill" class="size-4 text-muted-foreground" />
|
|
{{ $t('palette.home') }}
|
|
<CommandShortcut>/</CommandShortcut>
|
|
</CommandItem>
|
|
<CommandItem :value="$t('palette.users')" class="gap-2" @select="go('/users')">
|
|
<Icon name="ph:users-fill" class="size-4 text-muted-foreground" />
|
|
{{ $t('palette.users') }}
|
|
<CommandShortcut>/users</CommandShortcut>
|
|
</CommandItem>
|
|
<CommandItem v-if="user" :value="$t('palette.myProfile')" class="gap-2" @select="go(`/user/${user.id}`)">
|
|
<Icon name="ph:user-fill" class="size-4 text-muted-foreground" />
|
|
{{ $t('palette.myProfile') }}
|
|
</CommandItem>
|
|
<CommandItem v-if="user" :value="$t('palette.settings')" class="gap-2" @select="go('/settings')">
|
|
<Icon name="ph:gear-fill" class="size-4 text-muted-foreground" />
|
|
{{ $t('palette.settings') }}
|
|
</CommandItem>
|
|
<CommandItem v-if="can('admin.access')" :value="$t('palette.adminArea')" class="gap-2" @select="go('/admin')">
|
|
<Icon name="ph:shield-fill" class="size-4 text-muted-foreground" />
|
|
{{ $t('palette.adminArea') }}
|
|
</CommandItem>
|
|
<CommandItem v-if="!user" :value="$t('palette.login')" class="gap-2" @select="go('/login')">
|
|
<Icon name="ph:sign-in-fill" class="size-4 text-muted-foreground" />
|
|
{{ $t('palette.login') }}
|
|
</CommandItem>
|
|
<CommandItem v-if="!user" :value="$t('palette.register')" class="gap-2" @select="go('/register')">
|
|
<Icon name="ph:user-plus-fill" class="size-4 text-muted-foreground" />
|
|
{{ $t('palette.register') }}
|
|
</CommandItem>
|
|
</CommandGroup>
|
|
|
|
<CommandSeparator />
|
|
<CommandPaletteResults @select="go" />
|
|
</CommandList>
|
|
</CommandDialog>
|
|
</template>
|