@xeplr/ui-account 1.0.0 → 1.0.2

package/src/designs/ChangePasswordSample.jsx

@@ -1,16 +1,16 @@
 import './auth.css';
 
+// error/success feedback fires as a snackbar (see useChangePasswordController.js)
+// — this design doesn't render it inline.
 export default function ChangePasswordSample({
   currentPassword, setCurrentPassword,
   newPassword, setNewPassword,
   confirmPassword, setConfirmPassword,
-  error, success, loading, handleSubmit
+  loading, handleSubmit
 }) {
   return (
     <div className="xeplr-auth-container">
       <h1>Change Password</h1>
-      {error && <div className="xeplr-auth-alert xeplr-auth-alert-error">{error}</div>}
-      {success && <div className="xeplr-auth-alert xeplr-auth-alert-success">{success}</div>}
       <form onSubmit={handleSubmit}>
         <div className="xeplr-auth-form-group">
           <label htmlFor="xeplr-current-password">Current Password</label>

package/src/designs/ForgotPasswordSample.jsx

@@ -1,12 +1,12 @@
 import { Link } from 'react-router-dom';
 import './auth.css';
 
-export default function ForgotPasswordSample({ email, setEmail, error, success, loading, handleSubmit }) {
+// error/success feedback fires as a snackbar (see useForgotPasswordController.js)
+// — this design doesn't render it inline.
+export default function ForgotPasswordSample({ email, setEmail, loading, handleSubmit }) {
   return (
     <div className="xeplr-auth-container">
       <h1>Forgot Password</h1>
-      {error && <div className="xeplr-auth-alert xeplr-auth-alert-error">{error}</div>}
-      {success && <div className="xeplr-auth-alert xeplr-auth-alert-success">{success}</div>}
       <form onSubmit={handleSubmit}>
         <div className="xeplr-auth-form-group">
           <label htmlFor="xeplr-email">Email</label>

package/src/designs/LoginSample.jsx

@@ -1,11 +1,12 @@
 import { Link } from 'react-router-dom';
 import './auth.css';
 
-export default function LoginSample({ email, setEmail, password, setPassword, error, loading, handleSubmit }) {
+// error/success feedback fires as a snackbar (see useLoginController.js) —
+// this design doesn't render it inline.
+export default function LoginSample({ email, setEmail, password, setPassword, loading, handleSubmit }) {
   return (
     <div className="xeplr-auth-container">
       <h1>Login</h1>
-      {error && <div className="xeplr-auth-alert xeplr-auth-alert-error">{error}</div>}
       <form onSubmit={handleSubmit}>
         <div className="xeplr-auth-form-group">
           <label htmlFor="xeplr-email">Email</label>

package/src/designs/NavDrawer.jsx

@@ -0,0 +1,194 @@
+import { memo, useState, useMemo } from 'react';
+import AccountMenu from './AccountMenu.jsx';
+import NotificationsBell from './NotificationsBell.jsx';
+
+// The ENTIRE nav when drawerItems is non-empty — NavPage renders this instead
+// of (never alongside) the top bar, see pages.jsx. A pure overlay: `position:
+// fixed` (nav.css), pinned to (0,0), full height — it never pushes or resizes
+// anything else on the page, completely decoupled from the app's own content.
+// Two states: icon-only (collapsed, `drawerOpen=false`) and
+// icon+label+groups+search+promo (expanded). Toggled by clicking its own
+// logo. Settings + notifications live in its footer (bottom-pinned) instead
+// of a top bar, since there isn't one — same accountItems/notifications the
+// top bar would have gotten, just rendered here instead.
+//
+// Items are bucketed by their optional `group` — ungrouped items render first
+// (no header), grouped ones under a section header, groups in first-seen order.
+function bucketItems(items) {
+  var ungrouped = [];
+  var groupOrder = [];
+  var groups = {};
+  items.forEach(function(item) {
+    if (!item.group) {
+      ungrouped.push(item);
+      return;
+    }
+    if (!groups[item.group]) {
+      groups[item.group] = [];
+      groupOrder.push(item.group);
+    }
+    groups[item.group].push(item);
+  });
+  return { ungrouped: ungrouped, groupOrder: groupOrder, groups: groups };
+}
+
+function NavDrawer({
+  drawerOpen, toggleDrawer, drawerItems, expandedLogo, logo, drawerPromo,
+  user, accountItems, notifications, accountOpen, toggleAccount, closeAccount, accountRef, logout,
+  hideFooterIcons,
+  drawerWidth, drawerResizing, startDrawerResize, resetDrawerWidth, nudgeDrawerWidth, drawerWidthBounds
+}) {
+  var [query, setQuery] = useState('');
+
+  var bounds = drawerWidthBounds || { min: 180, max: 480, step: 16 };
+
+  // Arrow keys resize, Home/End jump to the stops — the handle is focusable,
+  // so everything the drag does has to be reachable from the keyboard too.
+  function onResizeKeyDown(e) {
+    if (e.key === 'ArrowLeft') { e.preventDefault(); nudgeDrawerWidth(-bounds.step); }
+    else if (e.key === 'ArrowRight') { e.preventDefault(); nudgeDrawerWidth(bounds.step); }
+    else if (e.key === 'Home') { e.preventDefault(); nudgeDrawerWidth(-Infinity); }
+    else if (e.key === 'End') { e.preventDefault(); nudgeDrawerWidth(Infinity); }
+    else if (e.key === 'Enter') { e.preventDefault(); resetDrawerWidth(); }
+  }
+
+  var visibleItems = useMemo(function() {
+    if (!drawerOpen || !query.trim()) return drawerItems;
+    var q = query.trim().toLowerCase();
+    return drawerItems.filter(function(item) { return item.name.toLowerCase().indexOf(q) !== -1; });
+  }, [drawerItems, query, drawerOpen]);
+
+  var buckets = useMemo(function() { return bucketItems(visibleItems); }, [visibleItems]);
+
+  function renderItem(item) {
+    // A COUNT THAT HAS TO BE SEEN FROM WHEREVER YOU ARE.
+    //
+    // Optional `item.badge` — a number or a short string. It renders as a pill
+    // beside the label when the drawer is expanded and as a dot on the icon
+    // when it is collapsed, because the collapsed rail is the state most
+    // people leave it in and a badge only visible when expanded is a badge
+    // that does not do its job.
+    //
+    // 0, null and undefined all render NOTHING. A pill reading "0" is noise
+    // that trains people to stop looking at the pill.
+    var badge = item.badge === 0 || item.badge == null || item.badge === '' ? null : item.badge;
+    return (
+      <button
+        key={item.name}
+        type="button"
+        className={'xeplr-nav-drawer-link' + (badge ? ' xeplr-nav-drawer-link-badged' : '')}
+        onClick={item.clickHandler}
+        // The count belongs in the tooltip too — the collapsed dot says
+        // "something", and the hover has to say how many.
+        title={badge ? item.name + ' (' + badge + ')' : item.name}
+      >
+        {item.icon && (
+          <span className="xeplr-nav-drawer-icon">
+            {item.icon}
+            {badge && !drawerOpen && <span className="xeplr-nav-drawer-dot" aria-hidden="true" />}
+          </span>
+        )}
+        {drawerOpen && <span className="xeplr-nav-drawer-label">{item.name}</span>}
+        {drawerOpen && badge && <span className="xeplr-nav-drawer-badge">{badge}</span>}
+      </button>
+    );
+  }
+
+  return (
+    <aside
+      className={
+        'xeplr-nav-drawer'
+        + (drawerOpen ? ' xeplr-nav-drawer-expanded' : ' xeplr-nav-drawer-collapsed')
+        + (drawerResizing ? ' xeplr-nav-drawer-resizing' : '')
+      }
+      /* Inline width ONLY when expanded — collapsed is the fixed icon rail and
+         nav.css keeps owning that number. Inline because it changes per
+         pointermove; a stylesheet cannot express a live drag. */
+      style={drawerOpen && drawerWidth ? { width: drawerWidth + 'px' } : undefined}
+    >
+      <button
+        type="button"
+        className="xeplr-nav-drawer-toggle"
+        onClick={toggleDrawer}
+        aria-label={drawerOpen ? 'Collapse menu' : 'Expand menu'}
+        aria-expanded={drawerOpen}
+      >
+        {/* ONE MARK AT A TIME.
+            expandedLogo is a stacked icon+wordmark lockup — it CONTAINS this
+            icon — so rendering both put the same mark on screen twice, one
+            above the other. Collapsed, the icon is the brand and the thing you
+            click to expand; open, the lockup is the brand and this is only the
+            collapse control, which the chevron says better than a second copy
+            of the logo. */}
+        {drawerOpen && expandedLogo
+          ? <span className="xeplr-nav-drawer-collapse" aria-hidden="true">«</span>
+          : (logo && <img src={logo} alt="" className="xeplr-nav-drawer-logo" />)}
+      </button>
+      {/* Own row below the toggle, not squeezed inline beside it — a stacked
+          lockup needs real height to stay legible, not the icon's 22px. */}
+      {drawerOpen && expandedLogo && (
+        <img src={expandedLogo} alt="" className="xeplr-nav-drawer-expanded-logo" />
+      )}
+
+      {drawerOpen && (
+        <input
+          type="search"
+          className="xeplr-nav-drawer-search"
+          placeholder="Search"
+          value={query}
+          onChange={function(e) { setQuery(e.target.value); }}
+        />
+      )}
+
+      <nav className="xeplr-nav-drawer-links">
+        {buckets.ungrouped.map(renderItem)}
+        {buckets.groupOrder.map(function(groupName) {
+          return (
+            <div key={groupName} className="xeplr-nav-drawer-group">
+              {drawerOpen && <div className="xeplr-nav-drawer-group-label">{groupName}</div>}
+              {buckets.groups[groupName].map(renderItem)}
+            </div>
+          );
+        })}
+        {visibleItems.length === 0 && drawerOpen && <div className="xeplr-nav-drawer-empty">No matches</div>}
+      </nav>
+
+      {drawerOpen && drawerPromo && <div className="xeplr-nav-drawer-promo">{drawerPromo}</div>}
+
+      {!hideFooterIcons && (
+        <div className="xeplr-nav-drawer-footer">
+          <NotificationsBell notifications={notifications} label={drawerOpen ? 'Notifications' : undefined} />
+          <AccountMenu
+            placement="top" triggerLabel={drawerOpen ? 'Settings' : undefined}
+            user={user} accountItems={accountItems}
+            accountOpen={accountOpen} toggleAccount={toggleAccount} closeAccount={closeAccount}
+            accountRef={accountRef} logout={logout}
+          />
+        </div>
+      )}
+
+      {/* LAST child and absolutely positioned, so it sits over the drawer's
+          right border at any height without taking part in the column layout
+          above it. Only when expanded: there is nothing to widen on a 60px
+          icon rail, and a resize handle there would just fight the toggle. */}
+      {drawerOpen && (
+        <div
+          className="xeplr-nav-drawer-resize"
+          role="separator"
+          aria-orientation="vertical"
+          aria-label="Resize menu"
+          aria-valuenow={drawerWidth}
+          aria-valuemin={bounds.min}
+          aria-valuemax={bounds.max}
+          tabIndex={0}
+          onPointerDown={startDrawerResize}
+          onDoubleClick={resetDrawerWidth}
+          onKeyDown={onResizeKeyDown}
+          title="Drag to resize — double-click to reset"
+        />
+      )}
+    </aside>
+  );
+}
+
+export default memo(NavDrawer);

package/src/designs/NavFloatingSettings.jsx

@@ -0,0 +1,25 @@
+import { memo } from 'react';
+import AccountMenu from './AccountMenu.jsx';
+import NotificationsBell from './NotificationsBell.jsx';
+import './nav.css';
+
+// A minimal top-right overlay — just the notifications bell + account/settings
+// trigger, no logo/middle slot/header bar around them. Opt-in via NavPage's
+// `floatingSettings` prop, for layouts (e.g. an icon drawer) that want these
+// two floating over the page instead of pinned to the drawer's own footer.
+function NavFloatingSettings({
+  user, accountItems, notifications, accountOpen, toggleAccount, closeAccount, accountRef, logout
+}) {
+  return (
+    <div className="xeplr-nav-floating">
+      <NotificationsBell notifications={notifications} />
+      <AccountMenu
+        user={user} accountItems={accountItems}
+        accountOpen={accountOpen} toggleAccount={toggleAccount} closeAccount={closeAccount}
+        accountRef={accountRef} logout={logout}
+      />
+    </div>
+  );
+}
+
+export default memo(NavFloatingSettings);

package/src/designs/NavTopSample.jsx

@@ -0,0 +1,34 @@
+import { memo } from 'react';
+import AccountMenu from './AccountMenu.jsx';
+import NotificationsBell from './NotificationsBell.jsx';
+import './nav.css';
+
+// The (default, swappable via NavPage's `design` prop) top bar: 10% / 80% / 10%
+// columns. Only ever rendered when there's NO drawer — NavPage renders the
+// drawer instead of this, never both (see pages.jsx). Left holds the small
+// `logo`, middle is `navMiddle` (a fully exposed slot, e.g. an app's
+// company/workspace picker), right is always the settings trigger plus the
+// notifications bell when `notifications` is set.
+function NavTopSample({
+  logo, navMiddle,
+  user, accountItems, notifications, accountOpen, toggleAccount, closeAccount, accountRef, logout
+}) {
+  return (
+    <header className="xeplr-nav xeplr-nav-top">
+      <div className="xeplr-nav-left">
+        {logo && <img src={logo} alt="" className="xeplr-nav-logo" />}
+      </div>
+      <div className="xeplr-nav-middle">{navMiddle}</div>
+      <div className="xeplr-nav-right">
+        <NotificationsBell notifications={notifications} />
+        <AccountMenu
+          user={user} accountItems={accountItems}
+          accountOpen={accountOpen} toggleAccount={toggleAccount} closeAccount={closeAccount}
+          accountRef={accountRef} logout={logout}
+        />
+      </div>
+    </header>
+  );
+}
+
+export default memo(NavTopSample);

package/src/designs/NotificationsBell.jsx

@@ -0,0 +1,31 @@
+import { memo } from 'react';
+
+// Its own control, separate from AccountMenu on purpose — memoized independently
+// so a notification count changing doesn't re-render the account dropdown (and
+// vice versa). `notifications` is optional; omit it to hide the bell entirely.
+// Wire a real feed later (open a popover, etc.) without touching the other parts.
+// `label` is optional text shown next to the icon — the drawer passes
+// "Notifications" when expanded (matching how its other items show a label),
+// omits it when collapsed; the top bar never passes it (icon-only, no room).
+function NotificationsBell({ notifications, label }) {
+  if (!notifications) return null;
+  var count = notifications.count;
+
+  return (
+    <button
+      type="button"
+      className={'xeplr-nav-bell' + (label ? ' xeplr-nav-bell-labeled' : '')}
+      onClick={notifications.onClick}
+      aria-label={count > 0 ? count + ' unread notifications' : 'Notifications'}
+    >
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
+        <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+      </svg>
+      {count > 0 && <span className="xeplr-nav-badge">{count > 9 ? '9+' : count}</span>}
+      {label && <span className="xeplr-nav-bell-label">{label}</span>}
+    </button>
+  );
+}
+
+export default memo(NotificationsBell);

package/src/designs/ProfileSample.jsx

@@ -1,7 +1,9 @@
 import './auth.css';
 
+// error/success feedback fires as a snackbar (see useProfileController.js) —
+// this design doesn't render it inline.
 export default function ProfileSample({
-  form, error, success, loading, fetching, handleChange, handleSubmit
+  form, loading, fetching, handleChange, handleSubmit
 }) {
   if (fetching) {
     return (
@@ -14,8 +16,6 @@ export default function ProfileSample({
   return (
     <div className="xeplr-auth-container">
       <h1>Profile</h1>
-      {error && <div className="xeplr-auth-alert xeplr-auth-alert-error">{error}</div>}
-      {success && <div className="xeplr-auth-alert xeplr-auth-alert-success">{success}</div>}
       <form onSubmit={handleSubmit}>
         <div className="xeplr-auth-form-group">
           <label htmlFor="xeplr-profile-name">Name</label>

package/src/designs/RegisterSample.jsx

@@ -1,12 +1,12 @@
 import { Link } from 'react-router-dom';
 import './auth.css';
 
-export default function RegisterSample({ form, error, success, loading, handleChange, handleSubmit }) {
+// error/success feedback fires as a snackbar (see useRegisterController.js) —
+// this design doesn't render it inline.
+export default function RegisterSample({ form, loading, handleChange, handleSubmit }) {
   return (
     <div className="xeplr-auth-container">
       <h1>Register</h1>
-      {error && <div className="xeplr-auth-alert xeplr-auth-alert-error">{error}</div>}
-      {success && <div className="xeplr-auth-alert xeplr-auth-alert-success">{success}</div>}
       <form onSubmit={handleSubmit}>
         <div className="xeplr-auth-form-group">
           <label htmlFor="xeplr-name">Name</label>

package/src/designs/ResetPasswordSample.jsx

@@ -1,11 +1,13 @@
 import { Link } from 'react-router-dom';
 import './auth.css';
 
-export default function ResetPasswordSample({ token, password, setPassword, error, success, loading, handleSubmit }) {
+// error/success feedback fires as a snackbar (see useResetPasswordController.js,
+// including the "invalid link" case) — this design doesn't render it inline,
+// it just switches which block is visible.
+export default function ResetPasswordSample({ token, password, setPassword, success, loading, handleSubmit }) {
   if (!token && !success) {
     return (
       <div className="xeplr-auth-container">
-        <div className="xeplr-auth-alert xeplr-auth-alert-error">Invalid reset link</div>
         <div className="xeplr-auth-links">
           <p><Link to="/auth/forgot-password">Request a new reset link</Link></p>
         </div>
@@ -16,14 +18,10 @@ export default function ResetPasswordSample({ token, password, setPassword, erro
   return (
     <div className="xeplr-auth-container">
       <h1>Reset Password</h1>
-      {error && <div className="xeplr-auth-alert xeplr-auth-alert-error">{error}</div>}
       {success && (
-        <>
-          <div className="xeplr-auth-alert xeplr-auth-alert-success">{success}</div>
-          <div className="xeplr-auth-links">
-            <p><Link to="/auth/login">Go to Login</Link></p>
-          </div>
-        </>
+        <div className="xeplr-auth-links">
+          <p><Link to="/auth/login">Go to Login</Link></p>
+        </div>
       )}
       {!success && (
         <form onSubmit={handleSubmit}>

package/src/designs/admin.css

@@ -3,8 +3,14 @@
 /* ─── xeplr Admin Matrix ─── */
 
 .xeplr-admin-container {
-  max-width: 1200px;
-  margin: 20px auto;
+  /* Fill the available height of whatever container the host app uses
+     (e.g. the architects app's `.content` area) so the table area scrolls
+     internally instead of leaving empty whitespace below. */
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
   padding: 20px;
   border: 1px solid var(--xeplr-border-primary);
   border-radius: 8px;
@@ -165,7 +171,11 @@
 /* ─── Matrix Table ─── */
 
 .xeplr-admin-matrix-wrapper {
-  overflow-x: auto;
+  /* Fills remaining height inside the flex column container so the table
+     scrolls internally and the header/tabs/toolbar stay pinned at top. */
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
   border: 1px solid var(--xeplr-border-primary);
   border-radius: 6px;
 }

package/src/designs/auth.css

@@ -82,22 +82,16 @@
   text-decoration: underline;
 }
 
+/* In-progress status text (e.g. "Activating your account...") — error/success
+   feedback fires as a snackbar instead (see the use*Controller.js hooks), so
+   there's no -error/-success modifier here anymore. */
 .xeplr-auth-alert {
   padding: 10px 15px;
   border-radius: 4px;
   margin-bottom: 15px;
-}
-
-.xeplr-auth-alert-error {
-  background: var(--xeplr-danger-bg);
-  color: var(--xeplr-danger);
-  border: 1px solid var(--xeplr-danger-border);
-}
-
-.xeplr-auth-alert-success {
-  background: var(--xeplr-success-bg);
-  color: var(--xeplr-success);
-  border: 1px solid var(--xeplr-success-border);
+  background: var(--xeplr-info-bg);
+  color: var(--xeplr-info);
+  border: 1px solid var(--xeplr-info-border);
 }
 
 .xeplr-auth-not-activated {
@@ -110,51 +104,3 @@
   color: var(--xeplr-warning);
   margin: 20px 0;
 }
-
-/* Tenant Picker */
-.xeplr-tenant-picker {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  margin-top: 16px;
-}
-
-.xeplr-tenant-option {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 4px;
-  padding: 16px;
-  border: 1px solid var(--xeplr-border-primary, #333);
-  border-radius: 8px;
-  background: var(--xeplr-bg-secondary, #222);
-  cursor: pointer;
-  transition: all 0.15s;
-  text-align: left;
-  width: 100%;
-}
-
-.xeplr-tenant-option:hover {
-  border-color: var(--xeplr-accent, #646cff);
-  background: var(--xeplr-bg-active, #1a1a2a);
-}
-
-.xeplr-tenant-name {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--xeplr-text-primary, #e0e0e0);
-}
-
-.xeplr-tenant-code {
-  font-size: 12px;
-  font-family: monospace;
-  color: var(--xeplr-tag-text, #9999cc);
-  background: var(--xeplr-tag-bg, #2a2a3a);
-  padding: 2px 6px;
-  border-radius: 3px;
-}
-
-.xeplr-tenant-desc {
-  font-size: 13px;
-  color: var(--xeplr-text-muted, #777);
-}

package/src/designs/index.js

@@ -9,5 +9,8 @@ export { default as ProfileSample } from './ProfileSample.jsx';
 export { default as UserRolesMatrixSample } from './UserRolesMatrixSample.jsx';
 export { default as AccessMatrixSample } from './AccessMatrixSample.jsx';
 export { default as MasterSettingsSample } from './MasterSettingsSample.jsx';
-export { default as TenantSample } from './TenantSample.jsx';
-export { default as TenantPickerSample } from './TenantPickerSample.jsx';
+export { default as NavTopSample } from './NavTopSample.jsx';
+export { default as AccountMenu } from './AccountMenu.jsx';
+export { default as NavDrawer } from './NavDrawer.jsx';
+export { default as NavFloatingSettings } from './NavFloatingSettings.jsx';
+export { default as NotificationsBell } from './NotificationsBell.jsx';