Misc fixes: Storefront shop layout, product filter UI improvements, and cart badge styling

admin-spa/src/routes/Appearance/Shop.tsx

@@ -19,6 +19,7 @@ export default function AppearanceShop() {
   const [gridStyle, setGridStyle] = useState('standard');
   const [cardStyle, setCardStyle] = useState('card');
   const [aspectRatio, setAspectRatio] = useState('square');
+  const [filterLayout, setFilterLayout] = useState('basic');
   
   const [elements, setElements] = useState({
     category_filter: true,
@@ -50,6 +51,7 @@ export default function AppearanceShop() {
           setCardStyle(shop.layout?.card_style || 'card');
           setAspectRatio(shop.layout?.aspect_ratio || 'square');
           setCardTextAlign(shop.layout?.card_text_align || 'left');
+          setFilterLayout(shop.layout?.filter_layout || 'basic');
           
           if (shop.elements) {
             setElements(shop.elements);
@@ -83,7 +85,8 @@ export default function AppearanceShop() {
           grid_style: gridStyle,
           card_style: cardStyle, 
           aspect_ratio: aspectRatio,
-          card_text_align: cardTextAlign
+          card_text_align: cardTextAlign,
+          filter_layout: filterLayout
         },
         elements: {
           category_filter: elements.category_filter,
@@ -181,6 +184,18 @@ export default function AppearanceShop() {
           </Select>
         </SettingsSection>
 
+        <SettingsSection label="Filter Layout" htmlFor="filter-layout" description="Choose how catalog filters are presented">
+          <Select value={filterLayout} onValueChange={setFilterLayout}>
+            <SelectTrigger id="filter-layout">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="basic">Basic - Horizontal Top Bar</SelectItem>
+              <SelectItem value="rich_sidebar">Rich - Left Sidebar</SelectItem>
+            </SelectContent>
+          </Select>
+        </SettingsSection>
+
         <SettingsSection label="Product Card Style" htmlFor="card-style" description="Visual style adapts to column count - more columns = cleaner style">
           <Select value={cardStyle} onValueChange={setCardStyle}>
             <SelectTrigger id="card-style">

admin-spa/src/routes/Products/SoftwareVersions/index.tsx

@@ -152,7 +152,7 @@ export default function SoftwareVersions() {
                                 placeholder={__('Search products...')}
                                 value={search}
                                 onChange={(e) => setSearch(e.target.value)}
-                                className="pl-9"
+                                className="!pl-9"
                             />
                         </div>
                     </div>

admin-spa/src/routes/Products/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from 'react';
 import { useQuery, useMutation, useQueryClient, keepPreviousData } from '@tanstack/react-query';
 import { api } from '@/lib/api';
-import { Filter, Package, Trash2, RefreshCw, MoreHorizontal, Eye, Edit } from 'lucide-react';
+import { Filter, Package, Trash2, RefreshCw, MoreHorizontal, Eye, Edit, Search } from 'lucide-react';
 import { ErrorCard } from '@/components/ErrorCard';
 import { getPageLoadErrorMessage } from '@/lib/errorHandling';
 import { __ } from '@/lib/i18n';
@@ -18,6 +18,7 @@ import {
 } from '@/components/ui/alert-dialog';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
+import { Input } from '@/components/ui/input';
 import { toast } from 'sonner';
 import {
   Select,
@@ -253,6 +254,16 @@ export default function Products() {
               <RefreshCw className={`w-4 h-4 ${isRefreshing ? 'animate-spin' : ''}`} />
               {__('Refresh')}
             </button>
+
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+              <Input
+                placeholder={__('Search products...')}
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-[200px] lg:w-[250px] !pl-9"
+              />
+            </div>
           </div>
 
           <div className="flex gap-2 items-center">