@tuturuuu/ui 0.30.2 → 0.32.0

package/src/components/ui/custom/satellite-user-menu.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { User } from '@tuturuuu/icons';
+import { cn } from '@tuturuuu/utils/format';
+import { getInitials } from '@tuturuuu/utils/name-helper';
+import type { ReactNode } from 'react';
+import { Avatar, AvatarFallback, AvatarImage } from '../avatar';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../dropdown-menu';
+import { AnimatedSlotText } from './animated-slot-text';
+
+/** Shared profile trigger and menu frame; adapters supply account services and preferences. */
+export function SatelliteUserMenu({
+  name,
+  email,
+  avatarUrl,
+  secondaryLabel,
+  hideMetadata = false,
+  online = false,
+  label,
+  loading = false,
+  children,
+}: {
+  name: string;
+  email?: string | null;
+  avatarUrl?: string | null;
+  secondaryLabel?: string;
+  hideMetadata?: boolean;
+  online?: boolean;
+  label?: string;
+  loading?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          aria-label={label}
+          aria-busy={loading || undefined}
+          disabled={loading}
+          className={cn(
+            'flex h-10 w-full gap-2 rounded-md p-1 text-start transition',
+            hideMetadata
+              ? 'items-center justify-center'
+              : 'items-center justify-start hover:bg-foreground/5'
+          )}
+        >
+          <Avatar className="relative h-8 w-8 cursor-pointer overflow-visible font-semibold">
+            <AvatarImage
+              src={avatarUrl ?? undefined}
+              className="aspect-square overflow-clip rounded-lg object-cover"
+            />
+            <AvatarFallback className="rounded-lg font-semibold">
+              {name ? getInitials(name) : <User className="h-5 w-5" />}
+            </AvatarFallback>
+            {online && (
+              <div className="pointer-events-none absolute right-0 bottom-0 z-20 size-2.5 rounded-full bg-dynamic-green ring-2 ring-background" />
+            )}
+          </Avatar>
+          {!hideMetadata && (
+            <div className="flex w-full min-w-0 flex-col items-start justify-center">
+              <div className="line-clamp-1 break-all font-semibold text-sm">
+                {name}
+              </div>
+              <AnimatedSlotText
+                className="text-xs opacity-70"
+                text={secondaryLabel ?? email ?? ''}
+              />
+            </div>
+          )}
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56" side="right" align="end" forceMount>
+        <DropdownMenuLabel className="font-normal">
+          <div className="flex flex-col">
+            <span className="line-clamp-1 break-all font-medium text-sm">
+              {name}
+            </span>
+            <p className="line-clamp-1 break-all text-xs opacity-70">{email}</p>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {children}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/ui/custom/satellite-workspace-section.tsx

@@ -0,0 +1,46 @@
+import { WorkspaceSelectRevealProvider } from '@tuturuuu/ui/custom/workspace-select-reveal';
+import { cn } from '@tuturuuu/utils/format';
+import type { ReactNode } from 'react';
+
+interface SidebarWorkspaceSelectSectionProps {
+  children?: ReactNode;
+  visible: boolean;
+}
+
+/**
+ * Keeps the workspace selector in the sidebar flow while animating its height.
+ * The closed state intentionally collapses to zero so navigation keeps the
+ * same top gap in apps that do not expose a workspace selector at all.
+ */
+export function SidebarWorkspaceSelectSection({
+  children,
+  visible,
+}: SidebarWorkspaceSelectSectionProps) {
+  return (
+    <WorkspaceSelectRevealProvider revealed={visible}>
+      <div
+        aria-hidden={!visible}
+        className={cn(
+          'grid shrink-0 overflow-hidden px-2 transition-[grid-template-rows,opacity,border-color,padding] duration-200 ease-out',
+          visible
+            ? 'grid-rows-[1fr] border-b pb-2 opacity-100'
+            : 'pointer-events-none grid-rows-[0fr] border-transparent pb-0 opacity-0'
+        )}
+        data-sidebar-workspace-select
+        data-state={visible ? 'open' : 'closed'}
+        id="sidebar-workspace-selector"
+        inert={visible ? undefined : true}
+        style={{
+          // Satellite source files are outside each app's Tailwind scan root.
+          // Keep the critical height transition identical to apps/web even when
+          // arbitrary grid utilities are not emitted by a satellite build.
+          gridTemplateRows: visible ? '1fr' : '0fr',
+          transitionProperty:
+            'grid-template-rows, opacity, border-color, padding',
+        }}
+      >
+        <div className="min-h-0 overflow-hidden">{children}</div>
+      </div>
+    </WorkspaceSelectRevealProvider>
+  );
+}

package/src/components/ui/custom/settings/keyboard-shortcuts-settings.tsx

@@ -56,6 +56,8 @@ export function KeyboardShortcutsSettings() {
   const { modKey, modKeyAlt } = usePlatform();
 
   const globalRows: ShortcutRow[] = [
+    { label: t('open_commands'), keys: [[modKey, 'K']] },
+    { label: t('open_apps'), keys: [[modKey, 'Shift', 'K']] },
     {
       label: t('open_settings'),
       keys: [[modKey, ',']],
@@ -100,6 +102,20 @@ export function KeyboardShortcutsSettings() {
   return (
     <div className="space-y-6">
       <ShortcutGroup rows={globalRows} title={t('global')} />
+      <ShortcutGroup
+        title={t('calendar_views')}
+        rows={[
+          { label: t('calendar_day'), keys: [['D']] },
+          { label: t('calendar_four_days'), keys: [['4']] },
+          { label: t('calendar_week'), keys: [['W']] },
+          { label: t('calendar_month'), keys: [['M']] },
+          { label: t('calendar_year'), keys: [['Y']] },
+          { label: t('calendar_agenda'), keys: [['A']] },
+        ]}
+      />
+      <p className="text-muted-foreground text-sm">
+        {t('page_shortcuts_hint')}
+      </p>
       <ShortcutGroup rows={dialogRows} title={t('settings_dialog')} />
     </div>
   );