feat(js): inbox tabs #6149

LetItRock · 2024-07-24T15:46:41Z

What changed? Why was the change needed?

The Inbox tabs UI component implementation:

the tabs prop drilling from the NovuUI
the tabs primitive component
dynamic visible tabs rendering logic based on available parent container space

Known limitations:

~~it doesn't support keyboard navigation~~
it doesn't recalculate the "visible tabs" when the container size changes

Screenshots

Screen.Recording.2024-07-24.at.17.08.16.mov

Screen.Recording.2024-07-24.at.19.07.46.mov

linear · 2024-07-24T16:05:42Z

COM-43 Implement feed tabs in Notification list

LetItRock · 2024-07-24T15:57:18Z

packages/js/src/ui/components/InboxTabs/InboxTab.tsx

+export const InboxTab = (props: { label: string; class?: string }) => {
+ const style = useStyle();
+
+ // TODO: Replace with actual count from API


the fetching logic for the counts will be in the separate PR/ticket

LetItRock · 2024-07-24T15:57:41Z

packages/js/src/ui/components/InboxTabs/InboxTab.tsx

+ <span class={style('tabsTabLabel', 'nt-text-sm nt-font-medium')}>{props.label}</span>
+ <span
+ class={style('tabsTabCount', 'nt-rounded-full nt-bg-primary nt-px-[6px] nt-text-primary-foreground nt-text-sm')}
+ >
+ {count >= 100 ? '99+' : count}
+ </span>


not sure if these should be part of the Tabs.Tab or not

Generally, they should, but in our case, we'd only do it for the appearance keys. When we add an element, we are forced to add an appearance key anyway, and more specific that the primitive one. This means that we would redeclare one anyway when using Tab.Label for example. I'm fine with them not being actual components.

LetItRock · 2024-07-24T15:58:17Z

packages/js/src/ui/components/InboxTabs/InboxTabs.tsx

+ tabs: Array<{ label: string; value: Array<string> }>;
+};
+
+export const InboxTabs = (props: InboxTabsProps) => {


the stateful component for tabs

LetItRock · 2024-07-24T16:00:12Z

packages/js/src/ui/components/InboxTabs/InboxTabs.tsx

+ onMount(() => {
+ const tabsListEl = tabsList();
+ if (!tabsListEl) return;
+
+ const tabs = [...tabsListEl.querySelectorAll('[role="tab"]')];
+
+ const observer = new IntersectionObserver(
+ (entries) => {
+ let visibleTabIds = entries
+ .filter((entry) => entry.isIntersecting && entry.intersectionRatio === 1)
+ .map((entry) => entry.target.id);
+
+ if (tabs.length === visibleTabIds.length) {
+ setVisibleTabs(props.tabs.filter((tab) => visibleTabIds.includes(tab.label)));
+ observer.disconnect();
+ return;
+ }
+
+ visibleTabIds = visibleTabIds.slice(0, -1);
+ setVisibleTabs(props.tabs.filter((tab) => visibleTabIds.includes(tab.label)));
+ setDropdownTabs(props.tabs.filter((tab) => !visibleTabIds.includes(tab.label)));
+ observer.disconnect();
+ },
+ { root: tabsListEl }
+ );
+
+ for (const tabElement of tabs) {
+ observer.observe(tabElement);
+ }
+ });


Calculate which tabs are fully visible in the parent container. The ones that are not visible will be shown in the dropdown.
To have enough space to render the dropdown we remove one tab from the visible tabs list in line 35;

LetItRock · 2024-07-24T16:04:03Z

packages/js/src/ui/components/InboxTabs/InboxTabs.tsx

+ <Tabs.List ref={setTabsList}>
+ {props.tabs.map((tab) => (
+ <InboxTab label={tab.label} class="nt-invisible" />
+ ))}
+ </Tabs.List>


These tabs are rendered hidden at the beginning (otherwise there would be a blink). Then we calculate which ones are fully visible and don't overflow in the parent container. Later we render the visible tabs.

packages/js/src/ui/components/InboxTabs/InboxTabs.tsx

packages/js/src/ui/components/InboxTabs/MoreTabsDropdown.tsx

packages/js/src/ui/components/primitives/Popover/PopoverContent.tsx

LetItRock · 2024-07-24T16:09:57Z

packages/js/src/ui/context/AppearanceContext.tsx

- 'moreActions__dropdownItemLabelContainer',
- 'moreActions__dropdownItemLeftIcon',
+ //Actions dropdown
+ 'actionsContainer',


check the comment in MoreTabsDropdown

LetItRock · 2024-07-25T08:46:25Z

packages/js/src/ui/components/primitives/Tabs/useKeyboardNavigation.ts

+ createEffect(() => {
+ const handleTabKey = (event: KeyboardEvent) => {
+ if (event.key !== 'Tab') {
+ return;
+ }
+
+ const tabs = tabsContainer()?.querySelectorAll('[role="tab"]');
+ if (!tabs || !document.activeElement) {
+ return;
+ }
+
+ setKeyboardNavigation(Array.from(tabs).includes(document.activeElement));
+ };
+
+ document.addEventListener('keyup', handleTabKey);
+
+ return onCleanup(() => document.removeEventListener('keyup', handleTabKey));
+ });


listen to the tab keyboard events and check if document.activeElement is the "tab dom element", if yes allow keyboard navigation with ArrowLeft or ArrowRight

LetItRock · 2024-07-25T08:47:55Z

packages/js/src/ui/components/primitives/Tabs/useKeyboardNavigation.ts

+ createEffect(() => {
+ const handleArrowKeys = (event: KeyboardEvent) => {
+ if (!keyboardNavigation() || (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')) {
+ return;
+ }
+
+ const tabElements = Array.from<HTMLButtonElement>(tabsContainer()?.querySelectorAll('[role="tab"]') ?? []);
+ const tabIds = tabElements.map((tab) => tab.id);
+ let currentIndex = tabIds.indexOf(activeTab());
+ const length = tabIds.length;
+ let activeIndex = currentIndex;
+ let newTab = activeTab();
+ if (event.key === 'ArrowLeft') {
+ activeIndex = currentIndex === 0 ? length - 1 : currentIndex - 1;
+ newTab = tabIds[activeIndex];
+ } else if (event.key === 'ArrowRight') {
+ activeIndex = currentIndex === length - 1 ? 0 : currentIndex + 1;
+ newTab = tabIds[activeIndex];
+ }
+
+ tabElements[activeIndex].focus();
+ setActiveTab(newTab);
+ };
+
+ document.addEventListener('keydown', handleArrowKeys);
+
+ return onCleanup(() => document.removeEventListener('keydown', handleArrowKeys));
+ });


the keyboard arrow keys navigation between the tabs; calculations for the next tab to focus and set active tab;

desiprisg

Generally, I'd prefer it if we implemented the tabs more the <Popover>, as we could set the default tabs styles in a function (like popoverContentVariants()), and default to those, unless another class prop is specified. See PopoverContent.tsx for reference.

We only need one instance of Tabs for now, so I'd say this could also be a cleanup ticket post-release.

packages/js/src/ui/components/InboxTabs/MoreTabsDropdown.tsx

packages/js/src/ui/components/primitives/Tabs/Tabs.tsx

packages/js/src/ui/components/primitives/Tabs/TabsPanel.tsx

packages/js/src/ui/components/primitives/Tabs/TabsTab.tsx

packages/js/src/ui/icons/Check.tsx

packages/js/src/ui/novuUI.tsx

LetItRock · 2024-07-31T22:22:36Z

packages/js/src/ui/components/Inbox.tsx

@@ -51,11 +60,8 @@ export const Inbox = (props: InboxProps) => {
 </Button>
 )}
 />
- <Popover.Content
- appearanceKey="inbox__popoverContent"
- class={cn(popoverContentVariants(), 'nt-max-w-96 nt-w-full')}


moved to the variants function

LetItRock requested review from SokratisVidros, BiswaViraj and desiprisg July 24, 2024 15:46

LetItRock self-assigned this Jul 24, 2024

LetItRock temporarily deployed to Linting July 24, 2024 15:46 — with GitHub Actions Inactive

LetItRock temporarily deployed to Linting July 24, 2024 15:54 — with GitHub Actions Inactive

LetItRock commented Jul 24, 2024

View reviewed changes

LetItRock temporarily deployed to Linting July 24, 2024 17:10 — with GitHub Actions Inactive

LetItRock commented Jul 25, 2024

View reviewed changes

desiprisg reviewed Jul 25, 2024

View reviewed changes

LetItRock force-pushed the com-43-inbox-tabs branch from d4fa90a to d646347 Compare July 25, 2024 15:45

LetItRock temporarily deployed to Linting July 25, 2024 15:45 — with GitHub Actions Inactive

LetItRock force-pushed the com-43-inbox-tabs branch from d646347 to 00000aa Compare July 26, 2024 11:18

LetItRock temporarily deployed to Linting July 26, 2024 11:18 — with GitHub Actions Inactive

LetItRock added a commit that referenced this pull request Jul 26, 2024

chore(js): inbox tabs added suggestions from the pr #6149

650f532

LetItRock temporarily deployed to Linting July 26, 2024 15:43 — with GitHub Actions Inactive

LetItRock temporarily deployed to Linting July 31, 2024 22:21 — with GitHub Actions Inactive

LetItRock commented Jul 31, 2024

View reviewed changes

LetItRock temporarily deployed to Linting July 31, 2024 22:39 — with GitHub Actions Inactive

LetItRock requested review from desiprisg and SokratisVidros July 31, 2024 22:39

LetItRock added 11 commits August 1, 2024 09:16

feat(js): inbox tabs

2cfa0d4

chore(js): fixed rendering when there is enough space for tabs

a9aae53

feat(js): inbox tabs keyboard and tab navigation

3ae8c29

chore(js): inbox tabs added suggestions from the pr #6149

3b46593

chore(js): fixed eslint configuration and errors

f32c23f

chore(js): suggestions from the pr #6149

f097593

chore(js): suggestions from the pr #6149

7fc01a3

chore(js): the branch fixes after the rebase

88ecac7

chore(js): inbox tabs added suggestions from the pr #6149

931239a

chore(js): inbox tabs moved tabs dropdown logic to hook

49169e9

chore(js): inbox tabs updated code after rebase

ee854a6

LetItRock force-pushed the com-43-inbox-tabs branch from 7c8d105 to ee854a6 Compare August 1, 2024 07:24

LetItRock temporarily deployed to Linting August 1, 2024 07:24 — with GitHub Actions Inactive

SokratisVidros approved these changes Aug 1, 2024

View reviewed changes

LetItRock merged commit 229b3c1 into next Aug 1, 2024
24 checks passed

LetItRock deleted the com-43-inbox-tabs branch August 1, 2024 11:36

BiswaViraj pushed a commit that referenced this pull request Aug 1, 2024

chore(js): inbox tabs added suggestions from the pr #6149

0db00de

BiswaViraj pushed a commit that referenced this pull request Aug 1, 2024

chore(js): suggestions from the pr #6149

bb59756

BiswaViraj pushed a commit that referenced this pull request Aug 1, 2024

chore(js): suggestions from the pr #6149

a98f959

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(js): inbox tabs #6149

feat(js): inbox tabs #6149

LetItRock commented Jul 24, 2024 •

edited

Loading

linear bot commented Jul 24, 2024

LetItRock Jul 24, 2024

LetItRock Jul 24, 2024

desiprisg Jul 29, 2024

LetItRock Jul 24, 2024

LetItRock Jul 24, 2024

LetItRock Jul 24, 2024

LetItRock Jul 24, 2024

LetItRock Jul 25, 2024

LetItRock Jul 25, 2024

desiprisg left a comment

LetItRock Jul 31, 2024

feat(js): inbox tabs #6149

feat(js): inbox tabs #6149

Conversation

LetItRock commented Jul 24, 2024 • edited Loading

What changed? Why was the change needed?

Screenshots

linear bot commented Jul 24, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

desiprisg left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

LetItRock commented Jul 24, 2024 •

edited

Loading