frontend/src/views/student/NotificationsView.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import { useUserStore } from '@/stores/user'
 import GlassCard from '@/components/ui/GlassCard.vue'
 import AppIcon from '@/components/ui/AppIcon.vue'
+import EmptyState from '@/components/ui/EmptyState.vue'
 
 const userStore = useUserStore()
 
@@ -32,7 +33,15 @@ const typeIcon: Record<string, string> = {
       <button class="btn-secondary" @click="userStore.markAllRead">Отметить все как прочитанные</button>
     </div>
 
-    <div class="notification-groups">
+    <div v-if="userStore.notifications.length === 0" class="empty-wrap">
+      <EmptyState
+        icon="bell"
+        title="Нет уведомлений"
+        subtitle="Здесь будут появляться важные события и обновления"
+      />
+    </div>
+
+    <div v-else class="notification-groups">
       <GlassCard v-for="([day, items]) in grouped" :key="day" class="group">
         <div class="group-title">{{ day }}</div>
         <div class="items">
@@ -50,7 +59,12 @@ const typeIcon: Record<string, string> = {
 </template>
 
 <style scoped>
-.notifications { display: flex; flex-direction: column; gap: 18px; }
+.notifications {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  min-height: calc(100vh - var(--topbar-height) - 28px - 80px);
+}
 .header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
 .notification-groups { display: flex; flex-direction: column; gap: 14px; }
 .group-title { font-weight: 700; margin-bottom: 10px; }
@@ -60,4 +74,15 @@ const typeIcon: Record<string, string> = {
 .icon { color: var(--color-text); flex-shrink: 0; }
 .item-title { font-weight: 600; }
 .item-body { font-size: 13px; color: var(--color-text-secondary); }
+
+.empty-wrap {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@media (max-width: 768px) {
+  .notifications { min-height: calc(100vh - var(--topbar-height) - 16px - 80px); }
+}
 </style>