feat: rewrite home page as tool-first browser with search and modality tabs

apps/web/src/components/common/tool-card.tsx

@@ -1,19 +1,25 @@
 import type { Tool } from "@snapotter/shared";
-import { PYTHON_SIDECAR_TOOLS, TOOL_BUNDLE_MAP } from "@snapotter/shared";
+import { MODALITIES, PYTHON_SIDECAR_TOOLS, TOOL_BUNDLE_MAP } from "@snapotter/shared";
 import { Clock, Download, FileImage, Loader2, Star } from "lucide-react";
 import { useMemo } from "react";
 import { Link } from "react-router-dom";
 import { useTranslation } from "@/contexts/i18n-context";
 import { ICON_MAP } from "@/lib/icon-map";
-import { getToolName } from "@/lib/tool-i18n";
+import { getToolDescription, getToolName } from "@/lib/tool-i18n";
 import { cn } from "@/lib/utils";
 import { useFeaturesStore } from "@/stores/features-store";
 
 interface ToolCardProps {
   tool: Tool;
+  variant?: "compact" | "descriptive";
+  showModalityBadge?: boolean;
 }
 
-export function ToolCard({ tool }: ToolCardProps) {
+const MODALITY_COLOR_MAP: Record<string, string> = Object.fromEntries(
+  MODALITIES.map((m) => [m.id, m.color]),
+);
+
+export function ToolCard({ tool, variant = "compact", showModalityBadge }: ToolCardProps) {
   const { t } = useTranslation();
   const IconComponent =
     (ICON_MAP[tool.icon] as React.ComponentType<{ className?: string }>) ?? FileImage;
@@ -32,6 +38,70 @@ export function ToolCard({ tool }: ToolCardProps) {
     return bundle?.status === "installed" ? "installed" : "not_installed";
   }, [isAiTool, tool.id, bundles, installing, queued]);
 
+  const modalityBadge = showModalityBadge ? (
+    <span
+      className="text-[10px] px-1.5 py-0.5 rounded-full font-medium shrink-0"
+      style={{
+        backgroundColor: `${MODALITY_COLOR_MAP[tool.modality] ?? "#6B7280"}20`,
+        color: MODALITY_COLOR_MAP[tool.modality] ?? "#6B7280",
+      }}
+    >
+      {MODALITIES.find((m) => m.id === tool.modality)?.name ?? tool.modality}
+    </span>
+  ) : null;
+
+  const aiStatusIcon =
+    aiStatus === "not_installed" ? (
+      <>
+        <Download className="h-3.5 w-3.5 text-muted-foreground" aria-hidden="true" />
+        <span className="sr-only">{t.a11y.notInstalled}</span>
+      </>
+    ) : aiStatus === "queued" ? (
+      <>
+        <Clock className="h-3.5 w-3.5 text-muted-foreground" aria-hidden="true" />
+        <span className="sr-only">{t.a11y.queued}</span>
+      </>
+    ) : aiStatus === "installing" ? (
+      <>
+        <Loader2 className="h-3.5 w-3.5 text-muted-foreground animate-spin" aria-hidden="true" />
+        <span className="sr-only">{t.a11y.installing}</span>
+      </>
+    ) : null;
+
+  if (variant === "descriptive") {
+    return (
+      <Link
+        to={tool.route}
+        className={cn(
+          "flex items-center gap-3 py-2.5 px-3 rounded-lg w-full transition-colors",
+          "hover:bg-muted",
+          tool.disabled && "opacity-50 pointer-events-none",
+        )}
+      >
+        <div className="p-2 rounded-md bg-muted shrink-0">
+          <IconComponent className="h-4 w-4 text-muted-foreground" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-medium text-foreground">
+              {getToolName(t, tool.id, tool.name)}
+            </span>
+            {modalityBadge}
+            {tool.experimental && (
+              <span className="text-[10px] px-1.5 py-0.5 rounded bg-orange-100 text-orange-600 font-medium">
+                {t.common.experimental}
+              </span>
+            )}
+            {aiStatusIcon}
+          </div>
+          <p className="text-xs text-muted-foreground line-clamp-1">
+            {getToolDescription(t, tool.id, tool.description)}
+          </p>
+        </div>
+      </Link>
+    );
+  }
+
   return (
     <div className="group flex items-center gap-3 relative">
       <button
@@ -54,32 +124,13 @@ export function ToolCard({ tool }: ToolCardProps) {
         <span className="text-sm font-medium text-foreground">
           {getToolName(t, tool.id, tool.name)}
         </span>
+        {modalityBadge}
         {tool.experimental && (
           <span className="text-[10px] px-1.5 py-0.5 rounded bg-orange-100 text-orange-600 font-medium">
             {t.common.experimental}
           </span>
         )}
-        {aiStatus === "not_installed" && (
-          <>
-            <Download className="h-3.5 w-3.5 text-muted-foreground" aria-hidden="true" />
-            <span className="sr-only">{t.a11y.notInstalled}</span>
-          </>
-        )}
-        {aiStatus === "queued" && (
-          <>
-            <Clock className="h-3.5 w-3.5 text-muted-foreground" aria-hidden="true" />
-            <span className="sr-only">{t.a11y.queued}</span>
-          </>
-        )}
-        {aiStatus === "installing" && (
-          <>
-            <Loader2
-              className="h-3.5 w-3.5 text-muted-foreground animate-spin"
-              aria-hidden="true"
-            />
-            <span className="sr-only">{t.a11y.installing}</span>
-          </>
-        )}
+        {aiStatusIcon}
       </Link>
     </div>
   );

apps/web/src/pages/home-page.tsx

@@ -1,14 +1,502 @@
-import { AppLayout } from "@/components/layout/app-layout";
-import { usePageTitle } from "@/hooks/use-page-title";
+import type { Tool } from "@snapotter/shared";
+import { CATEGORIES, MODALITIES, TOOLS } from "@snapotter/shared";
+import { FileImage, Search, X } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Link } from "react-router-dom";
+import { ToolCard } from "@/components/common/tool-card.js";
+import { AppLayout } from "@/components/layout/app-layout.js";
+import { Footer } from "@/components/layout/footer.js";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useFuseSearch } from "@/hooks/use-fuse-search.js";
+import { usePageTitle } from "@/hooks/use-page-title.js";
+import { useRecentTools } from "@/hooks/use-recent-tools.js";
+import { apiGet } from "@/lib/api.js";
+import { format } from "@/lib/format.js";
+import { ICON_MAP } from "@/lib/icon-map.js";
+import { getCategoryName, getToolName } from "@/lib/tool-i18n.js";
+import { cn } from "@/lib/utils.js";
+import { useSettingsStore } from "@/stores/settings-store";
+
+// ── Constants ────────────────────────────────────────────────────
+
+const GETTING_STARTED_IDS = [
+  "resize",
+  "compress",
+  "convert",
+  "crop",
+  "remove-background",
+  "merge-pdf",
+];
+
+const FALLBACK_POPULAR_IDS = [
+  "resize",
+  "crop",
+  "compress",
+  "convert",
+  "remove-background",
+  "upscale",
+  "merge-pdf",
+  "watermark-text",
+];
+
+interface TabDef {
+  key: string;
+  label: string;
+  modalityKey?: string; // maps to Tool.modality; undefined = "all"
+}
+
+// ── Home Page ────────────────────────────────────────────────────
 
 export function HomePage() {
+  const { t } = useTranslation();
+  const [activeTab, setActiveTab] = useState<string>("all");
+  const [search, setSearch] = useState("");
+  const { disabledTools, experimentalEnabled, loaded } = useSettingsStore();
+  const recentToolIds = useRecentTools();
+
   usePageTitle();
 
+  // ── Tab definitions ──────────────────────────────────────────
+
+  const tabs: TabDef[] = useMemo(
+    () => [
+      { key: "all", label: t.homePage.all },
+      { key: "image", label: "Image" },
+      { key: "video", label: "Video" },
+      { key: "audio", label: "Audio" },
+      { key: "document", label: t.homePage.documents },
+      { key: "data", label: t.homePage.data },
+    ],
+    [t],
+  );
+
+  // ── Visible tools (exclude disabled + experimental unless enabled) ──
+
+  const visibleTools = useMemo(() => {
+    if (!loaded) return [];
+    return TOOLS.filter((tool) => {
+      if (tool.disabled) return false;
+      if (disabledTools.includes(tool.id)) return false;
+      if (tool.experimental && !experimentalEnabled) return false;
+      return true;
+    });
+  }, [disabledTools, experimentalEnabled, loaded]);
+
+  // ── Search (global, searches all tools regardless of active tab) ──
+
+  const searchResults = useFuseSearch(visibleTools, search);
+
+  // ── Tab-filtered tools ──────────────────────────────────────
+
+  const tabTools = useMemo(() => {
+    if (activeTab === "all") return visibleTools;
+    const modalityKey = activeTab === "data" ? "file" : activeTab;
+    return visibleTools.filter((tool) => tool.modality === modalityKey);
+  }, [visibleTools, activeTab]);
+
+  // ── Group by category for modality tabs ─────────────────────
+
+  const groupedTools = useMemo(() => {
+    const map = new Map<string, Tool[]>();
+    for (const tool of tabTools) {
+      const existing = map.get(tool.category);
+      if (existing) {
+        existing.push(tool);
+      } else {
+        map.set(tool.category, [tool]);
+      }
+    }
+    return map;
+  }, [tabTools]);
+
+  // ── Tab counts ──────────────────────────────────────────────
+
+  const tabCounts = useMemo(() => {
+    const counts: Record<string, number> = { all: visibleTools.length };
+    for (const tool of visibleTools) {
+      const tabKey = tool.modality === "file" ? "data" : tool.modality;
+      counts[tabKey] = (counts[tabKey] ?? 0) + 1;
+    }
+    return counts;
+  }, [visibleTools]);
+
+  // ── Recent tools (resolve IDs to Tool objects) ──────────────
+
+  const recentTools = useMemo(
+    () =>
+      recentToolIds
+        .map((id) => visibleTools.find((tool) => tool.id === id))
+        .filter((tool): tool is Tool => tool != null),
+    [recentToolIds, visibleTools],
+  );
+
+  // ── Popular tools (fetch from API, cache result) ────────────
+
+  const [popularIds, setPopularIds] = useState<string[]>(FALLBACK_POPULAR_IDS);
+
+  useEffect(() => {
+    let cancelled = false;
+    apiGet<{ tools: string[] }>("/v1/tools/popular")
+      .then((data) => {
+        if (!cancelled && data.tools.length > 0) setPopularIds(data.tools);
+      })
+      .catch(() => {
+        // keep fallback
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const popularTools = useMemo(
+    () =>
+      popularIds
+        .map((id) => visibleTools.find((tool) => tool.id === id))
+        .filter((tool): tool is Tool => tool != null)
+        .slice(0, 12),
+    [popularIds, visibleTools],
+  );
+
+  // ── Render ──────────────────────────────────────────────────
+
   return (
     <AppLayout>
-      <div className="flex-1 flex items-center justify-center">
-        <p className="text-muted-foreground">Tool browser coming soon (Task 6)</p>
+      <div className="flex-1 overflow-y-auto">
+        <div className="mx-auto max-w-5xl px-4 py-6 sm:px-6">
+          {/* Search bar */}
+          <HomeSearchBar
+            value={search}
+            onChange={setSearch}
+            placeholder={format(t.homePage.searchPlaceholder, {
+              count: visibleTools.length,
+            })}
+          />
+
+          {/* Modality tabs */}
+          <ModalityTabs
+            tabs={tabs}
+            activeTab={activeTab}
+            onTabChange={setActiveTab}
+            counts={tabCounts}
+          />
+
+          {/* Content */}
+          {search ? (
+            <SearchResults results={searchResults} query={search} onClear={() => setSearch("")} />
+          ) : activeTab === "all" ? (
+            <AllTabContent
+              recentTools={recentTools}
+              popularTools={popularTools}
+              visibleTools={visibleTools}
+              tabCounts={tabCounts}
+              onTabChange={setActiveTab}
+            />
+          ) : (
+            <ModalityTabContent groupedTools={groupedTools} />
+          )}
+        </div>
+
+        {/* Footer */}
+        <Footer />
       </div>
     </AppLayout>
   );
 }
+
+// ── Search Bar ───────────────────────────────────────────────────
+
+function HomeSearchBar({
+  value,
+  onChange,
+  placeholder,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder: string;
+}) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <div className="relative max-w-xl mx-auto mb-6">
+      <Search className="absolute start-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground pointer-events-none" />
+      <input
+        ref={inputRef}
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        aria-label={placeholder}
+        className="w-full ps-12 pe-10 py-3 rounded-xl border border-border bg-background text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary/20"
+      />
+      {value && (
+        <button
+          type="button"
+          onClick={() => {
+            onChange("");
+            inputRef.current?.focus();
+          }}
+          className="absolute end-3 top-1/2 -translate-y-1/2 p-1 rounded-full hover:bg-muted transition-colors"
+          aria-label="Clear search"
+        >
+          <X className="h-4 w-4 text-muted-foreground" />
+        </button>
+      )}
+    </div>
+  );
+}
+
+// ── Modality Tabs ────────────────────────────────────────────────
+
+function ModalityTabs({
+  tabs,
+  activeTab,
+  onTabChange,
+  counts,
+}: {
+  tabs: TabDef[];
+  activeTab: string;
+  onTabChange: (key: string) => void;
+  counts: Record<string, number>;
+}) {
+  return (
+    <div className="mb-6 overflow-x-auto scrollbar-none -mx-4 px-4 sm:mx-0 sm:px-0">
+      <div className="flex gap-2 min-w-max">
+        {tabs.map((tab) => (
+          <button
+            key={tab.key}
+            type="button"
+            onClick={() => onTabChange(tab.key)}
+            className={cn(
+              "px-4 py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap",
+              activeTab === tab.key
+                ? "bg-primary text-primary-foreground"
+                : "bg-muted/50 text-muted-foreground hover:bg-muted",
+            )}
+          >
+            {tab.label} ({counts[tab.key] ?? 0})
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ── Search Results ───────────────────────────────────────────────
+
+function SearchResults({
+  results,
+  query,
+  onClear,
+}: {
+  results: Tool[];
+  query: string;
+  onClear: () => void;
+}) {
+  const { t } = useTranslation();
+
+  if (results.length === 0) {
+    return (
+      <div className="text-center py-16">
+        <p className="text-muted-foreground">{format(t.homePage.noToolsMatch, { query })}</p>
+        <button
+          type="button"
+          onClick={onClear}
+          className="mt-3 text-sm text-primary hover:underline"
+        >
+          {t.homePage.clearSearch}
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-1">
+      {results.map((tool) => (
+        <ToolCard key={tool.id} tool={tool} showModalityBadge />
+      ))}
+    </div>
+  );
+}
+
+// ── All Tab Content ──────────────────────────────────────────────
+
+function AllTabContent({
+  recentTools,
+  popularTools,
+  visibleTools,
+  tabCounts,
+  onTabChange,
+}: {
+  recentTools: Tool[];
+  popularTools: Tool[];
+  visibleTools: Tool[];
+  tabCounts: Record<string, number>;
+  onTabChange: (key: string) => void;
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="space-y-10">
+      {/* Recent or Getting Started */}
+      {recentTools.length > 0 ? (
+        <section>
+          <h2 className="text-sm font-semibold uppercase text-muted-foreground tracking-wider mb-3">
+            {t.homePage.recent}
+          </h2>
+          <div className="flex flex-wrap gap-2">
+            {recentTools.map((tool) => (
+              <Link
+                key={tool.id}
+                to={tool.route}
+                className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-medium bg-primary/10 text-primary hover:bg-primary/20 transition-colors"
+              >
+                {getToolName(t, tool.id, tool.name)}
+              </Link>
+            ))}
+          </div>
+        </section>
+      ) : (
+        <GettingStartedSection visibleTools={visibleTools} />
+      )}
+
+      {/* Popular */}
+      {popularTools.length > 0 && (
+        <section>
+          <h2 className="text-sm font-semibold uppercase text-muted-foreground tracking-wider mb-3">
+            {t.homePage.popular}
+          </h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-1">
+            {popularTools.map((tool) => (
+              <ToolCard key={tool.id} tool={tool} />
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* Browse by Category */}
+      <section>
+        <h2 className="text-sm font-semibold uppercase text-muted-foreground tracking-wider mb-3">
+          {t.homePage.browseByCategory}
+        </h2>
+        <BrowseByCategoryGrid tabCounts={tabCounts} onTabChange={onTabChange} />
+      </section>
+    </div>
+  );
+}
+
+// ── Getting Started (first-time user, no recents) ────────────────
+
+function GettingStartedSection({ visibleTools }: { visibleTools: Tool[] }) {
+  const { t } = useTranslation();
+
+  const gettingStartedTools = useMemo(
+    () =>
+      GETTING_STARTED_IDS.map((id) => visibleTools.find((tool) => tool.id === id)).filter(
+        (tool): tool is Tool => tool != null,
+      ),
+    [visibleTools],
+  );
+
+  if (gettingStartedTools.length === 0) return null;
+
+  return (
+    <section>
+      <h2 className="text-sm font-semibold uppercase text-muted-foreground tracking-wider mb-3">
+        {t.homePage.gettingStarted}
+      </h2>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-1">
+        {gettingStartedTools.map((tool) => (
+          <ToolCard key={tool.id} tool={tool} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+// ── Browse by Category Grid ──────────────────────────────────────
+
+const BROWSE_TABS: Array<{
+  key: string;
+  modalityId: string;
+  label: string;
+}> = [
+  { key: "image", modalityId: "image", label: "Image" },
+  { key: "video", modalityId: "video", label: "Video" },
+  { key: "audio", modalityId: "audio", label: "Audio" },
+  { key: "document", modalityId: "document", label: "Documents" },
+  { key: "data", modalityId: "file", label: "Data" },
+];
+
+function BrowseByCategoryGrid({
+  tabCounts,
+  onTabChange,
+}: {
+  tabCounts: Record<string, number>;
+  onTabChange: (key: string) => void;
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
+      {BROWSE_TABS.map((tab) => {
+        const modality = MODALITIES.find((m) => m.id === tab.modalityId);
+        const IconComponent = modality
+          ? ((ICON_MAP[modality.icon] as React.ComponentType<{ className?: string }>) ?? FileImage)
+          : FileImage;
+        const count = tabCounts[tab.key] ?? 0;
+
+        return (
+          <button
+            key={tab.key}
+            type="button"
+            onClick={() => onTabChange(tab.key)}
+            className="flex flex-col items-center gap-2 p-4 rounded-xl border border-border bg-card hover:bg-muted transition-colors text-center"
+          >
+            <div
+              className="p-2.5 rounded-lg"
+              style={{ backgroundColor: `${modality?.color ?? "#6B7280"}15` }}
+            >
+              <IconComponent className="h-5 w-5" style={{ color: modality?.color ?? "#6B7280" }} />
+            </div>
+            <span className="text-sm font-medium text-foreground">{tab.label}</span>
+            <span className="text-xs text-muted-foreground">
+              {format(t.homePage.toolCount, { count })}
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+// ── Modality Tab Content (grouped by category) ───────────────────
+
+function ModalityTabContent({ groupedTools }: { groupedTools: Map<string, Tool[]> }) {
+  const { t } = useTranslation();
+
+  if (groupedTools.size === 0) {
+    return (
+      <p className="text-center text-muted-foreground py-16">{t.fullscreenGrid.noToolsFound}</p>
+    );
+  }
+
+  return (
+    <div className="space-y-8">
+      {CATEGORIES.filter((cat) => groupedTools.has(cat.id)).map((category) => {
+        const tools = groupedTools.get(category.id) ?? [];
+        return (
+          <section key={category.id}>
+            <h2 className="text-xs font-semibold uppercase text-muted-foreground tracking-wider mb-2">
+              {getCategoryName(t, category.id, category.name)}
+            </h2>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-1">
+              {tools.map((tool) => (
+                <ToolCard key={tool.id} tool={tool} variant="descriptive" />
+              ))}
+            </div>
+          </section>
+        );
+      })}
+    </div>
+  );
+}

packages/shared/src/i18n/ar.ts

@@ -2448,6 +2448,17 @@ export const ar: TranslationKeys = {
     changeFile: "تغيير الملف",
     quickActions: "إجراءات سريعة",
     allTools: "جميع الأدوات",
+    searchPlaceholder: "Search {count} tools...",
+    recent: "Recent",
+    popular: "Popular",
+    browseByCategory: "Browse by Category",
+    gettingStarted: "Getting Started",
+    noToolsMatch: "No tools match '{query}'",
+    clearSearch: "Clear search",
+    all: "All",
+    documents: "Documents",
+    data: "Data",
+    toolCount: "{count} tools",
   },
   fullscreenGrid: {
     searchPlaceholder: "البحث في الأدوات...",

packages/shared/src/i18n/de.ts

@@ -2462,6 +2462,17 @@ export const de: TranslationKeys = {
     changeFile: "Datei aendern",
     quickActions: "Schnellaktionen",
     allTools: "Alle Werkzeuge",
+    searchPlaceholder: "Search {count} tools...",
+    recent: "Recent",
+    popular: "Popular",
+    browseByCategory: "Browse by Category",
+    gettingStarted: "Getting Started",
+    noToolsMatch: "No tools match '{query}'",
+    clearSearch: "Clear search",
+    all: "All",
+    documents: "Documents",
+    data: "Data",
+    toolCount: "{count} tools",
   },
   fullscreenGrid: {
     searchPlaceholder: "Werkzeuge suchen...",

packages/shared/src/i18n/en.ts

@@ -2412,6 +2412,17 @@ export const en = {
     changeFile: "Change file",
     quickActions: "Quick Actions",
     allTools: "All Tools",
+    searchPlaceholder: "Search {count} tools...",
+    recent: "Recent",
+    popular: "Popular",
+    browseByCategory: "Browse by Category",
+    gettingStarted: "Getting Started",
+    noToolsMatch: "No tools match '{query}'",
+    clearSearch: "Clear search",
+    all: "All",
+    documents: "Documents",
+    data: "Data",
+    toolCount: "{count} tools",
   },
   fullscreenGrid: {
     searchPlaceholder: "Search tools...",

packages/shared/src/i18n/es.ts

@@ -2444,6 +2444,17 @@ export const es: TranslationKeys = {
     changeFile: "Cambiar archivo",
     quickActions: "Acciones rapidas",
     allTools: "Todas las herramientas",
+    searchPlaceholder: "Search {count} tools...",
+    recent: "Recent",
+    popular: "Popular",
+    browseByCategory: "Browse by Category",
+    gettingStarted: "Getting Started",
+    noToolsMatch: "No tools match '{query}'",
+    clearSearch: "Clear search",
+    all: "All",
+    documents: "Documents",
+    data: "Data",
+    toolCount: "{count} tools",
   },
   fullscreenGrid: {
     searchPlaceholder: "Buscar herramientas...",

packages/shared/src/i18n/fr.ts

@@ -2463,6 +2463,17 @@ export const fr: TranslationKeys = {
     changeFile: "Changer de fichier",
     quickActions: "Actions rapides",
     allTools: "Tous les outils",
+    searchPlaceholder: "Search {count} tools...",
+    recent: "Recent",
+    popular: "Popular",
+    browseByCategory: "Browse by Category",
+    gettingStarted: "Getting Started",
+    noToolsMatch: "No tools match '{query}'",
+    clearSearch: "Clear search",
+    all: "All",
+    documents: "Documents",
+    data: "Data",
+    toolCount: "{count} tools",
   },
   fullscreenGrid: {
     searchPlaceholder: "Rechercher des outils...",

packages/shared/src/i18n/hi.ts

@@ -2445,6 +2445,17 @@ export const hi: TranslationKeys = {
     changeFile: "फाइल बदलें",
     quickActions: "त्वरित कार्रवाइयां",
     allTools: "सभी टूल्स",
+    searchPlaceholder: "Search {count} tools...",
+    recent: "Recent",
+    popular: "Popular",
+    browseByCategory: "Browse by Category",
+    gettingStarted: "Getting Started",
+    noToolsMatch: "No tools match '{query}'",
+    clearSearch: "Clear search",
+    all: "All",
+    documents: "Documents",
+    data: "Data",
+    toolCount: "{count} tools",
   },
   fullscreenGrid: {
     searchPlaceholder: "टूल्स खोजें...",

packages/shared/src/i18n/id.ts

@@ -2457,6 +2457,17 @@ export const id: TranslationKeys = {
     changeFile: "Ganti file",
     quickActions: "Aksi Cepat",
     allTools: "Semua Alat",
+    searchPlaceholder: "Search {count} tools...",
+    recent: "Recent",
+    popular: "Popular",
+    browseByCategory: "Browse by Category",
+    gettingStarted: "Getting Started",
+    noToolsMatch: "No tools match '{query}'",
+    clearSearch: "Clear search",
+    all: "All",
+    documents: "Documents",
+    data: "Data",
+    toolCount: "{count} tools",
   },
   fullscreenGrid: {
     searchPlaceholder: "Cari alat...",

packages/shared/src/i18n/it.ts

@@ -2456,6 +2456,17 @@ export const it: TranslationKeys = {
     changeFile: "Cambia file",
     quickActions: "Azioni rapide",
     allTools: "Tutti gli strumenti",
+    searchPlaceholder: "Search {count} tools...",
+    recent: "Recent",
+    popular: "Popular",
+    browseByCategory: "Browse by Category",
+    gettingStarted: "Getting Started",
+    noToolsMatch: "No tools match '{query}'",
+    clearSearch: "Clear search",
+    all: "All",
+    documents: "Documents",
+    data: "Data",
+    toolCount: "{count} tools",
   },
   fullscreenGrid: {
     searchPlaceholder: "Cerca strumenti...",

packages/shared/src/i18n/ja.ts

@@ -2415,6 +2415,17 @@ export const ja: TranslationKeys = {
     changeFile: "ファイルを変更",
     quickActions: "クイックアクション",
     allTools: "すべてのツール",
+    searchPlaceholder: "Search {count} tools...",
+    recent: "Recent",
+    popular: "Popular",
+    browseByCategory: "Browse by Category",
+    gettingStarted: "Getting Started",
+    noToolsMatch: "No tools match '{query}'",
+    clearSearch: "Clear search",
+    all: "All",
+    documents: "Documents",
+    data: "Data",
+    toolCount: "{count} tools",
   },
   fullscreenGrid: {
     searchPlaceholder: "ツールを検索...",

packages/shared/src/i18n/ko.ts

@@ -2400,6 +2400,17 @@ export const ko: TranslationKeys = {
     changeFile: "파일 변경",
     quickActions: "빠른 실행",
     allTools: "모든 도구",
+    searchPlaceholder: "Search {count} tools...",
+    recent: "Recent",
+    popular: "Popular",
+    browseByCategory: "Browse by Category",
+    gettingStarted: "Getting Started",
+    noToolsMatch: "No tools match '{query}'",
+    clearSearch: "Clear search",
+    all: "All",
+    documents: "Documents",
+    data: "Data",
+    toolCount: "{count} tools",
   },
   fullscreenGrid: {
     searchPlaceholder: "도구 검색...",

packages/shared/src/i18n/nl.ts

@@ -2459,6 +2459,17 @@ export const nl: TranslationKeys = {
     changeFile: "Bestand wijzigen",
     quickActions: "Snelle acties",
     allTools: "Alle tools",
+    searchPlaceholder: "Search {count} tools...",
+    recent: "Recent",
+    popular: "Popular",
+    browseByCategory: "Browse by Category",
+    gettingStarted: "Getting Started",
+    noToolsMatch: "No tools match '{query}'",
+    clearSearch: "Clear search",
+    all: "All",
+    documents: "Documents",
+    data: "Data",
+    toolCount: "{count} tools",
   },
   fullscreenGrid: {
     searchPlaceholder: "Gereedschap zoeken...",

packages/shared/src/i18n/pl.ts

@@ -2460,6 +2460,17 @@ export const pl: TranslationKeys = {
     changeFile: "Zmień plik",
     quickActions: "Szybkie akcje",
     allTools: "Wszystkie narzędzia",
+    searchPlaceholder: "Search {count} tools...",
+    recent: "Recent",
+    popular: "Popular",
+    browseByCategory: "Browse by Category",
+    gettingStarted: "Getting Started",
+    noToolsMatch: "No tools match '{query}'",
+    clearSearch: "Clear search",
+    all: "All",
+    documents: "Documents",
+    data: "Data",
+    toolCount: "{count} tools",
   },
   fullscreenGrid: {
     searchPlaceholder: "Szukaj narzędzi...",

packages/shared/src/i18n/pt-BR.ts

@@ -2456,6 +2456,17 @@ export const ptBR: TranslationKeys = {
     changeFile: "Alterar arquivo",
     quickActions: "Acoes rapidas",
     allTools: "Todas as ferramentas",
+    searchPlaceholder: "Search {count} tools...",
+    recent: "Recent",
+    popular: "Popular",
+    browseByCategory: "Browse by Category",
+    gettingStarted: "Getting Started",
+    noToolsMatch: "No tools match '{query}'",
+    clearSearch: "Clear search",
+    all: "All",
+    documents: "Documents",
+    data: "Data",
+    toolCount: "{count} tools",
   },
   fullscreenGrid: {
     searchPlaceholder: "Buscar ferramentas...",

packages/shared/src/i18n/ru.ts

@@ -2458,6 +2458,17 @@ export const ru: TranslationKeys = {
     changeFile: "Сменить файл",
     quickActions: "Быстрые действия",
     allTools: "Все инструменты",
+    searchPlaceholder: "Search {count} tools...",
+    recent: "Recent",
+    popular: "Popular",
+    browseByCategory: "Browse by Category",
+    gettingStarted: "Getting Started",
+    noToolsMatch: "No tools match '{query}'",
+    clearSearch: "Clear search",
+    all: "All",
+    documents: "Documents",
+    data: "Data",
+    toolCount: "{count} tools",
   },
   fullscreenGrid: {
     searchPlaceholder: "Поиск инструментов...",

packages/shared/src/i18n/sv.ts

@@ -2455,6 +2455,17 @@ export const sv: TranslationKeys = {
     changeFile: "Byt fil",
     quickActions: "Snabbatgarder",
     allTools: "Alla verktyg",
+    searchPlaceholder: "Search {count} tools...",
+    recent: "Recent",
+    popular: "Popular",
+    browseByCategory: "Browse by Category",
+    gettingStarted: "Getting Started",
+    noToolsMatch: "No tools match '{query}'",
+    clearSearch: "Clear search",
+    all: "All",
+    documents: "Documents",
+    data: "Data",
+    toolCount: "{count} tools",
   },
   fullscreenGrid: {
     searchPlaceholder: "Sok verktyg...",

packages/shared/src/i18n/th.ts

@@ -2437,6 +2437,17 @@ export const th: TranslationKeys = {
     changeFile: "เปลี่ยนไฟล์",
     quickActions: "การดำเนินการด่วน",
     allTools: "เครื่องมือทั้งหมด",
+    searchPlaceholder: "Search {count} tools...",
+    recent: "Recent",
+    popular: "Popular",
+    browseByCategory: "Browse by Category",
+    gettingStarted: "Getting Started",
+    noToolsMatch: "No tools match '{query}'",
+    clearSearch: "Clear search",
+    all: "All",
+    documents: "Documents",
+    data: "Data",
+    toolCount: "{count} tools",
   },
   fullscreenGrid: {
     searchPlaceholder: "ค้นหาเครื่องมือ...",

packages/shared/src/i18n/tr.ts

@@ -2460,6 +2460,17 @@ export const tr: TranslationKeys = {
     changeFile: "Dosyayı değiştir",
     quickActions: "Hızlı İşlemler",
     allTools: "Tüm Araçlar",
+    searchPlaceholder: "Search {count} tools...",
+    recent: "Recent",
+    popular: "Popular",
+    browseByCategory: "Browse by Category",
+    gettingStarted: "Getting Started",
+    noToolsMatch: "No tools match '{query}'",
+    clearSearch: "Clear search",
+    all: "All",
+    documents: "Documents",
+    data: "Data",
+    toolCount: "{count} tools",
   },
   fullscreenGrid: {
     searchPlaceholder: "Araç ara...",

packages/shared/src/i18n/uk.ts

@@ -2458,6 +2458,17 @@ export const uk: TranslationKeys = {
     changeFile: "Змінити файл",
     quickActions: "Швидкі дії",
     allTools: "Усі інструменти",
+    searchPlaceholder: "Search {count} tools...",
+    recent: "Recent",
+    popular: "Popular",
+    browseByCategory: "Browse by Category",
+    gettingStarted: "Getting Started",
+    noToolsMatch: "No tools match '{query}'",
+    clearSearch: "Clear search",
+    all: "All",
+    documents: "Documents",
+    data: "Data",
+    toolCount: "{count} tools",
   },
   fullscreenGrid: {
     searchPlaceholder: "Пошук інструментів...",

packages/shared/src/i18n/vi.ts

@@ -2457,6 +2457,17 @@ export const vi: TranslationKeys = {
     changeFile: "Đổi tệp",
     quickActions: "Thao tác nhanh",
     allTools: "Tất cả công cụ",
+    searchPlaceholder: "Search {count} tools...",
+    recent: "Recent",
+    popular: "Popular",
+    browseByCategory: "Browse by Category",
+    gettingStarted: "Getting Started",
+    noToolsMatch: "No tools match '{query}'",
+    clearSearch: "Clear search",
+    all: "All",
+    documents: "Documents",
+    data: "Data",
+    toolCount: "{count} tools",
   },
   fullscreenGrid: {
     searchPlaceholder: "Tìm kiếm công cụ...",

packages/shared/src/i18n/zh-CN.ts

@@ -2390,6 +2390,17 @@ export const zhCN: TranslationKeys = {
     changeFile: "更换文件",
     quickActions: "快捷操作",
     allTools: "所有工具",
+    searchPlaceholder: "Search {count} tools...",
+    recent: "Recent",
+    popular: "Popular",
+    browseByCategory: "Browse by Category",
+    gettingStarted: "Getting Started",
+    noToolsMatch: "No tools match '{query}'",
+    clearSearch: "Clear search",
+    all: "All",
+    documents: "Documents",
+    data: "Data",
+    toolCount: "{count} tools",
   },
   fullscreenGrid: {
     searchPlaceholder: "搜索工具...",

packages/shared/src/i18n/zh-TW.ts

@@ -2388,6 +2388,17 @@ export const zhTW: TranslationKeys = {
     changeFile: "更換檔案",
     quickActions: "快捷動作",
     allTools: "全部工具",
+    searchPlaceholder: "Search {count} tools...",
+    recent: "Recent",
+    popular: "Popular",
+    browseByCategory: "Browse by Category",
+    gettingStarted: "Getting Started",
+    noToolsMatch: "No tools match '{query}'",
+    clearSearch: "Clear search",
+    all: "All",
+    documents: "Documents",
+    data: "Data",
+    toolCount: "{count} tools",
   },
   fullscreenGrid: {
     searchPlaceholder: "搜尋工具...",