add command palette

This commit is contained in:
Gregor Vostrak
2026-01-27 18:29:40 +01:00
parent 3fb75ec3d5
commit 672c243c91
24 changed files with 2292 additions and 16 deletions

View File

@@ -12,6 +12,7 @@ import {
CreditCardIcon,
FolderIcon,
HomeIcon,
MagnifyingGlassIcon,
TagIcon,
UserCircleIcon,
UserGroupIcon,
@@ -48,8 +49,13 @@ import { api } from '@/packages/api/src';
import { getCurrentOrganizationId } from '@/utils/useUser';
import LoadingSpinner from '@/packages/ui/src/LoadingSpinner.vue';
import { twMerge } from 'tailwind-merge';
import { Button } from '@/packages/ui/src';
import { Button as UiButton } from '@/packages/ui/src';
import { Button } from '@/Components/ui/button';
import { openFeedback } from '@/utils/feedback';
import { CommandPaletteProvider } from '@/Components/CommandPalette';
import { useCommandPalette } from '@/utils/useCommandPalette';
const { openPalette } = useCommandPalette();
defineProps({
title: String,
@@ -114,9 +120,22 @@ const page = usePage<{
}"
class="flex-shrink-0 h-screen hidden fixed w-[230px] 2xl:w-[250px] px-2.5 2xl:px-3 py-4 lg:flex flex-col justify-between">
<div class="flex flex-col h-full">
<div class="border-b border-default-background-separator pb-2 flex justify-between">
<OrganizationSwitcher class="w-full"></OrganizationSwitcher>
<XMarkIcon class="w-8 lg:hidden" @click="showSidebarMenu = false"></XMarkIcon>
<div
class="border-b border-default-background-separator pb-2 flex items-center gap-1">
<div class="flex-1 min-w-0 overflow-hidden">
<OrganizationSwitcher></OrganizationSwitcher>
</div>
<Button
variant="ghost"
size="icon"
class="h-7 w-7 flex-shrink-0"
data-testid="command_palette_button"
@click="openPalette">
<MagnifyingGlassIcon class="h-4 w-4 text-icon-default" />
</Button>
<XMarkIcon
class="w-8 lg:hidden flex-shrink-0"
@click="showSidebarMenu = false"></XMarkIcon>
</div>
<div class="border-b border-default-background-separator">
<CurrentSidebarTimer></CurrentSidebarTimer>
@@ -255,14 +274,14 @@ const page = usePage<{
:icon="Cog6ToothIcon"
:href="route('profile.show')"></NavigationSidebarItem>
<Button
<UiButton
v-if="page.props.has_services_extension"
variant="outline"
size="xs"
class="rounded-full ml-2 flex h-6 w-6 items-center text-xs text-icon-default justify-center"
@click="openFeedback">
?
</Button>
</UiButton>
</ul>
</div>
</div>
@@ -275,7 +294,17 @@ const page = usePage<{
<Bars3Icon
class="w-7 text-text-secondary"
@click="showSidebarMenu = !showSidebarMenu"></Bars3Icon>
<OrganizationSwitcher></OrganizationSwitcher>
<div class="flex items-center gap-1">
<OrganizationSwitcher></OrganizationSwitcher>
<Button
variant="ghost"
size="icon"
class="h-7 w-7 shrink-0"
data-testid="command_palette_button_mobile"
@click="openPalette">
<MagnifyingGlassIcon class="h-4 w-4 text-icon-default" />
</Button>
</div>
</div>
<Head :title="title" />
@@ -308,4 +337,5 @@ const page = usePage<{
</div>
<NotificationContainer></NotificationContainer>
<UserTimezoneMismatchModal></UserTimezoneMismatchModal>
<CommandPaletteProvider></CommandPaletteProvider>
</template>