@drakkar.software/octospaces-ui 0.4.2 → 0.4.3

package/dist/index.d.ts

@@ -649,12 +649,13 @@ declare function SidebarItem({ label, icon, active, badge, onPress, onLongPress,
  * Headless themed space-switcher component.
  *
  * Renders a trigger button (active-space avatar + name + chevron) that opens a
- * dropdown listing all spaces with per-row selection, a "join or create" action,
+ * dropdown listing all spaces with per-row selection (+ optional unread badges),
+ * a "see all" overflow row, a "join or create" action, a "browse spaces" action,
  * optional space settings, and an app-provided footer slot (account section, etc.).
  *
  * The popup container (Popover on desktop, Sheet on mobile) is fully delegated to
  * the host via `renderContainer` so this package stays free of modal dependencies.
- * Avatars and icons are delegated via render-props for the same reason.
+ * Avatars, icons and badges are delegated via render-props for the same reason.
  *
  * @example
  * ```tsx
@@ -674,13 +675,34 @@ declare function SidebarItem({ label, icon, active, badge, onPress, onLongPress,
  *   )}
  *   renderIcon={(name, size, color) => <Icon name={SWITCHER_ICON[name]} size={size} color={color} />}
  *   renderContainer={({ isOpen, onClose, anchorRef, children }) => (
- *     <>
- *       <Popover visible={isOpen} onClose={onClose} anchorRef={anchorRef} placement="bottom-start" width={240}>
- *         {children}
- *       </Popover>
- *     </>
+ *     <Popover visible={isOpen} onClose={onClose} anchorRef={anchorRef} placement="bottom-start" width={240}>
+ *       {children}
+ *     </Popover>
  *   )}
- *   footerSlot={<AccountSwitcher onRequestClose={...} onViewProfile={...} />}
+ *   footerSlot={(close) => <AccountSwitcher onRequestClose={close} onViewProfile={...} />}
+ * />
+ *
+ * // OctoChat — appbar variant with bottom Sheet, overflow + badges
+ * <SpaceSwitcher
+ *   spaces={spaces}
+ *   activeId={activeId}
+ *   onSelect={(id) => { tapFeedback(); setActiveId(id); }}
+ *   onAdd={() => router.push('/join')}
+ *   onBrowse={() => router.push('/spaces/explore')}
+ *   onSettings={() => router.push(`/space/${activeId}`)}
+ *   maxVisible={5}
+ *   onSeeAll={() => router.push('/spaces')}
+ *   seeAllLabel="See all spaces"
+ *   variant="appbar"
+ *   renderTriggerAvatar={(space, size) => <Avatar label={space?.short ?? ''} image={space?.image} size={size} />}
+ *   renderSpaceAvatar={(space, size) => <Avatar label={space.short ?? ''} image={space.image} size={size} />}
+ *   renderIcon={(name, size, color) => <Icon name={SWITCHER_ICON[name]} size={size} color={color} />}
+ *   renderBadge={(count) => <Badge count={count} />}
+ *   renderTriggerBadge={() => <UnreadDot />}
+ *   renderContainer={({ isOpen, onClose, children }) => (
+ *     <BottomSheet visible={isOpen} onClose={onClose}>{children}</BottomSheet>
+ *   )}
+ *   footerSlot={(close) => <AccountSwitcher onRequestClose={close} onViewProfile={...} />}
  * />
  * ```
  */
@@ -693,9 +715,11 @@ interface SwitcherSpace {
     short?: string;
     /** Uploaded space image URI; absent → host renders monogram. */
     image?: string;
+    /** Unread message count displayed as a badge on the row. */
+    unread?: number;
 }
 /** Icon name union for the switcher's built-in glyphs. */
-type SwitcherIconName = 'chevron-down' | 'check' | 'plus' | 'gear';
+type SwitcherIconName = 'chevron-down' | 'chevron-right' | 'check' | 'plus' | 'gear' | 'globe';
 interface SpaceSwitcherProps {
     spaces: SwitcherSpace[];
     activeId?: string | null;
@@ -705,6 +729,10 @@ interface SpaceSwitcherProps {
     onAdd?: () => void;
     /** Override the add-row label. @default "Join or create a space" */
     addLabel?: string;
+    /** "Browse spaces" action (e.g. a public directory). Omit to hide the row. */
+    onBrowse?: () => void;
+    /** Override the browse-row label. @default "Browse spaces" */
+    browseLabel?: string;
     /**
      * "Space settings" action. Only shown when both `onSettings` and `activeId`
      * are provided. Omit to hide.
@@ -712,6 +740,17 @@ interface SpaceSwitcherProps {
     onSettings?: () => void;
     /** Override the settings-row label. @default "Space settings" */
     settingsLabel?: string;
+    /**
+     * When set, limits how many space rows are rendered inline.
+     * If `spaces.length > maxVisible` AND `onSeeAll` is also set, a "See all"
+     * row is appended after the visible rows. Without `onSeeAll`, overflow rows
+     * are simply hidden.
+     */
+    maxVisible?: number;
+    /** Called when the user taps the "See all" overflow row. */
+    onSeeAll?: () => void;
+    /** Override the see-all-row label. @default "See all spaces" */
+    seeAllLabel?: string;
     /**
      * Visual variant:
      * - `'sidebar'` — compact left-aligned trigger for the desktop sidebar header.
@@ -735,6 +774,11 @@ interface SpaceSwitcherProps {
      * Omit to render nothing in the avatar slot.
      */
     renderTriggerAvatar?: (space: SwitcherSpace | null, size: number) => React.ReactNode;
+    /**
+     * Render an overlay node anchored top-right of the trigger avatar — used for
+     * an "other spaces have unread" aggregate indicator. Omit to hide the overlay.
+     */
+    renderTriggerBadge?: () => React.ReactNode;
     /**
      * Render a space row's leading avatar.
      * Receives the `SwitcherSpace` and a pixel size.
@@ -742,35 +786,23 @@ interface SpaceSwitcherProps {
      */
     renderSpaceAvatar?: (space: SwitcherSpace, size: number) => React.ReactNode;
     /**
-     * Render an icon glyph. Name is one of `'chevron-down' | 'check' | 'plus' | 'gear'`.
+     * Render an icon glyph. Name is one of the `SwitcherIconName` union values.
      * Omit to hide chevron, check, and action icons (spaces remain selectable).
      */
     renderIcon?: (name: SwitcherIconName, size: number, color: string) => React.ReactNode;
     /**
-     * Footer rendered below the space list + action rows — use for account-switcher
-     * sections (with separator if needed). Fully app-owned.
+     * Render an unread-count badge on a space row.
+     * Receives the count (always > 0 when called). Omit to hide badges.
      */
-    footerSlot?: React.ReactNode;
+    renderBadge?: (count: number) => React.ReactNode;
     /**
-     * When provided, replaces the default "open dropdown" behaviour on trigger press.
-     * The chevron is also hidden. Use this to navigate directly to a space-details
-     * page instead of opening a picker — e.g. on desktop where a rail handles
-     * switching and a dropdown is redundant.
-     *
-     * @example
-     * ```tsx
-     * // Navigate to space details instead of opening the picker (desktop sidebar)
-     * <SpaceSwitcher
-     *   onTriggerPress={() => router.push(`/space/${activeId}`)}
-     *   // renderContainer still required but never called when onTriggerPress is set
-     *   renderContainer={() => null}
-     *   ...
-     * />
-     * ```
+     * Footer rendered below the space list + action rows — use for account-switcher
+     * sections. Receives `close` so the account section can dismiss the dropdown after
+     * an action (e.g. `<AccountSwitcher onRequestClose={close} />`). Fully app-owned.
      */
-    onTriggerPress?: () => void;
+    footerSlot?: (close: () => void) => React.ReactNode;
 }
-declare function SpaceSwitcher({ spaces, activeId, onSelect, onAdd, addLabel, onSettings, settingsLabel, variant, renderContainer, renderTriggerAvatar, renderSpaceAvatar, renderIcon, footerSlot, onTriggerPress, }: SpaceSwitcherProps): React.JSX.Element;
+declare function SpaceSwitcher({ spaces, activeId, onSelect, onAdd, addLabel, onBrowse, browseLabel, onSettings, settingsLabel, maxVisible, onSeeAll, seeAllLabel, variant, renderContainer, renderTriggerAvatar, renderTriggerBadge, renderSpaceAvatar, renderIcon, renderBadge, footerSlot, }: SpaceSwitcherProps): React.JSX.Element;
 
 /**
  * Full-screen scrim overlay that centers its content. Tapping the backdrop, the

package/dist/index.js

@@ -1059,15 +1059,21 @@ function SpaceSwitcher({
   onSelect,
   onAdd,
   addLabel = "Join or create a space",
+  onBrowse,
+  browseLabel = "Browse spaces",
   onSettings,
   settingsLabel = "Space settings",
+  maxVisible,
+  onSeeAll,
+  seeAllLabel = "See all spaces",
   variant,
   renderContainer,
   renderTriggerAvatar,
+  renderTriggerBadge,
   renderSpaceAvatar,
   renderIcon,
-  footerSlot,
-  onTriggerPress
+  renderBadge,
+  footerSlot
 }) {
   const theme = useOctoSpacesTheme();
   const { colors, type: typeScale, fonts, spacing: sp, radii } = theme;
@@ -1084,10 +1090,18 @@ function SpaceSwitcher({
     close();
     onAdd?.();
   };
+  const handleBrowse = () => {
+    close();
+    onBrowse?.();
+  };
   const handleSettings = () => {
     close();
     onSettings?.();
   };
+  const handleSeeAll = () => {
+    close();
+    onSeeAll?.();
+  };
   const sp1 = sp["1"] ?? 4;
   const sp2 = sp["2"] ?? 8;
   const sp3 = sp["3"] ?? 12;
@@ -1098,7 +1112,9 @@ function SpaceSwitcher({
   const bodyLine = typeScale["callout"]?.lineHeight ?? 18;
   const labelSize = typeScale["caption"]?.size ?? 11;
   const labelLine = typeScale["caption"]?.lineHeight ?? 16;
-  const triggerStyle = variant === "sidebar" ? {
+  const overflow = maxVisible != null && onSeeAll != null && spaces.length > maxVisible;
+  const visibleSpaces = overflow ? spaces.slice(0, maxVisible) : spaces;
+  const baseStyle = variant === "sidebar" ? {
     flex: 1,
     flexDirection: "row",
     alignItems: "center",
@@ -1106,8 +1122,7 @@ function SpaceSwitcher({
     paddingHorizontal: sp2,
     paddingVertical: sp1 + 2,
     borderRadius: radMd,
-    minWidth: 0,
-    backgroundColor: triggerHovered ? colors.primarySubtle ?? "rgba(0,0,0,0.05)" : "transparent"
+    minWidth: 0
   } : {
     flexDirection: "row",
     alignItems: "center",
@@ -1115,8 +1130,7 @@ function SpaceSwitcher({
     gap: sp2,
     paddingHorizontal: sp2,
     paddingVertical: sp1,
-    borderRadius: radMd,
-    backgroundColor: triggerHovered ? colors.primarySubtle ?? "rgba(0,0,0,0.05)" : "transparent"
+    borderRadius: radMd
   };
   const dropdownContent = /* @__PURE__ */ React10.createElement(View8, { style: { paddingVertical: sp1 } }, spaces.length > 0 ? /* @__PURE__ */ React10.createElement(
     SectionLabel,
@@ -1129,7 +1143,7 @@ function SpaceSwitcher({
       paddingH: sp4,
       paddingV: sp1
     }
-  ) : null, spaces.map((s) => /* @__PURE__ */ React10.createElement(
+  ) : null, visibleSpaces.map((s) => /* @__PURE__ */ React10.createElement(
     SpaceRow,
     {
       key: s.id,
@@ -1138,6 +1152,23 @@ function SpaceSwitcher({
       onPress: () => handleSelect(s.id),
       renderAvatar: renderSpaceAvatar,
       renderIcon,
+      renderBadge,
+      colors,
+      bodyFont,
+      bodySize,
+      bodyLine,
+      sp2,
+      sp3,
+      sp4,
+      radMd
+    }
+  )), overflow ? /* @__PURE__ */ React10.createElement(
+    ActionRow,
+    {
+      label: seeAllLabel,
+      iconName: "chevron-right",
+      onPress: handleSeeAll,
+      renderIcon,
       colors,
       bodyFont,
       bodySize,
@@ -1147,7 +1178,7 @@ function SpaceSwitcher({
       sp4,
       radMd
     }
-  )), onAdd ? /* @__PURE__ */ React10.createElement(
+  ) : null, onAdd ? /* @__PURE__ */ React10.createElement(
     ActionRow,
     {
       label: spaces.length > 0 ? addLabel : "Create your first space",
@@ -1163,6 +1194,22 @@ function SpaceSwitcher({
       sp4,
       radMd
     }
+  ) : null, onBrowse ? /* @__PURE__ */ React10.createElement(
+    ActionRow,
+    {
+      label: browseLabel,
+      iconName: "globe",
+      onPress: handleBrowse,
+      renderIcon,
+      colors,
+      bodyFont,
+      bodySize,
+      bodyLine,
+      sp2,
+      sp3,
+      sp4,
+      radMd
+    }
   ) : null, onSettings && active ? /* @__PURE__ */ React10.createElement(
     ActionRow,
     {
@@ -1189,7 +1236,7 @@ function SpaceSwitcher({
         marginHorizontal: sp2
       }
     }
-  ), footerSlot) : null);
+  ), footerSlot(close)) : null);
   return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(
     Pressable6,
     {
@@ -1198,12 +1245,17 @@ function SpaceSwitcher({
       accessibilityLabel: active ? `${active.name} \u2014 switch space` : "Switch space",
       accessibilityState: { expanded: open },
       hitSlop: 6,
-      onPress: onTriggerPress ?? (() => setOpen(true)),
+      onPress: () => setOpen(true),
       onMouseEnter: () => setTriggerHovered(true),
       onMouseLeave: () => setTriggerHovered(false),
-      style: triggerStyle
+      style: ({ pressed }) => [
+        baseStyle,
+        {
+          backgroundColor: pressed ? colors.primarySubtle ?? "rgba(0,0,0,0.08)" : triggerHovered ? colors.primarySubtle ?? "rgba(0,0,0,0.05)" : "transparent"
+        }
+      ]
     },
-    renderTriggerAvatar ? renderTriggerAvatar(active, 22) : null,
+    renderTriggerAvatar != null || renderTriggerBadge != null ? /* @__PURE__ */ React10.createElement(View8, { style: styles3.avatarWrap }, renderTriggerAvatar ? renderTriggerAvatar(active, 22) : null, renderTriggerBadge ? /* @__PURE__ */ React10.createElement(View8, { style: styles3.triggerBadge }, renderTriggerBadge()) : null) : null,
     /* @__PURE__ */ React10.createElement(
       Text6,
       {
@@ -1221,9 +1273,13 @@ function SpaceSwitcher({
       },
       active?.name ?? "Spaces"
     ),
-    !onTriggerPress && renderIcon ? renderIcon("chevron-down", 14, colors.textTertiary) : null
-  ), onTriggerPress ? null : renderContainer({ isOpen: open, onClose: close, anchorRef, children: dropdownContent }));
+    renderIcon ? renderIcon("chevron-down", 14, colors.textTertiary) : null
+  ), renderContainer({ isOpen: open, onClose: close, anchorRef, children: dropdownContent }));
 }
+var styles3 = StyleSheet3.create({
+  avatarWrap: { position: "relative" },
+  triggerBadge: { position: "absolute", top: -2, right: -2 }
+});
 function SectionLabel({ label, color, size, lineHeight, font, paddingH, paddingV }) {
   return /* @__PURE__ */ React10.createElement(
     Text6,
@@ -1249,6 +1305,7 @@ function SpaceRow({
   onPress,
   renderAvatar,
   renderIcon,
+  renderBadge,
   colors,
   bodyFont,
   bodySize,
@@ -1259,7 +1316,7 @@ function SpaceRow({
   radMd
 }) {
   const [hovered, setHovered] = useState5(false);
-  const bg = hovered ? colors.primarySubtle ?? "rgba(0,0,0,0.04)" : "transparent";
+  const unread = space.unread ?? 0;
   return /* @__PURE__ */ React10.createElement(
     Pressable6,
     {
@@ -1269,15 +1326,15 @@ function SpaceRow({
       onPress,
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
-      style: {
+      style: ({ pressed }) => ({
         flexDirection: "row",
         alignItems: "center",
         gap: sp3,
         paddingHorizontal: sp4,
         paddingVertical: sp2,
         borderRadius: radMd,
-        backgroundColor: bg
-      }
+        backgroundColor: pressed ? colors.primarySubtle ?? "rgba(0,0,0,0.08)" : hovered ? colors.primarySubtle ?? "rgba(0,0,0,0.04)" : "transparent"
+      })
     },
     renderAvatar ? renderAvatar(space, 24) : null,
     /* @__PURE__ */ React10.createElement(
@@ -1296,6 +1353,7 @@ function SpaceRow({
       },
       space.name
     ),
+    unread > 0 && renderBadge ? renderBadge(unread) : null,
     active && renderIcon ? renderIcon("check", 15, colors.primary) : null
   );
 }
@@ -1314,7 +1372,6 @@ function ActionRow({
   radMd
 }) {
   const [hovered, setHovered] = useState5(false);
-  const bg = hovered ? colors.primarySubtle ?? "rgba(0,0,0,0.04)" : "transparent";
   return /* @__PURE__ */ React10.createElement(
     Pressable6,
     {
@@ -1323,15 +1380,15 @@ function ActionRow({
       onPress,
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
-      style: {
+      style: ({ pressed }) => ({
         flexDirection: "row",
         alignItems: "center",
         gap: sp3,
         paddingHorizontal: sp4,
         paddingVertical: sp2,
         borderRadius: radMd,
-        backgroundColor: bg
-      }
+        backgroundColor: pressed ? colors.primarySubtle ?? "rgba(0,0,0,0.08)" : hovered ? colors.primarySubtle ?? "rgba(0,0,0,0.04)" : "transparent"
+      })
     },
     renderIcon ? /* @__PURE__ */ React10.createElement(View8, { style: { width: 24, alignItems: "center", justifyContent: "center" } }, renderIcon(iconName, 15, colors.textSecondary)) : null,
     /* @__PURE__ */ React10.createElement(