feat(compose): group channels by customer with tap-to-select-all

Channels in the compose picker are now grouped by customer (as returned
by the Postiz API). Tapping a customer header selects or deselects all
its channels at once. Individual channel chips still toggle as before.
Workspace header is hidden when only one workspace is configured.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

artifacts/postiz-mobile/app/(tabs)/compose.tsx

@@ -140,8 +140,20 @@ export default function ComposeScreen() {
       staleTime: 60000,
     });
 
-  // Group: workspace → flat list of integrations
-  const grouped = useMemo(() => {
+  type CustomerGroup = {
+    customerId: string;
+    customerName: string;
+    channels: IntegrationWithWorkspace[];
+  };
+
+  type WorkspaceGroup = {
+    workspace: PostizWorkspace;
+    customers: CustomerGroup[];
+    allChannels: IntegrationWithWorkspace[];
+  };
+
+  // Group: workspace → customers → channels
+  const grouped = useMemo((): WorkspaceGroup[] => {
     if (!allIntegrations) return [];
     const byWorkspace = new Map<string, IntegrationWithWorkspace[]>();
     for (const intg of allIntegrations) {
@@ -150,12 +162,21 @@ export default function ComposeScreen() {
     }
     return workspaces
       .filter((ws) => byWorkspace.has(ws.id))
-      .map((ws) => ({ workspace: ws, channels: byWorkspace.get(ws.id)! }));
+      .map((ws) => {
+        const allChannels = byWorkspace.get(ws.id)!;
+        const byCustomer = new Map<string, CustomerGroup>();
+        for (const ch of allChannels) {
+          const cId = ch.customer?.id ?? "__default__";
+          const cName = ch.customer?.name ?? ws.name;
+          if (!byCustomer.has(cId)) byCustomer.set(cId, { customerId: cId, customerName: cName, channels: [] });
+          byCustomer.get(cId)!.channels.push(ch);
+        }
+        return { workspace: ws, customers: Array.from(byCustomer.values()), allChannels };
+      });
   }, [allIntegrations, workspaces]);
 
   const toggleWorkspace = (wsId: string) => {
-    const wsChannels = grouped.find((g) => g.workspace.id === wsId)?.channels ?? [];
-    const allIds = wsChannels.map((c) => c.id);
+    const allIds = (grouped.find((g) => g.workspace.id === wsId)?.allChannels ?? []).map((c) => c.id);
     const allSelected = allIds.every((id) => selectedChannels.includes(id));
     if (allSelected) {
       setSelectedChannels((prev) => prev.filter((id) => !allIds.includes(id)));
@@ -164,6 +185,15 @@ export default function ComposeScreen() {
     }
   };
 
+  const toggleCustomer = (customerIds: string[]) => {
+    const allSelected = customerIds.every((id) => selectedChannels.includes(id));
+    if (allSelected) {
+      setSelectedChannels((prev) => prev.filter((id) => !customerIds.includes(id)));
+    } else {
+      setSelectedChannels((prev) => [...new Set([...prev, ...customerIds])]);
+    }
+  };
+
   const effectiveCharLimit = useMemo(() => {
     if (selectedChannels.length === 0 || !allIntegrations) return 3000;
     const selected = allIntegrations.filter((i) => selectedChannels.includes(i.id));
@@ -535,11 +565,11 @@ export default function ComposeScreen() {
           </Text>
         ) : (
           <View style={styles.channelGroups}>
-            {grouped.map(({ workspace, channels }, wsIdx) => {
-              const allIds = channels.map((c) => c.id);
-              const selectedCount = allIds.filter((id) => selectedChannels.includes(id)).length;
-              const allSelected = selectedCount === allIds.length;
-              const someSelected = selectedCount > 0 && !allSelected;
+            {grouped.map(({ workspace, customers, allChannels }, wsIdx) => {
+              const wsAllIds = allChannels.map((c) => c.id);
+              const wsSelectedCount = wsAllIds.filter((id) => selectedChannels.includes(id)).length;
+              const wsAllSelected = wsSelectedCount === wsAllIds.length;
+              const wsSomeSelected = wsSelectedCount > 0 && !wsAllSelected;
               return (
                 <View
                   key={workspace.id}
@@ -550,6 +580,7 @@ export default function ComposeScreen() {
                   ]}
                 >
                   {/* Workspace header — tap to select/deselect all */}
+                  {workspaces.length > 1 && (
                     <TouchableOpacity
                       activeOpacity={0.7}
                       onPress={() => toggleWorkspace(workspace.id)}
@@ -560,15 +591,43 @@ export default function ComposeScreen() {
                         {workspace.name}
                       </Text>
                       <Feather
-                      name={allSelected ? "check-square" : someSelected ? "minus-square" : "square"}
+                        name={wsAllSelected ? "check-square" : wsSomeSelected ? "minus-square" : "square"}
                         size={14}
-                      color={allSelected || someSelected ? colors.primary : colors.mutedForeground}
+                        color={wsAllSelected || wsSomeSelected ? colors.primary : colors.mutedForeground}
+                      />
+                    </TouchableOpacity>
+                  )}
+
+                  {/* Customer sub-sections */}
+                  {customers.map((cust, cIdx) => {
+                    const custIds = cust.channels.map((c) => c.id);
+                    const custSelectedCount = custIds.filter((id) => selectedChannels.includes(id)).length;
+                    const custAllSelected = custSelectedCount === custIds.length;
+                    const custSomeSelected = custSelectedCount > 0 && !custAllSelected;
+                    return (
+                      <View
+                        key={cust.customerId}
+                        style={cIdx > 0 ? [styles.customerSection, { borderTopColor: colors.border }] : undefined}
+                      >
+                        {/* Customer header — tap to select/deselect all channels for this customer */}
+                        <TouchableOpacity
+                          activeOpacity={0.7}
+                          onPress={() => toggleCustomer(custIds)}
+                          style={styles.customerHeader}
+                        >
+                          <Text style={[styles.customerName, { color: colors.foreground }]}>
+                            {cust.customerName}
+                          </Text>
+                          <Feather
+                            name={custAllSelected ? "check-square" : custSomeSelected ? "minus-square" : "square"}
+                            size={14}
+                            color={custAllSelected || custSomeSelected ? colors.primary : colors.mutedForeground}
                           />
                         </TouchableOpacity>
 
-                  {/* Flat channel chips */}
+                        {/* Channel chips for this customer */}
                         <View style={styles.chipRow}>
-                    {channels.map((intg) => (
+                          {cust.channels.map((intg) => (
                             <ChannelChip
                               key={intg.id}
                               integration={intg}
@@ -581,6 +640,9 @@ export default function ComposeScreen() {
                     );
                   })}
                 </View>
+              );
+            })}
+          </View>
         )}
 
         <View style={[styles.scheduleRow, { backgroundColor: colors.card, borderColor: colors.border }]}>
@@ -761,7 +823,13 @@ const styles = StyleSheet.create({
     borderBottomWidth: StyleSheet.hairlineWidth,
   },
   workspaceName: { fontSize: 11, fontFamily: "Inter_600SemiBold", letterSpacing: 0.5 },
-  chipRow: { flexDirection: "row", flexWrap: "wrap", gap: 6, padding: 10 },
+  customerSection: { borderTopWidth: StyleSheet.hairlineWidth },
+  customerHeader: {
+    flexDirection: "row", alignItems: "center", justifyContent: "space-between",
+    paddingHorizontal: 12, paddingVertical: 8,
+  },
+  customerName: { fontSize: 13, fontFamily: "Inter_600SemiBold" },
+  chipRow: { flexDirection: "row", flexWrap: "wrap", gap: 6, paddingHorizontal: 10, paddingBottom: 10 },
   scheduleRow: {
     flexDirection: "row", alignItems: "center", justifyContent: "space-between",
     paddingHorizontal: 16, paddingVertical: 12, borderRadius: 12, borderWidth: 1,

artifacts/postiz-mobile/context/PostizContext.tsx

@@ -28,6 +28,7 @@ export interface PostizIntegration {
   picture?: string;
   identifier?: string;
   internalType?: string;
+  customer?: { id: string; name: string };
 }
 
 export interface PostizMediaItem {