feat: complete UI/UX improvements, vuesax icons, media server, and section management

apps/admin/src/components/PageHeader.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
+import VuesaxIcon from "@/components/VuesaxIcon.vue";
+
 defineProps<{ title: string; subtitle?: string; back?: string }>();
 </script>
 
 <template>
   <div class="page-header">
     <div class="page-header__main">
-      <RouterLink v-if="back" :to="back" class="page-header__back" title="بازگشت">→</RouterLink>
+      <RouterLink v-if="back" :to="back" class="page-header__back" title="بازگشت">
+        <VuesaxIcon name="arrow-right" :size="18" />
+      </RouterLink>
       <div class="min-w-0">
         <h1 class="page-header__title">{{ title }}</h1>
         <p v-if="subtitle" class="page-header__subtitle">{{ subtitle }}</p>
@@ -19,42 +23,61 @@ defineProps<{ title: string; subtitle?: string; back?: string }>();
 
 <style scoped>
 .page-header {
+  flex: 0 0 auto !important;
+  flex-shrink: 0 !important;
+  flex-grow: 0 !important;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: 10px;
 }
 
 .page-header__main {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
   min-width: 0;
 }
 
 .page-header__back {
-  color: #94a3b8;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  background: #f1f5f9;
+  color: #475569;
   text-decoration: none;
-  transition: color 0.15s ease;
+  transition: all 0.15s ease;
+  flex-shrink: 0;
 }
 
 .page-header__back:hover {
-  color: #334155;
+  background: #e2e8f0;
+  color: #0f172a;
 }
 
 .page-header__title {
   margin: 0;
-  font-size: 18px;
+  font-size: 16px;
   font-weight: 700;
   line-height: 1.3;
   color: #0f172a;
 }
 
+@media (min-width: 640px) {
+  .page-header__title {
+    font-size: 18px;
+  }
+}
+
 .page-header__subtitle {
   margin: 2px 0 0;
-  font-size: 13px;
+  font-size: 12px;
   color: #94a3b8;
+  line-height: 1.4;
 }
 
 .page-header__actions {