feat: add login button to header and conditional edit UI

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-03 13:29:01 +02:00
parent 87a367d41b
commit 511fece4c7
2 changed files with 26 additions and 1 deletions

View File

@@ -1,4 +1,5 @@
import { Link } from "@tanstack/react-router"; import { Link } from "@tanstack/react-router";
import { useAuth, useLogout } from "../hooks/useAuth";
import { useUpdateSetting } from "../hooks/useSettings"; import { useUpdateSetting } from "../hooks/useSettings";
import { useTotals } from "../hooks/useTotals"; import { useTotals } from "../hooks/useTotals";
import { useWeightUnit } from "../hooks/useWeightUnit"; import { useWeightUnit } from "../hooks/useWeightUnit";
@@ -19,6 +20,9 @@ export function TotalsBar({
linkTo, linkTo,
}: TotalsBarProps) { }: TotalsBarProps) {
const { data } = useTotals(); const { data } = useTotals();
const { data: auth } = useAuth();
const logout = useLogout();
const isAuthenticated = !!auth?.user;
const unit = useWeightUnit(); const unit = useWeightUnit();
const updateSetting = useUpdateSetting(); const updateSetting = useUpdateSetting();
@@ -100,6 +104,24 @@ export function TotalsBar({
))} ))}
</div> </div>
)} )}
<div className="flex items-center gap-2 ml-auto">
{isAuthenticated ? (
<button
type="button"
onClick={() => logout.mutate()}
className="text-xs text-gray-500 hover:text-gray-700 transition-colors"
>
Sign out
</button>
) : (
<Link
to="/login"
className="text-xs text-gray-500 hover:text-gray-700 transition-colors"
>
Sign in
</Link>
)}
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -13,6 +13,7 @@ import { ItemForm } from "../components/ItemForm";
import { OnboardingWizard } from "../components/OnboardingWizard"; import { OnboardingWizard } from "../components/OnboardingWizard";
import { SlideOutPanel } from "../components/SlideOutPanel"; import { SlideOutPanel } from "../components/SlideOutPanel";
import { TotalsBar } from "../components/TotalsBar"; import { TotalsBar } from "../components/TotalsBar";
import { useAuth } from "../hooks/useAuth";
import { useDeleteCandidate } from "../hooks/useCandidates"; import { useDeleteCandidate } from "../hooks/useCandidates";
import { useOnboardingComplete } from "../hooks/useSettings"; import { useOnboardingComplete } from "../hooks/useSettings";
import { useResolveThread, useThread } from "../hooks/useThreads"; import { useResolveThread, useThread } from "../hooks/useThreads";
@@ -24,6 +25,8 @@ export const Route = createRootRoute({
function RootLayout() { function RootLayout() {
const navigate = useNavigate(); const navigate = useNavigate();
const { data: auth } = useAuth();
const isAuthenticated = !!auth?.user;
// Item panel state // Item panel state
const panelMode = useUIStore((s) => s.panelMode); const panelMode = useUIStore((s) => s.panelMode);
@@ -175,7 +178,7 @@ function RootLayout() {
)} )}
{/* Floating Add Button - only on collection gear tab */} {/* Floating Add Button - only on collection gear tab */}
{showFab && ( {showFab && isAuthenticated && (
<button <button
type="button" type="button"
onClick={openAddPanel} onClick={openAddPanel}