discord warning

webapp/src/App.vue

@@ -2,12 +2,15 @@
 import { RouterView, useRouter } from 'vue-router'
 import { computed, ref, watch, onMounted } from 'vue'
 import { useTheme } from 'vuetify';
+import DiscordWarningDialog from '@/components/DiscordWarningDialog.vue';
+import { useDiscordIntercept } from '@/composables/useDiscordIntercept';
 
 const theme = useTheme();
 const router = useRouter();
 const snackbar = ref({ show: false, text: '' });
 const isDark = computed(() => theme.name.value === 'dark');
 const isFullscreen = computed(() => router.currentRoute.value?.query.fullscreen === 'true');
+const { showDialog, discordUrl, interceptDiscordLinks } = useDiscordIntercept();
 
 function toggleTheme() {
   const newTheme = theme.global.name.value === 'dark' ? 'light' : 'dark';
@@ -22,6 +25,10 @@ function toggleTheme() {
   }
 }
 
+function handleDiscordProceed(url: string) {
+  window.open(url, '_blank');
+}
+
 onMounted(() => {
   const savedTheme = localStorage.getItem('theme');
   if (savedTheme) {
@@ -31,6 +38,7 @@ onMounted(() => {
     theme.global.name.value = prefersDark ? 'dark' : 'light';
     localStorage.setItem('theme', theme.global.name.value);
   }
+  interceptDiscordLinks();
 });
 
 const items = [
@@ -153,6 +161,12 @@ watch(() => theme.global.name.value, (newTheme) => {
         </v-btn>
       </template>
     </v-snackbar>
+
+    <DiscordWarningDialog
+      v-model="showDialog"
+      :discordUrl="discordUrl"
+      @proceed="handleDiscordProceed"
+    />
   </v-app>
 </template>
 

webapp/src/components/DiscordWarningDialog.vue

@@ -0,0 +1,72 @@
+<template>
+  <v-dialog :model-value="modelValue" @update:modelValue="emit('update:modelValue', $event)" max-width="480">
+    <v-card class="discord-warning-card">
+      <v-card-text>
+        <div class="discord-warning-content">
+          <v-icon color="warning" size="28" class="mb-2">mdi-alert</v-icon>
+          <p class="mb-3 text-body-1">
+            <strong>You're about to join Discord</strong>
+          </p>
+          <v-alert color="warning" variant="outlined" class="mb-4">
+            <b>Law enforcement</b> and <b>Flock employees</b> actively monitor the Discord server. Please act accordingly.
+          </v-alert>
+          <p class="text-caption text-medium-emphasis mb-2">
+            If you understand the risks and wish to continue, click <strong>Proceed</strong> below.
+          </p>
+        </div>
+      </v-card-text>
+      <v-card-actions class="justify-end pt-0">
+        <v-btn color="primary" @click="proceed" class="mr-2" rounded>
+          <v-icon start>mdi-arrow-right</v-icon>
+          Proceed
+        </v-btn>
+        <v-btn variant="text" @click="cancel" rounded>
+          Cancel
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits } from 'vue';
+
+const props = defineProps<{ modelValue: boolean; discordUrl: string }>();
+const emit = defineEmits(['update:modelValue', 'proceed']);
+
+function proceed() {
+  emit('proceed', props.discordUrl);
+  emit('update:modelValue', false);
+}
+function cancel() {
+  emit('update:modelValue', false);
+}
+</script>
+
+<style scoped>
+.discord-warning-card {
+  border-radius: 18px;
+  box-shadow: 0 8px 32px rgba(76, 78, 100, 0.18);
+  background: linear-gradient(135deg, #fffbe6 0%, #fff 100%);
+}
+.v-theme--dark .discord-warning-card {
+  background: linear-gradient(135deg, #232323 0%, #2d2d2d 100%);
+}
+.discord-warning-content {
+  text-align: center;
+  padding: 8px 0 0 0;
+}
+.v-card-title {
+  font-size: 1.25rem;
+  letter-spacing: -0.01em;
+}
+.v-btn {
+  min-width: 120px;
+  font-weight: 600;
+  font-size: 1rem;
+}
+.v-alert {
+  font-size: 1rem;
+  border-radius: 10px;
+}
+</style>

webapp/src/composables/useDiscordIntercept.ts

@@ -0,0 +1,26 @@
+import { ref } from 'vue';
+
+export function useDiscordIntercept() {
+  const showDialog = ref(false);
+  const discordUrl = ref('');
+
+  function interceptDiscordLinks() {
+    document.addEventListener('click', (e) => {
+      const target = e.target as HTMLElement;
+      if (!target) return;
+      let link: HTMLAnchorElement | null = null;
+      if (target.tagName === 'A') {
+        link = target as HTMLAnchorElement;
+      } else {
+        link = target.closest('a');
+      }
+      if (link && link.href && (link.href.includes('discord.gg') || link.href.includes('discord.com'))) {
+        e.preventDefault();
+        discordUrl.value = link.href;
+        showDialog.value = true;
+      }
+    }, true);
+  }
+
+  return { showDialog, discordUrl, interceptDiscordLinks };
+}