feat: add login button to header and conditional edit UI

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/client/components/TotalsBar.tsx

@@ -1,4 +1,5 @@
 import { Link } from "@tanstack/react-router";
+import { useAuth, useLogout } from "../hooks/useAuth";
 import { useUpdateSetting } from "../hooks/useSettings";
 import { useTotals } from "../hooks/useTotals";
 import { useWeightUnit } from "../hooks/useWeightUnit";
@@ -19,6 +20,9 @@ export function TotalsBar({
 	linkTo,
 }: TotalsBarProps) {
 	const { data } = useTotals();
+	const { data: auth } = useAuth();
+	const logout = useLogout();
+	const isAuthenticated = !!auth?.user;
 	const unit = useWeightUnit();
 	const updateSetting = useUpdateSetting();
 
@@ -100,6 +104,24 @@ export function TotalsBar({
 								))}
 							</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>