From d9c4a7130de487ed0e0a695fef92d08b4cdcec85 Mon Sep 17 00:00:00 2001
From: holke <103380539+holkexyz@users.noreply.github.com>
Date: Thu, 11 Jun 2026 11:16:13 +0000
Subject: [PATCH] fix(ux): single search field, clearer disabled states,
 marketing-nav redundancy, empty-banner hint
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

UX + visual polish (P2 long tail):

- Explore: drop the top-bar global "Search Certified" field on /explore.
  The page already renders its own contextual "Search Certified" input
  (which doubles as the cross-kind filter), so both showed at every
  width >=800px — a duplicate. Explore now owns the single search field.

- Button: make the disabled state of filled variants (primary /
  destructive) unambiguous. Half-opacity left the brand fill looking
  "active"; disabled filled buttons now drop to a flat sunken fill +
  muted text + subtle border that clearly reads as inert. Outline / text
  variants (secondary / ghost) keep the lighter opacity dim, and the
  loading state keeps opacity so the spinner stays legible. Enabled
  appearance is unchanged. Covers Publish activity / Publish project /
  Sync from Bluesky, which all use the shared <Button>.

- Marketing nav: signed-out /welcome now drops the desktop top bar
  entirely. The landing is self-contained (hero "Sign in with Certified"
  CTA + footer), so the top bar's search + Explore/Apps/Help icon row +
  a second "Sign in" were redundant. Signed-in viewers keep the bar to
  navigate out.

- Edit-profile: the empty banner box gets a neutral guidance hint
  ("Add a banner image ... 3:1") instead of a featureless gradient
  rectangle. Decorative (aria-hidden) since the "Change banner" button
  already carries the accessible affordance.

Deliberately out of scope (other PRs own the file): the project_new
title placeholder weight and the disabled "Save changes" pill both live
in cert-detail.css / profile-edit.css. Apps-grid card hover affordance
and the icon-wrap radius are already spec-compliant on staging (var(--radius),
hover lift/shadow); the remaining icon-corner mismatch is baked into the
source logo images, not CSS.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/app/styles/profile-inline-edit.css    | 19 +++++++++++++++++++
 src/components/layout/desktop-top-bar.tsx | 23 ++++++++++++++++++++---
 src/components/profile/banner-upload.tsx  | 11 ++++++++++-
 src/components/ui/button.tsx              | 17 ++++++++++++++++-
 4 files changed, 65 insertions(+), 5 deletions(-)

diff --git a/src/app/styles/profile-inline-edit.css b/src/app/styles/profile-inline-edit.css
index 5982c153..ad400cf0 100644
--- a/src/app/styles/profile-inline-edit.css
+++ b/src/app/styles/profile-inline-edit.css
@@ -186,6 +186,25 @@
   outline-offset: -2px;
 }
 
+/* Centered guidance line for the empty banner box — gives the blank
+   gradient rectangle a purpose ("this is your banner; 3:1") instead of
+   reading as a featureless placeholder. Padded clear of the floating
+   "Change banner" pill in the bottom-right corner. */
+.profile-banner-upload__hint {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px 16px 44px;
+  text-align: center;
+  font-family: var(--font-inter), system-ui, sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  color: var(--fg-muted);
+  pointer-events: none;
+}
+
 .profile-banner-upload__img {
   width: 100%;
   height: 100%;
diff --git a/src/components/layout/desktop-top-bar.tsx b/src/components/layout/desktop-top-bar.tsx
index 3e2cc665..9fcc54a2 100644
--- a/src/components/layout/desktop-top-bar.tsx
+++ b/src/components/layout/desktop-top-bar.tsx
@@ -229,6 +229,12 @@ export default function DesktopTopBar() {
   // stays the primary "discard" action.
   const isOnCreatePage = pathname === "/create" || pathname === "/project/new";
   const showBackRow = isOnCertDetail || isOnProjectDetail || isOnCreatePage;
+  // /explore renders its own contextual "Search Certified" field inside the
+  // page chrome (it doubles as the cross-kind filter), so the top-bar's
+  // global search field is a redundant second "Search Certified" input at
+  // every width ≥800px. Suppress the top-bar copy there — Explore owns the
+  // search affordance on its own surface.
+  const isOnExplore = pathname === "/explore";
   // Settings is its own standalone surface now (reachable from the
   // site drawer); no tab strip there. The edit-profile page is the one
   // exception — it borrows the profile strip (locked to Overview, see
@@ -344,6 +350,15 @@ export default function DesktopTopBar() {
 
   if (isLoading) return null;
 
+  // Marketing landing (/welcome), signed out: the page is self-contained —
+  // it owns its own hero "Sign in with Certified" CTA and the footer. The
+  // full app chrome here (global search + Explore/Apps/Help icon nav + a
+  // second top-right "Sign in") is redundant against that hero CTA, so the
+  // top bar drops out entirely. Signed-in viewers keep the bar so they can
+  // navigate back out of the marketing page. (The mobile <Navbar> already
+  // renders /welcome as a transparent overlay for signed-out viewers.)
+  if (pathname === "/welcome" && !isAuthenticated) return null;
+
   const tabHref = (tab: ProfileTab) => {
     if (tab.href) return tab.href;
     if (!pathname) return "#";
@@ -414,9 +429,11 @@ export default function DesktopTopBar() {
         </div>
 
         <div className="desktop-top-bar__right">
-          <div className="desktop-top-bar__search">
-            <GlobalSearch placeholder="Search Certified" />
-          </div>
+          {isOnExplore ? null : (
+            <div className="desktop-top-bar__search">
+              <GlobalSearch placeholder="Search Certified" />
+            </div>
+          )}
 
           {isAuthenticated ? (
             <div
diff --git a/src/components/profile/banner-upload.tsx b/src/components/profile/banner-upload.tsx
index 84462a31..36ded159 100644
--- a/src/components/profile/banner-upload.tsx
+++ b/src/components/profile/banner-upload.tsx
@@ -125,7 +125,16 @@ const BannerUpload: React.FC<BannerUploadProps> = ({
             className="profile-banner-upload__img"
             onError={() => setImgFailed(true)}
           />
-        ) : null}
+        ) : (
+          // Neutral guidance hint for the otherwise-featureless empty
+          // box. Sets reader expectations (what the banner is, the crop)
+          // instead of leaving a blank gradient rectangle. aria-hidden:
+          // the "Change banner" button already carries the accessible
+          // affordance, so the hint is decorative for screen readers.
+          <span className="profile-banner-upload__hint" aria-hidden="true">
+            Add a banner image — shown across the top of your profile (3:1)
+          </span>
+        )}
 
         <div className="profile-banner-upload__btn-row">
           <button
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 85825eb1..3d23c840 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -75,7 +75,22 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       icon: "h-11 w-11 md:h-10 md:w-10 p-0 text-sm",
     };
 
-    const disabledStyles = disabled || loading ? "opacity-50 cursor-not-allowed" : "";
+    // Disabled treatment. Filled variants (primary / destructive) read as
+    // ambiguous at half opacity — the brand fill still looks "active" — so a
+    // disabled filled button drops to a flat sunken fill + muted text + a
+    // subtle border that is unmistakably inert. Outline / text variants
+    // (secondary / ghost) already read clearly when dimmed, so they keep the
+    // lighter opacity treatment. While `loading`, every variant keeps the
+    // opacity dim so the spinner stays legible over the original fill.
+    const filledDisabledStyles =
+      "disabled:!bg-[var(--bg-sunken)] disabled:!text-[var(--fg-muted)] disabled:!border disabled:!border-[var(--border-default)] disabled:hover:!opacity-100 disabled:hover:!bg-[var(--bg-sunken)]";
+    const disabledStyles = !(disabled || loading)
+      ? ""
+      : loading
+        ? "opacity-50 cursor-not-allowed"
+        : variant === "primary" || variant === "destructive"
+          ? `cursor-not-allowed ${filledDisabledStyles}`
+          : "opacity-50 cursor-not-allowed";
 
     // Active visual for toggle buttons. Only secondary/ghost have an "off" look
     // distinct enough that a pressed state reads as on; primary/destructive keep