fix(mobile): show project favicons in filters

apps/mobile/src/components/AndroidAnchoredMenu.tsx

@@ -42,6 +42,8 @@ export type AndroidAnchoredMenuProps = {
   readonly actions: readonly MenuAction[];
   readonly title?: string;
   readonly onPressAction?: MenuComponentProps["onPressAction"];
+  /** Optional Android-only content rendered before the standard trailing state glyph. */
+  readonly renderActionTrailing?: (action: MenuAction) => ReactNode;
   /** Applied to the anchor wrapper — call sites flex these to fill toolbars. */
   readonly className?: string;
   readonly style?: StyleProp<ViewStyle>;
@@ -276,6 +278,7 @@ export function AndroidAnchoredMenu(props: AndroidAnchoredMenuProps) {
                     const destructive = action.attributes?.destructive ?? false;
                     const disabled = action.attributes?.disabled ?? false;
                     const hasSubmenu = (action.subactions?.length ?? 0) > 0;
+                    const customTrailing = props.renderActionTrailing?.(action);
                     return (
                       <Pressable
                         key={action.id ?? `${index}-${action.title}`}
@@ -303,6 +306,7 @@ export function AndroidAnchoredMenu(props: AndroidAnchoredMenuProps) {
                             </Text>
                           ) : null}
                         </View>
+                        {customTrailing}
                         {hasSubmenu ? (
                           <SymbolView
                             name="chevron.right"

apps/mobile/src/components/ControlPill.tsx

@@ -13,7 +13,7 @@ import { useThemeColor } from "../lib/useThemeColor";
 import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider";
 
 import { cn } from "../lib/cn";
-import { AndroidAnchoredMenu } from "./AndroidAnchoredMenu";
+import { AndroidAnchoredMenu, type AndroidAnchoredMenuProps } from "./AndroidAnchoredMenu";
 import { SymbolView } from "./AppSymbol";
 import { AppText as Text } from "./AppText";
 
@@ -116,6 +116,7 @@ export function ControlPillMenu(
   props: Omit<ComponentProps<typeof MenuView>, "children" | "themeVariant"> & {
     readonly children: ReactNode;
     readonly className?: string;
+    readonly renderActionTrailing?: AndroidAnchoredMenuProps["renderActionTrailing"];
   },
 ) {
   const { themeAppearance } = useAppearancePreferences();
@@ -134,6 +135,7 @@ export function ControlPillMenu(
           title={props.title}
           style={props.style}
           onPressAction={props.onPressAction}
+          renderActionTrailing={props.renderActionTrailing}
         >
           {(open) =>
             cloneElement(child, {
@@ -153,13 +155,18 @@ export function ControlPillMenu(
         title={props.title}
         style={props.style}
         onPressAction={props.onPressAction}
+        renderActionTrailing={props.renderActionTrailing}
       >
         {props.children}
       </AndroidAnchoredMenu>
     );
   }
 
-  const { className: _className, ...menuProps } = props;
+  const {
+    className: _className,
+    renderActionTrailing: _renderActionTrailing,
+    ...menuProps
+  } = props;
   let children = menuProps.children;
   // In long-press mode the wrapped pressable still receives the touch (the
   // patched MenuView button is touch-transparent) and RN's Fabric touch

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

@@ -0,0 +1,31 @@
+import type { MenuAction } from "@react-native-menu/menu";
+import type { ReactNode } from "react";
+
+import { ProjectFavicon } from "../../components/ProjectFavicon";
+import { SymbolView } from "../../components/AppSymbol";
+import { useThemeColor } from "../../lib/useThemeColor";
+import { resolveAndroidProjectFilterProject } from "./android-home-list-filter-menu";
+import type { HomeListFilterMenuProject } from "./home-list-filter-menu";
+
+export function AndroidProjectFilterIcon(props: {
+  readonly action: MenuAction;
+  readonly projects: ReadonlyArray<HomeListFilterMenuProject>;
+}): ReactNode {
+  const iconColor = useThemeColor("--color-icon");
+  if (props.action.id === "project:all") {
+    return <SymbolView name="folder" size={18} tintColor={iconColor} type="monochrome" />;
+  }
+
+  const project = resolveAndroidProjectFilterProject(props.action.id, props.projects);
+  if (project === null) return null;
+
+  return (
+    <ProjectFavicon
+      environmentId={project.environmentId}
+      faviconPath={project.faviconPath}
+      projectTitle={project.label}
+      size={18}
+      workspaceRoot={project.workspaceRoot}
+    />
+  );
+}

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

@@ -21,6 +21,8 @@ import {
   NATIVE_MAIL_SEARCH_TOOLBAR_SUPPORTED,
 } from "../layout/native-mail-search-toolbar";
 import type { HomeProjectSortOrder } from "./homeThreadList";
+import { buildAndroidProjectFilterActions } from "./android-home-list-filter-menu";
+import { AndroidProjectFilterIcon } from "./AndroidProjectFilterIcon";
 import { WorkspaceConnectionTitle } from "./WorkspaceConnectionTitle";
 import {
   buildHomeListFilterMenu,
@@ -101,18 +103,10 @@ function AndroidHomeHeader(props: HomeHeaderProps) {
             {
               id: "project",
               title: "Project",
-              subactions: [
-                {
-                  id: "project:all",
-                  title: "All projects",
-                  state: checkedMenuState(props.selectedProjectKey === null),
-                },
-                ...props.projects.map((project) => ({
-                  id: `project:${project.key}`,
-                  title: project.label,
-                  state: checkedMenuState(props.selectedProjectKey === project.key),
-                })),
-              ],
+              subactions: buildAndroidProjectFilterActions(
+                props.projects,
+                props.selectedProjectKey,
+              ),
             },
           ] satisfies MenuAction[])),
       ...(threadListV2Enabled
@@ -235,6 +229,9 @@ function AndroidHomeHeader(props: HomeHeaderProps) {
               actions={menuActions}
               isAnchoredToRight
               onPressAction={handleMenuAction}
+              renderActionTrailing={(action) => (
+                <AndroidProjectFilterIcon action={action} projects={props.projects} />
+              )}
             >
               <Pressable
                 accessibilityLabel="Filter and sort threads"

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

@@ -88,6 +88,9 @@ export function HomeRouteScreen() {
       }).map((scope) => ({
         key: scope.key,
         label: scope.title,
+        environmentId: scope.representative.environmentId,
+        workspaceRoot: scope.representative.workspaceRoot,
+        faviconPath: scope.representative.faviconPath ?? null,
       })),
     [listOptions.projectGroupingMode, projects, selectedEnvironmentId],
   );

apps/mobile/src/features/home/android-home-list-filter-menu.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, it } from "vite-plus/test";
+import { EnvironmentId } from "@t3tools/contracts";
+
+import {
+  buildAndroidProjectFilterActions,
+  resolveAndroidProjectFilterProject,
+} from "./android-home-list-filter-menu";
+
+const projects = [
+  {
+    key: "environment-1:project-1",
+    label: "Codething",
+    environmentId: EnvironmentId.make("environment-1"),
+    workspaceRoot: "/workspace/codething",
+    faviconPath: "brand/icon.svg",
+  },
+  {
+    key: "environment-1:project-2",
+    label: "Website",
+    environmentId: EnvironmentId.make("environment-1"),
+    workspaceRoot: "/workspace/website",
+    faviconPath: null,
+  },
+] as const;
+
+describe("buildAndroidProjectFilterActions", () => {
+  it("keeps project action identity separate from the selected state", () => {
+    const actions = buildAndroidProjectFilterActions(projects, "environment-1:project-1");
+
+    expect(actions).toMatchObject([
+      { id: "project:all" },
+      { id: "project:environment-1:project-1", state: "on" },
+      { id: "project:environment-1:project-2" },
+    ]);
+  });
+
+  it("resolves the matching project data for its recognized favicon", () => {
+    expect(resolveAndroidProjectFilterProject("project:environment-1:project-1", projects)).toEqual(
+      projects[0],
+    );
+    expect(resolveAndroidProjectFilterProject("project:all", projects)).toBeNull();
+    expect(resolveAndroidProjectFilterProject("environment:all", projects)).toBeNull();
+  });
+});

apps/mobile/src/features/home/android-home-list-filter-menu.ts

@@ -0,0 +1,34 @@
+import type { MenuAction } from "@react-native-menu/menu";
+
+import type { HomeListFilterMenuProject } from "./home-list-filter-menu";
+
+function checkedMenuState(checked: boolean) {
+  return checked ? ("on" as const) : undefined;
+}
+
+export function buildAndroidProjectFilterActions(
+  projects: ReadonlyArray<HomeListFilterMenuProject>,
+  selectedProjectKey: string | null,
+): MenuAction[] {
+  return [
+    {
+      id: "project:all",
+      title: "All projects",
+      state: checkedMenuState(selectedProjectKey === null),
+    },
+    ...projects.map((project) => ({
+      id: `project:${project.key}`,
+      title: project.label,
+      state: checkedMenuState(selectedProjectKey === project.key),
+    })),
+  ];
+}
+
+export function resolveAndroidProjectFilterProject(
+  actionId: string | undefined,
+  projects: ReadonlyArray<HomeListFilterMenuProject>,
+): HomeListFilterMenuProject | null {
+  if (!actionId?.startsWith("project:") || actionId === "project:all") return null;
+  const projectKey = actionId.slice("project:".length);
+  return projects.find((project) => project.key === projectKey) ?? null;
+}

apps/mobile/src/features/home/home-list-filter-menu.test.ts

@@ -1,4 +1,5 @@
 import { describe, expect, it, vi } from "vite-plus/test";
+import { EnvironmentId } from "@t3tools/contracts";
 
 import { buildHomeListFilterMenu } from "./home-list-filter-menu";
 
@@ -8,8 +9,20 @@ describe("buildHomeListFilterMenu", () => {
     const menu = buildHomeListFilterMenu({
       environments: [],
       projects: [
-        { key: "environment-1:project-1", label: "Codething" },
-        { key: "environment-1:project-2", label: "Website" },
+        {
+          key: "environment-1:project-1",
+          label: "Codething",
+          environmentId: EnvironmentId.make("environment-1"),
+          workspaceRoot: "/workspace/codething",
+          faviconPath: null,
+        },
+        {
+          key: "environment-1:project-2",
+          label: "Website",
+          environmentId: EnvironmentId.make("environment-1"),
+          workspaceRoot: "/workspace/website",
+          faviconPath: null,
+        },
       ],
       selectedEnvironmentId: null,
       selectedProjectKey: "environment-1:project-1",

apps/mobile/src/features/home/home-list-filter-menu.ts

@@ -11,6 +11,9 @@ export interface HomeListFilterMenuEnvironment {
 export interface HomeListFilterMenuProject {
   readonly key: string;
   readonly label: string;
+  readonly environmentId: EnvironmentId;
+  readonly workspaceRoot: string;
+  readonly faviconPath: string | null;
 }
 
 type HomeListFilterMenuAction = {

apps/mobile/src/features/threads/ThreadNavigationSidebar.tsx

@@ -47,6 +47,7 @@ import {
   useHomeListOptions,
 } from "../home/home-list-options";
 import { buildHomeListFilterMenu } from "../home/home-list-filter-menu";
+import { AndroidProjectFilterIcon } from "../home/AndroidProjectFilterIcon";
 import {
   buildHomeListLayout,
   DEFAULT_GROUP_DISPLAY_STATE,
@@ -284,6 +285,9 @@ function ThreadNavigationSidebarPane(
       projectScopes.map((scope) => ({
         key: scope.key,
         label: scope.title,
+        environmentId: scope.representative.environmentId,
+        workspaceRoot: scope.representative.workspaceRoot,
+        faviconPath: scope.representative.faviconPath ?? null,
       })),
     [projectScopes],
   );
@@ -1383,7 +1387,13 @@ function ThreadNavigationSidebarPane(
             }
           />
           <SidebarHeaderButtonGroup colorScheme={colorScheme}>
-            <ControlPillMenu actions={listMenuActions} onPressAction={handleListMenuAction}>
+            <ControlPillMenu
+              actions={listMenuActions}
+              onPressAction={handleListMenuAction}
+              renderActionTrailing={(action) => (
+                <AndroidProjectFilterIcon action={action} projects={projectFilterOptions} />
+              )}
+            >
               <SidebarFilterButton
                 grouped
                 accessibilityLabel="Filter and sort threads"