update

frontend/src/components/AppHeader.vue

@@ -0,0 +1,47 @@
+<template>
+  <header class="masthead">
+    <div class="masthead-main">
+      <div>
+        <h1 class="masthead-title">{{ competitionTitle }}</h1>
+        <p class="masthead-subtitle">{{ t('subtitle') }}</p>
+      </div>
+
+      <div class="masthead-controls">
+        <div class="controls-grid">
+          <div class="control-box">
+            <p class="control-label">{{ t('labels.mode') }}</p>
+            <div class="language-switcher mode-switcher">
+              <button class="lang-btn" :class="{ active: mode === 'view' }" @click="$emit('change-mode', 'view')">{{ t('viewMode') }}</button>
+              <button class="lang-btn" :class="{ active: mode === 'admin' }" @click="$emit('change-mode', 'admin')">{{ t('adminMode') }}</button>
+            </div>
+          </div>
+
+          <div class="control-box">
+            <p class="control-label">{{ t('labels.language') }}</p>
+            <div class="language-switcher">
+              <button class="lang-btn" :class="{ active: language === 'ar' }" @click="$emit('change-language', 'ar')">العربية</button>
+              <button class="lang-btn" :class="{ active: language === 'en' }" @click="$emit('change-language', 'en')">English</button>
+            </div>
+          </div>
+        </div>
+        <div class="status-row">
+          <div class="live-badge">{{ mode === 'view' ? '● ' + t('labels.liveTracker') : t('adminPanel') }}</div>
+          <div class="server-time" v-if="serverTime">{{ t('labels.lastSync') }}: {{ serverTime }}</div>
+        </div>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script setup>
+defineProps({
+  t: { type: Function, required: true },
+  competitionTitle: { type: String, required: true },
+  mode: { type: String, required: true },
+  language: { type: String, required: true },
+  serverTime: { type: String, default: '' },
+})
+
+defineEmits(['change-mode', 'change-language'])
+</script>
+