Add 'Re-create' discussion action

Implement re-create flow for discussions: archive/lock the original,
rename its slug with a YYYY-MM-DD prefix (resolving conflicts), create a
new discussion with the original content, and warm/invalidate the
discussion cache.

Use TinyBadge for RSVP tab counts. In the add-discussion modal respect
user settings for archived topics, invalidate/warm cache on save, and
defer navigation until modal teardown. Add a start-on-drafts prop and a
Drafts quick-open button on the forum index.

Add Appearance link to the user sheet and small profile-badge CSS
tweaks.
Bump forum topics cache key to v2 and add a page meta key for
forum/[id].

Author: zealsprince

app/components/Discussions/Discussion.vue

@@ -248,7 +248,7 @@ if (linkedCommentId) {
       showOfftopic.value = true
       hasManuallySwitched.value = true
     }
-  }, { immediate: true })
+  })
 }
 
 async function handleGoToPinnedReply() {

app/components/Events/EventRSVPModal.vue

@@ -3,6 +3,7 @@ import type { Tables } from '@/types/database.overrides'
 import { Alert, Badge, Button, Flex, Modal, Skeleton, Tab, Tabs } from '@dolanske/vui'
 import { computed, ref, watch } from 'vue'
 import BulkUserDisplay from '@/components/Shared/BulkUserDisplay.vue'
+import TinyBadge from '@/components/Shared/TinyBadge.vue'
 import { useEventTiming } from '@/composables/useEventTiming'
 import { useRsvpBus } from '@/composables/useRsvpBus'
 import { useBreakpoint } from '@/lib/mediaQuery'
@@ -186,19 +187,28 @@ function handleClose() {
             <Tab value="yes">
               <Flex y-center gap="xs">
                 <Icon name="ph:check-circle" class="rsvp-modal__icon" />
-                <span>{{ yesTabLabel }} {{ yesCount > 0 ? `(${yesCount})` : '' }}</span>
+                {{ yesTabLabel }}
+                <TinyBadge v-if="yesCount > 0" variant="success">
+                  {{ yesCount }}
+                </TinyBadge>
               </Flex>
             </Tab>
             <Tab value="tentative">
               <Flex y-center gap="xs">
-                <Icon name="ph:question" sizeclass="rsvp-modal__icon" />
-                <span>Maybe {{ tentativeCount > 0 ? `(${tentativeCount})` : '' }}</span>
+                <Icon name="ph:question" class="rsvp-modal__icon" />
+                Maybe
+                <TinyBadge v-if="tentativeCount > 0" variant="warning">
+                  {{ tentativeCount }}
+                </TinyBadge>
               </Flex>
             </Tab>
             <Tab value="no">
               <Flex y-center gap="xs">
                 <Icon name="ph:x-circle" class="rsvp-modal__icon" />
-                <span>Not Going {{ noCount > 0 ? `(${noCount})` : '' }}</span>
+                Not Going
+                <TinyBadge v-if="noCount > 0" variant="danger">
+                  {{ noCount }}
+                </TinyBadge>
               </Flex>
             </Tab>
           </Tabs>

app/components/Forum/ForumItemActions.vue

@@ -3,10 +3,20 @@ import type { Tables } from '@/types/database.overrides'
 import { Alert, Button, Divider, Dropdown, DropdownItem, pushToast, Tooltip } from '@dolanske/vui'
 import { useDataUser } from '@/composables/useDataUser'
 import { useDiscussionCache } from '@/composables/useDiscussionCache'
+import { slugify } from '@/lib/utils/formatting'
 import ConfirmModal from '../Shared/ConfirmModal.vue'
 import ForumModalAddDiscussion from './ForumModalAddDiscussion.vue'
 import ForumModalAddTopic from './ForumModalAddTopic.vue'
 
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  update: [data: Props['data']]
+  remove: [id: string]
+}>()
+
+const SLUG_DATE_PREFIX_RE = /^\d{4}-\d{2}-\d{2}-/
+
 interface ModalControls {
   hideDiscussionTabs?: boolean
 }
@@ -20,11 +30,6 @@ type Props
     data: Tables<'discussions'>
   }
 
-const props = defineProps<Props>()
-const emit = defineEmits<{
-  update: [data: Props['data']]
-  remove: [id: string]
-}>()
 const dropdownRef = useTemplateRef('dropdownRef')
 const supabase = useSupabaseClient()
 
@@ -177,9 +182,146 @@ const linkedDiscussionReason = computed(() => {
     || discussion.referendum_id,
   )
 
-  return isLinked ? 'This discussion is linked to an entity and cannot be deleted.' : null
+  return isLinked ? 'This discussion is linked to an entity and cannot be re-created or deleted.' : null
 })
 
+// Re-create
+const recreateConfirm = ref(false)
+const recreateLoading = ref(false)
+
+const recreateDescription = computed(() => {
+  if (props.table !== 'discussions')
+    return ''
+  const discussion = props.data as Tables<'discussions'>
+  const created = new Date(discussion.created_at)
+  const suffix = `${created.getFullYear()}-${String(created.getMonth() + 1).padStart(2, '0')}-${String(created.getDate()).padStart(2, '0')}`
+  return `This will lock, unpin, and archive "${discussion.title ?? 'this discussion'}" - renaming its slug with a ${suffix}- prefix - then create a fresh discussion with the same title, description, and content. This cannot be undone.`
+})
+
+async function handleRecreate() {
+  if (props.table !== 'discussions')
+    return
+
+  recreateLoading.value = true
+  dropdownRef.value?.close()
+
+  const discussion = props.data as Tables<'discussions'>
+
+  // Build the YYYY-MM-DD suffix from the discussion's creation date
+  const created = new Date(discussion.created_at)
+  const suffix = `${created.getFullYear()}-${String(created.getMonth() + 1).padStart(2, '0')}-${String(created.getDate()).padStart(2, '0')}`
+
+  const oldTitle = discussion.title ?? 'Untitled'
+  const archivedTitle = `${oldTitle} (${suffix})`
+  const baseSlug = discussion.slug ?? slugify(oldTitle)
+  // Strip any existing YYYY-MM-DD prefix from the slug before prepending
+  const cleanSlug = baseSlug.replace(SLUG_DATE_PREFIX_RE, '')
+  const archivedSlugBase = `${suffix}-${cleanSlug}`
+
+  // Resolve a free archived slug - append -2, -3, etc. on conflict
+  let archivedSlug = archivedSlugBase
+  {
+    let counter = 1
+    while (true) {
+      const { data: existing } = await supabase
+        .from('discussions')
+        .select('id')
+        .eq('slug', archivedSlug)
+        .neq('id', discussion.id)
+        .limit(1)
+      if (!existing || existing.length === 0)
+        break
+      counter++
+      archivedSlug = `${archivedSlugBase}-${counter}`
+    }
+  }
+
+  // Resolve a free slug for the new discussion - the original slug may already
+  // be taken if this discussion was previously re-created
+  let newSlug = baseSlug
+  {
+    let counter = 1
+    while (true) {
+      const { data: existing } = await supabase
+        .from('discussions')
+        .select('id')
+        .eq('slug', newSlug)
+        .limit(1)
+      if (!existing || existing.length === 0)
+        break
+      counter++
+      newSlug = `${baseSlug}-${counter}`
+    }
+  }
+
+  try {
+    // 1. Update the old discussion: lock, unsticky, archive, rename
+    const { data: archivedData, error: archiveError } = await supabase
+      .from('discussions')
+      .update({
+        is_locked: true,
+        is_sticky: false,
+        is_archived: true,
+        title: archivedTitle,
+        slug: archivedSlug,
+      })
+      .eq('id', discussion.id)
+      .select()
+      .single()
+
+    if (archiveError) {
+      pushToast('Failed to archive the original discussion', { description: archiveError.message })
+      recreateLoading.value = false
+      return
+    }
+
+    // Invalidate the old slug key now that the slug has changed - the old URL
+    // should no longer serve a cache hit for the pre-rename data.
+    discussionCache.invalidate(discussion.id, discussion.slug)
+    // Warm the cache with the renamed archived record so /forum/YYYY-MM-DD-slug
+    // is a cache hit if someone navigates there.
+    discussionCache.set(archivedData)
+
+    // 2. Create the new discussion with the original title, description, content and topic
+    const { data: newData, error: createError } = await supabase
+      .from('discussions')
+      .insert({
+        title: oldTitle,
+        slug: newSlug,
+        description: discussion.description,
+        markdown: discussion.markdown,
+        discussion_topic_id: discussion.discussion_topic_id,
+        is_draft: false,
+        is_locked: false,
+        is_sticky: false,
+        is_archived: false,
+        is_nsfw: discussion.is_nsfw ?? false,
+      })
+      .select()
+      .single()
+
+    if (createError) {
+      pushToast('Failed to create the new discussion', { description: createError.message })
+      recreateLoading.value = false
+      return
+    }
+
+    // Warm the cache with the new discussion so the navigation below is an
+    // immediate cache hit rather than a fresh DB round-trip.
+    discussionCache.set(newData)
+
+    pushToast(`Re-created discussion "${oldTitle}"`)
+    emit('update', props.data)
+    recreateConfirm.value = false
+    recreateLoading.value = false
+
+    await navigateTo(`/forum/${newData.slug ?? newData.id}`)
+  }
+  catch {
+    recreateLoading.value = false
+  }
+}
+
 // Delete
 const deleteLoading = ref(false)
 const deleteConfirm = ref(false)
@@ -256,6 +398,22 @@ function handleDelete() {
       <DropdownItem @click="showEditModal = true">
         Edit
       </DropdownItem>
+      <!-- Re-create - discussions only, admin/mod only, blocked for entity-linked discussions -->
+      <template v-if="props.table === 'discussions' && (user?.role === 'admin' || user?.role === 'moderator')">
+        <template v-if="linkedDiscussionReason">
+          <Tooltip placement="left">
+            <template #tooltip>
+              <p>{{ linkedDiscussionReason }}</p>
+            </template>
+            <DropdownItem class="forum__item-actions-disabled" @click.stop.prevent>
+              Re-create
+            </DropdownItem>
+          </Tooltip>
+        </template>
+        <DropdownItem v-else @click="recreateConfirm = true; dropdownRef?.close()">
+          Re-create
+        </DropdownItem>
+      </template>
       <!-- Topic-only: create sub-topic and create discussion shortcuts -->
       <template v-if="props.table === 'discussion_topics'">
         <Divider :size="0" margin="8px 0" />
@@ -314,6 +472,17 @@ function handleDelete() {
       </Alert>
     </ConfirmModal>
 
+    <!-- Confirmation modal for re-create -->
+    <ConfirmModal
+      v-model:open="recreateConfirm"
+      :confirm-loading="recreateLoading"
+      destructive
+      confirm-text="Re-create"
+      title="Re-create discussion"
+      :description="recreateDescription"
+      @confirm="handleRecreate"
+    />
+
     <ConfirmModal
       v-model:open="deleteConfirm"
       :confirm-loading="deleteLoading"