@visns-studio/visns-components 6.6.3 → 6.15.0

package/src/components/vault/VaultManager.jsx

@@ -0,0 +1,1000 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { toast } from 'react-toastify';
+import {
+    ArrowDown,
+    ArrowUp,
+    Check,
+    ExternalLink,
+    History,
+    KeyRound,
+    Loader2,
+    Lock,
+    Pencil,
+    Plus,
+    RotateCcw,
+    Search,
+    ShieldCheck,
+    Trash2,
+    User,
+} from 'lucide-react';
+
+import CustomFetch from '../Fetch';
+import { showConfirmDialog } from '../generic/ConfirmationDialog';
+import styles from '../styles/Vault.module.scss';
+import OtpChip from './OtpChip';
+import VaultAccessLog from './VaultAccessLog';
+import VaultConfirmPanel from './VaultConfirmPanel';
+import VaultEntryForm from './VaultEntryForm';
+import useDebouncedValue from './useDebouncedValue';
+import useVaultReveal from './useVaultReveal';
+import withVaultNavigation from './vaultNavigation';
+import { copyText } from './vaultClipboard';
+import { resolveVaultEndpoints } from './vaultEndpoints';
+import { hostFromUrl, openableUrl } from './vaultHelpers';
+import { useAvailableHeight } from '../utils/useDensity';
+import {
+    MAX_ROWS,
+    MIN_ROWS,
+    firstIndexOfPage,
+    fitRowsToHeight,
+    pageForIndex,
+} from './vaultFit';
+import { fetchOtp, otpCopiedMessage } from './vaultOtp';
+
+/** The page size before anything has been measured, and the one a consumer
+ *  that passes `perPage` is choosing instead of the measurement. */
+const PER_PAGE = 25;
+
+/* The list sizes itself to the window, and these are the numbers it starts
+   from — all px, all replaced by a real measurement as soon as one row has
+   rendered. A first paint at roughly the right size beats one that visibly
+   resizes itself. */
+// Fixed in CSS (.tableWrapFitted tbody tr) so the fit is arithmetic, not a
+// measurement that depends on which rows happen to be on the page.
+const ROW_HEIGHT = 58;
+const HEAD_HEIGHT = 34;
+const PAGER_HEIGHT = 40;
+// The pager's own margin-top plus a little air under it; getBoundingClientRect
+// reports the box, not the margin.
+const PAGER_GAP = 20;
+// Leaves room for the page's own bottom padding under the pager.
+const BOTTOM_GUTTER = 20;
+// A resize is a drag rather than an event, so refitting on every frame would
+// be one request per frame.
+const FIT_DEBOUNCE = 150;
+// How long a copy button says "Copied".
+const COPIED_FOR = 1500;
+
+const SORTS = [
+    { key: 'title', label: 'Title' },
+    { key: 'username', label: 'Username' },
+];
+
+/**
+ * One button in a row's action cluster.
+ *
+ * The tooltip sits on the wrapper rather than on the button because a disabled
+ * button fires no pointer events in any browser — and "why is this greyed out"
+ * is precisely when a tooltip earns its place. The button keeps the aria-label,
+ * which is what a screen reader reads either way.
+ *
+ * Three states, in the order they win: busy (the request is out), copied (the
+ * value reached the clipboard, said for a second and a half), idle.
+ */
+const RowAction = ({
+    icon: Icon,
+    label,
+    tooltip,
+    onClick,
+    disabled = false,
+    busy = false,
+    copied = false,
+    primary = false,
+    danger = false,
+}) => (
+    <span
+        className={styles.actionIconWrap}
+        data-tooltip-id="system-tooltip"
+        data-tooltip-content={tooltip}
+    >
+        <button
+            type="button"
+            className={[
+                styles.actionIcon,
+                primary ? styles.actionIconPrimary : '',
+                danger ? styles.actionIconDanger : '',
+                copied ? styles.actionIconDone : '',
+            ]
+                .filter(Boolean)
+                .join(' ')}
+            onClick={onClick}
+            disabled={disabled || busy}
+            aria-label={label}
+        >
+            {busy ? (
+                <Loader2 size={15} className={styles.spin} aria-hidden="true" />
+            ) : copied ? (
+                <Check size={15} strokeWidth={2.6} aria-hidden="true" />
+            ) : (
+                <Icon size={15} strokeWidth={2} aria-hidden="true" />
+            )}
+        </button>
+    </span>
+);
+
+/**
+ * The vault's own page: everything the header popover deliberately is not.
+ *
+ * The popover exists to get one password onto the clipboard in three
+ * keystrokes; this is where entries are created, edited, retired and audited.
+ * The two share every credential-touching behaviour through `useVaultReveal`
+ * and `OtpChip`, so a password revealed here goes through exactly the same
+ * confirmation as one revealed there — which is the point of extracting them.
+ *
+ * The table is hand-rolled rather than built on this library's DataGrid. That
+ * grid is configuration-driven over the vendored `visns-datagrid` fork, which
+ * has React 19 work outstanding (see README), and every column that matters
+ * here is a live control — a ticking OTP chip, a reveal that can open a
+ * confirmation panel — rather than a value to format. A plain semantic table
+ * costs less and does more.
+ */
+const VaultManagerInner = ({
+    endpoints,
+    // Accepted for symmetry with the library's other pages; the server decides
+    // what this user may see, so nothing here reads it.
+    userProfile: _userProfile,
+    canManage = false,
+    pageTitle = 'Password manager',
+    locationSearch = '',
+    // A fixed page size, for a consumer that wants one. Passing it turns off
+    // the measurement below entirely — the two must not fight over `per_page`.
+    perPage: perPageProp = null,
+}) => {
+    const routes = useMemo(() => resolveVaultEndpoints(endpoints), [endpoints]);
+
+    const [query, setQuery] = useState('');
+    const [visibility, setVisibility] = useState('');
+    const [includeDeleted, setIncludeDeleted] = useState(false);
+    const [sort, setSort] = useState('updated_at');
+    const [direction, setDirection] = useState('desc');
+    const [page, setPage] = useState(1);
+    const [perPage, setPerPage] = useState(
+        Number(perPageProp) > 0 ? Number(perPageProp) : PER_PAGE
+    );
+
+    const [rows, setRows] = useState([]);
+    const [total, setTotal] = useState(0);
+    const [lastPage, setLastPage] = useState(1);
+    const [loading, setLoading] = useState(false);
+
+    const [editing, setEditing] = useState(null); // entry | {} for a new one
+    const [logFor, setLogFor] = useState(null); // entry | 'global'
+    const [fallback, setFallback] = useState(null);
+    // `${entryId}:${what}` for the button currently showing a tick.
+    const [copied, setCopied] = useState(null);
+    const [otpBusyId, setOtpBusyId] = useState(null);
+
+    const debouncedQuery = useDebouncedValue(query, 250);
+
+    const mountedRef = useRef(true);
+    const requestRef = useRef(0);
+    const copiedTimer = useRef(null);
+
+    const {
+        reveal,
+        revealingId,
+        confirmRequired,
+        confirmMessage,
+        confirmError,
+        confirmPending,
+        confirm,
+        cancelConfirm,
+    } = useVaultReveal(routes);
+
+    useEffect(() => {
+        mountedRef.current = true;
+
+        return () => {
+            mountedRef.current = false;
+            if (copiedTimer.current) clearTimeout(copiedTimer.current);
+        };
+    }, []);
+
+    /* ----------------------------------------------------------- loading */
+
+    const load = useCallback(() => {
+        const ticket = requestRef.current + 1;
+        requestRef.current = ticket;
+
+        setLoading(true);
+
+        const params = {
+            search: debouncedQuery.trim(),
+            page,
+            per_page: perPage,
+            sort,
+            direction,
+        };
+
+        if (includeDeleted) params.include_deleted = 1;
+
+        CustomFetch(
+            routes.list,
+            'GET',
+            params,
+            (result) => {
+                if (!mountedRef.current || requestRef.current !== ticket) return;
+
+                let data = Array.isArray(result?.data) ? result.data : [];
+
+                // The list endpoint has no visibility parameter, so this one
+                // filter is applied here. It narrows the page rather than the
+                // query, which the count below says out loud.
+                if (visibility) {
+                    data = data.filter((row) => row.visibility === visibility);
+                }
+
+                setRows(data);
+                setTotal(Number(result?.total) || 0);
+                setLastPage(Number(result?.last_page) || 1);
+                setLoading(false);
+            },
+            null
+        ).catch(() => {
+            if (!mountedRef.current || requestRef.current !== ticket) return;
+
+            setLoading(false);
+            setRows([]);
+        });
+    }, [
+        routes,
+        debouncedQuery,
+        page,
+        perPage,
+        sort,
+        direction,
+        includeDeleted,
+        visibility,
+    ]);
+
+    useEffect(() => {
+        load();
+    }, [load]);
+
+    // A new search starts at the first page; staying on page 4 of the previous
+    // result set is how a search appears to return nothing.
+    useEffect(() => {
+        setPage(1);
+    }, [debouncedQuery, visibility, includeDeleted, sort, direction]);
+
+    /* ------------------------------------------------ fitting the window */
+
+    // A fixed page size is either a list that scrolls or a card with white
+    // space under it, and in both cases the pager — the control that gets you
+    // out of either — is the first thing to leave the screen. So the page size
+    // is a measurement: the room between the top of the list and the bottom of
+    // the window, less the pager, divided by the height of a row.
+    const autoFit = !(Number(perPageProp) > 0);
+
+    // A consumer that changes its mind about the fixed size mid-life.
+    useEffect(() => {
+        if (Number(perPageProp) > 0) setPerPage(Number(perPageProp));
+    }, [perPageProp]);
+
+    const listRef = useRef(null);
+    const pagerRef = useRef(null);
+
+    const [metrics, setMetrics] = useState({
+        rowHeight: ROW_HEIGHT,
+        headHeight: HEAD_HEIGHT,
+        pagerHeight: PAGER_HEIGHT,
+    });
+
+    const available = useAvailableHeight(listRef, {
+        enabled: autoFit,
+        bottomGutter: BOTTOM_GUTTER,
+        // The confirm panel and the manual-copy fallback both open above the
+        // table and push its top down; a re-measure has to follow them.
+        // NOT rows.length: the row count changes every time per_page does,
+        // and a re-measure on each of those is half of a measure/refit loop.
+        recomputeKey: `${confirmRequired ? 1 : 0}|${fallback ? 1 : 0}`,
+    });
+
+    // Measure what actually rendered rather than trusting the constants: the
+    // row height moves with the host's font size, its density setting and
+    // whether a row carries tags. Rounded and compared with a 1px tolerance so
+    // a sub-pixel wobble cannot start a measure/refit loop.
+    useEffect(() => {
+        if (!autoFit) return;
+
+        const list = listRef.current;
+
+        if (!list || typeof list.querySelector !== 'function') return;
+
+        // Rows are NOT measured: their height is fixed by CSS in fitted mode
+        // (ROW_HEIGHT). Measuring them was the flicker - a tall placeholder or
+        // a tag-heavy row skewed the estimate, and the page size it produced
+        // changed which rows were there to measure. Head and pager are stable
+        // and are still read from the DOM.
+        const head = list.querySelector('thead');
+
+        const measure = (node) => {
+            const height = node?.getBoundingClientRect?.().height;
+
+            return Number.isFinite(height) && height > 0 ? Math.round(height) : 0;
+        };
+
+        const next = {
+            headHeight: measure(head),
+            pagerHeight: measure(pagerRef.current),
+        };
+
+        setMetrics((current) => {
+            const merged = {
+                rowHeight: ROW_HEIGHT,
+                headHeight: next.headHeight || current.headHeight,
+                pagerHeight: next.pagerHeight || current.pagerHeight,
+            };
+
+            const settled = Object.keys(merged).every(
+                (key) => Math.abs(merged[key] - current[key]) <= 1
+            );
+
+            return settled ? current : merged;
+        });
+    }, [autoFit, available]);
+
+    const fitted = autoFit
+        ? fitRowsToHeight({
+              available,
+              pagerHeight: metrics.pagerHeight + PAGER_GAP,
+              rowHeight: metrics.rowHeight,
+              chrome: metrics.headHeight,
+              min: MIN_ROWS,
+              max: MAX_ROWS,
+          })
+        : null;
+
+    const debouncedFit = useDebouncedValue(fitted, FIT_DEBOUNCE);
+
+    // The debounce is there for the drag, not for the first measurement: the
+    // list mounts at PER_PAGE, measures on the next frame, and waiting another
+    // 150ms to correct that is 150ms of visibly wrong page. So the first fit
+    // is taken as it lands and every later one waits for the drag to stop.
+    const fittedOnce = useRef(false);
+    const target = fittedOnce.current ? debouncedFit : fitted;
+
+    useEffect(() => {
+        if (autoFit && fitted != null) fittedOnce.current = true;
+    }, [autoFit, fitted]);
+
+    useEffect(() => {
+        if (!autoFit || target == null || target === perPage) return;
+
+        // Keep the reader where they were: whatever was at the top of the page
+        // stays on screen, on whichever page it now belongs to. Both updates
+        // land in the same render, so the list refetches once rather than
+        // twice.
+        setPage((current) =>
+            pageForIndex(firstIndexOfPage(current, perPage), target)
+        );
+        setPerPage(target);
+    }, [autoFit, target, perPage]);
+
+    // The height the rows are allowed to occupy. The pager is subtracted
+    // before anything is drawn, which is what keeps it on screen.
+    const listHeight =
+        autoFit && available != null
+            ? Math.max(0, available - metrics.pagerHeight - PAGER_GAP)
+            : null;
+
+    // In a window too short for the five-row floor the rows will not all fit
+    // whatever we do; scrolling the container is then kinder than clipping
+    // entries the user cannot reach, and the pager stays put either way.
+    const listScrolls =
+        listHeight != null &&
+        (rows.length === 0 ||
+            rows.length * metrics.rowHeight + metrics.headHeight > listHeight + 1);
+
+    /* ------------------------------------------------- deep link to create */
+
+    // The quick search's empty state links here as `?create=1&title=…`, so the
+    // "no matches — add one" path lands on a form that already knows the name.
+    const [prefill, setPrefill] = useState(null);
+
+    useEffect(() => {
+        const params = new URLSearchParams(locationSearch || '');
+
+        if (params.get('create') !== '1') return;
+
+        setPrefill({ title: params.get('title') || '' });
+        setEditing({});
+    }, [locationSearch]);
+
+    /* ------------------------------------------------------------ actions */
+
+    // The tick on the button that was just pressed. A toast is easy to miss on
+    // a wide screen — the confirmation belongs where the pointer already is —
+    // and one timer is enough because only one button can be tapped at a time.
+    const markCopied = useCallback((entryId, what) => {
+        if (copiedTimer.current) clearTimeout(copiedTimer.current);
+
+        setCopied(`${entryId}:${what}`);
+
+        copiedTimer.current = setTimeout(() => {
+            copiedTimer.current = null;
+            if (mountedRef.current) setCopied(null);
+        }, COPIED_FOR);
+    }, []);
+
+    const copyPassword = useCallback(
+        (entry) => {
+            reveal(entry.id)
+                .then(async (password) => {
+                    const ok = await copyText(password);
+
+                    if (!mountedRef.current) return;
+
+                    if (ok) {
+                        toast.success('Password copied — paste it now');
+                        markCopied(entry.id, 'password');
+                    } else
+                        setFallback({
+                            label: `Password for ${entry.title}`,
+                            value: password,
+                        });
+                })
+                .catch(() => {
+                    // Cancelled, or already reported by CustomFetch.
+                });
+        },
+        [reveal, markCopied]
+    );
+
+    const copyUsername = useCallback(
+        async (entry) => {
+            const ok = await copyText(entry.username);
+
+            if (!mountedRef.current) return;
+
+            if (ok) {
+                toast.success('Username copied');
+                markCopied(entry.id, 'username');
+            } else
+                setFallback({
+                    label: `Username for ${entry.title}`,
+                    value: entry.username,
+                });
+
+            CustomFetch(
+                routes.logCopy(entry.id),
+                'POST',
+                { action: 'copy_username' },
+                () => {},
+                () => {}
+            ).catch(() => {});
+        },
+        [routes, markCopied]
+    );
+
+    // The 2FA code, straight onto the clipboard. The chip in the 2FA column
+    // still shows a ticking code for anyone who wants to read it; this is for
+    // the far more common case of pasting it into the box that is asking.
+    //
+    // The seconds in the message are the server's own count: a code copied
+    // with three seconds left is about to stop working, and the user is better
+    // off pressing the button again than pasting it.
+    const copyOtp = useCallback(
+        (entry) => {
+            setOtpBusyId(entry.id);
+
+            fetchOtp(CustomFetch, routes, entry.id)
+                .then(async ({ code, expiresIn }) => {
+                    if (!mountedRef.current) return;
+
+                    setOtpBusyId(null);
+
+                    const ok = await copyText(code);
+
+                    if (!mountedRef.current) return;
+
+                    if (ok) {
+                        toast.success(otpCopiedMessage(expiresIn));
+                        markCopied(entry.id, 'otp');
+                    } else
+                        setFallback({
+                            label: `2FA code for ${entry.title}`,
+                            value: code,
+                        });
+                })
+                .catch(() => {
+                    // CustomFetch has already said what went wrong.
+                    if (mountedRef.current) setOtpBusyId(null);
+                });
+        },
+        [routes, markCopied]
+    );
+
+    const remove = useCallback(
+        (entry) => {
+            showConfirmDialog({
+                title: `Delete ${entry.title}?`,
+                message:
+                    'The entry is soft-deleted — a vault manager can restore it from "Show deleted".',
+                confirmLabel: 'Delete',
+                cancelLabel: 'Keep it',
+                onConfirm: () => {
+                    CustomFetch(routes.destroy(entry.id), 'DELETE', {}, () => {
+                        toast.success('Deleted');
+                        load();
+                    }).catch(() => {});
+                },
+            });
+        },
+        [routes, load]
+    );
+
+    const restore = useCallback(
+        (entry) => {
+            CustomFetch(routes.restore(entry.id), 'POST', {}, () => {
+                toast.success('Restored');
+                load();
+            }).catch(() => {});
+        },
+        [routes, load]
+    );
+
+    const toggleSort = (key) => {
+        if (sort === key) {
+            setDirection((d) => (d === 'asc' ? 'desc' : 'asc'));
+        } else {
+            setSort(key);
+            setDirection(key === 'updated_at' ? 'desc' : 'asc');
+        }
+    };
+
+    /* ------------------------------------------------------------- render */
+
+    return (
+        <div className={styles.manager}>
+            <div className={styles.managerHead}>
+                <div>
+                    <h1 className={styles.pageTitle}>{pageTitle}</h1>
+                    <p className={styles.pageIntro}>
+                        Shared logins for the team, and your own private ones.
+                        Passwords and 2FA secrets are only ever revealed one at
+                        a time, and every reveal is logged.
+                    </p>
+                </div>
+
+                <button
+                    type="button"
+                    className={styles.primaryButton}
+                    onClick={() => {
+                        setPrefill(null);
+                        setEditing({});
+                    }}
+                >
+                    <Plus size={16} strokeWidth={2.2} aria-hidden="true" />
+                    New entry
+                </button>
+            </div>
+
+            <div className={styles.toolbar}>
+                <div className={styles.searchBar}>
+                    <Search size={16} strokeWidth={2} aria-hidden="true" />
+                    <input
+                        className={styles.searchInput}
+                        value={query}
+                        placeholder="Search by title, username, address or tag…"
+                        aria-label="Search the vault"
+                        onChange={(e) => setQuery(e.target.value)}
+                    />
+                    {loading && <Loader2 size={15} className={styles.spin} />}
+                </div>
+
+                <select
+                    className={styles.select}
+                    value={visibility}
+                    aria-label="Filter by visibility"
+                    onChange={(e) => setVisibility(e.target.value)}
+                >
+                    <option value="">All entries</option>
+                    <option value="shared">Shared only</option>
+                    <option value="private">Private only</option>
+                </select>
+
+                {canManage && (
+                    <label className={styles.inlineCheck}>
+                        <input
+                            type="checkbox"
+                            className={styles.checkControl}
+                            checked={includeDeleted}
+                            onChange={(e) => setIncludeDeleted(e.target.checked)}
+                        />
+                        <span>Show deleted</span>
+                    </label>
+                )}
+
+                {canManage && (
+                    <button
+                        type="button"
+                        className={styles.ghostButton}
+                        onClick={() => setLogFor('global')}
+                    >
+                        <History size={15} strokeWidth={2} aria-hidden="true" />
+                        Access log
+                    </button>
+                )}
+            </div>
+
+            {confirmRequired && (
+                <VaultConfirmPanel
+                    message={confirmMessage}
+                    error={confirmError}
+                    pending={confirmPending}
+                    onConfirm={confirm}
+                    onCancel={cancelConfirm}
+                />
+            )}
+
+            {fallback && (
+                <div className={styles.fallback}>
+                    <label htmlFor="vault-manager-fallback">
+                        {fallback.label} — copy it by hand
+                    </label>
+                    <input
+                        id="vault-manager-fallback"
+                        className={styles.fallbackInput}
+                        readOnly
+                        value={fallback.value}
+                        onFocus={(e) => e.target.select()}
+                    />
+                    <button
+                        type="button"
+                        className={styles.linkButton}
+                        onClick={() => setFallback(null)}
+                    >
+                        Done
+                    </button>
+                </div>
+            )}
+
+            <div
+                ref={listRef}
+                className={`${styles.tableWrap} ${
+                    listHeight != null ? styles.tableWrapFitted : ''
+                }`}
+                style={
+                    listHeight != null
+                        ? {
+                              height: `${listHeight}px`,
+                              overflowY: listScrolls ? 'auto' : 'hidden',
+                          }
+                        : undefined
+                }
+            >
+                <table className={styles.table}>
+                    <thead>
+                        <tr>
+                            {SORTS.map((column) => (
+                                <th key={column.key} scope="col">
+                                    <button
+                                        type="button"
+                                        className={styles.sortButton}
+                                        onClick={() => toggleSort(column.key)}
+                                        aria-label={`Sort by ${column.label}`}
+                                    >
+                                        {column.label}
+                                        {sort === column.key &&
+                                            (direction === 'asc' ? (
+                                                <ArrowUp size={13} strokeWidth={2} />
+                                            ) : (
+                                                <ArrowDown size={13} strokeWidth={2} />
+                                            ))}
+                                    </button>
+                                </th>
+                            ))}
+                            <th scope="col" className={styles.urlColumn}>
+                                URL
+                            </th>
+                            <th scope="col">Visibility</th>
+                            <th scope="col">2FA</th>
+                            <th scope="col" className={styles.actionsHead}>
+                                Actions
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {rows.map((entry) => {
+                            const host = hostFromUrl(entry.url);
+                            const url = openableUrl(entry.url);
+                            const deleted = Boolean(entry.deleted_at);
+
+                            return (
+                                <tr
+                                    key={entry.id}
+                                    className={deleted ? styles.deletedRow : ''}
+                                >
+                                    <td>
+                                        <strong>{entry.title}</strong>
+                                        {deleted && (
+                                            <span className={styles.deletedTag}>
+                                                Deleted
+                                            </span>
+                                        )}
+                                        {/* Shown only once the URL column
+                                            folds away below 1200px, so a
+                                            tablet still sees which site this
+                                            is for. */}
+                                        {host && (
+                                            <span className={styles.hostUnderTitle}>
+                                                {host}
+                                            </span>
+                                        )}
+                                        {Array.isArray(entry.tags) &&
+                                            entry.tags.length > 0 && (
+                                                <span className={styles.tagRow}>
+                                                    {entry.tags.map((tag) => (
+                                                        <span
+                                                            key={tag}
+                                                            className={styles.tagPill}
+                                                        >
+                                                            {tag}
+                                                        </span>
+                                                    ))}
+                                                </span>
+                                            )}
+                                    </td>
+                                    <td>
+                                        {/* Text only. Copying it is one of the
+                                            three buttons in the actions
+                                            cluster, so it exists once. */}
+                                        {entry.username || (
+                                            <span className={styles.muted}>—</span>
+                                        )}
+                                    </td>
+                                    <td className={styles.urlColumn}>
+                                        {url ? (
+                                            <a
+                                                href={url}
+                                                target="_blank"
+                                                rel="noopener noreferrer"
+                                                className={styles.hostLink}
+                                            >
+                                                {host}
+                                                <ExternalLink size={12} strokeWidth={2} />
+                                            </a>
+                                        ) : (
+                                            <span className={styles.muted}>—</span>
+                                        )}
+                                    </td>
+                                    <td>
+                                        <span
+                                            className={`${styles.pill} ${
+                                                entry.visibility === 'private'
+                                                    ? styles.pillPrivate
+                                                    : styles.pillShared
+                                            }`}
+                                        >
+                                            {entry.visibility === 'private' && (
+                                                <Lock size={11} strokeWidth={2.5} />
+                                            )}
+                                            {entry.visibility === 'private'
+                                                ? 'Private'
+                                                : 'Shared'}
+                                        </span>
+                                    </td>
+                                    <td>
+                                        {entry.has_totp ? (
+                                            <OtpChip
+                                                entryId={entry.id}
+                                                endpoints={routes}
+                                            />
+                                        ) : (
+                                            <span className={styles.muted}>—</span>
+                                        )}
+                                    </td>
+                                    <td className={styles.actionsCell}>
+                                        {deleted ? (
+                                            <button
+                                                type="button"
+                                                className={styles.actionPill}
+                                                onClick={() => restore(entry)}
+                                                aria-label={`Restore ${entry.title}`}
+                                            >
+                                                <RotateCcw size={14} strokeWidth={2} aria-hidden="true" />
+                                                Restore
+                                            </button>
+                                        ) : (
+                                            <div className={styles.actionCluster}>
+                                                {/* The three copies, always in
+                                                    this order and always all
+                                                    three, so the button under
+                                                    the pointer is the same one
+                                                    on every row. */}
+                                                <RowAction
+                                                    icon={User}
+                                                    onClick={() => copyUsername(entry)}
+                                                    disabled={!entry.username}
+                                                    copied={copied === `${entry.id}:username`}
+                                                    tooltip={
+                                                        entry.username
+                                                            ? 'Copy username'
+                                                            : 'No username on this entry'
+                                                    }
+                                                    label={`Copy the username for ${entry.title}`}
+                                                />
+
+                                                <RowAction
+                                                    icon={KeyRound}
+                                                    primary
+                                                    onClick={() => copyPassword(entry)}
+                                                    busy={revealingId === entry.id}
+                                                    copied={copied === `${entry.id}:password`}
+                                                    tooltip="Copy password"
+                                                    label={`Copy the password for ${entry.title}`}
+                                                />
+
+                                                <RowAction
+                                                    icon={ShieldCheck}
+                                                    onClick={() => copyOtp(entry)}
+                                                    disabled={!entry.has_totp}
+                                                    busy={otpBusyId === entry.id}
+                                                    copied={copied === `${entry.id}:otp`}
+                                                    tooltip={
+                                                        entry.has_totp
+                                                            ? 'Copy 2FA code'
+                                                            : 'No 2FA on this entry'
+                                                    }
+                                                    label={`Copy the 2FA code for ${entry.title}`}
+                                                />
+
+                                                {(entry.can_edit || canManage) && (
+                                                    <span
+                                                        className={styles.actionDivider}
+                                                        aria-hidden="true"
+                                                    />
+                                                )}
+
+                                                {/* Icon-only past the hairline,
+                                                    each with a tooltip: one row
+                                                    of actions is the point. */}
+                                                {entry.can_edit && (
+                                                    <RowAction
+                                                        icon={Pencil}
+                                                        label={`Edit ${entry.title}`}
+                                                        tooltip="Edit"
+                                                        onClick={() => {
+                                                            setPrefill(null);
+                                                            setEditing(entry);
+                                                        }}
+                                                    />
+                                                )}
+
+                                                {canManage && (
+                                                    <RowAction
+                                                        icon={History}
+                                                        label={`Access log for ${entry.title}`}
+                                                        tooltip="Access log"
+                                                        onClick={() => setLogFor(entry)}
+                                                    />
+                                                )}
+
+                                                {entry.can_edit && (
+                                                    <RowAction
+                                                        icon={Trash2}
+                                                        label={`Delete ${entry.title}`}
+                                                        tooltip="Delete"
+                                                        danger
+                                                        onClick={() => remove(entry)}
+                                                    />
+                                                )}
+                                            </div>
+                                        )}
+                                    </td>
+                                </tr>
+                            );
+                        })}
+
+                        {rows.length === 0 && !loading && (
+                            <tr>
+                                <td colSpan={6} className={styles.tableEmpty}>
+                                    {query.trim() === '' ? (
+                                        <>
+                                            <p>No passwords saved yet.</p>
+                                            <button
+                                                type="button"
+                                                className={styles.primaryButton}
+                                                onClick={() => {
+                                                    setPrefill(null);
+                                                    setEditing({});
+                                                }}
+                                            >
+                                                <Plus size={16} strokeWidth={2.2} aria-hidden="true" />
+                                                Add your first password
+                                            </button>
+                                        </>
+                                    ) : (
+                                        <>
+                                            <p>No matches for "{query.trim()}"</p>
+                                            <button
+                                                type="button"
+                                                className={styles.primaryButton}
+                                                onClick={() => {
+                                                    setPrefill({ title: query.trim() });
+                                                    setEditing({});
+                                                }}
+                                            >
+                                                <Plus size={16} strokeWidth={2.2} aria-hidden="true" />
+                                                Add "{query.trim()}"
+                                            </button>
+                                        </>
+                                    )}
+                                </td>
+                            </tr>
+                        )}
+                    </tbody>
+                </table>
+            </div>
+
+            <div ref={pagerRef} className={styles.pager}>
+                <span className={styles.muted}>
+                    {total} {total === 1 ? 'entry' : 'entries'}
+                    {visibility && ' (filtered on this page)'}
+                </span>
+                <div className={styles.pagerButtons}>
+                    <button
+                        type="button"
+                        className={styles.ghostButton}
+                        disabled={page <= 1 || loading}
+                        onClick={() => setPage((p) => Math.max(1, p - 1))}
+                    >
+                        Previous
+                    </button>
+                    <span className={styles.muted}>
+                        Page {page} of {lastPage}
+                    </span>
+                    <button
+                        type="button"
+                        className={styles.ghostButton}
+                        disabled={page >= lastPage || loading}
+                        onClick={() => setPage((p) => Math.min(lastPage, p + 1))}
+                    >
+                        Next
+                    </button>
+                </div>
+            </div>
+
+            {editing && (
+                <VaultEntryForm
+                    entry={editing.id ? editing : null}
+                    endpoints={routes}
+                    canManage={canManage}
+                    prefill={prefill || {}}
+                    onClose={() => {
+                        setEditing(null);
+                        setPrefill(null);
+                    }}
+                    onSaved={() => {
+                        setEditing(null);
+                        setPrefill(null);
+                        load();
+                    }}
+                />
+            )}
+
+            {logFor && (
+                <VaultAccessLog
+                    entry={logFor === 'global' ? null : logFor}
+                    endpoints={routes}
+                    onClose={() => setLogFor(null)}
+                />
+            )}
+        </div>
+    );
+};
+
+const VaultManager = withVaultNavigation(VaultManagerInner);
+
+export default VaultManager;