feat: Notifications page, Sidebar layout fixes, and Achievements enhancements

- implemented /notifications page with overdue/upcoming alerts
- Fixed sidebar scrolling in collapsed mode
- Moved notification button to sidebar footer
- Enhanced Achievements page with streak stats and tooltips
- Improved XP history to show task titles
- Added missing translations (en/de)
- Removed top bar header
- Fixed Docker environment routing

client/src/components/AppSidebar.tsx

@@ -1,6 +1,6 @@
 
 import { useTranslation } from 'react-i18next';
-import { Home, Calendar, List, LayoutGrid, Settings, CheckSquare, Target, Trophy, LogOut, Award, Bot, CalendarOff } from 'lucide-react';
+import { Home, Calendar, List, LayoutGrid, Settings, CheckSquare, Target, Trophy, LogOut, Award, Bot, CalendarOff, Bell } from 'lucide-react';
 import { useQueryClient, useMutation, useQuery } from '@tanstack/react-query';
 import { useToast } from "@/hooks/use-toast";
 import { Button } from "@/components/ui/button";
@@ -15,6 +15,7 @@ import {
     SidebarRail,
     useSidebar,
     SidebarTrigger,
+    SidebarSeparator,
 } from "@/components/ui/sidebar"
 import { Task, User } from '@shared/schema';
 import ThemeToggle from './ThemeToggle';
@@ -44,8 +45,9 @@ export function AppSidebar({ user, ...props }: AppSidebarProps) {
             await fetch("/api/logout", { method: "POST" });
         },
         onSuccess: () => {
-            queryClient.setQueryData(["/api/user"], null);
-            toast({ title: "Logged out successfully" });
+            queryClient.clear();
+            // toast({ title: "Logged out successfully" });
+            window.location.href = "/auth?mode=login";
         },
     });
 
@@ -68,8 +70,8 @@ export function AppSidebar({ user, ...props }: AppSidebarProps) {
                 <SidebarMenu>
                     <SidebarMenuItem>
                         <SidebarMenuButton size="lg" className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground h-14">
-                            <div className="flex aspect-square size-9 items-center justify-center rounded-xl bg-gradient-to-br from-violet-600 to-indigo-600 text-white shadow-lg">
-                                <CheckSquare className="size-5" />
+                            <div className="flex aspect-square size-9 items-center justify-center rounded-xl overflow-hidden shadow-lg bg-transparent">
+                                <img src="/favicon.png" alt="Logo" className="w-full h-full object-cover" />
                             </div>
                             {state !== 'collapsed' && (
                                 <div className="grid flex-1 text-left text-sm leading-tight ml-2">
@@ -103,18 +105,31 @@ export function AppSidebar({ user, ...props }: AppSidebarProps) {
                     ))}
                 </SidebarMenu>
             </SidebarContent>
+            <SidebarSeparator />
             <SidebarFooter>
                 {state !== 'collapsed' && user && (
                     <GamificationBar xp={user.xp} level={user.level} streak={user.currentStreak} />
                 )}
                 <div className={`p-4 ${state === 'collapsed'
                     ? 'flex flex-col items-center justify-center gap-4'
-                    : 'grid grid-cols-3 items-center'
+                    : 'grid grid-cols-4 items-center gap-2'
                     }`}>
                     <div className={state === 'collapsed' ? '' : 'justify-self-start'}>
                         <ThemeToggle />
                     </div>
 
+                    <div className={state === 'collapsed' ? '' : 'justify-self-center'}>
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => setLocation('/notifications')}
+                            className="bg-transparent hover:bg-sidebar-accent"
+                            title={t('navigation.notifications', 'Notifications')}
+                        >
+                            <Bell className="size-4" />
+                        </Button>
+                    </div>
+
                     <div className={state === 'collapsed' ? '' : 'justify-self-center'}>
                         <Button
                             variant="ghost"
@@ -122,7 +137,7 @@ export function AppSidebar({ user, ...props }: AppSidebarProps) {
                             onClick={() => logoutMutation.mutate()}
                             disabled={logoutMutation.isPending}
                             className="text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-950/20"
-                            title="Logout"
+                            title={t('auth.logout', 'Logout')}
                         >
                             <LogOut className="size-4" />
                         </Button>