fix(app): improve launch input, fees and notifications

app/src/app/globals.css

@@ -192,6 +192,48 @@ input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
 }
 
 /* transaction toasts */
+.bb-toast-region {
+  position: fixed;
+  z-index: 50;
+  inset-inline: 12px;
+  top: calc(4.25rem + env(safe-area-inset-top, 0px));
+  pointer-events: none;
+}
+.bb-toast-card {
+  --toast-accent: var(--color-brand);
+  --toast-tint: var(--color-brand-soft);
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  pointer-events: auto;
+  border: 1px solid var(--color-line-strong);
+  border-radius: 16px;
+  background: var(--color-card);
+  box-shadow: var(--shadow-dialog), 0 2px 6px color-mix(in srgb, var(--color-ink) 6%, transparent);
+}
+.bb-toast-card[data-kind="buy"], .bb-toast-card[data-kind="collect"] { --toast-accent: var(--color-up); --toast-tint: var(--color-up-soft); }
+.bb-toast-card[data-kind="sell"] { --toast-accent: var(--color-down); --toast-tint: var(--color-down-soft); }
+.bb-toast-content { display: block; padding: 16px; border-radius: inherit; }
+.bb-toast-body { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding-right: 28px; }
+.bb-toast-identity { display: grid; place-items: center; align-self: start; width: 40px; height: 40px; border-radius: 12px; background: var(--toast-tint); color: var(--toast-accent); }
+.bb-toast-title { color: var(--color-ink); font-size: 14px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
+.bb-toast-description { margin-top: 4px; color: var(--color-body); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
+.bb-toast-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; font-size: 11px; line-height: 1.5; }
+.bb-toast-status { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--toast-accent); }
+.bb-toast-chain { color: var(--color-muted); }
+.bb-toast-destination { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--color-ink); font-weight: 500; transition: color 160ms ease; }
+.bb-toast-content:hover .bb-toast-destination { color: var(--toast-accent); }
+.bb-toast-dismiss { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--color-muted); cursor: pointer; transition: color 160ms ease, background-color 160ms ease, transform 160ms ease; }
+.bb-toast-dismiss:hover { color: var(--color-ink); background: var(--color-paper); }
+.bb-toast-dismiss:active { transform: scale(.94); }
+.bb-toast-content:focus-visible, .bb-toast-dismiss:focus-visible { outline: 2px solid var(--color-brand); outline-offset: -3px; }
+.bb-toast-queued { padding: 7px 16px 9px; border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
+.bb-toast-timer { position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--color-line); }
+.bb-toast-progress { display: block; height: 100%; background: var(--toast-accent); transform-origin: left; animation-name: bb-toast-lifetime; animation-timing-function: linear; animation-fill-mode: forwards; }
+@keyframes bb-toast-lifetime { from { transform: scaleX(1); } to { transform: scaleX(0); } }
+@media (min-width: 640px) {
+  .bb-toast-region { inset-inline: auto 24px; top: auto; bottom: 24px; width: 384px; }
+}
 @keyframes bb-toast-in {
   from { transform: translateY(12px) scale(0.98); opacity: 0; }
   to { transform: translateY(0) scale(1); opacity: 1; }
@@ -200,7 +242,7 @@ input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
   from { transform: translateY(0); opacity: 1; }
   to { transform: translateY(8px); opacity: 0; }
 }
-.bb-toast-in { animation: bb-toast-in 260ms cubic-bezier(0.2, 0.8, 0.2, 1) 1; }
+.bb-toast-in { animation: bb-toast-in 300ms cubic-bezier(0.16, 1, 0.3, 1) 1; }
 .bb-toast-out { animation: bb-toast-out 320ms ease-in 1 forwards; }
 
 /* one-shot confetti burst (own tx confirmed) */
@@ -216,6 +258,10 @@ input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
 @media (prefers-reduced-motion: reduce) {
   .bb-toast-in, .bb-toast-out, .bb-confetti, .bb-pop { animation: none; }
   .bb-confetti { display: none; }
+  .bb-toast-timer { display: none; }
+  .bb-toast-progress { animation: none; }
+  .bb-toast-dismiss, .bb-toast-destination { transition: none; }
+  .bb-toast-dismiss:active { transform: none; }
 }
 
 /* live list highlights */

app/src/components/HeaderNav.tsx

@@ -11,6 +11,7 @@ import Mark, { Wordmark } from "./launchpad/Mark";
 import { BRAND_X } from "@/lib/brand";
 import ConnectButton from "./ConnectButton";
 import ThemeToggle from "./ThemeToggle";
+import NotificationSettings from "./NotificationSettings";
 import LivePulse from "./launchpad/LivePulse";
 
 const NAV = [
@@ -98,6 +99,7 @@ function Desktop({ visible = false, pulse, isActive, quietCta }: { visible?: boo
       <NavLinks isActive={isActive} compact={visible} />
 
       <div className="relative z-20 ml-auto flex items-center gap-2">
+        <NotificationSettings />
         <ThemeToggle />
         <ConnectButton />
         {/* while the hero's CTA is on screen it owns the one filled blue; this one fills in once that has scrolled away */}
@@ -259,6 +261,7 @@ function Mobile({ visible = false, pulse, isActive }: { visible?: boolean; pulse
           <LivePulse initial={pulse} block />
           <div className="my-1 border-t border-line" aria-hidden />
           <XLink block />
+          <NotificationSettings block />
           <ThemeToggle block />
           <ConnectButton block onNavigate={() => setOpen(false)} />
           <LaunchCta block onNavigate={() => setOpen(false)} />

app/src/components/NotificationSettings.module.css

@@ -0,0 +1,71 @@
+.trigger {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: 1px solid var(--color-line);
+  border-radius: 999px;
+  background: var(--color-card);
+  color: var(--color-body);
+  cursor: pointer;
+  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
+}
+/* Larger hit area without widening the desktop instrument strip. */
+.trigger::before { content: ""; position: absolute; inset: -4px; border-radius: inherit; }
+.trigger:hover, .trigger[data-popup-open] { background: var(--color-line); border-color: var(--color-line-strong); color: var(--color-ink); }
+.bell { position: relative; display: flex; }
+.dot { position: absolute; top: -2px; right: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand); box-shadow: 0 0 0 2px var(--color-card); }
+.block { width: 100%; min-height: 48px; height: auto; padding: 12px; justify-content: start; gap: 12px; border-color: transparent; border-radius: 12px; font-size: 14px; font-weight: 500; }
+.block::before { display: none; }
+.triggerStatus { margin-left: auto; color: var(--color-muted); font-size: 12px; font-weight: 400; }
+.positioner { z-index: 70; }
+.backdrop { position: fixed; inset: 0; z-index: 69; background: color-mix(in srgb, var(--color-scrim) 55%, transparent); }
+.popup {
+  width: min(364px, calc(100vw - 24px));
+  max-height: min(var(--available-height), calc(100dvh - 24px));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 8px 20px 0;
+  background: var(--color-card);
+  color: var(--color-ink);
+  border: 1px solid var(--color-line-strong);
+  border-radius: 18px;
+  box-shadow: var(--shadow-dialog);
+  transform-origin: var(--transform-origin);
+  transition: opacity 180ms ease, transform 180ms cubic-bezier(.16, 1, .3, 1);
+}
+.popup[data-starting-style], .popup[data-ending-style] { opacity: 0; transform: translateY(-4px) scale(.98); }
+.popup:focus { outline: none; }
+.header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.title { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
+.close { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -12px; border-radius: 50%; color: var(--color-muted); cursor: pointer; transition: color 160ms ease, background 160ms ease; }
+.close:hover { background: var(--color-line); color: var(--color-ink); }
+.description { color: var(--color-body); font-size: 12px; line-height: 1.6; padding-bottom: 20px; }
+.preference { display: flex; width: calc(100% + 16px); margin: 0 -8px; padding: 16px 8px; align-items: center; gap: 16px; border-top: 1px solid var(--color-line); text-align: left; cursor: pointer; border-radius: 8px; transition: background 160ms ease; }
+.preference:hover { background: var(--color-paper); }
+.preferenceCopy { min-width: 0; flex: 1; }
+.label { display: block; color: var(--color-ink); font-size: 13px; font-weight: 500; line-height: 1.5; }
+.help { display: block; margin-top: 4px; font-size: 12px; line-height: 1.65; color: var(--color-body); text-wrap: pretty; }
+.switchControl { display: grid; justify-items: center; gap: 5px; flex-shrink: 0; }
+.track { display: block; width: 42px; height: 24px; padding: 2px; border: 1px solid var(--color-line-strong); border-radius: 999px; background: var(--color-line); transition: background 180ms ease, border-color 180ms ease; }
+.thumb { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--color-body); color: var(--color-inverse); transition: transform 180ms cubic-bezier(.16, 1, .3, 1), background 180ms ease; }
+.preference[aria-checked="true"] .track { background: var(--color-brand); border-color: var(--color-brand); }
+.preference[aria-checked="true"] .thumb { transform: translateX(18px); background: var(--color-inverse); color: var(--color-brand); }
+.switchState { color: var(--color-muted); font-size: 11px; line-height: 1.5; }
+.personal { display: flex; align-items: flex-start; gap: 10px; padding: 18px 0 20px; border-top: 1px solid var(--color-line); }
+.personal > svg { flex-shrink: 0; margin-top: 1px; color: var(--color-up); }
+.personal > div { min-width: 0; flex: 1; }
+.personalHeading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; }
+.always { font-size: 11px; color: var(--color-up); white-space: nowrap; }
+.footer { margin: 0 -20px; padding: 14px 20px; border-top: 1px solid var(--color-line); background: var(--color-paper); color: var(--color-muted); font-size: 11px; line-height: 1.7; text-wrap: pretty; }
+.trigger:focus-visible, .popup button:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; }
+.mobilePositioner { inset: auto 12px max(12px, env(safe-area-inset-bottom)) !important; transform: none !important; width: auto !important; display: flex; justify-content: center; }
+.mobilePositioner .popup { width: min(100%, 384px); max-height: calc(100dvh - 32px - env(safe-area-inset-bottom)); transform-origin: bottom center; }
+.mobilePositioner .popup[data-starting-style], .mobilePositioner .popup[data-ending-style] { transform: translateY(10px); }
+@media (prefers-reduced-motion: reduce) {
+  .trigger, .popup, .close, .preference, .track, .thumb { transition: none; }
+  .popup[data-starting-style], .popup[data-ending-style], .mobilePositioner .popup[data-starting-style], .mobilePositioner .popup[data-ending-style] { transform: none; }
+}

app/src/components/NotificationSettings.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useId, useRef, useState } from "react";
+import { Popover } from "@base-ui/react/popover";
+import { Bell, Check, ShieldCheck, X } from "lucide-react";
+import { setActivityNotifications, useActivityNotifications } from "@/lib/launchpad/activity-preference";
+import styles from "./NotificationSettings.module.css";
+
+/** One preference for ambient activity. Your own transaction feedback cannot be muted. */
+export default function NotificationSettings({ block = false }: { block?: boolean }) {
+  const enabled = useActivityNotifications();
+  const [open, setOpen] = useState(false);
+  const popup = useRef<HTMLDivElement>(null);
+  const id = useId();
+
+  return (
+    <Popover.Root open={open} onOpenChange={setOpen} modal={block}>
+      <Popover.Trigger
+        className={`${styles.trigger} ${block ? styles.block : ""}`}
+        aria-label="Notification settings"
+        title="Notification settings"
+      >
+        <span className={styles.bell}><Bell size={17} strokeWidth={1.8} aria-hidden />{enabled ? <span className={styles.dot} /> : null}</span>
+        {block ? <><span>Notifications</span><span className={styles.triggerStatus}>{enabled ? "Live on" : "Personal only"}</span></> : null}
+      </Popover.Trigger>
+      <Popover.Portal>
+        {block ? <Popover.Backdrop className={styles.backdrop} /> : null}
+        <Popover.Positioner side="bottom" align="end" sideOffset={10} collisionPadding={12} positionMethod="fixed" className={`${styles.positioner} ${block ? styles.mobilePositioner : ""}`}>
+          <Popover.Popup
+            ref={popup}
+            initialFocus={popup}
+            className={styles.popup}
+            aria-modal={block || undefined}
+            onKeyDown={(event) => {
+              // Dismiss this panel without also closing the mobile navigation.
+              if (event.key === "Escape") { event.preventDefault(); event.stopPropagation(); setOpen(false); }
+            }}
+          >
+            <div className={styles.header}>
+              <Popover.Title className={styles.title}>Notifications</Popover.Title>
+              <Popover.Close className={styles.close} aria-label="Close notification settings"><X size={17} aria-hidden /></Popover.Close>
+            </div>
+            <Popover.Description className={styles.description}>Choose what interrupts your browsing.</Popover.Description>
+            <button
+              type="button"
+              role="switch"
+              aria-checked={enabled}
+              aria-labelledby={`${id}-activity`}
+              aria-describedby={`${id}-description`}
+              className={styles.preference}
+              onClick={() => setActivityNotifications(!enabled)}
+            >
+              <span className={styles.preferenceCopy}>
+                <span id={`${id}-activity`} className={styles.label}>Live activity notifications</span>
+                <span id={`${id}-description`} className={styles.help}>Popups for other traders’ launches, buys and sells.</span>
+              </span>
+              <span className={styles.switchControl} aria-hidden>
+                <span className={styles.track}><span className={styles.thumb}>{enabled ? <Check size={12} strokeWidth={2.4} /> : null}</span></span>
+                <span className={styles.switchState}>{enabled ? "On" : "Off"}</span>
+              </span>
+            </button>
+            <div className={styles.personal}>
+              <ShieldCheck size={18} strokeWidth={1.7} aria-hidden />
+              <div><div className={styles.personalHeading}><span className={styles.label}>Your transactions</span><span className={styles.always}>Always on</span></div><p className={styles.help}>Confirmations and important notices still appear.</p></div>
+            </div>
+            <p className={styles.footer}>Saved in this browser. The activity feed stays live.</p>
+          </Popover.Popup>
+        </Popover.Positioner>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}

app/src/components/launchpad/LaunchFeeSettings.module.css

@@ -0,0 +1,58 @@
+.section { padding: 20px; min-width: 0; }
+.heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
+.heading h2 { color: var(--color-ink); font-size: 14px; font-weight: 600; }
+.platform { color: var(--color-up); font-size: 12px; font-weight: 600; }
+.intro { margin-top: 6px; color: var(--color-body); font-size: 13px; line-height: 1.6; }
+.fieldset { min-width: 0; padding: 0; border: 0; }
+.rates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; border-bottom: 1px solid var(--color-line); }
+.rate { position: relative; display: flex; min-width: 0; flex-direction: column; gap: 4px; padding: 15px 12px 16px; border-radius: 10px 10px 0 0; color: var(--color-ink); cursor: pointer; transition: background-color 180ms ease-out, color 180ms ease-out; }
+.rate::after { position: absolute; right: 12px; bottom: -1px; left: 12px; height: 2px; background: transparent; content: ""; transition: background-color 180ms ease-out; }
+.rate:hover { background: var(--color-paper); }
+.rate[data-selected="true"] { color: var(--color-brand); background: var(--color-brand-soft); }
+.rate[data-selected="true"]::after { background: var(--color-brand); }
+.rate input { position: absolute; top: 16px; right: 12px; }
+.rate input, .route input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--color-brand); cursor: pointer; }
+.rateValue { font-size: 24px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
+.rateCaption { color: var(--color-body); font-size: 11px; line-height: 1.5; }
+.rate[data-selected="true"] .rateCaption { color: var(--color-brand); }
+.rate:has(input:focus-visible), .route:has(input:focus-visible) { outline: 2px solid var(--color-brand); outline-offset: 3px; }
+.routing { margin-top: 28px; }
+.routing legend { color: var(--color-ink); font-size: 13px; font-weight: 600; }
+.routeHelp { color: var(--color-body); font-size: 12px; line-height: 1.6; margin-top: 5px; }
+.routes { margin-top: 12px; }
+.route { display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 13px 2px; color: var(--color-muted); border-bottom: 1px solid var(--color-line); cursor: pointer; transition: color 180ms ease-out; }
+.route > svg { flex-shrink: 0; }
+.route:hover, .route[data-selected="true"] { color: var(--color-brand); }
+.routeCopy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; }
+.routeTitle { color: var(--color-ink); font-size: 13px; font-weight: 600; }
+.route[data-selected="true"] .routeTitle { color: var(--color-brand); }
+.routeDescription { color: var(--color-body); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
+.custom { margin-top: 16px; }
+.custom > label { display: block; margin-bottom: 8px; color: var(--color-ink); font-size: 12px; font-weight: 600; }
+.custom input { min-width: 0; }
+.custom input::placeholder { color: var(--color-muted); }
+.custom input[aria-invalid="true"] { border-color: var(--color-down); }
+.error { margin-top: 6px; color: var(--color-down); font-size: 12px; line-height: 1.6; }
+.summary { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--color-line); }
+.summaryTitle { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; }
+.summaryTitle h3 { color: var(--color-ink); font-size: 13px; font-weight: 600; }
+.summaryTitle > span { color: var(--color-muted); font-size: 11px; }
+.breakdown { display: grid; gap: 8px; margin-top: 14px; color: var(--color-body); font-size: 12px; }
+.breakdown > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
+.breakdown dd { color: var(--color-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
+.breakdown dd.platform { color: var(--color-up); }
+.destination { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; color: var(--color-muted); font-size: 11px; }
+.destination > span { color: var(--color-body); font-family: var(--font-mono); overflow-wrap: anywhere; }
+.example { margin-top: 14px; color: var(--color-body); font-size: 12px; line-height: 1.7; }
+.example strong { color: var(--color-ink); font-weight: 500; }
+.permanent { display: flex; gap: 8px; align-items: flex-start; margin-top: 20px; color: var(--color-muted); font-size: 11px; line-height: 1.6; }
+.permanent svg { flex-shrink: 0; margin-top: 2px; }
+@media (max-width: 390px) {
+  .rate { padding-right: 8px; padding-left: 8px; }
+  .rate input { right: 8px; top: 14px; width: 13px; height: 13px; }
+  .rateValue { font-size: 22px; }
+  .rateCaption { max-width: 8ch; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .rate, .rate::after, .route { transition: none; }
+}