Implement Scroll Group UI

[katherinejensen00]

User Story As a user, I want to have different tabs scroll together at different references so that I can view different texts at different places in Scripture for things like Parallel Passages or cross references.

Description Adjust the UI following the UX Scroll Group Design at https://paratext.myjetbrains.com/youtrack/issue/BUX-17.

• [ ] Tab nav (the thing with the BCV selector and scroll groups buttons and ellipsis) (don't need project selector) at the top of tabs
• [ ] Create Scroll Group Control for use in Tab Nav instead of simple dropdown selector
• [ ] Add Ellipsis Button to the tab nav
• [ ] Move menu to ellipsis
• [ ] Change scroll group functionality so only the scroll groups in use (plus one) are showing
  • [ ] Figure out maintaining a list of web views in the web view service so you can tell which scroll groups are used
  • [ ] Add in-use scroll group tracking to the scroll group service (maybe turn it into a data provider and add this as a data type)

[Sebastian-ubs]

related UX epic is BUX-38: Epic: Scroll groups and scripture reference control

[ianhewubs]

Related UX case for scroll groups is BUX-17. This contains links to mockups (currently within the BCV design mockups. UX hopes to split these out into a scroll group specific mockup).

[merchako]

@paranext/paranext-dev-write-access , notice two affordances for changing scroll group: (1) a full one in the Tab Options Menu and (2) a smaller one in the Tab Nav. I would call both "exclusive toggle button groups." For a starting point/comparison, see Shadcn/ui's (independent) Toggle Group.

• Similar to Shadcn Toggle Group but
• behaves exclusively
• choices are visually connected

Control in Tab Nav

Control in Tab Menu

The smaller one has some funky behavior. ⚠️ This is risky but we’re trying it out. UX would like you're opinion on whether it's worth developing it as a separate, unproven component or variation.

• It hides away less useful choices by showing only populated scroll groups and the alphabetically leftmost empty scroll group.
• Instead of showing a Null option, the user can click on the selected scroll group to deselect it. Thus, selection can be 1 option (radio) or none.

How hard would this variation be to build? If we choose not to build it at the point, we'd want to use a version that is close or identical to the larger one in the Tab Options Menu.

[merchako]

Scroll indicators are the A and B next to the titles in the tab uppers

Tabs with scroll group indicator placeholders (hidden) (default)

Tabs with scroll group indicators shown for same group upon hover/focus of BCV control

Tabs with all scroll group indicators shown upon hover/focus/drag of tab upper (here) or scroll group control

[Sebastian-ubs]

@merchako from styling the component used looks much like the Shadcn tab component (not the toogle group component). Is that right / good to use?

[merchako]

Incorrect; that was a custom component I designed. If we want something out-of-the-box for first iteration, we should pick something else. I expect the tab component might be confusing. It’s certainly too large for a pop up menu. @Sebastian-ubs

[Sebastian-ubs]

Which standard one (whith maybe adaptations) do you prefer? I had added the following to the preview app on the examples page.

like

<TabsList className="pr-h-7">
  <TabsTrigger className="pr-h-6 pr-w-0" value="a">
    A
  </TabsTrigger>
  <TabsTrigger className="pr-h-6 pr-w-0" value="b">
    B
  </TabsTrigger>
  <TabsTrigger className="pr-h-6 pr-w-0" value="c">
    C
  </TabsTrigger>
  <TabsTrigger className="pr-h-6 pr-w-0" value="d">
    D
  </TabsTrigger>
  <TabsTrigger className="pr-h-6 pr-w-0" value="-">
    -
  </TabsTrigger>
</TabsList>

[tjcouch-sil]

Reworking this and #940:

• 940 will now be about getting a static set of scroll groups working and adding a very rudimentary UI that looks reasonable

• This issue will now be about making the set of scroll groups adjust to which scroll groups are in use and making the UI look right

[merchako]

Which standard [Shadcn component] (with maybe adaptations) do you prefer?

The <TabsList> you posted looks fine. I'm hesitant to endorse it since the semantics of the component contradict what it's being used for—it's not a tab.

The <ToggleGroup> is more appealing semantically. There is a way to make them mutually exclusive. It's not apparent in the Shadcn docs, but in Radix's ToggleGroup docs, you can demo how the single option makes the toggles mutually exclusive.

<ToggleGroup size={"sm"} type="single">

My vote is for ToggleGroup.

[tjcouch-sil]

Shadcn demo of the Single option - seems pretty nice! Good find!