Add pinnable new-tab targets to the tab row and sidebar

Any new-tab target (new agent, terminal, browser, or a terminal profile) can be pinned as a quick-launch button. Pins are global client app state (persisted), not daemon config, so the same set shows on every workspace; profile pins resolve per host and are dropped where that profile is absent. The sidebar mirror launches via a navigate-then-launch intent store rather than calling the create handlers directly: terminal creation only works in the mounted/focused workspace, so the sidebar requests the launch and the workspace screen consumes it on focus.
2026-06-15 14:09:29 +07:00
parent 42969e40d5
commit 713a042dc5
22 changed files with 835 additions and 65 deletions
@@ -0,0 +1,58 @@
+import type { ReactElement } from "react";
+import { Text, View, type PressableStateCallbackType } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import type { ResolvedPin } from "@/workspace-pins/launch";
+
+function pinButtonStyle({ hovered, pressed }: PressableStateCallbackType & { hovered?: boolean }) {
+  return [styles.pinButton, (Boolean(hovered) || pressed) && styles.pinButtonHovered];
+}
+
+interface PinnedTargetsRowProps {
+  launchers: ResolvedPin[];
+  testIdPrefix: string;
+}
+
+export function PinnedTargetsRow({ launchers, testIdPrefix }: PinnedTargetsRowProps): ReactElement {
+  return (
+    <View style={styles.row}>
+      {launchers.map((launcher) => (
+        <Tooltip key={launcher.key} delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
+          <TooltipTrigger
+            testID={`${testIdPrefix}-${launcher.key}`}
+            onPress={launcher.onPress}
+            accessibilityRole="button"
+            accessibilityLabel={launcher.label}
+            style={pinButtonStyle}
+          >
+            {launcher.icon}
+          </TooltipTrigger>
+          <TooltipContent side="bottom" align="center" offset={8}>
+            <Text style={styles.tooltipText}>{launcher.label}</Text>
+          </TooltipContent>
+        </Tooltip>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  pinButton: {
+    width: 28,
+    height: 28,
+    borderRadius: theme.borderRadius.md,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  pinButtonHovered: {
+    backgroundColor: theme.colors.surface2,
+  },
+  tooltipText: {
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize.sm,
+  },
+}));