Wrap Browse in PageContainer

app/src/app/(tabs)/browse.tsx

@@ -6,6 +6,8 @@ import { Chip, SearchField, Switch, Typography, useThemeColor } from "heroui-nat
 import type { Currency, Product } from "@/data/mock";
 import { PRODUCTS } from "@/data/mock";
 import { ListingCard } from "@/components/ListingCard";
+import { PageContainer } from "@/components/PageContainer";
+import { MICRO_LABEL_CLASS } from "@/lib/typography";
 
 type CurrencyFilter = "all" | Currency;
 type SortMode = "newest" | "priceLow" | "priceHigh";
@@ -38,123 +40,115 @@ export default function BrowseTab(): JSX.Element {
 
   return (
     <View className="flex-1 bg-background">
-      <View className="gap-3 border-b border-border px-4 py-3">
-        <SearchField value={search} onChange={setSearch}>
-          <SearchField.Group>
-            <SearchField.SearchIcon />
-            <SearchField.Input placeholder="Search listings…" />
-            <SearchField.ClearButton />
-          </SearchField.Group>
-        </SearchField>
+      <View className="border-b border-border">
+        <PageContainer className="gap-3 py-3">
+          <SearchField value={search} onChange={setSearch}>
+            <SearchField.Group>
+              <SearchField.SearchIcon />
+              <SearchField.Input placeholder="Search listings…" />
+              <SearchField.ClearButton />
+            </SearchField.Group>
+          </SearchField>
 
-        <View className="flex-row flex-wrap items-center gap-2">
-          <Typography type="body-xs" color="muted">
-            Currency
-          </Typography>
-          <Chip
-            size="sm"
-            variant={currencyFilter === "all" ? "primary" : "soft"}
-            color={currencyFilter === "all" ? "accent" : "default"}
-            onPress={() => setCurrencyFilter("all")}
-          >
-            <Chip.Label>All</Chip.Label>
-          </Chip>
-          <Chip
-            size="sm"
-            variant={currencyFilter === "SOL" ? "primary" : "soft"}
-            color={currencyFilter === "SOL" ? "accent" : "default"}
-            onPress={() => setCurrencyFilter("SOL")}
-          >
-            <Chip.Label>SOL</Chip.Label>
-          </Chip>
-          <Chip
-            size="sm"
-            variant={currencyFilter === "USDC" ? "primary" : "soft"}
-            color={currencyFilter === "USDC" ? "accent" : "default"}
-            onPress={() => setCurrencyFilter("USDC")}
-          >
-            <Chip.Label>USDC</Chip.Label>
-          </Chip>
-
-          <Typography type="body-xs" color="muted" className="ml-2">
-            Sort
-          </Typography>
-          <Chip
-            size="sm"
-            variant={sortMode === "newest" ? "primary" : "soft"}
-            color={sortMode === "newest" ? "accent" : "default"}
-            onPress={() => setSortMode("newest")}
-          >
-            <Chip.Label>Newest</Chip.Label>
-          </Chip>
-          <Chip
-            size="sm"
-            variant={sortMode === "priceLow" ? "primary" : "soft"}
-            color={sortMode === "priceLow" ? "accent" : "default"}
-            onPress={() => setSortMode("priceLow")}
-          >
-            <Chip.Label>Price ↑</Chip.Label>
-          </Chip>
-          <Chip
-            size="sm"
-            variant={sortMode === "priceHigh" ? "primary" : "soft"}
-            color={sortMode === "priceHigh" ? "accent" : "default"}
-            onPress={() => setSortMode("priceHigh")}
-          >
-            <Chip.Label>Price ↓</Chip.Label>
-          </Chip>
-        </View>
-
-        <View className="flex-row items-center justify-between">
-          <View className="flex-row items-center gap-2">
-            <Switch isSelected={inStockOnly} onSelectedChange={setInStockOnly} />
-            <Typography type="body-xs" color="muted">
-              In stock only
-            </Typography>
-          </View>
-          <View className="flex-row gap-1 rounded-lg border border-border bg-surface p-1">
-            <Pressable
-              onPress={() => setViewMode("list")}
-              className={`h-7 w-8 items-center justify-center rounded-md ${
-                viewMode === "list" ? "bg-accent" : ""
-              }`}
+          <View className="flex-row flex-wrap items-center gap-2">
+            <Typography className={MICRO_LABEL_CLASS}>Currency</Typography>
+            <Chip
+              size="sm"
+              variant={currencyFilter === "all" ? "primary" : "soft"}
+              color={currencyFilter === "all" ? "accent" : "default"}
+              onPress={() => setCurrencyFilter("all")}
             >
-              <Ionicons
-                name="list"
-                size={14}
-                color={viewMode === "list" ? accentForeground : mutedColor}
-              />
-            </Pressable>
-            <Pressable
-              onPress={() => setViewMode("grid")}
-              className={`h-7 w-8 items-center justify-center rounded-md ${
-                viewMode === "grid" ? "bg-accent" : ""
-              }`}
+              <Chip.Label>All</Chip.Label>
+            </Chip>
+            <Chip
+              size="sm"
+              variant={currencyFilter === "SOL" ? "primary" : "soft"}
+              color={currencyFilter === "SOL" ? "accent" : "default"}
+              onPress={() => setCurrencyFilter("SOL")}
             >
-              <Ionicons
-                name="grid"
-                size={14}
-                color={viewMode === "grid" ? accentForeground : mutedColor}
-              />
-            </Pressable>
+              <Chip.Label>SOL</Chip.Label>
+            </Chip>
+            <Chip
+              size="sm"
+              variant={currencyFilter === "USDC" ? "primary" : "soft"}
+              color={currencyFilter === "USDC" ? "accent" : "default"}
+              onPress={() => setCurrencyFilter("USDC")}
+            >
+              <Chip.Label>USDC</Chip.Label>
+            </Chip>
+
+            <Typography className={`${MICRO_LABEL_CLASS} ml-2`}>Sort</Typography>
+            <Chip
+              size="sm"
+              variant={sortMode === "newest" ? "primary" : "soft"}
+              color={sortMode === "newest" ? "accent" : "default"}
+              onPress={() => setSortMode("newest")}
+            >
+              <Chip.Label>Newest</Chip.Label>
+            </Chip>
+            <Chip
+              size="sm"
+              variant={sortMode === "priceLow" ? "primary" : "soft"}
+              color={sortMode === "priceLow" ? "accent" : "default"}
+              onPress={() => setSortMode("priceLow")}
+            >
+              <Chip.Label>Price ↑</Chip.Label>
+            </Chip>
+            <Chip
+              size="sm"
+              variant={sortMode === "priceHigh" ? "primary" : "soft"}
+              color={sortMode === "priceHigh" ? "accent" : "default"}
+              onPress={() => setSortMode("priceHigh")}
+            >
+              <Chip.Label>Price ↓</Chip.Label>
+            </Chip>
           </View>
-        </View>
+
+          <View className="flex-row items-center justify-between">
+            <View className="flex-row items-center gap-2">
+              <Switch isSelected={inStockOnly} onSelectedChange={setInStockOnly} />
+              <Typography type="body-xs" color="muted">
+                In stock only
+              </Typography>
+            </View>
+            <View className="flex-row gap-1 rounded-lg border border-border bg-surface p-1">
+              <Pressable
+                onPress={() => setViewMode("list")}
+                className={`h-7 w-8 items-center justify-center rounded-md ${
+                  viewMode === "list" ? "bg-accent" : ""
+                }`}
+              >
+                <Ionicons name="list" size={14} color={viewMode === "list" ? accentForeground : mutedColor} />
+              </Pressable>
+              <Pressable
+                onPress={() => setViewMode("grid")}
+                className={`h-7 w-8 items-center justify-center rounded-md ${
+                  viewMode === "grid" ? "bg-accent" : ""
+                }`}
+              >
+                <Ionicons name="grid" size={14} color={viewMode === "grid" ? accentForeground : mutedColor} />
+              </Pressable>
+            </View>
+          </View>
+        </PageContainer>
       </View>
 
       <ScrollView className="flex-1">
-        {viewMode === "list" ? (
-          <View className="gap-2.5 p-3.5">
-            {products.map((product) => (
-              <ListingCard key={product.id} product={product} variant="list" />
-            ))}
-          </View>
-        ) : (
-          <View className="flex-row flex-wrap p-2">
-            {products.map((product) => (
-              <ListingCard key={product.id} product={product} variant="grid" />
-            ))}
-          </View>
-        )}
+        <PageContainer className="py-3.5">
+          {viewMode === "list" ? (
+            <View className="gap-2.5">
+              {products.map((product) => (
+                <ListingCard key={product.id} product={product} variant="list" />
+              ))}
+            </View>
+          ) : (
+            <View className="flex-row flex-wrap">
+              {products.map((product) => (
+                <ListingCard key={product.id} product={product} variant="grid" />
+              ))}
+            </View>
+          )}
+        </PageContainer>
       </ScrollView>
     </View>
   );