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:
@@ -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>
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user