update ui

src/routes/notification/components/NotificationActions.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+interface Props {
+    loading?: boolean;
+    totalCount: number;
+    unreadCount: number;
+}
+
+defineProps<Props>();
+const emit = defineEmits<{
+    markAllRead: [];
+    clearAll: [];
+}>();
+</script>
+
+<template>
+    <div class="notification-header flex items-center justify-between mb-6">
+        <div class="flex items-center gap-3">
+            <div class="stats flex items-center gap-4">
+                <div class="flex items-center gap-2 text-sm">
+                    <span class="i-lucide-bell w-4 h-4 text-gray-400"></span>
+                    <span class="text-gray-600">{{ totalCount }} notifications</span>
+                </div>
+                <div v-if="unreadCount > 0" class="flex items-center gap-2 text-sm">
+                    <span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
+                    <span class="text-primary font-medium">{{ unreadCount }} unread</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="actions flex items-center gap-2">
+            <button 
+                v-if="unreadCount > 0"
+                @click="emit('markAllRead')"
+                :disabled="loading"
+                class="px-3 py-2 text-sm font-medium text-gray-600 hover:text-primary 
+                       hover:bg-gray-100 rounded-lg transition-colors flex items-center gap-2"
+            >
+                <span class="i-lucide-check-check w-4 h-4"></span>
+                Mark all read
+            </button>
+            <button 
+                v-if="totalCount > 0"
+                @click="emit('clearAll')"
+                :disabled="loading"
+                class="px-3 py-2 text-sm font-medium text-gray-600 hover:text-red-600 
+                       hover:bg-red-50 rounded-lg transition-colors flex items-center gap-2"
+            >
+                <span class="i-lucide-trash w-4 h-4"></span>
+                Clear all
+            </button>
+        </div>
+    </div>
+</template>