@tuturuuu/ui 0.5.0 → 0.6.0

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

@@ -14,7 +14,6 @@ import {
   CommandSeparator,
 } from '../command';
 import { Popover, PopoverContent, PopoverTrigger } from '../popover';
-import { Separator } from '../separator';
 
 export type ComboboxOption = {
   value: string;
@@ -36,6 +35,8 @@ export type ComboboxAction = {
   disabled?: boolean;
 };
 
+export type ComboboxCreateResult = string | ComboboxOption | undefined;
+
 /** @deprecated Use ComboboxOption instead */
 export type ComboboxOptions = ComboboxOption;
 
@@ -62,6 +63,8 @@ interface ComboboxProps {
   emptyText?: string;
   /** Text to display when creating a new item (used with onCreate) */
   createText?: string;
+  /** Text to display while a new item is being created */
+  creatingText?: string;
   /** Override label shown on the trigger button */
   label?: React.ReactNode;
   /** Additional class name for the container */
@@ -71,7 +74,7 @@ interface ComboboxProps {
   /** Whether to select the first option by default */
   useFirstValueAsDefault?: boolean;
   /** Callback to create a new option from the search query */
-  onCreate?: (value: string) => void;
+  onCreate?: (value: string) => unknown | Promise<unknown>;
   /** Callback when search input changes */
   onSearchChange?: (value: string) => void;
   /** Whether there are more options to load */
@@ -102,6 +105,7 @@ export function Combobox({
   searchPlaceholder,
   emptyText,
   createText,
+  creatingText,
   label,
   className,
   disabled,
@@ -117,14 +121,31 @@ export function Combobox({
 }: ComboboxProps) {
   const [open, setOpen] = React.useState(false);
   const [query, setQuery] = React.useState<string>('');
+  const [creating, setCreating] = React.useState(false);
+  const createInFlightRef = React.useRef(false);
   const actionValuePrefix = '__combobox_action__';
+  const createValuePrefix = '__combobox_create__';
 
   // Resolve text with fallbacks: explicit prop > t function > default
   const resolvedEmptyText =
     emptyText ?? t?.('common.empty') ?? 'No results found.';
   const resolvedCreateText = createText ?? t?.('common.add') ?? 'Create';
+  const resolvedCreatingText =
+    creatingText ?? t?.('common.creating') ?? 'Creating...';
   const resolvedSearchPlaceholder =
     searchPlaceholder ?? placeholder ?? 'Search...';
+  const normalizedQuery = normalizeComboboxText(query);
+  const trimmedQuery = query.trim();
+  const hasExactQueryMatch = React.useMemo(() => {
+    if (!normalizedQuery) return false;
+
+    return options.some((option) =>
+      [option.label, option.value, option.searchValue]
+        .filter((value): value is string => typeof value === 'string')
+        .some((value) => normalizeComboboxText(value) === normalizedQuery)
+    );
+  }, [normalizedQuery, options]);
+  const canCreate = Boolean(onCreate && normalizedQuery && !hasExactQueryMatch);
 
   React.useEffect(() => {
     if (!open) {
@@ -206,8 +227,55 @@ export function Combobox({
     );
   };
 
+  const commitCreatedValue = React.useCallback(
+    (result: unknown) => {
+      if (!onChange) return;
+
+      const createdValue =
+        typeof result === 'string'
+          ? result
+          : result &&
+              typeof result === 'object' &&
+              'value' in result &&
+              typeof result.value === 'string'
+            ? result.value
+            : undefined;
+
+      if (!createdValue) return;
+
+      if (mode === 'multiple' && Array.isArray(selected)) {
+        if (!selected.includes(createdValue)) {
+          onChange([...selected, createdValue]);
+        }
+        return;
+      }
+
+      onChange(createdValue);
+    },
+    [mode, onChange, selected]
+  );
+
+  const handleCreate = React.useCallback(async () => {
+    if (!onCreate || !trimmedQuery || createInFlightRef.current) return;
+
+    createInFlightRef.current = true;
+    setCreating(true);
+
+    try {
+      const result = await onCreate(trimmedQuery);
+      commitCreatedValue(result);
+      setOpen(false);
+      setQuery('');
+    } catch {
+      // Keep the popover open so callers can surface their own error UI.
+    } finally {
+      createInFlightRef.current = false;
+      setCreating(false);
+    }
+  }, [commitCreatedValue, onCreate, trimmedQuery]);
+
   return (
-    <div className={cn('block', className)}>
+    <div className={cn('block min-w-0', className)}>
       <Popover open={open} onOpenChange={setOpen} modal={true}>
         <PopoverTrigger asChild>
           <Button
@@ -216,7 +284,7 @@ export function Combobox({
             role="combobox"
             aria-expanded={open}
             className={cn(
-              'w-full justify-between',
+              'w-full min-w-0 justify-between overflow-hidden',
               !selectedLabel && 'text-muted-foreground'
             )}
             disabled={disabled}
@@ -254,7 +322,7 @@ export function Combobox({
                     : selectedOption.icon}
                 </span>
               )}
-              <span className="min-w-0 flex-1">
+              <span className="min-w-0 flex-1 truncate text-left">
                 {label ? (
                   label
                 ) : (
@@ -281,13 +349,14 @@ export function Combobox({
           </Button>
         </PopoverTrigger>
         <PopoverContent
-          className="z-9999 w-(--radix-popover-trigger-width) p-0"
+          className="z-9999 w-(--radix-popover-trigger-width) max-w-[calc(100vw-2rem)] p-0"
           align="start"
           sideOffset={4}
         >
           <Command
             filter={(value, search) => {
               if (value.startsWith(actionValuePrefix)) return 1;
+              if (value.startsWith(createValuePrefix)) return 1;
               if (value.toLowerCase().includes(search.toLowerCase())) return 1;
               return 0;
             }}
@@ -300,38 +369,11 @@ export function Combobox({
                 onSearchChange?.(value);
               }}
             />
-            <CommandEmpty className="flex flex-col items-center justify-center p-1">
-              <div className="p-8 text-muted-foreground text-sm">
-                {resolvedEmptyText}
-              </div>
-              {onCreate && (
-                <>
-                  <Separator />
-                  <Button
-                    variant="ghost"
-                    className="mt-1 w-full"
-                    onClick={() => {
-                      if (onCreate) {
-                        onCreate(query);
-                        setOpen(false);
-                        setQuery('');
-                      }
-                    }}
-                    disabled={!query || !onCreate}
-                  >
-                    <Plus className="mr-2 h-4 w-4 shrink-0" />
-                    <div className="w-full truncate">
-                      <span className="font-normal">{resolvedCreateText}</span>{' '}
-                      <span className="underline decoration-dashed underline-offset-2">
-                        {query}
-                      </span>
-                    </div>
-                  </Button>
-                </>
-              )}
+            <CommandEmpty className="p-8 text-center text-muted-foreground text-sm">
+              {resolvedEmptyText}
             </CommandEmpty>
             <CommandList
-              className="max-h-50 overflow-y-auto overscroll-contain"
+              className="max-h-[min(20rem,calc(100dvh-8rem))] overflow-y-auto overscroll-contain"
               onScroll={handleListScroll}
               style={
                 {
@@ -346,6 +388,29 @@ export function Combobox({
                   <CommandSeparator />
                 </>
               ) : null}
+              {canCreate ? (
+                <>
+                  <CommandGroup>
+                    <CommandItem
+                      value={`${createValuePrefix}:${trimmedQuery}`}
+                      disabled={creating}
+                      onSelect={handleCreate}
+                      className="font-medium text-primary [&_svg]:text-primary"
+                    >
+                      <Plus className="h-4 w-4 shrink-0" />
+                      <span className="min-w-0 flex-1 truncate">
+                        <span className="font-normal">
+                          {creating ? resolvedCreatingText : resolvedCreateText}
+                        </span>{' '}
+                        <span className="underline decoration-dashed underline-offset-2">
+                          {trimmedQuery}
+                        </span>
+                      </span>
+                    </CommandItem>
+                  </CommandGroup>
+                  <CommandSeparator />
+                </>
+              ) : null}
               <CommandGroup>
                 {options.map((option) => (
                   <CommandItem
@@ -463,3 +528,7 @@ export function Combobox({
     </div>
   );
 }
+
+function normalizeComboboxText(value: string) {
+  return value.trim().toLocaleLowerCase();
+}

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

@@ -20,6 +20,11 @@ import { toast } from '@tuturuuu/ui/sonner';
 import { Switch } from '@tuturuuu/ui/switch';
 import { useTranslations } from 'next-intl';
 import { useEffect } from 'react';
+import {
+  normalizeTaskDialogPresentation,
+  TASK_DIALOG_DEFAULT_PRESENTATION_CONFIG_ID,
+  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 {
   clampTaskSoundEffectsVolume,
@@ -96,6 +101,9 @@ export function TaskSettings({ workspace }: TaskSettingsProps) {
   const { data: submitShortcut, isLoading: submitShortcutLoading } =
     useUserConfig('TASK_SUBMIT_SHORTCUT', 'enter');
   const updateSubmitShortcut = useUpdateUserConfig();
+  const { data: dialogPresentationRaw, isLoading: dialogPresentationLoading } =
+    useUserConfig(TASK_DIALOG_DEFAULT_PRESENTATION_CONFIG_ID, 'compact');
+  const updateDialogPresentation = useUpdateUserConfig();
 
   const { data: settings, isLoading } = useQuery({
     queryKey: ['user-task-settings'],
@@ -159,6 +167,20 @@ export function TaskSettings({ workspace }: TaskSettingsProps) {
   const normalizedSoundEffectsVolume = String(
     clampTaskSoundEffectsVolume(soundEffectsVolume)
   );
+  const dialogPresentation = normalizeTaskDialogPresentation(
+    dialogPresentationRaw
+  );
+
+  const handleDialogPresentationChange = (value: string) => {
+    const nextValue: TaskDialogPresentation = normalizeTaskDialogPresentation(
+      value,
+      'compact'
+    );
+    updateDialogPresentation.mutate({
+      configId: TASK_DIALOG_DEFAULT_PRESENTATION_CONFIG_ID,
+      value: nextValue,
+    });
+  };
 
   return (
     <div className="space-y-8">
@@ -239,6 +261,34 @@ export function TaskSettings({ workspace }: TaskSettingsProps) {
           </Select>
         </SettingItemTab>
         <Separator />
+        <SettingItemTab
+          title={t('dialog_presentation')}
+          description={t('dialog_presentation_description')}
+        >
+          <Select
+            value={dialogPresentation}
+            onValueChange={handleDialogPresentationChange}
+            disabled={
+              dialogPresentationLoading || updateDialogPresentation.isPending
+            }
+          >
+            <SelectTrigger
+              aria-label={t('dialog_presentation')}
+              className="w-36"
+            >
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="compact">
+                {t('dialog_presentation_compact')}
+              </SelectItem>
+              <SelectItem value="fullscreen">
+                {t('dialog_presentation_immersive')}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </SettingItemTab>
+        <Separator />
         <SettingItemTab
           title={t('draft_mode')}
           description={t('draft_mode_description')}

package/src/components/ui/custom/settings/task-sound-settings.test.tsx

@@ -18,6 +18,7 @@ const {
   mockSetSoundEffectsEnabled: vi.fn(),
   mockUpdateUserConfigMutate: vi.fn(),
   mockConfigState: {
+    dialogPresentation: 'compact',
     soundEffectsEnabled: true,
     soundEffectsVolume: '35',
   },
@@ -51,7 +52,9 @@ vi.mock('@tuturuuu/ui/hooks/use-user-config', () => ({
     data:
       configId === 'TASK_SOUND_EFFECTS_VOLUME'
         ? mockConfigState.soundEffectsVolume
-        : defaultValue,
+        : configId === 'TASK_DIALOG_DEFAULT_PRESENTATION'
+          ? mockConfigState.dialogPresentation
+          : defaultValue,
     isLoading: false,
   }),
   useUpdateUserConfig: () => ({
@@ -76,6 +79,7 @@ function renderWithQueryClient(children: ReactNode) {
 describe('task sound settings controls', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    mockConfigState.dialogPresentation = 'compact';
     mockConfigState.soundEffectsEnabled = true;
     mockConfigState.soundEffectsVolume = '35';
     vi.stubGlobal(
@@ -104,6 +108,22 @@ describe('task sound settings controls', () => {
     expect(mockSetSoundEffectsEnabled).toHaveBeenCalledWith(false);
   });
 
+  it('renders task dialog presentation setting and persists immersive mode', async () => {
+    renderWithQueryClient(<TaskSettings />);
+
+    expect(await screen.findByText('dialog_presentation')).toBeInTheDocument();
+
+    fireEvent.click(
+      screen.getByRole('combobox', { name: 'dialog_presentation' })
+    );
+    fireEvent.click(screen.getByText('dialog_presentation_immersive'));
+
+    expect(mockUpdateUserConfigMutate).toHaveBeenCalledWith({
+      configId: 'TASK_DIALOG_DEFAULT_PRESENTATION',
+      value: 'fullscreen',
+    });
+  });
+
   it('renders the quick settings sound switch and persists changes', async () => {
     renderWithQueryClient(<QuickSettingsPopover />);
 

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

@@ -15,6 +15,8 @@ import {
 } from 'react';
 
 export const SIDEBAR_BEHAVIOR_COOKIE_NAME = 'sidebar-behavior';
+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';
@@ -33,7 +35,33 @@ export const SidebarContext = createContext<SidebarContextProps | undefined>(
 );
 
 // Persistent cookie options — ensures setting survives browser restarts
-const COOKIE_OPTIONS = { maxAge: 365 * 24 * 60 * 60, path: '/' } as const;
+export const SIDEBAR_COOKIE_OPTIONS = {
+  maxAge: 365 * 24 * 60 * 60,
+  path: '/',
+} as const;
+
+function parseSidebarBehaviorUpdatedAt(value: string | undefined | null) {
+  if (!value) return null;
+
+  const updatedAt = Number(value);
+  return Number.isSafeInteger(updatedAt) && updatedAt > 0 ? updatedAt : null;
+}
+
+function getSidebarBehaviorUpdatedAtFromDocument() {
+  if (typeof document === 'undefined') return null;
+
+  const cookie = document.cookie
+    .split('; ')
+    .find((part) =>
+      part.startsWith(`${SIDEBAR_BEHAVIOR_UPDATED_AT_COOKIE_NAME}=`)
+    );
+
+  if (!cookie) return null;
+
+  return parseSidebarBehaviorUpdatedAt(
+    decodeURIComponent(cookie.split('=').slice(1).join('='))
+  );
+}
 
 type SidebarRemoteBehaviorBridgeComponent = ComponentType<{
   behavior: SidebarBehavior;
@@ -41,6 +69,7 @@ type SidebarRemoteBehaviorBridgeComponent = ComponentType<{
   localOverrideVersion: number;
   onApplyRemoteBehavior: (newBehavior: SidebarBehavior) => void;
   onRemoteBehaviorAvailable: (remoteBehavior: SidebarBehavior) => void;
+  behaviorUpdatedAt: number | null;
   userChangeVersion: number;
 }>;
 
@@ -70,11 +99,16 @@ function useSidebarRemoteBehaviorBridge() {
 export const SidebarProvider = ({
   children,
   initialBehavior,
+  initialBehaviorUpdatedAt,
 }: {
   children: ReactNode;
   initialBehavior: SidebarBehavior;
+  initialBehaviorUpdatedAt?: number | null;
 }) => {
   const [behavior, setBehavior] = useState<SidebarBehavior>(initialBehavior);
+  const [behaviorUpdatedAt, setBehaviorUpdatedAt] = useState<number | null>(
+    () => initialBehaviorUpdatedAt ?? getSidebarBehaviorUpdatedAtFromDocument()
+  );
   const [localOverride, setLocalOverrideRaw] = useLocalStorage(
     'sidebar-local-override',
     false
@@ -86,14 +120,41 @@ export const SidebarProvider = ({
   const [localOverrideVersion, setLocalOverrideVersion] = useState(0);
   const RemoteBehaviorBridge = useSidebarRemoteBehaviorBridge();
 
-  const applyBehavior = useCallback((newBehavior: SidebarBehavior) => {
-    setBehavior(newBehavior);
-    setCookie(SIDEBAR_BEHAVIOR_COOKIE_NAME, newBehavior, COOKIE_OPTIONS);
-  }, []);
+  useEffect(() => {
+    if (initialBehaviorUpdatedAt !== undefined) return;
+
+    const updatedAt = getSidebarBehaviorUpdatedAtFromDocument();
+    if (updatedAt !== null) setBehaviorUpdatedAt(updatedAt);
+  }, [initialBehaviorUpdatedAt]);
+
+  const applyBehavior = useCallback(
+    (
+      newBehavior: SidebarBehavior,
+      options: { markLocalChange?: boolean } = {}
+    ) => {
+      setBehavior(newBehavior);
+      setCookie(
+        SIDEBAR_BEHAVIOR_COOKIE_NAME,
+        newBehavior,
+        SIDEBAR_COOKIE_OPTIONS
+      );
+
+      if (!options.markLocalChange) return;
+
+      const updatedAt = Date.now();
+      setBehaviorUpdatedAt(updatedAt);
+      setCookie(
+        SIDEBAR_BEHAVIOR_UPDATED_AT_COOKIE_NAME,
+        String(updatedAt),
+        SIDEBAR_COOKIE_OPTIONS
+      );
+    },
+    []
+  );
 
   const handleBehaviorChange = useCallback(
     (newBehavior: SidebarBehavior) => {
-      applyBehavior(newBehavior);
+      applyBehavior(newBehavior, { markLocalChange: true });
 
       if (!localOverride) {
         setUserChangeVersion((version) => version + 1);
@@ -127,6 +188,7 @@ export const SidebarProvider = ({
       {RemoteBehaviorBridge && (
         <RemoteBehaviorBridge
           behavior={behavior}
+          behaviorUpdatedAt={behaviorUpdatedAt}
           localOverride={localOverride}
           localOverrideVersion={localOverrideVersion}
           onApplyRemoteBehavior={applyBehavior}

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

@@ -9,12 +9,14 @@ import { useEffect, useRef } from 'react';
 type SidebarBehavior = 'expanded' | 'collapsed' | 'hover';
 
 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';
 
 interface SidebarRemoteBehaviorBridgeProps {
   behavior: SidebarBehavior;
+  behaviorUpdatedAt: number | null;
   localOverride: boolean;
   localOverrideVersion: number;
   onApplyRemoteBehavior: (newBehavior: SidebarBehavior) => void;
@@ -24,6 +26,7 @@ interface SidebarRemoteBehaviorBridgeProps {
 
 export function SidebarRemoteBehaviorBridge({
   behavior,
+  behaviorUpdatedAt,
   localOverride,
   localOverrideVersion,
   onApplyRemoteBehavior,
@@ -39,6 +42,12 @@ export function SidebarRemoteBehaviorBridge({
   const persistedUserChangeVersion = useRef(0);
   const handledLocalOverrideVersion = useRef(0);
 
+  const hasRecentLocalBehavior =
+    typeof behaviorUpdatedAt === 'number' &&
+    Number.isFinite(behaviorUpdatedAt) &&
+    Date.now() - behaviorUpdatedAt >= 0 &&
+    Date.now() - behaviorUpdatedAt <= RECENT_LOCAL_BEHAVIOR_GRACE_MS;
+
   useEffect(() => {
     if (!remoteLoaded || !isValidBehavior(remoteBehavior)) return;
 
@@ -58,15 +67,25 @@ export function SidebarRemoteBehaviorBridge({
 
     hasAppliedRemote.current = true;
 
-    if (remoteBehavior !== behavior) {
-      onApplyRemoteBehavior(remoteBehavior);
+    if (remoteBehavior === behavior) return;
+
+    if (hasRecentLocalBehavior) {
+      updateConfig.mutate({
+        configId: SIDEBAR_BEHAVIOR_CONFIG_KEY,
+        value: behavior,
+      });
+      return;
     }
+
+    onApplyRemoteBehavior(remoteBehavior);
   }, [
     behavior,
+    hasRecentLocalBehavior,
     localOverride,
     onApplyRemoteBehavior,
     remoteBehavior,
     remoteLoaded,
+    updateConfig,
     userChangeVersion,
   ]);
 

package/src/components/ui/finance/finance-layout.tsx

@@ -1,5 +1,5 @@
 import { Navigation, type NavLink } from '@tuturuuu/ui/custom/navigation';
-import { FinanceNumbersVisibilityToggle } from '@tuturuuu/ui/finance/shared/numbers-visibility-toggle';
+import { FinanceLayoutControls } from '@tuturuuu/ui/finance/shared/finance-layout-controls';
 import { QuickActions } from '@tuturuuu/ui/finance/shared/quick-actions';
 import { getPermissions } from '@tuturuuu/utils/workspace-helper';
 import { notFound, redirect } from 'next/navigation';
@@ -88,9 +88,7 @@ export default async function FinanceLayout({
   return (
     <>
       <Navigation navLinks={navLinks} />
-      <div className="mb-4 flex justify-end">
-        <FinanceNumbersVisibilityToggle />
-      </div>
+      <FinanceLayoutControls financePrefix={financePrefix} />
       {children}
       <QuickActions wsId={wsId} />
     </>

package/src/components/ui/finance/shared/balance-mode-toggle.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { ToggleGroup, ToggleGroupItem } from '../../toggle-group';
+import {
+  type FinanceBalanceMode,
+  useFinanceBalanceMode,
+} from './use-finance-balance-mode';
+
+export function FinanceBalanceModeToggle() {
+  const t = useTranslations('wallet-checkpoints');
+  const { mode, setMode } = useFinanceBalanceMode();
+
+  return (
+    <ToggleGroup
+      type="single"
+      variant="outline"
+      size="sm"
+      value={mode}
+      onValueChange={(value) => {
+        if (value === 'ledger' || value === 'audited') {
+          setMode(value as FinanceBalanceMode);
+        }
+      }}
+      aria-label={t('balance_mode')}
+    >
+      <ToggleGroupItem value="ledger" aria-label={t('ledger_mode')}>
+        {t('ledger')}
+      </ToggleGroupItem>
+      <ToggleGroupItem value="audited" aria-label={t('audited_mode')}>
+        {t('audited')}
+      </ToggleGroupItem>
+    </ToggleGroup>
+  );
+}

package/src/components/ui/finance/shared/finance-layout-controls.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { cn } from '@tuturuuu/utils/format';
+import { usePathname } from 'next/navigation';
+import { FinanceBalanceModeToggle } from './balance-mode-toggle';
+import { FinanceNumbersVisibilityToggle } from './numbers-visibility-toggle';
+
+interface FinanceLayoutControlsProps {
+  className?: string;
+  financePrefix?: string;
+}
+
+function normalizePathname(pathname: string | null) {
+  if (!pathname) return '';
+  return pathname.replace(/\/+$/u, '');
+}
+
+function isWalletIndexPath(pathname: string, financePrefix: string) {
+  const normalizedPrefix = financePrefix.replace(/\/+$/u, '');
+  if (normalizedPrefix) {
+    return pathname.endsWith(`${normalizedPrefix}/wallets`);
+  }
+
+  return pathname.endsWith('/wallets');
+}
+
+export function FinanceLayoutControls({
+  className,
+  financePrefix = '/finance',
+}: FinanceLayoutControlsProps) {
+  const pathname = normalizePathname(usePathname());
+
+  if (isWalletIndexPath(pathname, financePrefix)) {
+    return null;
+  }
+
+  return (
+    <div className={cn('mb-4 flex flex-wrap justify-end gap-2', className)}>
+      <FinanceBalanceModeToggle />
+      <FinanceNumbersVisibilityToggle />
+    </div>
+  );
+}

package/src/components/ui/finance/shared/quick-actions.tsx

@@ -91,12 +91,20 @@ export function QuickActions({
           </DropdownMenuItem>
         )}
         {canCreateWallets && (
-          <DropdownMenuItem
-            onClick={() => pushFinanceHref('/wallets?create=wallet')}
-          >
-            <Wallet className="mr-2 h-4 w-4" />
-            <span>{t('new_wallet')}</span>
-          </DropdownMenuItem>
+          <>
+            <DropdownMenuItem
+              onClick={() => pushFinanceHref('/wallets?create=wallet')}
+            >
+              <Wallet className="mr-2 h-4 w-4" />
+              <span>{t('new_wallet')}</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => pushFinanceHref('/wallets?create=credit-card')}
+            >
+              <CreditCard className="mr-2 h-4 w-4" />
+              <span>{t('new_credit_card')}</span>
+            </DropdownMenuItem>
+          </>
         )}
         {canManageFinance && (
           <DropdownMenuItem