Merge pull request 'feat: complete Week 1 frontend setup (#9 #10 #11 #12)' (#43) from feature/issue-12-supabase-client into develop

- Install and configure Tailwind CSS (#9)
- Install Nuxt UI component library (#10)
- Create app layout with header/footer components (#11)
- Implement Supabase client composable (#12)
- Add TypeScript database types
- Create placeholder pages (index, scan, settings)
- Setup responsive navigation with mobile menu
- Configure auth state management

All Week 1 frontend foundation tasks complete.

app/.env.example

@@ -0,0 +1,3 @@
+# Supabase Configuration
+NUXT_PUBLIC_SUPABASE_URL=http://localhost:54321
+NUXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here

app/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

app/README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app/app/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>

app/app/layouts/default.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="min-h-screen bg-gray-50">
+    <AppHeader />
+    
+    <main class="container mx-auto px-4 py-6 max-w-7xl">
+      <slot />
+    </main>
+
+    <AppFooter />
+  </div>
+</template>
+
+<script setup lang="ts">
+// App layout automatically wraps all pages
+</script>

app/components/AppFooter.vue

@@ -0,0 +1,40 @@
+<template>
+  <footer class="bg-white border-t border-gray-200 mt-auto">
+    <div class="container mx-auto px-4 py-6 max-w-7xl">
+      <div class="flex flex-col md:flex-row items-center justify-between gap-4">
+        <!-- Copyright -->
+        <p class="text-sm text-gray-600">
+          © {{ currentYear }} Pantry. Self-hosted inventory management.
+        </p>
+
+        <!-- Links -->
+        <div class="flex items-center space-x-6">
+          <a 
+            href="https://github.com/pantry-app/pantry" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            class="text-sm text-gray-600 hover:text-primary transition-colors"
+          >
+            GitHub
+          </a>
+          <NuxtLink 
+            to="/about" 
+            class="text-sm text-gray-600 hover:text-primary transition-colors"
+          >
+            About
+          </NuxtLink>
+          <NuxtLink 
+            to="/privacy" 
+            class="text-sm text-gray-600 hover:text-primary transition-colors"
+          >
+            Privacy
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script setup lang="ts">
+const currentYear = new Date().getFullYear()
+</script>

app/components/AppHeader.vue

@@ -0,0 +1,122 @@
+<template>
+  <header class="bg-white border-b border-gray-200 sticky top-0 z-50">
+    <div class="container mx-auto px-4 max-w-7xl">
+      <div class="flex items-center justify-between h-16">
+        <!-- Logo / Brand -->
+        <NuxtLink to="/" class="flex items-center space-x-2">
+          <UIcon name="i-heroicons-squares-2x2" class="w-8 h-8 text-primary" />
+          <span class="text-xl font-bold text-gray-900">Pantry</span>
+        </NuxtLink>
+
+        <!-- Navigation -->
+        <nav class="hidden md:flex items-center space-x-6">
+          <NuxtLink 
+            to="/" 
+            class="text-gray-700 hover:text-primary transition-colors"
+            active-class="text-primary font-semibold"
+          >
+            Inventory
+          </NuxtLink>
+          <NuxtLink 
+            to="/scan" 
+            class="text-gray-700 hover:text-primary transition-colors"
+            active-class="text-primary font-semibold"
+          >
+            Scan
+          </NuxtLink>
+          <NuxtLink 
+            to="/settings" 
+            class="text-gray-700 hover:text-primary transition-colors"
+            active-class="text-primary font-semibold"
+          >
+            Settings
+          </NuxtLink>
+        </nav>
+
+        <!-- User Menu -->
+        <div class="flex items-center space-x-4">
+          <UButton 
+            v-if="!user" 
+            to="/auth/login" 
+            color="primary"
+            variant="soft"
+          >
+            Sign In
+          </UButton>
+
+          <UDropdown v-else :items="userMenuItems" mode="hover">
+            <UAvatar 
+              :alt="user.email" 
+              size="sm"
+              :ui="{ background: 'bg-primary' }"
+            />
+          </UDropdown>
+        </div>
+
+        <!-- Mobile Menu Button -->
+        <UButton 
+          icon="i-heroicons-bars-3" 
+          color="gray" 
+          variant="ghost"
+          class="md:hidden"
+          @click="mobileMenuOpen = !mobileMenuOpen"
+        />
+      </div>
+
+      <!-- Mobile Navigation -->
+      <nav 
+        v-if="mobileMenuOpen" 
+        class="md:hidden py-4 space-y-2 border-t border-gray-200"
+      >
+        <NuxtLink 
+          to="/" 
+          class="block px-4 py-2 text-gray-700 hover:bg-gray-50 rounded"
+          @click="mobileMenuOpen = false"
+        >
+          Inventory
+        </NuxtLink>
+        <NuxtLink 
+          to="/scan" 
+          class="block px-4 py-2 text-gray-700 hover:bg-gray-50 rounded"
+          @click="mobileMenuOpen = false"
+        >
+          Scan
+        </NuxtLink>
+        <NuxtLink 
+          to="/settings" 
+          class="block px-4 py-2 text-gray-700 hover:bg-gray-50 rounded"
+          @click="mobileMenuOpen = false"
+        >
+          Settings
+        </NuxtLink>
+      </nav>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+const { user, signOut } = useSupabaseAuth()
+const mobileMenuOpen = ref(false)
+
+const userMenuItems = [[
+  {
+    label: user.value?.email || 'User',
+    slot: 'account',
+    disabled: true
+  }
+], [
+  {
+    label: 'Settings',
+    icon: 'i-heroicons-cog-6-tooth',
+    to: '/settings'
+  },
+  {
+    label: 'Sign Out',
+    icon: 'i-heroicons-arrow-right-on-rectangle',
+    click: async () => {
+      await signOut()
+      navigateTo('/auth/login')
+    }
+  }
+]]
+</script>

app/composables/useSupabase.ts

@@ -0,0 +1,81 @@
+import { createClient, SupabaseClient } from '@supabase/supabase-js'
+import type { Database } from '~/types/database.types'
+
+let supabaseInstance: SupabaseClient<Database> | null = null
+
+export const useSupabase = () => {
+  const config = useRuntimeConfig()
+  
+  if (!supabaseInstance) {
+    supabaseInstance = createClient<Database>(
+      config.public.supabaseUrl,
+      config.public.supabaseAnonKey,
+      {
+        auth: {
+          persistSession: true,
+          autoRefreshToken: true,
+          detectSessionInUrl: true,
+          storage: process.client ? window.localStorage : undefined
+        }
+      }
+    )
+  }
+
+  return supabaseInstance
+}
+
+/**
+ * Composable for Supabase authentication
+ */
+export const useSupabaseAuth = () => {
+  const supabase = useSupabase()
+  const user = useState('supabase_user', () => null as any)
+  const session = useState('supabase_session', () => null as any)
+
+  // Initialize auth state
+  const initAuth = async () => {
+    const { data: { session: currentSession } } = await supabase.auth.getSession()
+    session.value = currentSession
+    user.value = currentSession?.user || null
+
+    // Listen for auth changes
+    supabase.auth.onAuthStateChange((_event, newSession) => {
+      session.value = newSession
+      user.value = newSession?.user || null
+    })
+  }
+
+  // Call initAuth on composable mount
+  if (process.client) {
+    initAuth()
+  }
+
+  const signIn = async (email: string, password: string) => {
+    const { data, error } = await supabase.auth.signInWithPassword({
+      email,
+      password
+    })
+    return { data, error }
+  }
+
+  const signUp = async (email: string, password: string) => {
+    const { data, error } = await supabase.auth.signUp({
+      email,
+      password
+    })
+    return { data, error }
+  }
+
+  const signOut = async () => {
+    const { error } = await supabase.auth.signOut()
+    return { error }
+  }
+
+  return {
+    user: readonly(user),
+    session: readonly(session),
+    signIn,
+    signUp,
+    signOut
+  }
+}

app/nuxt.config.ts

@@ -0,0 +1,21 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2025-07-15',
+  devtools: { enabled: true },
+
+  modules: [
+    '@nuxt/ui',
+    '@nuxt/fonts'
+  ],
+
+  runtimeConfig: {
+    public: {
+      supabaseUrl: process.env.NUXT_PUBLIC_SUPABASE_URL || 'http://localhost:54321',
+      supabaseAnonKey: process.env.NUXT_PUBLIC_SUPABASE_ANON_KEY || ''
+    }
+  },
+
+  colorMode: {
+    preference: 'light'
+  }
+})

app/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "app",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@nuxt/fonts": "^0.13.0",
+    "@nuxt/ui": "^4.4.0",
+    "@supabase/supabase-js": "^2.95.3",
+    "nuxt": "^4.3.1",
+    "vue": "^3.5.28",
+    "vue-router": "^4.6.4"
+  },
+  "devDependencies": {
+    "@nuxtjs/tailwindcss": "^6.14.0"
+  }
+}

app/pages/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <div class="flex items-center justify-between mb-6">
+      <h1 class="text-3xl font-bold text-gray-900">Inventory</h1>
+      
+      <div class="flex gap-2">
+        <UButton 
+          to="/scan" 
+          color="primary" 
+          size="lg"
+          icon="i-heroicons-qr-code"
+        >
+          Scan Item
+        </UButton>
+        
+        <UButton 
+          color="white" 
+          size="lg"
+          icon="i-heroicons-plus"
+        >
+          Add Manually
+        </UButton>
+      </div>
+    </div>
+
+    <!-- Empty State -->
+    <UCard v-if="true">
+      <div class="text-center py-12">
+        <UIcon 
+          name="i-heroicons-inbox" 
+          class="w-16 h-16 text-gray-400 mx-auto mb-4"
+        />
+        <h3 class="text-lg font-semibold text-gray-900 mb-2">
+          No items yet
+        </h3>
+        <p class="text-gray-600 mb-6">
+          Start by scanning a barcode or adding an item manually.
+        </p>
+        <UButton 
+          to="/scan" 
+          color="primary"
+          icon="i-heroicons-qr-code"
+        >
+          Scan First Item
+        </UButton>
+      </div>
+    </UCard>
+
+    <!-- TODO: Item list will go here -->
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: 'default'
+})
+</script>

app/pages/scan.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <h1 class="text-3xl font-bold text-gray-900 mb-6">Scan Item</h1>
+    
+    <UCard>
+      <div class="text-center py-12">
+        <UIcon 
+          name="i-heroicons-qr-code" 
+          class="w-16 h-16 text-gray-400 mx-auto mb-4"
+        />
+        <h3 class="text-lg font-semibold text-gray-900 mb-2">
+          Barcode Scanner
+        </h3>
+        <p class="text-gray-600 mb-6">
+          This feature will be implemented in Week 3.
+        </p>
+        <UButton 
+          to="/" 
+          color="gray"
+          variant="soft"
+        >
+          Back to Inventory
+        </UButton>
+      </div>
+    </UCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: 'default'
+})
+</script>

app/pages/settings.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <h1 class="text-3xl font-bold text-gray-900 mb-6">Settings</h1>
+    
+    <div class="grid gap-6 md:grid-cols-2">
+      <UCard>
+        <template #header>
+          <h3 class="text-lg font-semibold">Account</h3>
+        </template>
+        
+        <div class="space-y-4">
+          <div v-if="user">
+            <label class="text-sm font-medium text-gray-700">Email</label>
+            <p class="text-gray-900">{{ user.email }}</p>
+          </div>
+          
+          <UButton 
+            v-if="!user"
+            to="/auth/login"
+            color="primary"
+          >
+            Sign In
+          </UButton>
+        </div>
+      </UCard>
+
+      <UCard>
+        <template #header>
+          <h3 class="text-lg font-semibold">Tags</h3>
+        </template>
+        
+        <p class="text-gray-600">
+          Manage your custom tags here (coming in Week 2).
+        </p>
+      </UCard>
+
+      <UCard>
+        <template #header>
+          <h3 class="text-lg font-semibold">Units</h3>
+        </template>
+        
+        <p class="text-gray-600">
+          Manage your custom units here (coming in Week 2).
+        </p>
+      </UCard>
+
+      <UCard>
+        <template #header>
+          <h3 class="text-lg font-semibold">About</h3>
+        </template>
+        
+        <div class="space-y-2 text-sm text-gray-600">
+          <p><strong>Pantry</strong> v0.1.0-alpha</p>
+          <p>Self-hosted inventory management</p>
+          <a 
+            href="https://github.com/pantry-app/pantry" 
+            target="_blank"
+            class="text-primary hover:underline"
+          >
+            View on GitHub →
+          </a>
+        </div>
+      </UCard>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { user } = useSupabaseAuth()
+
+definePageMeta({
+  layout: 'default'
+})
+</script>

app/public/robots.txt

@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow:

app/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
+}

app/types/database.types.ts

@@ -0,0 +1,184 @@
+/**
+ * Database type definitions
+ * 
+ * TODO: Generate these from Supabase schema using:
+ * supabase gen types typescript --project-id <project-id> > types/database.types.ts
+ * 
+ * For now, using a placeholder structure that matches our schema
+ */
+
+export type Json =
+  | string
+  | number
+  | boolean
+  | null
+  | { [key: string]: Json | undefined }
+  | Json[]
+
+export interface Database {
+  public: {
+    Tables: {
+      inventory_items: {
+        Row: {
+          id: string
+          product_id: string | null
+          name: string
+          quantity: number
+          unit_id: string
+          expiry_date: string | null
+          notes: string | null
+          added_by: string
+          created_at: string
+          updated_at: string
+        }
+        Insert: {
+          id?: string
+          product_id?: string | null
+          name: string
+          quantity: number
+          unit_id: string
+          expiry_date?: string | null
+          notes?: string | null
+          added_by: string
+          created_at?: string
+          updated_at?: string
+        }
+        Update: {
+          id?: string
+          product_id?: string | null
+          name?: string
+          quantity?: number
+          unit_id?: string
+          expiry_date?: string | null
+          notes?: string | null
+          added_by?: string
+          created_at?: string
+          updated_at?: string
+        }
+      }
+      products: {
+        Row: {
+          id: string
+          barcode: string
+          name: string
+          brand: string | null
+          image_url: string | null
+          default_unit_id: string | null
+          cached_at: string
+          created_at: string
+        }
+        Insert: {
+          id?: string
+          barcode: string
+          name: string
+          brand?: string | null
+          image_url?: string | null
+          default_unit_id?: string | null
+          cached_at?: string
+          created_at?: string
+        }
+        Update: {
+          id?: string
+          barcode?: string
+          name?: string
+          brand?: string | null
+          image_url?: string | null
+          default_unit_id?: string | null
+          cached_at?: string
+          created_at?: string
+        }
+      }
+      tags: {
+        Row: {
+          id: string
+          name: string
+          category: 'position' | 'type' | 'custom'
+          icon: string | null
+          color: string | null
+          created_by: string | null
+          created_at: string
+        }
+        Insert: {
+          id?: string
+          name: string
+          category?: 'position' | 'type' | 'custom'
+          icon?: string | null
+          color?: string | null
+          created_by?: string | null
+          created_at?: string
+        }
+        Update: {
+          id?: string
+          name?: string
+          category?: 'position' | 'type' | 'custom'
+          icon?: string | null
+          color?: string | null
+          created_by?: string | null
+          created_at?: string
+        }
+      }
+      units: {
+        Row: {
+          id: string
+          name: string
+          abbreviation: string
+          unit_type: 'weight' | 'volume' | 'count' | 'custom'
+          base_unit_id: string | null
+          conversion_factor: number | null
+          is_default: boolean
+          created_by: string | null
+          created_at: string
+        }
+        Insert: {
+          id?: string
+          name: string
+          abbreviation: string
+          unit_type?: 'weight' | 'volume' | 'count' | 'custom'
+          base_unit_id?: string | null
+          conversion_factor?: number | null
+          is_default?: boolean
+          created_by?: string | null
+          created_at?: string
+        }
+        Update: {
+          id?: string
+          name?: string
+          abbreviation?: string
+          unit_type?: 'weight' | 'volume' | 'count' | 'custom'
+          base_unit_id?: string | null
+          conversion_factor?: number | null
+          is_default?: boolean
+          created_by?: string | null
+          created_at?: string
+        }
+      }
+      item_tags: {
+        Row: {
+          item_id: string
+          tag_id: string
+          created_at: string
+        }
+        Insert: {
+          item_id: string
+          tag_id: string
+          created_at?: string
+        }
+        Update: {
+          item_id?: string
+          tag_id?: string
+          created_at?: string
+        }
+      }
+    }
+    Views: {
+      [_ in never]: never
+    }
+    Functions: {
+      [_ in never]: never
+    }
+    Enums: {
+      tag_category: 'position' | 'type' | 'custom'
+      unit_type: 'weight' | 'volume' | 'count' | 'custom'
+    }
+  }
+}