feat(deck-picker): draw tree hierarchy branch lines

[ShaanNarendran]

Note

Used Gemini 3.1 Pro to help write the code for the bit mask approach (horrible at math, so this was an experiment). All comments are my own, tested completely with the emulator and with a very large deck.

Purpose / Description

Draws hierarchy lines for the new deck picker redesign.

Fixes

• For GSoC 2026: Redesign Deck Picker

Approach

We use a bit mask approach since looping through every row to draw all the lines is very inefficient, I've tried to comment it as much as possible with examples so that should explain the approach.

How Has This Been Tested?

Screen_recording_20260714_231431.webm

Checklist

Please, go through these checks before submitting the PR.

• You have a descriptive commit message with a short title (first line, max 50 chars).
• You have commented your code, particularly in hard-to-understand areas
• You have performed a self-review of your own code
• UI changes: include screenshots of all affected screens (in particular showing any new or changed strings)
• UI Changes: You have tested your change using the Google Accessibility Scanner

[BrayanDSO]

Screenshot tests would help

[BrayanDSO]

the selected deck is highlighted in phones as well. What do you mean here?

[ShaanNarendran]

Whenever I highlighted a deck during testing, it stayed highlighted even after I finished tapping it. I could probably word the comment better, and put that in a separate commit. I'm not sure if that was an issue only on my local but thought I'd put a fix in here.

[ShaanNarendran]

Screenshot test would help

Do I just have to add screenshots of the page into the PR?

[ZornHadNoChoice]

A few suggestions:

• The lines shouldn't break when collapsing/expanding decks.
• I think it'd look better if the "tips" were longer.
• Maybe "connect" the lines to the arrows or put circles around the arrows.

[BrayanDSO]

Do I just have to add screenshots of the page into the PR?

We use the Roborazzi library for automated screenshot unit tests. Check the inheritors of ScreenshotTest in AnkiDroid's repository for examples

[ShaanNarendran]

A few suggestions:

• The lines shouldn't break when collapsing/expanding decks.

I'm not sure if this is possible without making it too inefficient for large decks, will try this out.

• I think it'd look better if the "tips" were longer.

I had a similar thought but I could never get it to look visually "uncluttered", can send some mocks once the rest of the code is perfected but I like what we have now.

• Maybe "connect" the lines to the arrows or put circles around the arrows.

@david-allison would love your thoughts here, do we go with lines connected to the chevron or not?

[ShaanNarendran]

Nitpick: the horizontal tips overlap the vertical lines creating a darker color.

I've tried a lot to avoid this but it's always come out wrong, may have to be a small quirk of the lines. It doesn't seem too noticeable to me, but ill still try and fix this while I finish the pr up tomorrow!

[david-allison]

Outside the transition states, looks great!

Pausing on the video provides unusual output

I'd go slowly through this and validate the animations are doing as you'd expect, both expansion and contraction of the decks, and drawing of the lines themselves

[david-allison]

I'm happy with the lines not connected to the chevron, but I feel the "dead zone" should be a few pixels smaller, in my screenshot it's hard to see the the horizontal line towards "blog"

[sanjaysargam]

Nitpick: the horizontal tips overlap the vertical lines creating a darker color.

I've tried a lot to avoid this but it's always come out wrong, may have to be a small quirk of the lines. It doesn't seem too noticeable to me, but ill still try and fix this while I finish the pr up tomorrow!

@ShaanNarendran try this : draw vertical lines as two segments with a gap at the horizontal tip position, or use a single Path that outlines the entire corner shape without overlap

[sanjaysargam]

MAJOR BLOCKER:
When DeckAdapter.submitList() is called while onDrawOver is executing, we may observe list in partially updated state which could lead to IndexOutOfBoundsException or can crash during scroll or adapter updates on large nested decks
It can be fix using RecyclerView.AdapterDataObserver or a callback from the adapter when the list changes

[ShaanNarendran]

I added null safety when we are looping so if there is an issue of a race condition it should just skip instead of crashing, would this work or should I go for the approach you mentioned?

[ShaanNarendran]

Screen_recording_20260717_192949.webm

Just an update on how it's going with incorporating all the feedback, I think it looks and feels much better now and I would love to get some more opinions

[github-actions]

Snapshot diff report vs main. Open screenshot-diff for diffs.

• DeckPickerScreenshotTest: 4 changes

All 4 changed screenshots

DeckPickerScreenshotTest

• hierarchy_lines_collapsed_compare.png
• hierarchy_lines_compare.png
• hierarchy_lines_deep_nesting_compare.png
• hierarchy_lines_many_siblings_compare.png

[ZornHadNoChoice]

There are still a few issues and nitpicks which I hope that you can fix:

Expanding a deck

The lines appear first then the decks move then the subdecks fade in. This causes a grid-like mess for a moment. I suggest that the lines fade in with the subdecks after the decks have moved.

Collapsing a deck

The lines disappear instantly instead of fading out with the subdecks.

Lines disappear when decks are too far

This feels unintentional and it's definitely confusing. Below, you can see the left two lines disappear after expanding a subdeck.

Arrows and lines

It's great that you managed to remove the dark bits and made the arrows longer. However:

• The lines are almost connected to the arrows horizontally. It should either have a noticable gap (but shorter than in the original recording) as David said, or be connected completely as I said.
• The vertical gap is much larger than the horizontal one.

Here's a comparison between current, what I suggest, and my interpretation of what David suggested:

[ShaanNarendran]

@ZornHadNoChoice Thank you so much for the in-depth review! I had most of this sitting as changes and I was just waiting for any other feedback to push it out, I think everything should be much cleaner now. The design is probably always going to be subjective, but I'm happy with this and hopefully it looks good.
Screen_recording_20260719_150610.webm

[ZornHadNoChoice]

No, thank you for your patience with my nitpicks!

Speaking of which (haha): when expanding decks, the fade in effect doesn't apply to the little vertical bar under the arrow.