@dyyz1993/create-agent 2.1.0 → 2.1.2

package/templates/general/src/mainview/components/layout/AppLayout.tsx

@@ -19,134 +19,143 @@ import { LanguageSwitcher } from "../common/LanguageSwitcher";
 export type CenterTab = "chat" | "feed";
 
 interface AppLayoutProps {
-  centerTab: CenterTab;
-  setCenterTab: (tab: CenterTab) => void;
-  sidebarWidth: number;
-  handleResizeStart: (e: React.MouseEvent) => void;
+	centerTab: CenterTab;
+	setCenterTab: (tab: CenterTab) => void;
+	sidebarWidth: number;
+	handleResizeStart: (e: React.MouseEvent) => void;
 }
 
 export function AppLayout({
-  centerTab,
-  setCenterTab,
-  sidebarWidth,
-  handleResizeStart,
+	centerTab,
+	setCenterTab,
+	sidebarWidth,
+	handleResizeStart,
 }: AppLayoutProps) {
-  const { t } = useTranslation();
-  const mode = useConnectionStore((s) => s.mode);
-  const filePreview = useExplorerStore((s) => s.filePreview);
-  const loadingFile = useExplorerStore((s) => s.loadingFile);
-  const closePreview = useExplorerStore((s) => s.closePreview);
+	const { t } = useTranslation();
+	const mode = useConnectionStore((s) => s.mode);
+	const filePreview = useExplorerStore((s) => s.filePreview);
+	const loadingFile = useExplorerStore((s) => s.loadingFile);
+	const closePreview = useExplorerStore((s) => s.closePreview);
+	const scrollToLine = useExplorerStore((s) => s.scrollToLine);
+	const clearScrollToLine = useExplorerStore((s) => s.clearScrollToLine);
 
-  const activePanel = useSidebarStore((s) => s.activePanel);
-  const isPinned = useSidebarStore((s) => s.isPinned);
-  const drawerOpen = useSidebarStore((s) => s.drawerOpen);
-  const setDrawerOpen = useSidebarStore((s) => s.setDrawerOpen);
-  const breakpoint = useSidebarStore((s) => s.breakpoint);
+	const activePanel = useSidebarStore((s) => s.activePanel);
+	const isPinned = useSidebarStore((s) => s.isPinned);
+	const drawerOpen = useSidebarStore((s) => s.drawerOpen);
+	const setDrawerOpen = useSidebarStore((s) => s.setDrawerOpen);
+	const breakpoint = useSidebarStore((s) => s.breakpoint);
 
-  const isMobile = breakpoint === "mobile";
-  const isDesktop = breakpoint === "desktop";
-  const sidebarIsDrawer = isMobile || !isPinned;
-  const showSidebar = activePanel !== null && (isPinned || drawerOpen);
-  const showDebug = isDesktop;
+	const isMobile = breakpoint === "mobile";
+	const isDesktop = breakpoint === "desktop";
+	const sidebarIsDrawer = isMobile || !isPinned;
+	const showSidebar = activePanel !== null && (isPinned || drawerOpen);
+	const showDebug = isDesktop;
 
-  const sidebarContent = activePanel === "explorer" ? (
-    <ExplorerSidebar hideOuterShell />
-  ) : activePanel === "git" ? (
-    <GitPanel hideOuterShell />
-  ) : activePanel === "search" ? (
-    <SearchPanel />
-  ) : activePanel === "chat" ? (
-    <ChatPanel />
-  ) : activePanel === "feed" ? (
-    <FeedPanel />
-  ) : activePanel === "debug" ? (
-    <DebugPanel />
-  ) : null;
+	const sidebarContent =
+		activePanel === "explorer" ? (
+			<ExplorerSidebar hideOuterShell />
+		) : activePanel === "git" ? (
+			<GitPanel hideOuterShell />
+		) : activePanel === "search" ? (
+			<SearchPanel />
+		) : activePanel === "chat" ? (
+			<ChatPanel />
+		) : activePanel === "feed" ? (
+			<FeedPanel />
+		) : activePanel === "debug" ? (
+			<DebugPanel />
+		) : null;
 
-  const centerTabs: { id: CenterTab; icon: typeof MessageSquare; label: string }[] = [
-    { id: "chat", icon: MessageSquare, label: t("tabs.chat") },
-    { id: "feed", icon: Rss, label: t("tabs.feed") },
-  ];
+	const centerTabs: { id: CenterTab; icon: typeof MessageSquare; label: string }[] = [
+		{ id: "chat", icon: MessageSquare, label: t("tabs.chat") },
+		{ id: "feed", icon: Rss, label: t("tabs.feed") },
+	];
 
-  return (
-    <div className="h-screen bg-[var(--color-bg-primary)] text-[var(--color-text-primary)] flex flex-col overflow-hidden">
-      {!isMobile && (
-        <div className="h-8 bg-[var(--color-bg-secondary)] flex items-center px-3 text-xs border-b border-[var(--color-border-primary)] flex-shrink-0">
-          <span className={`px-2 py-0.5 rounded flex items-center gap-1 ${mode === "desktop" ? "bg-green-600" : "bg-blue-600"}`}>
-            {mode === "desktop" ? <Monitor className="w-3 h-3" /> : <Wifi className="w-3 h-3" />}
-            {mode === "desktop" ? t("app.mode.desktop") : t("app.mode.web")}
-          </span>
-          <span className="ml-3 text-[var(--color-text-tertiary)]">{t("app.title")}</span>
-          <div className="ml-auto flex items-center gap-1">
-            <LanguageSwitcher />
-            <ThemeToggle />
-          </div>
-        </div>
-      )}
+	return (
+		<div className="h-screen bg-[var(--color-bg-primary)] text-[var(--color-text-primary)] flex flex-col overflow-hidden">
+			{!isMobile && (
+				<div className="h-8 bg-[var(--color-bg-secondary)] flex items-center px-3 text-xs border-b border-[var(--color-border-primary)] flex-shrink-0">
+					<span
+						className={`px-2 py-0.5 rounded flex items-center gap-1 ${mode === "desktop" ? "bg-[var(--color-text-success)]" : "bg-blue-600"}`}
+					>
+						{mode === "desktop" ? <Monitor className="w-3 h-3" /> : <Wifi className="w-3 h-3" />}
+						{mode === "desktop" ? t("app.mode.desktop") : t("app.mode.web")}
+					</span>
+					<span className="ml-3 text-[var(--color-text-tertiary)]">{t("app.title")}</span>
+					<div className="ml-auto flex items-center gap-1">
+						<LanguageSwitcher />
+						<ThemeToggle />
+					</div>
+				</div>
+			)}
 
-      <div className="flex-1 flex overflow-hidden relative">
-        {!isMobile && <ActivityBar />}
+			<div className="flex-1 flex overflow-hidden relative">
+				{!isMobile && <ActivityBar />}
 
-        {showSidebar && isPinned && !isMobile && (
-          <div className="bg-[var(--color-bg-primary)] border-r border-[var(--color-border-primary)] flex flex-col flex-shrink-0 overflow-hidden relative"
-            style={{ width: sidebarWidth }}>
-            {sidebarContent}
-            <div
-              className="absolute right-0 top-0 bottom-0 w-1.5 cursor-col-resize bg-[var(--color-border-primary)] hover:bg-indigo-500/50 active:bg-indigo-500 transition-colors z-10"
-              onMouseDown={handleResizeStart}
-            />
-          </div>
-        )}
+				{showSidebar && isPinned && !isMobile && (
+					<div
+						className="bg-[var(--color-bg-primary)] border-r border-[var(--color-border-primary)] flex flex-col flex-shrink-0 overflow-hidden relative"
+						style={{ width: sidebarWidth }}
+					>
+						{sidebarContent}
+						<div
+							className="absolute right-0 top-0 bottom-0 w-1.5 cursor-col-resize bg-[var(--color-border-primary)] hover:bg-[var(--color-accent)]/50 active:bg-[var(--color-accent)] transition-colors z-10"
+							onMouseDown={handleResizeStart}
+						/>
+					</div>
+				)}
 
-        <div className="flex-1 flex flex-col overflow-hidden relative">
-          <div className="flex items-center bg-[var(--color-bg-secondary)] border-b border-[var(--color-border-primary)] flex-shrink-0">
-            {centerTabs.map(({ id, icon: Icon, label }) => (
-              <button
-                key={id}
-                onClick={() => setCenterTab(id)}
-                className={`flex items-center gap-1.5 px-4 py-1.5 text-xs border-b-2 transition-colors ${
-                  centerTab === id
-                    ? "border-[var(--color-accent)] text-[var(--color-text-primary)]"
-                    : "border-transparent text-[var(--color-text-placeholder)] hover:text-[var(--color-text-secondary)]"
-                }`}
-              >
-                <Icon className="w-3.5 h-3.5" />
-                {label}
-              </button>
-            ))}
-          </div>
+				<div className="flex-1 flex flex-col overflow-hidden relative">
+					<div className="flex items-center bg-[var(--color-bg-secondary)] border-b border-[var(--color-border-primary)] flex-shrink-0">
+						{centerTabs.map(({ id, icon: Icon, label }) => (
+							<button
+								key={id}
+								onClick={() => setCenterTab(id)}
+								className={`flex items-center gap-1.5 px-4 py-1.5 text-xs border-b-2 transition-colors ${
+									centerTab === id
+										? "border-[var(--color-accent)] text-[var(--color-text-primary)]"
+										: "border-transparent text-[var(--color-text-placeholder)] hover:text-[var(--color-text-secondary)]"
+								}`}
+							>
+								<Icon className="w-3.5 h-3.5" />
+								{label}
+							</button>
+						))}
+					</div>
 
-          {centerTab === "chat" ? <ChatPanel /> : <FeedPanel />}
-          {filePreview && (
-            <FilePreviewOverlay
-              preview={filePreview}
-              loading={loadingFile}
-              onClose={closePreview}
-            />
-          )}
-          <DiffViewerPanel />
-        </div>
+					{centerTab === "chat" ? <ChatPanel /> : <FeedPanel />}
+					{filePreview && (
+						<FilePreviewOverlay
+							preview={filePreview}
+							loading={loadingFile}
+							onClose={closePreview}
+							scrollToLine={scrollToLine ?? undefined}
+							onScrolledToLine={clearScrollToLine}
+						/>
+					)}
+					<DiffViewerPanel />
+				</div>
 
-        {showDebug && <DebugPanel />}
-      </div>
+				{showDebug && <DebugPanel />}
+			</div>
 
-      {sidebarIsDrawer && showSidebar && (
-        <>
-          <div
-            className="fixed inset-0 bg-black/50 z-40"
-            style={isMobile ? { bottom: 56 } : undefined}
-            onClick={() => setDrawerOpen(false)}
-          />
-          <div
-            className="fixed left-0 top-0 w-60 z-50 bg-[var(--color-bg-primary)] border-r border-[var(--color-border-primary)] flex flex-col overflow-hidden"
-            style={isMobile ? { top: 0, bottom: 56 } : { top: 0, bottom: 0 }}
-          >
-            {sidebarContent}
-          </div>
-        </>
-      )}
+			{sidebarIsDrawer && showSidebar && (
+				<>
+					<div
+						className="fixed inset-0 bg-black/50 z-40"
+						style={isMobile ? { bottom: 56 } : undefined}
+						onClick={() => setDrawerOpen(false)}
+					/>
+					<div
+						className="fixed left-0 top-0 w-60 z-50 bg-[var(--color-bg-primary)] border-r border-[var(--color-border-primary)] flex flex-col overflow-hidden"
+						style={isMobile ? { top: 0, bottom: 56 } : { top: 0, bottom: 0 }}
+					>
+						{sidebarContent}
+					</div>
+				</>
+			)}
 
-      {isMobile && <MobileTabBar />}
-    </div>
-  );
+			{isMobile && <MobileTabBar />}
+		</div>
+	);
 }

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

@@ -249,13 +249,13 @@ export function SearchPanel() {
 		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,
 			path: filePath,
 			type: "file",
 		};
-		useExplorerStore.getState().openFile(node);
+		useExplorerStore.getState().openFileAtLine(node, line);
 	}, []);
 
 	const modKey =
@@ -283,7 +283,7 @@ 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 && (
@@ -340,10 +340,10 @@ export function SearchPanel() {
 					{isSearching ? (
 						<button
 							onClick={cancelSearch}
-							className="px-2 py-1 text-xs text-red-400 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() && (
@@ -351,7 +351,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>
 						)
 					)}
@@ -363,15 +363,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>
 			)}
@@ -380,7 +376,7 @@ 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>
 			)}
 
@@ -389,16 +385,16 @@ export function SearchPanel() {
 				{!hasSearched && !isSearching ? (
 					<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>Type a search term and press Enter</p>
+						<p>{t("search.typeToSearch")}</p>
 						<p className="mt-1 text-[var(--color-text-placeholder)]">
-							{modKey}+Shift+F to focus search
+							{t("search.focusShortcut", { key: modKey })}
 						</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-[var(--color-text-placeholder)]">Try different search terms</p>
+						<p>{t("search.noResultsFor", { query })}</p>
+						<p className="mt-1 text-[var(--color-text-placeholder)]">{t("search.tryDifferent")}</p>
 					</div>
 				) : (
 					<div className="py-1">
@@ -418,7 +414,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>