Add new cards to top or bottom

[theoholl]

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

Summary

Users can now toggle between adding cards to the top or the bottom of stacks. There is a new 'Add card' button that is on the side of the stack where the new card will be added. Settings has an option to toggle between adding new cards to the top or adding them to the bottom of the stack.

The default settings remains adding cards to the bottom of the stack.

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:

Checklist

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

[github-actions]

🐢 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.

[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]

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

[github-actions]

🐢 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.

[theoholl]

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.