Add new cards to top or bottom by theoholl · Pull Request #8181 · nextcloud/deck

theoholl · 2026-07-19T13:06:32Z

Resolves: New cards are created at the bottom of the screen #6457
Target version: main

Summary

Users can now choose whether new cards are added to the top or the bottom of a list. A new setting in the Deck settings toggles the behavior; the 'Add card' button sits on the side of the list where the card will be inserted. The default behavior is unchanged (add to bottom).

Settings toggle for changing between adding cards to the top or the bottom of the stack:

Adding cards to the top of the stack:

Adding cards to the bottom of the stack:

Implementation notes

New per-user setting stackAddCardAtTop (ConfigService), exposed to the client via the initial state and toggled in the Deck settings.
The add-card form is extracted from Stack.vue into a new StackCardAdd.vue component and rendered above or below the card list depending on the setting.
CardService::create() gained an insertAtPosition flag: the card is inserted and the surrounding cards are shifted in a single DB transaction, so no follow-up reorder request is needed.
API behavior note: passing an explicit order to the OCS card create endpoint now inserts the card at that position and shifts the surrounding cards, instead of only storing the raw order value. Omitting order keeps the previous append-to-bottom behavior.
Covered by unit tests (transaction commit + rollback) and a Cypress test that verifies both modes and persistence across reloads.

Checklist

Code is properly formatted
Sign-off message is added to all commits
Documentation (manuals or wiki) has been updated or is not required

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

…but make it stick in visible area on overflow Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

…image` was cutting of dragged cards. Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

…or-bottom # Conflicts: # src/components/board/Stack.vue

…s set to 'add to bottom' Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

github-actions · 2026-07-20T09:39:27Z

🐢 Performance warning.
It looks like the query count of the integration tests increased with this PR.
Database query count is now 96814 was 96706 (+0.11%)
Please check your code again. If you added a new test this can be expected and the base value in tests/integration/base-query-count.txt can be increased.

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

grnd-alt

Thanks for your contribution!
I like the idea in general but I think the implementation is way to complex. For a sticky element like that we shouldn't need that much js, I don't think we need a resizeObserver and bottomAddCardInline for example. For the handling with empty stacks, we could only use the isEmptyStack and remove isEmptyStackWithBottomAddCard, please also have a look at the other js parts of this pr to simplify it further.

some ui things I noticed:

you can't really drag and drop to empty stacks as the dnd container shrinks
when clicking "add card" the input gets bigger/wider which causes a sudden layout shift, would be nice to not have that
subjective but I think having the "add card" with less opacity might look nicer to not draw away attention from the cards already there

theoholl · 2026-07-22T11:34:17Z

Completely agreed, I'll work on that. Thanks for your review! :)

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

…op mode Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

github-actions · 2026-07-22T14:49:27Z

🐢 Performance warning.
It looks like the query count of the integration tests increased with this PR.
Database query count is now 96846 was 96706 (+0.14%)
Please check your code again. If you added a new test this can be expected and the base value in tests/integration/base-query-count.txt can be increased.

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

…for add-to-bottom lists Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

theoholl · 2026-07-30T17:28:14Z

Previously, I placed the 'Add card' button right underneath the last card of the stack and then sticking to the bottom of the board when the cards overflowed.

This had some disadvantages:

Most importantly, for me, this introduces unpredictable behavior because cards that were dragged in from another stack had to be dropped above the 'Add card' button which is different for add-cards-to-the-top stacks where one could drop off the card anywhere. This is especially confusing for users since there is no visible drop-off zone marked by a border or a background color.
That could be fixed by allowing cards to be dropped anywhere on the stack but without any visual feedback it feels weird dropping a card on an add-cards-to-bottom stack below the 'Add card' button, basically into a void.
Introducing visual feedback, e.g. making the 'Add card' button move down a bit to 'make room' for the new card when a card is moved onto the stack is also weird and perhaps one would want the same visual effect then for stacks with some cards on it?

I think those issues could be tackled with a clear 'drop box' like Trello.

But for now I would keep the exact same, predictable behaviour for add-to-top and add-to-bottom lists.

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

…or-bottom # Conflicts: # src/components/board/Stack.vue

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

github-actions · 2026-08-03T05:01:40Z

Hello there,
Thank you so much for taking the time and effort to create a pull request to our Nextcloud project.

We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process.

Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6

Thank you for contributing to Nextcloud and we hope to hear from you soon!

(If you believe you should not receive this message, you can add yourself to the blocklist.)

…or-bottom # Conflicts: # src/components/board/Stack.vue

github-actions · 2026-08-08T16:32:04Z

🐢 Performance warning.
It looks like the query count of the integration tests increased with this PR.
Database query count is now 198590 was 198420 (+0.08%)
Please check your code again. If you added a new test this can be expected and the base value in tests/integration/base-query-count.txt can be increased.

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

github-actions · 2026-08-08T18:52:28Z

🐢 Performance warning.
It looks like the query count of the integration tests increased with this PR.
Database query count is now 200336 was 198420 (+0.96%)
Please check your code again. If you added a new test this can be expected and the base value in tests/integration/base-query-count.txt can be increased.

github-actions · 2026-08-08T19:08:18Z

🐢 Performance warning.
It looks like the query count of the integration tests increased with this PR.
Database query count is now 200402 was 198420 (+0.99%)
Please check your code again. If you added a new test this can be expected and the base value in tests/integration/base-query-count.txt can be increased.

…d form after creation - Let CardService::create() decide when to reorder based on the requested order, so all card creation endpoints behave consistently. - Close the inline add-card form after a card is successfully created to prevent it from covering the new card and fix flaky Cypress tests. Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

Inferring the reorder-on-insert behavior from `$order !== 999` broke cloneCard() and DefaultBoardService, which call create() with real, already-correct order values (e.g. 0) that must not trigger a shift of other cards in the stack. Restore the explicit $insertAtPosition flag, opted into only by the OCS controller used by the new add-card UI. Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

github-actions · 2026-08-08T19:31:28Z

🐢 Performance warning.
It looks like the query count of the integration tests increased with this PR.
Database query count is now 200865 was 198420 (+1.23%)
Please check your code again. If you added a new test this can be expected and the base value in tests/integration/base-query-count.txt can be increased.

github-actions · 2026-08-08T19:44:55Z

🐢 Performance warning.
It looks like the query count of the integration tests increased with this PR.
Database query count is now 200355 was 198420 (+0.97%)
Please check your code again. If you added a new test this can be expected and the base value in tests/integration/base-query-count.txt can be increased.

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

github-actions · 2026-08-08T20:01:52Z

🐢 Performance warning.
It looks like the query count of the integration tests increased with this PR.
Database query count is now 200345 was 198420 (+0.97%)
Please check your code again. If you added a new test this can be expected and the base value in tests/integration/base-query-count.txt can be increased.

- Name the sentinel order in CardOcsController instead of a magic 999 - Drop unreachable stackAddCardAtTop case from ConfigService::get() - Restore the stronger visibility assertion in the label e2e test Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

theoholl

A few implementation notes for reviewers.

theoholl · 2026-08-08T20:59:17Z

+			$card = $this->cardMapper->insert($card);
+		} else {
+			// Insert at the requested position and shift the surrounding cards
+			$this->connection->beginTransaction();


Insertion and order normalization are one transaction, so a failed reorder cannot leave the new card stored with conflicting positions.

theoholl · 2026-08-08T20:59:17Z

+					stackId: this.stack.id,
+					boardId: this.stack.boardId,
+					// Without an order the API appends the card to the end of the stack
+					...(this.addAtTop ? { order: 0 } : {}),


Bottom insertion deliberately omits order to preserve the existing append behavior. Top insertion sends order: 0; the server shifts the existing cards.

theoholl · 2026-08-08T20:59:17Z

+			if (card.order !== undefined) {
+				for (const existingCard of this.cards) {
+					if (existingCard.stackId === createdCard.stackId && existingCard.order >= card.order) {
+						Vue.set(existingCard, 'order', existingCard.order + 1)


Mirror the server-side shift locally so the new top card renders in the correct position immediately after creation.

github-actions · 2026-08-08T21:05:55Z

🐢 Performance warning.
It looks like the query count of the integration tests increased with this PR.
Database query count is now 200366 was 198420 (+0.98%)
Please check your code again. If you added a new test this can be expected and the base value in tests/integration/base-query-count.txt can be increased.

Place the bottom add-card control outside the scrollable list without overlap-specific spacing or drag handling. Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

theoholl added 11 commits July 19, 2026 10:41

Adds settings for creating new cards at the top or bottom of stacks

e444694

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

Add a button for adding cards to the top or bottom of a stack

e2b6939

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

Move 'Add card' button at bottom of stack right underneath last card …

8e62890

…but make it stick in visible area on overflow Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

Add fade-out gradient for overflowing stacks

8912d67

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

Use a different approach for the overflow gradient because CSS `mask-…

ef6b136

…image` was cutting of dragged cards. Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

Forms to add a new card can be close by pressing enter key

60aa2d0

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

Merge remote-tracking branch 'origin/main' into add-new-cards-to-top-…

0487058

…or-bottom # Conflicts: # src/components/board/Stack.vue

Improve position of 'Add card' button for empty stacks when setting i…

6e41520

…s set to 'add to bottom' Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

Keep the default setting adding cards to the bottom of a list

8988831

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

Use a real + icon instead of using text for 'Add card' button

5a12a1a

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

Removed duplicated user account check and improved method naming

5744226

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

theoholl marked this pull request as ready for review July 19, 2026 17:16

theoholl requested review from grnd-alt and luka-nextcloud as code owners July 19, 2026 17:16

Fix cypress tests

050a23d

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

theoholl force-pushed the add-new-cards-to-top-or-bottom branch from e5aa08a to 050a23d Compare July 20, 2026 07:55

Merge branch 'main' into add-new-cards-to-top-or-bottom

fb0be1c

theoholl force-pushed the add-new-cards-to-top-or-bottom branch from f911c83 to 7d7651c Compare July 20, 2026 09:27

Fix a cypress test

bcaea9d

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

theoholl force-pushed the add-new-cards-to-top-or-bottom branch from 7d7651c to bcaea9d Compare July 20, 2026 09:42

grnd-alt requested changes Jul 22, 2026

View reviewed changes

theoholl added 3 commits July 22, 2026 13:07

Simplify JS, use CSS for layout instead if possible

1971a97

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

Avoid layout shift when clicking the 'Add to card' button in add-to-t…

405dc44

…op mode Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

Use muted colors for 'Add card' button

08aaf0f

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

theoholl added 3 commits July 26, 2026 17:05

Fix dropzone for empty add-to-bottom stacks

d98a261

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

Remove all transitions and make remove padding from empty card lists …

95dd1c0

…for add-to-bottom lists Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

Clean up CSS selectors

fc05c33

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

Improve drop behaviour for empty stacks

edfa253

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

theoholl added 6 commits July 30, 2026 17:31

Simplify add-cards-to-bottom stacks

7b48ec8

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

Fix new card focus animation for add-to-top stacks

a6ef37c

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

Merge remote-tracking branch 'origin/main' into add-new-cards-to-top-…

1b86b77

…or-bottom # Conflicts: # src/components/board/Stack.vue

Revert package-lock.json to origin/main

50a55b7

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

Remove add button form duplication

c61e8e7

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

Extract add card form to keep tab order intact

d09e436

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

github-actions Bot added the feedback-requested label Aug 3, 2026

Merge remote-tracking branch 'origin/main' into add-new-cards-to-top-…

4b351c0

…or-bottom # Conflicts: # src/components/board/Stack.vue

Fix card insertion position

7e606fa

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

theoholl force-pushed the add-new-cards-to-top-or-bottom branch from e212f79 to 7e606fa Compare August 8, 2026 18:47

theoholl added 2 commits August 8, 2026 19:11

Remove unused stack__cards-list class and reorderCard return value

5cd6419

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

theoholl commented Aug 8, 2026

View reviewed changes

theoholl added 2 commits August 8, 2026 21:07

Simplify bottom add-card layout

f5fbe5a

Place the bottom add-card control outside the scrollable list without overlap-specific spacing or drag handling. Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

Restore bottom add-card spacing

9a937d4

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>

Uh oh!

Conversation

theoholl commented Jul 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Implementation notes

Checklist

Uh oh!

github-actions Bot commented Jul 20, 2026

Uh oh!

grnd-alt left a comment

Choose a reason for hiding this comment

Uh oh!

theoholl commented Jul 22, 2026

Uh oh!

github-actions Bot commented Jul 22, 2026

Uh oh!

theoholl commented Jul 30, 2026

Uh oh!

github-actions Bot commented Aug 3, 2026

Uh oh!

github-actions Bot commented Aug 8, 2026

Uh oh!

github-actions Bot commented Aug 8, 2026

Uh oh!

github-actions Bot commented Aug 8, 2026

Uh oh!

github-actions Bot commented Aug 8, 2026

Uh oh!

github-actions Bot commented Aug 8, 2026

Uh oh!

github-actions Bot commented Aug 8, 2026

Uh oh!

theoholl left a comment

Choose a reason for hiding this comment

Uh oh!

theoholl Aug 8, 2026

Choose a reason for hiding this comment

Uh oh!

theoholl Aug 8, 2026

Choose a reason for hiding this comment

Uh oh!

theoholl Aug 8, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Aug 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

theoholl commented Jul 19, 2026 •

edited

Loading