fix: redesing and add features

src/components/layout/Header.vue

@@ -0,0 +1,76 @@
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+    title: {
+        type: String,
+        required: true
+    },
+    badge: {
+        type: [String, Array],
+        default: null
+    },
+    subtitle: {
+        type: String,
+        default: null
+    },
+    titleColor: {
+        type: String,
+        default: 'text-white'
+    },
+    batteryLevel: {
+        type: Number,
+        default: 80
+    }
+})
+
+const currentTime = ref(new Date().toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' }))
+
+setInterval(() => {
+    currentTime.value = new Date().toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' })
+}, 1000)
+</script>
+
+<template>
+    <header class="h-12 border-b border-zinc-800 flex items-center justify-between px-4 bg-zinc-900/90 backdrop-blur z-20 shrink-0 select-none">
+        <div class="flex items-center gap-2">
+            <h1 class="font-bold text-sm uppercase tracking-tight" :class="titleColor">{{ title }}</h1>
+
+            <!-- Badge - can be string or array -->
+            <template v-if="badge">
+                <!-- Single badge (string) -->
+                <span v-if="typeof badge === 'string'"
+                      class="text-zinc-500 font-mono text-[10px] border border-zinc-800 px-1.5 py-0.5 rounded bg-zinc-900">
+                    {{ badge }}
+                </span>
+
+                <!-- Multiple badges (array) -->
+                <div v-else class="flex gap-1">
+                    <span v-for="(item, index) in badge" :key="index"
+                          class="text-[8px] uppercase font-bold px-1.5 py-0.5 rounded border border-zinc-700 bg-zinc-900 text-zinc-400">
+                        {{ item }}
+                    </span>
+                </div>
+            </template>
+
+            <!-- Separator and Subtitle -->
+            <template v-if="subtitle">
+                <div class="h-4 w-px bg-zinc-800"></div>
+                <span class="text-[10px] text-zinc-500">{{ subtitle }}</span>
+            </template>
+        </div>
+
+        <div class="flex items-center gap-3">
+            <!-- Battery Indicator -->
+            <div class="flex items-center gap-1">
+                <div class="w-6 h-3 rounded-xs border border-zinc-600 p-px relative flex">
+                    <div class="h-full bg-zinc-400 rounded-[1px]" :style="{ width: `${batteryLevel}%` }"></div>
+                    <div class="absolute -right-0.75 top-1/2 -translate-y-1/2 w-0.5 h-1.5 bg-zinc-600 rounded-r-[1px]"></div>
+                </div>
+            </div>
+
+            <!-- Time -->
+            <span class="font-mono text-[10px] text-zinc-500">{{ currentTime }}</span>
+        </div>
+    </header>
+</template>