refactor: update video components to use AppButton and improve UI consistency

- Refactored CardPopover.vue to enhance menu positioning and accessibility.
- Replaced Button components with AppButton in VideoEditForm.vue and VideoInfoHeader.vue for consistent styling.
- Simplified VideoSkeleton.vue by removing unused Skeleton imports and improving loading states.
- Updated VideoFilters.vue to replace PrimeVue components with native HTML elements for better performance.
- Enhanced VideoGrid.vue and VideoTable.vue with improved selection handling and UI updates.
- Removed unused PrimeVue styles and imports in SSR routes and configuration files.

src/components/DashboardNav.vue

@@ -27,6 +27,7 @@ const links = [
 ];
 
 
+//v-tooltip="i.label"
 </script>
 
 <template>
@@ -35,7 +36,8 @@ const links = [
 
         <template v-for="i in links" :key="i.label">
             <component :name="i.label" :is="i.type === 'a' ? 'router-link' : 'div'"
-                v-bind="i.type === 'a' ? { to: i.href } : {}" v-tooltip="i.label" @click="i.action && i.action($event)"
+                v-bind="i.type === 'a' ? { to: i.href } : {}"
+                @click="i.action && i.action($event)"
                 :class="cn(
                     i.className,
                     ($route.path === i.href || $route.path.startsWith(i.href+'/') || i.isActive?.value) && 'bg-primary/15'
@@ -45,7 +47,5 @@ const links = [
             </component>
         </template>
     </header>
-    <ClientOnly>
-        <NotificationDrawer ref="notificationPopover" @change="(val) => isNotificationOpen = val" />
-    </ClientOnly>
+    <NotificationDrawer ref="notificationPopover" @change="(val) => isNotificationOpen = val" />
 </template>

src/components/NotificationDrawer.vue

@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import NotificationItem from '@/routes/notification/components/NotificationItem.vue';
 import { onClickOutside } from '@vueuse/core';
-import { computed, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
+
+// Ensure client-side only rendering to avoid hydration mismatch
+const isMounted = ref(false);
+onMounted(() => {
+    isMounted.value = true;
+});
 
 // Emit event when visibility changes
 const emit = defineEmits(['change']);
@@ -121,7 +127,7 @@ defineExpose({ toggle });
 </script>
 
 <template>
-    <Teleport to="body">
+    <Teleport v-if="isMounted" to="body">
         <Transition enter-active-class="transition-all duration-300 ease-out"
             enter-from-class="opacity-0 -translate-x-4" enter-to-class="opacity-100 translate-x-0"
             leave-active-class="transition-all duration-200 ease-in" leave-from-class="opacity-100 translate-x-0"

src/components/app/AppDialog.vue

@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import XIcon from '@/components/icons/XIcon.vue';
 import { cn } from '@/lib/utils';
-import { onBeforeUnmount, watch } from 'vue';
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+
+// Ensure client-side only rendering to avoid hydration mismatch
+const isMounted = ref(false);
+onMounted(() => {
+    isMounted.value = true;
+});
 
 const props = withDefaults(defineProps<{
   visible: boolean;
@@ -47,7 +53,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <Teleport to="body">
+  <Teleport v-if="isMounted" to="body">
     <Transition
       enter-active-class="transition-all duration-200 ease-out"
       enter-from-class="opacity-0"
@@ -67,7 +73,12 @@ onBeforeUnmount(() => {
         <!-- Panel -->
         <div class="absolute inset-0 flex items-center justify-center p-4">
           <div :class="cn('w-full bg-surface border border-border rounded-lg shadow-lg overflow-hidden', maxWidthClass)">
-            <div class="flex items-center justify-between gap-3 px-5 py-4 border-b border-border">
+            <!-- Header slot -->
+            <div v-if="$slots.header" class="px-5 py-4 border-b border-border">
+              <slot name="header" :close="close" />
+            </div>
+            <!-- Default title -->
+            <div v-else-if="title" class="flex items-center justify-between gap-3 px-5 py-4 border-b border-border">
               <h3 class="text-sm font-semibold text-foreground">
                 {{ title }}
               </h3>
@@ -82,10 +93,12 @@ onBeforeUnmount(() => {
               </button>
             </div>
 
+            <!-- Content -->
             <div class="p-5">
               <slot />
             </div>
 
+            <!-- Footer slot -->
             <div v-if="$slots.footer" class="px-5 py-4 border-t border-border bg-muted/20">
               <slot name="footer" />
             </div>