From f8667efa28db05cff9b0ac889545faacc9302d77 Mon Sep 17 00:00:00 2001
From: stopflock <admin@stopflock.com>
Date: Wed, 15 Jul 2026 13:31:34 -0500
Subject: [PATCH] first pass test

---
 webapp/src/App.vue                            | 73 +++++++++-------
 webapp/src/components/layout/Footer.vue       | 54 +++++++++---
 .../src/components/layout/OfficialSocials.vue | 85 +++++++++++++++++++
 3 files changed, 166 insertions(+), 46 deletions(-)
 create mode 100644 webapp/src/components/layout/OfficialSocials.vue

diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index 0b35159..92879b2 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -3,12 +3,13 @@ import { RouterView, useRouter } from 'vue-router'
 import { computed, ref, watch, onMounted } from 'vue'
 import { useTheme } from 'vuetify';
 import DiscordWarningDialog from '@/components/DiscordWarningDialog.vue';
+import OfficialSocials from '@/components/layout/OfficialSocials.vue';
 import { useDiscordIntercept } from '@/composables/useDiscordIntercept';
 
 const theme = useTheme();
 const router = useRouter();
-const isDark = computed(() => theme.name.value === 'dark');
 const isInIframe = computed(() => window.self !== window.top);
+
 const { showDialog, discordUrl, interceptDiscordLinks } = useDiscordIntercept();
 
 function toggleTheme() {
@@ -38,23 +39,24 @@ const items = [
   { title: 'Map', icon: 'mdi-map', href: 'https://maps.deflock.org' },
   { title: 'Learn', icon: 'mdi-school', to: '/what-is-an-alpr' },
   { title: 'Store', icon: 'mdi-shopping', to: '/store' },
+  { title: 'Donate', icon: 'mdi-cash-multiple', to: '/donate' },
 ]
 
-const contributeItems = [
-  { title: 'Submit Cameras', icon: 'mdi-map-marker-plus', to: '/report' },
+const resourceItems = [
   { title: 'Public Records', icon: 'mdi-file-document', to: '/foia' },
   { title: 'City Council', icon: 'mdi-account-voice', to: '/council' },
-  { title: 'Support Us', icon: 'mdi-cash-multiple', to: '/donate' },
+  { title: 'FAQ', icon: 'mdi-help-circle', to: '/what-is-an-alpr' },
 ]
 
-const metaItems = [
-  { title: 'Discord', customIcon: '/icon-discord.svg', customIconDark: '/icon-discord-white.svg', customIconGrey: '/icon-discord-grey.svg', href: 'https://discord.gg/aV7v4R3sKT'},
+const getInvolvedItems = [
   { title: 'Local Groups', icon: 'mdi-account-group', to: '/groups' },
   { title: 'Contact', icon: 'mdi-email-outline', to: '/contact' },
   { title: 'GitHub', icon: 'mdi-github', href: 'https://github.com/frillweeman/deflock'},
+  { title: 'Submit Cameras', icon: 'mdi-map-marker-plus', to: '/report' },
 ];
 const drawer = ref(false)
 
+
 watch(() => theme.global.name.value, (newTheme) => {
   const root = document.documentElement;
   if (newTheme === 'dark') {
@@ -110,7 +112,7 @@ watch(() => theme.global.name.value, (newTheme) => {
 
           <v-spacer></v-spacer>
 
-          <!-- Contribute section -->
+          <!-- Resources section -->
           <div class="d-flex align-center">
             <v-menu offset-y>
               <template v-slot:activator="{ props }">
@@ -120,12 +122,12 @@ watch(() => theme.global.name.value, (newTheme) => {
                   append-icon="mdi-chevron-down"
                   class="mx-1"
                 >
-                  Contribute
+                  Resources
                 </v-btn>
               </template>
               <v-list>
                 <v-list-item
-                  v-for="item in contributeItems"
+                  v-for="item in resourceItems"
                   :key="item.title"
                   :to="item.to"
                   link
@@ -152,7 +154,7 @@ watch(() => theme.global.name.value, (newTheme) => {
               </template>
               <v-list>
                 <v-list-item
-                  v-for="item in metaItems"
+                  v-for="item in getInvolvedItems"
                   :key="item.title"
                   :to="item.to"
                   :href="item.href"
@@ -160,23 +162,31 @@ watch(() => theme.global.name.value, (newTheme) => {
                   link
                 >
                   <template v-slot:prepend>
-                    <v-icon v-if="item.icon">{{ item.icon }}</v-icon>
-                    <v-img 
-                      v-else-if="item.customIcon"
-                      class="mr-8"
-                      contain 
-                      width="24" 
-                      height="24" 
-                      :src="isDark ? item.customIconDark : item.customIconGrey" 
-                    />
+                    <v-icon>{{ item.icon }}</v-icon>
                   </template>
                   <v-list-item-title>{{ item.title }}</v-list-item-title>
                 </v-list-item>
               </v-list>
             </v-menu>
+
+            <!-- Official Socials section -->
+            <v-menu offset-y>
+              <template v-slot:activator="{ props }">
+                <v-btn
+                  variant="text"
+                  v-bind="props"
+                  append-icon="mdi-chevron-down"
+                  class="mx-1"
+                >
+                  Official Socials
+                </v-btn>
+              </template>
+              <OfficialSocials />
+            </v-menu>
           </div>
         </div>
 
+
         <v-spacer class="d-md-none" />
 
         <v-btn icon @click="toggleTheme" aria-label="Toggle Theme">
@@ -208,10 +218,10 @@ watch(() => theme.global.name.value, (newTheme) => {
 
         <v-divider class="my-2" aria-hidden="true" role="presentation" />
 
-        <v-list-subheader class="px-4">Contribute</v-list-subheader>
-        <v-list nav aria-label="Contribute Links">
+        <v-list-subheader class="px-4">Resources</v-list-subheader>
+        <v-list nav aria-label="Resource Links">
           <v-list-item
-            v-for="item in contributeItems"
+            v-for="item in resourceItems"
             :key="item.title"
             link
             :to="item.to"
@@ -225,9 +235,9 @@ watch(() => theme.global.name.value, (newTheme) => {
         <v-divider class="my-2" aria-hidden="true" role="presentation" />
           
         <v-list-subheader class="px-4">Get Involved</v-list-subheader>
-        <v-list nav aria-label="Meta Links">
+        <v-list nav aria-label="Get Involved Links">
           <v-list-item
-            v-for="item in metaItems"
+            v-for="item in getInvolvedItems"
             :key="item.title"
             link
             :to="item.to"
@@ -236,19 +246,16 @@ watch(() => theme.global.name.value, (newTheme) => {
             role="option"
           >
             <v-icon v-if="item.icon" start>{{ item.icon }}</v-icon>
-            <v-img
-              v-else-if="item.customIcon"
-              class="mr-2 custom-icon"
-              contain
-              width="24"
-              height="24"
-              :src="isDark ? item.customIconDark : item.customIcon"
-              style="vertical-align: middle;"
-            />
             <span style="vertical-align: middle;">{{ item.title }}</span>
           </v-list-item>
         </v-list>
+
+        <v-divider class="my-2" aria-hidden="true" role="presentation" />
+
+        <v-list-subheader class="px-4">Official Socials</v-list-subheader>
+        <OfficialSocials />
       </v-navigation-drawer>
+
     </template>
 
     <v-main>
diff --git a/webapp/src/components/layout/Footer.vue b/webapp/src/components/layout/Footer.vue
index 2c5934c..523106f 100644
--- a/webapp/src/components/layout/Footer.vue
+++ b/webapp/src/components/layout/Footer.vue
@@ -7,8 +7,8 @@
           <v-img height="30" contain src="/deflock-logo-grey.svg" />
         </v-col>
         
-        <!-- Internal Links -->
-        <v-col cols="7" sm="3">
+        <!-- Info -->
+        <v-col cols="6" sm="3">
           <v-list-subheader class="mx-4 font-weight-black text-subtitle-1" :class="isDark ? 'text-grey-lighten-5' : 'text-black'" id="footer-info-heading">Info</v-list-subheader>
           <v-list density="compact" aria-labelledby="footer-info-heading" role="list">
             <v-list-item role="listitem"
@@ -27,12 +27,32 @@
           </v-list>
         </v-col>
 
-        <!-- External Links -->
-        <v-col cols="5" sm="3">
+        <!-- Contact Us -->
+        <v-col cols="6" sm="3">
+          <v-list-subheader class="mx-4 font-weight-black text-subtitle-1" :class="isDark ? 'text-grey-lighten-5' : 'text-black'" id="footer-contact-heading">Contact Us</v-list-subheader>
+          <v-list density="compact" aria-labelledby="footer-contact-heading" role="list">
+            <v-list-item role="listitem"
+              v-for="link in contactLinks"
+              :key="link.title"
+              link
+              :to="link.to"
+              slim
+              :aria-label="link.alt"
+            >
+                <v-list-item-title class="d-flex align-center">
+                <v-icon class="custom-icon" start :icon="link.icon" :alt="link.alt" />
+                {{ link.title }}
+                </v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-col>
+
+        <!-- Get Involved -->
+        <v-col cols="6" sm="3">
           <v-list-subheader class="mx-4 font-weight-black text-subtitle-1" :class="isDark ? 'text-grey-lighten-5' : 'text-black'" id="footer-involved-heading">Get Involved</v-list-subheader>
           <v-list density="compact" aria-labelledby="footer-involved-heading" role="list">
             <v-list-item
-              v-for="link in externalLinks"
+              v-for="link in getInvolvedLinks"
               :key="link.title"
               link
               slim
@@ -42,19 +62,23 @@
               role="listitem"
             >
               <v-list-item-title class="d-flex align-center justify-start">
-                <v-icon start v-if="link.icon" class="custom-icon" :icon="link.icon"></v-icon>
-                <img v-else-if="link.customIcon" class="mr-2 custom-icon" width="24" height="24" :src="isDark ? link.customIconDark : link.customIcon" :alt="link.alt" />
+                <v-icon start class="custom-icon" :icon="link.icon"></v-icon>
                 {{ link.title }}
               </v-list-item-title>
             </v-list-item>
           </v-list>
         </v-col>
 
+        <!-- Official Socials -->
+        <v-col cols="6" sm="3">
+          <v-list-subheader class="mx-4 font-weight-black text-subtitle-1" :class="isDark ? 'text-grey-lighten-5' : 'text-black'" id="footer-socials-heading">Official Socials</v-list-subheader>
+          <OfficialSocials />
+        </v-col>
+
         <!-- Copyright -->
         <v-col
           class="text-center d-flex align-center justify-center text-grey-darken-1"
           cols="12"
-          sm="6"
         >
           <div class="copyright" :class="isDark ? 'text-grey-lighten-5' : 'text-black'">
             <p>&copy; {{ currentYear }} DeFlock. All Rights Reserved</p>
@@ -70,6 +94,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useTheme } from 'vuetify';
+import OfficialSocials from './OfficialSocials.vue';
 const theme = useTheme();
 const isDark = computed(() => theme.name.value === 'dark');
 const currentYear = new Date().getFullYear();
@@ -78,14 +103,17 @@ const internalLinks = [
   { title: 'About', to: '/about', icon: 'mdi-information', alt: 'About' },
   { title: 'Privacy Policy', to: '/privacy', icon: 'mdi-shield-lock', alt: 'Privacy Policy' },
   { title: 'Terms of Service', to: '/terms', icon: 'mdi-file-document', alt: 'Terms of Service' },
-  { title: 'Press', to: '/press', icon: 'mdi-newspaper', alt: 'Press' },
 ];
 
-const externalLinks = [
-  { title: 'Discord', href: 'https://discord.gg/aV7v4R3sKT', customIcon: '/icon-discord.svg', customIconDark: '/icon-discord-white.svg', alt: 'Discord Logo' },
-  { title: 'Support Us', to: '/donate', icon: 'mdi-cash-multiple', alt: 'Support Us' },
-  { title: 'GitHub', href: 'https://github.com/FoggedLens/deflock', icon: 'mdi-github', alt: 'GitHub Logo' },
+const contactLinks = [
+  { title: 'Press', to: '/press', icon: 'mdi-newspaper', alt: 'Press' },
   { title: 'Contact', to: '/contact', icon: 'mdi-email', alt: 'Contact' },
+];
+
+const getInvolvedLinks = [
+  { title: 'Local Groups', to: '/groups', icon: 'mdi-account-group' },
+  { title: 'GitHub', href: 'https://github.com/FoggedLens/deflock', icon: 'mdi-github' },
+  { title: 'Submit Cameras', to: '/report', icon: 'mdi-map-marker-plus' },
 ]
 </script>
 
diff --git a/webapp/src/components/layout/OfficialSocials.vue b/webapp/src/components/layout/OfficialSocials.vue
new file mode 100644
index 0000000..de51744
--- /dev/null
+++ b/webapp/src/components/layout/OfficialSocials.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="official-socials">
+    <p class="official-socials-disclaimer text-caption px-4 pt-2 pb-2 mb-0">
+      These are DeFlock National's official social media links. Partner groups are
+      listed at <router-link to="/groups">deflock.org/groups</router-link>. Other
+      websites and social media accounts using the name are unaffiliated.
+    </p>
+    <v-list density="compact" aria-label="Official Social Media Links" role="list">
+      <v-list-item
+        v-for="social in socials"
+        :key="social.title"
+        :href="social.href"
+        target="_blank"
+        rel="noopener noreferrer"
+        link
+        slim
+        role="listitem"
+        :aria-label="social.title"
+      >
+        <template v-slot:prepend>
+          <svg
+            class="official-social-icon mr-4"
+            viewBox="0 0 24 24"
+            width="20"
+            height="20"
+            aria-hidden="true"
+          >
+            <path :d="social.path" fill="currentColor" />
+          </svg>
+        </template>
+        <v-list-item-title>{{ social.title }}</v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </div>
+</template>
+
+<script setup lang="ts">
+const socials = [
+  {
+    title: 'Discord',
+    href: 'https://discord.gg/aV7v4R3sKT',
+    path: 'M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z',
+  },
+  {
+    title: 'X (Twitter)',
+    href: 'https://x.com/therealdeflock',
+    path: 'M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z',
+  },
+  {
+    title: 'Bluesky',
+    href: 'https://bsky.app/profile/deflock.org',
+    path: 'M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037-.856 3.061-3.978 3.842-6.755 3.37 4.854.826 6.089 3.562 3.422 6.299-5.065 5.196-7.28-1.304-7.847-2.97-.104-.305-.152-.448-.153-.327 0-.121-.05.022-.153.327-.568 1.666-2.782 8.166-7.847 2.97-2.667-2.737-1.432-5.473 3.422-6.3-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026',
+  },
+  {
+    title: 'TikTok',
+    href: 'https://www.tiktok.com/@therealdeflock',
+    path: 'M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z',
+  },
+  {
+    title: 'Reddit',
+    href: 'https://www.reddit.com/user/therealDeFlock',
+    path: 'M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z',
+  },
+  {
+    title: 'Instagram',
+    href: 'https://www.instagram.com/deflock.me',
+    path: 'M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077',
+  },
+];
+</script>
+
+<style scoped>
+.official-socials-disclaimer {
+  max-width: 320px;
+  opacity: var(--v-medium-emphasis-opacity, 0.7);
+  line-height: 1.4;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+.official-social-icon {
+  display: inline-block;
+  flex: none;
+  color: inherit;
+}
+</style>