refine manage channels screen

packages/app/hooks/useGroupContext.ts

@@ -56,9 +56,20 @@ export const useGroupContext = ({
   const groupNavSectionsWithChannels = useMemo(() => {
     return groupNavSections.map((section) => ({
       ...section,
-      channels: groupChannels.filter((channel) =>
-        section.channels.map((c) => c.channelId).includes(channel.id)
-      ),
+      channels: groupChannels
+        .filter((channel) =>
+          section.channels.map((c) => c.channelId).includes(channel.id)
+        )
+        .sort((a, b) => {
+          const aIndex =
+            section.channels.find((c) => c.channelId === a.id)?.channelIndex ??
+            0;
+          const bIndex =
+            section.channels.find((c) => c.channelId === b.id)?.channelIndex ??
+            0;
+
+          return aIndex - bIndex;
+        }),
     }));
   }, [groupNavSections, groupChannels]);
 
@@ -164,7 +175,7 @@ export const useGroupContext = ({
     async (channelId: string, navSectionId: string, index: number) => {
       if (group) {
         await store.moveChannel({
-          group,
+          groupId: group.id,
           channelId,
           navSectionId,
           index,
@@ -176,13 +187,25 @@ export const useGroupContext = ({
 
   const moveChannelToNavSection = useCallback(
     async (channelId: string, navSectionId: string) => {
-      if (group) {
-        await store.addChannelToNavSection({
-          group,
-          channelId,
-          navSectionId,
-        });
+      if (!group) return;
+
+      // Find current section for the channel
+      const currentSection = group.navSections?.find((section) =>
+        section.channels?.some((channel) => channel.channelId === channelId)
+      );
+
+      if (!currentSection) {
+        console.error('Channel not found in any section');
+        return;
       }
+
+      // Use addChannelToNavSection which handles both adding to new section
+      // and removing from the previous section
+      await store.addChannelToNavSection({
+        groupId: group.id,
+        channelId,
+        navSectionId,
+      });
     },
     [group]
   );

packages/shared/src/api/groupsApi.ts

@@ -743,6 +743,7 @@ export type GroupChannelDelete = {
 export type GroupChannelNavSectionAdd = {
   type: 'addChannelToNavSection';
   channelId: string;
+  groupId: string;
   navSectionId: string;
   sectionId: string;
 };
@@ -778,6 +779,7 @@ export type GroupnavSectionMoveChannel = {
   type: 'moveChannel';
   navSectionId: string;
   sectionId: string;
+  groupId: string;
   channelId: string;
   index: number;
 };
@@ -1205,6 +1207,7 @@ export const toGroupUpdate = (
         type: 'moveChannel',
         navSectionId,
         sectionId,
+        groupId,
         channelId: zoneDelta['mov-nest'].nest,
         index: zoneDelta['mov-nest'].idx,
       };
@@ -1262,6 +1265,7 @@ export const toGroupUpdate = (
       return {
         type: 'addChannelToNavSection',
         channelId,
+        groupId,
         navSectionId: `${groupId}-${zoneId}`,
         sectionId: zoneId,
       };

packages/shared/src/db/queries.ts

@@ -673,7 +673,7 @@ export const updateGroup = createWriteQuery(
   async (group: Partial<Group> & { id: string }, ctx: QueryCtx) => {
     return ctx.db.update($groups).set(group).where(eq($groups.id, group.id));
   },
-  ['groups']
+  ['groups', 'channels', 'groupNavSections', 'groupNavSectionChannels']
 );
 
 export const deleteGroup = createWriteQuery(
@@ -1604,7 +1604,34 @@ export const addNavSectionToGroup = createWriteQuery(
         set: conflictUpdateSetAll($groupNavSections),
       });
   },
-  ['groupNavSections']
+  ['groups','groupNavSections', 'groupNavSectionChannels']
+);
+
+export const updateNavSectionChannel = createWriteQuery(
+  'updateNavSectionChannel',
+  async (
+    {
+      channelId,
+      groupNavSectionId,
+      channelIndex,
+    }: {
+      channelId: string;
+      groupNavSectionId: string;
+      channelIndex: number;
+    },
+    ctx: QueryCtx
+  ) => {
+    return ctx.db
+      .update($groupNavSectionChannels)
+      .set({ channelIndex })
+      .where(
+        and(
+          eq($groupNavSectionChannels.channelId, channelId),
+          eq($groupNavSectionChannels.groupNavSectionId, groupNavSectionId)
+        )
+      );
+  },
+  ['groupNavSectionChannels']
 );
 
 export const updateNavSection = createWriteQuery(
@@ -1656,7 +1683,7 @@ export const addChannelToNavSection = createWriteQuery(
       })
       .onConflictDoNothing();
   },
-  ['groupNavSectionChannels']
+  ['groupNavSectionChannels', 'groups']
 );
 
 export const deleteChannelFromNavSection = createWriteQuery(
@@ -2765,6 +2792,7 @@ export const getGroup = createReadQuery(
     'channels',
     'groupJoinRequests',
     'groupMemberBans',
+    'groupNavSectionChannels'
   ]
 );