feat(settings): integrate AppHeader in SettingsView to support sidebar toggling

app/(app)/settings/page.tsx

@@ -7,6 +7,7 @@ import { auth } from "@/auth";
 import { redirect } from "next/navigation";
 import { SettingsView } from "@/components/settings/SettingsView";
 import AppFooter from "@/components/layout/AppFooter";
+import { AppHeader } from "@/components/layout/AppHeader";
 
 /** Renders the settings page layout with session validation. */
 export default async function SettingsPage() {
@@ -17,7 +18,9 @@ export default async function SettingsPage() {
   }
 
   return (
-    <div className="flex flex-col h-full w-full bg-background p-4">
+    <div className="flex p-4 flex-col h-full w-full bg-background min-h-0 overflow-hidden">
+      <AppHeader isSettings />
+
       <SettingsView />
       <AppFooter />
     </div>

components/layout/AppHeader.tsx

@@ -6,7 +6,13 @@
 "use client";
 
 import { useSidebarStore } from "@/lib/stores/useSidebarStore";
-import { PanelLeftOpen, PanelLeftClose, Users, Hash } from "lucide-react";
+import {
+  PanelLeftOpen,
+  PanelLeftClose,
+  Users,
+  Hash,
+  Settings,
+} from "lucide-react";
 import { ServerSettingsMenu } from "./ServerSettingsMenu";
 import { FriendsHeader, TabType } from "@/components/friends/FriendsHeader";
 
@@ -22,6 +28,7 @@ import { FriendsHeader, TabType } from "@/components/friends/FriendsHeader";
  * @property {(tab: TabType) => void} [setActiveTab] - Callback function to update the active friends tab.
  * @property {number} [allCount=0] - The total number of friends.
  * @property {number} [pendingCount=0] - The number of pending friend requests.
+ * @property {boolean} [isSettings=false] - Whether the header is rendered in the settings view.
  */
 interface AppHeaderProps {
   title?: string;
@@ -35,21 +42,11 @@ interface AppHeaderProps {
   setActiveTab?: (tab: TabType) => void;
   allCount?: number;
   pendingCount?: number;
+  isSettings?: boolean;
 }
 
 /**
  * Renders the application header with navigation controls, dynamic titles, tabs, and action buttons.
- *
- * @param {AppHeaderProps} props - The component props.
- * @param {string} [props.title] - The title of the current channel or view.
- * @param {boolean} [props.showMembersButton=false] - Whether to show the members list toggle button.
- * @param {{ id: string; name: string }} [props.server] - Optional server details object.
- * @param {boolean} [props.showFriendsTabs=false] - Whether to display the friends tabs.
- * @param {TabType} [props.activeTab] - The active friends tab.
- * @param {(tab: TabType) => void} [props.setActiveTab] - Function to change the active friends tab.
- * @param {number} [props.allCount=0] - Count of all friends.
- * @param {number} [props.pendingCount=0] - Count of pending friend requests.
- * @returns {JSX.Element} The rendered application header container.
  */
 export function AppHeader({
   title,
@@ -60,11 +57,17 @@ export function AppHeader({
   setActiveTab,
   allCount = 0,
   pendingCount = 0,
+  isSettings = false,
 }: AppHeaderProps) {
   const { isNavOpen, toggleNav, toggleMembers } = useSidebarStore();
 
   const hasContent =
-    !isNavOpen || !!title || showMembersButton || !!server || showFriendsTabs;
+    !isNavOpen ||
+    !!title ||
+    showMembersButton ||
+    !!server ||
+    showFriendsTabs ||
+    isSettings;
 
   return (
     <div
@@ -73,7 +76,7 @@ export function AppHeader({
       }`}
     >
       <div className="flex items-center gap-2 min-w-0 overflow-hidden">
-        {/* Toggle button for navigation */}
+        {/* Toggle button for navigation (auch in Settings sichtbar, wenn eingeklappt) */}
         <button
           type="button"
           onClick={toggleNav}
@@ -89,8 +92,18 @@ export function AppHeader({
           )}
         </button>
 
+        {/* Settings View Header Title */}
+        {isSettings && (
+          <div className="flex items-center gap-1.5 ml-1 min-w-0">
+            <Settings className="w-4 h-4 text-muted shrink-0" />
+            <h1 className="font-bold text-white text-base truncate">
+              Settings
+            </h1>
+          </div>
+        )}
+
         {/* Dynamic Channel Title */}
-        {title && (
+        {!isSettings && title && (
           <div className="flex items-center gap-1.5 ml-1 min-w-0">
             <Hash className="w-4 h-4 text-muted shrink-0" />
             <h1 className="font-bold text-white text-base truncate">{title}</h1>
@@ -98,7 +111,7 @@ export function AppHeader({
         )}
 
         {/* Friends Header Component */}
-        {showFriendsTabs && setActiveTab && activeTab && (
+        {!isSettings && showFriendsTabs && setActiveTab && activeTab && (
           <FriendsHeader
             activeTab={activeTab}
             setActiveTab={setActiveTab}

components/settings/SettingsHeader.tsx

@@ -1,18 +0,0 @@
-/**
- * @file components/settings/SettingsHeader.tsx
- * @description Header section for the settings view with title and subtitle.
- */
-
-"use client";
-
-/** Renders the settings view header containing the main title and description. */
-export function SettingsHeader() {
-  return (
-    <div>
-      <h1 className="text-2xl font-bold text-white">User Settings</h1>
-      <p className="text-sm text-muted">
-        Manage your profile, status, and account settings.
-      </p>
-    </div>
-  );
-}

components/settings/SettingsView.tsx

@@ -6,7 +6,6 @@
 "use client";
 
 import { useUser } from "@/lib/context/UserContext";
-import { SettingsHeader } from "./SettingsHeader";
 import { SettingsProfileCard } from "./SettingsProfileCard";
 
 /** Renders the settings view layout for managing user profile settings. */
@@ -26,8 +25,7 @@ export function SettingsView() {
   if (!currentUser) return null;
 
   return (
-    <div className="flex flex-col h-full w-full bg-background text-white gap-6">
+    <div className="flex-1 overflow-y-auto flex flex-col min-h-0 py-2 mt-4">
-      <SettingsHeader />
       <SettingsProfileCard onUpdate={updateProfile} />
     </div>
   );