aiolabs/webapp
2
0
Fork 0
Code Issues 15 Pull requests Projects Releases Packages Wiki Activity Actions

Restore multi-action FAB on Home page

Browse source 
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>
This commit is contained in:
Patrick Mulligan 2026-03-26 12:54:39 -04:00
parent 8176ea9c69
commit fd5eb9824e
1 changed files with 69 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

70
src/pages/Home.vue
View file

@ -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">
<!-- 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
@click="navigateToSubmit"
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]" />
<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>