Feature: Notifications

apps/web/public/dictionaries/de-DE.json

@@ -248,6 +248,10 @@
     "collection_removed_successfully": "Sammlung erfolgreich entfernt.",
     "collection_added_successfully": "Sammlung erfolgreich hinzugefügt."
   },
+  "notifications_dropdown": {
+    "notifications": "Benachrichtigungen",
+    "no_notifications": "Keine Benachrichtigungen gefunden."
+  },
   "settings_dropdown": {
     "theme": "Thema",
     "light": "🌞 Hell",

apps/web/public/dictionaries/en-US.json

@@ -248,6 +248,10 @@
     "collection_removed_successfully": "Collection removed successfully.",
     "collection_added_successfully": "Collection added successfully."
   },
+  "notifications_dropdown": {
+    "notifications": "Notifications",
+    "no_notifications": "No notifications yet."
+  },
   "settings_dropdown": {
     "theme": "Theme",
     "light": "🌞 Light",

apps/web/public/dictionaries/es-ES.json

@@ -248,6 +248,10 @@
     "collection_removed_successfully": "Colección eliminada con éxito.",
     "collection_added_successfully": "Colección añadida con éxito."
   },
+  "notifications_dropdown": {
+    "notifications": "Notificaciones",
+    "no_notifications": "No tienes notificaciones."
+  },
   "settings_dropdown": {
     "theme": "Tema",
     "light": "🌞 Claro",

apps/web/public/dictionaries/fr-FR.json

@@ -249,6 +249,10 @@
     "collection_removed_successfully": "Collection supprimée avec succès.",
     "collection_added_successfully": "Collection ajoutée avec succès."
   },
+  "notifications_dropdown": {
+    "notifications": "Notifications",
+    "no_notifications": "Aucune notification trouvée."
+  },
   "settings_dropdown": {
     "theme": "Thème",
     "light": "🌞 Clair",

apps/web/public/dictionaries/it-IT.json

@@ -249,6 +249,10 @@
     "collection_removed_successfully": "Collezione rimossa con successo.",
     "collection_added_successfully": "Collezione aggiunta con successo."
   },
+  "notifications_dropdown": {
+    "notifications": "Notifiche",
+    "no_notifications": "Nessuna notifica."
+  },
   "settings_dropdown": {
     "theme": "Tema",
     "light": "🌞 Chiaro",

apps/web/public/dictionaries/ja-JP.json

@@ -248,6 +248,10 @@
     "collection_removed_successfully": "コレクションが正常に削除されました。",
     "collection_added_successfully": "コレクションが正常に追加されました。"
   },
+  "notifications_dropdown": {
+    "notifications": "通知",
+    "no_notifications": "通知はありません。"
+  },
   "settings_dropdown": {
     "theme": "テーマ",
     "light": "🌞 ライト",

apps/web/public/dictionaries/pt-BR.json

@@ -248,6 +248,10 @@
     "collection_removed_successfully": "Coleção removida com sucesso.",
     "collection_added_successfully": "Coleção adicionada com sucesso."
   },
+  "notifications_dropdown": {
+    "notifications": "Notificações",
+    "no_notifications": "Nenhuma notificação."
+  },
   "settings_dropdown": {
     "theme": "Tema",
     "light": "🌞 Claro",

apps/web/src/components/header/header.tsx

@@ -2,6 +2,7 @@
 
 import { CommandSearch } from '../command-search'
 import { SettingsDropdown } from '../settings-dropdown'
+import { NotificationsDropdown } from '../notifications-dropdown'
 import { HeaderNavigationMenu } from './header-navigation-menu'
 import { HeaderNavigationDrawer } from './header-navigation-drawer'
 import { Logo } from '../logo'
@@ -17,6 +18,7 @@ export const Header = () => {
 
         <div className="flex gap-2">
           <CommandSearch />
+          <NotificationsDropdown />
           <SettingsDropdown />
         </div>
       </header>

apps/web/src/components/notifications-dropdown/index.ts

@@ -0,0 +1 @@
+export * from './notifications-dropdown'

apps/web/src/components/notifications-dropdown/notifications-dropdown.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { BellIcon } from 'lucide-react'
+
+import { Button } from '../ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuTrigger,
+  DropdownMenuLabel,
+} from '../ui/dropdown-menu'
+import { useLanguage } from '@/context/language'
+
+export const NotificationsDropdown = () => {
+  const { dictionary } = useLanguage()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <BellIcon width={16} height={16} />
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="start">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>
+            {dictionary.notifications_dropdown.notifications}
+          </DropdownMenuLabel>
+          <div className="mt-2 grid justify-items-center gap-3 px-2 py-1.5">
+            <BellIcon
+              className="text-muted-foreground"
+              width={40}
+              height={40}
+            />
+            <p className="line-clamp-3 text-center text-xs text-muted-foreground">
+              {dictionary.notifications_dropdown.no_notifications}
+            </p>
+          </div>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

apps/web/src/utils/dictionaries/get-dictionaries.types.ts

@@ -228,6 +228,10 @@ export type Dictionary = {
     collection_removed_successfully: string
     collection_added_successfully: string
   }
+  notifications_dropdown: {
+    notifications: string
+    no_notifications: string
+  }
   settings_dropdown: {
     theme: string
     light: string