From 9072ca84d57843db230ba13f9daacc04eb4d7ea3 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 3 Mar 2026 00:03:19 +0100
Subject: [PATCH] feat(frontend): route quick-add mode to QuickAddOverlay in
 App.vue

---
 frontend/src/App.vue           | 52 +++++++++++++++++++++++-----------
 frontend/src/i18n/lang/en.json |  1 +
 2 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index c1b3c7c7f..47ad77d43 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,24 +1,34 @@
 <template>
 	<Ready>
-		<template v-if="showAuthLayout">
-			<AppHeader />
-			<ContentAuth />
+		<template v-if="isQuickAddMode && authStore.authUser">
+			<QuickAddOverlay />
 		</template>
-		<ContentLinkShare v-else-if="authStore.authLinkShare" />
-		<NoAuthWrapper
-			v-else
-			show-api-config
-		>
-			<RouterView />
-		</NoAuthWrapper>
-		
-		<KeyboardShortcuts v-if="keyboardShortcutsActive" />
-		
+		<template v-else-if="isQuickAddMode">
+			<div class="quick-add-not-logged-in">
+				<p>{{ $t('quickActions.notLoggedIn') }}</p>
+			</div>
+		</template>
+		<template v-else>
+			<template v-if="showAuthLayout">
+				<AppHeader />
+				<ContentAuth />
+			</template>
+			<ContentLinkShare v-else-if="authStore.authLinkShare" />
+			<NoAuthWrapper
+				v-else
+				show-api-config
+			>
+				<RouterView />
+			</NoAuthWrapper>
+		</template>
+
+		<KeyboardShortcuts v-if="keyboardShortcutsActive && !isQuickAddMode" />
+
 		<Teleport to="body">
-			<AddToHomeScreen />
-			<UpdateNotification />
+			<AddToHomeScreen v-if="!isQuickAddMode" />
+			<UpdateNotification v-if="!isQuickAddMode" />
 			<Notification />
-			<DemoMode />
+			<DemoMode v-if="!isQuickAddMode" />
 		</Teleport>
 	</Ready>
 </template>
@@ -46,9 +56,11 @@ import {useBaseStore} from '@/stores/base'
 
 import {useColorScheme} from '@/composables/useColorScheme'
 import {useBodyClass} from '@/composables/useBodyClass'
+import QuickAddOverlay from '@/components/quick-actions/QuickAddOverlay.vue'
 import AddToHomeScreen from '@/components/home/AddToHomeScreen.vue'
 import DemoMode from '@/components/home/DemoMode.vue'
 import {AUTH_ROUTE_NAMES} from '@/constants/authRouteNames'
+import {useQuickAddMode} from '@/composables/useQuickAddMode'
 
 const importAccountDeleteService = () => import('@/services/accountDelete')
 import {success} from '@/message'
@@ -56,6 +68,14 @@ import {success} from '@/message'
 const authStore = useAuthStore()
 const baseStore = useBaseStore()
 
+const {isQuickAddMode} = useQuickAddMode()
+
+// Make the Electron frameless window transparent
+if (isQuickAddMode) {
+	document.documentElement.style.background = 'transparent'
+	document.body.style.background = 'transparent'
+}
+
 const route = useRoute()
 
 const showAuthLayout = computed(() => authStore.authUser && typeof route.name === 'string' && !AUTH_ROUTE_NAMES.has(route.name))
diff --git a/frontend/src/i18n/lang/en.json b/frontend/src/i18n/lang/en.json
index 4e7459760..bc98cfd2a 100644
--- a/frontend/src/i18n/lang/en.json
+++ b/frontend/src/i18n/lang/en.json
@@ -1243,6 +1243,7 @@
     "markAllReadSuccess": "Successfully marked all notifications as read."
   },
   "quickActions": {
+    "notLoggedIn": "Please log in to the main Vikunja window first.",
     "commands": "Commands",
     "placeholder": "Type a command or search…",
     "hint": "You can use {project} to limit the search to a project. Combine {project} or {label} (labels) with a search query to search for a task with these labels or on that project. Use {assignee} to only search for teams.",