refactor: update UI styles to use new header background color

- Changed background color for various select elements and containers in Users.vue and Videos.vue to use 'bg-header'.
- Updated background color for status and role filters in the admin section.
- Adjusted background colors in Home.vue, QuickActions.vue, and other components to enhance UI consistency.
- Refactored Billing.vue and DomainsDns.vue to align with new design standards.
- Modified settings components to utilize new header color for better visual hierarchy.
- Improved accessibility and visual feedback in the SettingsRow and SettingsSectionCard components.
- Updated authentication middleware to include timestamp cookie for session management.
- Enhanced gRPC client to build internal metadata for service calls.

src/routes/video/components/VideoTable.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { Video as ModelVideo } from '@/server/gen/proto/app/v1/common';
 import LinkIcon from '@/components/icons/LinkIcon.vue';
 import PencilIcon from '@/components/icons/PencilIcon.vue';
 import TrashIcon from '@/components/icons/TrashIcon.vue';
 import VideoIcon from '@/components/icons/VideoIcon.vue';
 import { formatBytes, formatDate, getStatusSeverity } from '@/lib/utils';
+import type { Video as ModelVideo } from '@/server/gen/proto/app/v1/common';
 import { useTranslation } from 'i18next-vue';
 
 const props = defineProps<{
@@ -75,7 +75,7 @@ const isSelected = (video: ModelVideo) =>
         </div>
         <table v-else class="w-full min-w-[50rem]">
             <thead>
-                <tr class="border-b border-gray-200 bg-gray-50">
+                <tr class="border-b border-gray-200 bg-header">
                     <th class="w-12 px-4 py-3">
                         <input type="checkbox" :checked="isAllSelected" @change="toggleAll"
                             class="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary" />