@umituz/web-dashboard 6.5.0 → 6.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-dashboard",
-  "version": "6.5.0",
+  "version": "6.6.0",
   "description": "Installable app skeleton for the fleet — layouts, analytics (dependency-free SVG charts), calendar, onboarding flow, i18n via @umituz/web-localization, permissions/module registry; udb-* stylesheet on design-system tokens",
   "type": "module",
   "main": "./src/index.ts",
@@ -60,8 +60,13 @@
     "react-router-dom": "^6.0.0 || ^7.0.0",
     "framer-motion": "^12.0.0"
   },
+  "peerDependenciesMeta": {
+    "framer-motion": {
+      "optional": true
+    }
+  },
   "dependencies": {
-    "@umituz/web-design-system": "^4.9.0",
+    "@umituz/web-design-system": "^4.18.0",
     "lucide-react": "^0.577.0",
     "@umituz/web-localization": "^1.2.1"
   },
@@ -72,6 +77,7 @@
     "@typescript-eslint/eslint-plugin": "^8.57.2",
     "@typescript-eslint/parser": "^8.57.2",
     "eslint": "^10.0.2",
+    "framer-motion": "^12.23.12",
     "react-router-dom": "^7.13.1",
     "typescript": "^5.9.3",
     "vitest": "^5.0.1",

package/src/domains/layouts/components/DashboardHeader.tsx

@@ -1,12 +1,19 @@
-import { useState } from "react";
 import {
   Bell, X, Sun, Moon, Menu, User, Settings, LogOut,
-  ChevronDown
+  ChevronDown, Search
 } from "lucide-react";
-import { Button } from "@umituz/web-design-system/atoms";
+import { Button, Kbd } from "@umituz/web-design-system/atoms";
+import { Avatar, AvatarImage } from "@umituz/web-design-system/molecules";
+import {
+  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
+  DropdownMenuItem, DropdownMenuSeparator
+} from "@umituz/web-design-system/organisms";
 import { useNavigate } from "react-router-dom";
 import { useT } from "@umituz/web-localization/react";
-import type { DashboardHeaderProps, HeaderProfileItem } from "../types/layout";
+import type { ReactNode } from "react";
+import type {
+  DashboardHeaderProps, HeaderProfileItem, HeaderSearchAction
+} from "../types/layout";
 import type { DashboardNotification } from "../types/notification";
 import type { DashboardUser } from "../types/user";
 import { formatNotificationTime } from "../utils/dashboard";
@@ -19,7 +26,17 @@ interface DashboardHeaderPropsExtended extends DashboardHeaderProps {
   onDismissNotification?: (id: string) => void;
   settingsRoute?: string;
   profileRoute?: string;
+  /** Legacy alias of profileItems (kept for existing consumers). */
   extraProfileItems?: HeaderProfileItem[];
+  /** Fully custom profile menu items. */
+  profileItems?: HeaderProfileItem[];
+  /** Hide the built-in profile/settings rows (defaults to true). */
+  showDefaultProfileItems?: boolean;
+  searchAction?: HeaderSearchAction;
+  headerExtra?: ReactNode;
+  notificationsViewAll?: { label: string; to: string };
+  /** Route the built-in logout navigates to after onLogout resolves. */
+  loginRoute?: string;
 }
 
 export const DashboardHeader = ({
@@ -37,22 +54,23 @@ export const DashboardHeader = ({
   settingsRoute = "/dashboard/settings",
   profileRoute = "/dashboard/profile",
   extraProfileItems = [],
+  profileItems,
+  showDefaultProfileItems = true,
+  searchAction,
+  headerExtra,
+  notificationsViewAll,
+  loginRoute = "/login",
 }: DashboardHeaderPropsExtended) => {
   const navigate = useNavigate();
   const t = useT();
-  const [notifOpen, setNotifOpen] = useState(false);
-  const [profileOpen, setProfileOpen] = useState(false);
 
   const unreadCount = notifications.filter((n) => !n.read).length;
-
-  const markAllRead = () => {
-    onMarkAllRead?.();
-  };
+  const customItems = profileItems ?? extraProfileItems;
 
   const handleLogout = async () => {
     try {
       await onLogout?.();
-      navigate("/login");
+      navigate(loginRoute);
     } catch {
     }
   };
@@ -74,6 +92,16 @@ export const DashboardHeader = ({
       </div>
 
       <div className="udb-header__actions">
+        {headerExtra && <div className="udb-header__extra">{headerExtra}</div>}
+
+        {searchAction && (
+          <button type="button" className="udb-header__search" onClick={searchAction.onActivate}>
+            <Search className="udb-header__search-icon" />
+            <span className="udb-header__search-text">{searchAction.placeholder}</span>
+            {searchAction.shortcut && <Kbd className="udb-header__search-kbd">{searchAction.shortcut}</Kbd>}
+          </button>
+        )}
+
         {onToggleTheme && (
           <Button
             variant="ghost"
@@ -87,138 +115,121 @@ export const DashboardHeader = ({
           </Button>
         )}
 
-        <div className="udb-header__anchor">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="udb-header__icon-btn"
-            onClick={() => {
-              setNotifOpen(!notifOpen);
-              setProfileOpen(false);
-            }}
-          >
-            <Bell className="udb-header__icon" />
-            {unreadCount > 0 && <span className="udb-header__unread"><span className="udb-header__unread-core" /></span>}
-          </Button>
-
-          {notifOpen && (
-            <>
-              <div className="udb-overlay" onClick={() => setNotifOpen(false)} />
-              <div className="udb-menu udb-notif">
-                <div className="udb-menu__header">
-                  <h3 className="udb-menu__heading">{t('dashboard.notifications.title')}</h3>
-                  {unreadCount > 0 && (
-                    <button type="button" onClick={markAllRead} className="udb-menu__action">{t('dashboard.notifications.markAllRead')}</button>
-                  )}
-                </div>
+        {(notifications.length > 0 || onMarkAllRead) && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon" className="udb-header__icon-btn" aria-label={t('dashboard.notifications.title')}>
+                <Bell className="udb-header__icon" />
+                {unreadCount > 0 && <span className="udb-header__unread"><span className="udb-header__unread-core" /></span>}
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="udb-menu udb-menu--pop udb-notif">
+              <div className="udb-menu__header">
+                <h3 className="udb-menu__heading">{t('dashboard.notifications.title')}</h3>
+                {unreadCount > 0 && (
+                  <button type="button" onClick={onMarkAllRead} className="udb-menu__action">{t('dashboard.notifications.markAllRead')}</button>
+                )}
+              </div>
 
-                <div className="udb-notif__list">
-                  {notifications.map((n) => (
-                    <div key={n.id} className={`udb-notif__item${!n.read ? " udb-notif__item--unread" : ""}`}>
-                      <div className="udb-notif__body">
-                        <p className="udb-notif__text">{n.text}</p>
-                        <p className="udb-notif__meta">
-                          <span className="udb-notif__dot" />
-                          {formatNotificationTime(n.createdAt, t)}
-                        </p>
-                      </div>
-                      <button
-                        type="button"
-                        onClick={() => onDismissNotification?.(n.id)}
-                        className="udb-notif__dismiss"
-                      >
-                        <X className="udb-notif__dismiss-icon" />
-                      </button>
+              <div className="udb-notif__list">
+                {notifications.map((n) => (
+                  <div key={n.id} className={`udb-notif__item${!n.read ? " udb-notif__item--unread" : ""}`}>
+                    <div className="udb-notif__body">
+                      <p className="udb-notif__text">{n.text}</p>
+                      <p className="udb-notif__meta">
+                        <span className="udb-notif__dot" />
+                        {formatNotificationTime(n.createdAt, t)}
+                      </p>
                     </div>
-                  ))}
-                  {notifications.length === 0 && (
-                    <div className="udb-notif__empty">
-                      <div className="udb-notif__empty-icon">
-                        <Bell className="udb-notif__empty-bell" />
-                      </div>
-                      <p className="udb-notif__empty-text">{t('dashboard.notifications.none')}</p>
+                    <button
+                      type="button"
+                      onClick={() => onDismissNotification?.(n.id)}
+                      className="udb-notif__dismiss"
+                      aria-label={t('dashboard.notifications.dismiss')}
+                    >
+                      <X className="udb-notif__dismiss-icon" />
+                    </button>
+                  </div>
+                ))}
+                {notifications.length === 0 && (
+                  <div className="udb-notif__empty">
+                    <div className="udb-notif__empty-icon">
+                      <Bell className="udb-notif__empty-bell" />
                     </div>
-                  )}
-                </div>
+                    <p className="udb-notif__empty-text">{t('dashboard.notifications.none')}</p>
+                  </div>
+                )}
               </div>
-            </>
-          )}
-        </div>
 
-        <div className="udb-header__divider" />
-
-        <div className="udb-header__anchor">
-          <button
-            type="button"
-            onClick={() => {
-              setProfileOpen(!profileOpen);
-              setNotifOpen(false);
-            }}
-            className="udb-profile-btn"
-          >
-            <span className="udb-avatar">
-              {user?.avatar && <img src={user.avatar} alt="" className="udb-avatar__img" />}
-            </span>
-            <ChevronDown className={`udb-profile-btn__chevron${profileOpen ? " udb-profile-btn__chevron--open" : ""}`} />
-          </button>
+              {notificationsViewAll && (
+                <DropdownMenuItem className="udb-menu__item udb-notif__view-all" onSelect={() => navigate(notificationsViewAll.to)}>
+                  {notificationsViewAll.label}
+                </DropdownMenuItem>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
 
-          {profileOpen && (
-            <>
-              <div className="udb-overlay" onClick={() => setProfileOpen(false)} />
-              <div className="udb-menu udb-profile-menu">
+        {(user || customItems.length > 0 || showDefaultProfileItems) && (
+          <>
+            <div className="udb-header__divider" />
+
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <button type="button" className="udb-profile-btn" aria-label={t("common.profile")}>
+                  <Avatar name={user?.name} size="sm" className="udb-avatar">
+                    {user?.avatar && <AvatarImage src={user.avatar} alt="" />}
+                  </Avatar>
+                  <ChevronDown className="udb-profile-btn__chevron" />
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="udb-menu udb-menu--pop udb-profile-menu">
                 <div className="udb-profile-menu__id">
                   <p className="udb-profile-menu__name">{user?.name || t("common.roles.user")}</p>
                   <p className="udb-profile-menu__email">{user?.email}</p>
                 </div>
 
                 <div className="udb-profile-menu__items">
-                  <button
-                    type="button"
-                    onClick={() => { navigate(profileRoute); setProfileOpen(false); }}
-                    className="udb-menu__item"
-                  >
-                    <User className="udb-menu__item-icon" />
-                    {t('common.profile')}
-                  </button>
-                  {extraProfileItems.map((item) => (
-                    <button
+                  {showDefaultProfileItems && (
+                    <DropdownMenuItem className="udb-menu__item" onSelect={() => navigate(profileRoute)}>
+                      <User className="udb-menu__item-icon" />
+                      {t('common.profile')}
+                    </DropdownMenuItem>
+                  )}
+                  {customItems.map((item) => (
+                    <DropdownMenuItem
                       key={item.key}
-                      type="button"
-                      onClick={() => {
+                      className={item.danger ? "udb-menu__item udb-menu__item--danger" : "udb-menu__item"}
+                      onSelect={() => {
                         if (item.to) navigate(item.to);
                         item.onSelect?.();
-                        setProfileOpen(false);
                       }}
-                      className="udb-menu__item"
                     >
                       {item.icon}
                       {item.label}
-                    </button>
+                    </DropdownMenuItem>
                   ))}
-                  <button
-                    type="button"
-                    onClick={() => { navigate(settingsRoute); setProfileOpen(false); }}
-                    className="udb-menu__item"
-                  >
-                    <Settings className="udb-menu__item-icon" />
-                    {t('common.settings')}
-                  </button>
+                  {showDefaultProfileItems && (
+                    <DropdownMenuItem className="udb-menu__item" onSelect={() => navigate(settingsRoute)}>
+                      <Settings className="udb-menu__item-icon" />
+                      {t('common.settings')}
+                    </DropdownMenuItem>
+                  )}
                 </div>
 
-                <div className="udb-profile-menu__separator" />
-
-                <button
-                  type="button"
-                  onClick={handleLogout}
-                  className="udb-menu__item udb-menu__item--danger"
-                >
-                  <LogOut className="udb-menu__item-icon" />
-                  {t('common.logout')}
-                </button>
-              </div>
-            </>
-          )}
-        </div>
+                {onLogout && (
+                  <>
+                    <DropdownMenuSeparator className="udb-profile-menu__separator" />
+                    <DropdownMenuItem className="udb-menu__item udb-menu__item--danger" onSelect={() => void handleLogout()}>
+                      <LogOut className="udb-menu__item-icon" />
+                      {t('common.logout')}
+                    </DropdownMenuItem>
+                  </>
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </>
+        )}
       </div>
     </header>
   );

package/src/domains/layouts/components/DashboardLayout.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, type ReactNode } from "react";
 import { useLocation, Outlet, Navigate } from "react-router-dom";
 import { useT } from "@umituz/web-localization/react";
 import { Skeleton } from "@umituz/web-design-system/atoms";
@@ -21,8 +21,21 @@ interface DashboardLayoutProps {
   theme?: "light" | "dark";
   onToggleTheme?: () => void;
   routeTransitionMs?: number;
+  /** Persists the sidebar collapse state under this localStorage key ('1'/'0'). */
+  collapsedStorageKey?: string;
+  /** Optional page footer rendered under the outlet column. */
+  footer?: ReactNode;
 }
 
+const readCollapsed = (key?: string): boolean => {
+  if (!key || typeof window === "undefined") return false;
+  try {
+    return window.localStorage.getItem(key) === "1";
+  } catch {
+    return false;
+  }
+};
+
 export const DashboardLayout = ({
   config,
   user,
@@ -36,13 +49,24 @@ export const DashboardLayout = ({
   theme,
   onToggleTheme,
   routeTransitionMs = 0,
+  collapsedStorageKey,
+  footer,
 }: DashboardLayoutProps) => {
   const location = useLocation();
   const t = useT();
-  const [collapsed, setCollapsed] = useState(false);
+  const [collapsed, setCollapsed] = useState(() => readCollapsed(collapsedStorageKey));
   const [mobileOpen, setMobileOpen] = useState(false);
   const [loading, setLoading] = useState(routeTransitionMs > 0);
 
+  useEffect(() => {
+    if (!collapsedStorageKey || typeof window === "undefined") return;
+    try {
+      window.localStorage.setItem(collapsedStorageKey, collapsed ? "1" : "0");
+    } catch {
+      /* storage unavailable — state stays in-memory only */
+    }
+  }, [collapsed, collapsedStorageKey]);
+
   useEffect(() => {
     if (routeTransitionMs <= 0) {
       setLoading(false);
@@ -65,7 +89,7 @@ export const DashboardLayout = ({
     .find((i) => i.path === location.pathname);
 
   const getTitle = () => {
-    if (activeItem) return t(activeItem.label);
+    if (activeItem) return activeItem.raw ? activeItem.label : t(activeItem.label);
     const extraTitle = config.extraTitleMap?.[location.pathname];
     if (extraTitle) return t(extraTitle);
     return config.defaultTitle ?? "Dashboard";
@@ -73,6 +97,16 @@ export const DashboardLayout = ({
 
   const currentTitle = getTitle();
 
+  const sidebarProps = {
+    sidebarGroups: config.sidebarGroups,
+    brandName: config.brandName,
+    brandTagline: config.brandTagline,
+    brand: config.brand,
+    sidebarAction: config.sidebarAction,
+    sidebarFooter: config.sidebarFooter,
+    user,
+  };
+
   return (
     <div className="udb-root udb-layout">
       <aside
@@ -81,10 +115,7 @@ export const DashboardLayout = ({
         <DashboardSidebar
           collapsed={collapsed}
           setCollapsed={setCollapsed}
-          sidebarGroups={config.sidebarGroups}
-          brandName={config.brandName}
-          brandTagline={config.brandTagline}
-          user={user}
+          {...sidebarProps}
         />
       </aside>
 
@@ -95,10 +126,7 @@ export const DashboardLayout = ({
             <DashboardSidebar
               collapsed={false}
               setCollapsed={() => setMobileOpen(false)}
-              sidebarGroups={config.sidebarGroups}
-              brandName={config.brandName}
-              brandTagline={config.brandTagline}
-              user={user}
+              {...sidebarProps}
             />
           </aside>
         </div>
@@ -117,6 +145,12 @@ export const DashboardLayout = ({
           onLogout={onLogout}
           onMarkAllRead={onMarkAllRead}
           onDismissNotification={onDismissNotification}
+          loginRoute={loginRoute}
+          searchAction={config.searchAction}
+          headerExtra={config.headerExtra}
+          profileItems={config.profileItems}
+          showDefaultProfileItems={config.showDefaultProfileItems}
+          notificationsViewAll={config.notificationsViewAll}
         />
 
         <main className="udb-layout__content">
@@ -134,6 +168,8 @@ export const DashboardLayout = ({
             <Outlet />
           )}
         </main>
+
+        {footer && <footer className="udb-layout__footer">{footer}</footer>}
       </div>
     </div>
   );

package/src/domains/layouts/components/DashboardSidebar.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, type ReactNode } from "react";
 import { Link, useLocation } from "react-router-dom";
 import { useT } from "@umituz/web-localization/react";
 
@@ -6,7 +6,7 @@ import { Button } from "@umituz/web-design-system/atoms";
 import { cn } from "@umituz/web-design-system/utils/cn";
 import { BrandLogo } from "./BrandLogo";
 import { PenTool, Menu, ChevronLeft, ChevronDown, ChevronRight } from "lucide-react";
-import type { DashboardSidebarProps } from "../types/layout";
+import type { DashboardSidebarProps, SidebarAction } from "../types/layout";
 import type { DashboardUser } from "../types/user";
 import type { SidebarGroup } from "../types/sidebar";
 import { filterSidebarItems } from "../utils/dashboard";
@@ -15,6 +15,12 @@ interface DashboardSidebarPropsExtended extends DashboardSidebarProps {
   sidebarGroups: SidebarGroup[];
   brandName?: string;
   brandTagline?: string;
+  /** Custom brand mark — replaces the built-in logo (text block still follows brandName). */
+  brand?: ReactNode;
+  /** Generic primary action — replaces the legacy create-post button. */
+  sidebarAction?: SidebarAction;
+  /** Extra node above the collapse button in the footer (hidden while collapsed). */
+  sidebarFooter?: ReactNode;
   createPostRoute?: string;
   showCreatePost?: boolean;
   user?: DashboardUser;
@@ -26,6 +32,9 @@ export const DashboardSidebar = ({
   sidebarGroups,
   brandName = "App",
   brandTagline = "grow smarter",
+  brand,
+  sidebarAction,
+  sidebarFooter,
   createPostRoute = "/dashboard/create",
   showCreatePost = true,
   user,
@@ -41,31 +50,51 @@ export const DashboardSidebar = ({
     }));
   };
 
+  const renderAction = (label: string, icon: ReactNode, linkProps?: { to: string }) => {
+    const button = (
+      <Button
+        variant="default"
+        className={cn("udb-sidebar__create-btn", collapsed && "udb-sidebar__create-btn--collapsed")}
+        title={collapsed ? label : undefined}
+        {...(linkProps ? {} : { onClick: () => sidebarAction?.onClick?.() })}
+      >
+        {icon}
+        {!collapsed && <span className="udb-sidebar__create-label">{label}</span>}
+      </Button>
+    );
+    return linkProps ? <Link to={linkProps.to}>{button}</Link> : button;
+  };
+
   return (
     <div className={cn("udb-sidebar", collapsed && "udb-sidebar--collapsed")}>
       <div className="udb-sidebar__brand">
-        <BrandLogo size={32} />
-        {!collapsed && (
+        {brand ?? <BrandLogo size={32} />}
+        {!collapsed && brandName !== "" && (
           <div className="udb-sidebar__brand-text">
-            <span className="udb-sidebar__brand-name">{brandName}</span>
+            <span className="udb-sidebar__brand-name">{brandName || "App"}</span>
             <span className="udb-sidebar__brand-tagline">{brandTagline}</span>
           </div>
         )}
       </div>
 
-      {showCreatePost && createPostRoute && (
+      {sidebarAction ? (
         <div className="udb-sidebar__create">
-          <Link to={createPostRoute}>
-            <Button
-              variant="default"
-              className={cn("udb-sidebar__create-btn", collapsed && "udb-sidebar__create-btn--collapsed")}
-              title={collapsed ? t('sidebar.createPost') : undefined}
-            >
-              <PenTool className="udb-sidebar__create-icon" />
-              {!collapsed && <span className="udb-sidebar__create-label">{t('sidebar.createPost')}</span>}
-            </Button>
-          </Link>
+          {renderAction(
+            sidebarAction.label,
+            sidebarAction.icon ? <sidebarAction.icon className="udb-sidebar__create-icon" /> : null,
+            sidebarAction.to ? { to: sidebarAction.to } : undefined
+          )}
         </div>
+      ) : (
+        showCreatePost && createPostRoute && (
+          <div className="udb-sidebar__create">
+            {renderAction(
+              t('sidebar.createPost'),
+              <PenTool className="udb-sidebar__create-icon" />,
+              { to: createPostRoute }
+            )}
+          </div>
+        )
       )}
 
       <nav className="udb-sidebar__nav">
@@ -99,16 +128,26 @@ export const DashboardSidebar = ({
                 )}
 
                 {(!isGroupCollapsed || collapsed) && filteredItems.map((item) => {
-                  const active = location.pathname === item.path;
+                  const active =
+                    location.pathname === item.path ||
+                    (item.end === false && location.pathname.startsWith(item.path + "/"));
+                  const labelText = item.raw ? item.label : t(item.label);
+                  const collapsedTitle =
+                    item.badge !== undefined && item.badge !== ""
+                      ? `${labelText} (${item.badge})`
+                      : labelText;
                   return (
                     <Link
                       key={item.path}
                       to={item.path}
                       className={cn("udb-sidebar__item", active && "udb-sidebar__item--active")}
-                      title={collapsed ? t(item.label) : undefined}
+                      title={collapsed ? collapsedTitle : undefined}
                     >
                       <item.icon className="udb-sidebar__item-icon" />
-                      {!collapsed && <span>{t(item.label)}</span>}
+                      {!collapsed && <span>{labelText}</span>}
+                      {!collapsed && item.badge !== undefined && item.badge !== "" && (
+                        <span className="udb-sidebar__item-badge">{item.badge}</span>
+                      )}
                     </Link>
                   );
                 })}
@@ -119,6 +158,7 @@ export const DashboardSidebar = ({
       </nav>
 
       <div className="udb-sidebar__footer">
+        {sidebarFooter && <div className="udb-sidebar__footer-slot">{sidebarFooter}</div>}
         {!collapsed && (
           <p className="udb-sidebar__footer-label">
             {t('sidebar.system')}

package/src/domains/layouts/components/FilterBar.test.tsx

@@ -0,0 +1,30 @@
+import { describe, expect, it } from "vitest";
+import { renderToString } from "react-dom/server";
+import { FilterBar } from "./FilterBar";
+
+describe("FilterBar", () => {
+  it("renders search, children and actions in their slots", () => {
+    const html = renderToString(
+      <FilterBar
+        search={{ value: "", onChange: () => {}, placeholder: "Find…" }}
+        actions={<button type="button">Sort</button>}
+      >
+        <span>a chip</span>
+      </FilterBar>
+    );
+    expect(html).toContain("udb-filter-bar");
+    expect(html).toContain("udb-filter-bar__search");
+    expect(html).toContain("udb-filter-bar__fields");
+    expect(html).toContain("a chip");
+    expect(html).toContain("udb-filter-bar__actions");
+    expect(html).toContain("Sort");
+  });
+
+  it("omits absent slots entirely", () => {
+    const html = renderToString(<FilterBar />);
+    expect(html).toContain("udb-filter-bar");
+    expect(html).not.toContain("udb-filter-bar__search");
+    expect(html).not.toContain("udb-filter-bar__fields");
+    expect(html).not.toContain("udb-filter-bar__actions");
+  });
+});

package/src/domains/layouts/components/FilterBar.tsx

@@ -0,0 +1,42 @@
+/**
+ * FilterBar Component (Layout)
+ * @description Horizontal filter strip: search box + chip row + trailing actions
+ */
+
+import type { ReactNode } from "react";
+import { SearchBox } from "@umituz/web-design-system/molecules";
+import { cn } from "@umituz/web-design-system/utils/cn";
+import type { BaseProps } from "@umituz/web-design-system/types";
+
+export interface FilterBarSearch {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+}
+
+export interface FilterBarProps extends BaseProps {
+  search?: FilterBarSearch;
+  /** Chip row / selects — anything that filters the page content. */
+  children?: ReactNode;
+  /** Trailing controls (sort, primary buttons…). */
+  actions?: ReactNode;
+}
+
+export const FilterBar = ({ search, children, actions, className, ...props }: FilterBarProps) => {
+  return (
+    <div className={cn("udb-filter-bar", className)} {...props}>
+      {search && (
+        <SearchBox
+          value={search.value}
+          onChange={search.onChange}
+          placeholder={search.placeholder}
+          className="udb-filter-bar__search"
+        />
+      )}
+      {children && <div className="udb-filter-bar__fields">{children}</div>}
+      {actions && <div className="udb-filter-bar__actions">{actions}</div>}
+    </div>
+  );
+};
+
+FilterBar.displayName = "FilterBar";

package/src/domains/layouts/components/index.ts

@@ -2,6 +2,8 @@ export { DashboardLayout } from './DashboardLayout';
 export { DashboardHeader } from './DashboardHeader';
 export { DashboardSidebar } from './DashboardSidebar';
 export { BrandLogo } from './BrandLogo';
+export { FilterBar } from './FilterBar';
+export type { FilterBarProps, FilterBarSearch } from './FilterBar';
 export { PageHeader } from './PageHeader';
 export type { PageHeaderProps, PageHeaderCrumb } from './PageHeader';
 export { SectionHeader } from './SectionHeader';

package/src/domains/layouts/types/layout.ts

@@ -13,6 +13,23 @@ export interface HeaderProfileItem {
     icon?: React.ReactNode;
     to?: string;
     onSelect?: () => void;
+    /** Renders the item in destructive color (sign-out, delete…). */
+    danger?: boolean;
+}
+
+/** Optional primary action under the sidebar brand (replaces the legacy create-post button). */
+export interface SidebarAction {
+    label: string;
+    icon?: import("lucide-react").LucideIcon;
+    to?: string;
+    onClick?: () => void;
+}
+
+/** Header search affordance — a button styled as a search field, e.g. routing to a search page. */
+export interface HeaderSearchAction {
+    placeholder?: string;
+    shortcut?: string;
+    onActivate: () => void;
 }
 
 export interface DashboardSidebarProps {
@@ -26,4 +43,18 @@ export interface DashboardLayoutConfig {
     defaultTitle?: string;
     brandName?: string;
     brandTagline?: string;
+    /** Custom brand mark for the sidebar — replaces the built-in logo; pair with brandName for the text block. */
+    brand?: React.ReactNode;
+    sidebarAction?: SidebarAction;
+    /** Extra node rendered in the sidebar footer (above the collapse button; hidden when collapsed). */
+    sidebarFooter?: React.ReactNode;
+    /** Extra node rendered in the header actions area (app chips, clocks…). */
+    headerExtra?: React.ReactNode;
+    searchAction?: HeaderSearchAction;
+    /** Fully custom profile menu items — shown in addition to (or, with showDefaultProfileItems=false, instead of) the defaults. */
+    profileItems?: HeaderProfileItem[];
+    /** Hide the built-in profile/settings items (defaults to true). */
+    showDefaultProfileItems?: boolean;
+    /** "View all" row appended to the notifications dropdown. */
+    notificationsViewAll?: { label: string; to: string };
 }

package/src/domains/layouts/types/sidebar.ts

@@ -6,6 +6,15 @@ export interface SidebarItem {
     path: string;
     requiredApp?: 'mobile' | 'web';
     enabled?: boolean;
+    /** Count pill rendered next to the label (hidden while the sidebar is collapsed). */
+    badge?: string | number;
+    /**
+     * Active-route matching: true (default) matches the exact path only;
+     * false also marks prefix descendants active (e.g. /app on /app/vocab).
+     */
+    end?: boolean;
+    /** Render the label verbatim — skip the localization humanizer (final display strings). */
+    raw?: boolean;
 }
 
 export interface SidebarGroup {

package/src/styles/chrome.css

@@ -458,6 +458,99 @@
   z-index: 50;
   animation: udb-pop 0.18s ease;
 }
+/* Radix-portal variant: positioning/animation come from the dropdown primitive. */
+.udb-menu--pop {
+  top: auto;
+  right: auto;
+  animation: none;
+}
+.udb-sidebar__item-badge {
+  margin-left: auto;
+  padding: 1px var(--udb-space-2);
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: var(--font-weight-bold);
+  line-height: 1.4;
+  color: var(--udb-sidebar-accent-text);
+  background: var(--udb-sidebar-accent);
+}
+.udb-sidebar__footer-slot {
+  flex: 1;
+  min-width: 0;
+}
+.udb-sidebar--collapsed .udb-sidebar__footer-slot {
+  display: none;
+}
+.udb-header__extra {
+  display: flex;
+  align-items: center;
+  gap: var(--udb-space-2);
+}
+.udb-header__search {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--udb-space-2);
+  height: 34px;
+  padding: 0 var(--udb-space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-background);
+  color: var(--color-muted-foreground);
+  font: inherit;
+  cursor: pointer;
+  transition: border-color 0.2s ease, color 0.2s ease;
+}
+.udb-header__search:hover {
+  border-color: var(--color-primary);
+  color: var(--color-foreground);
+}
+.udb-header__search-icon {
+  width: 15px;
+  height: 15px;
+  flex-shrink: 0;
+}
+.udb-header__search-text {
+  font-size: var(--udb-font-size-sm);
+  white-space: nowrap;
+}
+.udb-header__search-kbd {
+  margin-left: var(--udb-space-2);
+}
+.udb-profile-btn[data-state="open"] .udb-profile-btn__chevron {
+  transform: rotate(180deg);
+}
+.udb-profile-btn__chevron {
+  transition: transform 0.15s ease;
+}
+.udb-layout__footer {
+  flex-shrink: 0;
+  padding: var(--udb-space-4);
+  border-top: 1px solid var(--color-border);
+  color: var(--color-muted-foreground);
+  font-size: var(--udb-font-size-sm);
+}
+.udb-filter-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: var(--udb-space-3);
+}
+.udb-filter-bar__search {
+  min-width: 200px;
+  flex: 0 1 240px;
+}
+.udb-filter-bar__fields {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--udb-space-2);
+  flex: 1;
+}
+.udb-filter-bar__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--udb-space-2);
+}
 @keyframes udb-pop {
   from {
     opacity: 0;