From 022952c1603da7f2ea0b02011c1548b2852aa7d1 Mon Sep 17 00:00:00 2001
From: ~latter-bolden <brian@tlon.io>
Date: Thu, 8 Feb 2024 12:28:45 -0500
Subject: [PATCH 1/2] groups: filter out pinned from the main list on mobile

---
 ui/src/nav/MobileRoot.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/ui/src/nav/MobileRoot.tsx b/ui/src/nav/MobileRoot.tsx
index 4726ff8ff5..2f984d0337 100644
--- a/ui/src/nav/MobileRoot.tsx
+++ b/ui/src/nav/MobileRoot.tsx
@@ -59,6 +59,20 @@ export default function MobileRoot() {
   const hasNewGroups = !!newGroups.length;
   const hasPendingGangs = Object.keys(pendingGangs).length > 0;
 
+  // get all non-segmented groups
+  const flagsToFilter = useMemo(() => {
+    const flags = new Set();
+    Object.entries(pinnedGroups).forEach(([flag]) => flags.add(flag));
+    loadingGroups.forEach(([flag]) => flags.add(flag));
+    newGroups?.forEach(([flag]) => flags.add(flag));
+    return flags;
+  }, [pinnedGroups, loadingGroups, newGroups]);
+
+  const allOtherGroups = useMemo(
+    () => sortedGroups.filter(([flag, _g]) => !flagsToFilter.has(flag)),
+    [sortedGroups, flagsToFilter]
+  );
+
   return (
     <Layout
       className="flex-1 bg-white"
@@ -92,7 +106,7 @@ export default function MobileRoot() {
             </div>
           ) : (
             <GroupsScrollingContext.Provider value={isScrolling}>
-              <GroupList groups={sortedGroups} isScrolling={scroll.current}>
+              <GroupList groups={allOtherGroups} isScrolling={scroll.current}>
                 {hasPinnedGroups ||
                 hasPendingGangs ||
                 hasGangsWithClaims ||

From dcbeaed56171e7b6ab4b25b3d2d3fbb83841a13e Mon Sep 17 00:00:00 2001
From: ~latter-bolden <brian@tlon.io>
Date: Thu, 8 Feb 2024 12:37:19 -0500
Subject: [PATCH 2/2] groups list: make sure all group subsets are filtered

---
 ui/src/components/Sidebar/Sidebar.tsx | 4 +++-
 ui/src/nav/MobileRoot.tsx             | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/Sidebar/Sidebar.tsx b/ui/src/components/Sidebar/Sidebar.tsx
index 04ba048dae..a97b83bed3 100644
--- a/ui/src/components/Sidebar/Sidebar.tsx
+++ b/ui/src/components/Sidebar/Sidebar.tsx
@@ -63,10 +63,12 @@ export default function Sidebar() {
   const flagsToFilter = useMemo(() => {
     const flags = new Set();
     Object.entries(pinnedGroups).forEach(([flag]) => flags.add(flag));
+    Object.entries(invitedGroups).forEach(([flag]) => flags.add(flag));
     loadingGroups.forEach(([flag]) => flags.add(flag));
     newGroups?.forEach(([flag]) => flags.add(flag));
+    gangsWithClaims.forEach((flag) => flags.add(flag));
     return flags;
-  }, [pinnedGroups, loadingGroups, newGroups]);
+  }, [pinnedGroups, loadingGroups, newGroups, gangsWithClaims, invitedGroups]);
 
   const allOtherGroups = useMemo(
     () => sortedGroups.filter(([flag, _g]) => !flagsToFilter.has(flag)),
diff --git a/ui/src/nav/MobileRoot.tsx b/ui/src/nav/MobileRoot.tsx
index 2f984d0337..981be834c3 100644
--- a/ui/src/nav/MobileRoot.tsx
+++ b/ui/src/nav/MobileRoot.tsx
@@ -63,10 +63,12 @@ export default function MobileRoot() {
   const flagsToFilter = useMemo(() => {
     const flags = new Set();
     Object.entries(pinnedGroups).forEach(([flag]) => flags.add(flag));
+    Object.entries(pendingGangs).forEach(([flag]) => flags.add(flag));
     loadingGroups.forEach(([flag]) => flags.add(flag));
     newGroups?.forEach(([flag]) => flags.add(flag));
+    gangsWithClaims.forEach((flag) => flags.add(flag));
     return flags;
-  }, [pinnedGroups, loadingGroups, newGroups]);
+  }, [pinnedGroups, loadingGroups, newGroups, gangsWithClaims, pendingGangs]);
 
   const allOtherGroups = useMemo(
     () => sortedGroups.filter(([flag, _g]) => !flagsToFilter.has(flag)),