fix: improve Products and Website Content page separation

This commit fixes the knowledge base pages to work properly as separate entities:

1. Hide tab selector and store selector on dedicated pages
   - When accessing /products or /website-content, tabs are hidden
   - Store selector only shows on the combined /manage-store-data page

2. Add global shop context integration
   - Products and Website Content pages now listen to shop changes from sidebar
   - Content automatically refreshes when different shop is selected
   - State (filters, pagination, search) resets on shop change

3. Update page titles
   - Dedicated pages show "Products" or "Website Content" as title
   - Subtitle shows the current store name
   - Combined page keeps original "Data Management" title

4. Fix shop change detection
   - Added useEffect to watch selectedShop from ShopContext
   - When shop changes on dedicated pages, selectedStore updates
   - Triggers data refresh automatically

This ensures that:
- Products and Website Content are completely separated pages
- Changing shop in sidebar immediately updates the displayed content
- No stale data from previous shop selection
- Clean UI without redundant selectors on dedicated pages

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

shopcall.ai-main/src/components/ManageStoreDataContent.tsx

@@ -10,6 +10,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Badge } from "@/components/ui/badge";
+import { useShop } from "@/components/context/ShopContext";
 import {
   Dialog,
   DialogContent,
@@ -119,12 +120,16 @@ export function ManageStoreDataContent({ defaultTab }: ManageStoreDataContentPro
   const [searchParams] = useSearchParams();
   const { toast } = useToast();
   const { t } = useTranslation();
+  const { selectedShop } = useShop();
 
   const [stores, setStores] = useState<StoreData[]>([]);
   const [selectedStore, setSelectedStore] = useState<StoreData | null>(null);
   const [loading, setLoading] = useState(true);
   const [activeTab, setActiveTab] = useState<"products" | "website">(defaultTab || "products");
 
+  // Track if we're on a dedicated page (Products or Website Content)
+  const isDedicatedPage = defaultTab !== undefined;
+
   // Filter and search state
   const [searchQuery, setSearchQuery] = useState("");
   const [statusFilter, setStatusFilter] = useState<"all" | "enabled" | "disabled">("all");
@@ -229,6 +234,20 @@ export function ManageStoreDataContent({ defaultTab }: ManageStoreDataContentPro
     fetchStores();
   }, [searchParams, toast]);
 
+  // Update selected store when global shop context changes (for dedicated pages)
+  useEffect(() => {
+    if (isDedicatedPage && selectedShop) {
+      setSelectedStore(selectedShop);
+      // Reset state when shop changes
+      setPage(1);
+      setSearchQuery("");
+      setStatusFilter("all");
+      setCategoryFilter("all");
+      setSelectedItems(new Set());
+      setSelectAll(false);
+    }
+  }, [selectedShop, isDedicatedPage]);
+
   // Fetch categories when store changes
   useEffect(() => {
     if (selectedStore) {
@@ -953,10 +972,22 @@ export function ManageStoreDataContent({ defaultTab }: ManageStoreDataContentPro
     <div className="flex-1 space-y-6 p-8 bg-slate-900">
       <div className="flex items-center justify-between">
         <div>
-          <h2 className="text-3xl font-bold tracking-tight text-white">{t('manageStoreData.title')}</h2>
-          <p className="text-slate-400">{t('manageStoreData.subtitle')}</p>
+          <h2 className="text-3xl font-bold tracking-tight text-white">
+            {isDedicatedPage
+              ? activeTab === "products"
+                ? t('sidebar.products')
+                : t('sidebar.websiteContent')
+              : t('manageStoreData.title')
+            }
+          </h2>
+          <p className="text-slate-400">
+            {isDedicatedPage
+              ? selectedStore?.store_name || t('manageStoreData.storeSelector.unnamedStore')
+              : t('manageStoreData.subtitle')
+            }
+          </p>
         </div>
-        {stores.length > 1 && (
+        {!isDedicatedPage && stores.length > 1 && (
           <Select value={selectedStore?.id} onValueChange={(value) => {
             const store = stores.find(s => s.id === value);
             if (store) setSelectedStore(store);
@@ -989,16 +1020,19 @@ export function ManageStoreDataContent({ defaultTab }: ManageStoreDataContentPro
             setSelectedItems(new Set());
             setSelectAll(false);
           }}>
-            <TabsList className="bg-slate-700 mb-6">
-              <TabsTrigger value="products" className="data-[state=active]:bg-slate-600 data-[state=active]:text-white">
-                <Package className="w-4 h-4 mr-2" />
-                {t('manageStoreData.tabs.products')} ({enabledCount}/{totalCount})
-              </TabsTrigger>
-              <TabsTrigger value="website" className="data-[state=active]:bg-slate-600 data-[state=active]:text-white">
-                <Globe className="w-4 h-4 mr-2" />
-                {t('manageStoreData.tabs.website')}
-              </TabsTrigger>
-            </TabsList>
+            {/* Hide tabs on dedicated pages (Products/Website Content pages) */}
+            {!isDedicatedPage && (
+              <TabsList className="bg-slate-700 mb-6">
+                <TabsTrigger value="products" className="data-[state=active]:bg-slate-600 data-[state=active]:text-white">
+                  <Package className="w-4 h-4 mr-2" />
+                  {t('manageStoreData.tabs.products')} ({enabledCount}/{totalCount})
+                </TabsTrigger>
+                <TabsTrigger value="website" className="data-[state=active]:bg-slate-600 data-[state=active]:text-white">
+                  <Globe className="w-4 h-4 mr-2" />
+                  {t('manageStoreData.tabs.website')}
+                </TabsTrigger>
+              </TabsList>
+            )}
 
             {/* Search and Filter Bar - Only show for products tab */}
             {activeTab === "products" && (