change layout of login

Makefile

@@ -4,10 +4,11 @@ IMAGE ?= cms-demo
 TAG ?= latest
 REGISTRY_IMAGE ?= batty1039.startdedicated.net:5000/cms-demo
 
-.PHONY: help ui backend demo production run test check docker docker-push docker-run clean
+.PHONY: help ui frontend backend demo production run test check docker docker-push docker-run clean
 
 help:
 	@echo "make ui         build the React app into cmd/server/web/dist"
+	@echo "make frontend   run the Vite UI with API changes proxied to :8080"
 	@echo "make backend    run the Go server on :8080 (serves the last UI build)"
 	@echo "make demo       run the in-memory demo profile"
 	@echo "make production run the SSO production profile"
@@ -30,6 +31,12 @@ ui:
 	mkdir -p cmd/server/web/dist
 	cp -R ui/dist/. cmd/server/web/dist/
 
+frontend:
+	@if [ ! -d ui/app/node_modules ]; then \
+		npm --prefix ui/app ci; \
+	fi
+	npm --prefix ui/app run dev -- --host 0.0.0.0
+
 backend:
 	set -a; [ ! -f .env ] || . ./.env; set +a; \
 	go run ./cmd/server

cmd/server/web/dist/placeholder.txt

@@ -1 +0,0 @@
-Frontend assets are generated by `make ui` or the CI workflow before building.

ui/app/src/components/Shell.tsx

@@ -6,7 +6,7 @@ import {type DemoUser} from '../models'
 import {SudoTerminal} from './SudoTerminal'
 
 export function Shell({children}: {children: ReactNode}) {
-  const {authenticated, loading, canSignIn, signIn, username, sudo, signOut} = useAuth()
+  const {authenticated, loading, canSignIn, signIn, username, sudo} = useAuth()
   const [sudoOpen, setSudoOpen] = useState(false)
   const [helpOpen, setHelpOpen] = useState(false)
   const [users, setUsers] = useState<DemoUser[]>([])
@@ -23,16 +23,15 @@ export function Shell({children}: {children: ReactNode}) {
       <Link className="brand" to="/content"><span className="brand-prompt">~/</span> Urpi's backlog
         <span className="brand-cursor">_</span><small>linux · go · java · ideas</small></Link>
       <div className="header-actions">
-        {!loading && <span className="mode-badge">{authenticated ? `${username ?? 'Owner'} · sudo` : 'Anonymous · read-only'}</span>}
+        {!loading && <button className="mode-badge" type="button" onClick={() => {
+          if (authenticated) return
+          if (users.length > 0) setSudoOpen(true)
+          else if (canSignIn) signIn()
+        }}>
+          {authenticated ? `${username ?? 'Owner'} · sudo` : 'Anonymous · read-only'}
+        </button>}
         <button className="theme-button" type="button" aria-label="Demo users"
           onClick={() => setHelpOpen(value => !value)}>?</button>
-        {!loading && !authenticated && users.length > 0 &&
-          <button className="theme-button" type="button" onClick={() => setSudoOpen(true)}>sudo</button>}
-        {!loading && authenticated && users.length > 0 &&
-          <button className="theme-button" type="button" onClick={signOut}>logout</button>}
-        {!loading && !authenticated && canSignIn &&
-          <button className="google-button session-button" type="button" onClick={signIn}>
-            <span aria-hidden="true">G</span> Sign in with Google</button>}
         <button className="theme-button" type="button" aria-label={`Switch to ${dark ? 'light' : 'dark'} theme`}
           onClick={() => setDark(value => !value)}>{dark ? '☀ Light' : '☾ Dark'}</button>
       </div>

ui/app/src/styles.css

@@ -26,6 +26,7 @@ button, select { cursor: pointer; }
 .theme-button { border: 1px solid #45475a; border-radius: 8px; background: #313244; color: #bac2de; padding: 8px 12px; }
 .theme-button:hover { border-color: #cba6f7; color: #f5e0e8; }
 .mode-badge { border: 1px solid #45475a; border-radius: 999px; padding: 6px 11px; color: #a6adc8; background: #242438; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
+.mode-badge:hover { border-color: #cba6f7; color: #f5e0e8; }
 .google-button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #585b70; border-radius: 8px; background: #313244; color: #cdd6f4; cursor: pointer; padding: 8px 12px; font-weight: 650; }
 .google-button:hover { background: #45475a; border-color: #89b4fa; }
 .google-button span { color: #89b4fa; font-weight: 800; }