@lotics/ui 47.6.1 → 47.7.0

package/docs/catalog.md

@@ -1045,8 +1045,11 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 - **`card_select_item`** — `CardSelectItem`: a bordered, card-shaped button; `selected` =
   persistent ring (reads as `aria-pressed`) — the org-picker / entity-switcher item.
 - **`switcher`** — `Switcher`: current-item trigger opening a popover of `MenuButton` items
-  (`SwitcherItem { id, label }`, `currentId`, `onSelect`) — the compact entity/workspace
-  switcher.
+  (`SwitcherItem { id, label, imageUri? }`, `currentId`, `onSelect`) — the compact
+  entity/workspace switcher. A square `Avatar` appears on the trigger and every row as soon as
+  ONE item carries `imageUri`, the rest falling back to initials, so an unpictured entry still
+  lines up. `minItemsToRender` defaults to 2 (a single choice is clutter); lower it to 1 where
+  the switcher states a scope the reader has no other way to see.
 - **`count`** — `Count`: a 20px count disc that grows into a pill past one digit (`color` highlight|muted|red).
 - **`shortcut_badge`** — `ShortcutBadge`: the keycap hint pill — a zinc-50 badge rendering a
   shortcut from a raw string or `ShortcutDescriptor` (⌘B on Mac, Ctrl+B elsewhere); null on
@@ -1772,7 +1775,10 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   opened the screen for. Pass `activeCount` so the collapsed button still says the list is
   filtered, and `onClearAll` to put one clear in the sheet. Compose the band with this rather
   than a hand-rolled `<View flexDirection="row">`: a hand-rolled band is the one that does not
-  collapse.
+  collapse. **A facet with nothing to offer should render `null`, and the band then draws no
+  trigger at all** — narrow as well as wide. Gate each chip on its own options (a status filter
+  whose values are all already in view, a round picker before any round is recorded) rather than
+  shipping an empty one; search and the action stay on the band either way.
 - **`filter_chip`** — `FilterChip` + `selectSummary`: the toolbar filter pill hosting a
   facet (options, a `Slider range`, a `Counter`). It draws NO bottom band of its own — the ×
   on the pill is the clear, and the editor inside brings whatever actions it has, so a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "47.6.1",
+  "version": "47.7.0",
   "type": "module",
   "exports": {
     "./accordion": "./src/accordion.tsx",

package/src/filter_band.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useState, type ReactNode } from "react";
+import { Children, createContext, useContext, useState, type ReactNode } from "react";
 import { View } from "react-native";
 import { Button } from "./button";
 import { Dialog, DialogFooter, DialogHeader, DialogHeaderTitle, DialogScrollArea } from "./dialog";
@@ -58,6 +58,14 @@ export function FilterBand(props: FilterBandProps) {
   const t = useLoticsLocale().filterBand;
   const { small } = useScreenSize();
   const [open, setOpen] = useState(false);
+  // WHETHER THERE IS ANYTHING TO COLLAPSE. `Children.toArray` drops the nulls a
+  // caller renders for a facet that has nothing to offer — a status filter whose
+  // options are all in view, a round picker before any round is recorded — so a
+  // band that draws no chips wide must not draw a button narrow. It did: the wide
+  // branch renders `children` and gets nothing, the narrow one rendered the
+  // trigger unconditionally, and the two presentations stopped agreeing at exactly
+  // the width where a control that opens an empty sheet costs the most.
+  const hasFilters = Children.toArray(children).length > 0;
 
   if (!small) {
     return (
@@ -77,14 +85,16 @@ export function FilterBand(props: FilterBandProps) {
   return (
     <View testID={testID} style={{ flexDirection: "row", alignItems: "center", gap: SPACE.sm }}>
       {search != null && <View style={{ flexGrow: 1, flexShrink: 1, minWidth: 0 }}>{search}</View>}
-      <Button
-        color="secondary"
-        title={activeCount > 0 ? `${t.filters} (${activeCount})` : t.filters}
-        onPress={() => setOpen(true)}
-        testID={testID ? `${testID}-filters` : undefined}
-      />
+      {hasFilters && (
+        <Button
+          color="secondary"
+          title={activeCount > 0 ? `${t.filters} (${activeCount})` : t.filters}
+          onPress={() => setOpen(true)}
+          testID={testID ? `${testID}-filters` : undefined}
+        />
+      )}
       {action}
-      <Dialog open={open} onOpenChange={setOpen} width="92%" maxWidth={520}>
+      <Dialog open={open && hasFilters} onOpenChange={setOpen} width="92%" maxWidth={520}>
         <DialogHeader>
           <DialogHeaderTitle>{t.filters}</DialogHeaderTitle>
         </DialogHeader>

package/src/switcher.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from "react";
 import { StyleSheet } from "react-native";
+import { Avatar } from "./avatar";
 import { Icon } from "./icon";
 import { MenuButton } from "./menu_button";
 import { PressableHighlight } from "./pressable_highlight";
@@ -12,6 +13,15 @@ import { CONTROL_HEIGHT, CONTROL_RADIUS } from "./control_surface";
 export interface SwitcherItem {
   id: string;
   label: string;
+  /**
+   * An identity image for this item. Optional, and optional PER ITEM rather than
+   * per switcher: the marks appear as soon as ONE item carries an image, and an
+   * item without one falls back to `Avatar`'s initials. Letting the mark appear
+   * only on the items that have a picture is the alternative, and it shifts every
+   * unmarked label sideways — so the one entry nobody has photographed is also the
+   * one that stops lining up with the rest of the list.
+   */
+  imageUri?: string;
 }
 
 interface SwitcherProps {
@@ -61,17 +71,29 @@ export function Switcher(props: SwitcherProps) {
     [currentId, onSelect],
   );
 
-  if (items.length < minItemsToRender) return null;
+  // `minItemsToRender` can be lowered to 1 — a switcher that always shows is how a
+  // hard scope tells the reader which one they are in — so the empty set is the
+  // only one left to answer for, and there is nothing to render for it.
+  if (items.length === 0 || items.length < minItemsToRender) return null;
 
-  const current = items.find((item) => item.id === currentId);
-  const label = current?.label ?? items[0].label;
+  const current = items.find((item) => item.id === currentId) ?? items[0];
+  const withMarks = items.some((item) => item.imageUri);
+  // The `md` rung is `CONTROL_CONTENT_HEIGHT` — what a 40px band seats, which
+  // both the trigger and a `MenuButton` row are. `square`, because the things a
+  // switcher switches BETWEEN are organizations, workspaces and projects; a disc
+  // would file them as people.
+  const mark = (item: SwitcherItem) =>
+    withMarks ? (
+      <Avatar shape="square" size="md" name={item.label} source={item.imageUri ? { uri: item.imageUri } : undefined} />
+    ) : undefined;
 
   return (
     <Popover open={open} onOpenChange={setOpen} side={side} align={align}>
       <PopoverTrigger>
         <PressableHighlight focusRing style={[styles.trigger, { maxWidth: maxTriggerWidth }]}>
+          {mark(current)}
           <Text size="sm" weight="medium" color="muted" numberOfLines={1}>
-            {label}
+            {current.label}
           </Text>
           <Icon name="chevrons-up-down" size={14} color={colors.zinc["500"]} />
         </PressableHighlight>
@@ -81,6 +103,7 @@ export function Switcher(props: SwitcherProps) {
           {items.map((item) => (
             <MenuButton
               key={item.id}
+              icon={mark(item)}
               title={item.label}
               onPress={() => handleSelect(item.id)}
               right={