|
|
|
@@ -56,22 +56,6 @@ type MediaItem =
|
|
|
|
|
| { type: "local"; uri: string }
|
|
|
|
|
| { type: "uploaded"; id: string; path: string; workspaceId: string };
|
|
|
|
|
|
|
|
|
|
// Maps a type string to a display label, used for grouping within a workspace
|
|
|
|
|
function networkLabel(intg: PostizIntegration): string {
|
|
|
|
|
const t = (intg.type ?? intg.internalType ?? "").toLowerCase();
|
|
|
|
|
if (t.includes("twitter") || t.includes("x-") || t === "x") return "X / Twitter";
|
|
|
|
|
if (t.includes("instagram")) return "Instagram";
|
|
|
|
|
if (t.includes("linkedin")) return "LinkedIn";
|
|
|
|
|
if (t.includes("facebook")) return "Facebook";
|
|
|
|
|
if (t.includes("tiktok")) return "TikTok";
|
|
|
|
|
if (t.includes("youtube")) return "YouTube";
|
|
|
|
|
if (t.includes("pinterest")) return "Pinterest";
|
|
|
|
|
if (t.includes("mastodon")) return "Mastodon";
|
|
|
|
|
if (t.includes("bluesky") || t.includes("bsky")) return "Bluesky";
|
|
|
|
|
if (t.includes("threads")) return "Threads";
|
|
|
|
|
if (t.includes("reddit")) return "Reddit";
|
|
|
|
|
return "Other";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function resolveMediaUrl(path: string, baseUrl: string): string {
|
|
|
|
|
if (path.startsWith("http://") || path.startsWith("https://")) return path;
|
|
|
|
@@ -156,8 +140,20 @@ export default function ComposeScreen() {
|
|
|
|
|
staleTime: 60000,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Group: workspace → network label → 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) {
|
|
|
|
@@ -167,20 +163,37 @@ export default function ComposeScreen() {
|
|
|
|
|
return workspaces
|
|
|
|
|
.filter((ws) => byWorkspace.has(ws.id))
|
|
|
|
|
.map((ws) => {
|
|
|
|
|
const intgs = byWorkspace.get(ws.id)!;
|
|
|
|
|
const byNetwork = new Map<string, IntegrationWithWorkspace[]>();
|
|
|
|
|
for (const intg of intgs) {
|
|
|
|
|
const key = networkLabel(intg);
|
|
|
|
|
if (!byNetwork.has(key)) byNetwork.set(key, []);
|
|
|
|
|
byNetwork.get(key)!.push(intg);
|
|
|
|
|
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,
|
|
|
|
|
networks: Array.from(byNetwork.entries()).map(([label, channels]) => ({ label, channels })),
|
|
|
|
|
};
|
|
|
|
|
return { workspace: ws, customers: Array.from(byCustomer.values()), allChannels };
|
|
|
|
|
});
|
|
|
|
|
}, [allIntegrations, workspaces]);
|
|
|
|
|
|
|
|
|
|
const toggleWorkspace = (wsId: string) => {
|
|
|
|
|
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)));
|
|
|
|
|
} else {
|
|
|
|
|
setSelectedChannels((prev) => [...new Set([...prev, ...allIds])]);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
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));
|
|
|
|
@@ -552,37 +565,69 @@ export default function ComposeScreen() {
|
|
|
|
|
</Text>
|
|
|
|
|
) : (
|
|
|
|
|
<View style={styles.channelGroups}>
|
|
|
|
|
{grouped.map(({ workspace, networks }, wsIdx) => (
|
|
|
|
|
{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}
|
|
|
|
|
style={[
|
|
|
|
|
styles.workspaceSection,
|
|
|
|
|
{
|
|
|
|
|
backgroundColor: colors.card,
|
|
|
|
|
borderColor: colors.border,
|
|
|
|
|
},
|
|
|
|
|
{ backgroundColor: colors.card, borderColor: colors.border },
|
|
|
|
|
wsIdx > 0 && { marginTop: 8 },
|
|
|
|
|
]}
|
|
|
|
|
>
|
|
|
|
|
{/* Workspace header */}
|
|
|
|
|
<View style={[styles.workspaceHeader, { borderBottomColor: colors.border }]}>
|
|
|
|
|
{/* Workspace header — tap to select/deselect all */}
|
|
|
|
|
{workspaces.length > 1 && (
|
|
|
|
|
<TouchableOpacity
|
|
|
|
|
activeOpacity={0.7}
|
|
|
|
|
onPress={() => toggleWorkspace(workspace.id)}
|
|
|
|
|
style={[styles.workspaceHeader, { borderBottomColor: colors.border }]}
|
|
|
|
|
>
|
|
|
|
|
<Feather name="briefcase" size={12} color={colors.primary} />
|
|
|
|
|
<Text style={[styles.workspaceName, { color: colors.primary }]}>
|
|
|
|
|
<Text style={[styles.workspaceName, { color: colors.primary, flex: 1 }]}>
|
|
|
|
|
{workspace.name}
|
|
|
|
|
</Text>
|
|
|
|
|
</View>
|
|
|
|
|
|
|
|
|
|
{/* Network groups */}
|
|
|
|
|
<View style={styles.networkGroups}>
|
|
|
|
|
{networks.map(({ label, channels }) => (
|
|
|
|
|
<View key={label} style={styles.networkGroup}>
|
|
|
|
|
{networks.length > 1 && (
|
|
|
|
|
<Text style={[styles.networkLabel, { color: colors.mutedForeground }]}>
|
|
|
|
|
{label}
|
|
|
|
|
</Text>
|
|
|
|
|
<Feather
|
|
|
|
|
name={wsAllSelected ? "check-square" : wsSomeSelected ? "minus-square" : "square"}
|
|
|
|
|
size={14}
|
|
|
|
|
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>
|
|
|
|
|
|
|
|
|
|
{/* Channel chips for this customer */}
|
|
|
|
|
<View style={styles.chipRow}>
|
|
|
|
|
{channels.map((intg) => (
|
|
|
|
|
{cust.channels.map((intg) => (
|
|
|
|
|
<ChannelChip
|
|
|
|
|
key={intg.id}
|
|
|
|
|
integration={intg}
|
|
|
|
@@ -592,10 +637,11 @@ export default function ComposeScreen() {
|
|
|
|
|
))}
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
))}
|
|
|
|
|
);
|
|
|
|
|
})}
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
))}
|
|
|
|
|
);
|
|
|
|
|
})}
|
|
|
|
|
</View>
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
|
@@ -777,10 +823,13 @@ const styles = StyleSheet.create({
|
|
|
|
|
borderBottomWidth: StyleSheet.hairlineWidth,
|
|
|
|
|
},
|
|
|
|
|
workspaceName: { fontSize: 11, fontFamily: "Inter_600SemiBold", letterSpacing: 0.5 },
|
|
|
|
|
networkGroups: { padding: 10, gap: 10 },
|
|
|
|
|
networkGroup: { gap: 4 },
|
|
|
|
|
networkLabel: { fontSize: 10, fontFamily: "Inter_500Medium", letterSpacing: 0.4, marginLeft: 2 },
|
|
|
|
|
chipRow: { flexDirection: "row", flexWrap: "wrap", gap: 6 },
|
|
|
|
|
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,
|
|
|
|
|