From 85307b799581160c600140ce414b31da44dd5c8a Mon Sep 17 00:00:00 2001
From: Will Freeman <hohosanta@me.com>
Date: Thu, 13 Nov 2025 16:40:31 -0700
Subject: [PATCH 1/3] store with downloads only

---
 webapp/src/App.vue                   |   1 +
 webapp/src/layouts/DefaultLayout.vue |  17 ++
 webapp/src/router/index.ts           |   8 +
 webapp/src/views/Store.vue           | 315 +++++++++++++++++++++++++++
 4 files changed, 341 insertions(+)
 create mode 100644 webapp/src/layouts/DefaultLayout.vue
 create mode 100644 webapp/src/views/Store.vue

diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index 37d26af..c9ba146 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -37,6 +37,7 @@ const items = [
   { title: 'Home', icon: 'mdi-home', to: '/' },
   { title: 'Map', icon: 'mdi-map', to: '/map' },
   { title: 'Learn', icon: 'mdi-school', to: '/what-is-an-alpr' },
+  { title: 'Store', icon: 'mdi-shopping', to: '/store' },
 ]
 
 const contributeItems = [
diff --git a/webapp/src/layouts/DefaultLayout.vue b/webapp/src/layouts/DefaultLayout.vue
new file mode 100644
index 0000000..2fa21ca
--- /dev/null
+++ b/webapp/src/layouts/DefaultLayout.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <slot name="header" />
+
+    <!-- Main content -->
+    <main class="mb-16">
+      <slot />
+    </main>
+
+    <!-- Footer -->
+    <Footer />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Footer from '../components/layout/Footer.vue'
+</script>
diff --git a/webapp/src/router/index.ts b/webapp/src/router/index.ts
index 66770c1..d8b42c7 100644
--- a/webapp/src/router/index.ts
+++ b/webapp/src/router/index.ts
@@ -155,6 +155,14 @@ const router = createRouter({
         title: 'Press | DeFlock'
       }
     },
+    {
+      path: '/store',
+      name: 'store',
+      component: () => import('../views/Store.vue'),
+      meta: {
+        title: 'Store | DeFlock'
+      }
+    },
     {
       path: '/:pathMatch(.*)*',
       name: 'not-found',
diff --git a/webapp/src/views/Store.vue b/webapp/src/views/Store.vue
new file mode 100644
index 0000000..ca1134a
--- /dev/null
+++ b/webapp/src/views/Store.vue
@@ -0,0 +1,315 @@
+<template>
+  <DefaultLayout>
+    <template #header>
+      <Hero
+        title="DeFlock Store"
+        description="Full store coming soon! In the meantime, check out our free Downloads."
+        gradient="linear-gradient(135deg, rgb(var(--v-theme-primary)) 0%, rgb(var(--v-theme-secondary)) 100%)"
+      />
+    </template>
+
+    <v-container>
+      <!-- Loading State -->
+      <div v-if="loading" class="text-center py-8">
+        <v-progress-circular indeterminate color="primary" size="64" />
+        <p class="mt-4 text-grey">Loading printables...</p>
+      </div>
+
+      <!-- Error State -->
+      <v-alert
+        v-else-if="error"
+        type="error"
+        variant="tonal"
+        class="mb-6"
+        closable
+        @click:close="error = null"
+      >
+        <strong>Failed to load printables:</strong> {{ error }}
+      </v-alert>
+
+      <!-- Printables Grid -->
+      <div v-else-if="printables.length > 0">
+        <h2 class="text-h4 mb-6 font-weight-bold text-center">Printables</h2>
+        
+        <!-- Filter Section -->
+        <div class="filter-section mb-6">
+          <v-row justify="center">
+            <v-col cols="12" md="6" lg="4">
+              <v-select
+                v-model="selectedType"
+                :items="typeOptions"
+                label="Filter by type"
+                prepend-inner-icon="mdi-filter"
+                variant="outlined"
+                clearable
+                hide-details
+                class="filter-select"
+              >
+                <template v-slot:item="{ props, item }">
+                  <v-list-item v-bind="props">
+                    <template v-slot:prepend>
+                      <v-icon :color="getTypeColor(item.raw.value)">{{ getTypeIcon(item.raw.value) }}</v-icon>
+                    </template>
+                  </v-list-item>
+                </template>
+                <template v-slot:selection="{ item }">
+                  <div class="d-flex align-center">
+                    <v-icon :color="getTypeColor(item.raw.value)" class="mr-2">{{ getTypeIcon(item.raw.value) }}</v-icon>
+                    <span class="text-capitalize">{{ item.raw.title }}</span>
+                  </div>
+                </template>
+              </v-select>
+            </v-col>
+          </v-row>
+        </div>
+
+        <v-row>
+          <v-col
+            v-for="printable in filteredPrintables"
+            :key="printable.id"
+            cols="12"
+            md="6"
+            lg="4"
+          >
+            <v-card
+              elevation="2"
+              height="100%"
+            >
+              <!-- Preview Image -->
+              <div class="position-relative">
+                <v-img
+                  :src="getImageUrl(printable.preview)"
+                  :alt="`${printable.title} preview`"
+                  aspect-ratio="1.414"
+                  contain
+                >
+                  <template v-slot:placeholder>
+                    <div class="d-flex align-center justify-center fill-height">
+                      <v-progress-circular
+                        color="grey-lighten-4"
+                        indeterminate
+                      />
+                    </div>
+                  </template>
+                  
+                  <!-- Type Badge -->
+                  <v-chip
+                    :color="getTypeColor(printable.type)"
+                    size="small"
+                    class="ma-2 text-capitalize"
+                    style="position: absolute; top: 0; right: 0;"
+                  >
+                    <v-icon start size="small">{{ getTypeIcon(printable.type) }}</v-icon>
+                    {{ printable.type }}
+                  </v-chip>
+                </v-img>
+              </div>
+
+              <!-- Card Content -->
+              <v-card-text class="pb-2">
+                <h3 class="text-h6 font-weight-bold mb-2">
+                  {{ printable.title }}
+                </h3>
+                
+                <div class="d-flex align-center text-caption text-grey mb-3">
+                  <v-icon size="small" class="mr-1">mdi-account</v-icon>
+                  by {{ printable.author }}
+                  <v-tooltip text="Licensed under CC BY-NC 4.0">
+                    <template v-slot:activator="{ props }">
+                      <v-icon 
+                        v-bind="props"
+                        size="small" 
+                        class="ml-1"
+                        color="grey"
+                      >
+                        mdi-creative-commons
+                      </v-icon>
+                    </template>
+                  </v-tooltip>
+                  <v-spacer />
+                  <v-icon size="small" class="mr-1">mdi-clock-outline</v-icon>
+                  {{ formatDate(printable.date_updated) }}
+                </div>
+
+                <!-- Download Options -->
+                <div class="download-section">
+                  <p class="text-body-2 text-grey-darken-1 mb-3">
+                    Download options:
+                  </p>
+                  
+                  <div class="d-flex gap-2">
+                    <v-btn
+                      v-if="printable.front"
+                      :href="getImageUrl(printable.front)"
+                      target="_blank"
+                      download
+                      variant="tonal"
+                      color="primary"
+                      size="small"
+                      prepend-icon="mdi-download"
+                      class="flex-1-1-50"
+                    >
+                      Front Side
+                    </v-btn>
+                    
+                    <v-btn
+                      v-if="printable.back"
+                      :href="getImageUrl(printable.back)"
+                      target="_blank"
+                      download
+                      variant="tonal"
+                      color="secondary"
+                      size="small"
+                      prepend-icon="mdi-download"
+                      class="flex-1-1-50"
+                    >
+                      Back Side
+                    </v-btn>
+                  </div>
+                </div>
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
+      </div>
+
+      <!-- Empty State -->
+      <div v-else class="text-center py-12">
+        <v-icon size="64" color="grey-lighten-1">mdi-inbox-outline</v-icon>
+        <h3 class="text-h5 mt-4 mb-2 text-grey">No printables available</h3>
+        <p class="text-grey">Check back later for new content!</p>
+      </div>
+    </v-container>
+  </DefaultLayout>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import type { Ref } from 'vue';
+import DefaultLayout from '@/layouts/DefaultLayout.vue';
+import Hero from '@/components/layout/Hero.vue';
+
+// Types
+interface Printable {
+  id: number;
+  date_updated: string;
+  type: string;
+  author: string;
+  preview: string;
+  front: string | null;
+  back: string | null;
+  title: string;
+}
+
+interface CMSResponse {
+  data: Printable[];
+}
+
+// Reactive state
+const printables: Ref<Printable[]> = ref([]);
+const loading = ref(true);
+const error: Ref<string | null> = ref(null);
+const selectedType: Ref<string | null> = ref(null);
+
+// Computed properties
+const typeOptions = computed(() => {
+  const types = [...new Set(printables.value.map(p => p.type))];
+  return types.map(type => ({
+    title: type.charAt(0).toUpperCase() + type.slice(1),
+    value: type
+  }));
+});
+
+const filteredPrintables = computed(() => {
+  if (!selectedType.value) {
+    return printables.value;
+  }
+  return printables.value.filter(printable => printable.type === selectedType.value);
+});
+
+// Methods
+const fetchPrintables = async (): Promise<void> => {
+  try {
+    loading.value = true;
+    error.value = null;
+    
+    const response = await fetch('https://cms.deflock.me/items/Printables');
+    
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    
+    const data: CMSResponse = await response.json();
+    printables.value = data.data || [];
+  } catch (err) {
+    console.error('Error fetching printables:', err);
+    error.value = err instanceof Error ? err.message : 'Failed to load printables';
+  } finally {
+    loading.value = false;
+  }
+};
+
+const getImageUrl = (imageId: string): string => {
+  if (!imageId) return '';
+  return `https://cms.deflock.me/assets/${imageId}`;
+};
+
+const getTypeColor = (type: string): string => {
+  const colors: Record<string, string> = {
+    poster: 'primary',
+    yardSign: 'secondary',
+    sticker: 'accent',
+    bumperSticker: 'info'
+  };
+  return colors[type.toLowerCase()] || 'grey';
+};
+
+const getTypeIcon = (type: string): string => {
+  const icons: Record<string, string> = {
+    poster: 'mdi-post',
+    yardSign: 'mdi-sign-real-estate',
+    sticker: 'mdi-sticker-circle-outline',
+    bumperSticker: 'mdi-rectangle-outline',
+  };
+  return icons[type.toLowerCase()] || 'mdi-file';
+};
+
+const formatDate = (dateString: string): string => {
+  return new Date(dateString).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  });
+};
+
+// Lifecycle
+onMounted(() => {
+  fetchPrintables();
+});
+</script>
+
+<style scoped>
+.filter-section {
+  background: rgba(var(--v-theme-surface-variant), 0.1);
+  border-radius: 12px;
+  padding: 16px;
+}
+
+.filter-select {
+  max-width: 100%;
+}
+
+.download-section {
+  border-top: 1px solid rgba(0, 0, 0, 0.12);
+  padding-top: 12px;
+  margin-top: 8px;
+}
+
+.gap-2 {
+  gap: 8px;
+}
+
+.flex-1-1-50 {
+  flex: 1 1 50%;
+}
+</style>
\ No newline at end of file

From 89e7a587533ddf2a42986767a20f71bbeba76b9b Mon Sep 17 00:00:00 2001
From: Will Freeman <hohosanta@me.com>
Date: Thu, 13 Nov 2025 18:16:46 -0700
Subject: [PATCH 2/3] add upload link

---
 webapp/src/views/Store.vue | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/webapp/src/views/Store.vue b/webapp/src/views/Store.vue
index ca1134a..9a55565 100644
--- a/webapp/src/views/Store.vue
+++ b/webapp/src/views/Store.vue
@@ -179,6 +179,26 @@
         <h3 class="text-h5 mt-4 mb-2 text-grey">No printables available</h3>
         <p class="text-grey">Check back later for new content!</p>
       </div>
+
+      <!-- Submit Artwork Section -->
+      <v-divider class="my-8" />
+      <div class="text-center py-4">
+        <v-btn
+          href="https://forms.gle/bbNdsZ8iKv7VVFYi8"
+          target="_blank"
+          rel="noopener noreferrer"
+          color="primary"
+          variant="outlined"
+          size="large"
+          prepend-icon="mdi-upload"
+          class="text-none"
+        >
+          Submit Your Artwork
+        </v-btn>
+        <p class="text-caption text-grey mt-2">
+          Have anti-ALPR artwork? Share it with the community!
+        </p>
+      </div>
     </v-container>
   </DefaultLayout>
 </template>

From a3321908a89c127367e7305fcdfaf12539225636 Mon Sep 17 00:00:00 2001
From: Will Freeman <hohosanta@me.com>
Date: Thu, 13 Nov 2025 21:45:13 -0700
Subject: [PATCH 3/3] minor store fixes

---
 webapp/src/views/Store.vue | 44 ++++++++++++++++++++++----------------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/webapp/src/views/Store.vue b/webapp/src/views/Store.vue
index 9a55565..eb26488 100644
--- a/webapp/src/views/Store.vue
+++ b/webapp/src/views/Store.vue
@@ -29,7 +29,10 @@
 
       <!-- Printables Grid -->
       <div v-else-if="printables.length > 0">
-        <h2 class="text-h4 mb-6 font-weight-bold text-center">Printables</h2>
+        <h2 class="text-h4 mb-2 font-weight-bold text-center">Printables</h2>
+        <p class="mb-6 text-center">
+          Signs, stickers, zines, and more!
+        </p>
         
         <!-- Filter Section -->
         <div class="filter-section mb-6">
@@ -81,6 +84,7 @@
                   :src="getImageUrl(printable.preview)"
                   :alt="`${printable.title} preview`"
                   aspect-ratio="1.414"
+                  class="mt-4 mx-2"
                   contain
                 >
                   <template v-slot:placeholder>
@@ -91,17 +95,6 @@
                       />
                     </div>
                   </template>
-                  
-                  <!-- Type Badge -->
-                  <v-chip
-                    :color="getTypeColor(printable.type)"
-                    size="small"
-                    class="ma-2 text-capitalize"
-                    style="position: absolute; top: 0; right: 0;"
-                  >
-                    <v-icon start size="small">{{ getTypeIcon(printable.type) }}</v-icon>
-                    {{ printable.type }}
-                  </v-chip>
                 </v-img>
               </div>
 
@@ -110,6 +103,16 @@
                 <h3 class="text-h6 font-weight-bold mb-2">
                   {{ printable.title }}
                 </h3>
+
+                <!-- Type Badge -->
+                <v-chip
+                  :color="getTypeColor(printable.type)"
+                  size="small"
+                  class="text-capitalize mb-2 font-weight-bold"
+                >
+                  <v-icon start size="small">{{ getTypeIcon(printable.type) }}</v-icon>
+                  {{ deCamel(printable.type) }}
+                </v-chip>
                 
                 <div class="d-flex align-center text-caption text-grey mb-3">
                   <v-icon size="small" class="mr-1">mdi-account</v-icon>
@@ -133,10 +136,6 @@
 
                 <!-- Download Options -->
                 <div class="download-section">
-                  <p class="text-body-2 text-grey-darken-1 mb-3">
-                    Download options:
-                  </p>
-                  
                   <div class="d-flex gap-2">
                     <v-btn
                       v-if="printable.front"
@@ -149,7 +148,8 @@
                       prepend-icon="mdi-download"
                       class="flex-1-1-50"
                     >
-                      Front Side
+                      <span v-if="printable.back">Front Side</span>
+                      <span v-else>Download</span>
                     </v-btn>
                     
                     <v-btn
@@ -269,6 +269,10 @@ const fetchPrintables = async (): Promise<void> => {
   }
 };
 
+const deCamel = (str: string): string => {
+  return str.replace(/([a-z])([A-Z])/g, '$1 $2');
+};
+
 const getImageUrl = (imageId: string): string => {
   if (!imageId) return '';
   return `https://cms.deflock.me/assets/${imageId}`;
@@ -277,21 +281,23 @@ const getImageUrl = (imageId: string): string => {
 const getTypeColor = (type: string): string => {
   const colors: Record<string, string> = {
     poster: 'primary',
+    zine: 'success',
     yardSign: 'secondary',
     sticker: 'accent',
     bumperSticker: 'info'
   };
-  return colors[type.toLowerCase()] || 'grey';
+  return colors[type] || 'grey';
 };
 
 const getTypeIcon = (type: string): string => {
   const icons: Record<string, string> = {
     poster: 'mdi-post',
+    zine: 'mdi-book-open-page-variant',
     yardSign: 'mdi-sign-real-estate',
     sticker: 'mdi-sticker-circle-outline',
     bumperSticker: 'mdi-rectangle-outline',
   };
-  return icons[type.toLowerCase()] || 'mdi-file';
+  return icons[type] || 'mdi-file';
 };
 
 const formatDate = (dateString: string): string => {