@tuturuuu/ui 0.13.0 → 0.16.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/task-settings.tsx

@@ -7,6 +7,7 @@ import {
   TASK_NAVIGATION_LEADERBOARDS_CONFIG_ID,
   TASK_NAVIGATION_PROGRESS_CONFIG_ID,
   TASK_NAVIGATION_STATS_CONFIG_ID,
+  TASK_QUICK_CREATE_TARGET_LIST_CONFIG_ID,
 } from '@tuturuuu/internal-api/users';
 import type { Workspace } from '@tuturuuu/types';
 import { SettingItemTab } from '@tuturuuu/ui/custom/settings-item-tab';
@@ -34,6 +35,11 @@ import {
   type TaskDialogPresentation,
 } from '../../tu-do/shared/task-dialog-presentation';
 import { TASKS_SHOW_REVIEW_DUE_DATES_CONFIG_ID } from '../../tu-do/shared/task-due-date-visibility';
+import {
+  DEFAULT_TASK_QUICK_CREATE_TARGET_LIST,
+  normalizeTaskQuickCreateTargetList,
+  type TaskQuickCreateTargetList,
+} from '../../tu-do/shared/task-quick-create-target-list';
 import {
   clampTaskSoundEffectsVolume,
   DEFAULT_TASK_SOUND_EFFECTS_VOLUME,
@@ -142,6 +148,14 @@ export function TaskSettings({ workspace }: TaskSettingsProps) {
   const { data: dialogPresentationRaw, isLoading: dialogPresentationLoading } =
     useUserConfig(TASK_DIALOG_DEFAULT_PRESENTATION_CONFIG_ID, 'compact');
   const updateDialogPresentation = useUpdateUserConfig();
+  const {
+    data: quickCreateTargetListRaw,
+    isLoading: quickCreateTargetListLoading,
+  } = useUserConfig(
+    TASK_QUICK_CREATE_TARGET_LIST_CONFIG_ID,
+    DEFAULT_TASK_QUICK_CREATE_TARGET_LIST
+  );
+  const updateQuickCreateTargetList = useUpdateUserConfig();
 
   const { data: settings, isLoading } = useQuery({
     queryKey: ['user-task-settings'],
@@ -211,6 +225,9 @@ export function TaskSettings({ workspace }: TaskSettingsProps) {
   const dialogPresentation = normalizeTaskDialogPresentation(
     dialogPresentationRaw
   );
+  const quickCreateTargetList = normalizeTaskQuickCreateTargetList(
+    quickCreateTargetListRaw
+  );
 
   const handleDialogPresentationChange = (value: string) => {
     const nextValue: TaskDialogPresentation = normalizeTaskDialogPresentation(
@@ -223,6 +240,15 @@ export function TaskSettings({ workspace }: TaskSettingsProps) {
     });
   };
 
+  const handleQuickCreateTargetListChange = (value: string) => {
+    const nextValue: TaskQuickCreateTargetList =
+      normalizeTaskQuickCreateTargetList(value);
+    updateQuickCreateTargetList.mutate({
+      configId: TASK_QUICK_CREATE_TARGET_LIST_CONFIG_ID,
+      value: nextValue,
+    });
+  };
+
   return (
     <div className="space-y-8">
       <div className="grid gap-6">
@@ -330,6 +356,35 @@ export function TaskSettings({ workspace }: TaskSettingsProps) {
           </Select>
         </SettingItemTab>
         <Separator />
+        <SettingItemTab
+          title={t('quick_create_target_list')}
+          description={t('quick_create_target_list_description')}
+        >
+          <Select
+            value={quickCreateTargetList}
+            onValueChange={handleQuickCreateTargetListChange}
+            disabled={
+              quickCreateTargetListLoading ||
+              updateQuickCreateTargetList.isPending
+            }
+          >
+            <SelectTrigger
+              aria-label={t('quick_create_target_list')}
+              className="w-44"
+            >
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="default_list">
+                {t('quick_create_target_list_default')}
+              </SelectItem>
+              <SelectItem value="hovered_list">
+                {t('quick_create_target_list_hovered')}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </SettingItemTab>
+        <Separator />
         <SettingItemTab
           title={t('draft_mode')}
           description={t('draft_mode_description')}

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');
+  });
+});