package-lock.json

@@ -25,7 +25,7 @@
         "qr-scanner": "^1.4.2",
         "qrcode": "^1.5.4",
         "radix-vue": "^1.9.13",
-        "reka-ui": "^2.7.0",
+        "reka-ui": "^2.5.0",
         "tailwind-merge": "^2.6.0",
         "tailwindcss-animate": "^1.0.7",
         "unique-names-generator": "^4.7.1",
@@ -12172,9 +12172,9 @@
       }
     },
     "node_modules/reka-ui": {
-      "version": "2.7.0",
+      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.7.0.tgz",
+      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.5.0.tgz",
-      "integrity": "sha512-m+XmxQN2xtFzBP3OAdIafKq7C8OETo2fqfxcIIxYmNN2Ch3r5oAf6yEYCIJg5tL/yJU2mHqF70dCCekUkrAnXA==",
+      "integrity": "sha512-81aMAmJeVCy2k0E6x7n1kypDY6aM1ldLis5+zcdV1/JtoAlSDck5OBsyLRJU9CfgbrQp1ImnRnBSmC4fZ2fkZQ==",
       "license": "MIT",
       "dependencies": {
         "@floating-ui/dom": "^1.6.13",

package.json

@@ -34,7 +34,7 @@
     "qr-scanner": "^1.4.2",
     "qrcode": "^1.5.4",
     "radix-vue": "^1.9.13",
-    "reka-ui": "^2.7.0",
+    "reka-ui": "^2.5.0",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "unique-names-generator": "^4.7.1",

src/App.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { onMounted, ref, computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import AppLayout from '@/components/layout/AppLayout.vue'
+import Navbar from '@/components/layout/Navbar.vue'
+import Footer from '@/components/layout/Footer.vue'
 import LoginDialog from '@/components/auth/LoginDialog.vue'
 import { Toaster } from '@/components/ui/sonner'
 import 'vue-sonner/style.css'
@@ -19,18 +20,20 @@ useTheme()
 // Initialize preloader
 const marketPreloader = useMarketPreloader()
 
-// Show layout on all pages except login
+// Relay hub initialization is now handled by the base module
-const showLayout = computed(() => {
+
+// Hide navbar on login page
+const showNavbar = computed(() => {
   return route.path !== '/login'
 })
 
 async function handleLoginSuccess() {
   showLoginDialog.value = false
   toast.success('Welcome back!')
-
+  
   // Trigger preloading after successful login
   marketPreloader.preloadMarket()
-
+  
   // Chat initialization is now handled by the chat module
 }
 
@@ -59,14 +62,21 @@ watch(() => auth.isAuthenticated.value, async (isAuthenticated) => {
 
 <template>
   <div class="min-h-screen bg-background font-sans antialiased">
-    <!-- Sidebar layout for authenticated pages -->
+    <div class="relative flex min-h-screen flex-col"
-    <AppLayout v-if="showLayout">
+      style="padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom)">
-      <router-view />
+      <header
-    </AppLayout>
+        v-if="showNavbar"
+        class="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <nav class="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16 flex h-14 lg:h-16 xl:h-20 items-center justify-between">
+          <Navbar />
+        </nav>
+      </header>
 
-    <!-- Login page without sidebar -->
+      <main class="flex-1">
-    <div v-else class="min-h-screen">
+        <router-view />
-      <router-view />
+      </main>
+
+      <Footer v-if="showNavbar" />
     </div>
 
     <!-- Toast notifications -->

src/app.ts

@@ -60,7 +60,7 @@ export async function createAppInstance() {
       {
         path: '/login',
         name: 'login',
-        component: () => import('./pages/LoginDemo.vue'),
+        component: () => import('./pages/Login.vue'),
         meta: { requiresAuth: false }
       },
       // Pre-register module routes

src/components/layout/AppLayout.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import AppSidebar from './AppSidebar.vue'
-import AppTopBar from './AppTopBar.vue'
-import MobileDrawer from './MobileDrawer.vue'
-
-const sidebarOpen = ref(false)
-
-const openSidebar = () => {
-  sidebarOpen.value = true
-}
-</script>
-
-<template>
-  <div class="min-h-screen bg-background">
-    <!-- Mobile Drawer -->
-    <MobileDrawer v-model:open="sidebarOpen" />
-
-    <!-- Desktop Sidebar (fixed left) -->
-    <div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
-      <AppSidebar />
-    </div>
-
-    <!-- Main content area (offset on desktop) -->
-    <div class="lg:pl-72">
-      <!-- Top Bar -->
-      <AppTopBar @open-sidebar="openSidebar" />
-
-      <!-- Main Content -->
-      <main
-        class="flex-1"
-        style="padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom)"
-      >
-        <slot />
-      </main>
-    </div>
-  </div>
-</template>

src/components/layout/AppSidebar.vue

@@ -1,135 +0,0 @@
-<script setup lang="ts">
-import { useRoute } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import { useTheme } from '@/components/theme-provider'
-import { Button } from '@/components/ui/button'
-import { Separator } from '@/components/ui/separator'
-import {
-  Home,
-  Calendar,
-  ShoppingBag,
-  MessageSquare,
-  Settings,
-  Sun,
-  Moon
-} from 'lucide-vue-next'
-import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
-import { useModularNavigation } from '@/composables/useModularNavigation'
-
-const route = useRoute()
-const { t } = useI18n()
-const { theme, setTheme } = useTheme()
-const { navigation } = useModularNavigation()
-
-// Map navigation items to icons
-const navIcons: Record<string, any> = {
-  '/': Home,
-  '/events': Calendar,
-  '/market': ShoppingBag,
-  '/chat': MessageSquare,
-}
-
-const toggleTheme = () => {
-  setTheme(theme.value === 'dark' ? 'light' : 'dark')
-}
-
-// Check if route is active
-const isActive = (href: string) => {
-  if (href === '/') {
-    return route.path === '/'
-  }
-  return route.path.startsWith(href)
-}
-</script>
-
-<template>
-  <div class="flex grow flex-col gap-y-5 overflow-y-auto border-r border-border bg-background px-6 pb-4">
-    <!-- Logo -->
-    <div class="flex h-16 shrink-0 items-center">
-      <router-link to="/" class="flex items-center gap-2">
-        <img
-          src="@/assets/logo.png"
-          alt="Logo"
-          class="h-8 w-8"
-        />
-        <span class="font-semibold text-foreground">{{ t('nav.title') }}</span>
-      </router-link>
-    </div>
-
-    <!-- Navigation -->
-    <nav class="flex flex-1 flex-col">
-      <ul role="list" class="flex flex-1 flex-col gap-y-7">
-        <!-- Primary Navigation -->
-        <li>
-          <ul role="list" class="-mx-2 space-y-1">
-            <li v-for="item in navigation" :key="item.href">
-              <router-link
-                :to="item.href"
-                :class="[
-                  isActive(item.href)
-                    ? 'bg-accent text-accent-foreground'
-                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
-                  'group flex gap-x-3 rounded-md p-2 text-sm font-semibold transition-colors'
-                ]"
-              >
-                <component
-                  :is="navIcons[item.href] || Home"
-                  :class="[
-                    isActive(item.href)
-                      ? 'text-accent-foreground'
-                      : 'text-muted-foreground group-hover:text-accent-foreground',
-                    'h-5 w-5 shrink-0'
-                  ]"
-                />
-                {{ item.name }}
-              </router-link>
-            </li>
-          </ul>
-        </li>
-
-        <!-- Secondary Section (placeholder for future use) -->
-        <li>
-          <div class="text-xs font-semibold text-muted-foreground">
-            <!-- Future: Your stalls, subscriptions, etc. -->
-          </div>
-          <ul role="list" class="-mx-2 mt-2 space-y-1">
-            <!-- Empty for now -->
-          </ul>
-        </li>
-
-        <!-- Footer: Settings & Preferences -->
-        <li class="mt-auto space-y-2">
-          <Separator />
-
-          <!-- Theme & Language -->
-          <div class="flex items-center justify-between px-2 py-1">
-            <Button
-              variant="ghost"
-              size="icon"
-              @click="toggleTheme"
-              class="h-8 w-8"
-            >
-              <Sun v-if="theme === 'dark'" class="h-4 w-4" />
-              <Moon v-else class="h-4 w-4" />
-            </Button>
-            <LanguageSwitcher />
-          </div>
-
-          <!-- Settings Link -->
-          <router-link
-            to="/settings"
-            :class="[
-              isActive('/settings')
-                ? 'bg-accent text-accent-foreground'
-                : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
-              'group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold transition-colors'
-            ]"
-          >
-            <Settings class="h-5 w-5 shrink-0" />
-            Settings
-          </router-link>
-        </li>
-      </ul>
-    </nav>
-  </div>
-</template>

src/components/layout/AppTopBar.vue

@@ -1,242 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useRouter } from 'vue-router'
-import { Button } from '@/components/ui/button'
-import { Badge } from '@/components/ui/badge'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import {
-  Menu,
-  Bell,
-  ShoppingCart,
-  User,
-  LogOut,
-  Wallet,
-  Ticket,
-  Store,
-  Activity,
-} from 'lucide-vue-next'
-import CurrencyDisplay from '@/components/ui/CurrencyDisplay.vue'
-import LoginDialog from '@/components/auth/LoginDialog.vue'
-import ProfileDialog from '@/components/auth/ProfileDialog.vue'
-import { LogoutConfirmDialog } from '@/components/ui/LogoutConfirmDialog'
-import { auth } from '@/composables/useAuthService'
-import { useModularNavigation } from '@/composables/useModularNavigation'
-import { useMarketStore } from '@/modules/market/stores/market'
-import { tryInjectService, SERVICE_TOKENS } from '@/core/di-container'
-import appConfig from '@/app.config'
-import { ref } from 'vue'
-
-const emit = defineEmits<{
-  (e: 'openSidebar'): void
-}>()
-
-const router = useRouter()
-const { userMenuItems } = useModularNavigation()
-const marketStore = useMarketStore()
-
-const showLoginDialog = ref(false)
-const showProfileDialog = ref(false)
-const showLogoutConfirm = ref(false)
-
-// Get PaymentService for wallet balance
-const paymentService = tryInjectService(SERVICE_TOKENS.PAYMENT_SERVICE) as any
-
-// Get ChatService for notifications
-const chatService = tryInjectService(SERVICE_TOKENS.CHAT_SERVICE) as any
-
-// Wallet balance
-const totalBalance = computed(() => {
-  return paymentService?.totalBalance || 0
-})
-
-// Combined notifications (chat unread for now)
-const totalNotifications = computed(() => {
-  return chatService?.totalUnreadCount?.value || 0
-})
-
-// Cart item count
-const cartItemCount = computed(() => {
-  return marketStore.totalCartItems
-})
-
-// Check if market module is enabled
-const isMarketEnabled = computed(() => {
-  return appConfig.modules.market?.enabled ?? false
-})
-
-const openLoginDialog = () => {
-  showLoginDialog.value = true
-}
-
-const openProfileDialog = () => {
-  showProfileDialog.value = true
-}
-
-const handleLogout = async () => {
-  try {
-    auth.logout()
-    router.push('/login')
-  } catch (error) {
-    console.error('Logout failed:', error)
-  }
-}
-
-const navigateToNotifications = () => {
-  // For now, navigate to chat since that's our notification source
-  router.push('/chat')
-}
-</script>
-
-<template>
-  <div
-    class="sticky top-0 z-40 flex h-14 shrink-0 items-center gap-x-4 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 px-4 sm:gap-x-6 sm:px-6 lg:px-8"
-  >
-    <!-- Mobile menu button -->
-    <Button
-      variant="ghost"
-      size="icon"
-      class="-m-2.5 p-2.5 lg:hidden"
-      @click="emit('openSidebar')"
-    >
-      <span class="sr-only">Open sidebar</span>
-      <Menu class="h-5 w-5" />
-    </Button>
-
-    <!-- Separator (mobile only) -->
-    <div class="h-6 w-px bg-border lg:hidden" aria-hidden="true" />
-
-    <!-- Spacer / Future search area -->
-    <div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
-      <!-- Search placeholder for future -->
-      <div class="flex-1">
-        <!-- Future: Global search input -->
-      </div>
-
-      <!-- Right side actions -->
-      <div class="flex items-center gap-x-4 lg:gap-x-6">
-        <!-- Notifications (combined) -->
-        <Button
-          v-if="auth.isAuthenticated.value"
-          variant="ghost"
-          size="icon"
-          class="relative"
-          @click="navigateToNotifications"
-        >
-          <span class="sr-only">View notifications</span>
-          <Bell class="h-5 w-5" />
-          <Badge
-            v-if="totalNotifications > 0"
-            class="absolute -top-1 -right-1 h-4 w-4 text-xs bg-blue-500 text-white border-0 p-0 flex items-center justify-center rounded-full"
-          >
-            {{ totalNotifications > 99 ? '99+' : totalNotifications }}
-          </Badge>
-        </Button>
-
-        <!-- Cart (only when market is enabled) -->
-        <router-link
-          v-if="auth.isAuthenticated.value && isMarketEnabled"
-          to="/cart"
-          class="relative flex items-center justify-center"
-        >
-          <Button variant="ghost" size="icon" class="relative">
-            <span class="sr-only">Shopping cart</span>
-            <ShoppingCart class="h-5 w-5" />
-            <Badge
-              v-if="cartItemCount > 0"
-              class="absolute -top-1 -right-1 h-4 w-4 text-xs bg-blue-500 text-white border-0 p-0 flex items-center justify-center rounded-full"
-            >
-              {{ cartItemCount > 99 ? '99+' : cartItemCount }}
-            </Badge>
-          </Button>
-        </router-link>
-
-        <!-- Separator -->
-        <div class="hidden lg:block lg:h-6 lg:w-px lg:bg-border" aria-hidden="true" />
-
-        <!-- Profile dropdown -->
-        <div v-if="auth.isAuthenticated.value">
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="ghost" class="relative flex items-center gap-2">
-                <User class="h-5 w-5" />
-                <span class="hidden lg:block text-sm font-semibold truncate max-w-32">
-                  {{ auth.userDisplay.value?.name || 'Anonymous' }}
-                </span>
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" class="w-56">
-              <!-- Wallet Balance -->
-              <DropdownMenuItem @click="() => router.push('/wallet')" class="gap-2">
-                <Wallet class="h-4 w-4 text-muted-foreground" />
-                <CurrencyDisplay :balance-msat="totalBalance" />
-              </DropdownMenuItem>
-
-              <DropdownMenuSeparator />
-
-              <!-- Profile -->
-              <DropdownMenuItem @click="openProfileDialog" class="gap-2">
-                <User class="h-4 w-4" />
-                Profile
-              </DropdownMenuItem>
-
-              <!-- User menu items (from modules) -->
-              <DropdownMenuItem
-                v-for="item in userMenuItems"
-                :key="item.href"
-                @click="() => router.push(item.href)"
-                class="gap-2"
-              >
-                <component
-                  :is="item.icon === 'Ticket' ? Ticket : item.icon === 'Store' ? Store : Activity"
-                  class="h-4 w-4"
-                />
-                {{ item.name }}
-              </DropdownMenuItem>
-
-              <DropdownMenuSeparator />
-
-              <!-- Logout -->
-              <DropdownMenuItem
-                @click="showLogoutConfirm = true"
-                class="gap-2 text-destructive"
-              >
-                <LogOut class="h-4 w-4" />
-                Logout
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-
-        <!-- Login button (when not authenticated) -->
-        <Button
-          v-else
-          variant="outline"
-          size="sm"
-          @click="openLoginDialog"
-          class="gap-2"
-        >
-          <User class="h-4 w-4" />
-          <span class="hidden sm:inline">Login</span>
-        </Button>
-      </div>
-    </div>
-
-    <!-- Login Dialog -->
-    <LoginDialog v-model:is-open="showLoginDialog" />
-
-    <!-- Profile Dialog -->
-    <ProfileDialog v-model:is-open="showProfileDialog" />
-
-    <!-- Logout Confirm Dialog -->
-    <LogoutConfirmDialog
-      v-model:is-open="showLogoutConfirm"
-      @confirm="handleLogout"
-    />
-  </div>
-</template>

src/components/layout/MobileDrawer.vue

@@ -1,158 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import { useTheme } from '@/components/theme-provider'
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet'
-import { Button } from '@/components/ui/button'
-import { Separator } from '@/components/ui/separator'
-import {
-  Home,
-  Calendar,
-  ShoppingBag,
-  MessageSquare,
-  Settings,
-  Sun,
-  Moon,
-} from 'lucide-vue-next'
-import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
-import { useModularNavigation } from '@/composables/useModularNavigation'
-
-const props = defineProps<{
-  open: boolean
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:open', value: boolean): void
-}>()
-
-const route = useRoute()
-const router = useRouter()
-const { t } = useI18n()
-const { theme, setTheme } = useTheme()
-const { navigation } = useModularNavigation()
-
-// Map navigation items to icons
-const navIcons: Record<string, any> = {
-  '/': Home,
-  '/events': Calendar,
-  '/market': ShoppingBag,
-  '/chat': MessageSquare,
-}
-
-const isOpen = computed({
-  get: () => props.open,
-  set: (value) => emit('update:open', value),
-})
-
-const toggleTheme = () => {
-  setTheme(theme.value === 'dark' ? 'light' : 'dark')
-}
-
-// Check if route is active
-const isActive = (href: string) => {
-  if (href === '/') {
-    return route.path === '/'
-  }
-  return route.path.startsWith(href)
-}
-
-// Navigate and close drawer
-const navigateTo = (href: string) => {
-  router.push(href)
-  isOpen.value = false
-}
-</script>
-
-<template>
-  <Sheet v-model:open="isOpen">
-    <SheetContent side="left" class="w-72 p-0">
-      <div class="flex h-full flex-col">
-        <!-- Header with Logo -->
-        <SheetHeader class="px-6 py-4 border-b border-border">
-          <SheetTitle class="flex items-center gap-2">
-            <img
-              src="@/assets/logo.png"
-              alt="Logo"
-              class="h-8 w-8"
-            />
-            <span class="font-semibold">{{ t('nav.title') }}</span>
-          </SheetTitle>
-        </SheetHeader>
-
-        <!-- Navigation -->
-        <nav class="flex-1 overflow-y-auto px-4 py-4">
-          <ul role="list" class="space-y-1">
-            <li v-for="item in navigation" :key="item.href">
-              <button
-                @click="navigateTo(item.href)"
-                :class="[
-                  isActive(item.href)
-                    ? 'bg-accent text-accent-foreground'
-                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
-                  'group flex w-full gap-x-3 rounded-md p-2 text-sm font-semibold transition-colors'
-                ]"
-              >
-                <component
-                  :is="navIcons[item.href] || Home"
-                  :class="[
-                    isActive(item.href)
-                      ? 'text-accent-foreground'
-                      : 'text-muted-foreground group-hover:text-accent-foreground',
-                    'h-5 w-5 shrink-0'
-                  ]"
-                />
-                {{ item.name }}
-              </button>
-            </li>
-          </ul>
-
-          <!-- Secondary Section Placeholder -->
-          <div class="mt-8">
-            <div class="text-xs font-semibold text-muted-foreground px-2">
-              <!-- Future: Your stalls, subscriptions, etc. -->
-            </div>
-          </div>
-        </nav>
-
-        <!-- Footer -->
-        <div class="border-t border-border px-4 py-4 space-y-2">
-          <!-- Theme & Language -->
-          <div class="flex items-center justify-between px-2">
-            <Button
-              variant="ghost"
-              size="icon"
-              @click="toggleTheme"
-              class="h-8 w-8"
-            >
-              <Sun v-if="theme === 'dark'" class="h-4 w-4" />
-              <Moon v-else class="h-4 w-4" />
-            </Button>
-            <LanguageSwitcher />
-          </div>
-
-          <Separator />
-
-          <!-- Settings Link -->
-          <button
-            @click="navigateTo('/settings')"
-            :class="[
-              isActive('/settings')
-                ? 'bg-accent text-accent-foreground'
-                : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
-              'group flex w-full gap-x-3 rounded-md p-2 text-sm font-semibold transition-colors'
-            ]"
-          >
-            <Settings class="h-5 w-5 shrink-0" />
-            Settings
-          </button>
-        </div>
-      </div>
-    </SheetContent>
-  </Sheet>
-</template>

src/components/layout/Navbar.vue

@@ -1,13 +1,3 @@
-<!--
-  DEPRECATED: This file is kept for reference only and will be deleted.
-
-  The top navbar layout has been replaced with a sidebar layout.
-  See the new layout components:
-  - AppLayout.vue (main layout wrapper)
-  - AppSidebar.vue (desktop sidebar)
-  - AppTopBar.vue (top bar with notifications, cart, profile)
-  - MobileDrawer.vue (mobile slide-out navigation)
--->
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'

src/components/ui/sheet/Sheet.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from "reka-ui"
-import { DialogRoot, useForwardPropsEmits } from "reka-ui"
-
-const props = defineProps<DialogRootProps>()
-const emits = defineEmits<DialogRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <DialogRoot v-bind="forwarded">
-    <slot />
-  </DialogRoot>
-</template>

src/components/ui/sheet/SheetClose.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import type { DialogCloseProps } from "reka-ui"
-import { DialogClose } from "reka-ui"
-
-const props = defineProps<DialogCloseProps>()
-</script>
-
-<template>
-  <DialogClose v-bind="props">
-    <slot />
-  </DialogClose>
-</template>

src/components/ui/sheet/SheetContent.vue

@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { SheetVariants } from "."
-import { reactiveOmit } from "@vueuse/core"
-import { X } from "lucide-vue-next"
-import {
-  DialogClose,
-  DialogContent,
-  DialogOverlay,
-  DialogPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-import { sheetVariants } from "."
-
-interface SheetContentProps extends DialogContentProps {
-  class?: HTMLAttributes["class"]
-  side?: SheetVariants["side"]
-}
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = defineProps<SheetContentProps>()
-
-const emits = defineEmits<DialogContentEmits>()
-
-const delegatedProps = reactiveOmit(props, "class", "side")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <DialogPortal>
-    <DialogOverlay
-      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-    />
-    <DialogContent
-      :class="cn(sheetVariants({ side }), props.class)"
-      v-bind="{ ...forwarded, ...$attrs }"
-    >
-      <slot />
-
-      <DialogClose
-        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
-      >
-        <X class="w-4 h-4" />
-      </DialogClose>
-    </DialogContent>
-  </DialogPortal>
-</template>

src/components/ui/sheet/SheetDescription.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import type { DialogDescriptionProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DialogDescription } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <DialogDescription
-    :class="cn('text-sm text-muted-foreground', props.class)"
-    v-bind="delegatedProps"
-  >
-    <slot />
-  </DialogDescription>
-</template>

src/components/ui/sheet/SheetFooter.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{ class?: HTMLAttributes["class"] }>()
-</script>
-
-<template>
-  <div
-    :class="
-      cn(
-        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </div>
-</template>

src/components/ui/sheet/SheetHeader.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{ class?: HTMLAttributes["class"] }>()
-</script>
-
-<template>
-  <div
-    :class="
-      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)
-    "
-  >
-    <slot />
-  </div>
-</template>

src/components/ui/sheet/SheetTitle.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import type { DialogTitleProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DialogTitle } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <DialogTitle
-    :class="cn('text-lg font-semibold text-foreground', props.class)"
-    v-bind="delegatedProps"
-  >
-    <slot />
-  </DialogTitle>
-</template>

src/components/ui/sheet/SheetTrigger.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import type { DialogTriggerProps } from "reka-ui"
-import { DialogTrigger } from "reka-ui"
-
-const props = defineProps<DialogTriggerProps>()
-</script>
-
-<template>
-  <DialogTrigger v-bind="props">
-    <slot />
-  </DialogTrigger>
-</template>

src/components/ui/sheet/index.ts

@@ -1,32 +0,0 @@
-import type { VariantProps } from "class-variance-authority"
-import { cva } from "class-variance-authority"
-
-export { default as Sheet } from "./Sheet.vue"
-export { default as SheetClose } from "./SheetClose.vue"
-export { default as SheetContent } from "./SheetContent.vue"
-export { default as SheetDescription } from "./SheetDescription.vue"
-export { default as SheetFooter } from "./SheetFooter.vue"
-export { default as SheetHeader } from "./SheetHeader.vue"
-export { default as SheetTitle } from "./SheetTitle.vue"
-export { default as SheetTrigger } from "./SheetTrigger.vue"
-
-export const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-  {
-    variants: {
-      side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom:
-            "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right:
-            "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-      },
-    },
-    defaultVariants: {
-      side: "right",
-    },
-  },
-)
-
-export type SheetVariants = VariantProps<typeof sheetVariants>

src/pages/LoginDemo.vue

@@ -1,231 +0,0 @@
-<template>
-  <div
-    class="min-h-screen flex items-start sm:items-center justify-center px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16 py-8 sm:py-12">
-    <div class="flex flex-col items-center justify-center space-y-3 sm:space-y-6 max-w-4xl mx-auto w-full mt-8 sm:mt-0">
-      <!-- Welcome Section -->
-      <div class="text-center space-y-2 sm:space-y-4">
-        <div class="flex justify-center">
-          <img src="@/assets/logo.png" alt="Logo" class="h-34 w-34 sm:h-42 sm:w-42 lg:h-50 lg:w-50" />
-        </div>
-        <div class="space-y-1 sm:space-y-3">
-          <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight">Welcome to the Virtual Realm</h1>
-          <p class="text-sm sm:text-base md:text-xl text-muted-foreground max-w-md mx-auto px-4">
-            Your secure platform for events and community management
-          </p>
-        </div>
-      </div>
-
-      <!-- Demo Account Creation Card -->
-      <Card class="w-full max-w-md">
-        <CardContent class="p-4 sm:p-6 md:p-8 space-y-4 sm:space-y-6">
-          <!-- Demo Badge -->
-          <div class="flex justify-center">
-            <div
-              class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800">
-              <div class="w-2 h-2 bg-yellow-500 rounded-full animate-pulse"></div>
-              <span class="text-sm font-medium text-yellow-800 dark:text-yellow-200">Demo Mode</span>
-            </div>
-          </div>
-
-          <!-- Mode Toggle -->
-          <div class="flex justify-center">
-            <div class="inline-flex rounded-lg bg-muted p-1">
-              <Button variant="ghost" size="sm" :class="activeMode === 'demo' ? 'bg-background shadow-sm' : ''"
-                @click="activeMode = 'demo'">
-                Demo Account
-              </Button>
-              <Button variant="ghost" size="sm" :class="activeMode === 'login' ? 'bg-background shadow-sm' : ''"
-                @click="activeMode = 'login'">
-                Sign In
-              </Button>
-            </div>
-          </div>
-
-          <!-- Demo Mode Content -->
-          <div v-if="activeMode === 'demo'" class="space-y-4 sm:space-y-6 relative">
-            <!-- Loading Overlay -->
-            <div v-if="isLoading" class="absolute inset-0 bg-background/80 backdrop-blur-sm z-10 flex flex-col items-center justify-center rounded-lg">
-              <div class="flex flex-col items-center gap-3 text-center px-4">
-                <div class="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
-                <div>
-                  <p class="text-sm font-medium">Creating your demo account...</p>
-                  <p class="text-xs text-muted-foreground mt-1">This will only take a moment</p>
-                </div>
-              </div>
-            </div>
-
-            <!-- Demo Info -->
-            <div class="text-center space-y-2 sm:space-y-3">
-              <h2 class="text-lg sm:text-xl md:text-2xl font-semibold">Create Demo Account</h2>
-              <p class="text-muted-foreground text-xs sm:text-sm leading-relaxed">
-                Get instant access with a pre-funded demo account containing
-                <span class="font-semibold text-green-600 dark:text-green-400">1,000,000 FAKE satoshis</span>
-              </p>
-            </div>
-
-            <!-- Create Account Button -->
-            <Button @click="createFakeAccount" :disabled="isLoading"
-              class="w-full h-10 sm:h-12 text-base sm:text-lg font-medium" size="lg">
-              {{ 'Create Demo Account' }}
-            </Button>
-
-            <!-- Info Text -->
-            <p class="text-xs text-center text-muted-foreground">
-              Your credentials will be generated automatically
-            </p>
-          </div>
-
-          <!-- Login Mode Content -->
-          <div v-else class="space-y-4 sm:space-y-6">
-            <!-- Login Info -->
-            <div class="text-center space-y-2 sm:space-y-3">
-              <h2 class="text-lg sm:text-xl md:text-2xl font-semibold">Sign In</h2>
-              <p class="text-muted-foreground text-xs sm:text-sm leading-relaxed">
-                Sign in to your existing account
-              </p>
-            </div>
-
-            <!-- Login Form -->
-            <div class="space-y-4">
-              <div class="space-y-2">
-                <Label for="login-username">Username or Email</Label>
-                <Input id="login-username" v-model="loginForm.username" placeholder="Enter your username or email"
-                  @keydown.enter="handleLogin" />
-              </div>
-              <div class="space-y-2">
-                <Label for="login-password">Password</Label>
-                <Input id="login-password" type="password" v-model="loginForm.password"
-                  placeholder="Enter your password" @keydown.enter="handleLogin" />
-              </div>
-            </div>
-
-            <!-- Login Button -->
-            <Button @click="handleLogin" :disabled="isLoading || !canLogin"
-              class="w-full h-10 sm:h-12 text-base sm:text-lg font-medium" size="lg">
-              <span v-if="isLoading" class="animate-spin mr-2">⚡</span>
-              {{ isLoading ? 'Signing In...' : 'Sign In' }}
-            </Button>
-          </div>
-
-          <!-- Error Display -->
-          <p v-if="error" class="text-sm text-destructive text-center">
-            {{ error }}
-          </p>
-
-          <!-- Success Message -->
-          <div v-if="successMessage"
-            class="text-sm text-green-600 dark:text-green-400 text-center bg-green-50 dark:bg-green-950/20 p-3 rounded-lg border border-green-200 dark:border-green-800">
-            {{ successMessage }}
-          </div>
-
-          <!-- Demo Notice -->
-          <div class="text-center space-y-2">
-            <p class="text-xs text-muted-foreground">
-              This is a demo environment. All transactions use fake satoshis for testing purposes.
-            </p>
-            <div class="flex items-center justify-center gap-1 text-xs text-amber-600 dark:text-amber-400">
-              <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
-                <path fill-rule="evenodd"
-                  d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-                  clip-rule="evenodd" />
-              </svg>
-              <span class="font-medium">Demo data may be erased at any time</span>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import { useRouter } from 'vue-router'
-import { Card, CardContent } from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { auth } from '@/composables/useAuthService'
-import { useDemoAccountGenerator } from '@/composables/useDemoAccountGenerator'
-import { toast } from 'vue-sonner'
-
-const router = useRouter()
-const { isLoading, error, generateNewCredentials } = useDemoAccountGenerator()
-const successMessage = ref('')
-const activeMode = ref<'demo' | 'login'>('demo')
-
-// Login form
-const loginForm = ref({
-  username: '',
-  password: ''
-})
-
-const canLogin = computed(() => {
-  return loginForm.value.username.trim() && loginForm.value.password.trim()
-})
-
-// Create fake account and automatically log in
-async function createFakeAccount() {
-  try {
-    isLoading.value = true
-    error.value = ''
-    successMessage.value = ''
-
-    // Generate credentials
-    const credentials = generateNewCredentials()
-
-    // Register the fake account
-    await auth.register({
-      username: credentials.username,
-      email: credentials.email,
-      password: credentials.password,
-      password_repeat: credentials.password
-    })
-
-    // Show success with username
-    successMessage.value = `Account created! Username: ${credentials.username}`
-    toast.success(`Logged in as ${credentials.username}!`)
-
-    // Redirect to home page after successful registration
-    setTimeout(() => {
-      router.push('/')
-    }, 2000)
-
-  } catch (err) {
-    error.value = err instanceof Error ? err.message : 'Failed to create demo account'
-    toast.error('Failed to create demo account. Please try again.')
-  } finally {
-    isLoading.value = false
-  }
-}
-
-// Login with existing credentials
-async function handleLogin() {
-  if (!canLogin.value) return
-
-  try {
-    isLoading.value = true
-    error.value = ''
-    successMessage.value = ''
-
-    await auth.login({
-      username: loginForm.value.username,
-      password: loginForm.value.password
-    })
-
-    successMessage.value = 'Login successful! Redirecting...'
-    toast.success('Login successful!')
-
-    // Redirect to home page after successful login
-    setTimeout(() => {
-      router.push('/')
-    }, 1500)
-
-  } catch (err) {
-    error.value = err instanceof Error ? err.message : 'Login failed'
-    toast.error('Login failed. Please check your credentials.')
-  } finally {
-    isLoading.value = false
-  }
-}
-</script>