Merge pull request #84 from zonghaoyuan/fix/header-icon-alignment

fix(web): hide login button when logged out to fix header icon alignment
This commit is contained in:
Zonghao Yuan
2026-06-15 17:51:08 +08:00
committed by GitHub
3 changed files with 4 additions and 21 deletions
+1 -1
View File
@@ -1666,7 +1666,7 @@ export default function HomePage() {
> >
<i className="fa-brands fa-x-twitter" /> <i className="fa-brands fa-x-twitter" />
</a> </a>
<UserChip onLoginClick={() => setAuthModalOpen(true)} /> <UserChip />
</div> </div>
</header> </header>
+1 -1
View File
@@ -2574,7 +2574,7 @@ function PlayInner() {
<span className="text-clay-300">·</span> <span className="text-clay-300">·</span>
<span>{String(beatCount).padStart(3, "0")} · </span> <span>{String(beatCount).padStart(3, "0")} · </span>
</div> </div>
<UserChip onLoginClick={() => setAuthModalOpen(true)} /> <UserChip />
</div> </div>
</header> </header>
+2 -19
View File
@@ -5,11 +5,7 @@ import { AUTH_ENABLED } from "@/lib/supabase/config";
import { createClient } from "@/lib/supabase/client"; import { createClient } from "@/lib/supabase/client";
import type { AuthChangeEvent, Session, User } from "@supabase/supabase-js"; import type { AuthChangeEvent, Session, User } from "@supabase/supabase-js";
export function UserChip({ export function UserChip() {
onLoginClick,
}: {
onLoginClick: () => void;
}) {
const [user, setUser] = useState<User | null>(null); const [user, setUser] = useState<User | null>(null);
const [menuOpen, setMenuOpen] = useState(false); const [menuOpen, setMenuOpen] = useState(false);
@@ -32,20 +28,7 @@ export function UserChip({
setMenuOpen(false); setMenuOpen(false);
}, []); }, []);
if (!AUTH_ENABLED) return null; if (!AUTH_ENABLED || !user) return null;
if (!user) {
return (
<button
type="button"
onClick={onLoginClick}
className="flex items-center gap-1.5 rounded-full border border-cream-50/15 bg-cream-50/[0.06] px-3 py-1.5 text-[11px] text-cream-50/70 transition-colors hover:bg-cream-50/[0.12] hover:text-cream-50/90"
>
<i className="fa-solid fa-right-to-bracket text-[10px]" />
</button>
);
}
const label = const label =
user.user_metadata?.full_name ?? user.user_metadata?.full_name ??