@tuturuuu/ui 0.14.0 → 0.17.0

package/src/components/ui/custom/settings/sidebar-settings.tsx

@@ -8,13 +8,12 @@ import { RadioGroup, RadioGroupItem } from '@tuturuuu/ui/radio-group';
 import { Separator } from '@tuturuuu/ui/separator';
 import { Switch } from '@tuturuuu/ui/switch';
 import { useTranslations } from 'next-intl';
+import type { SidebarBehavior } from '../sidebar-context';
 
 interface SidebarSettingsProps {
   useSidebar: () => {
-    behavior: 'expanded' | 'collapsed' | 'hover';
-    handleBehaviorChange: (
-      behavior: 'expanded' | 'collapsed' | 'hover'
-    ) => void;
+    behavior: SidebarBehavior;
+    handleBehaviorChange: (behavior: SidebarBehavior) => void;
     localOverride: boolean;
     setLocalOverride: (value: boolean) => void;
   };
@@ -45,9 +44,9 @@ export default function SidebarSettings({ useSidebar }: SidebarSettingsProps) {
         <RadioGroup
           value={behavior}
           onValueChange={(value) =>
-            handleBehaviorChange(value as 'expanded' | 'collapsed' | 'hover')
+            handleBehaviorChange(value as SidebarBehavior)
           }
-          className="grid grid-cols-3 gap-4"
+          className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4"
         >
           <div>
             <RadioGroupItem
@@ -84,6 +83,19 @@ export default function SidebarSettings({ useSidebar }: SidebarSettingsProps) {
               {t('settings.preferences.sidebar_hover')}
             </Label>
           </div>
+          <div>
+            <RadioGroupItem
+              value="hidden"
+              id="hidden"
+              className="peer sr-only"
+            />
+            <Label
+              htmlFor="hidden"
+              className="flex cursor-pointer flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
+            >
+              {t('settings.preferences.sidebar_hidden')}
+            </Label>
+          </div>
         </RadioGroup>
       </SettingItemTab>
 

package/src/components/ui/custom/settings-dialog-shell.tsx

@@ -64,6 +64,7 @@ export interface SettingsNavItem {
   label: string;
   icon: ComponentType<{ className?: string }>;
   description?: string;
+  hideContentHeader?: boolean;
   disabled?: boolean;
   keywords?: string[];
   aliases?: string[];
@@ -157,6 +158,7 @@ export function SettingsDialogShell({
     allNavItems.find((item) => item.name === activeTab) ||
     allNavItems.find((item) => !item.disabled) ||
     allNavItems[0];
+  const showContentHeader = !activeItem?.hideContentHeader;
 
   const ensureSearchEngine = useCallback(() => {
     if (searchEngineFactory || searchEngineLoadRef.current) return;
@@ -511,18 +513,22 @@ export function SettingsDialogShell({
           </header>
           <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-6">
             <div className="mx-auto w-full max-w-4xl space-y-6">
-              <div className="space-y-1">
-                <h2 className="font-semibold text-lg tracking-tight">
-                  {activeItem?.label}
-                </h2>
-                <p className="text-muted-foreground text-sm">
-                  {activeItem?.description ||
-                    t('settings.manage_settings', {
-                      label: activeItem?.label?.toLowerCase() ?? '',
-                    })}
-                </p>
-              </div>
-              <Separator />
+              {showContentHeader && (
+                <>
+                  <div className="space-y-1">
+                    <h2 className="font-semibold text-lg tracking-tight">
+                      {activeItem?.label}
+                    </h2>
+                    <p className="text-muted-foreground text-sm">
+                      {activeItem?.description ||
+                        t('settings.manage_settings', {
+                          label: activeItem?.label?.toLowerCase() ?? '',
+                        })}
+                    </p>
+                  </div>
+                  <Separator />
+                </>
+              )}
               {children}
             </div>
           </div>

package/src/components/ui/custom/sidebar-context.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useLocalStorage } from '@tuturuuu/ui/hooks/use-local-storage';
+import { getTuturuuuBrowserSharedCookieOptions } from '@tuturuuu/utils/shared-cookie';
 import { setCookie } from 'cookies-next';
 import {
   type ComponentType,
@@ -19,7 +20,7 @@ export const SIDEBAR_BEHAVIOR_UPDATED_AT_COOKIE_NAME =
   'sidebar-behavior-updated-at';
 export const SIDEBAR_BEHAVIOR_CONFIG_KEY = 'SIDEBAR_BEHAVIOR';
 
-export type SidebarBehavior = 'expanded' | 'collapsed' | 'hover';
+export type SidebarBehavior = 'expanded' | 'collapsed' | 'hover' | 'hidden';
 
 interface SidebarContextProps {
   behavior: SidebarBehavior;
@@ -40,6 +41,10 @@ export const SIDEBAR_COOKIE_OPTIONS = {
   path: '/',
 } as const;
 
+export function getSidebarCookieOptions() {
+  return getTuturuuuBrowserSharedCookieOptions(SIDEBAR_COOKIE_OPTIONS);
+}
+
 function parseSidebarBehaviorUpdatedAt(value: string | undefined | null) {
   if (!value) return null;
 
@@ -73,6 +78,19 @@ type SidebarRemoteBehaviorBridgeComponent = ComponentType<{
   userChangeVersion: number;
 }>;
 
+function isEditableShortcutTarget(target: EventTarget | null) {
+  if (!(target instanceof HTMLElement)) return false;
+
+  if (target.isContentEditable) return true;
+
+  const tagName = target.tagName.toLowerCase();
+  if (tagName === 'input' || tagName === 'textarea' || tagName === 'select') {
+    return true;
+  }
+
+  return Boolean(target.closest('[contenteditable="true"], [role="textbox"]'));
+}
+
 function useSidebarRemoteBehaviorBridge() {
   const [RemoteBehaviorBridge, setRemoteBehaviorBridge] =
     useState<SidebarRemoteBehaviorBridgeComponent | null>(null);
@@ -136,7 +154,7 @@ export const SidebarProvider = ({
       setCookie(
         SIDEBAR_BEHAVIOR_COOKIE_NAME,
         newBehavior,
-        SIDEBAR_COOKIE_OPTIONS
+        getSidebarCookieOptions()
       );
 
       if (!options.markLocalChange) return;
@@ -146,7 +164,7 @@ export const SidebarProvider = ({
       setCookie(
         SIDEBAR_BEHAVIOR_UPDATED_AT_COOKIE_NAME,
         String(updatedAt),
-        SIDEBAR_COOKIE_OPTIONS
+        getSidebarCookieOptions()
       );
     },
     []
@@ -175,6 +193,41 @@ export const SidebarProvider = ({
     [applyBehavior, remoteBehavior, setLocalOverrideRaw]
   );
 
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.defaultPrevented ||
+        event.key.toLowerCase() !== 'b' ||
+        !(event.metaKey || event.ctrlKey) ||
+        event.shiftKey ||
+        isEditableShortcutTarget(event.target)
+      ) {
+        return;
+      }
+
+      if (event.altKey) {
+        event.preventDefault();
+        handleBehaviorChange('hidden');
+        return;
+      }
+
+      event.preventDefault();
+      handleBehaviorChange(
+        behavior === 'expanded'
+          ? 'collapsed'
+          : behavior === 'hidden'
+            ? 'collapsed'
+            : 'expanded'
+      );
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [behavior, handleBehaviorChange]);
+
   return (
     <SidebarContext.Provider
       value={{
@@ -208,3 +261,5 @@ export const useSidebar = () => {
   }
   return context;
 };
+
+export const useOptionalSidebar = () => useContext(SidebarContext);

package/src/components/ui/custom/sidebar-remote-behavior-bridge.tsx

@@ -5,14 +5,16 @@ import {
   useUserConfig,
 } from '@tuturuuu/ui/hooks/use-user-config';
 import { useEffect, useRef } from 'react';
-
-type SidebarBehavior = 'expanded' | 'collapsed' | 'hover';
+import type { SidebarBehavior } from './sidebar-context';
 
 const SIDEBAR_BEHAVIOR_CONFIG_KEY = 'SIDEBAR_BEHAVIOR';
 const RECENT_LOCAL_BEHAVIOR_GRACE_MS = 5 * 60 * 1000;
 
 const isValidBehavior = (value: string | undefined): value is SidebarBehavior =>
-  value === 'expanded' || value === 'collapsed' || value === 'hover';
+  value === 'expanded' ||
+  value === 'collapsed' ||
+  value === 'hover' ||
+  value === 'hidden';
 
 interface SidebarRemoteBehaviorBridgeProps {
   behavior: SidebarBehavior;

package/src/components/ui/custom/statistic-card.tsx

@@ -0,0 +1,104 @@
+import { Progress } from '@tuturuuu/ui/progress';
+import Link from 'next/link';
+
+interface Props {
+  title?: string;
+  value?: string | number | null;
+  limit?: number;
+  displayValue?: React.ReactNode;
+  displayLimit?: React.ReactNode;
+  progress?: number;
+  href?: string;
+  className?: string;
+  onClick?: () => void;
+}
+
+const StatisticCard = ({
+  title,
+  value,
+  limit,
+  displayValue,
+  displayLimit,
+  progress,
+  href,
+  className,
+  onClick,
+}: Props) => {
+  const generateOuterColor = (enableHoverEffect: boolean) =>
+    `${
+      enableHoverEffect
+        ? 'border-border hover:bg-foreground/[0.025] dark:hover:bg-foreground/5'
+        : 'border-border/50'
+    }`;
+
+  const progressValue =
+    progress !== undefined
+      ? progress
+      : typeof value === 'number' && limit
+        ? (value / limit) * 100
+        : 0;
+
+  const progressColor =
+    progressValue >= 100
+      ? 'bg-dynamic-red'
+      : progressValue >= 90
+        ? 'bg-dynamic-yellow'
+        : '';
+
+  const cardContent = (
+    <div className="flex h-full flex-col justify-between">
+      <div>
+        <div className="line-clamp-1 p-1 text-center font-semibold text-lg">
+          {title}
+        </div>
+        <div
+          className={`m-2 mt-0 line-clamp-1 rounded border border-border/30 bg-foreground/5 p-4 text-center font-bold text-2xl text-foreground ${
+            onClick || href
+              ? 'transition-all duration-300 group-hover:rounded-lg'
+              : ''
+          }`}
+        >
+          {displayValue ?? (value != null ? value : 'N/A')}
+          {(displayLimit || limit) && (
+            <span className="font-normal text-base text-muted-foreground">
+              {' '}
+              / {displayLimit ?? limit}
+            </span>
+          )}
+        </div>
+      </div>
+      {(limit || displayLimit || progress !== undefined) && (
+        <div className="px-4 pb-4">
+          <Progress value={progressValue} indicatorClassName={progressColor} />
+        </div>
+      )}
+    </div>
+  );
+
+  if (href)
+    return (
+      <Link
+        href={href}
+        onClick={onClick}
+        className={`group flex flex-col rounded-lg border transition-all duration-300 ${
+          onClick || href ? 'hover:rounded-xl' : 'cursor-default'
+        } ${generateOuterColor(!!onClick || !!href)} ${className || ''}`}
+      >
+        {cardContent}
+      </Link>
+    );
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`group flex flex-col rounded-lg border transition duration-300 ${
+        onClick || href ? 'hover:rounded-xl' : 'cursor-default'
+      } ${generateOuterColor(!!onClick || !!href)} ${className || ''}`}
+    >
+      {cardContent}
+    </button>
+  );
+};
+
+export default StatisticCard;

package/src/components/ui/custom/structure.test.tsx

@@ -0,0 +1,29 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { Structure } from './structure';
+
+describe('Structure', () => {
+  it('removes sidebar chrome and desktop padding when the sidebar is hidden', () => {
+    const { container } = render(
+      <Structure
+        isCollapsed
+        setIsCollapsed={vi.fn()}
+        mobileHeader={<span>Mobile header</span>}
+        sidebarContent={<span>Sidebar content</span>}
+        sidebarHeader={<span>Sidebar header</span>}
+        sidebarHidden
+      >
+        <span>Page content</span>
+      </Structure>
+    );
+
+    expect(screen.getByText('Page content')).toBeInTheDocument();
+    expect(screen.queryByText('Mobile header')).not.toBeInTheDocument();
+    expect(screen.queryByText('Sidebar header')).not.toBeInTheDocument();
+    expect(screen.queryByText('Sidebar content')).not.toBeInTheDocument();
+    expect(container.querySelector('aside')).not.toBeInTheDocument();
+    expect(container.querySelector('nav')).not.toBeInTheDocument();
+    expect(container.querySelector('main')).toHaveClass('md:pl-0');
+  });
+});

package/src/components/ui/custom/structure.tsx

@@ -21,6 +21,7 @@ interface StructureProps {
   children: ReactNode;
   onMouseEnter?: () => void;
   onMouseLeave?: () => void;
+  sidebarHidden?: boolean;
   sidebarCollapsedWidth?: string;
   sidebarExpandedWidth?: string;
   sidebarHeaderClassName?: string;
@@ -42,6 +43,7 @@ export function Structure({
   children,
   onMouseEnter,
   onMouseLeave,
+  sidebarHidden = false,
   sidebarCollapsedWidth = '4rem',
   sidebarExpandedWidth = '16rem',
   sidebarHeaderClassName,
@@ -60,7 +62,7 @@ export function Structure({
     if (typeof window === 'undefined') return;
 
     const isMobile = window.innerWidth < 768; // md breakpoint
-    if (isMobile && !isCollapsed) {
+    if (isMobile && !sidebarHidden && !isCollapsed) {
       const scrollY = window.scrollY;
       document.body.style.position = 'fixed';
       document.body.style.top = `-${scrollY}px`;
@@ -73,31 +75,35 @@ export function Structure({
         window.scrollTo(0, scrollY);
       };
     }
-  }, [isCollapsed]);
+  }, [isCollapsed, sidebarHidden]);
 
   return (
     <>
-      <nav className="safe-top safe-x fixed inset-x-0 top-0 z-30 max-sm:border-b md:hidden">
-        <div className="bg-background/50 p-2 font-semibold backdrop-blur-md md:px-8 lg:px-16 xl:px-32">
-          <div className="relative flex items-center justify-between gap-2 md:gap-4">
-            <div className="flex w-full items-center gap-2">{mobileHeader}</div>
-            <div className="flex w-fit items-center gap-2">
-              {userPopover}
-              <Button
-                size="icon"
-                variant="outline"
-                className="h-auto w-auto flex-none rounded-lg p-2 md:hidden"
-                onClick={() => setIsCollapsed(!isCollapsed)}
-              >
-                <Menu className="h-5 w-5" />
-              </Button>
+      {!sidebarHidden && (
+        <nav className="safe-top safe-x fixed inset-x-0 top-0 z-30 max-sm:border-b md:hidden">
+          <div className="bg-background/50 p-2 font-semibold backdrop-blur-md md:px-8 lg:px-16 xl:px-32">
+            <div className="relative flex items-center justify-between gap-2 md:gap-4">
+              <div className="flex w-full items-center gap-2">
+                {mobileHeader}
+              </div>
+              <div className="flex w-fit items-center gap-2">
+                {userPopover}
+                <Button
+                  size="icon"
+                  variant="outline"
+                  className="h-auto w-auto flex-none rounded-lg p-2 md:hidden"
+                  onClick={() => setIsCollapsed(!isCollapsed)}
+                >
+                  <Menu className="h-5 w-5" />
+                </Button>
+              </div>
             </div>
           </div>
-        </div>
-      </nav>
+        </nav>
+      )}
 
       <TooltipProvider delayDuration={0}>
-        {!isCollapsed && (
+        {!sidebarHidden && !isCollapsed && (
           <button
             type="button"
             className="fixed inset-0 z-40 bg-black/20 backdrop-blur-lg md:hidden"
@@ -105,104 +111,113 @@ export function Structure({
           />
         )}
         <div className="relative w-full">
-          <aside
-            className={cn(
-              'group fixed top-0 right-0 left-auto z-50 flex h-dvh flex-col overflow-hidden border-l backdrop-blur-lg transition-all duration-300 ease-in-out md:left-0 md:z-20 md:border-r md:border-l-0',
-              isCollapsed
-                ? 'w-[var(--sidebar-collapsed-width)] bg-background/50 max-md:w-0'
-                : 'w-[var(--sidebar-expanded-width)] bg-background max-sm:w-full',
-              isCollapsed && 'max-md:translate-x-full',
-              overlayOnExpand && !isCollapsed && 'md:z-40'
-            )}
-            onMouseEnter={onMouseEnter}
-            onMouseLeave={onMouseLeave}
-            style={sidebarStyle}
-          >
-            <div
+          {!sidebarHidden && (
+            <aside
               className={cn(
-                sidebarHeaderHeight
-                  ? 'flex h-[var(--sidebar-header-height)] shrink-0 items-center p-2 md:px-0'
-                  : 'flex min-h-12 items-center p-2 md:px-0',
-                isCollapsed ? 'justify-center' : 'py-1',
-                sidebarHeaderClassName
+                'group fixed top-0 right-0 left-auto z-50 flex h-dvh flex-col overflow-hidden border-l backdrop-blur-lg transition-all duration-300 ease-in-out md:left-0 md:z-20 md:border-r md:border-l-0',
+                isCollapsed
+                  ? 'w-[var(--sidebar-collapsed-width)] bg-background/50 max-md:w-0'
+                  : 'w-[var(--sidebar-expanded-width)] bg-background max-sm:w-full',
+                isCollapsed && 'max-md:translate-x-full',
+                overlayOnExpand && !isCollapsed && 'md:z-40'
               )}
+              onMouseEnter={onMouseEnter}
+              onMouseLeave={onMouseLeave}
+              style={sidebarStyle}
             >
               <div
                 className={cn(
-                  'flex min-h-13 w-full items-center md:px-2',
-                  isCollapsed ? 'justify-center' : ''
+                  sidebarHeaderHeight
+                    ? 'flex h-[var(--sidebar-header-height)] shrink-0 items-center p-2 md:px-0'
+                    : 'flex min-h-12 items-center p-2 md:px-0',
+                  isCollapsed ? 'justify-center' : 'py-1',
+                  sidebarHeaderClassName
                 )}
               >
                 <div
                   className={cn(
-                    'flex w-full items-center gap-2',
-                    isCollapsed ? 'justify-center' : 'justify-between'
+                    'flex min-h-13 w-full items-center md:px-2',
+                    isCollapsed ? 'justify-center' : ''
                   )}
                 >
-                  {sidebarHeader}
-                  {isCollapsed || (
-                    <Button
-                      size="icon"
-                      variant="outline"
-                      className="h-auto w-auto flex-none rounded-lg p-2 md:hidden"
-                      onClick={() => setIsCollapsed(!isCollapsed)}
-                    >
-                      <X className="h-5 w-5" />
-                    </Button>
-                  )}
+                  <div
+                    className={cn(
+                      'flex w-full items-center gap-2',
+                      isCollapsed ? 'justify-center' : 'justify-between'
+                    )}
+                  >
+                    {sidebarHeader}
+                    {isCollapsed || (
+                      <Button
+                        size="icon"
+                        variant="outline"
+                        className="h-auto w-auto flex-none rounded-lg p-2 md:hidden"
+                        onClick={() => setIsCollapsed(!isCollapsed)}
+                      >
+                        <X className="h-5 w-5" />
+                      </Button>
+                    )}
+                  </div>
                 </div>
               </div>
-            </div>
-            <div className="scrollbar-none flex flex-1 flex-col gap-y-1 overflow-y-auto overflow-x-hidden overscroll-contain">
-              {sidebarContent}
-            </div>
-            {feedbackButton && (
+              <div className="scrollbar-none flex flex-1 flex-col gap-y-1 overflow-y-auto overflow-x-hidden overscroll-contain">
+                {sidebarContent}
+              </div>
+              {feedbackButton && (
+                <div
+                  className={cn(
+                    'flex border-foreground/10 border-t p-2',
+                    isCollapsed ? 'justify-center' : ''
+                  )}
+                >
+                  {feedbackButton}
+                </div>
+              )}
               <div
                 className={cn(
-                  'flex border-foreground/10 border-t p-2',
+                  'mt-auto flex border-foreground/10 border-t p-2',
                   isCollapsed ? 'justify-center' : ''
                 )}
               >
-                {feedbackButton}
+                {isCollapsed ? userPopover : actions}
               </div>
-            )}
-            <div
-              className={cn(
-                'mt-auto flex border-foreground/10 border-t p-2',
-                isCollapsed ? 'justify-center' : ''
-              )}
-            >
-              {isCollapsed ? userPopover : actions}
-            </div>
 
-            {!hideSizeToggle && (
-              <Button
-                size="icon"
-                variant="outline"
-                className="absolute top-1/2 -right-4 z-10 hidden h-auto w-auto -translate-y-1/2 rounded-full border-2 bg-background p-1.5 pl-1.5 opacity-0 transition duration-500 hover:bg-accent group-hover:opacity-100 md:block"
-                onClick={() => setIsCollapsed(!isCollapsed)}
-              >
-                {isCollapsed ? (
-                  <ChevronRight className="mr-2 h-4 w-4" />
-                ) : (
-                  <ChevronLeft className="mr-2 h-4 w-4" />
-                )}
-              </Button>
-            )}
-          </aside>
+              {!hideSizeToggle && (
+                <Button
+                  size="icon"
+                  variant="outline"
+                  className="absolute top-1/2 -right-4 z-10 hidden h-auto w-auto -translate-y-1/2 rounded-full border-2 bg-background p-1.5 pl-1.5 opacity-0 transition duration-500 hover:bg-accent group-hover:opacity-100 md:block"
+                  onClick={() => setIsCollapsed(!isCollapsed)}
+                >
+                  {isCollapsed ? (
+                    <ChevronRight className="mr-2 h-4 w-4" />
+                  ) : (
+                    <ChevronLeft className="mr-2 h-4 w-4" />
+                  )}
+                </Button>
+              )}
+            </aside>
+          )}
           {/* Main content area - overflow-y-auto removed to prevent double scrollbars */}
           {/* Body element now handles page-level scrolling */}
           <main
             className={cn(
               'relative flex h-full min-h-screen flex-col overflow-x-clip overflow-y-visible transition-all duration-300 ease-in-out',
-              isCollapsed || overlayOnExpand
-                ? 'md:pl-[var(--sidebar-collapsed-width)]'
-                : 'md:pl-[var(--sidebar-expanded-width)]'
+              sidebarHidden
+                ? 'md:pl-0'
+                : isCollapsed || overlayOnExpand
+                  ? 'md:pl-[var(--sidebar-collapsed-width)]'
+                  : 'md:pl-[var(--sidebar-expanded-width)]'
             )}
             style={sidebarStyle}
           >
             {header && <div className="mb-4 hidden md:block">{header}</div>}
-            <div className="safe-bottom relative h-full w-full p-2 pt-17 pl-2 md:p-4 md:pt-4">
+            <div
+              className={cn(
+                'safe-bottom relative h-full w-full p-2 md:p-4 md:pt-4',
+                sidebarHidden ? 'pt-2' : 'pt-17 pl-2'
+              )}
+            >
               {children}
             </div>
           </main>