@dyyz1993/create-agent 2.1.0 → 2.1.2

package/templates/agent/src/mainview/components/search/SearchPanel.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef, useEffect } from "react";
+import { useState, useCallback, useRef, useEffect } from 'react';
 import {
 	Search,
 	CaseSensitive,
@@ -9,10 +9,11 @@ import {
 	ChevronDown,
 	Loader2,
 	X,
-} from "lucide-react";
-import { apiClient } from "../../lib/api-client";
-import { useExplorerStore } from "../../stores/use-explorer-store";
-import type { TreeNode } from "../../types";
+} from 'lucide-react';
+import { apiClient } from '../../lib/api-client';
+import { useExplorerStore } from '../../stores/use-explorer-store';
+import { useTranslation } from 'react-i18next';
+import type { TreeNode } from '../../types';
 
 interface SearchMatch {
 	file: string;
@@ -31,79 +32,79 @@ interface FileGroup {
 }
 
 const SKIP_DIRS = new Set([
-	"node_modules",
-	".git",
-	"dist",
-	"build",
-	".next",
-	".nuxt",
-	"coverage",
-	".cache",
-	".turbo",
-	".vercel",
-	"out",
-	".output",
+	'node_modules',
+	'.git',
+	'dist',
+	'build',
+	'.next',
+	'.nuxt',
+	'coverage',
+	'.cache',
+	'.turbo',
+	'.vercel',
+	'out',
+	'.output',
 ]);
 
 const TEXT_EXTENSIONS = new Set([
-	"ts",
-	"tsx",
-	"js",
-	"jsx",
-	"mjs",
-	"cjs",
-	"json",
-	"md",
-	"mdx",
-	"yaml",
-	"yml",
-	"toml",
-	"css",
-	"scss",
-	"less",
-	"sass",
-	"html",
-	"htm",
-	"xml",
-	"svg",
-	"py",
-	"rb",
-	"go",
-	"rs",
-	"java",
-	"kt",
-	"swift",
-	"c",
-	"cpp",
-	"h",
-	"hpp",
-	"sh",
-	"bash",
-	"zsh",
-	"fish",
-	"sql",
-	"graphql",
-	"gql",
-	"txt",
-	"csv",
-	"env",
-	"gitignore",
-	"eslintrc",
-	"prettierrc",
-	"conf",
-	"ini",
-	"cfg",
-	"log",
-	"vue",
-	"svelte",
+	'ts',
+	'tsx',
+	'js',
+	'jsx',
+	'mjs',
+	'cjs',
+	'json',
+	'md',
+	'mdx',
+	'yaml',
+	'yml',
+	'toml',
+	'css',
+	'scss',
+	'less',
+	'sass',
+	'html',
+	'htm',
+	'xml',
+	'svg',
+	'py',
+	'rb',
+	'go',
+	'rs',
+	'java',
+	'kt',
+	'swift',
+	'c',
+	'cpp',
+	'h',
+	'hpp',
+	'sh',
+	'bash',
+	'zsh',
+	'fish',
+	'sql',
+	'graphql',
+	'gql',
+	'txt',
+	'csv',
+	'env',
+	'gitignore',
+	'eslintrc',
+	'prettierrc',
+	'conf',
+	'ini',
+	'cfg',
+	'log',
+	'vue',
+	'svelte',
 ]);
 
 function isTextFile(name: string): boolean {
-	const dotIdx = name.lastIndexOf(".");
+	const dotIdx = name.lastIndexOf('.');
 	if (dotIdx === -1) return false;
 	const ext = name.slice(dotIdx + 1).toLowerCase();
 	if (TEXT_EXTENSIONS.has(ext)) return true;
-	if (name.startsWith(".") && TEXT_EXTENSIONS.has(name.slice(1))) return true;
+	if (name.startsWith('.') && TEXT_EXTENSIONS.has(name.slice(1))) return true;
 	return false;
 }
 
@@ -111,15 +112,16 @@ function buildSearchRegex(
 	query: string,
 	caseSensitive: boolean,
 	wholeWord: boolean,
-	useRegex: boolean
+	useRegex: boolean,
 ): RegExp {
-	let pattern = useRegex ? query : query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+	let pattern = useRegex ? query : query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 	if (wholeWord) pattern = `\\b${pattern}\\b`;
-	return new RegExp(pattern, caseSensitive ? "g" : "gi");
+	return new RegExp(pattern, caseSensitive ? 'g' : 'gi');
 }
 
 export function SearchPanel() {
-	const [query, setQuery] = useState("");
+	const { t } = useTranslation();
+	const [query, setQuery] = useState('');
 	const [caseSensitive, setCaseSensitive] = useState(false);
 	const [wholeWord, setWholeWord] = useState(false);
 	const [useRegex, setUseRegex] = useState(false);
@@ -144,12 +146,12 @@ export function SearchPanel() {
 		while (queue.length > 0 && !abortRef.current) {
 			const current = queue.shift()!;
 			try {
-				const res = await apiClient.call("file.listDir", { path: current });
+				const res = await apiClient.call('file.listDir', { path: current });
 				for (const entry of res.entries) {
 					if (abortRef.current) break;
-					if (entry.name.startsWith(".") && entry.name !== ".env" && entry.name !== ".env.local")
+					if (entry.name.startsWith('.') && entry.name !== '.env' && entry.name !== '.env.local')
 						continue;
-					if (entry.type === "directory") {
+					if (entry.type === 'directory') {
 						if (!SKIP_DIRS.has(entry.name)) queue.push(entry.path);
 					} else if (isTextFile(entry.name)) {
 						files.push(entry.path);
@@ -180,8 +182,8 @@ export function SearchPanel() {
 			for (const fp of filePaths) {
 				if (abortRef.current) break;
 				try {
-					const res = await apiClient.call("file.readFile", { path: fp });
-					const lines = res.content.split("\n");
+					const res = await apiClient.call('file.readFile', { path: fp });
+					const lines = res.content.split('\n');
 					for (let i = 0; i < lines.length; i++) {
 						const line = lines[i]!;
 						regex.lastIndex = 0;
@@ -206,7 +208,7 @@ export function SearchPanel() {
 
 			setFilesSearched(filePaths.length);
 
-			const rootPath = currentPath.endsWith("/") ? currentPath : currentPath + "/";
+			const rootPath = currentPath.endsWith('/') ? currentPath : currentPath + '/';
 			const groups: FileGroup[] = [];
 			for (const [filePath, matches] of matchMap) {
 				groups.push({
@@ -232,32 +234,32 @@ export function SearchPanel() {
 
 	const handleKeyDown = useCallback(
 		(e: React.KeyboardEvent) => {
-			if (e.key === "Enter" && !isSearching) {
+			if (e.key === 'Enter' && !isSearching) {
 				performSearch();
 			}
-			if (e.key === "Escape") {
-				setQuery("");
+			if (e.key === 'Escape') {
+				setQuery('');
 				inputRef.current?.focus();
 			}
 		},
-		[performSearch, isSearching]
+		[performSearch, isSearching],
 	);
 
 	const toggleGroup = useCallback((index: number) => {
 		setResults((prev) => prev.map((g, i) => (i === index ? { ...g, expanded: !g.expanded } : g)));
 	}, []);
 
-	const handleOpenFile = useCallback((filePath: string, _line: number) => {
+	const handleOpenFile = useCallback((filePath: string, line: number) => {
 		const node: TreeNode = {
-			name: filePath.split("/").pop() || filePath,
+			name: filePath.split('/').pop() || filePath,
 			path: filePath,
-			type: "file",
+			type: 'file',
 		};
-		useExplorerStore.getState().openFile(node);
+		useExplorerStore.getState().openFileAtLine(node, line);
 	}, []);
 
 	const modKey =
-		typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.userAgent) ? "⌘" : "Ctrl";
+		typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.userAgent) ? '⌘' : 'Ctrl';
 
 	return (
 		<div className="flex flex-col h-full bg-[var(--color-bg-primary)]">
@@ -265,7 +267,7 @@ export function SearchPanel() {
 			<div className="px-3 py-2 text-xs font-semibold text-[var(--color-text-tertiary)] uppercase tracking-wide border-b border-[var(--color-border-primary)] flex items-center justify-between flex-shrink-0">
 				<div className="flex items-center gap-1.5">
 					<Search className="w-3.5 h-3.5" />
-					Search
+					{t('sidebar.search')}
 				</div>
 				<kbd className="px-1.5 py-0.5 text-[10px] text-[var(--color-text-placeholder)] bg-[var(--color-bg-secondary)] border border-[var(--color-border-primary)] rounded font-mono">
 					{modKey}⇧F
@@ -282,13 +284,13 @@ export function SearchPanel() {
 						value={query}
 						onChange={(e) => setQuery(e.target.value)}
 						onKeyDown={handleKeyDown}
-						placeholder="Search in files..."
+						placeholder={t('sidebar.search') + '...'}
 						className="w-full pl-7 pr-7 py-1.5 text-xs bg-[var(--color-bg-secondary)] rounded text-[var(--color-text-primary)] border border-[var(--color-border-secondary)] focus:border-[var(--color-accent)] focus:outline-none"
 					/>
 					{query && (
 						<button
 							onClick={() => {
-								setQuery("");
+								setQuery('');
 								inputRef.current?.focus();
 							}}
 							className="absolute right-2 top-1/2 -translate-y-1/2 text-[var(--color-text-placeholder)] hover:text-[var(--color-text-secondary)]"
@@ -304,8 +306,8 @@ export function SearchPanel() {
 						onClick={() => setCaseSensitive((v) => !v)}
 						className={`p-1 rounded text-xs transition-colors ${
 							caseSensitive
-								? "bg-[var(--color-accent)]/30 text-[var(--color-text-accent)] border border-[var(--color-accent)]/50"
-								: "text-[var(--color-text-placeholder)] hover:text-[var(--color-text-secondary)] border border-transparent"
+								? 'bg-[var(--color-accent)]/30 text-[var(--color-text-accent)] border border-[var(--color-accent)]/50'
+								: 'text-[var(--color-text-placeholder)] hover:text-[var(--color-text-secondary)] border border-transparent'
 						}`}
 						title="Match Case"
 					>
@@ -315,8 +317,8 @@ export function SearchPanel() {
 						onClick={() => setWholeWord((v) => !v)}
 						className={`p-1 rounded text-xs transition-colors ${
 							wholeWord
-								? "bg-[var(--color-accent)]/30 text-[var(--color-text-accent)] border border-[var(--color-accent)]/50"
-								: "text-[var(--color-text-placeholder)] hover:text-[var(--color-text-secondary)] border border-transparent"
+								? 'bg-[var(--color-accent)]/30 text-[var(--color-text-accent)] border border-[var(--color-accent)]/50'
+								: 'text-[var(--color-text-placeholder)] hover:text-[var(--color-text-secondary)] border border-transparent'
 						}`}
 						title="Match Whole Word"
 					>
@@ -326,8 +328,8 @@ export function SearchPanel() {
 						onClick={() => setUseRegex((v) => !v)}
 						className={`p-1 rounded text-xs transition-colors ${
 							useRegex
-								? "bg-[var(--color-accent)]/30 text-[var(--color-text-accent)] border border-[var(--color-accent)]/50"
-								: "text-[var(--color-text-placeholder)] hover:text-[var(--color-text-secondary)] border border-transparent"
+								? 'bg-[var(--color-accent)]/30 text-[var(--color-text-accent)] border border-[var(--color-accent)]/50'
+								: 'text-[var(--color-text-placeholder)] hover:text-[var(--color-text-secondary)] border border-transparent'
 						}`}
 						title="Use Regular Expression"
 					>
@@ -339,10 +341,10 @@ export function SearchPanel() {
 					{isSearching ? (
 						<button
 							onClick={cancelSearch}
-							className="px-2 py-1 text-xs text-[var(--color-text-error)] hover:text-red-300 transition-colors flex items-center gap-1"
+							className="px-2 py-1 text-xs text-[var(--color-text-error)] hover:text-[var(--color-text-error)] transition-colors flex items-center gap-1"
 						>
 							<Loader2 className="w-3 h-3 animate-spin" />
-							Cancel
+							{t('common.cancel')}
 						</button>
 					) : (
 						query.trim() && (
@@ -350,7 +352,7 @@ export function SearchPanel() {
 								onClick={performSearch}
 								className="px-2 py-1 text-xs bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] rounded transition-colors"
 							>
-								Search
+								{t('sidebar.search')}
 							</button>
 						)
 					)}
@@ -362,15 +364,11 @@ export function SearchPanel() {
 				<div className="px-3 py-1.5 text-[11px] text-[var(--color-text-placeholder)] border-b border-[var(--color-bg-secondary)] flex-shrink-0">
 					{totalMatches > 0 ? (
 						<>
-							<span className="text-[var(--color-text-accent)] font-medium">{totalMatches}</span>{" "}
-							result{totalMatches !== 1 && "s"} in{" "}
-							<span className="text-[var(--color-text-accent)] font-medium">{results.length}</span>{" "}
-							file
-							{results.length !== 1 && "s"}
-							<span className="ml-2 text-gray-600">({filesSearched} files searched)</span>
+							{t('search.resultsIn', { count: totalMatches, fileCount: results.length })}
+							<span className="ml-2">{t('search.filesSearched', { count: filesSearched })}</span>
 						</>
 					) : (
-						"No results found"
+						t('search.noResults')
 					)}
 				</div>
 			)}
@@ -379,23 +377,31 @@ export function SearchPanel() {
 			{isSearching && (
 				<div className="flex items-center justify-center py-8 text-[var(--color-text-placeholder)] text-sm flex-shrink-0">
 					<Loader2 className="w-4 h-4 animate-spin mr-2" />
-					Searching...
+					{t('common.loading')}
 				</div>
 			)}
 
 			{/* Results list */}
 			<div className="flex-1 overflow-y-auto">
 				{!hasSearched && !isSearching ? (
-					<div className="flex flex-col items-center justify-center h-full text-gray-600 text-xs px-4">
-						<Search className="w-8 h-8 mb-2 text-gray-700" />
-						<p>Type a search term and press Enter</p>
-						<p className="mt-1 text-gray-700">{modKey}+Shift+F to focus search</p>
+					<div className="flex flex-col items-center justify-center h-full text-[var(--color-text-tertiary)] text-xs px-4">
+						<Search className="w-8 h-8 mb-2 text-[var(--color-text-placeholder)]" />
+						<p>{t('search.typeToSearch')}</p>
+						<p className="mt-1 text-[var(--color-text-placeholder)]">
+							{t('search.focusShortcut', { key: modKey })}
+						</p>
 					</div>
 				) : !isSearching && totalMatches === 0 ? (
-					<div className="flex flex-col items-center justify-center h-full text-gray-600 text-xs px-4">
-						<FileText className="w-8 h-8 mb-2 text-gray-700" />
+					<div className="flex flex-col items-center justify-center h-full text-[var(--color-text-tertiary)] text-xs px-4">
+						<FileText className="w-8 h-8 mb-2 text-[var(--color-text-placeholder)]" />
+						<p>{t('search.noResultsFor', { query })}</p>
+						<p className="mt-1 text-[var(--color-text-placeholder)]">{t('search.tryDifferent')}</p>
+					</div>
+				) : !isSearching && totalMatches === 0 ? (
+					<div className="flex flex-col items-center justify-center h-full text-[var(--color-text-tertiary)] text-xs px-4">
+						<FileText className="w-8 h-8 mb-2 text-[var(--color-text-placeholder)]" />
 						<p>No results for "{query}"</p>
-						<p className="mt-1 text-gray-700">Try different search terms</p>
+						<p className="mt-1 text-[var(--color-text-placeholder)]">Try different search terms</p>
 					</div>
 				) : (
 					<div className="py-1">
@@ -415,7 +421,7 @@ export function SearchPanel() {
 									<span className="text-[var(--color-text-secondary)] truncate flex-1">
 										{group.relativePath}
 									</span>
-									<span className="text-[10px] text-gray-600 flex-shrink-0 ml-1">
+									<span className="text-[10px] text-[var(--color-text-tertiary)] flex-shrink-0 ml-1">
 										{group.matches.length}
 									</span>
 								</button>
@@ -429,7 +435,7 @@ export function SearchPanel() {
 												onClick={() => handleOpenFile(match.file, match.line)}
 												className="w-full text-left px-2 py-0.5 text-[11px] hover:bg-[var(--color-bg-secondary)] transition-colors group flex items-start gap-2"
 											>
-												<span className="text-gray-600 w-6 text-right flex-shrink-0 select-none pt-px">
+												<span className="text-[var(--color-text-tertiary)] w-6 text-right flex-shrink-0 select-none pt-px">
 													{match.line}
 												</span>
 												<span className="text-[var(--color-text-tertiary)] truncate font-mono leading-relaxed">

package/templates/agent/src/mainview/components/search/__tests__/SearchPanel.test.tsx

@@ -1,50 +1,70 @@
-import { describe, it, expect, vi, afterEach } from "vitest";
-import { render, screen, cleanup } from "@testing-library/react";
-import React from "react";
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/react';
+import React from 'react';
 
-vi.mock("../../../stores/use-explorer-store", () => ({
-  useExplorerStore: (selector: any) =>
-    selector({ currentPath: "/project" }),
+vi.mock('../../../stores/use-explorer-store', () => ({
+	useExplorerStore: (selector: any) => selector({ currentPath: '/project' }),
 }));
 
-vi.mock("../../../lib/api-client", () => ({
-  apiClient: { call: vi.fn() },
+vi.mock('../../../lib/api-client', () => ({
+	apiClient: { call: vi.fn() },
 }));
 
-describe("SearchPanel", () => {
-  afterEach(cleanup);
-
-  it("should render search header", async () => {
-    const { SearchPanel } = await import("../SearchPanel");
-    render(<SearchPanel />);
-    expect(screen.getByText("Search")).toBeDefined();
-  });
-
-  it("should render search input", async () => {
-    const { SearchPanel } = await import("../SearchPanel");
-    render(<SearchPanel />);
-    expect(screen.getByPlaceholderText("Search in files...")).toBeDefined();
-  });
-
-  it("should render keyboard shortcut hint", async () => {
-    const { SearchPanel } = await import("../SearchPanel");
-    render(<SearchPanel />);
-    const kbd = document.querySelector("kbd");
-    expect(kbd).not.toBeNull();
-    expect(kbd?.textContent).toMatch(/[⌘Ctrl]/);
-  });
-
-  it("should render toggle buttons for case/word/regex", async () => {
-    const { SearchPanel } = await import("../SearchPanel");
-    render(<SearchPanel />);
-    expect(screen.getByTitle("Match Case")).toBeDefined();
-    expect(screen.getByTitle("Match Whole Word")).toBeDefined();
-    expect(screen.getByTitle("Use Regular Expression")).toBeDefined();
-  });
-
-  it("should show initial empty state before search", async () => {
-    const { SearchPanel } = await import("../SearchPanel");
-    render(<SearchPanel />);
-    expect(screen.getByText("Type a search term and press Enter")).toBeDefined();
-  });
+vi.mock('react-i18next', () => ({
+	useTranslation: () => ({
+		t: (key: string, params?: Record<string, unknown>) => {
+			const map: Record<string, string> = {
+				'sidebar.search': 'Search',
+				'search.placeholder': 'Search in files...',
+				'search.typeToSearch': 'Type a search term and press Enter',
+				'search.focusShortcut': `...${params?.key || 'Ctrl'}+F to focus search`,
+				'search.noResults': 'No results found',
+				'search.filesSearched': `(${params?.count || 0} files searched)`,
+				'search.resultsIn': `${params?.count || 0} result in ${params?.fileCount || 0} files`,
+				'search.matchCase': 'Match Case',
+				'search.matchWholeWord': 'Match Whole Word',
+				'search.useRegex': 'Use Regular Expression',
+			};
+			return map[key] || key;
+		},
+		i18n: { language: 'en' },
+	}),
+}));
+
+describe('SearchPanel', () => {
+	afterEach(cleanup);
+
+	it('should render search header', async () => {
+		const { SearchPanel } = await import('../SearchPanel');
+		render(<SearchPanel />);
+		expect(screen.getByText('Search')).toBeDefined();
+	});
+
+	it('should render search input', async () => {
+		const { SearchPanel } = await import('../SearchPanel');
+		render(<SearchPanel />);
+		expect(screen.getByPlaceholderText('Search...')).toBeDefined();
+	});
+
+	it('should render keyboard shortcut hint', async () => {
+		const { SearchPanel } = await import('../SearchPanel');
+		render(<SearchPanel />);
+		const kbd = document.querySelector('kbd');
+		expect(kbd).not.toBeNull();
+		expect(kbd?.textContent).toMatch(/[⌘Ctrl]/);
+	});
+
+	it('should render toggle buttons for case/word/regex', async () => {
+		const { SearchPanel } = await import('../SearchPanel');
+		render(<SearchPanel />);
+		expect(screen.getByTitle('Match Case')).toBeDefined();
+		expect(screen.getByTitle('Match Whole Word')).toBeDefined();
+		expect(screen.getByTitle('Use Regular Expression')).toBeDefined();
+	});
+
+	it('should show initial empty state before search', async () => {
+		const { SearchPanel } = await import('../SearchPanel');
+		render(<SearchPanel />);
+		expect(screen.getByText('Type a search term and press Enter')).toBeDefined();
+	});
 });

package/templates/agent/src/mainview/components/sidebar/__tests__/PinButton.test.tsx

@@ -1,48 +1,48 @@
-import { describe, it, expect, vi, afterEach } from "vitest";
-import { render, screen, cleanup, fireEvent } from "@testing-library/react";
-import React from "react";
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, cleanup, fireEvent } from '@testing-library/react';
+import React from 'react';
 
 const mockSetPinned = vi.fn();
 
-vi.mock("../../../stores/use-sidebar-store", () => ({
-  useSidebarStore: (selector: any) =>
-    selector({ isPinned: true, setPinned: mockSetPinned, breakpoint: "desktop" }),
+vi.mock('../../../stores/use-sidebar-store', () => ({
+	useSidebarStore: <T,>(selector: (s: Record<string, unknown>) => T) =>
+		selector({ isPinned: true, setPinned: mockSetPinned, breakpoint: 'desktop' }),
 }));
 
-describe("PinButton", () => {
-  afterEach(() => {
-    cleanup();
-    vi.clearAllMocks();
-  });
+describe('PinButton', () => {
+	afterEach(() => {
+		cleanup();
+		vi.clearAllMocks();
+	});
 
-  it("should render a button", async () => {
-    const { PinButton } = await import("../PinButton");
-    render(<PinButton />);
-    expect(screen.getByRole("button")).toBeDefined();
-  });
+	it('should render a button', async () => {
+		const { PinButton } = await import('../PinButton');
+		render(<PinButton />);
+		expect(screen.getByRole('button')).toBeDefined();
+	});
 
-  it("should show unpin title when pinned", async () => {
-    const { PinButton } = await import("../PinButton");
-    render(<PinButton />);
-    expect(screen.getByTitle("Unpin sidebar")).toBeDefined();
-  });
+	it('should show unpin title when pinned', async () => {
+		const { PinButton } = await import('../PinButton');
+		render(<PinButton />);
+		expect(screen.getByTitle('Unpin sidebar')).toBeDefined();
+	});
 
-  it("should call setPinned on click", async () => {
-    const { PinButton } = await import("../PinButton");
-    render(<PinButton />);
-    fireEvent.click(screen.getByRole("button"));
-    expect(mockSetPinned).toHaveBeenCalledWith(false);
-  });
+	it('should call setPinned on click', async () => {
+		const { PinButton } = await import('../PinButton');
+		render(<PinButton />);
+		fireEvent.click(screen.getByRole('button'));
+		expect(mockSetPinned).toHaveBeenCalledWith(false);
+	});
 
-  it("should not render on mobile", async () => {
-    vi.resetModules();
-    vi.doMock("../../../stores/use-sidebar-store", () => ({
-      useSidebarStore: (selector: any) =>
-        selector({ isPinned: false, setPinned: vi.fn(), breakpoint: "mobile" }),
-    }));
-    const mod = await import("../PinButton");
-    const { container } = render(<mod.PinButton />);
-    expect(container.innerHTML).toBe("");
-    vi.resetModules();
-  });
+	it('should not render on mobile', async () => {
+		vi.resetModules();
+		vi.doMock('../../../stores/use-sidebar-store', () => ({
+			useSidebarStore: <T,>(selector: (s: Record<string, unknown>) => T) =>
+				selector({ isPinned: false, setPinned: vi.fn(), breakpoint: 'mobile' }),
+		}));
+		const mod = await import('../PinButton');
+		const { container } = render(<mod.PinButton />);
+		expect(container.innerHTML).toBe('');
+		vi.resetModules();
+	});
 });