@flamingo-stack/openframe-frontend-core 0.0.838 → 0.0.840

package/src/components/features/software/update-settings-fields.tsx

@@ -0,0 +1,265 @@
+'use client';
+
+import { InfoCircleIcon } from '../../icons-v2-generated';
+import {
+  Alert,
+  CheckboxBlock,
+  Label,
+  RadioGroupBlock,
+  type RadioGroupBlockOption,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../ui';
+
+/** What an update does on a device where the app is running. */
+export type SoftwareUpdateMode = 'WAIT' | 'FORCE';
+
+/** "If the app is running": one update's behaviour on a device where the app is open. */
+export interface SoftwareUpdatePolicy {
+  mode: SoftwareUpdateMode;
+  /** WAIT only: "Countdown after the deadline". Off, the update waits for the user however long it takes. */
+  deadlineEnabled: boolean;
+  /** WAIT only: seconds after the first try before the countdown starts. */
+  deadlineSeconds: number;
+  /** Seconds of countdown before the app is closed: after the deadline (WAIT) or right away (FORCE). */
+  countdownSeconds: number;
+}
+
+/** The Update Software form's "Update Settings": this update, and whether later releases follow it. */
+export interface SoftwareUpdateSettingsValues {
+  policy: SoftwareUpdatePolicy;
+  /** "Keep it auto-updated": every new version is installed on the same devices after this update. */
+  autoUpdate: boolean;
+  /** "Same settings for auto-update": auto-updates run with `policy`; off, with `autoUpdatePolicy`. */
+  sameForAutoUpdate: boolean;
+  autoUpdatePolicy: SoftwareUpdatePolicy;
+}
+
+const DAY = 24 * 60 * 60;
+const MINUTE = 60;
+
+export const SOFTWARE_UPDATE_DEADLINE_OPTIONS: ReadonlyArray<{ seconds: number; label: string }> = [
+  { seconds: DAY, label: '1 day after the first try' },
+  { seconds: 3 * DAY, label: '3 days after the first try' },
+  { seconds: 7 * DAY, label: '7 days after the first try' },
+  { seconds: 14 * DAY, label: '14 days after the first try' },
+  { seconds: 30 * DAY, label: '30 days after the first try' },
+];
+
+export const SOFTWARE_UPDATE_COUNTDOWN_OPTIONS: ReadonlyArray<{ seconds: number; label: string }> = [
+  { seconds: MINUTE, label: '1 minute' },
+  { seconds: 5 * MINUTE, label: '5 minutes' },
+  { seconds: 15 * MINUTE, label: '15 minutes' },
+  { seconds: 30 * MINUTE, label: '30 minutes' },
+];
+
+/** Wait & notify, a countdown 7 days after the first try, 5 minutes long: what the server applies when sent none. */
+export const DEFAULT_SOFTWARE_UPDATE_POLICY: SoftwareUpdatePolicy = {
+  mode: 'WAIT',
+  deadlineEnabled: true,
+  deadlineSeconds: 7 * DAY,
+  countdownSeconds: 5 * MINUTE,
+};
+
+export const DEFAULT_SOFTWARE_UPDATE_SETTINGS: SoftwareUpdateSettingsValues = {
+  policy: DEFAULT_SOFTWARE_UPDATE_POLICY,
+  autoUpdate: true,
+  sameForAutoUpdate: true,
+  autoUpdatePolicy: DEFAULT_SOFTWARE_UPDATE_POLICY,
+};
+
+const MODE_OPTIONS: RadioGroupBlockOption[] = [
+  {
+    value: 'WAIT',
+    label: 'Wait & notify',
+    description: 'The user gets Update now or Ask Later. If they close the app, it updates then.',
+  },
+  {
+    value: 'FORCE',
+    label: 'Force Update',
+    description: 'The user gets a short countdown, then the app closes and updates.',
+  },
+];
+
+const SAME_SETTINGS_DESCRIPTION: Record<SoftwareUpdateMode, string> = {
+  WAIT: 'Auto-updates follow "If the app is running" above. Uncheck to set them separately.',
+  FORCE: 'Later releases will also be force-updated.',
+};
+
+const groupLabelClass = 'text-h5 text-ods-text-secondary';
+
+function SecondsSelect({
+  label,
+  value,
+  options,
+  onChange,
+}: {
+  label: string;
+  value: number;
+  options: ReadonlyArray<{ seconds: number; label: string }>;
+  onChange: (seconds: number) => void;
+}) {
+  return (
+    <div className="flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]">
+      <Label className="text-h4">{label}</Label>
+      <Select value={String(value)} onValueChange={next => onChange(Number(next))}>
+        <SelectTrigger aria-label={label}>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {options.map(option => (
+            <SelectItem key={option.seconds} value={String(option.seconds)}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}
+
+/** "If the app is running" with its deadline and countdown. */
+function UpdatePolicyFields({
+  name,
+  label,
+  policy,
+  onChange,
+}: {
+  /** The radio group's name: two policies on one page must not share it. */
+  name: string;
+  label: string;
+  policy: SoftwareUpdatePolicy;
+  onChange: (policy: SoftwareUpdatePolicy) => void;
+}) {
+  const waits = policy.mode === 'WAIT';
+  const deadline = waits && policy.deadlineEnabled;
+  const countdown = (
+    <SecondsSelect
+      label="Countdown"
+      value={policy.countdownSeconds}
+      options={SOFTWARE_UPDATE_COUNTDOWN_OPTIONS}
+      onChange={countdownSeconds => onChange({ ...policy, countdownSeconds })}
+    />
+  );
+  return (
+    <div className="flex flex-col gap-[var(--spacing-system-m)]">
+      <div className="flex flex-col gap-[var(--spacing-system-xxs)]">
+        <span className={groupLabelClass}>{label}</span>
+        <RadioGroupBlock
+          name={name}
+          aria-label={label}
+          variant="grouped"
+          value={policy.mode}
+          onValueChange={mode => onChange({ ...policy, mode: mode as SoftwareUpdateMode })}
+          options={MODE_OPTIONS}
+          itemClassName="py-[var(--spacing-system-sf)]"
+        />
+      </div>
+      {waits ? (
+        <div className="flex flex-col gap-[var(--spacing-system-xsf)]">
+          <CheckboxBlock
+            id={`${name}-deadline`}
+            checked={policy.deadlineEnabled}
+            onCheckedChange={deadlineEnabled => onChange({ ...policy, deadlineEnabled })}
+            label="Countdown after the deadline"
+            description="If the update still isn’t installed by the deadline, the user gets a countdown and then it installs."
+          />
+          {deadline && (
+            <div className="grid grid-cols-1 gap-[var(--spacing-system-lf)] content-md:grid-cols-3 content-md:items-start">
+              <SecondsSelect
+                label="Deadline"
+                value={policy.deadlineSeconds}
+                options={SOFTWARE_UPDATE_DEADLINE_OPTIONS}
+                onChange={deadlineSeconds => onChange({ ...policy, deadlineSeconds })}
+              />
+              {countdown}
+            </div>
+          )}
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 gap-[var(--spacing-system-lf)] content-md:grid-cols-3">{countdown}</div>
+      )}
+    </div>
+  );
+}
+
+export interface SoftwareUpdateSettingsFieldsProps {
+  value: SoftwareUpdateSettingsValues;
+  onChange: (value: SoftwareUpdateSettingsValues) => void;
+}
+
+/**
+ * Update Software's "Update Settings" (design 988:21462, the separate auto-update
+ * rules 1034:8173): what happens on a device where the app is running, and
+ * whether later releases are installed the same way.
+ */
+export function SoftwareUpdateSettingsFields({ value, onChange }: SoftwareUpdateSettingsFieldsProps) {
+  return (
+    <section aria-labelledby="software-update-settings" className="flex flex-col gap-[var(--spacing-system-l)]">
+      <h2 id="software-update-settings" className="pt-[var(--spacing-system-l)] text-ods-text-primary text-h2">
+        Update Settings
+      </h2>
+
+      <UpdatePolicyFields
+        name="updatePolicy"
+        label="If the app is running"
+        policy={value.policy}
+        onChange={policy => onChange({ ...value, policy })}
+      />
+
+      <div className="flex flex-col gap-[var(--spacing-system-xxs)]">
+        <span className={groupLabelClass}>Auto-update</span>
+        <div className="flex flex-col gap-[var(--spacing-system-sf)]">
+          <CheckboxBlock
+            id="software-auto-update"
+            checked={value.autoUpdate}
+            onCheckedChange={autoUpdate => onChange({ ...value, autoUpdate })}
+            label="Keep it auto-updated"
+            description="After this update, OpenFrame installs each new version from Winget or Brew on the selected devices. When off, only this update runs."
+          />
+          {value.autoUpdate && (
+            <>
+              <CheckboxBlock
+                id="software-auto-update-same"
+                checked={value.sameForAutoUpdate}
+                onCheckedChange={sameForAutoUpdate => onChange({ ...value, sameForAutoUpdate })}
+                label="Same settings for auto-update"
+                description={SAME_SETTINGS_DESCRIPTION[value.policy.mode]}
+              />
+              {!value.sameForAutoUpdate && (
+                <div className="rounded-[6px] border border-ods-border p-[var(--spacing-system-m)]">
+                  <UpdatePolicyFields
+                    name="autoUpdatePolicy"
+                    label="For auto-updates"
+                    policy={value.autoUpdatePolicy}
+                    onChange={autoUpdatePolicy => onChange({ ...value, autoUpdatePolicy })}
+                  />
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Core Alert on the card surface, as a note: it is there from the start, nothing to announce. The icon sits in
+          a span so Alert's `[&>svg]` positioning does not apply. */}
+      <Alert
+        role="note"
+        className="flex items-center gap-[var(--spacing-system-m)] rounded-[6px] border-ods-border bg-ods-card p-[var(--spacing-system-m)]"
+      >
+        <span className="shrink-0 text-ods-text-secondary">
+          <InfoCircleIcon size={24} color="currentColor" />
+        </span>
+        <div className="flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]">
+          <p className="text-ods-text-primary text-h3">Apps installed by hand get reinstalled</p>
+          <p className="text-ods-text-secondary text-h6">
+            On the first update, OpenFrame reinstalls them with Winget or Brew so it can keep them updated.
+          </p>
+        </div>
+      </Alert>
+    </section>
+  );
+}

package/src/components/help-center-pages/download-apps-page.tsx

@@ -7,7 +7,7 @@
  *     lists its platforms; it does not hide them behind tabs, so nothing moves
  *     when a visitor looks for another system). In a card the installer is THE
  *     action (the other architecture is a quieter button) and each package
- *     manager is one line under it, with its copy button.
+ *     manager is one row under it, with its copy button.
  *   - The mobile app: the store badges, and the install QR code beside them. The
  *     code and the address it encodes are the server's (`mobile.install`): the
  *     website's install link, which the server answers with a redirect to the
@@ -111,7 +111,7 @@ export interface DownloadAppsWebOption {
 
 const SECTIONS_CLASS = 'flex flex-col gap-[var(--spacing-system-xlf)]';
 const SECTION_CLASS = 'flex flex-col gap-[var(--spacing-system-lf)]';
-const CARDS_GRID_CLASS = 'grid grid-cols-1 gap-[var(--spacing-system-lf)] content-md:grid-cols-2';
+const CARDS_GRID_CLASS = 'grid grid-cols-1 gap-[var(--spacing-system-lf)] content-lg:grid-cols-2';
 /** One card takes the row; two or more share it. */
 const cardsGridClass = (cards: number) => (cards > 1 ? CARDS_GRID_CLASS : 'grid grid-cols-1');
 const CARD_CLASS =
@@ -183,7 +183,7 @@ function installerLabel(download: AppDownload, siblings: number): string {
   return siblings > 1 && architecture ? `${label} (${architecture})` : label;
 }
 
-/** One system's card: its logo and name, its installers side by side, then each package manager as one line. */
+/** One system's card: its logo and name, its installers side by side, then each package manager as one row. */
 function SystemCard({
   system,
   onDownloadAction,
@@ -243,8 +243,7 @@ function SystemCard({
                 key={row.id}
                 title={row.label ?? undefined}
                 command={row.command}
-                maxLines={1}
-                commandClassName="text-ods-accent"
+                commandClassName="break-words text-ods-accent"
                 copyAriaLabel={`Copy the ${row.label ?? 'install'} command`}
                 onCopy={() => {
                   void copy(row.command as string);

package/src/components/navigation/account-popover.tsx

@@ -2,9 +2,11 @@
 
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import type { ReactNode } from 'react';
+import { useClippedLabelTooltip } from '../../hooks/ui/use-clipped-label-tooltip';
 import { cn } from '../../utils';
 import { Chevron02DownIcon } from '../icons-v2-generated';
 import { ActionsMenuDropdown, type ActionsMenuGroup, type ActionsMenuItem } from '../ui/actions-menu';
+import { FloatingTooltip } from '../ui/floating-tooltip';
 import { SquareAvatar } from '../ui/square-avatar';
 import { UnreadCountBadge, UnreadDot } from './unread-dot';
 
@@ -124,6 +126,11 @@ export function AccountPopover({
   className,
 }: AccountPopoverProps) {
   const unread = items.some(entry => entry.type !== 'divider' && (entry.count ?? 0) > 0);
+  // The name and subtitle a narrow sidebar clips: their full text in a tooltip
+  // over them, only while clipped and where a pointer can hover. The rail's
+  // tooltip is the trigger's `title`.
+  const { ref: nameRef, enabled: nameTooltip } = useClippedLabelTooltip<HTMLSpanElement>(name);
+  const { ref: subtitleRef, enabled: subtitleTooltip } = useClippedLabelTooltip<HTMLSpanElement>(subtitle);
   const [open = false, setOpen] = useControllableState({
     prop: openProp,
     defaultProp: false,
@@ -182,14 +189,36 @@ export function AccountPopover({
             {/* The chevron follows the name, so it reads as this row's menu and not
                 as one more of the buttons a host sets at the row's end. */}
             <span className="flex min-w-0 items-center gap-[var(--spacing-system-xxs)]">
-              <span className="truncate text-ods-text-primary text-h4">{name}</span>
+              <FloatingTooltip
+                content={name}
+                side="top"
+                as="span"
+                disabled={collapsed || !nameTooltip}
+                triggerClassName="min-w-0"
+              >
+                <span ref={nameRef} className="block truncate text-ods-text-primary text-h4">
+                  {name}
+                </span>
+              </FloatingTooltip>
               <Chevron02DownIcon
                 size={16}
                 className="shrink-0 text-ods-text-secondary transition-transform duration-200 group-data-[state=open]/account:rotate-180"
                 aria-hidden="true"
               />
             </span>
-            {subtitle && <span className="truncate text-ods-text-secondary text-code">{subtitle}</span>}
+            {subtitle && (
+              <FloatingTooltip
+                content={subtitle}
+                side="top"
+                as="span"
+                disabled={collapsed || !subtitleTooltip}
+                triggerClassName="min-w-0"
+              >
+                <span ref={subtitleRef} className="block truncate text-ods-text-secondary text-code">
+                  {subtitle}
+                </span>
+              </FloatingTooltip>
+            )}
           </span>
         </button>
       }

package/src/components/navigation/app-layout-side-panel.tsx

@@ -13,7 +13,7 @@ import {
 import { useIsomorphicLayoutEffect } from '../../hooks/ui/use-isomorphic-layout-effect';
 import { breakpoints, useMediaQuery } from '../../hooks/ui/use-media-query';
 import { cn } from '../../utils/cn';
-import { Menu01Icon } from '../icons-v2-generated';
+import { PanelResizeGrip } from '../ui/panel-resize-handle';
 
 /**
  * - `docked`: a column beside the content, resizable.
@@ -523,12 +523,7 @@ function SidePanelResizeHandle({ state, label, controls }: SidePanelResizeHandle
       onKeyDown={handleKeyDown}
       className="group absolute inset-y-0 left-0 z-10 flex w-4 -translate-x-1/2 cursor-col-resize touch-none select-none items-center justify-center outline-none"
     >
-      <span
-        aria-hidden
-        className="flex h-8 w-4 items-center justify-center rounded-sm border border-ods-border bg-ods-card text-ods-text-secondary transition-colors group-hover:border-ods-border-hover group-focus-visible:border-ods-accent group-focus-visible:text-ods-accent"
-      >
-        <Menu01Icon size={12} />
-      </span>
+      <PanelResizeGrip />
     </div>
   );
 }

package/src/components/navigation/navigation-sidebar-grouped.tsx

@@ -2,9 +2,11 @@
 
 import { cloneElement, isValidElement, type MouseEvent, type ReactNode, useId, useState } from 'react';
 import Link from '../../embed-shims/next-link';
+import { useClippedLabelTooltip } from '../../hooks/ui/use-clipped-label-tooltip';
 import type { NavigationSidebarItem } from '../../types/navigation';
 import { cn } from '../../utils';
 import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { FloatingTooltip } from '../ui/floating-tooltip';
 import { NavigationItemBadge } from './navigation-item-badge';
 import { UnreadDot } from './unread-dot';
 
@@ -150,8 +152,15 @@ function RowEnd({ count }: { count: number }) {
   return count > 0 ? <CountPill count={count} className="ml-auto" /> : null;
 }
 
-function RowLabel({ item }: { item: NavigationSidebarItem }) {
+/**
+ * The row's label column. A label the expanded sidebar clips (a narrow width,
+ * a long label) shows its full text in a tooltip over it, as `TruncateText`
+ * offers it — only while it IS clipped, and only where a pointer can hover.
+ * The rail (`showLabel` false) has its own: the row's `title`.
+ */
+function RowLabel({ item, showLabel = true }: { item: NavigationSidebarItem; showLabel?: boolean }) {
   const unreadCount = item.unreadCount ?? 0;
+  const { ref: labelRef, enabled: labelTooltip } = useClippedLabelTooltip<HTMLSpanElement>(item.label);
   return (
     <span
       className={cn(
@@ -159,7 +168,17 @@ function RowLabel({ item }: { item: NavigationSidebarItem }) {
         EXPANDED_ONLY,
       )}
     >
-      <span className="min-w-0 truncate text-h4">{item.label}</span>
+      <FloatingTooltip
+        content={item.label}
+        side="top"
+        as="span"
+        disabled={!showLabel || !labelTooltip}
+        triggerClassName="min-w-0"
+      >
+        <span ref={labelRef} className="block min-w-0 truncate text-h4">
+          {item.label}
+        </span>
+      </FloatingTooltip>
       {item.badge && <NavigationItemBadge label={item.badge} compact />}
       <RowEnd count={unreadCount} />
     </span>
@@ -204,7 +223,7 @@ function GroupedLeafRow({
   const content = (
     <>
       <RowIcon item={item} size={20} className={lit ? 'text-ods-accent' : idleIcon('row')} />
-      <RowLabel item={item} />
+      <RowLabel item={item} showLabel={showLabel} />
     </>
   );
   const shared = {
@@ -248,6 +267,8 @@ function GroupedChildRow({
 }) {
   const name = accessibleName(item);
   const lit = isActive && !disabled;
+  // The clipped label's tooltip, as `RowLabel` offers it.
+  const { ref: labelRef, enabled: labelTooltip } = useClippedLabelTooltip<HTMLSpanElement>(item.label);
   const className = cn(
     // The icon column flush, under the parent's icon at both widths.
     'group/nav-child relative flex h-11 w-full items-stretch gap-[var(--spacing-system-xxs)] rounded-md text-left',
@@ -276,7 +297,17 @@ function GroupedChildRow({
           !lit && !disabled && isPending && 'after:opacity-100',
         )}
       >
-        <span className="min-w-0 truncate text-h4">{item.label}</span>
+        <FloatingTooltip
+          content={item.label}
+          side="top"
+          as="span"
+          disabled={!showLabel || !labelTooltip}
+          triggerClassName="min-w-0"
+        >
+          <span ref={labelRef} className="block min-w-0 truncate text-h4">
+            {item.label}
+          </span>
+        </FloatingTooltip>
         {item.badge && <NavigationItemBadge label={item.badge} compact />}
         <RowEnd count={item.unreadCount ?? 0} />
       </span>
@@ -365,7 +396,7 @@ function GroupedGroup({
         )}
       >
         <RowIcon item={item} size={20} className={lit ? 'text-ods-accent' : idleIcon('row')} />
-        <RowLabel item={item} />
+        <RowLabel item={item} showLabel={showLabel} />
       </button>
       <div
         id={groupDomId}
@@ -517,7 +548,7 @@ export function NavigationSidebarActionRow({
   const content = (
     <>
       <RowIcon item={entry} size={20} className={lit || (outline && !disabled) ? 'text-ods-accent' : idleIcon('row')} />
-      <RowLabel item={entry} />
+      <RowLabel item={entry} showLabel={!minimized} />
     </>
   );
   const shared = { className: classes, title: minimized ? name : undefined, 'aria-label': name };

package/src/components/navigation/navigation-sidebar-item.tsx

@@ -2,10 +2,12 @@
 
 import { cloneElement, memo, type ReactElement, type ReactNode, type MouseEvent } from 'react';
 import Link from '../../embed-shims/next-link';
+import { useClippedLabelTooltip } from '../../hooks/ui/use-clipped-label-tooltip';
 import type { NavigationSidebarItem } from '../../types/navigation';
 import { cn } from '../../utils';
 import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { BUTTON_KIND_CLASS, Button } from '../ui/button';
+import { FloatingTooltip } from '../ui/floating-tooltip';
 import { useLoadingScope } from '../ui/loading-scope';
 import { NavigationItemBadge } from './navigation-item-badge';
 import { UnreadDot } from './unread-dot';
@@ -76,6 +78,11 @@ function LoadedNavigationSidebarItemButton({
   // The accessible name carries the stamp — "Devices (Beta)" — because `aria-label`
   // replaces the content; the rail's tooltip is the same string.
   const name = item.badge ? `${item.label} (${item.badge})` : item.label;
+  // A label the expanded sidebar clips (a narrow width, a long label): its full
+  // text in a tooltip over it, as `TruncateText` offers it — only while it IS
+  // clipped, since a label that fits would only repeat itself, and only where a
+  // pointer can hover. The rail's tooltip is the row's `title` below.
+  const { ref: labelRef, enabled: labelTooltip } = useClippedLabelTooltip<HTMLSpanElement>(item.label);
 
   const content: ReactNode = (
     <>
@@ -98,7 +105,17 @@ function LoadedNavigationSidebarItemButton({
         )}
         aria-hidden={!showLabel}
       >
-        <span className="min-w-0 truncate text-h4">{item.label}</span>
+        <FloatingTooltip
+          content={item.label}
+          side="top"
+          as="span"
+          disabled={!showLabel || !labelTooltip}
+          triggerClassName="min-w-0"
+        >
+          <span ref={labelRef} className="block min-w-0 truncate text-h4">
+            {item.label}
+          </span>
+        </FloatingTooltip>
         {item.badge && <NavigationItemBadge label={item.badge} className="ml-[var(--spacing-system-xs)] shrink-0" />}
       </span>