1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
import {
isSome,
unwrapOptional as unwrap,
} from '@jet/environment/types/optional';
import type { NavigationItem } from '@amp/web-app-components/src/components/Navigation/types';
import type { NavigationId } from '@amp/web-app-components/src/types';
import type {
WebNavigation,
WebNavigationLink,
} from '@jet-app/app-store/api/models/web-navigation';
import {
isSystemImageArtwork,
getIconNameFromTemplate,
} from '~/components/SystemImage.svelte';
import { getIconComponentByName } from '../SFSymbol.svelte';
import type { Artwork } from '@jet-app/app-store/api/models';
import CategoryTabItem from '~/components/jet/web-navigation/CategoryTabItem.svelte';
/**
* A {@linkcode NavigationItem} that includes the original {@linkcode WebNavigationLink}
* it was defined from, which is needed for the
*/
export interface NavigationItemWithTab extends NavigationItem {
tab: WebNavigationLink;
artwork?: Artwork;
isActive?: boolean;
}
export function navigationIdFromLink(link: WebNavigationLink): NavigationId {
const intent = unwrap(link.action.destination);
return {
type: intent.$kind,
// `intent.$kind` will be unique for each `Intent` used here as they are
// each a different `LandingPageIntent`
resourceId: link.action.pageUrl ?? intent.$kind,
};
}
/**
* Transform the "tabs" in the `WebNavigation` into a shape that works with our
* shared navigation side-bar components.
*/
export function makeNavLinks(
tabs: WebNavigationLink[],
{ shouldShowSearchTab = false },
): NavigationItemWithTab[] {
return tabs
.filter((tab) => {
const isSearchTab =
tab.action?.destination?.['$kind'].includes('search_Intent');
// Allows for filtering our the search tab, which we use when the sidebar is visible,
// since there is a search input in the sidebar
return isSearchTab ? shouldShowSearchTab : true;
})
.map((tab) => {
const { action, artwork: tabArtwork } = tab;
const { artwork } = action || {};
const hasSystemImageArtwork =
isSome(artwork) && isSystemImageArtwork(artwork);
return {
id: navigationIdFromLink(tab),
label: unwrap(tab.action.title),
url: action.pageUrl ?? undefined,
icon: hasSystemImageArtwork
? getIconComponentByName(
getIconNameFromTemplate(artwork.template),
)
: undefined,
artwork: tabArtwork,
component: !hasSystemImageArtwork ? CategoryTabItem : undefined,
tab,
};
});
}
|
