/* ELEV8 ATS - page and record chrome, plus the two panels that hang off it.
   Split out of app/shell.jsx (R144), unchanged. Topbar / PageHead / RecordHeader are the shared
   headers every screen composes; MobileBar is their phone equivalent. WorkspacePinButton and
   NotifyBell are the two chrome-level controls screens drop into those headers. AskAIPanel and
   SettingsScreen are the shell's own surfaces.
   Loaded before app/shell.jsx; cross-file references resolve at RENDER time. */

function WorkspacePinButton({ type, id, label, compact }) {
  useWorkspaceVersion();
  const persona = window.e8ActivePersona ? window.e8ActivePersona() : window.E8DATA.user;
  if (!persona || !window.E8Workspace) return null;
  const pinned = window.E8Workspace.isPinned(persona.name, type, id);
  return (
    <DS.Button
      variant="ghost"
      size="sm"
      icon={pinned ? 'keep' : 'keep_off'}
      iconOnly={compact}
      title={pinned ? 'Remove from saved work' : 'Save to focus set'}
      onClick={(e) => {
        e.stopPropagation();
        if (pinned) { window.E8Workspace.unpin(persona.name, type, id); return; }
        /* R124 contract: pin() reports the 12-cap instead of silently dropping. */
        const res = window.E8Workspace.pin(persona.name, { type, id });
        if (!res.ok && res.reason === 'limit' && window.e8ShowToast) {
          window.e8ShowToast('Pin limit reached (' + window.E8Workspace.pinLimit + ') - unpin something first');
        }
      }}
    >
      {compact ? null : (pinned ? 'Saved' : label || 'Save')}
    </DS.Button>
  );
}
function SettingsScreen() {
  const { showToast, theme = {} } = React.useContext(E8Ctx);
  const persona = workspacePersona();
  const [signals, setSignals] = useSignals();
  const [notify, setNotify] = React.useState(() => (window.E8Notify ? window.E8Notify.state() : { supported: false }));
  const { confirm, dialog } = useConfirm();
  const dataMode = e8CurrentDataMode();
  const modes = [
    { id: 'light', label: 'Light', icon: 'light_mode' },
    { id: 'dark', label: 'Dark', icon: 'dark_mode' },
    { id: 'system', label: 'Auto', icon: 'contrast' },
  ];
  React.useEffect(() => (
    window.E8Events && window.E8Notify
      ? window.E8Events.subscribe(['notify:changed'], () => setNotify(window.E8Notify.state()))
      : undefined
  ), []);
  const notificationsOn = !!(notify.supported && notify.enabled && notify.permission === 'granted');
  const toggleNotifications = async () => {
    if (!window.E8Notify || !notify.supported) {
      if (showToast) showToast('Notifications are not available in this browser');
      return;
    }
    if (notificationsOn) {
      window.E8Notify.disable();
      if (showToast) showToast('Notifications off');
      return;
    }
    const result = await window.E8Notify.enable('workspace');
    if (showToast) {
      showToast(result.ok
        ? (result.pushed ? 'Notifications on - real push active' : 'Notifications on for this device')
        : result.reason === 'denied'
          ? 'Notifications are blocked in your browser settings'
          : 'Notifications not enabled');
    }
  };
  const openWorkspace = () => window.dispatchEvent(new CustomEvent('e8-open-workspace', { detail: { tab: 'navigation' } }));
  const chooseDataMode = (item) => {
    if (item.id === dataMode) return;
    confirm({
      title: 'Switch to ' + item.label.toLowerCase() + ' data?',
      body: item.sub + '. The app reloads. Records created in the current mode are kept and reappear when you switch back.',
      confirmLabel: 'Switch and reload',
      tone: 'primary',
      icon: item.icon,
      onConfirm: () => e8SwitchDataMode(item.id),
    });
  };
  return (
    <React.Fragment>
      <Topbar crumbs={[{ label: 'Settings' }]} />
      <div className="e8-content">
        <div className="e8-page e8-settings-page">
          <PageHead title="Settings" sub={'Personal preferences for ' + (persona ? persona.name : 'your workspace') + '. Organization policy remains owned by Ops.'} />
          <div className="e8-settings-layout">
            <main className="e8-settings-main">
              <section className="e8-settings-card" aria-labelledby="e8-settings-appearance">
                <header>
                  <span className="material-symbols-outlined" aria-hidden="true">palette</span>
                  <div><h2 id="e8-settings-appearance">Appearance</h2><p>Choose how the workspace looks on this device.</p></div>
                </header>
                <div className="e8-settings-field">
                  <span><b>Color mode</b><small>Use a light, dark, or system-matched interface.</small></span>
                  <div className="e8-settings-options" role="group" aria-label="Color mode">
                    {modes.map((item) => (
                      <button key={item.id} type="button" aria-pressed={theme.appearance === item.id}
                        onClick={() => theme.setAppearance && theme.setAppearance(item.id)}>
                        <span className="material-symbols-outlined" aria-hidden="true">{item.icon}</span>{item.label}
                      </button>
                    ))}
                  </div>
                </div>
                <div className="e8-settings-field">
                  <span><b>Accent</b><small>Reserved for actions, links, and selection. Every accent derives its own hover, wash and daybreak tints, and its text and button ink are solved for contrast &mdash; so no theme can be picked that reads badly.</small></span>
                  <div className="e8-settings-accents" role="group" aria-label="Accent color">
                    {(theme.themes || []).map((item) => (
                      <button key={item.key} type="button" aria-label={item.name} title={item.name} aria-pressed={theme.accent === item.key}
                        onClick={() => theme.setAccent && theme.setAccent(item.key)}>
                        <span style={{ background: item.key }} aria-hidden="true"></span>
                        <span>{item.name}</span>
                        {theme.accent === item.key ? <span className="material-symbols-outlined" aria-hidden="true">check</span> : null}
                      </button>
                    ))}
                  </div>
                </div>
              </section>

              <section className="e8-settings-card" aria-labelledby="e8-settings-interface">
                <header>
                  <span className="material-symbols-outlined" aria-hidden="true">view_quilt</span>
                  <div><h2 id="e8-settings-interface">Interface</h2><p>Adjust information density without changing the product identity.</p></div>
                </header>
                <div className="e8-settings-field">
                  <span><b>Workspace density</b><small>Controls the default spacing of shared work surfaces.</small></span>
                  <div className="e8-settings-options" role="group" aria-label="Workspace density">
                    {['comfortable', 'compact'].map((item) => (
                      <button key={item} type="button" aria-pressed={theme.density === item}
                        onClick={() => theme.setDensity && theme.setDensity(item)}>{item[0].toUpperCase() + item.slice(1)}</button>
                    ))}
                  </div>
                </div>
                <div className="e8-settings-field">
                  <span><b>Table row shading <span className="e8-settings-tag">(Sam Dever Mode)</span></b><small>Alternating row tint, so a long table does not lose your place. Hover and selection stay stronger than the tint at every setting.</small></span>
                  <div className="e8-settings-options" role="group" aria-label="Table row shading">
                    {['off', 'subtle', 'strong'].map((item) => (
                      <button key={item} type="button" aria-pressed={(theme.rowStripes || 'subtle') === item}
                        onClick={() => theme.setRowStripes && theme.setRowStripes(item)}>{item[0].toUpperCase() + item.slice(1)}</button>
                    ))}
                  </div>
                </div>
                <button type="button" className={'e8-settings-switch' + (theme.sidebarLabels ? ' is-on' : '')}
                  role="switch" aria-checked={!!theme.sidebarLabels}
                  onClick={() => theme.setSidebarLabels && theme.setSidebarLabels(!theme.sidebarLabels)}>
                  {/* R142 step 2: the rail has one caption now (the role label), not the five
                      group headings this used to name. */}
                  <span><b>Sidebar section label</b><small>Show the heading above your destinations.</small></span>
                  <span className="e8-settings-switch-track" aria-hidden="true"></span>
                </button>
              </section>
            </main>

            <aside className="e8-settings-side">
              <section className="e8-settings-card" aria-labelledby="e8-settings-notifications">
                <header>
                  <span className="material-symbols-outlined" aria-hidden="true">notifications</span>
                  <div><h2 id="e8-settings-notifications">Notifications</h2><p>Control alerts for approvals and new work.</p></div>
                </header>
                <button type="button" className={'e8-settings-switch' + (notificationsOn ? ' is-on' : '')}
                  role="switch" aria-checked={notificationsOn} disabled={!notify.supported} onClick={toggleNotifications}>
                  <span><b>Device notifications</b><small>{notify.supported ? (notificationsOn ? 'Enabled for this device' : 'Off for this device') : 'Not available in this browser'}</small></span>
                  <span className="e8-settings-switch-track" aria-hidden="true"></span>
                </button>
              </section>

              <section className="e8-settings-card" aria-labelledby="e8-settings-platform">
                <header>
                  <span className="material-symbols-outlined" aria-hidden="true">tune</span>
                  <div><h2 id="e8-settings-platform">Workspace and data</h2><p>Personalize navigation and prototype data.</p></div>
                </header>
                <button type="button" className={'e8-settings-switch' + (signals ? ' is-on' : '')}
                  role="switch" aria-checked={signals} onClick={() => setSignals(!signals)}>
                  <span><b>Platform signals</b><small>Show ELEV8 provenance marks.</small></span>
                  <span className="e8-settings-switch-track" aria-hidden="true"></span>
                </button>
                <div className="e8-settings-field">
                  <span><b>Prototype data</b><small>Changing datasets reloads the app.</small></span>
                  <div className="e8-settings-options e8-settings-data" role="group" aria-label="Prototype data">
                    {E8_DATA_MODES.map((item) => (
                      <button key={item.id} type="button" aria-pressed={dataMode === item.id} title={item.sub} onClick={() => chooseDataMode(item)}>
                        <span className="material-symbols-outlined" aria-hidden="true">{item.icon}</span>{item.label}
                      </button>
                    ))}
                  </div>
                </div>
                <DS.Button variant="secondary" size="sm" icon="tune" onClick={openWorkspace}>Customize navigation and views</DS.Button>
              </section>
            </aside>
          </div>
        </div>
      </div>
      {dialog}
    </React.Fragment>
  );
}
function MobileBar({ onMenu, onCmdK, onAskAI, action }) {
  return (
    <header className="e8-mobilebar">
      <button className="e8-mobilebar-btn" type="button" aria-label="Open menu" onClick={onMenu}>
        <span className="material-symbols-outlined">menu</span>
      </button>
      <span className="e8-mobilebar-brand">
        <span className="e8-logomark" aria-hidden="true">8</span>
        <span className="e8-logotype">ELEV8</span>
      </span>
      <span className="e8-mobilebar-actions">
        {action ? (
          <button className="e8-mobilebar-btn e8-mobilebar-ctx" type="button" aria-label={action.label} title={action.label} onClick={action.onClick}>
            <span className="material-symbols-outlined">{action.icon}</span>
            {action.badge ? <span className="e8-mobilebar-ctx-badge">{action.badge}</span> : null}
          </button>
        ) : null}
        <button className="e8-mobilebar-btn" type="button" aria-label="Search" onClick={onCmdK}><span className="material-symbols-outlined">search</span></button>
        <button className="e8-mobilebar-btn" type="button" aria-label="Ask AI" onClick={onAskAI}><span className="material-symbols-outlined">forum</span></button>
      </span>
    </header>
  );
}
/* ---------- Topbar / page header ---------- */
/* R145: the document title is a wayfinding signal and it was the only one that never moved.
   MEASURED across nine routes (Sarah Kim, recruiter, 1440x900) - #/today, #/jobs, #/sequences,
   #/approvals, #/today/approvals, #/tasks, #/agents, #/commissions, #/matching - document.title
   was the string "Stand8 ELEV8 ATS" on every one, and `document.title` appears nowhere in the
   app. Two tabs of the ATS, a bookmark and the browser's own history are all unidentifiable.
   The base name is READ from whatever the HTML shipped rather than restated here, so this cannot
   become another place the product is named. */
const E8_APP_TITLE = (typeof document !== 'undefined' && document.title) || 'ELEV8 ATS';
/* Two writers, deliberately, and they are a floor and a refinement rather than two opinions.
   shell.jsx sets the FLOOR from the route on every hashchange; Topbar refines it to the crumb,
   which knows the record's own name and the R124 origin substitution. Topbar alone was not enough
   and shipping it that way would have been a regression: MEASURED, #/home and #/settings render no
   Topbar at all, so walking Jobs -> Home left the tab reading "Job orders" while Home was on
   screen. A STALE title is worse than one that never moves. */
function e8SetDocumentTitle(label) {
  document.title = label ? label + ' · ' + E8_APP_TITLE : E8_APP_TITLE;
}
/* The title has TWO writers, and the first version let the wrong one win. shell.jsx's route floor
   fires on EVERY hashchange; this effect is keyed on `label`, which does NOT change when you move
   between tabs of one record - the crumb tail is still that record's name. So the floor ran last
   and replaced "NBCUniversal" with "Clients" while the record was still on screen. Measured on all
   six record types: #/client/cl-nbcuniversal/contacts, #/job/JO-10866/matching,
   #/candidate/c-okafor/notes, #/contact/.../activity, #/consultant/.../timesheets and every
   engagement section.
   So the crumb CLAIMS the title while it is mounted, and the floor defers to that claim - which is
   what makes it a floor rather than an override. Two things this must not break, both of which the
   floor exists to prevent: it re-asserts on hashchange (this effect will not re-run for a move
   inside one record), and on unmount it hands the title back by calling the floor, so leaving a
   record for a screen with no crumb (#/home, #/settings) does not strand the record's name in the
   tab. */
function useDocumentTitle(label) {
  React.useEffect(() => {
    if (typeof label !== 'string' || !label) return undefined;
    const claim = () => { window.__e8TitleOwner = label; e8SetDocumentTitle(label); };
    claim();
    window.addEventListener('hashchange', claim);
    return () => {
      window.removeEventListener('hashchange', claim);
      if (window.__e8TitleOwner !== label) return;
      window.__e8TitleOwner = null;
      if (typeof window.e8SyncRouteTitle === 'function') window.e8SyncRouteTitle();
    };
  }, [label]);
}
/* `after` (R124): navigation/utility controls that sit directly after the breadcrumb - the
   record shell puts prev/next chevrons and the copy-id chip there, keeping the right side to
   the screen's workflow actions. */
function Topbar({ crumbs = [], after, actions }) {
  /* Swap the static parent for the place you actually came from, when navigate() recorded one.
     Read from the live hash rather than a prop so no screen has to opt in: every existing
     `crumbs={…}` call site keeps its shape, and a pasted link or reload (no `from`) falls back to
     the static parent unchanged. */
  const shown = React.useMemo(() => {
    const raw = (location.hash || '').replace(/^#\/?/, '');
    const [path, queryStr] = raw.split('?');
    if (!e8RecordPage(path.split('/')[0]) || crumbs.length < 2) return crumbs;
    const m = /(?:^|&)from=([^&]*)/.exec(queryStr || '');
    if (!m || !m[1]) return crumbs;
    let origin;
    try { origin = decodeURIComponent(m[1]); } catch (e) { return crumbs; }
    if (!origin) return crumbs;
    const next = crumbs.slice();
    next[0] = { label: e8OriginLabel(origin), to: origin, noOrigin: true };
    return next;
  }, [crumbs, location.hash]);
  /* Keyed on the STRING, not on `shown`: every call site passes a fresh `crumbs={[…]}` literal, so
     the memo above returns a new array identity on every render and an array dep would re-fire the
     effect forever. A crumb label is normally a string; anything else is not a title. */
  const last = shown.length ? shown[shown.length - 1].label : null;
  useDocumentTitle(typeof last === 'string' ? last : null);
  return (
    <div className="e8-topbar">
      <div className="e8-crumb">
        {shown.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 ? <span className="material-symbols-outlined">chevron_right</span> : null}
            {i === shown.length - 1 ? <b>{c.label}</b> : <a onClick={() => c.to && navigate(c.to, c.noOrigin ? { origin: false } : undefined)}>{c.label}</a>}
          </React.Fragment>
        ))}
      </div>
      {after ? <span className="e8-topbar-after">{after}</span> : null}
      <div className="e8-topbar-actions">{actions}</div>
      {/* R118: the global pills live IN the bar, after each screen's own actions - in normal
          flow they cannot cover a "New message" button the way the old fixed overlay could. */}
      <span className="e8-topbar-pills">
        <WorkShortcut />
        <InboxShortcut />
      </span>
    </div>
  );
}

/* Shared in-page header: canonical title (.e8-h1) + optional subtitle + right-aligned actions.
   Adopt across screens to kill the h1-size / header-layout drift. */
function PageHead({ title, sub, actions, children }) {
  return (
    <div className="e8-pagehead">
      <div className="e8-pagehead-main">
        <h1 className="e8-h1">{title}</h1>
        {sub ? <div className="e8-pagehead-sub">{sub}</div> : null}
        {children}
      </div>
      {actions ? <div className="e8-pagehead-actions">{actions}</div> : null}
    </div>
  );
}

/* Shared RECORD-detail header: mark/avatar + title row (with status badges) + meta line + optional
   right-aligned actions. One layout so candidate/client/contact/consultant/CSM headers stop drifting. */
function RecordHeader({ mark, title, badges, meta, actions }) {
  return (
    <div className="e8-rechead">
      {mark ? <div className="e8-rechead-mark">{mark}</div> : null}
      <div className="e8-rechead-main">
        <div className="e8-rechead-titlerow">
          <h1 className="e8-h1">{title}</h1>
          {badges}
        </div>
        {meta ? <div className="e8-rechead-meta">{meta}</div> : null}
      </div>
      {actions ? <div className="e8-rechead-actions">{actions}</div> : null}
    </div>
  );
}
/* ---------- Ask AI panel ---------- */
const ASK_SUGGESTIONS = {
  job: ['Summarize this job’s pipeline health', 'Draft a submittal note for Daniel Okafor', 'Why is Priya Raman ranked below Daniel?'],
  candidate: ['Summarize Daniel’s screening call', 'Draft outreach for similar profiles', 'Compare Daniel with Aisha Patel'],
  clients: ['Which clients are cooling off?', 'Draft a QBR agenda for NBCUniversal', 'Who hasn’t been touched in two weeks?'],
  client: ['Summarize this relationship', 'Draft a QBR agenda', 'What’s at risk here right now?'],
  sequences: ['Which sequence gets the best replies?', 'Draft a new step for quiet sponsors', 'Who replied this week?'],
  contacts: ['Who should I re-engage this week?', 'Draft a check-in for Frank Davila', 'Which sponsors are slowing approvals?'],
  contact: ['Summarize this relationship', 'Draft an email to this contact', 'What are they waiting on from us?'],
  inbox: ['Summarize my unread messages', 'Draft a reply to Daniel Okafor', 'Which threads are waiting on me?'],
  approvals: ['What’s safe to approve in one pass?', 'Which drafts touch NBCUniversal?', 'Summarize what the agents did overnight'],
  notes: ['Summarize this week’s intake calls', 'What did Janet ask for in the kickoff?', 'Draft a note from my last call'],
  agents: ['What did the agents do today?', 'Where should I raise autonomy?', 'What’s waiting on my review?'],
  engagements: ['Which renewals are at risk?', 'Draft Omar Haddad’s escalation', 'Summarize care-call sentiment this month'],
  renewals: ['Which renewals are at risk?', 'Draft a renewal email for Devon Carter', 'What rates changed since last term?'],
  submissions: ['Which submittals need a nudge?', 'Summarize client feedback this week', 'Draft prep notes for Carla’s interview'],
  voice: ['Summarize today’s screening calls', 'Who qualified this morning?', 'Queue callbacks for missed calls'],
  default: ['What needs my attention today?', 'Which renewals are at risk?', 'Draft a morning update for my pod'],
};

function AskAIPanel({ route, onClose, open }) {
  const persona = window.e8ActivePersona ? window.e8ActivePersona() : window.E8DATA.user;
  const personaName = persona.name || 'there';
  const welcomeMessage = () => ({ who: 'bot', text: `Hi ${personaName.split(' ')[0]} - I can help with the record you’re viewing. Replies identify their source context.` });
  const [msgs, setMsgs] = React.useState([welcomeMessage()]);
  const [val, setVal] = React.useState('');
  const aref = React.useRef(null);
  React.useEffect(() => {
    setMsgs([welcomeMessage()]);
    setVal('');
  }, [personaName]);
  useDialog(open, aref);
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [open]);
  const context =
    route.page === 'job' ? (route.id || 'JO-10864') + ' · job order'
    : route.page === 'jobs' ? 'Job orders'
    : route.page === 'candidate' ? 'Daniel Okafor · candidate'
    : route.page === 'voice' ? 'Voice ops'
    : route.page === 'clients' ? 'Clients'
    : route.page === 'client' ? 'Client record'
    : route.page === 'sequences' ? 'Sequences'
    : route.page === 'contacts' || route.page === 'contact' ? 'Contacts'
    : route.page === 'inbox' ? 'Inbox'
    : route.page === 'approvals' ? 'Approvals'
    : route.page === 'notes' ? 'Notes'
    : route.page === 'agents' || route.page === 'matching' ? 'Agents'
    : route.page === 'engagements' ? 'Engagements'
    : route.page === 'renewals' ? 'Renewals'
    : route.page === 'submissions' ? 'Submissions'
    : 'Workspace';
  const suggestions = ASK_SUGGESTIONS[route.page === 'jobs' ? 'job' : route.page] || ASK_SUGGESTIONS.default;
  const send = (text) => {
    if (!text.trim()) return;
    setMsgs((m) => [
      ...m,
      { who: 'user', text },
      { who: 'bot', text: 'Drafted - sources are the records on this page, cited inline. Review before it’s used anywhere; nothing sends without your approval.' },
    ]);
    setVal('');
  };
  return (
    <div className={'e8-ai-overlay' + (open ? ' is-open' : '')} onClick={onClose} aria-hidden={open ? undefined : true}>
    <aside ref={aref} className="e8-ai-panel" role="dialog" aria-modal="true" aria-label="Ask AI" onClick={(e) => e.stopPropagation()}>
      <div className="e8-ai-head">
        <span className="material-symbols-outlined" style={{ fontSize: 'var(--ui-icon-sm)' }}>forum</span>
        <b>Ask AI</b>
        <span className="e8-ui-push">
          <Button variant="ghost" size="sm" icon="close" iconOnly title="Close panel" onClick={onClose}></Button>
        </span>
      </div>
      <div className="e8-ai-body">
        <div className="e8-ai-context">
          <span className="material-symbols-outlined" style={{ fontSize: 'var(--ui-icon-xs)' }}>my_location</span>
          Acting on: {context}
        </div>
        {msgs.map((m, i) => (
          <div key={i} className={'e8-ai-msg ' + m.who}>{m.text}</div>
        ))}
        {msgs.length <= 1 ? (
          <window.Stack gap={6} mt={4}>
            {suggestions.map((s) => (
              <button key={s} type="button" className="e8-ai-suggest" onClick={() => send(s)}>{s}</button>
            ))}
          </window.Stack>
        ) : null}
      </div>
      <div className="e8-ai-foot">
        <DS.Input
          icon="forum"
          placeholder="Ask about this record…"
          value={val}
          onChange={(e) => setVal(e.target.value)}
          onKeyDown={(e) => { if (e.key === 'Enter') send(val); }}
        />
        <button type="button" className="e8-ai-universal" onClick={() => { onClose(); openHomeCommand(val.trim()); }}>
          <span className="material-symbols-outlined">auto_awesome</span>
          Open universal command
        </button>
      </div>
    </aside>
    </div>
  );
}
/* R80: one-tap notification opt-in for a work surface (Approvals, Time hub).
   Enabling turns on rung-1 local notifications immediately and attempts the real
   Web Push subscription (rung 2) - which activates once the API is deployed. */
function NotifyBell({ audience }) {
  const { showToast } = React.useContext(E8Ctx);
  const [st, setSt] = React.useState(() => (window.E8Notify ? window.E8Notify.state() : { supported: false }));
  React.useEffect(() => (window.E8Events ? window.E8Events.subscribe(['notify:changed'], () => setSt(window.E8Notify.state())) : undefined), []);
  if (!st.supported) return null;
  const on = st.enabled && st.permission === 'granted';
  const click = async () => {
    if (on) { window.E8Notify.disable(); showToast('Notifications off'); return; }
    const res = await window.E8Notify.enable(audience);
    if (res.ok) showToast(res.pushed ? 'Notifications on - real push active' : 'Notifications on for this device');
    else showToast(res.reason === 'denied' ? 'Notifications are blocked - enable them in your browser settings' : 'Notifications not enabled');
  };
  return <DS.Button variant="ghost" size="sm" icon={on ? 'notifications_active' : 'notifications'} iconOnly title={on ? 'Notifications on - click to turn off' : 'Notify me when new items land here'} onClick={click}></DS.Button>;
}