feat(sidebar): group threads by environment

apps/mobile/src/features/home/HomeRouteScreen.tsx

@@ -83,17 +83,33 @@ export function HomeRouteScreen() {
   } = useHomeListOptions(availableEnvironmentIds);
   const selectedEnvironmentId = listOptions.selectedEnvironmentId;
   const [selectedProjectKey, setSelectedProjectKey] = useState<string | null>(null);
+  const environmentLabelById = useMemo(
+    () =>
+      new Map(environments.map((environment) => [environment.environmentId, environment.label])),
+    [environments],
+  );
   const projectFilterOptions = useMemo(
     () =>
       buildHomeProjectScopes({
         projects,
         environmentId: selectedEnvironmentId,
         projectGroupingMode: listOptions.projectGroupingMode,
+        environmentGroupingEnabled:
+          listOptions.environmentGroupingEnabled && selectedEnvironmentId === null,
       }).map((scope) => ({
         key: scope.key,
-        label: scope.title,
+        label:
+          listOptions.environmentGroupingEnabled && selectedEnvironmentId === null
+            ? `${scope.title} · ${environmentLabelById.get(scope.representative.environmentId) ?? "Unknown environment"}`
+            : scope.title,
       })),
-    [listOptions.projectGroupingMode, projects, selectedEnvironmentId],
+    [
+      environmentLabelById,
+      listOptions.environmentGroupingEnabled,
+      listOptions.projectGroupingMode,
+      projects,
+      selectedEnvironmentId,
+    ],
   );
   useEffect(() => {
     if (
@@ -228,6 +244,7 @@ export function HomeRouteScreen() {
           onThreadSortOrderChange={setThreadSortOrder}
           pendingTasks={pendingTasks}
           projectGroupingMode={listOptions.projectGroupingMode}
+          environmentGroupingEnabled={listOptions.environmentGroupingEnabled}
           projects={projects}
           projectSortOrder={listOptions.projectSortOrder}
           savedConnectionsById={savedConnectionsById}

apps/mobile/src/features/home/HomeScreen.tsx

@@ -91,6 +91,7 @@ interface HomeScreenProps {
   readonly projectSortOrder: HomeProjectSortOrder;
   readonly threadSortOrder: SidebarThreadSortOrder;
   readonly projectGroupingMode: SidebarProjectGroupingMode;
+  readonly environmentGroupingEnabled: boolean;
   readonly onSearchQueryChange: (query: string) => void;
   readonly onEnvironmentChange: (environmentId: EnvironmentId | null) => void;
   readonly onProjectChange: (projectKey: string | null) => void;
@@ -307,8 +308,15 @@ export function HomeScreen(props: HomeScreenProps) {
         projects: props.projects,
         environmentId: props.selectedEnvironmentId,
         projectGroupingMode: props.projectGroupingMode,
+        environmentGroupingEnabled:
+          props.environmentGroupingEnabled && props.selectedEnvironmentId === null,
       }),
-    [props.projectGroupingMode, props.projects, props.selectedEnvironmentId],
+    [
+      props.environmentGroupingEnabled,
+      props.projectGroupingMode,
+      props.projects,
+      props.selectedEnvironmentId,
+    ],
   );
   const selectedProjectScope = useMemo(
     () =>
@@ -378,9 +386,12 @@ export function HomeScreen(props: HomeScreenProps) {
         projectSortOrder: props.projectSortOrder,
         threadSortOrder: props.threadSortOrder,
         projectGroupingMode: props.projectGroupingMode,
+        environmentGroupingEnabled:
+          props.environmentGroupingEnabled && props.selectedEnvironmentId === null,
       }),
     [
       props.projectGroupingMode,
+      props.environmentGroupingEnabled,
       props.projectSortOrder,
       props.searchQuery,
       props.selectedEnvironmentId,
@@ -399,8 +410,24 @@ export function HomeScreen(props: HomeScreenProps) {
         groups: projectGroups,
         displayStates: effectiveGroupDisplayStates,
         showAllThreads: hasSearchQuery,
+        environmentLabelById:
+          props.environmentGroupingEnabled && props.selectedEnvironmentId === null
+            ? new Map(
+                props.environments.map((environment) => [
+                  String(environment.environmentId),
+                  environment.label,
+                ]),
+              )
+            : undefined,
       }),
-    [projectGroups, effectiveGroupDisplayStates, hasSearchQuery],
+    [
+      effectiveGroupDisplayStates,
+      hasSearchQuery,
+      projectGroups,
+      props.environmentGroupingEnabled,
+      props.environments,
+      props.selectedEnvironmentId,
+    ],
   );
 
   const projectCwdByKey = useMemo(() => {
@@ -910,6 +937,13 @@ export function HomeScreen(props: HomeScreenProps) {
   const renderItem = useCallback(
     ({ item }: LegendListRenderItemProps<HomeListItem>) => {
       switch (item.type) {
+        case "environment-header":
+          return (
+            <View className="mx-4 mt-4 flex-row items-center gap-2">
+              <Text className="text-xs font-t3-medium text-foreground-muted">{item.label}</Text>
+              <View className="h-px flex-1 bg-border-subtle" />
+            </View>
+          );
         case "header":
           return (
             <ThreadListGroupHeader

apps/mobile/src/features/home/home-list-options.ts

@@ -29,6 +29,7 @@ export interface HomeListOptions {
 
 export interface ResolvedHomeListOptions extends HomeListOptions {
   readonly projectGroupingMode: SidebarProjectGroupingMode;
+  readonly environmentGroupingEnabled: boolean;
 }
 
 export const PROJECT_SORT_OPTIONS: ReadonlyArray<{
@@ -62,6 +63,7 @@ interface HomeListOptionsContextValue {
   readonly options: HomeListOptions;
   readonly setOptions: Dispatch<SetStateAction<HomeListOptions>>;
   readonly projectGroupingMode: SidebarProjectGroupingMode;
+  readonly environmentGroupingEnabled: boolean;
 }
 
 const HomeListOptionsContext = createContext<HomeListOptionsContextValue | null>(null);
@@ -70,13 +72,15 @@ const HomeListOptionsContext = createContext<HomeListOptionsContextValue | null>
 export function HomeListOptionsProvider({
   children,
   projectGroupingMode,
+  environmentGroupingEnabled,
 }: PropsWithChildren<{
   readonly projectGroupingMode: SidebarProjectGroupingMode;
+  readonly environmentGroupingEnabled: boolean;
 }>) {
   const [options, setOptions] = useState<HomeListOptions>(defaultHomeListOptions);
   const value = useMemo(
-    () => ({ options, setOptions, projectGroupingMode }),
-    [options, projectGroupingMode],
+    () => ({ options, setOptions, projectGroupingMode, environmentGroupingEnabled }),
+    [environmentGroupingEnabled, options, projectGroupingMode],
   );
   return createElement(HomeListOptionsContext, { value }, children);
 }
@@ -115,6 +119,7 @@ export function useHomeListOptions(availableEnvironmentIds: ReadonlySet<Environm
   const resolvedOptions: ResolvedHomeListOptions = {
     ...availableOptions,
     projectGroupingMode: shared?.projectGroupingMode ?? "repository",
+    environmentGroupingEnabled: shared?.environmentGroupingEnabled ?? false,
   };
 
   const setSelectedEnvironmentId = useCallback((value: EnvironmentId | null) => {

apps/mobile/src/features/home/homeListItems.test.ts

@@ -87,6 +87,43 @@ function displayStates(
 }
 
 describe("buildHomeListLayout", () => {
+  it("adds an environment header before each environment's project groups", () => {
+    const local = makeGroup("local", 1);
+    const remoteEnvironmentId = EnvironmentId.make("environment-2");
+    const remoteProject = {
+      ...makeProject("remote", "remote"),
+      environmentId: remoteEnvironmentId,
+    };
+    const remote = {
+      ...makeGroup("remote", 1),
+      representative: remoteProject,
+      projects: [remoteProject],
+      newThreadTarget: remoteProject,
+    };
+
+    const layout = buildHomeListLayout({
+      groups: [local, remote],
+      displayStates: displayStates({}),
+      environmentLabelById: new Map([
+        [String(environmentId), "MacBook Pro"],
+        [String(remoteEnvironmentId), "Linux VM"],
+      ]),
+    });
+
+    expect(layout.items.filter((item) => item.type === "environment-header")).toEqual([
+      {
+        type: "environment-header",
+        key: `environment-header:${environmentId}`,
+        label: "MacBook Pro",
+      },
+      {
+        type: "environment-header",
+        key: `environment-header:${remoteEnvironmentId}`,
+        label: "Linux VM",
+      },
+    ]);
+  });
+
   it("renders a header plus all threads for a small group without a show-more row", () => {
     const layout = buildHomeListLayout({
       groups: [makeGroup("alpha", 3)],

apps/mobile/src/features/home/homeListItems.ts

@@ -27,6 +27,12 @@ export interface HomeHeaderListItem {
   readonly isFirst: boolean;
 }
 
+export interface HomeEnvironmentHeaderListItem {
+  readonly type: "environment-header";
+  readonly key: string;
+  readonly label: string;
+}
+
 export interface HomeThreadListItem {
   readonly type: "thread";
   readonly key: string;
@@ -52,6 +58,7 @@ export interface HomeShowMoreListItem {
 }
 
 export type HomeListItem =
+  | HomeEnvironmentHeaderListItem
   | HomeHeaderListItem
   | HomePendingTaskListItem
   | HomeThreadListItem
@@ -87,6 +94,8 @@ export function nextGroupDisplayState(
  */
 export function homeListItemsAreEqual(previous: HomeListItem, item: HomeListItem): boolean {
   switch (item.type) {
+    case "environment-header":
+      return previous.type === "environment-header" && previous.label === item.label;
     case "header":
       return (
         previous.type === "header" &&
@@ -123,11 +132,24 @@ export function buildHomeListLayout(input: {
    * When searching, pagination is suspended so every match stays visible.
    */
   readonly showAllThreads?: boolean;
+  readonly environmentLabelById?: ReadonlyMap<string, string>;
 }): HomeListLayout {
   const items: HomeListItem[] = [];
   const stickyHeaderIndices: number[] = [];
 
+  let previousEnvironmentId: string | null = null;
   for (const [groupIndex, group] of input.groups.entries()) {
+    const environmentId = String(group.representative.environmentId);
+    const environmentLabel = input.environmentLabelById?.get(environmentId);
+    const startsEnvironment = Boolean(environmentLabel && environmentId !== previousEnvironmentId);
+    if (environmentLabel && startsEnvironment) {
+      items.push({
+        type: "environment-header",
+        key: `environment-header:${environmentId}`,
+        label: environmentLabel,
+      });
+      previousEnvironmentId = environmentId;
+    }
     const display = input.displayStates.get(group.key) ?? DEFAULT_GROUP_DISPLAY_STATE;
     const collapsed = display.collapsed && input.showAllThreads !== true;
 
@@ -137,7 +159,7 @@ export function buildHomeListLayout(input: {
       key: `header:${group.key}`,
       group,
       collapsed,
-      isFirst: groupIndex === 0,
+      isFirst: groupIndex === 0 || startsEnvironment,
     });
 
     if (collapsed) {

apps/mobile/src/features/home/homeThreadList.test.ts

@@ -115,6 +115,44 @@ describe("buildHomeThreadGroups", () => {
     );
   });
 
+  it("keeps matching repositories in separate environment sections", () => {
+    const localEnvironmentId = EnvironmentId.make("environment-local");
+    const remoteEnvironmentId = EnvironmentId.make("environment-remote");
+    const repositoryIdentity = {
+      canonicalKey: "github.com/pingdotgg/t3code",
+      locator: {
+        source: "git-remote" as const,
+        remoteName: "origin",
+        remoteUrl: "git@github.com:pingdotgg/t3code.git",
+      },
+    };
+    const projects = [
+      makeProject({
+        environmentId: localEnvironmentId,
+        id: ProjectId.make("project-local"),
+        title: "t3code",
+        repositoryIdentity,
+      }),
+      makeProject({
+        environmentId: remoteEnvironmentId,
+        id: ProjectId.make("project-remote"),
+        title: "t3code",
+        repositoryIdentity,
+      }),
+    ];
+
+    const scopes = buildHomeProjectScopes({
+      projects,
+      environmentId: null,
+      projectGroupingMode: "repository",
+      environmentGroupingEnabled: true,
+    });
+
+    expect(scopes).toHaveLength(2);
+    expect(scopes.map((scope) => scope.projects)).toEqual([[projects[0]], [projects[1]]]);
+    expect(new Set(scopes.map((scope) => scope.key)).size).toBe(2);
+  });
+
   it("routes stale duplicate project refs through the canonical repository group", () => {
     const localEnvironmentId = EnvironmentId.make("environment-local");
     const remoteEnvironmentId = EnvironmentId.make("environment-remote");