From e444694dc09e030d5f717400818e21617617849d Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Sun, 19 Jul 2026 10:41:40 +0000
Subject: [PATCH 01/12] Adds settings for creating new cards at the top or
 bottom of stacks

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 lib/Service/ConfigService.php      | 21 ++++++++++++++++++++-
 src/components/DeckAppSettings.vue | 10 ++++++++++
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/lib/Service/ConfigService.php b/lib/Service/ConfigService.php
index b4afb8fc45..0b9dde777b 100644
--- a/lib/Service/ConfigService.php
+++ b/lib/Service/ConfigService.php
@@ -52,7 +52,8 @@ public function getAll(): array {
 		$data = [
 			'calendar' => $this->isCalendarEnabled(),
 			'cardDetailsInModal' => $this->isCardDetailsInModal(),
-			'cardIdBadge' => $this->isCardIdBadgeEnabled()
+			'cardIdBadge' => $this->isCardIdBadgeEnabled(),
+			'stackAddCardAtTop' => $this->isStackAddCardAtTopEnabled()
 		];
 		if ($this->groupManager->isAdmin($userId)) {
 			$data['groupLimit'] = $this->get('groupLimit');
@@ -90,6 +91,11 @@ public function get(string $key) {
 					return false;
 				}
 				return (bool)$this->config->getUserValue($this->getUserId(), Application::APP_ID, 'cardIdBadge', false);
+			case 'stackAddCardAtTop':
+				if ($this->getUserId() === null) {
+					return false;
+				}
+				return $this->isStackAddCardAtTopEnabled();
 		}
 		return false;
 	}
@@ -134,6 +140,15 @@ public function isCardIdBadgeEnabled(): bool {
 		return (bool)$this->config->getUserValue($userId, Application::APP_ID, 'cardIdBadge', $defaultState);
 	}
 
+	public function isStackAddCardAtTopEnabled(): bool {
+		$userId = $this->getUserId();
+		if ($userId === null) {
+			return false;
+		}
+
+		return (bool)$this->config->getUserValue($userId, Application::APP_ID, 'stackAddCardAtTop', true);
+	}
+
 	public function ensureFederationEnabled() {
 		if (!$this->get('federationEnabled')) {
 			throw new FederationDisabledException();
@@ -181,6 +196,10 @@ public function set($key, $value) {
 				$this->config->setUserValue($userId, Application::APP_ID, 'cardIdBadge', (string)$value);
 				$result = $value;
 				break;
+			case 'stackAddCardAtTop':
+				$this->config->setUserValue($userId, Application::APP_ID, 'stackAddCardAtTop', (string)$value);
+				$result = $value;
+				break;
 			case 'board':
 				// extra check that user only send one of the allowed board settings and not something random
 				$parts = explode(':', $key, 3);
diff --git a/src/components/DeckAppSettings.vue b/src/components/DeckAppSettings.vue
index 3935dbff5d..8045bcc2df 100644
--- a/src/components/DeckAppSettings.vue
+++ b/src/components/DeckAppSettings.vue
@@ -12,6 +12,8 @@
 			<NcFormBox>
 				<NcFormBoxSwitch v-model="cardDetailsInModal"
 					:label="t('deck', 'Use bigger card view')" />
+				<NcFormBoxSwitch v-model="stackAddCardAtTop"
+					:label="t('deck', 'Add new cards at the top of a list')" />
 			</NcFormBox>
 		</NcAppSettingsSection>
 
@@ -119,6 +121,14 @@ export default {
 				this.$store.dispatch('setConfig', { cardDetailsInModal: newValue })
 			},
 		},
+		stackAddCardAtTop: {
+			get() {
+				return this.$store.getters.config('stackAddCardAtTop') !== false
+			},
+			set(newValue) {
+				this.$store.dispatch('setConfig', { stackAddCardAtTop: newValue })
+			},
+		},
 		cardIdBadge: {
 			get() {
 				return this.$store.getters.config('cardIdBadge')

From e2b6939ecc406e64d3617f8d98ac7164b25b6d2d Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Sun, 19 Jul 2026 11:01:20 +0000
Subject: [PATCH 02/12] Add a button for adding cards to the top or bottom of a
 stack

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 src/components/board/Stack.vue | 91 ++++++++++++++++++++++++++++------
 1 file changed, 76 insertions(+), 15 deletions(-)

diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 0531548e68..2a4c9f315c 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -69,14 +69,6 @@
 					{{ t('deck', 'Delete list') }}
 				</NcActionButton>
 			</NcActions>
-			<NcActions v-if="canEdit && !showArchived && !isArchived">
-				<NcActionButton data-cy="action:add-card" @click.stop="showAddCard=true">
-					{{ t('deck', 'Add card') }}
-					<template #icon>
-						<CardPlusOutline :size="20" />
-					</template>
-				</NcActionButton>
-			</NcActions>
 		</div>
 
 		<NcModal v-if="modalArchivAllCardsShow" @close="modalArchivAllCardsShow=false">
@@ -101,6 +93,39 @@
 			</div>
 		</NcModal>
 
+		<transition name="slide-top" appear>
+			<div v-if="canAddCardAtTop" class="stack__card-add stack__card-add--top">
+				<NcButton v-if="!showAddCard"
+					data-cy="action:add-card"
+					class="stack__card-add-button"
+					type="tertiary"
+					:wide="true"
+					@click.stop="showAddCard=true">
+					{{ t('deck', '+ Add card') }}
+				</NcButton>
+				<form v-else
+					:class="{ 'icon-loading-small': stateCardCreating }"
+					@submit.prevent.stop="clickAddCard()">
+					<label for="new-stack-input-main" class="hidden-visually">{{ t('deck', 'Add a new card') }}</label>
+					<input id="new-stack-input-main"
+						ref="newCardInput"
+						v-model="newCardTitle"
+						type="text"
+						class="no-close"
+						:disabled="stateCardCreating"
+						:placeholder="t('deck', 'Card name')"
+						required
+						pattern=".*\S+.*"
+						@focus="onCreateCardFocus"
+						@keydown.esc="stopCardCreation">
+					<input v-show="!stateCardCreating"
+						class="icon-confirm"
+						type="submit"
+						value="">
+				</form>
+			</div>
+		</transition>
+
 		<Container :get-child-payload="payloadForCard(stack.id)"
 			class="dnd-container"
 			group-name="stack"
@@ -122,8 +147,17 @@
 		</Container>
 
 		<transition name="slide-bottom" appear>
-			<div v-if="showAddCard" class="stack__card-add">
-				<form :class="{ 'icon-loading-small': stateCardCreating }"
+			<div v-if="canAddCardAtBottom" class="stack__card-add stack__card-add--bottom">
+				<NcButton v-if="!showAddCard"
+					data-cy="action:add-card"
+					class="stack__card-add-button"
+					type="tertiary"
+					:wide="true"
+					@click.stop="showAddCard=true">
+					{{ t('deck', '+ Add card') }}
+				</NcButton>
+				<form v-else
+					:class="{ 'icon-loading-small': stateCardCreating }"
 					@submit.prevent.stop="clickAddCard()">
 					<label for="new-stack-input-main" class="hidden-visually">{{ t('deck', 'Add a new card') }}</label>
 					<input id="new-stack-input-main"
@@ -152,9 +186,8 @@ import ClickOutside from 'vue-click-outside'
 import { mapGetters, mapState } from 'vuex'
 import { Container, Draggable } from 'vue-smooth-dnd'
 import ArchiveIcon from 'vue-material-design-icons/ArchiveOutline.vue'
-import CardPlusOutline from 'vue-material-design-icons/CardPlusOutline.vue'
 import CheckCircleOutline from 'vue-material-design-icons/CheckCircleOutline.vue'
-import { NcActions, NcActionButton, NcModal } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcButton, NcModal } from '@nextcloud/vue'
 import { showError, showUndo } from '@nextcloud/dialogs'
 
 import CardItem from '../cards/CardItem.vue'
@@ -166,12 +199,12 @@ export default {
 	components: {
 		NcActions,
 		NcActionButton,
+		NcButton,
 		CardItem,
 		Container,
 		Draggable,
 		NcModal,
 		ArchiveIcon,
-		CardPlusOutline,
 		CheckCircleOutline,
 	},
 	directives: {
@@ -234,6 +267,15 @@ export default {
 				this.$store.dispatch('setConfig', { cardDetailsInModal: newValue })
 			},
 		},
+		stackAddCardAtTop() {
+			return this.$store.getters.config('stackAddCardAtTop') !== false
+		},
+		canAddCardAtTop() {
+			return this.canEdit && !this.showArchived && !this.isArchived && this.stackAddCardAtTop
+		},
+		canAddCardAtBottom() {
+			return this.canEdit && !this.showArchived && !this.isArchived && !this.stackAddCardAtTop
+		},
 	},
 	watch: {
 		showAddCard(newValue) {
@@ -325,18 +367,30 @@ export default {
 		async clickAddCard() {
 			this.stateCardCreating = true
 			try {
+				const addCardAtTop = this.stackAddCardAtTop
 				this.animate = true
 				const newCard = await this.$store.dispatch('addCard', {
 					title: this.newCardTitle,
 					stackId: this.stack.id,
 					boardId: this.stack.boardId,
+					order: addCardAtTop ? 0 : 999,
 				})
+				if (addCardAtTop) {
+					await this.$store.dispatch('reorderCard', {
+						...newCard,
+						stackId: this.stack.id,
+						order: 0,
+					})
+				}
 				this.newCardTitle = ''
 				this.showAddCard = true
 				this.$nextTick(() => {
 					this.$refs.newCardInput.focus()
 					this.animate = false
-					this.$refs.card[(this.$refs.card.length - 1)].scrollIntoView()
+					if (this.$refs.card && this.$refs.card.length > 0) {
+						const index = addCardAtTop ? 0 : this.$refs.card.length - 1
+						this.$refs.card[index].scrollIntoView()
+					}
 				})
 				if (!this.cardDetailsInModal) {
 					this.$router.push({ name: 'card', params: { cardId: newCard.id } })
@@ -512,10 +566,17 @@ export default {
 		flex-shrink: 0;
 		z-index: 100;
 		display: flex;
-		padding-bottom: $stack-gap;
 		background-color: var(--color-main-background);
 		position: relative;
 
+		&--top {
+			padding-top: $stack-gap;
+		}
+
+		&--bottom {
+			padding-bottom: $stack-gap;
+		}
+
 		// Smooth fade out of the cards at the top
 		&:before {
 			content: '';

From 8e6289010ccf813aca7f3c16310b8d4657c4ae4b Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Sun, 19 Jul 2026 11:12:22 +0000
Subject: [PATCH 03/12] Move 'Add card' button at bottom of stack right
 underneath last card but make it stick in visible area on overflow

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 src/components/board/Stack.vue | 77 ++++++++++++++++++++++++++++++++--
 1 file changed, 73 insertions(+), 4 deletions(-)

diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 2a4c9f315c..f954fcf82b 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -4,8 +4,12 @@
 -->
 
 <template>
-	<div class="stack" :class="{'stack--done-column': isDoneColumn}" :data-cy-stack="stack.title">
-		<div v-click-outside="stopCardCreation"
+	<div ref="stack"
+		class="stack"
+		:class="{'stack--done-column': isDoneColumn, 'stack--bottom-add-inline': bottomAddCardInline}"
+		:data-cy-stack="stack.title">
+		<div ref="header"
+			v-click-outside="stopCardCreation"
 			class="stack__header"
 			:class="{'stack__header--add': showAddCard, 'stack__header--done-column': isDoneColumn}"
 			:aria-label="stack.title">
@@ -126,7 +130,8 @@
 			</div>
 		</transition>
 
-		<Container :get-child-payload="payloadForCard(stack.id)"
+		<Container ref="cardsContainer"
+			:get-child-payload="payloadForCard(stack.id)"
 			class="dnd-container"
 			group-name="stack"
 			data-click-closes-sidebar="true"
@@ -147,7 +152,7 @@
 		</Container>
 
 		<transition name="slide-bottom" appear>
-			<div v-if="canAddCardAtBottom" class="stack__card-add stack__card-add--bottom">
+			<div v-if="canAddCardAtBottom" ref="bottomAddCard" class="stack__card-add stack__card-add--bottom">
 				<NcButton v-if="!showAddCard"
 					data-cy="action:add-card"
 					class="stack__card-add-button"
@@ -229,6 +234,8 @@ export default {
 			showAddCard: false,
 			stateCardCreating: false,
 			animate: false,
+			bottomAddCardInline: false,
+			bottomAddCardResizeObserver: null,
 			modalArchivAllCardsShow: false,
 			stackTransfer: {
 				total: 0,
@@ -278,6 +285,9 @@ export default {
 		},
 	},
 	watch: {
+		cardsByStack() {
+			this.$nextTick(this.updateBottomAddCardLayout)
+		},
 		showAddCard(newValue) {
 			if (!newValue) {
 				this.$store.dispatch('toggleShortcutLock', false)
@@ -286,11 +296,22 @@ export default {
 					this.$refs.newCardInput.focus()
 				})
 			}
+			this.$nextTick(this.updateBottomAddCardLayout)
+		},
+		canAddCardAtBottom() {
+			this.$nextTick(this.updateBottomAddCardLayout)
 		},
 	},
 
 	mounted() {
 		this.setupAutoscrollOnDrag()
+		this.setupBottomAddCardLayout()
+	},
+
+	beforeDestroy() {
+		if (this.bottomAddCardResizeObserver) {
+			this.bottomAddCardResizeObserver.disconnect()
+		}
 	},
 
 	methods: {
@@ -327,6 +348,46 @@ export default {
 				return this.cardsByStack[index]
 			}
 		},
+		getCardsContainerElement() {
+			return this.$refs.cardsContainer?.$el || this.$refs.cardsContainer
+		},
+		setupBottomAddCardLayout() {
+			this.$nextTick(() => {
+				this.updateBottomAddCardLayout()
+
+				if (typeof ResizeObserver === 'undefined') {
+					return
+				}
+
+				this.bottomAddCardResizeObserver = new ResizeObserver(() => {
+					this.updateBottomAddCardLayout()
+				})
+
+				const observedElements = [
+					this.$refs.stack,
+					this.getCardsContainerElement(),
+					this.$refs.bottomAddCard,
+				].filter(Boolean)
+
+				observedElements.forEach((element) => {
+					this.bottomAddCardResizeObserver.observe(element)
+				})
+			})
+		},
+		updateBottomAddCardLayout() {
+			const stackElement = this.$refs.stack
+			const headerElement = this.$refs.header
+			const cardsContainerElement = this.getCardsContainerElement()
+			const bottomAddCardElement = this.$refs.bottomAddCard
+
+			if (!this.canAddCardAtBottom || !stackElement || !headerElement || !cardsContainerElement || !bottomAddCardElement) {
+				this.bottomAddCardInline = false
+				return
+			}
+
+			const availableCardsHeight = stackElement.clientHeight - headerElement.offsetHeight - bottomAddCardElement.offsetHeight
+			this.bottomAddCardInline = cardsContainerElement.scrollHeight <= availableCardsHeight
+		},
 		toggleDoneColumn() {
 			this.$store.dispatch('setDoneStack', {
 				stackId: this.stack.id,
@@ -450,6 +511,12 @@ export default {
 			flex-grow: 1;
 		}
 
+		&.stack--bottom-add-inline {
+			.dnd-container {
+				flex-grow: 0;
+			}
+		}
+
 		&.stack--done-column {
 			.stack__header--done-column {
 				border-bottom: 2px solid var(--color-success);
@@ -575,6 +642,8 @@ export default {
 
 		&--bottom {
 			padding-bottom: $stack-gap;
+			position: sticky;
+			bottom: 0;
 		}
 
 		// Smooth fade out of the cards at the top

From 8912d67646953c0348df8e56557aa16a5bceecc9 Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Sun, 19 Jul 2026 11:18:06 +0000
Subject: [PATCH 04/12] Add fade-out gradient for overflowing stacks

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 src/components/board/Stack.vue | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index f954fcf82b..f9a2cb38a0 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -6,7 +6,11 @@
 <template>
 	<div ref="stack"
 		class="stack"
-		:class="{'stack--done-column': isDoneColumn, 'stack--bottom-add-inline': bottomAddCardInline}"
+		:class="{
+			'stack--done-column': isDoneColumn,
+			'stack--bottom-add-inline': bottomAddCardInline,
+			'stack--add-card-at-top': canAddCardAtTop,
+		}"
 		:data-cy-stack="stack.title">
 		<div ref="header"
 			v-click-outside="stopCardCreation"
@@ -517,6 +521,25 @@ export default {
 			}
 		}
 
+		&.stack--add-card-at-top {
+			.dnd-container {
+				-webkit-mask-image: linear-gradient(
+					180deg,
+					transparent 0,
+					black $stack-gap,
+					black calc(100% - #{$stack-gap}),
+					transparent 100%
+				);
+				mask-image: linear-gradient(
+					180deg,
+					transparent 0,
+					black $stack-gap,
+					black calc(100% - #{$stack-gap}),
+					transparent 100%
+				);
+			}
+		}
+
 		&.stack--done-column {
 			.stack__header--done-column {
 				border-bottom: 2px solid var(--color-success);

From ef6b136ead1716ded51cdc28e4030607817f0246 Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Sun, 19 Jul 2026 11:24:51 +0000
Subject: [PATCH 05/12] Use a different approach for the overflow gradient
 because CSS `mask-image` was cutting of dragged cards.

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 src/components/board/Stack.vue | 38 ++++++++++++++++++++--------------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index f9a2cb38a0..1068a33552 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -522,21 +522,16 @@ export default {
 		}
 
 		&.stack--add-card-at-top {
-			.dnd-container {
-				-webkit-mask-image: linear-gradient(
-					180deg,
-					transparent 0,
-					black $stack-gap,
-					black calc(100% - #{$stack-gap}),
-					transparent 100%
-				);
-				mask-image: linear-gradient(
-					180deg,
-					transparent 0,
-					black $stack-gap,
-					black calc(100% - #{$stack-gap}),
-					transparent 100%
-				);
+			&:after {
+				content: '';
+				display: block;
+				position: absolute;
+				width: 100%;
+				height: $stack-gap;
+				bottom: 0;
+				z-index: 99;
+				pointer-events: none;
+				background-image: linear-gradient(0deg, var(--color-main-background) 0%, transparent 100%);
 			}
 		}
 
@@ -661,6 +656,19 @@ export default {
 
 		&--top {
 			padding-top: $stack-gap;
+
+			&:after {
+				content: '';
+				display: block;
+				position: absolute;
+				width: 100%;
+				height: $stack-gap;
+				bottom: 0;
+				z-index: 99;
+				pointer-events: none;
+				background-image: linear-gradient(180deg, var(--color-main-background) 0%, transparent 100%);
+				transform: translateY(100%);
+			}
 		}
 
 		&--bottom {

From 60aa2d00e7939f0955dda40bb62c8e7a2ff1cc35 Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Sun, 19 Jul 2026 11:29:11 +0000
Subject: [PATCH 06/12] Forms to add a new card can be close by pressing enter
 key

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 src/components/board/Stack.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 1068a33552..099f516ee1 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -125,7 +125,7 @@
 						required
 						pattern=".*\S+.*"
 						@focus="onCreateCardFocus"
-						@keydown.esc="stopCardCreation">
+						@keydown.esc.stop="closeCardCreation">
 					<input v-show="!stateCardCreating"
 						class="icon-confirm"
 						type="submit"
@@ -179,7 +179,7 @@
 						required
 						pattern=".*\S+.*"
 						@focus="onCreateCardFocus"
-						@keydown.esc="stopCardCreation">
+						@keydown.esc.stop="closeCardCreation">
 					<input v-show="!stateCardCreating"
 						class="icon-confirm"
 						type="submit"
@@ -319,6 +319,10 @@ export default {
 	},
 
 	methods: {
+		closeCardCreation() {
+			this.showAddCard = false
+			return false
+		},
 		stopCardCreation(e) {
 			// For some reason the submit event triggers a MouseEvent that is bubbling to the outside
 			// so we have to ignore it

From 6e4152090203cd40d91046b9f57234e533780d92 Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Sun, 19 Jul 2026 13:37:22 +0000
Subject: [PATCH 07/12] Improve position of 'Add card' button for empty stacks
 when setting is set to 'add to bottom'

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 src/components/board/Stack.vue | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 43f9da64b9..2e69e75de3 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -9,6 +9,7 @@
 		:class="{
 			'stack--done-column': isDoneColumn,
 			'stack--bottom-add-inline': bottomAddCardInline,
+			'stack--bottom-add-empty': isEmptyBottomAddCardStack,
 			'stack--add-card-at-top': canAddCardAtTop,
 		}"
 		:data-cy-stack="stack.title">
@@ -289,6 +290,12 @@ export default {
 		canAddCardAtBottom() {
 			return this.canEdit && !this.showArchived && !this.isArchived && !this.stackAddCardAtTop
 		},
+		isEmptyStack() {
+			return this.cardsByStack.length === 0
+		},
+		isEmptyBottomAddCardStack() {
+			return this.canAddCardAtBottom && this.isEmptyStack
+		},
 	},
 	watch: {
 		cardsByStack() {
@@ -528,6 +535,21 @@ export default {
 			}
 		}
 
+		&.stack--bottom-add-empty {
+			.dnd-container {
+				order: 2;
+				flex-grow: 0;
+				padding-block: 0;
+			}
+
+			.stack__card-add--bottom {
+				order: 1;
+				padding-top: $stack-gap;
+				padding-bottom: 0;
+				position: relative;
+			}
+		}
+
 		&.stack--add-card-at-top {
 			&:after {
 				content: '';

From 89888310d4ed7a72cc3b01981e39182fc7c06c9b Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Sun, 19 Jul 2026 13:53:39 +0000
Subject: [PATCH 08/12] Keep the default setting adding cards to the bottom of
 a list

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 lib/Service/ConfigService.php      | 2 +-
 src/components/DeckAppSettings.vue | 2 +-
 src/components/board/Stack.vue     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/Service/ConfigService.php b/lib/Service/ConfigService.php
index 0b9dde777b..6cf4a20cdd 100644
--- a/lib/Service/ConfigService.php
+++ b/lib/Service/ConfigService.php
@@ -146,7 +146,7 @@ public function isStackAddCardAtTopEnabled(): bool {
 			return false;
 		}
 
-		return (bool)$this->config->getUserValue($userId, Application::APP_ID, 'stackAddCardAtTop', true);
+		return (bool)$this->config->getUserValue($userId, Application::APP_ID, 'stackAddCardAtTop', false);
 	}
 
 	public function ensureFederationEnabled() {
diff --git a/src/components/DeckAppSettings.vue b/src/components/DeckAppSettings.vue
index 8045bcc2df..4d095b3448 100644
--- a/src/components/DeckAppSettings.vue
+++ b/src/components/DeckAppSettings.vue
@@ -123,7 +123,7 @@ export default {
 		},
 		stackAddCardAtTop: {
 			get() {
-				return this.$store.getters.config('stackAddCardAtTop') !== false
+				return this.$store.getters.config('stackAddCardAtTop') === true
 			},
 			set(newValue) {
 				this.$store.dispatch('setConfig', { stackAddCardAtTop: newValue })
diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 2e69e75de3..a1ab65cf2c 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -282,7 +282,7 @@ export default {
 			},
 		},
 		stackAddCardAtTop() {
-			return this.$store.getters.config('stackAddCardAtTop') !== false
+			return this.$store.getters.config('stackAddCardAtTop') === true
 		},
 		canAddCardAtTop() {
 			return this.canEdit && !this.showArchived && !this.isArchived && this.stackAddCardAtTop

From 5a12a1a14e591f2895c4ba928d596418d9634792 Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Sun, 19 Jul 2026 15:57:39 +0000
Subject: [PATCH 09/12] Use a real + icon instead of using text for 'Add card'
 button

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 src/components/board/Stack.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index a1ab65cf2c..3a5851ce1e 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -110,7 +110,10 @@
 					type="tertiary"
 					:wide="true"
 					@click.stop="showAddCard=true">
-					{{ t('deck', '+ Add card') }}
+					<template #icon>
+						<PlusIcon :size="20" />
+					</template>
+					{{ t('deck', 'Add card') }}
 				</NcButton>
 				<form v-else
 					:class="{ 'icon-loading-small': stateCardCreating }"
@@ -164,7 +167,10 @@
 					type="tertiary"
 					:wide="true"
 					@click.stop="showAddCard=true">
-					{{ t('deck', '+ Add card') }}
+					<template #icon>
+						<PlusIcon :size="20" />
+					</template>
+					{{ t('deck', 'Add card') }}
 				</NcButton>
 				<form v-else
 					:class="{ 'icon-loading-small': stateCardCreating }"
@@ -197,6 +203,7 @@ import { mapGetters, mapState } from 'vuex'
 import { Container, Draggable } from 'vue-smooth-dnd'
 import ArchiveIcon from 'vue-material-design-icons/ArchiveOutline.vue'
 import CheckCircleOutline from 'vue-material-design-icons/CheckCircleOutline.vue'
+import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import { NcActions, NcActionButton, NcButton, NcModal } from '@nextcloud/vue'
 import { showError, showUndo } from '@nextcloud/dialogs'
 
@@ -218,6 +225,7 @@ export default {
 		NcModal,
 		ArchiveIcon,
 		CheckCircleOutline,
+		PlusIcon,
 	},
 	directives: {
 		ClickOutside,

From 57442260d553b98f8ec8733913d446b42a2ff7b7 Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Sun, 19 Jul 2026 17:13:46 +0000
Subject: [PATCH 10/12] Removed duplicated user account check and improved
 method naming

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 lib/Service/ConfigService.php  | 3 ---
 src/components/board/Stack.vue | 4 ++--
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/lib/Service/ConfigService.php b/lib/Service/ConfigService.php
index 6cf4a20cdd..7378b09f41 100644
--- a/lib/Service/ConfigService.php
+++ b/lib/Service/ConfigService.php
@@ -92,9 +92,6 @@ public function get(string $key) {
 				}
 				return (bool)$this->config->getUserValue($this->getUserId(), Application::APP_ID, 'cardIdBadge', false);
 			case 'stackAddCardAtTop':
-				if ($this->getUserId() === null) {
-					return false;
-				}
 				return $this->isStackAddCardAtTopEnabled();
 		}
 		return false;
diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 3a5851ce1e..6b567f2515 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -9,7 +9,7 @@
 		:class="{
 			'stack--done-column': isDoneColumn,
 			'stack--bottom-add-inline': bottomAddCardInline,
-			'stack--bottom-add-empty': isEmptyBottomAddCardStack,
+			'stack--bottom-add-empty': isEmptyStackWithBottomAddCard,
 			'stack--add-card-at-top': canAddCardAtTop,
 		}"
 		:data-cy-stack="stack.title">
@@ -301,7 +301,7 @@ export default {
 		isEmptyStack() {
 			return this.cardsByStack.length === 0
 		},
-		isEmptyBottomAddCardStack() {
+		isEmptyStackWithBottomAddCard() {
 			return this.canAddCardAtBottom && this.isEmptyStack
 		},
 	},

From 050a23d16ea4ae87a850ef14fbd338d5b381367a Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Mon, 20 Jul 2026 07:02:11 +0000
Subject: [PATCH 11/12] Fix cypress tests

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 cypress/e2e/cardColor.js       |  2 +-
 cypress/e2e/cardFeatures.js    | 12 ++++++------
 cypress/e2e/sharingFeatures.js |  6 +++---
 src/components/Controls.vue    |  2 +-
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/cypress/e2e/cardColor.js b/cypress/e2e/cardColor.js
index 569e43ff19..6c053bbdb1 100644
--- a/cypress/e2e/cardColor.js
+++ b/cypress/e2e/cardColor.js
@@ -46,7 +46,7 @@ describe('Card color', function () {
 
 		const newCardTitle = 'Card with color'
 
-		cy.get('.button-vue[aria-label*="Add card"]')
+		cy.get('[data-cy="action:add-card"]')
 			.first().click()
 		cy.get('.stack__card-add form input#new-stack-input-main')
 			.type(newCardTitle)
diff --git a/cypress/e2e/cardFeatures.js b/cypress/e2e/cardFeatures.js
index a62e5bedc3..d559ac02bf 100644
--- a/cypress/e2e/cardFeatures.js
+++ b/cypress/e2e/cardFeatures.js
@@ -52,7 +52,7 @@ describe('Card', function () {
 		cy.get('.board .stack').eq(0).within(() => {
 			cy.get('.card:contains("Hello world")').should('be.visible')
 
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.first().click()
 
 			cy.get('.stack__card-add form input#new-stack-input-main')
@@ -69,7 +69,7 @@ describe('Card', function () {
 		cy.intercept({ method: 'POST', url: '**/ocs/v2.php/apps/deck/api/v1.0/cards' }).as('save')
 		cy.intercept({ method: 'GET', url: '**/apps/deck/boards/*' }).as('getBoard')
 
-		cy.get('.button-vue[aria-label*="Add card"]')
+		cy.get('[data-cy="action:add-card"]')
 			.first().click()
 
 		// Somehow this avoids the electron crash
@@ -98,7 +98,7 @@ describe('Card', function () {
 		cy.visit(`/apps/deck/#/board/${boardId}`)
 		const absoluteUrl = `https://example.com`
 		cy.get('.board .stack').eq(0).within(() => {
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.first().click()
 
 			cy.get('.stack__card-add form input#new-stack-input-main')
@@ -120,7 +120,7 @@ describe('Card', function () {
 		const absoluteUrl = `https://example.com`
 		const plainTitle = 'New title'
 		cy.get('.board .stack').eq(0).within(() => {
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.first().click()
 
 			cy.get('.stack__card-add form input#new-stack-input-main')
@@ -260,7 +260,7 @@ describe('Card', function () {
 		it('Set a due date', function () {
 			const newCardTitle = 'Card with a due date'
 
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.first().click()
 			cy.get('.stack__card-add form input#new-stack-input-main')
 				.type(newCardTitle)
@@ -296,7 +296,7 @@ describe('Card', function () {
 		it('Add a label', function () {
 			const newCardTitle = 'Card with labels'
 
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.first().click()
 			cy.get('.stack__card-add form input#new-stack-input-main')
 				.type(newCardTitle)
diff --git a/cypress/e2e/sharingFeatures.js b/cypress/e2e/sharingFeatures.js
index abe1ed3f8f..d90844c677 100644
--- a/cypress/e2e/sharingFeatures.js
+++ b/cypress/e2e/sharingFeatures.js
@@ -32,7 +32,7 @@ describe('Board', function() {
 			cy.login(recipient)
 			cy.visit(`/apps/deck/#/board/${boardId}`)
 			cy.get('.board-title').contains(board.title)
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.should('not.exist')
 		})
 	})
@@ -50,7 +50,7 @@ describe('Board', function() {
 			cy.login(recipient)
 			cy.visit(`/apps/deck/#/board/${boardId}`)
 			cy.get('.board-title').contains(board.title)
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.should('not.exist')
 		})
 	})
@@ -71,7 +71,7 @@ describe('Board', function() {
 			cy.login(recipient)
 			cy.visit(`/apps/deck/#/board/${boardId}`)
 			cy.get('.board-title').contains(board.title)
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.first().click()
 		})
 	})
diff --git a/src/components/Controls.vue b/src/components/Controls.vue
index c84b126a0e..5001ab9f99 100644
--- a/src/components/Controls.vue
+++ b/src/components/Controls.vue
@@ -14,7 +14,7 @@
 				{{ overviewName }}
 			</h2>
 			<NcActions>
-				<NcActionButton icon="icon-add" @click="clickShowAddCardModel">
+				<NcActionButton data-cy="action:add-card" icon="icon-add" @click="clickShowAddCardModel">
 					{{ t('deck', 'Add card') }}
 				</NcActionButton>
 			</NcActions>

From bcaea9dc312e692696687b64c8efc6a1ceb2e4b2 Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Mon, 20 Jul 2026 09:09:36 +0000
Subject: [PATCH 12/12] Fix a cypress test

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 cypress/e2e/cardFeatures.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/cypress/e2e/cardFeatures.js b/cypress/e2e/cardFeatures.js
index d559ac02bf..82d72a7aaa 100644
--- a/cypress/e2e/cardFeatures.js
+++ b/cypress/e2e/cardFeatures.js
@@ -303,6 +303,13 @@ describe('Card', function () {
 			cy.get('.stack__card-add form input[type=submit]')
 				.first().click()
 			cy.get(`.card:contains("${newCardTitle}")`).should('be.visible').click()
+			cy.get('body').then(($body) => {
+				const addCardInput = $body.find('.stack__card-add form input#new-stack-input-main')
+				if (addCardInput.length) {
+					cy.wrap(addCardInput.first()).type('{esc}')
+				}
+			})
+			cy.get('.stack__card-add form').should('not.exist')
 
 			// Add delay to ensure the events are bound
 			cy.wait(1000)
@@ -316,8 +323,10 @@ describe('Card', function () {
 			cy.get('.vs__selected .tag:contains("Action needed")')
 				.parent().find('button').click()
 
-			cy.get(`.card:contains("${newCardTitle}")`).find('.labels li:contains("Later")')
-				.should('be.visible')
+			cy.get(`.card:contains("${newCardTitle}")`)
+				.scrollIntoView({ block: 'center' })
+				.find('.labels li:contains("Later")')
+				.should('exist')
 			cy.get(`.card:contains("${newCardTitle}")`).find('.labels li:contains("Action needed")')
 				.should('not.exist')
 		})