birdclaw 0.5.0 → 0.6.0

package/src/components/SyncNowButton.tsx

@@ -0,0 +1,137 @@
+import { RefreshCw } from "lucide-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,
+	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,
+	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 accountList = accounts ?? [];
+	const globalAccountId = useSelectedAccountId(accounts);
+	const defaultAccountId = useMemo(
+		() => getDefaultAccountId(accounts),
+		[accounts],
+	);
+	const accountId = globalAccountId ?? defaultAccountId;
+	const accountAwareSync = kind !== "timeline" && kind !== "dms";
+	const waitingForAccount = accountAwareSync && accounts === undefined;
+	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 ?? "");
+
+	function selectAccount(accountId: string) {
+		setStoredAccountId(accountId);
+	}
+
+	async function syncNow() {
+		setSyncing(true);
+		setError(null);
+		setMessage(null);
+		try {
+			const data = await postSync(
+				kind,
+				accountAwareSync ? accountId : undefined,
+				syncOptions,
+			);
+			if (!data.ok) throw new Error(data.summary);
+			setMessage(data.summary);
+			onSynced(data);
+		} catch (syncError) {
+			setError(syncError instanceof Error ? syncError.message : "Sync failed");
+		} finally {
+			setSyncing(false);
+		}
+	}
+
+	return (
+		<div className="flex shrink-0 items-center gap-2">
+			{showAccountPicker && accountAwareSync && accountList.length > 1 ? (
+				<select
+					aria-label="Sync account"
+					className={cx(selectFieldClass, "h-9 w-[132px]")}
+					disabled={syncing}
+					onChange={(event) => selectAccount(event.target.value)}
+					value={accountId ?? ""}
+				>
+					{accountList.map((account) => (
+						<option key={account.id} value={account.id}>
+							{account.handle}
+						</option>
+					))}
+				</select>
+			) : null}
+			<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:opacity-65",
+					syncing && "text-[var(--ink-soft)]",
+					birdOnlyWrongAccount
+						? "disabled:cursor-not-allowed"
+						: "disabled:cursor-wait",
+				)}
+				aria-label={
+					birdOnlyWrongAccount
+						? `${label}: default account only`
+						: syncing
+							? `${label}: syncing`
+							: label
+				}
+				disabled={disabled}
+				onClick={syncNow}
+			>
+				<RefreshCw
+					className={cx("size-4", syncing && "animate-spin")}
+					strokeWidth={2}
+				/>
+				<span className="hidden sm:inline">
+					{syncing ? "Syncing..." : label}
+				</span>
+			</button>
+			<span
+				className={cx(
+					"hidden max-w-[190px] truncate text-[12px] sm:inline",
+					error ? "text-[var(--alert)]" : "text-[var(--ink-soft)]",
+				)}
+				role="status"
+			>
+				{statusMessage}
+			</span>
+		</div>
+	);
+}

package/src/components/ThemeSlider.tsx

@@ -1,6 +1,5 @@
 import { Monitor, Moon, Sun } from "lucide-react";
-import type { CSSProperties, MouseEvent } from "react";
-import { useMemo } from "react";
+import type { MouseEvent } from "react";
 import { type ThemeValue, useTheme } from "#/lib/theme";
 import {
 	startThemeTransition,
@@ -18,107 +17,64 @@ const THEME_OPTIONS = [
 	label: string;
 }>;
 
-const ACTIVE_ITEM_WIDTH_PX = 30;
-const GAP_PX = 6;
-const CONTAINER_PADDING_PX = 6;
-const INDICATOR_SIZE_PX = 30;
-const INDICATOR_OVERHANG_PX = (INDICATOR_SIZE_PX - ACTIVE_ITEM_WIDTH_PX) / 2;
-const INDICATOR_BASE_OFFSET_PX = CONTAINER_PADDING_PX - INDICATOR_OVERHANG_PX;
-
-function toPx(value: number) {
-	return `${String(value)}px`;
+function themeIndex(theme: ThemeValue) {
+	return THEME_OPTIONS.findIndex((option) => option.key === theme);
 }
 
-export function ThemeSlider() {
-	const { isReady, theme, resolvedTheme, setTheme } = useTheme();
+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 activeIndex = useMemo(() => {
-		const index = THEME_OPTIONS.findIndex((option) => option.key === theme);
-		return index === -1 ? 0 : index;
-	}, [theme]);
+	const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+		const context: ThemeTransitionContext = {
+			element: event.currentTarget,
+			pointerClientX: event.clientX,
+			pointerClientY: event.clientY,
+		};
 
-	const indicatorOffset = activeIndex * (ACTIVE_ITEM_WIDTH_PX + GAP_PX);
-	const indicatorStyle = useMemo<CSSProperties>(
-		() => ({
-			left: toPx(INDICATOR_BASE_OFFSET_PX),
-			transform: `translate(${toPx(indicatorOffset)}, -50%)`,
-		}),
-		[indicatorOffset],
-	);
-	const sliderStyle = useMemo<CSSProperties>(
-		() => ({
-			gridTemplateColumns: `repeat(${String(THEME_OPTIONS.length)}, ${toPx(ACTIVE_ITEM_WIDTH_PX)})`,
-			columnGap: toPx(GAP_PX),
-			padding: `0 ${toPx(CONTAINER_PADDING_PX)}`,
-			width: toPx(
-				THEME_OPTIONS.length * ACTIVE_ITEM_WIDTH_PX +
-					(THEME_OPTIONS.length - 1) * GAP_PX +
-					CONTAINER_PADDING_PX * 2,
-			),
-		}),
-		[],
-	);
+		startThemeTransition({
+			nextTheme: nextOption.key,
+			currentTheme: theme,
+			setTheme,
+			context,
+		});
+	};
 
 	return (
-		<fieldset
-			className="theme-slider-shell m-0 border-0 p-0"
-			aria-label="Theme selector"
+		<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}`}
 		>
-			<div
-				className="theme-slider relative grid h-[42px] place-items-center overflow-hidden rounded-full border border-[var(--line)] bg-[color:color-mix(in_srgb,var(--panel-strong)_86%,transparent)] shadow-[inset_0_1px_0_color-mix(in_srgb,white_40%,transparent)] transition-[background,border-color] duration-180"
-				style={sliderStyle}
+			<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}
 			>
-				<div
+				<Icon
 					className={cx(
-						"theme-slider-indicator pointer-events-none absolute top-1/2 z-0 size-[30px] rounded-full border border-[color:color-mix(in_srgb,var(--line-strong)_85%,transparent)] bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.6),transparent_58%),var(--panel-strong)] shadow-[0_10px_24px_var(--shadow),inset_0_1px_0_rgba(255,255,255,0.35)] transition-[transform,background,border-color,box-shadow] duration-220 ease-[cubic-bezier(0.22,1,0.36,1)]",
-						resolvedTheme === "dark" &&
-							"theme-slider-indicator-dark shadow-[0_10px_24px_rgba(0,0,0,0.28),inset_0_1px_0_rgba(255,255,255,0.08)]",
+						"theme-toggle-icon",
+						compact ? "size-[17px]" : "size-[19px]",
 					)}
-					style={indicatorStyle}
+					strokeWidth={2}
+					aria-hidden="true"
 				/>
-				{THEME_OPTIONS.map((option, index) => {
-					const Icon = option.icon;
-					const isActive = index === activeIndex;
-
-					const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
-						if (isActive) return;
-
-						const context: ThemeTransitionContext = {
-							element: event.currentTarget,
-							pointerClientX: event.clientX,
-							pointerClientY: event.clientY,
-						};
-
-						startThemeTransition({
-							nextTheme: option.key,
-							currentTheme: theme,
-							setTheme,
-							context,
-						});
-					};
-
-					return (
-						<button
-							key={option.key}
-							type="button"
-							className={cx(
-								"theme-slider-button relative z-[1] inline-flex size-[30px] items-center justify-center rounded-full border-0 bg-transparent text-[var(--ink-soft)] transition-[color,transform] duration-160 hover:-translate-y-px hover:text-[var(--ink)] disabled:cursor-default disabled:opacity-55 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[color:color-mix(in_srgb,var(--accent)_54%,transparent)]",
-								isActive && "theme-slider-button-active text-[var(--ink)]",
-							)}
-							onClick={handleClick}
-							aria-label={option.label}
-							aria-pressed={isActive}
-							data-testid={`theme-${option.key}`}
-							disabled={!isReady}
-						>
-							<Icon
-								className="theme-slider-icon size-[15px]"
-								strokeWidth={1.8}
-							/>
-						</button>
-					);
-				})}
-			</div>
-		</fieldset>
+			</button>
+		</div>
 	);
 }