From 03c712c9655a080f10e4e09159d65d6f9c293374 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Sat, 31 Aug 2024 11:42:57 +0200
Subject: [PATCH 01/14] fix: Properly scroll on mobile devices
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/board/Board.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
index 7d77e6bb1..bdb772f93 100644
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<div class="board-wrapper" :tabindex="-1">
+	<div class="board-wrapper" :tabindex="-1" @touchend="fixActionRestriction">
 		<Controls :board="board" />
 
 		<transition name="fade" mode="out-in">
@@ -217,6 +217,13 @@ export default {
 			window.removeEventListener('mouseup', this.stopMouseDrag)
 			window.removeEventListener('mouseleave', this.stopMouseDrag)
 		},
+
+		fixActionRestriction() {
+			document.body.classList.remove(
+				'smooth-dnd-no-user-select',
+				'smooth-dnd-disable-touch-action',
+			)
+		},
 	},
 }
 </script>

From 80c428e1147fff867940ceba0f894153eece4482 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Sat, 31 Aug 2024 11:43:39 +0200
Subject: [PATCH 02/14] fix: Avoid swipe navigation while scrolling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index a6274e76b..dfddc314e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@
 <template>
 	<NcContent app-name="deck" :class="{ 'nav-hidden': !navShown, 'sidebar-hidden': !sidebarRouterView }">
 		<AppNavigation />
-		<NcAppContent>
+		<NcAppContent :allow-swipe-navigation="false">
 			<router-view />
 		</NcAppContent>
 

From 95117be03a4a5ee2338dd9efb2fac4b6cdb0128c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Sat, 31 Aug 2024 11:44:22 +0200
Subject: [PATCH 03/14] fix: Proper slots for card selector dialog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/CardSelector.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/CardSelector.vue b/src/CardSelector.vue
index ae7e4fab1..7547771ed 100644
--- a/src/CardSelector.vue
+++ b/src/CardSelector.vue
@@ -13,16 +13,16 @@
 				:disabled="loading"
 				label="title"
 				@option:selected="fetchCardsFromBoard">
-				<template slot="singleLabel" slot-scope="props">
+				<template #selected-option="props">
 					<span>
-						<span :style="{ 'backgroundColor': '#' + props.option.color }" class="board-bullet" />
-						<span>{{ props.option.title }}</span>
+						<span :style="{ 'backgroundColor': '#' + props.color }" class="board-bullet" />
+						<span>{{ props.title }}</span>
 					</span>
 				</template>
-				<template slot="option" slot-scope="props">
+				<template #option="props">
 					<span>
-						<span :style="{ 'backgroundColor': '#' + props.option.color }" class="board-bullet" />
-						<span>{{ props.option.title }}</span>
+						<span :style="{ 'backgroundColor': '#' + props.color }" class="board-bullet" />
+						<span>{{ props.title }}</span>
 					</span>
 				</template>
 			</NcSelect>

From 9227f9e9a1423ff8c0200e9219e66aa2a37a2999 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Sat, 31 Aug 2024 11:45:33 +0200
Subject: [PATCH 04/14] fix: Adapt spacing to new compact design
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/Controls.vue          |  2 +-
 src/components/board/Board.vue       |  4 +++-
 src/components/cards/CardCover.vue   | 10 +++++-----
 src/components/cards/CardItem.vue    |  9 ++++-----
 src/components/overview/Overview.vue |  2 ++
 5 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/components/Controls.vue b/src/components/Controls.vue
index bcb51d265..e9b81a921 100644
--- a/src/components/Controls.vue
+++ b/src/components/Controls.vue
@@ -544,7 +544,7 @@ export default {
 	.filter--item {
 		input + label {
 			display: block;
-			padding: 6px 0;
+			padding: var(--default-grid-baseline) 0;
 			.avatardiv {
 				vertical-align: middle;
 				margin-bottom: 2px;
diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
index bdb772f93..3bf47d68f 100644
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -285,7 +285,9 @@ export default {
 					flex-grow: 1;
 					display: flex;
 					flex-direction: column;
-					padding: $stack-spacing;
+					// Margin left instead of padidng to avoid jumps on dropping a card
+					margin-left: $stack-spacing;
+					padding-right: $stack-spacing;
 					overflow-x: hidden;
 					overflow-y: auto;
 					padding-top: 15px;
diff --git a/src/components/cards/CardCover.vue b/src/components/cards/CardCover.vue
index 6819f2c59..ca46ed3cf 100644
--- a/src/components/cards/CardCover.vue
+++ b/src/components/cards/CardCover.vue
@@ -68,9 +68,9 @@ export default {
 .card-cover {
 	height: 100px;
 	display: flex;
-	margin-top: -8px;
-	margin-left: -8px;
-	margin-right: -8px;
+	margin-top: -6px;
+	margin-left: -6px;
+	margin-right: -6px;
 
 	.image-wrapper {
 		flex: 1;
@@ -79,10 +79,10 @@ export default {
 		background-repeat: no-repeat;
 		background-position: center center;
 		&.rounded-left {
-			border-top-left-radius: 10px;
+			border-top-left-radius: var(--border-radius-large);
 		}
 		&.rounded-right {
-			border-top-right-radius: 10px;
+			border-top-right-radius: var(--border-radius-large);
 		}
 	}
 }
diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index 3ac4482f7..581fce77e 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -290,11 +290,10 @@ export default {
 		background-color: var(--color-main-background);
 		margin-bottom: $card-spacing;
 		padding: var(--default-grid-baseline) $card-padding;
-		border: 2px solid var(--color-border);
+		border: 2px solid var(--color-border-dark);
 		width: 100%;
 		display: flex;
 		flex-direction: column;
-		gap: var(--default-grid-baseline);
 
 		&:deep(*) {
 			cursor: pointer;
@@ -317,7 +316,7 @@ export default {
 			h4 {
 				font-weight: normal;
 				margin: 0;
-				padding: 6px;
+				padding: var(--default-grid-baseline);
 				flex-grow: 1;
 				font-size: 100%;
 				overflow: hidden;
@@ -363,7 +362,8 @@ export default {
 		.card-labels {
 			display: flex;
 			align-items: end;
-			margin-bottom: var(--default-grid-baseline);
+			padding-left: var(--default-grid-baseline);
+			padding-top: var(--default-grid-baseline);
 
 			.labels {
 				flex-wrap: wrap;
@@ -403,7 +403,6 @@ export default {
 			display: flex;
 			height: 32px;
 			width: 32px;
-			margin-top: 6px;
 		}
 		&.has-labels {
 			padding-bottom: $card-padding;
diff --git a/src/components/overview/Overview.vue b/src/components/overview/Overview.vue
index 515c753e0..0b8269e20 100644
--- a/src/components/overview/Overview.vue
+++ b/src/components/overview/Overview.vue
@@ -168,11 +168,13 @@ export default {
 	.dashboard-column {
 		display: flex;
 		flex-direction: column;
+		min-width: $stack-width;
 		width: $stack-width;
 		margin-left: $stack-spacing;
 		margin-right: $stack-spacing;
 
 		h3 {
+			font-size: var(--default-font-size);
 			margin: -6px;
 			margin-bottom: 12px;
 			padding: 6px 13px;

From c0084a6b5bba1433f7209c2ab66bc6197379b99b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Sat, 31 Aug 2024 11:45:51 +0200
Subject: [PATCH 05/14] fix: Fix styling of navigation input fields
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 cypress/e2e/boardFeatures.js                  |  2 +-
 .../navigation/AppNavigationAddBoard.vue      | 52 ++++++++++++++-----
 .../navigation/AppNavigationBoard.vue         | 48 ++++++++++++-----
 3 files changed, 74 insertions(+), 28 deletions(-)

diff --git a/cypress/e2e/boardFeatures.js b/cypress/e2e/boardFeatures.js
index e4d675a98..1e3bf752e 100644
--- a/cypress/e2e/boardFeatures.js
+++ b/cypress/e2e/boardFeatures.js
@@ -35,7 +35,7 @@ describe('Board', function() {
 			.type(board, { force: true })
 
 		// Submit
-		cy.get('.board-create form input[type=submit]')
+		cy.get('.board-create form button[type=submit]')
 			.first().click({ force: true })
 
 		cy.wait('@createBoardRequest').its('response.statusCode').should('equal', 200)
diff --git a/src/components/navigation/AppNavigationAddBoard.vue b/src/components/navigation/AppNavigationAddBoard.vue
index fb250eb9e..5ef11fb83 100644
--- a/src/components/navigation/AppNavigationAddBoard.vue
+++ b/src/components/navigation/AppNavigationAddBoard.vue
@@ -8,19 +8,41 @@
 		icon="icon-add"
 		@click.prevent.stop="startCreateBoard" />
 	<div v-else class="board-create">
-		<NcColorPicker v-model="color" class="app-navigation-entry-bullet-wrapper">
+		<NcColorPicker v-model="color" class="app-navigation-entry-bullet-wrapper" :disabled="loading">
 			<div :style="{ backgroundColor: color }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
 		</NcColorPicker>
 		<form @submit.prevent.stop="createBoard">
-			<input :placeholder="t('deck', 'Board name')" type="text" required>
-			<input type="submit" value="" class="icon-confirm">
-			<NcActions><NcActionButton icon="icon-close" @click.stop.prevent="cancelEdit" /></NcActions>
+			<NcTextField ref="inputField"
+				:disable="loading"
+				:value.sync="value"
+				:placeholder="t('deck', 'Board name')"
+				type="text"
+				required />
+			<NcButton type="tertiary"
+				:disabled="loading"
+				:title="t('deck', 'Cancel edit')"
+				@click.stop.prevent="cancelEdit">
+				<template #icon>
+					<CloseIcon :size="20" />
+				</template>
+			</NcButton>
+			<NcButton type="tertiary"
+				native-type="submit"
+				:disabled="loading"
+				:title="t('deck', 'Save board')">
+				<template #icon>
+					<CheckIcon v-if="!loading" :size="20" />
+					<NcLoadingIcon v-else :size="20" />
+				</template>
+			</NcButton>
 		</form>
 	</div>
 </template>
 
 <script>
-import { NcColorPicker, NcActionButton, NcActions, NcAppNavigationItem } from '@nextcloud/vue'
+import { NcButton, NcColorPicker, NcAppNavigationItem, NcLoadingIcon, NcTextField } from '@nextcloud/vue'
+import CheckIcon from 'vue-material-design-icons/Check.vue'
+import CloseIcon from 'vue-material-design-icons/Close.vue'
 
 /**
  *
@@ -35,30 +57,33 @@ function randomColor() {
 
 export default {
 	name: 'AppNavigationAddBoard',
-	components: { NcColorPicker, NcAppNavigationItem, NcActionButton, NcActions },
+	components: { NcButton, NcColorPicker, NcAppNavigationItem, NcLoadingIcon, NcTextField, CheckIcon, CloseIcon },
 	directives: {},
 	props: {},
 	data() {
 		return {
+			value: '',
 			classes: [],
 			editing: false,
 			loading: false,
 			color: randomColor(),
 		}
 	},
-	computed: {},
-	watch: {},
-	mounted() {},
+	mounted() {
+		this.$refs.inputField.focus()
+	},
 	methods: {
 		startCreateBoard(e) {
 			this.editing = true
 		},
 		async createBoard(e) {
-			const title = e.currentTarget.childNodes[0].value
+			this.loading = true
+			const title = this.value.trim()
 			await this.$store.dispatch('createBoard', {
 				title,
 				color: this.color.substring(1),
 			})
+			this.loading = false
 			this.editing = false
 			this.color = randomColor()
 		},
@@ -89,10 +114,9 @@ export default {
 		width: var(--default-clickable-area);
 		height: var(--default-clickable-area);
 		.color0 {
-			width: 30px !important;
-			margin: 5px;
-			margin-left: 7px;
-			height: 30px;
+			width: 24px !important;
+			margin: var(--default-grid-baseline);
+			height: 24px;
 			border-radius: 50%;
 			background-size: 14px;
 		}
diff --git a/src/components/navigation/AppNavigationBoard.vue b/src/components/navigation/AppNavigationBoard.vue
index addb71bac..642934521 100644
--- a/src/components/navigation/AppNavigationBoard.vue
+++ b/src/components/navigation/AppNavigationBoard.vue
@@ -114,23 +114,43 @@
 			<div :style="{ backgroundColor: getColor }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
 		</NcColorPicker>
 		<form @submit.prevent.stop="applyEdit">
-			<input v-model="editTitle"
-				v-focus
-				dir="auto"
+			<NcTextField ref="inputField"
+				:disable="loading"
+				:value.sync="editTitle"
+				:placeholder="t('deck', 'Board name')"
 				type="text"
-				required>
-			<input type="submit" value="" class="icon-confirm">
-			<NcActions><NcActionButton icon="icon-close" @click.stop.prevent="cancelEdit" /></NcActions>
+				required />
+			<NcButton type="tertiary"
+				:disabled="loading"
+				native-type="submit"
+				:title="t('deck', 'Cancel edit')"
+				@click.stop.prevent="cancelEdit">
+				<template #icon>
+					<CloseIcon :size="20" />
+				</template>
+			</NcButton>
+			<NcButton type="tertiary"
+				native-type="submit"
+				:disabled="loading"
+				:title="t('deck', 'Save board')">
+				<template #icon>
+					<CheckIcon v-if="!loading" :size="20" />
+					<NcLoadingIcon v-else :size="20" />
+				</template>
+			</NcButton>
 		</form>
 	</div>
 </template>
 
 <script>
-import { NcAppNavigationIconBullet, NcAppNavigationItem, NcColorPicker, NcActions, NcActionButton } from '@nextcloud/vue'
+import { NcAppNavigationIconBullet, NcAppNavigationItem, NcColorPicker, NcButton, NcTextField, NcActionButton } from '@nextcloud/vue'
 import ClickOutside from 'vue-click-outside'
 import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
 import CloneIcon from 'vue-material-design-icons/ContentDuplicate.vue'
 import AccountIcon from 'vue-material-design-icons/Account.vue'
+import CloseIcon from 'vue-material-design-icons/Close.vue'
+import CheckIcon from 'vue-material-design-icons/Check.vue'
+
 import { loadState } from '@nextcloud/initial-state'
 
 const canCreateState = loadState('deck', 'canCreate')
@@ -141,11 +161,14 @@ export default {
 		NcAppNavigationIconBullet,
 		NcAppNavigationItem,
 		NcColorPicker,
-		NcActions,
+		NcButton,
+		NcTextField,
 		NcActionButton,
 		AccountIcon,
 		ArchiveIcon,
 		CloneIcon,
+		CloseIcon,
+		CheckIcon,
 	},
 	directives: {
 		ClickOutside,
@@ -319,7 +342,7 @@ export default {
 
 <style lang="scss" scoped>
 	.board-edit {
-		margin-left: var(--default-clickable-area);
+		margin-left: calc(var(--default-clickable-area) / 2);
 		order: 1;
 		display: flex;
 		height: var(--default-clickable-area);
@@ -338,10 +361,9 @@ export default {
 		width: var(--default-clickable-area);
 		height: var(--default-clickable-area);
 		.color0 {
-			width: 30px !important;
-			margin: 5px;
-			margin-left: 7px;
-			height: 30px;
+			width: 24px !important;
+			margin: var(--default-grid-baseline);
+			height: 24px;
 			border-radius: 50%;
 			background-size: 14px;
 		}

From 90664cf86972995b527822b817d3117f9f673ec5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Sun, 1 Sep 2024 09:25:01 +0200
Subject: [PATCH 06/14] fix: Fix empty board view design
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/board/Board.vue | 49 +++++++++++++++++++++++-----------
 1 file changed, 33 insertions(+), 16 deletions(-)

diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
index 3bf47d68f..64019b440 100644
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -22,23 +22,27 @@
 				<template #icon>
 					<DeckIcon />
 				</template>
-				<template #title>
+				<template #name>
 					{{ t('deck', 'No lists available') }}
 				</template>
 				<template v-if="canManage" #action>
 					{{ t('deck', 'Create a new list to add cards to this board') }}
 					<form @submit.prevent="addNewStack()">
-						<input id="new-stack-input-main"
-							v-model="newStackTitle"
-							v-focus
-							type="text"
-							class="no-close"
+						<NcTextField ref="newStackInput"
+							:disable="loading"
+							:value.sync="newStackTitle"
 							:placeholder="t('deck', 'List name')"
-							required>
-						<input title="t('deck', 'Add list')"
-							class="icon-confirm"
-							type="submit"
-							value="">
+							type="text" />
+						<NcButton type="secondary"
+							native-type="submit"
+							:disabled="loading"
+							:title="t('deck', 'Add list')">
+							<template #icon>
+								<CheckIcon v-if="!loading" :size="20" />
+								<NcLoadingIcon v-else :size="20" />
+							</template>
+							{{ t('deck', 'Add list') }}
+						</NcButton>
 					</form>
 				</template>
 			</NcEmptyContent>
@@ -82,8 +86,9 @@ import { Container, Draggable } from 'vue-smooth-dnd'
 import { mapState, mapGetters } from 'vuex'
 import Controls from '../Controls.vue'
 import DeckIcon from '../icons/DeckIcon.vue'
+import CheckIcon from 'vue-material-design-icons/Check.vue'
 import Stack from './Stack.vue'
-import { NcEmptyContent, NcModal } from '@nextcloud/vue'
+import { NcEmptyContent, NcModal, NcButton, NcTextField, NcLoadingIcon } from '@nextcloud/vue'
 import GlobalSearchResults from '../search/GlobalSearchResults.vue'
 import { showError } from '../../helpers/errors.js'
 import { createSession } from '../../sessions.js'
@@ -99,6 +104,10 @@ export default {
 		Stack,
 		NcEmptyContent,
 		NcModal,
+		NcTextField,
+		NcButton,
+		NcLoadingIcon,
+		CheckIcon,
 		CardSidebar,
 	},
 	inject: [
@@ -131,7 +140,7 @@ export default {
 			'canManage',
 		]),
 		stacksByBoard() {
-			return this.$store.getters.stacksByBoard(this.board.id)
+			return this.board?.id ? this.$store.getters.stacksByBoard(this.board.id) : []
 		},
 		dragHandleSelector() {
 			return this.canEdit ? '.stack__title' : '.no-drag'
@@ -147,6 +156,11 @@ export default {
 		showArchived() {
 			this.fetchData()
 		},
+		isEmpty(newValue) {
+			newValue && this.$nextTick(() => {
+				this.$refs?.newStackInput.focus()
+			})
+		},
 	},
 	created() {
 		this.session = createSession(this.id)
@@ -236,13 +250,16 @@ export default {
 		text-align: center;
 		display: flex;
 		width: 100%;
-		max-width: 200px;
 		margin: auto;
-		margin-top: 20px;
+		margin-top: calc(var(--default-grid-baseline) * 4);
+		gap: var(--default-grid-baseline);
 
-		input[type=text] {
+		input[type="text"] {
 			flex-grow: 1;
 		}
+		button[type="submit"] {
+			flex-shrink: 0;
+		}
 	}
 
 	.board-wrapper {

From dc7a41ee359cdeb371cd0ae5005548ac7760d2b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Sun, 1 Sep 2024 09:25:57 +0200
Subject: [PATCH 07/14] fix: Move card create input to the bottom
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/board/Stack.vue    | 73 +++++++++++++++++--------------
 src/components/cards/CardItem.vue | 32 +++++++++++++-
 2 files changed, 71 insertions(+), 34 deletions(-)

diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 5e775617d..1afc6f5f0 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -88,15 +88,33 @@
 			</div>
 		</NcModal>
 
-		<transition name="slide-top" appear>
-			<div v-if="showAddCard" class="stack__card-add">
+		<Container :get-child-payload="payloadForCard(stack.id)"
+			group-name="stack"
+			data-click-closes-sidebar="true"
+			non-drag-area-selector=".dragDisabled"
+			:drag-handle-selector="dragHandleSelector"
+			data-dragscroll-enabled
+			@should-accept-drop="canEdit"
+			@drag-start="draggingCard = true"
+			@drag-end="draggingCard = false"
+			@drop="($event) => onDropCard(stack.id, $event)">
+			<Draggable v-for="card in cardsByStack" :key="card.id">
+				<transition :appear="animate && !card.animated && (card.animated=true)"
+					:appear-class="'zoom-appear-class'"
+					:appear-active-class="'zoom-appear-active-class'">
+					<CardItem :id="card.id" ref="card" :dragging="draggingCard" />
+				</transition>
+			</Draggable>
+		</Container>
+
+		<transition name="slide-bottom" appear>
+			<div v-show="showAddCard" class="stack__card-add">
 				<form :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"
-						v-focus
 						type="text"
 						class="no-close"
 						:disabled="stateCardCreating"
@@ -112,25 +130,6 @@
 				</form>
 			</div>
 		</transition>
-
-		<Container :get-child-payload="payloadForCard(stack.id)"
-			group-name="stack"
-			data-click-closes-sidebar="true"
-			non-drag-area-selector=".dragDisabled"
-			:drag-handle-selector="dragHandleSelector"
-			data-dragscroll-enabled
-			@should-accept-drop="canEdit"
-			@drag-start="draggingCard = true"
-			@drag-end="draggingCard = false"
-			@drop="($event) => onDropCard(stack.id, $event)">
-			<Draggable v-for="card in cardsByStack" :key="card.id">
-				<transition :appear="animate && !card.animated && (card.animated=true)"
-					:appear-class="'zoom-appear-class'"
-					:appear-active-class="'zoom-appear-active-class'">
-					<CardItem :id="card.id" :dragging="draggingCard" />
-				</transition>
-			</Draggable>
-		</Container>
 	</div>
 </template>
 
@@ -221,6 +220,10 @@ export default {
 		showAddCard(newValue) {
 			if (!newValue) {
 				this.$store.dispatch('toggleShortcutLock', false)
+			} else {
+				this.$nextTick(() => {
+					this.$refs.newCardInput.focus()
+				})
 			}
 		},
 	},
@@ -303,6 +306,7 @@ export default {
 				this.$nextTick(() => {
 					this.$refs.newCardInput.focus()
 					this.animate = false
+					this.$refs.card[(this.$refs.card.length - 1)].scrollIntoView()
 				})
 				if (!this.cardDetailsInModal) {
 					this.$router.push({ name: 'card', params: { cardId: newCard.id } })
@@ -338,6 +342,7 @@ export default {
 		padding-left: $card-spacing;
 		padding-right: $card-spacing;
 		margin: 6px;
+		margin-top: 0;
 		cursor: grab;
 		background-color: var(--color-main-background);
 
@@ -359,14 +364,6 @@ export default {
 			}
 		}
 
-		&--add:before {
-			height: 78px;
-			background-image: linear-gradient(180deg, var(--color-main-background) 68px, rgba(255, 255, 255, 0) 100%);
-			body.theme--dark & {
-				background-image: linear-gradient(180deg, var(--color-main-background) 68px, rgba(0, 0, 0, 0) 100%);
-			}
-		}
-
 		& > * {
 			position: relative;
 			z-index: 100;
@@ -422,13 +419,14 @@ export default {
 		flex-shrink: 0;
 		z-index: 100;
 		display: flex;
-		margin-top: 5px;
+		margin-bottom: 5px;
+		padding-top: var(--default-grid-baseline);
 		background-color: var(--color-main-background);
 
 		form {
 			display: flex;
 			margin-left: $stack-spacing;
-			margin-right: $card-spacing + $stack-spacing + 4px;
+			margin-right: $stack-spacing;
 			width: 100%;
 			border: 2px solid var(--color-border-maxcontrast);
 			border-radius: var(--border-radius-large);
@@ -464,7 +462,16 @@ export default {
 	.slide-top-enter, .slide-top-leave-to {
 		transform: translateY(-10px);
 		opacity: 0;
-		height: 0px;
+	}
+
+	.slide-bottom-enter-active,
+	.slide-bottom-leave-active {
+		transition: all 100ms ease;
+	}
+
+	.slide-bottom-enter, .slide-bottom-leave-to {
+		transform: translateY(20px);
+		opacity: 0;
 	}
 
 	.modal__content {
diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index 581fce77e..bb4969a5c 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -6,7 +6,7 @@
 <template>
 	<AttachmentDragAndDrop v-if="card" :card-id="card.id" class="drop-upload--card">
 		<div :ref="`card${card.id}`"
-			:class="{'compact': compactMode, 'current-card': currentCard, 'has-labels': card.labels && card.labels.length > 0, 'card__editable': canEdit, 'card__archived': card.archived }"
+			:class="{'compact': compactMode, 'current-card': currentCard, 'has-labels': card.labels && card.labels.length > 0, 'card__editable': canEdit, 'card__archived': card.archived, 'card__highlight': highlight}"
 			tag="div"
 			:tabindex="0"
 			class="card"
@@ -103,6 +103,11 @@ export default {
 			default: false,
 		},
 	},
+	data() {
+		return {
+			highlight: false,
+		}
+	},
 	computed: {
 		...mapState({
 			compactMode: state => state.compactMode,
@@ -270,6 +275,14 @@ export default {
 				},
 			})
 		},
+		scrollIntoView() {
+			this.$el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' })
+			this.focus()
+			this.highlight = true
+			setTimeout(() => {
+				this.highlight = false
+			}, 2000)
+		},
 	},
 }
 </script>
@@ -359,6 +372,23 @@ export default {
 		&.card__archived {
 			background-color: var(--color-background-dark);
 		}
+		@keyframes highlight {
+			0% {
+				border-color: var(--color-border-dark);
+			}
+			20% {
+				border-color: var(--color-primary-element);
+			}
+			70% {
+				border-color: var(--color-primary-element);
+			}
+			100% {
+				border-color: var(--color-border-dark);
+			}
+		}
+		&.card__highlight {
+			animation: highlight 2s;
+		}
 		.card-labels {
 			display: flex;
 			align-items: end;

From c665cfb03d81ef1b7d137fc536892bf5637b3700 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Sun, 1 Sep 2024 09:26:21 +0200
Subject: [PATCH 08/14] fix: Fix focus and emptycontent titles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/navigation/AppNavigationAddBoard.vue | 6 +++---
 src/views/CreateNewCardCustomPicker.vue             | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/navigation/AppNavigationAddBoard.vue b/src/components/navigation/AppNavigationAddBoard.vue
index 5ef11fb83..b6d3615e5 100644
--- a/src/components/navigation/AppNavigationAddBoard.vue
+++ b/src/components/navigation/AppNavigationAddBoard.vue
@@ -69,12 +69,12 @@ export default {
 			color: randomColor(),
 		}
 	},
-	mounted() {
-		this.$refs.inputField.focus()
-	},
 	methods: {
 		startCreateBoard(e) {
 			this.editing = true
+			this.$nextTick(() => {
+				this.$refs?.inputField.focus()
+			})
 		},
 		async createBoard(e) {
 			this.loading = true
diff --git a/src/views/CreateNewCardCustomPicker.vue b/src/views/CreateNewCardCustomPicker.vue
index 7fc4187b6..052e7e9e0 100644
--- a/src/views/CreateNewCardCustomPicker.vue
+++ b/src/views/CreateNewCardCustomPicker.vue
@@ -93,7 +93,7 @@
 				<template #icon>
 					<NcLoadingIcon />
 				</template>
-				<template #title>
+				<template #name>
 					{{ t('deck', 'Creating the new card …') }}
 				</template>
 			</NcEmptyContent>
@@ -101,7 +101,7 @@
 				<template #icon>
 					<CardPlusOutline />
 				</template>
-				<template #title>
+				<template #name>
 					{{ t('deck', 'Card "{card}" was added to "{board}"', { card: card.title, board: selectedBoard.title }) }}
 				</template>
 				<template #action>

From b8e05284ebf0449b0c8b401da774c375470ee164 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Sun, 1 Sep 2024 11:51:46 +0200
Subject: [PATCH 09/14] fix: Set proper name on modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/App.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/App.vue b/src/App.vue
index dfddc314e..285cf97a9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,6 +12,7 @@
 
 		<div v-if="$route.params.id || $route.params.cardId">
 			<NcModal v-if="cardDetailsInModal && $route.params.cardId"
+				:name="t('deck', 'Card details')"
 				:clear-view-delay="0"
 				:close-button-contained="true"
 				size="large"

From 500662f8ceea86c121247fdfb5de38f61eb8a1ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Sun, 1 Sep 2024 11:53:03 +0200
Subject: [PATCH 10/14] fix: Fix modal sizing, focus error and cover image
 sizing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/board/Board.vue      |  2 +-
 src/components/card/CardSidebar.vue |  5 ++++-
 src/components/cards/CardCover.vue  | 12 ++++++------
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
index 64019b440..f3c118433 100644
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -158,7 +158,7 @@ export default {
 		},
 		isEmpty(newValue) {
 			newValue && this.$nextTick(() => {
-				this.$refs?.newStackInput.focus()
+				this.$refs?.newStackInput?.focus()
 			})
 		},
 	},
diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index 41fd9dea8..d47ff086f 100644
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -162,7 +162,9 @@ export default {
 	},
 	methods: {
 		focusHeader() {
-			this.$refs.cardSidebar.$el.querySelector('.app-sidebar-header__mainname').focus()
+			this.$nextTick(() => {
+				this.$refs?.cardSidebar.$el.querySelector('.app-sidebar-header__mainname')?.focus()
+			})
 		},
 		handleUpdateTitleEditable(value) {
 			this.titleEditable = value
@@ -224,6 +226,7 @@ section.app-sidebar__tab--active {
 	left: 0;
 	right: 0;
 	max-width: calc(100% - #{$modal-padding * 2});
+	min-height: calc(100vh - var(--header-height) * 4);
 	padding: 0 14px;
 	height: 97%;
 	overflow: hidden !important;
diff --git a/src/components/cards/CardCover.vue b/src/components/cards/CardCover.vue
index ca46ed3cf..f7d2a76d2 100644
--- a/src/components/cards/CardCover.vue
+++ b/src/components/cards/CardCover.vue
@@ -66,11 +66,11 @@ export default {
 @import '../../css/variables';
 
 .card-cover {
-	height: 100px;
+	height: 90px;
 	display: flex;
-	margin-top: -6px;
-	margin-left: -6px;
-	margin-right: -6px;
+	margin-top: -4px;
+	margin-left: -4px;
+	margin-right: -4px;
 
 	.image-wrapper {
 		flex: 1;
@@ -79,10 +79,10 @@ export default {
 		background-repeat: no-repeat;
 		background-position: center center;
 		&.rounded-left {
-			border-top-left-radius: var(--border-radius-large);
+			border-top-left-radius: calc(var(--border-radius-large) - 1px);
 		}
 		&.rounded-right {
-			border-top-right-radius: var(--border-radius-large);
+			border-top-right-radius: calc(var(--border-radius-large) - 1px);
 		}
 	}
 }

From 6b315f95a76c7d8f9f36e8235c8097c620c06021 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Sun, 1 Sep 2024 11:54:00 +0200
Subject: [PATCH 11/14] fix: Proper drag zone height (fix #6264)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/card/AttachmentList.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/card/AttachmentList.vue b/src/components/card/AttachmentList.vue
index b604059d1..19f1dc567 100644
--- a/src/components/card/AttachmentList.vue
+++ b/src/components/card/AttachmentList.vue
@@ -248,6 +248,10 @@ export default {
 
 <style lang="scss" scoped>
 
+	.drop-upload--sidebar {
+		min-height: 100%;
+	}
+
 	.button-group {
 		display: flex;
 		gap: calc(var(--default-grid-baseline) * 3);

From 16592324a07a5aaa0c561cdf6aabbf5bcb9f7fce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Mon, 2 Sep 2024 07:57:08 +0200
Subject: [PATCH 12/14] fix: Hide navigation initially on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/App.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 285cf97a9..f43f6c516 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -33,7 +33,7 @@
 import { mapState } from 'vuex'
 import AppNavigation from './components/navigation/AppNavigation.vue'
 import KeyboardShortcuts from './components/KeyboardShortcuts.vue'
-import { NcModal, NcContent, NcAppContent } from '@nextcloud/vue'
+import { NcModal, NcContent, NcAppContent, isMobile } from '@nextcloud/vue'
 import { BoardApi } from './services/BoardApi.js'
 import { emit, subscribe } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
@@ -51,6 +51,7 @@ export default {
 		NcAppContent,
 		KeyboardShortcuts,
 	},
+	mixins: [isMobile],
 	provide() {
 		return {
 			boardApi,
@@ -107,7 +108,7 @@ export default {
 	},
 	mounted() {
 		// Set navigation to initial state and update in case it gets toggled
-		emit('toggle-navigation', { open: this.navShown, _initial: true })
+		emit('toggle-navigation', { open: !this.isMobile && this.navShown, _initial: true })
 		this.$nextTick(() => {
 			subscribe('navigation-toggled', (navState) => {
 				this.$store.dispatch('toggleNav', navState.open)

From aca6b9d969f54e46b80b74dcdc8b8f1dd45f3f9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Mon, 2 Sep 2024 07:58:14 +0200
Subject: [PATCH 13/14] fix: Auto-scroll horizontally
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/board/Stack.vue | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 1afc6f5f0..cc066fd60 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -228,6 +228,10 @@ export default {
 		},
 	},
 
+	mounted() {
+		this.setupAutoscrollOnDrag()
+	},
+
 	methods: {
 		stopCardCreation(e) {
 			// For some reason the submit event triggers a MouseEvent that is bubbling to the outside
@@ -320,6 +324,36 @@ export default {
 		onCreateCardFocus() {
 			this.$store.dispatch('toggleShortcutLock', true)
 		},
+		setupAutoscrollOnDrag() {
+			let timer
+			const autoscroll = (event) => {
+				const viewportX = event.clientX
+				const boardElement = document.querySelector('.board')
+				const viewportWidth = boardElement.clientWidth
+				const offset = viewportWidth - viewportX
+				const scrollMultiplier = 10
+				const scrollBoundary = window.innerWidth * 0.15
+
+				if (offset < 100) {
+					const scrollToX = boardElement.scrollLeft + scrollMultiplier * (1 - offset / scrollBoundary)
+					boardElement.scrollTo(scrollToX, boardElement.scrollTop)
+				}
+
+				if (boardElement.scrollLeft > 0 && viewportX < scrollBoundary) {
+					const scrollToX = boardElement.scrollLeft - scrollMultiplier * (1 - viewportX / scrollBoundary)
+					boardElement.scrollTo(scrollToX, boardElement.scrollTop)
+				}
+			}
+			window.addEventListener('mousemove', (e) => {
+				if (!this.draggingCard) {
+					timer && clearInterval(timer)
+					return
+				}
+
+				clearInterval(timer)
+				timer = window.setInterval(() => autoscroll(e), 25)
+			})
+		},
 	},
 }
 </script>

From 07b0716d330086e35cdf3878c3249c7c761c6242 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Mon, 2 Sep 2024 07:58:51 +0200
Subject: [PATCH 14/14] fix: Avoid double tap on iOS and close navigation on
 click
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/navigation/AppNavigationBoard.vue | 13 +++++++++++++
 src/mixins/isTouchDevice.js                      | 12 ++++++++++++
 2 files changed, 25 insertions(+)
 create mode 100644 src/mixins/isTouchDevice.js

diff --git a/src/components/navigation/AppNavigationBoard.vue b/src/components/navigation/AppNavigationBoard.vue
index 642934521..fe9316246 100644
--- a/src/components/navigation/AppNavigationBoard.vue
+++ b/src/components/navigation/AppNavigationBoard.vue
@@ -9,6 +9,8 @@
 		:to="routeTo"
 		:undo="deleted"
 		:menu-placement="'auto'"
+		:force-display-actions="isTouchDevice"
+		@click="onNavigate"
 		@undo="unDelete">
 		<NcAppNavigationIconBullet slot="icon" :color="board.color" />
 
@@ -152,6 +154,9 @@ import CloseIcon from 'vue-material-design-icons/Close.vue'
 import CheckIcon from 'vue-material-design-icons/Check.vue'
 
 import { loadState } from '@nextcloud/initial-state'
+import { emit } from '@nextcloud/event-bus'
+
+import isTouchDevice from '../../mixins/isTouchDevice.js'
 
 const canCreateState = loadState('deck', 'canCreate')
 
@@ -173,6 +178,7 @@ export default {
 	directives: {
 		ClickOutside,
 	},
+	mixins: [isTouchDevice],
 	inject: [
 		'boardApi',
 	],
@@ -336,6 +342,13 @@ export default {
 		actionExport() {
 			this.boardApi.exportBoard(this.board)
 		},
+		onNavigate() {
+			if (this.isTouchDevice) {
+				emit('toggle-navigation', {
+					open: false,
+				})
+			}
+		},
 	},
 }
 </script>
diff --git a/src/mixins/isTouchDevice.js b/src/mixins/isTouchDevice.js
new file mode 100644
index 000000000..ddeb71113
--- /dev/null
+++ b/src/mixins/isTouchDevice.js
@@ -0,0 +1,12 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+export default {
+	computed: {
+		isTouchDevice() {
+			return ('ontouchstart' in window) || (navigator.maxTouchPoints > 0)
+		},
+	},
+}