birdclaw 0.5.1 → 0.7.0

package/src/components/SyncNowButton.tsx

@@ -1,51 +1,77 @@
 import { RefreshCw } from "lucide-react";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { postSync } from "#/lib/api-client";
 import type { AccountRecord } from "#/lib/types";
 import { cx, selectFieldClass } from "#/lib/ui";
-import type { WebSyncKind, WebSyncResponse } from "#/lib/web-sync";
+import type {
+	WebSyncKind,
+	WebSyncOptions,
+	WebSyncResponse,
+} from "#/lib/web-sync";
+import {
+	defaultAccountId as getDefaultAccountId,
+	setStoredAccountId,
+	useSelectedAccountId,
+} from "./account-selection";
 
 interface SyncNowButtonProps {
 	kind: WebSyncKind;
 	label: string;
 	accounts?: AccountRecord[];
 	onSynced: (result: WebSyncResponse) => void;
+	showAccountPicker?: boolean;
+	syncOptions?: WebSyncOptions;
 }
 
 export function SyncNowButton({
 	kind,
 	label,
-	accounts = [],
+	accounts,
 	onSynced,
+	showAccountPicker = false,
+	syncOptions,
 }: SyncNowButtonProps) {
 	const [syncing, setSyncing] = useState(false);
 	const [message, setMessage] = useState<string | null>(null);
 	const [error, setError] = useState<string | null>(null);
-	const [selectedAccountId, setSelectedAccountId] = useState<
-		string | undefined
-	>();
+	const accountList = accounts ?? [];
+	const globalAccountId = useSelectedAccountId(accounts);
 	const defaultAccountId = useMemo(
-		() => accounts.find((account) => account.isDefault)?.id ?? accounts[0]?.id,
+		() => getDefaultAccountId(accounts),
 		[accounts],
 	);
-	const accountId = selectedAccountId ?? defaultAccountId;
+	const accountId = globalAccountId ?? defaultAccountId;
+	const accountAwareSync = kind !== "dms";
+	const waitingForAccount =
+		accountAwareSync &&
+		accounts === undefined &&
+		(showAccountPicker || kind !== "timeline");
+	const birdOnlyWrongAccount =
+		!accountAwareSync &&
+		accountId !== undefined &&
+		defaultAccountId !== undefined &&
+		accountId !== defaultAccountId;
+	const disabled = syncing || waitingForAccount || birdOnlyWrongAccount;
+	const statusMessage = birdOnlyWrongAccount
+		? "Switch to default to sync"
+		: waitingForAccount
+			? "Loading account"
+			: (error ?? message ?? "");
 
-	useEffect(() => {
-		if (!accounts.length) {
-			setSelectedAccountId(undefined);
-			return;
-		}
-		if (!accountId || !accounts.some((account) => account.id === accountId)) {
-			setSelectedAccountId(defaultAccountId);
-		}
-	}, [accountId, accounts, defaultAccountId]);
+	function selectAccount(accountId: string) {
+		setStoredAccountId(accountId);
+	}
 
 	async function syncNow() {
 		setSyncing(true);
 		setError(null);
 		setMessage(null);
 		try {
-			const data = await postSync(kind, accountId);
+			const data = await postSync(
+				kind,
+				accountAwareSync ? accountId : undefined,
+				syncOptions,
+			);
 			if (!data.ok) throw new Error(data.summary);
 			setMessage(data.summary);
 			onSynced(data);
@@ -58,15 +84,15 @@ export function SyncNowButton({
 
 	return (
 		<div className="flex shrink-0 items-center gap-2">
-			{accounts.length > 1 ? (
+			{showAccountPicker && accountAwareSync && accountList.length > 1 ? (
 				<select
 					aria-label="Sync account"
 					className={cx(selectFieldClass, "h-9 w-[132px]")}
 					disabled={syncing}
-					onChange={(event) => setSelectedAccountId(event.target.value)}
+					onChange={(event) => selectAccount(event.target.value)}
 					value={accountId ?? ""}
 				>
-					{accounts.map((account) => (
+					{accountList.map((account) => (
 						<option key={account.id} value={account.id}>
 							{account.handle}
 						</option>
@@ -76,11 +102,20 @@ export function SyncNowButton({
 			<button
 				type="button"
 				className={cx(
-					"inline-flex h-9 shrink-0 items-center gap-1.5 rounded-full border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] font-semibold text-[var(--ink)] transition-[background,border-color,color,transform] duration-150 hover:border-[color:color-mix(in_srgb,var(--accent)_45%,var(--line))] hover:bg-[var(--accent-soft)] hover:text-[var(--accent)] active:scale-[0.98] disabled:cursor-wait disabled:opacity-65",
+					"inline-flex h-9 shrink-0 items-center gap-1.5 rounded-full border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] font-semibold text-[var(--ink)] transition-[background,border-color,color,transform] duration-150 hover:border-[color:color-mix(in_srgb,var(--accent)_45%,var(--line))] hover:bg-[var(--accent-soft)] hover:text-[var(--accent)] active:scale-[0.98] disabled:opacity-65",
 					syncing && "text-[var(--ink-soft)]",
+					birdOnlyWrongAccount
+						? "disabled:cursor-not-allowed"
+						: "disabled:cursor-wait",
 				)}
-				aria-label={syncing ? `${label}: syncing` : label}
-				disabled={syncing}
+				aria-label={
+					birdOnlyWrongAccount
+						? `${label}: default account only`
+						: syncing
+							? `${label}: syncing`
+							: label
+				}
+				disabled={disabled}
 				onClick={syncNow}
 			>
 				<RefreshCw
@@ -98,7 +133,7 @@ export function SyncNowButton({
 				)}
 				role="status"
 			>
-				{error ?? message ?? ""}
+				{statusMessage}
 			</span>
 		</div>
 	);

package/src/components/ThemeSlider.tsx

@@ -17,59 +17,64 @@ const THEME_OPTIONS = [
 	label: string;
 }>;
 
-export function ThemeSlider() {
-	const { isReady, theme, setTheme } = useTheme();
-
-	return (
-		<fieldset
-			className="theme-slider-shell m-0 flex justify-center border-0 px-2 py-1 min-[1100px]:justify-start min-[1100px]:px-3"
-			aria-label="Theme selector"
-		>
-			<div className="theme-slider flex flex-col items-center gap-1.5 min-[1100px]:flex-row">
-				{THEME_OPTIONS.map((option, index) => {
-					const Icon = option.icon;
-					const isActive = option.key === theme || (index === 0 && !theme);
+function themeIndex(theme: ThemeValue) {
+	return THEME_OPTIONS.findIndex((option) => option.key === theme);
+}
 
-					const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
-						if (isActive) return;
+export function ThemeSlider({ compact = false }: { compact?: boolean }) {
+	const { isReady, theme, setTheme } = useTheme();
+	const activeIndex = Math.max(themeIndex(theme), 0);
+	const activeOption = THEME_OPTIONS[activeIndex];
+	const nextOption = THEME_OPTIONS[(activeIndex + 1) % THEME_OPTIONS.length];
+	const Icon = activeOption.icon;
 
-						const context: ThemeTransitionContext = {
-							element: event.currentTarget,
-							pointerClientX: event.clientX,
-							pointerClientY: event.clientY,
-						};
+	const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+		const context: ThemeTransitionContext = {
+			element: event.currentTarget,
+			pointerClientX: event.clientX,
+			pointerClientY: event.clientY,
+		};
 
-						startThemeTransition({
-							nextTheme: option.key,
-							currentTheme: theme,
-							setTheme,
-							context,
-						});
-					};
+		startThemeTransition({
+			nextTheme: nextOption.key,
+			currentTheme: theme,
+			setTheme,
+			context,
+		});
+	};
 
-					return (
-						<button
-							key={option.key}
-							type="button"
-							className={cx(
-								"theme-slider-button inline-flex size-9 items-center justify-center rounded-full border-0 bg-transparent text-[var(--ink-soft)] transition-[background,color,transform] duration-150 hover:bg-[var(--bg-hover)] hover:text-[var(--ink)] active:scale-95 disabled:cursor-default disabled:opacity-55 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:color-mix(in_srgb,var(--accent)_54%,transparent)]",
-								isActive &&
-									"theme-slider-button-active bg-[var(--bg-active)] text-[var(--ink)] shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--line)_72%,transparent)]",
-							)}
-							onClick={handleClick}
-							aria-label={option.label}
-							aria-pressed={isActive}
-							data-testid={`theme-${option.key}`}
-							disabled={!isReady}
-						>
-							<Icon
-								className="theme-slider-icon size-[17px]"
-								strokeWidth={isActive ? 2.1 : 1.8}
-							/>
-						</button>
-					);
-				})}
-			</div>
-		</fieldset>
+	return (
+		<div
+			className={cx(
+				"theme-toggle-shell flex justify-center",
+				compact
+					? "shrink-0"
+					: "px-1 py-1 min-[1100px]:justify-start min-[1100px]:px-2",
+			)}
+			title={`${activeOption.label}; click for ${nextOption.label}`}
+		>
+			<button
+				type="button"
+				className={cx(
+					"theme-toggle-button inline-flex items-center justify-center rounded-full border bg-transparent text-[var(--ink-soft)] transition-[background,border-color,color,transform,box-shadow] duration-150 hover:border-[color:color-mix(in_srgb,var(--accent)_38%,var(--line))] hover:bg-[var(--bg-hover)] hover:text-[var(--ink)] active:scale-95 disabled:cursor-default disabled:opacity-55 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:color-mix(in_srgb,var(--accent)_54%,transparent)]",
+					compact
+						? "size-8 border-transparent"
+						: "size-11 border-[var(--line)] shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--line)_44%,transparent)]",
+				)}
+				onClick={handleClick}
+				aria-label={`Theme: ${activeOption.label}. Switch to ${nextOption.label}.`}
+				data-testid="theme-toggle"
+				disabled={!isReady}
+			>
+				<Icon
+					className={cx(
+						"theme-toggle-icon",
+						compact ? "size-[17px]" : "size-[19px]",
+					)}
+					strokeWidth={2}
+					aria-hidden="true"
+				/>
+			</button>
+		</div>
 	);
 }