api specs

frontend/src/components/AppHeader.vue

@@ -16,6 +16,35 @@
               <span>{{ optionsLabel }}</span>
               <span class="control-toggle-meta">{{ modeShort }} · {{ languageShort }}</span>
             </button>
+            <button
+              class="control-icon-btn"
+              type="button"
+              :class="{ active: isFullscreen }"
+              :aria-label="fullscreenActionLabel"
+              :title="fullscreenActionLabel"
+              @click="toggleFullscreen"
+            >
+              <svg viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  v-if="!isFullscreen"
+                  d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  v-else
+                  d="M9 4H4v5M15 4h5v5M9 20H4v-5M15 20h5v-5"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </button>
           </div>
 
           <Transition name="controls-reveal">
@@ -57,9 +86,10 @@ const props = defineProps({
   mode: { type: String, required: true },
   language: { type: String, required: true },
   serverTime: { type: String, default: '' },
+  isFullscreen: { type: Boolean, default: false },
 })
 
-const emit = defineEmits(['change-mode', 'change-language'])
+const emit = defineEmits(['change-mode', 'change-language', 'toggle-fullscreen'])
 
 const controlsOpen = ref(false)
 const controlsRoot = ref(null)
@@ -71,6 +101,7 @@ const modeShort = computed(() => {
   return props.language === 'ar' ? 'إدارة' : 'Admin'
 })
 const languageShort = computed(() => (props.language === 'ar' ? 'AR' : 'EN'))
+const fullscreenActionLabel = computed(() => (props.isFullscreen ? props.t('actions.exitFullscreen') : props.t('actions.enterFullscreen')))
 const modeStatusLabel = computed(() => {
   if (props.mode === 'view') return '● ' + props.t('labels.liveTracker')
   if (props.mode === 'live') return '● ' + props.t('liveMode')
@@ -91,6 +122,10 @@ function changeLanguage(nextLanguage) {
   controlsOpen.value = false
 }
 
+function toggleFullscreen() {
+  emit('toggle-fullscreen')
+}
+
 function onGlobalPointerDown(event) {
   if (!controlsOpen.value) return
   const root = controlsRoot.value