From 8792a884cd59b93deb5f994d279d3898957e4f0d Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Sun, 3 May 2026 16:38:48 +0200
Subject: [PATCH] fix(market): drop floating cart button, badge the navbar Cart
 tab
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The floating "Cart (N)" button (fixed bottom-4 right-4) was hidden
behind the bottom navbar — both occupy the same screen position.
The navbar already has a Cart tab, so the floating button is
redundant.

- Remove CartButton.vue component and its usages from MarketPage
  and StallView.
- Add a count badge to the Cart tab in the market app navbar that
  shows marketStore.totalCartItems when > 0.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/market-app/App.vue                       | 13 +++++++++--
 src/modules/market/components/CartButton.vue | 23 --------------------
 src/modules/market/views/MarketPage.vue      |  4 ----
 src/modules/market/views/StallView.vue       |  4 ----
 4 files changed, 11 insertions(+), 33 deletions(-)
 delete mode 100644 src/modules/market/components/CartButton.vue

diff --git a/src/market-app/App.vue b/src/market-app/App.vue
index 9aed606..7d40951 100644
--- a/src/market-app/App.vue
+++ b/src/market-app/App.vue
@@ -6,6 +6,7 @@ import LoginDialog from '@/components/auth/LoginDialog.vue'
 import { useTheme } from '@/components/theme-provider'
 import { toast } from 'vue-sonner'
 import { useAuth } from '@/composables/useAuthService'
+import { useMarketStore } from '@/modules/market/stores/market'
 import {
   Store, ShoppingCart, Package, LogIn, User as UserIcon,
 } from 'lucide-vue-next'
@@ -15,6 +16,7 @@ const router = useRouter()
 
 useTheme()
 const { isAuthenticated } = useAuth()
+const marketStore = useMarketStore()
 
 const showLoginDialog = ref(false)
 
@@ -23,12 +25,13 @@ interface Tab {
   icon: any
   path?: string
   authRequired?: boolean
+  badge?: () => number
   onClick?: () => void
 }
 
 const bottomTabs = computed<Tab[]>(() => [
   { name: 'Browse', icon: Store, path: '/market' },
-  { name: 'Cart', icon: ShoppingCart, path: '/cart' },
+  { name: 'Cart', icon: ShoppingCart, path: '/cart', badge: () => marketStore.totalCartItems },
   { name: 'My Store', icon: Package, path: '/market/dashboard', authRequired: true },
   isAuthenticated.value
     ? { name: 'Profile', icon: UserIcon, path: '/profile' }
@@ -92,7 +95,13 @@ async function handleLoginSuccess() {
             ]"
             @click="onTabClick(tab)"
           >
-            <component :is="tab.icon" class="w-5 h-5" />
+            <span class="relative inline-flex">
+              <component :is="tab.icon" class="w-5 h-5" />
+              <span
+                v-if="tab.badge && tab.badge() > 0"
+                class="absolute -top-1.5 -right-2 min-w-[16px] h-4 px-1 rounded-full bg-primary text-primary-foreground text-[10px] font-semibold leading-4 text-center"
+              >{{ tab.badge() }}</span>
+            </span>
             <span class="text-[10px] font-medium">{{ tab.name }}</span>
           </button>
         </div>
diff --git a/src/modules/market/components/CartButton.vue b/src/modules/market/components/CartButton.vue
deleted file mode 100644
index 6377564..0000000
--- a/src/modules/market/components/CartButton.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <!-- Cart Summary Button -->
-  <div v-if="marketStore.totalCartItems > 0" class="fixed bottom-4 right-4 z-50">
-    <Button @click="viewCart" class="shadow-lg">
-      <ShoppingCart class="w-5 h-5 mr-2" />
-      Cart ({{ marketStore.totalCartItems }})
-    </Button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useRouter } from 'vue-router'
-import { useMarketStore } from '@/modules/market/stores/market'
-import { Button } from '@/components/ui/button'
-import { ShoppingCart } from 'lucide-vue-next'
-
-const router = useRouter()
-const marketStore = useMarketStore()
-
-const viewCart = () => {
-  router.push('/cart')
-}
-</script>
\ No newline at end of file
diff --git a/src/modules/market/views/MarketPage.vue b/src/modules/market/views/MarketPage.vue
index b4ca8e2..2428577 100644
--- a/src/modules/market/views/MarketPage.vue
+++ b/src/modules/market/views/MarketPage.vue
@@ -67,9 +67,6 @@
         @view-stall="viewStall"
       />
 
-    <!-- Cart Summary -->
-    <CartButton />
-
     </LoadingErrorState>
   </div>
 </template>
@@ -86,7 +83,6 @@ import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
 import MarketSearchBar from '../components/MarketSearchBar.vue'
 import ProductGrid from '../components/ProductGrid.vue'
 import CategoryFilterBar from '../components/CategoryFilterBar.vue'
-import CartButton from '../components/CartButton.vue'
 import LoadingErrorState from '../components/LoadingErrorState.vue'
 import type { Product } from '../types/market'
 import type { FuzzySearchOptions } from '@/composables/useFuzzySearch'
diff --git a/src/modules/market/views/StallView.vue b/src/modules/market/views/StallView.vue
index 96322ad..5d64365 100644
--- a/src/modules/market/views/StallView.vue
+++ b/src/modules/market/views/StallView.vue
@@ -131,9 +131,6 @@
     />
 
   </div>
-
-  <!-- Cart Summary -->
-  <CartButton />
 </template>
 
 <script setup lang="ts">
@@ -153,7 +150,6 @@ import {
 import { ArrowLeft, Store, X } from 'lucide-vue-next'
 import MarketSearchBar from '../components/MarketSearchBar.vue'
 import ProductGrid from '../components/ProductGrid.vue'
-import CartButton from '../components/CartButton.vue'
 import CategoryFilterBar from '../components/CategoryFilterBar.vue'
 import type { Product, Stall } from '../types/market'
 import type { FuzzySearchOptions } from '@/composables/useFuzzySearch'