feat(frontend): add command palette & S+F keybind

frontend/app/app.vue

@@ -3,6 +3,13 @@ import { setFavicon } from '~/utils/setFavicon'
 
 useOgImage()
 
+const isCommandPaletteOpen = useCommandPaletteState()
+const isFlagModalOpen = useFlagModalState()
+
+if (import.meta.client) {
+  useCommandPaletteShortcuts()
+}
+
 onMounted(() => {
   setFavicon()
 })
@@ -16,5 +23,8 @@ onMounted(() => {
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
+
+    <LazyCommandPalette v-if="isCommandPaletteOpen" v-model="isCommandPaletteOpen" hydrate-on-idle />
+    <LazyFlagSubmitModal v-model="isFlagModalOpen" hydrate-on-idle />
   </UApp>
 </template>

frontend/app/components/CommandPalette.vue

@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import { LANDING_SOCIALS } from '~~/content/landing/socials'
+import { NAVBAR_ITEMS } from '~~/content/navbar'
+
+const isOpen = defineModel<boolean>({ default: false })
+
+const { logout } = useSession()
+
+function close() {
+  isOpen.value = false
+}
+
+const { data: tasks } = useLazyApi('/tasks/list')
+
+const { data: completedTasks } = useAuth('/teams/membership/completed_tasks', {
+  onResponseError: undefined,
+  redirect: 'error',
+})
+
+const completedTaskIds = computed(() => new Set(
+  Array.isArray(completedTasks.value) ? completedTasks.value : [],
+))
+
+function openFlagModal() {
+  close()
+  openFlagSubmitModal()
+}
+
+async function handleLogout() {
+  close()
+  await logout()
+}
+
+const { data: isLoggedIn } = useAuth('/auth/status', {
+  redirect: 'error',
+  onResponseError: undefined,
+})
+
+const { data: team } = useAuth('/teams/membership/my_team', {
+  onResponseError: undefined,
+  redirect: 'error',
+})
+
+const collapsedGroups = useLocalStorage<string[]>('command-palette-collapsed-groups', [])
+
+function isCollapsed(id: string) {
+  return collapsedGroups.value.includes(id)
+}
+
+function toggleGroup(id: string) {
+  if (isCollapsed(id)) {
+    collapsedGroups.value = collapsedGroups.value.filter(g => g !== id)
+  } else {
+    collapsedGroups.value.push(id)
+  }
+}
+
+const groups = computed(() => {
+  const rawGroups = [
+    {
+      id: 'tasks',
+      label: 'Zadania',
+      items: [
+        ...(isLoggedIn.value && team.value?.team_name
+          ? [{ label: 'Złóż flagę', icon: 'pixelarticons:flag', kbds: ['S', 'F'], onSelect: openFlagModal }]
+          : []),
+        ...(tasks.value ?? []).filter(task => task.id).map(task => ({
+          id: `task-${task.id}`,
+          taskId: task.id,
+          label: task.name,
+          icon: 'pixelarticons:flag',
+          to: `/tasks/description/${task.id}`,
+          onSelect: close,
+        })),
+      ],
+    },
+    {
+      id: 'navigation',
+      label: 'Nawigacja',
+      items: [
+        { label: 'Strona główna', icon: 'pixelarticons:home', to: '/', onSelect: close },
+        ...NAVBAR_ITEMS.flat()
+          .filter(item => 'to' in item)
+          .map(item => ({ label: item.label, icon: 'pixelarticons:link', to: item.to, onSelect: close })),
+        ...(isLoggedIn.value
+          ? [{ label: 'Panel', icon: 'pixelarticons:dashboard', to: '/panel/', onSelect: close }]
+          : []),
+      ],
+    },
+    {
+      id: 'account',
+      label: 'Konto',
+      items: [
+        ...(!isLoggedIn.value
+          ? [
+              { label: 'Zaloguj się', icon: 'pixelarticons:login', to: '/login', onSelect: close },
+              { label: 'Zarejestruj się', icon: 'pixelarticons:user-plus', to: '/register', onSelect: close },
+            ]
+          : [
+              { label: 'Profil', icon: 'pixelarticons:user', to: '/panel/profile', onSelect: close },
+              ...(team.value?.team_name
+                ? [{ label: 'Drużyna', icon: 'pixelarticons:users', to: '/panel/team', onSelect: close }]
+                : []),
+              { label: 'Wyloguj się', icon: 'pixelarticons:logout', onSelect: handleLogout },
+            ]),
+      ],
+    },
+    {
+      id: 'contact',
+      label: 'Kontakt',
+      items: LANDING_SOCIALS.map(social => ({ ...social, onSelect: close })),
+    },
+  ]
+
+  return rawGroups.map((group) => {
+    const headerItem = {
+      id: `${group.id}-header`,
+      label: group.label,
+      slot: 'group-header' as const,
+      ui: { item: 'cursor-pointer' },
+      onSelect(e: Event) {
+        e.preventDefault()
+        toggleGroup(group.id)
+      },
+      groupId: group.id,
+    }
+
+    return {
+      id: group.id,
+      items: [headerItem, ...group.items],
+      postFilter(searchTerm: string, filteredItems: any[]) {
+        const rest = filteredItems.filter(i => i.id !== headerItem.id)
+        if (!searchTerm && isCollapsed(group.id)) return [headerItem]
+        if (!searchTerm && group.id === 'tasks') {
+          const incomplete = rest.filter((i: any) => !i.taskId || !completedTaskIds.value.has(i.taskId))
+          return [headerItem, ...incomplete]
+        }
+        return [headerItem, ...rest]
+      },
+    }
+  })
+})
+</script>
+
+<template>
+  <UModal v-model:open="isOpen" title="Paleta poleceń" description="Szukaj i nawiguj po stronie">
+    <template #content>
+      <UCommandPalette
+        :groups="groups"
+        placeholder="Szukaj..."
+        close
+        icon="pixelarticons:search"
+        @update:open="isOpen = $event"
+      >
+        <template #group-header-leading />
+        <template #group-header-label="{ item }">
+          <span class="font-semibold text-highlighted">{{ item.label }}</span>
+        </template>
+        <template #group-header-trailing="{ item }">
+          <UIcon
+            :name="isCollapsed(item.groupId) ? 'pixelarticons:chevron-down' : 'pixelarticons:chevron-up'"
+            class="size-5 text-primary"
+          />
+        </template>
+        <template #empty>
+          Brak wyników
+        </template>
+        <template #footer>
+          <div class="flex items-center justify-between gap-2 text-sm text-muted">
+            <div class="flex items-center gap-2">
+              <UKbd>
+                <UIcon name="pixelarticons:arrow-up" />
+              </UKbd>
+              <UKbd>
+                <UIcon name="pixelarticons:arrow-down" />
+              </UKbd>
+              <span>Nawigacja</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <UKbd>
+                <UIcon name="pixelarticons:corner-down-left" />
+              </UKbd>
+              <span>Otwórz</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <UKbd value="esc" />
+              <span>Zamknij</span>
+            </div>
+          </div>
+        </template>
+      </UCommandPalette>
+    </template>
+  </UModal>
+</template>

frontend/app/components/FlagSubmitModal.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const isOpen = defineModel<boolean>({ default: false })
+</script>
+
+<template>
+  <UModal v-model:open="isOpen" title="Złóż flagę" description="Wpisz flagę w formacie hack4KrakCTF{...}" :ui="{ body: 'p-3 sm:p-4' }">
+    <template #body>
+      <PanelTileFlagForm :show-heading="false" @submitted="isOpen = false" />
+    </template>
+  </UModal>
+</template>

frontend/app/components/panel/tile/FlagForm.vue

@@ -2,6 +2,10 @@
 import type { FormSubmitEvent } from '@nuxt/ui'
 import * as party from 'party-js'
 
+const { showHeading = true } = defineProps<{
+  showHeading?: boolean
+}>()
+
 const emit = defineEmits<{
   submitted: []
 }>()
@@ -92,7 +96,7 @@ onBeforeUnmount(() => {
 
 <template>
   <section class="relative overflow-hidden border-2 border-primary bg-default p-5 lg:p-6">
-    <div class="mb-4 flex items-center gap-2">
+    <div v-if="showHeading" class="mb-4 flex items-center gap-2">
       <UIcon name="pixelarticons:flag" class="size-5 text-primary" />
       <PanelSectionTitle>
         Prześlij flagę

frontend/app/composables/useCommandPaletteUtils.ts

@@ -0,0 +1,32 @@
+export function useCommandPaletteState() {
+  return useState('command-palette-open', () => false)
+}
+
+export function useFlagModalState() {
+  return useState('flag-modal-open', () => false)
+}
+
+export function openFlagSubmitModal() {
+  const isFlagModalOpen = useFlagModalState()
+  isFlagModalOpen.value = true
+}
+
+export function useCommandPaletteShortcuts() {
+  const isCommandPaletteOpen = useCommandPaletteState()
+
+  defineShortcuts({
+    'meta_k': {
+      usingInput: true,
+      handler: () => {
+        isCommandPaletteOpen.value = !isCommandPaletteOpen.value
+      },
+    },
+    '/': () => {
+      isCommandPaletteOpen.value = true
+    },
+    's-f': () => {
+      isCommandPaletteOpen.value = false
+      openFlagSubmitModal()
+    },
+  })
+}

frontend/content/pages/rules.md

@@ -2,9 +2,11 @@
 title: Regulamin Hack4Krak - edycja dla Szkół Średnich w Małopolsce
 description: Regulamin Hack4Krak - edycja dla Szkół Średnich w Małopolsce
 ---
+
 ::caution
 Ten regulamin dotyczy poprzedniej edycji wydarzenia, która odbyła się w **Maju 2026**.
 ::
+
 ## 1. Postanowienia ogólne
 
 1. Organizatorem Hack4Krak - edycji dla Szkół Średnich w Małopolsce (zwanego dalej CTF) jest Fundacja Ambasada Społeczności z siedzibą przy ul. Zabłocie 20.22/207, 30-701 Kraków, wpisana do KRS pod numerem 0000764613.