npm - @visns-studio/visns-components - Versions diffs - 6.32.2 → 6.34.0 - Mend

@visns-studio/visns-components 6.32.2 → 6.34.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/README.md +504 -0
package/package.json +1 -1
package/src/components/DataGrid.jsx +44 -2
package/src/components/Field.jsx +32 -0
package/src/components/Form.jsx +39 -2
package/src/components/Navigation.jsx +353 -43
package/src/components/Notification.jsx +13 -2
package/src/components/TableFilter.jsx +14 -2
package/src/components/auth/Login.jsx +9 -2
package/src/components/auth/PasskeyEnrolPrompt.jsx +269 -0
package/src/components/auth/Profile.jsx +422 -26
package/src/components/auth/authEndpoints.js +43 -0
package/src/components/auth/passkeyClient.js +102 -0
package/src/components/auth/passkeyPrompt.js +408 -0
package/src/components/auth/profileLayout.js +45 -0
package/src/components/controls/DataGridSearch.jsx +16 -2
package/src/components/controls/DataGridSortSheet.jsx +2 -0
package/src/components/generic/ActionButtons.jsx +1 -1
package/src/components/generic/GenericAuth.jsx +197 -21
package/src/components/generic/GenericDetail.jsx +95 -3
package/src/components/generic/GenericMain.jsx +7 -0
package/src/components/generic/StandardModal.jsx +71 -158
package/src/components/sms/SmsCampaigns.jsx +2487 -0
package/src/components/sms/SmsInbox.jsx +18 -0
package/src/components/sms/SmsThreadPanel.jsx +20 -0
package/src/components/sms/smsEndpoints.js +23 -0
package/src/components/styles/DataGrid.module.scss +22 -0
package/src/components/styles/Form.module.scss +100 -2
package/src/components/styles/Navigation.module.scss +354 -15
package/src/components/styles/Notification.module.scss +140 -8
package/src/components/styles/PasskeyEnrolPrompt.module.scss +105 -0
package/src/components/styles/Profile.module.scss +157 -0
package/src/components/styles/Sms.module.scss +451 -0
package/src/components/styles/StandardModal.module.scss +273 -0
package/src/components/styles/global.css +24 -5
package/src/components/utils/navCollapsed.js +201 -0
package/src/components/utils/rowActionSettings.js +76 -0
package/src/components/utils/usePasskeysEnabled.js +84 -0
package/src/components/utils/useShellLayout.js +131 -0
package/src/index.js +103 -1
package/src/utils/rememberTab.js +70 -0

package/src/components/Navigation.jsx CHANGED Viewed

@@ -1,4 +1,10 @@
-import React, { useEffect, useRef, useState, useCallback } from 'react';
+import React, {
+    useEffect,
+    useInsertionEffect,
+    useRef,
+    useState,
+    useCallback,
+} from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import {
     AudioLines,
@@ -26,6 +32,8 @@ import {
     Lock,
     MessageSquare,
     MessagesSquare,
+    PanelLeftClose,
+    PanelLeftOpen,
     TrendingUp,
 } from 'lucide-react';
 import CustomFetch from './Fetch';
@@ -40,6 +48,13 @@ import {
     DEFAULT_BADGE_TONE,
 } from './navBadges';
 import { drawerRows } from './navDrawer';
+// The collapsed-rail preference: remembered in localStorage, published on
+// <html> as `data-nav-collapsed`. See utils/navCollapsed.js.
+import {
+    applyNavCollapsed,
+    getStoredNavCollapsed,
+    storeNavCollapsed,
+} from './utils/navCollapsed';
 import styles from './styles/Navigation.module.scss';
 /**
@@ -444,6 +459,16 @@ function Navigation({
      * shared bar has no way to know any of it.
      */
     badges = {},
+    /*
+     * The square brand mark for the collapsed rail, if the project has one.
+     *
+     * `logo` is a wide lock-up — a mark plus a wordmark — and there is no room
+     * for a wordmark in a 64px strip. Passing nothing is fine and is the
+     * default: the logo plate then holds the collapse toggle alone, which
+     * reads as deliberate in a way a wordmark cropped to its first two letters
+     * does not.
+     */
+    collapsedLogo,
 }) {
     const [search, setSearch] = useState('');
     const [searchResultShow, setSearchResultShow] = useState(false);
@@ -463,6 +488,65 @@ function Navigation({
     const isNarrow = useMediaQuery(DRAWER_BREAKPOINT);
     const isCoarsePointer = useMediaQuery(COARSE_POINTER);
+    /*
+     * THE COLLAPSED RAIL.
+     *
+     * Only the sidebar layouts have a rail to collapse; the header bar is
+     * untouched by every line below, and writes no attribute.
+     *
+     * The initial value is read from localStorage in a LAZY INITIALISER, not
+     * in an effect. An effect runs after the first paint, so the rail would
+     * render 216px wide, the content would lay out beside it, and both would
+     * then jump — which is exactly the flash a remembered layout preference
+     * exists to avoid.
+     */
+    const isRailLayout = layout === 'simple' || layout === 'cms';
+    const [collapsed, setCollapsed] = useState(() =>
+        isRailLayout ? getStoredNavCollapsed() : false
+    );
+    /*
+     * Below 1024px the rail IS the drawer — a panel that slides over the page
+     * and is dismissed by tapping the backdrop — so there is nothing to
+     * collapse and nothing the extra width is being taken from. The state is
+     * kept (widening the window restores what the user chose); it simply does
+     * not apply.
+     */
+    const railCollapsed = isRailLayout && collapsed && !isNarrow;
+    /*
+     * Publish it on <html>, the way GenericAuth publishes `data-layout` and
+     * `data-density` — so the rail's own stylesheet, and a consuming app's,
+     * key off one attribute rather than off a class threaded through the tree.
+     * `useInsertionEffect` so the width is in place before the first paint.
+     */
+    useInsertionEffect(() => {
+        if (!isRailLayout) {
+            return undefined;
+        }
+        applyNavCollapsed(railCollapsed);
+        return () => applyNavCollapsed(false);
+    }, [isRailLayout, railCollapsed]);
+    /**
+     * Collapse, or expand. The preference is remembered against the browser,
+     * not the account: it is about this screen and this window.
+     */
+    /** The toggle is an icon in both states, so it is named in both. */
+    const collapseLabel = railCollapsed ? 'Expand menu' : 'Collapse menu';
+    const toggleCollapsed = useCallback(() => {
+        setCollapsed((previous) => {
+            const next = !previous;
+            storeNavCollapsed(next);
+            return next;
+        });
+    }, []);
     // The mobile drawer is a full-viewport fixed overlay; without a scroll
     // lock the page behind it keeps scrolling under the user's thumb.
     useEffect(() => {
@@ -675,6 +759,36 @@ function Navigation({
         const labelVar = { '--nav-action-label': JSON.stringify(label) };
         const IconComponent = SETTING_ICONS[n.icon];
+        /*
+         * The same tooltip the header chips carry, placed to the RIGHT of the
+         * rail and drawn only while the rail is collapsed — see the note in
+         * `renderNav`, which does this for the nav rows above these. Profile
+         * and Logout now behave like the bell, which was the only labelled
+         * thing in the rail. `actionLabel` already falls back to the humanised
+         * id, so a settings entry with no label of its own still says
+         * something.
+         */
+        const railTooltip =
+            railCollapsed && label
+                ? {
+                      'data-tooltip-id': 'system-tooltip',
+                      'data-tooltip-place': 'right',
+                      'data-tooltip-content': label,
+                  }
+                : {};
+        // Same fallback the nav rows use: an action with no icon would
+        // collapse to an empty square, so it shows its initial instead.
+        const railInitial =
+            railCollapsed && !IconComponent && label
+                ? String(label).trim().charAt(0).toUpperCase()
+                : '';
+        const railInitialMark = railInitial ? (
+            <span className={styles['nav-initial']} aria-hidden="true">
+                {railInitial}
+            </span>
+        ) : null;
         // Same slot as the header's, publishing the row label the same way a
         // mounted component gets one (see the note above renderRailSetting).
         if (typeof renderers[n.id] === 'function') {
@@ -692,7 +806,14 @@ function Navigation({
         if (n.id === 'notifications') {
             return (
                 <li style={labelVar}>
-                    <Notification setSystemAuth={setSystemAuth} />
+                    {/* The bell draws its own trigger, so the placement is
+                        the one thing it has to be told: its tooltip is
+                        hard-placed below the chip for the header bar, and
+                        below a row in a rail is on top of the next row. */}
+                    <Notification
+                        setSystemAuth={setSystemAuth}
+                        tooltipPlace="right"
+                    />
                 </li>
             );
         } else if (n.id === 'businessCardOcr') {
@@ -702,9 +823,11 @@ function Navigation({
                         onClick={() => setShowBusinessCardOcr(true)}
                         className={activeClass}
                         type="button"
+                        aria-label={label}
+                        {...railTooltip}
                     >
                         <CreditCard size={19} strokeWidth={2} />
-                        <span>{label}</span>
+                        <span className={styles['nav-label']}>{label}</span>
                     </button>
                 </li>
             );
@@ -725,11 +848,14 @@ function Navigation({
                         onClick={handleLogout}
                         className={activeClass}
                         type="button"
+                        aria-label={label}
+                        {...railTooltip}
                     >
                         {IconComponent && (
                             <IconComponent size={19} strokeWidth={2} />
                         )}
-                        <span>{label}</span>
+                        {railInitialMark}
+                        <span className={styles['nav-label']}>{label}</span>
                     </button>
                 </li>
             );
@@ -741,6 +867,8 @@ function Navigation({
                     to={n.url}
                     className={`${activeClass}`}
                     target={n.target ? n.target : '_self'}
+                    aria-label={label}
+                    {...railTooltip}
                     // The rail is the mobile drawer below 1024px; navigating
                     // from it has to close the drawer, as the nav list does.
                     onClick={() => setOpen(false)}
@@ -748,7 +876,8 @@ function Navigation({
                     {IconComponent && (
                         <IconComponent size={19} strokeWidth={2} />
                     )}
-                    <span>{label}</span>
+                    {railInitialMark}
+                    <span className={styles['nav-label']}>{label}</span>
                 </Link>
             </li>
         );
@@ -767,26 +896,65 @@ function Navigation({
      * point of declaration (`const [, setActiveDropdown]`): it re-rendered the
      * whole bar on every hover to change nothing, because the only thing it
      * did was toggle the scroll container's overflow, which is a DOM poke.
-     * That poke is `liftNavClipping` now, and it is called from the tap path
-     * as well — the dropdown was clipped by the strip's `overflow-x: auto`
-     * everywhere the pointer had not been.
+     * That poke is `pinDropdown` now, and it is called from the tap path as
+     * well — the dropdown has to be placed before it is shown, wherever the
+     * pointer has or has not been.
      */
     const [openGroup, setOpenGroup] = useState(null);
     const navWrapRef = useRef(null);
     /**
-     * Let an open dropdown out of the horizontally-scrolling nav strip.
+     * Put an item's dropdown directly underneath the item.
+     *
+     * The panel is `position: fixed` (the stylesheet carries the long note):
+     * that is what keeps it out of the strip's `overflow-x: auto` clip, since
+     * a scroll container clips on BOTH axes and the alternative — flipping
+     * the strip to `overflow-x: visible` — destroyed the scroll container,
+     * reset `scrollLeft` to 0 and slid the item out from under the pointer
+     * while the menu was opening. The price of fixed is that the panel no
+     * longer inherits the item's position, so measure the <li> and hand the
+     * two coordinates down as custom properties. The scroller is never
+     * touched.
      *
-     * The strip is `overflow-x: auto`, and a scroll container clips on BOTH
-     * axes however `visible` the other one is written — so a menu hanging
-     * below the bar is cut off at the bar's own bottom edge.
+     * The left edge is clamped into the viewport, so the last group in the
+     * strip opens its 220px panel on screen rather than off the right edge.
      */
-    const liftNavClipping = (lift) => {
-        if (navWrapRef.current) {
-            navWrapRef.current.style.overflowX = lift ? 'visible' : 'auto';
+    const pinDropdown = (li) => {
+        if (!li) {
+            return;
         }
+        const rect = li.getBoundingClientRect();
+        li.style.setProperty('--nav-sub-top', `${rect.bottom}px`);
+        li.style.setProperty(
+            '--nav-sub-left',
+            `${Math.max(8, Math.min(rect.left, window.innerWidth - 220 - 8))}px`
+        );
     };
+    // A scrolled strip moves its items but not a fixed panel, so a menu that
+    // is already open would sail away from the group it belongs to. Re-pin
+    // whatever is open as the strip scrolls — `:hover` is the mouse, and
+    // `:focus-within` covers both the keyboard and the group a touch reader
+    // has tapped open. Passive: this only reads geometry and writes two
+    // custom properties, it never cancels the scroll.
+    useEffect(() => {
+        const strip = navWrapRef.current;
+        if (!strip) {
+            return undefined;
+        }
+        const onScroll = () => {
+            strip
+                .querySelectorAll('li:hover, li:focus-within')
+                .forEach(pinDropdown);
+        };
+        strip.addEventListener('scroll', onScroll, { passive: true });
+        return () => strip.removeEventListener('scroll', onScroll);
+    }, []);
     // A tap anywhere else closes the group a touch reader opened. Without it
     // the only way to dismiss the menu is to tap the heading again, which is
     // not how any other menu on the device behaves. Mouse users never get
@@ -799,7 +967,6 @@ function Navigation({
         const onDown = (event) => {
             if (!navWrapRef.current?.contains(event.target)) {
                 setOpenGroup(null);
-                liftNavClipping(false);
             }
         };
@@ -809,10 +976,42 @@ function Navigation({
     const renderNav = (n) => {
         let navItemClasses;
-        const NavItemIcon =
-            layout === 'simple' || layout === 'cms'
-                ? NAV_ICONS[n.icon || n.id]
-                : undefined;
+        const NavItemIcon = isRailLayout
+            ? NAV_ICONS[n.icon || n.id]
+            : undefined;
+        /*
+         * The rail's rows get the same tooltip every account chip in the
+         * header has always had — `data-tooltip-*` read by the one
+         * `<Tooltip id="system-tooltip">` GenericAuth mounts.
+         *
+         * ONLY WHILE COLLAPSED, and that is the whole point of it: an icon
+         * strip is unreadable without one, and a tooltip repeating a label
+         * that is already printed six pixels to its right is noise. The
+         * attributes are omitted rather than the tooltip disabled — react-
+         * tooltip shows nothing for an anchor with no `data-tooltip-content`.
+         *
+         * `place="right"`, not the header's "bottom": a tooltip under a row
+         * in a vertical list covers the next row, which is the one you are
+         * about to read. To the right of the rail it covers page content
+         * nobody is pointing at.
+         *
+         * No `title` attribute anywhere near this — the native tooltip and
+         * react-tooltip both fire, half a second apart, and you get the label
+         * twice in two different boxes.
+         *
+         * Spread as an object rather than written inline so the HEADER layout
+         * renders exactly the attributes it rendered before: on `full` this
+         * is empty and nothing is added.
+         */
+        const railTooltip =
+            railCollapsed && n.label
+                ? {
+                      'data-tooltip-id': 'system-tooltip',
+                      'data-tooltip-place': 'right',
+                      'data-tooltip-content': n.label,
+                  }
+                : {};
         if (n.class.includes('active')) {
             navItemClasses =
@@ -828,15 +1027,14 @@ function Navigation({
         const hasChildren = n.children && n.children.length > 0;
-        const handleMouseEnter = () => {
+        // Place the panel before it is shown. Hover is the mouse; focus is
+        // the keyboard, and React's onFocus bubbles, so focus landing on the
+        // group heading OR on any row inside the open menu pins it just the
+        // same. Nothing to undo on the way out: an unopened panel is
+        // `display: none` wherever its coordinates happen to say.
+        const handlePin = (event) => {
             if (hasChildren) {
-                liftNavClipping(true);
-            }
-        };
-        const handleMouseLeave = () => {
-            if (hasChildren) {
-                liftNavClipping(false);
+                pinDropdown(event.currentTarget);
             }
         };
@@ -880,7 +1078,6 @@ function Navigation({
                                         onClick={() => {
                                             setOpen(false);
                                             setOpenGroup(null);
-                                            liftNavClipping(false);
                                         }}
                                     >
                                         {child.label}
@@ -903,10 +1100,45 @@ function Navigation({
          */
         const itemBadge = navBadge(badges, n);
         const ariaLabel = badgeAriaLabel(n.label, itemBadge);
+        /*
+         * The label, wrapped in a span ONLY WHILE THE RAIL IS COLLAPSED.
+         *
+         * A collapsed row shows its icon alone, and a bare text node cannot be
+         * hidden — only deleted, which takes the row's accessible name with
+         * it. Wrapped, it is clipped to a pixel and stays in the accessibility
+         * tree where the screen reader and the tooltip both still find it.
+         *
+         * CONDITIONAL, not permanent, and that is the whole lesson of the
+         * first attempt: this rail's own stylesheet styles `span` as a
+         * DESCENDANT of `.nav-item` — the rule was written for the group
+         * heading, which used to be a `<span>` — so an unconditional wrapper
+         * turned every expanded row into a `--primary-color` block with 1.25em
+         * of padding and squeezed the icon beside it to nothing. Emitting the
+         * bare text node when expanded, exactly as before, means there is no
+         * selector to audit: the expanded rail renders what it has always
+         * rendered, in both layouts.
+         *
+         * An item with no icon would collapse to an empty square, so it falls
+         * back to the first letter of its label in the icon's slot — again
+         * only while collapsed, where it is the only thing in the row.
+         */
+        const railInitial =
+            railCollapsed && !NavItemIcon && n.label
+                ? String(n.label).trim().charAt(0).toUpperCase()
+                : '';
         const contents = (
             <>
                 {NavItemIcon ? <NavItemIcon size={18} /> : null}
-                {n.label}
+                {railInitial ? (
+                    <span className={styles['nav-initial']} aria-hidden="true">
+                        {railInitial}
+                    </span>
+                ) : null}
+                {railCollapsed ? (
+                    <span className={styles['nav-label']}>{n.label}</span>
+                ) : (
+                    n.label
+                )}
                 <BadgePill badge={itemBadge} />
             </>
         );
@@ -914,23 +1146,35 @@ function Navigation({
         return (
             <li
                 className={navItemClasses}
-                onMouseEnter={handleMouseEnter}
-                onMouseLeave={handleMouseLeave}
+                onMouseEnter={handlePin}
+                onFocus={handlePin}
             >
-                {n.url ? (
+                {n.url && !(hasChildren && (isCoarsePointer || railCollapsed)) ? (
                     // Close the mobile drawer when navigating; no-op for the
                     // header layout where the drawer state is never opened.
+                    //
+                    // A GROUP THAT ALSO HAS A URL goes the other way on a
+                    // coarse pointer. A <Link> carries no `aria-expanded`, and
+                    // the touch stylesheet opens the panel off that attribute
+                    // alone — so on a touch screen the only thing a tap on
+                    // such a heading could ever do was navigate, and the pages
+                    // inside the group were unreachable. There the button
+                    // branch below wins and the parent page is reached from
+                    // the menu instead (its first row, by convention). On a
+                    // fine pointer the link stays: hover opens the panel, so
+                    // nothing is lost by keeping the heading clickable.
                     <Link
                         to={n.url}
                         aria-label={ariaLabel}
                         onClick={() => setOpen(false)}
+                        {...railTooltip}
                     >
                         {contents}
                     </Link>
                 ) : hasChildren ? (
                     /*
-                     * A group heading — no page of its own, so there is
-                     * nothing to link to, but it still has to be REACHABLE.
+                     * A group heading — usually no page of its own, so there
+                     * is nothing to link to, but it still has to be REACHABLE.
                      * As a <span> it was not focusable and the menu opened on
                      * :hover alone, which left every page inside a group
                      * unreachable by keyboard and untappable on a touch
@@ -969,14 +1213,40 @@ function Navigation({
                            what made the menu impossible to open by tapping,
                            since the tap that opened it removed the focus
                            holding it open in the same gesture. Toggle instead,
-                           and lift the strip's clipping the way a hover does,
-                           or the menu opens inside a scroll container that
-                           cuts it off at the bar's bottom edge. */
+                           and pin the panel to the item the way a hover does,
+                           since a fixed panel has no position of its own until
+                           somebody measures the item for it. */
                         onClick={(e) => {
+                            /*
+                             * COLLAPSED: there is nowhere for a submenu to go.
+                             * A 64px strip cannot hold a list of child labels,
+                             * and a flyout anchored to a row is a second
+                             * floating surface with its own placement,
+                             * clipping and dismissal problems. Expanding the
+                             * rail is the simple answer that cannot go wrong:
+                             * the group is then an ordinary heading in an
+                             * ordinary rail, and the next hover opens it.
+                             *
+                             * `n.url` groups take this path too while
+                             * collapsed (see the branch condition above) —
+                             * otherwise the tap would navigate to the parent
+                             * page and the children would be unreachable
+                             * without expanding the rail by hand.
+                             */
+                            if (railCollapsed) {
+                                toggleCollapsed();
+                                return;
+                            }
                             if (isCoarsePointer) {
                                 const next = openGroup === n.id ? null : n.id;
                                 setOpenGroup(next);
-                                liftNavClipping(next !== null);
+                                if (next !== null) {
+                                    pinDropdown(e.currentTarget.closest('li'));
+                                }
                                 return;
                             }
@@ -984,11 +1254,14 @@ function Navigation({
                                 e.currentTarget.blur();
                             }
                         }}
+                        {...railTooltip}
                     >
                         {contents}
                     </button>
                 ) : (
-                    <span aria-label={ariaLabel}>{contents}</span>
+                    <span aria-label={ariaLabel} {...railTooltip}>
+                        {contents}
+                    </span>
                 )}
                 {renderChildren()}
             </li>
@@ -1463,18 +1736,55 @@ function Navigation({
     return layout === 'simple' || layout === 'cms' ? (
         <div className={styles.cwrap}>
             <aside
+                id="nav-rail"
                 className={[
                     styles['aside--cms'],
                     isOpen ? styles['aside--cms--open'] : '',
                     actionsInSidebar ? styles['aside--cms--rail'] : '',
+                    railCollapsed ? styles['aside--cms--collapsed'] : '',
                 ]
                     .filter(Boolean)
                     .join(' ')}
             >
                 <div className={styles.logo}>
-                    <Link to="/">
-                        <img src={logo} alt="System Logo" />
-                    </Link>
+                    {/* A square mark for the 64px strip when the project has
+                        one. With none, the plate holds the collapse toggle
+                        alone — a wide lock-up cropped to its first two letters
+                        is worse than no logo, and the plate is still the
+                        brand-coloured band it always was. */}
+                    {railCollapsed && !collapsedLogo ? null : (
+                        <Link to="/">
+                            <img
+                                src={
+                                    railCollapsed && collapsedLogo
+                                        ? collapsedLogo
+                                        : logo
+                                }
+                                alt="System Logo"
+                            />
+                        </Link>
+                    )}
+                    {/* Desktop only — below 1024px the rail is a drawer and
+                        there is no width to reclaim. Hidden in CSS as well,
+                        because `isNarrow` resolves from a media query that
+                        answers `false` for one render on a cold load. */}
+                    <button
+                        type="button"
+                        className={styles['rail-toggle']}
+                        aria-expanded={!railCollapsed}
+                        aria-controls="nav-rail"
+                        data-tooltip-id="system-tooltip"
+                        data-tooltip-place="right"
+                        data-tooltip-content={collapseLabel}
+                        aria-label={collapseLabel}
+                        onClick={toggleCollapsed}
+                    >
+                        {railCollapsed ? (
+                            <PanelLeftOpen size={18} strokeWidth={2} />
+                        ) : (
+                            <PanelLeftClose size={18} strokeWidth={2} />
+                        )}
+                    </button>
                 </div>
                 <div className={styles.awrap}>
                     <nav className={styles.navwrap} ref={navWrapRef}>

package/src/components/Notification.jsx CHANGED Viewed

@@ -100,7 +100,18 @@ function Notification(props) {
     const [show, setShow] = useState(false);
     const [loading, setLoading] = useState(false);
     const [processingIds, setProcessingIds] = useState([]);
-    const { setSystemAuth, echo = null, channel = null } = props;
+    const {
+        setSystemAuth,
+        echo = null,
+        channel = null,
+        /**
+         * Where the trigger's tooltip opens. 'bottom' is the header chip,
+         * which is what this has always been and what every existing mount
+         * keeps. The sidebar rail passes 'right': below a row in a vertical
+         * list is on top of the next row.
+         */
+        tooltipPlace = 'bottom',
+    } = props;
     // Live means *confirmed*: Echo hands back a channel object long before
     // /broadcasting/auth has approved it, and treating that as live is how a
@@ -451,7 +462,7 @@ function Notification(props) {
                 className={styles.notificationTrigger}
                 onClick={toggleNotification}
                 data-tooltip-id="system-tooltip"
-                data-tooltip-place="bottom"
+                data-tooltip-place={tooltipPlace}
                 data-tooltip-content="Notifications"
                 aria-label="Notifications"
             >

package/src/components/TableFilter.jsx CHANGED Viewed

@@ -34,8 +34,10 @@ function TableFilter({
     // `.flatFilter` block in the stylesheet), promoted to an opt-in.
     //
     // A vertical rail spends a fifth of the page on navigation. Detail pages
-    // now ask for the strip unconditionally (see GenericDetail); index pages
-    // and Profile still get the rail, so the default here is unchanged.
+    // now ask for the strip unconditionally (see GenericDetail); Profile asks
+    // for it on the sidebar shells and keeps the rail on the header-bar one
+    // (see auth/profileLayout.js); index pages still get the rail unless the
+    // host says otherwise. The default here is unchanged.
     //
     // In this variant the strip also carries real tab semantics — tablist /
     // tab / aria-selected, one tab stop for the whole strip, and arrow keys to
@@ -565,6 +567,14 @@ function TableFilter({
               }
             : { 'aria-current': isSelected ? 'page' : undefined };
+        // The strip's own tooltip. A tab's label is a noun ("Documents") and
+        // what a reader wants back from a hover is the verb — which verb it is
+        // depends on whether they are standing on it already. Both branches
+        // below carry it: a detail page's strip renders the anchor and an
+        // index page's `simple` strip the button, and one strip must not
+        // answer a hover differently depending on where it is drawn.
+        const hint = isSelected ? `You are on ${d.label}` : `Show ${d.label}`;
         if (type === 'simple') {
             return (
                 <li className={styles[d.class]}>
@@ -574,6 +584,7 @@ function TableFilter({
                         data-url={d.url || ''}
                         data-value={d.hasOwnProperty('value') ? d.value : ''}
                         data-active={isSelected ? 'true' : undefined}
+                        title={hint}
                         onClick={filterTable}
                         {...a11y}
                     >
@@ -591,6 +602,7 @@ function TableFilter({
                         data-url={d.url || ''}
                         data-value={d.hasOwnProperty('value') ? d.value : ''}
                         data-active={isSelected ? 'true' : undefined}
+                        title={hint}
                         onClick={filterTable}
                         className={parentClass}
                         {...a11y}