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 the stack. 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:

Note: When using the 'add card to bottom of list' option, a dragged card must be dragged above the 'Add card' button and not within the whole height of the list like it when using the 'add card to top of list' option. I think this okay but it's a behavior change and worth thinking about.

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.