From fd5eb9824e7bda819c2c6c219b6699ebb2f51ad1 Mon Sep 17 00:00:00 2001
From: Patrick Mulligan <patjmulligan@protonmail.com>
Date: Thu, 26 Mar 2026 12:54:39 -0400
Subject: [PATCH] Restore multi-action FAB on Home page

The simplified Home.vue lost the useQuickActions system, which meant
module quick actions (expenses, submit link) were no longer accessible.
Restore the expandable FAB that shows all registered module actions.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/pages/Home.vue | 80 +++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 69 insertions(+), 11 deletions(-)

diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 826a182..1fada7b 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -11,6 +11,19 @@
 
     <!-- Main Feed Area -->
     <div class="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent">
+      <!-- Quick Action Component Area -->
+      <div v-if="activeAction" class="border-b bg-background sticky top-0 z-10">
+        <div class="max-h-[70vh] overflow-y-auto scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent">
+          <div class="px-4 py-3 sm:px-6">
+            <component
+              :is="activeAction.component"
+              @action-complete="onActionComplete"
+              @close="closeQuickAction"
+            />
+          </div>
+        </div>
+      </div>
+
       <div class="max-w-4xl mx-auto px-4 sm:px-6">
         <SubmissionList
           :show-ranks="false"
@@ -21,34 +34,79 @@
       </div>
     </div>
 
-    <!-- Floating Action Button for Create Post -->
-    <div class="fixed bottom-6 right-6 z-50">
-      <Button
-        @click="navigateToSubmit"
-        size="lg"
-        class="h-14 w-14 rounded-full shadow-lg hover:shadow-xl transition-all bg-primary hover:bg-primary/90 border-2 border-primary-foreground/20 flex items-center justify-center p-0"
-      >
-        <Plus class="h-6 w-6 stroke-[2.5]" />
-      </Button>
+    <!-- Floating Quick Action Button -->
+    <div v-if="!activeAction && quickActions.length > 0" class="fixed bottom-6 right-6 z-50">
+      <div class="flex flex-col items-end gap-3">
+        <!-- Quick Action Buttons (when expanded) -->
+        <div v-if="showQuickActions" class="flex flex-col gap-2">
+          <Button
+            v-for="action in quickActions"
+            :key="action.id"
+            @click="openQuickAction(action)"
+            size="lg"
+            class="h-12 px-4 rounded-full shadow-lg hover:shadow-xl transition-all gap-2 bg-card border-2 border-border hover:bg-accent text-card-foreground"
+          >
+            <component :is="getIconComponent(action.icon)" class="h-4 w-4" />
+            <span class="text-sm font-medium">{{ action.label }}</span>
+          </Button>
+        </div>
+
+        <!-- Main FAB -->
+        <Button
+          @click="toggleQuickActions"
+          size="lg"
+          class="h-14 w-14 rounded-full shadow-lg hover:shadow-xl transition-all bg-primary hover:bg-primary/90 border-2 border-primary-foreground/20 flex items-center justify-center p-0"
+        >
+          <Plus
+            class="h-6 w-6 stroke-[2.5] transition-transform duration-200"
+            :class="{ 'rotate-45': showQuickActions }"
+          />
+        </Button>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { Button } from '@/components/ui/button'
 import { Plus } from 'lucide-vue-next'
+import * as LucideIcons from 'lucide-vue-next'
 import PWAInstallPrompt from '@/components/pwa/PWAInstallPrompt.vue'
 import SubmissionList from '@/modules/links/components/SubmissionList.vue'
+import { useQuickActions } from '@/composables/useQuickActions'
 import type { SubmissionWithMeta } from '@/modules/links/types/submission'
+import type { QuickAction } from '@/core/types'
 
 const router = useRouter()
+const { quickActions } = useQuickActions()
+
+const showQuickActions = ref(false)
+const activeAction = ref<QuickAction | null>(null)
 
 function onSubmissionClick(submission: SubmissionWithMeta) {
   router.push({ name: 'submission-detail', params: { id: submission.id } })
 }
 
-function navigateToSubmit() {
-  router.push({ name: 'submit-post' })
+function toggleQuickActions() {
+  showQuickActions.value = !showQuickActions.value
+}
+
+function openQuickAction(action: QuickAction) {
+  activeAction.value = action
+  showQuickActions.value = false
+}
+
+function closeQuickAction() {
+  activeAction.value = null
+}
+
+function onActionComplete() {
+  activeAction.value = null
+}
+
+function getIconComponent(iconName: string) {
+  return (LucideIcons as any)[iconName] || Plus
 }
 </script>