Refine gameday and navbar UI

frontend/src/App.tsx

@@ -24,6 +24,23 @@ function getRouteDestinationLabel(pathname: string) {
   }
 }
 
+function getNavbarPageLabel(pathname: string) {
+  switch (pathname) {
+    case "/":
+      return "Home";
+    case "/library":
+      return "Walkup Clips";
+    case "/gameday":
+      return "Gameday";
+    case "/profile":
+      return "Profile";
+    case "/admin":
+      return "Admin";
+    default:
+      return "";
+  }
+}
+
 function ProtectedRoute({ children }: { children: ReactElement }) {
   const location = useLocation();
   const { data, isLoading } = useSession();
@@ -210,6 +227,7 @@ function ShellLayout() {
   const [navOpen, setNavOpen] = useState(false);
   const walkup = useWalkupContext();
   const location = useLocation();
+  const currentPageLabel = getNavbarPageLabel(location.pathname);
   const showNavbar = walkup.sessionQuery.data?.authenticated === true;
   const showTeamSelectionModal = walkup.isTeamSnap && walkup.teamsQuery.isFetched && !walkup.hasSelectedTeam;
   const shellClassName = showNavbar ? "shell is-authenticated" : "shell is-authless";
@@ -235,9 +253,14 @@ function ShellLayout() {
       {showNavbar ? (
         <header className="navbar navbar-expand-lg navbar-dark bg-dark shadow-sm sticky-top px-3 py-2">
           <div className="container-fluid gap-3 align-items-center">
-            <div className="navbar-brand d-grid gap-0">
-              <span className="text-uppercase small text-info-emphasis">Baseball audio ops</span>
-              <span className="fw-semibold fs-4 lh-1 text-white">Walkup</span>
+            <div className="navbar-brand d-flex align-items-center gap-3 mb-0">
+              <span className="site-brand-mark" aria-hidden="true">
+                <i className="bi bi-person-walking" />
+              </span>
+              <div className="site-brand-copy">
+                <span className="fw-semibold fs-4 lh-1 text-white">Walkup</span>
+                {currentPageLabel ? <span className="current-page-label d-lg-none">{currentPageLabel}</span> : null}
+              </div>
             </div>
             <button
               type="button"

frontend/src/pages/GamedayPage.tsx

@@ -265,14 +265,6 @@ export function GamedayPage() {
           </div>
         </div>
       ) : null}
-      <div className="hero">
-        <p className="eyebrow">Gameday mode</p>
-        <h1>{selectedGame ? formatGameTitle(selectedGame) : "Select a game for gameday"}</h1>
-        <p>
-          Any player can run gameday. The player list now follows the event lineup first, then RSVP order, and each expanded
-          row keeps pinned clips at the top of the player&apos;s library.
-        </p>
-      </div>
       <div className="panel-grid">
         <div className="panel">
           <div className="d-grid gap-2">
@@ -363,12 +355,10 @@ export function GamedayPage() {
               const availability = (availabilityQuery.data ?? []).find(
                 (entry) => String(entry.memberId) === memberId,
               ) ?? null;
-              const pinCount = assignmentList.filter((assignment) => assignment.external_player_id === memberId).length;
               const isExpanded = memberId === expandedPlayerId;
               const expansionId = `player-clips-${memberId}`;
               const availabilityStatusCode = availability?.statusCode ?? null;
               const playerMeta = [
-                pinCount ? `${pinCount} pinned clip${pinCount === 1 ? "" : "s"}` : null,
                 lineupEntry?.label ?? null,
               ].filter(Boolean);
 

frontend/src/styles.css

@@ -126,6 +126,27 @@ select {
   font-style: normal;
 }
 
+.site-brand-mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--accent-soft);
+  font-size: 1.4rem;
+  line-height: 1;
+  margin-left: 0.15rem;
+}
+
+.site-brand-copy {
+  display: grid;
+  gap: 0.16rem;
+}
+
+.current-page-label {
+  color: rgba(255, 255, 255, 0.68);
+  font-size: 0.72rem;
+  line-height: 1.2;
+}
+
 .clip-list-add-button .bootstrap-icon {
   font-size: 1.2rem;
 }