@schandlergarcia/sf-web-components 1.9.56 → 1.9.57

package/CHANGELOG.md

@@ -5,6 +5,30 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.9.57] - 2026-04-01
+
+### Fixed
+- **src/templates/pages/Home.tsx.template** - Restored "Browse All Accounts" button
+  - Issue: v1.9.56 removed the Browse All button thinking it was broken
+  - Reality: The postinstall routes.tsx.template DOES have /accounts route (pointing to __examples__/AccountSearch)
+  - The button should exist and work correctly after postinstall
+  - Changed title from "Search" to "Account Search" 
+  - Changed button text from "Browse All" to "Browse All Accounts"
+  - Now matches the __examples__/pages/Home.tsx reference implementation
+
+- **scripts/reset-command-center.sh** - Added /accounts route to reset
+  - Issue: Reset routes.tsx didn't include /accounts route, causing Browse All button → 404
+  - Solution: Updated reset routes.tsx to match postinstall routes.tsx.template
+  - Now includes routes for: Home (→ __examples__/Home), /accounts (→ __examples__/AccountSearch), /accounts/:recordId (→ __examples__/AccountObjectDetailPage)
+  - Also updated reset Home.tsx template to restore Browse All button (even though routes points to __examples__/Home)
+
+### Context
+The correct architecture (matching react5 and postinstall):
+- Home route points to `features/object-search/__examples__/pages/Home.tsx` (has Browse All button)
+- /accounts route points to `features/object-search/__examples__/pages/AccountSearch.tsx` (account list page)
+- /accounts/:recordId route points to `features/object-search/__examples__/pages/AccountObjectDetailPage.tsx` (detail page)
+- All use shadcn Button/Input (correct for outer app context)
+
 ## [1.9.56] - 2026-04-01
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schandlergarcia/sf-web-components",
-  "version": "1.9.56",
+  "version": "1.9.57",
   "description": "Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui",
   "type": "module",
   "main": "./dist/index.js",

package/scripts/reset-command-center.sh

@@ -163,7 +163,9 @@ export default function HomePage() {
 	const handleSearch = () => {
 		const trimmed = searchQuery.trim();
 		if (trimmed) {
-			navigate(`/search?q=${encodeURIComponent(trimmed)}`);
+			navigate(`/accounts?search=${encodeURIComponent(trimmed)}`);
+		} else {
+			navigate('/accounts');
 		}
 	};
 
@@ -178,8 +180,8 @@ export default function HomePage() {
 		<div className="flex min-h-[80vh] items-center justify-center px-4 sm:px-6 lg:px-8 bg-slate-50 dark:bg-slate-950 transition-colors">
 			<div className="w-full max-w-4xl">
 				<div className="text-center mb-8">
-					<h1 className="text-4xl font-bold text-slate-900 dark:text-slate-50 mb-4">Search</h1>
-					<p className="text-lg text-slate-600 dark:text-slate-300">Find records across your organization.</p>
+					<h1 className="text-4xl font-bold text-slate-900 dark:text-slate-50 mb-4">Account Search</h1>
+					<p className="text-lg text-slate-600 dark:text-slate-300">Search by name, phone, or industry.</p>
 				</div>
 				<div className="flex flex-col gap-4">
 					<div className="relative">
@@ -197,6 +199,9 @@ export default function HomePage() {
 						<Button onClick={handleSearch}>
 							Search
 						</Button>
+						<Button onClick={() => navigate('/accounts')} variant="outline">
+							Browse All Accounts
+						</Button>
 					</div>
 				</div>
 			</div>
@@ -245,40 +250,35 @@ echo "→ Updating ${ROUTES}..."
 
 cat > "$ROUTES" << 'ROUTES_EOF'
 import type { RouteObject } from 'react-router';
-import { lazy, Suspense } from "react";
-
-const AppLayout = lazy(() => import('./appLayout'));
-const Home = lazy(() => import('./pages/Home'));
-const Search = lazy(() => import('./pages/Search'));
-const NotFound = lazy(() => import('./pages/NotFound'));
-
-function SuspenseWrap({ children }: { children: React.ReactNode }) {
-  return <Suspense fallback={<div className="flex min-h-screen items-center justify-center text-sm text-muted-foreground">Loading...</div>}>{children}</Suspense>;
-}
+import AppLayout from './appLayout';
+import Home from './features/object-search/__examples__/pages/Home';
+import AccountSearch from './features/object-search/__examples__/pages/AccountSearch';
+import AccountObjectDetailPage from './features/object-search/__examples__/pages/AccountObjectDetailPage';
+import NotFound from './pages/NotFound';
 
 export const routes: RouteObject[] = [
   {
     path: "/",
-    element: (
-      <SuspenseWrap>
-        <AppLayout />
-      </SuspenseWrap>
-    ),
+    element: <AppLayout />,
     children: [
       {
         index: true,
-        element: <SuspenseWrap><Home /></SuspenseWrap>,
-        handle: { showInNavigation: true, showNavBar: true, label: 'Home' }
+        element: <Home />,
+        handle: { showInNavigation: true, label: "Home" }
       },
       {
-        path: "search",
-        element: <SuspenseWrap><Search /></SuspenseWrap>,
-        handle: { showInNavigation: true, showNavBar: true, label: 'Search' }
+        path: 'accounts',
+        element: <AccountSearch />,
+        handle: { showInNavigation: true, label: "Accounts" }
       },
       {
-        path: '*',
-        element: <SuspenseWrap><NotFound /></SuspenseWrap>
+        path: 'accounts/:recordId',
+        element: <AccountObjectDetailPage />
       },
+      {
+        path: '*',
+        element: <NotFound />
+      }
     ]
   }
 ];

package/src/templates/pages/Home.tsx.template

@@ -28,8 +28,8 @@ export default function HomePage() {
 		<div className="flex min-h-[80vh] items-center justify-center px-4 sm:px-6 lg:px-8 bg-slate-50 dark:bg-slate-950 transition-colors">
 			<div className="w-full max-w-4xl">
 				<div className="text-center mb-8">
-					<h1 className="text-4xl font-bold text-slate-900 dark:text-slate-50 mb-4">Search</h1>
-					<p className="text-lg text-slate-600 dark:text-slate-300">Find records across your organization.</p>
+					<h1 className="text-4xl font-bold text-slate-900 dark:text-slate-50 mb-4">Account Search</h1>
+					<p className="text-lg text-slate-600 dark:text-slate-300">Search by name, phone, or industry.</p>
 				</div>
 				<div className="flex flex-col gap-4">
 					<div className="relative">
@@ -48,7 +48,7 @@ export default function HomePage() {
 							Search
 						</Button>
 						<Button onClick={() => navigate('/accounts')} variant="outline">
-							Browse All
+							Browse All Accounts
 						</Button>
 					</div>
 				</div>