Move tab row pins and default-pin terminal and browser

packages/app/src/workspace-pins/pinned-targets-row.tsx

@@ -42,8 +42,8 @@ const styles = StyleSheet.create((theme) => ({
     alignItems: "center",
   },
   pinButton: {
-    width: 28,
-    height: 28,
+    width: 22,
+    height: 22,
     borderRadius: theme.borderRadius.md,
     alignItems: "center",
     justifyContent: "center",

packages/app/src/workspace-pins/store.ts

@@ -9,6 +9,18 @@ interface PinnedTargetsState {
   isPinned: (target: PinnedTabTarget) => boolean;
 }
 
+const DEFAULT_PINNED_TARGETS: PinnedTabTarget[] = [{ kind: "terminal" }, { kind: "browser" }];
+
+function applyDefaultPinnedTargets(pinned: PinnedTabTarget[]): PinnedTabTarget[] {
+  const next = [...DEFAULT_PINNED_TARGETS];
+  for (const target of pinned) {
+    if (!isTargetPinned(next, target)) {
+      next.push(target);
+    }
+  }
+  return next;
+}
+
 export const usePinnedTargetsStore = create<PinnedTargetsState>()(
   persist(
     (set, get) => ({
@@ -18,8 +30,16 @@ export const usePinnedTargetsStore = create<PinnedTargetsState>()(
     }),
     {
       name: "pinned-tab-targets",
+      version: 1,
       storage: createJSONStorage(() => AsyncStorage),
       partialize: (state) => ({ pinned: state.pinned }),
+      migrate: (persistedState, version) => {
+        if (version === 0) {
+          const pinned = (persistedState as { pinned?: PinnedTabTarget[] } | null)?.pinned ?? [];
+          return { pinned: applyDefaultPinnedTargets(pinned) };
+        }
+        return persistedState as PinnedTargetsState;
+      },
     },
   ),
 );