1import { selectedNavigationTab, visibleNavigationTabs } from "./navigation-tab-order";
2import { Toolbar } from "../../../components/ui/Toolbar";
3import { useControlTheme } from "../../../components/ui/useControlTheme";
4import { useDeviceType } from "../../../native/native-layout-metrics";
5import {
6 NAVIGATION_TAB_ICONS,
7 WORKSPACE_TAB_LABELS,
8 useNavigationTabOrder,
9 useHiddenNavigationTabs,
10} from "./navigation-tabs";
11import { useWorkspaceTabs } from "./WorkspaceTabsContext";
12import { useSelectWorkspaceTab } from "./useSelectWorkspaceTab";
13import { useCompactWorkspaceTabs, useSidebarWorkspaceTabs } from "./useSystemWorkspaceTabBar";
14
15const PULL_REQUEST_ICON = require("../../../../assets/icons/pull-request.png");
16
17export function WorkspaceTabToolbarButtons() {
18 const order = useNavigationTabOrder();
19 const hidden = useHiddenNavigationTabs();
20 const workspace = useWorkspaceTabs()!;
21 const selectTab = useSelectWorkspaceTab();
22 const selected = selectedNavigationTab(
23 order,
24 workspace.state.selectedTab,
25 workspace.settingsOpen,
26 hidden,
27 );
28 const selectedTint = useControlTheme().colors["--color-primary"];
29 return (
30 <>
31 {visibleNavigationTabs(order, hidden).map((tab) => (
32 <Toolbar.Button
33 key={tab}
34 identifier={`workspace-tab-${tab}`}
35 accessibilityLabel={WORKSPACE_TAB_LABELS[tab]}
36 icon={
37 tab === "pullRequests"
38 ? { type: "image", source: PULL_REQUEST_ICON, tinted: true }
39 : NAVIGATION_TAB_ICONS[tab]
40 }
41 tintColor={selected === tab ? selectedTint : undefined}
42 onPress={() => selectTab(tab)}
43 />
44 ))}
45 <Toolbar.Button
46 identifier="workspace-tab-settings"
47 accessibilityLabel="Settings"
48 icon="gearshape"
49 tintColor={selected === "settings" ? selectedTint : undefined}
50 onPress={() => selectTab("settings")}
51 />
52 </>
53 );
54}
55
56export function WorkspaceSectionToolbar({
57 onNewTask,
58 showCompose = true,
59}: {
60 readonly onNewTask: () => void;
61 readonly showCompose?: boolean;
62}) {
63 const sidebarTabs = useSidebarWorkspaceTabs();
64 const compactTabs = useCompactWorkspaceTabs();
65 const deviceType = useDeviceType();
66 return (
67 <>
68 {showCompose && sidebarTabs !== "picker" && deviceType !== "duo-unfolded" && !compactTabs ? (
69 <Toolbar placement="right">
70 <Toolbar.Button
71 accessibilityLabel="New chat"
72 icon="square.and.pencil"
73 onPress={onNewTask}
74 />
75 </Toolbar>
76 ) : null}
77 {sidebarTabs === "toolbar" ? (
78 <Toolbar placement="bottom">
79 <WorkspaceTabToolbarButtons />
80 </Toolbar>
81 ) : null}
82 </>
83 );
84}