sort channels

src/app/components/main-chat/single-chat/attachments/attachments.component.scss

@@ -2,9 +2,9 @@
 
 .files {
   display: flex;
-
   max-width: calc(100vw - 140px);
   overflow: auto;
+  margin-top: 12px;
   .filesView {
     cursor: pointer;
     transition: 0.3s ease-in-out;

src/app/components/sidebar/sidebar-channels/add-new-channel/add-new-channel.component.ts

@@ -157,8 +157,10 @@ export class AddNewChannelComponent {
    * @param channelName
    * @returns
    */
-  chechIfChannelExist(channelName: string){
-    const filterChannel = this.channelService.allChannels.some(channel => channel.name === channelName);
+  chechIfChannelExist(channelName: string) {
+    const filterChannel = this.channelService.allChannels.some(
+      (channel) => channel.name === channelName
+    );
     if (filterChannel) {
       return true;
     } else {
@@ -178,6 +180,7 @@ export class AddNewChannelComponent {
       hashtag: this.channelName,
       createdDate: this.currentDate,
       addedUser: this.checkUserArray(),
+      index: this.lastChannelIndex() + 1,
     };
     const channelId = await this.channelService.createNewChannel(
       newChannel,
@@ -190,6 +193,17 @@ export class AddNewChannelComponent {
     this.route.navigateByUrl(`main/${channelId}`);
   }
 
+  /**
+   * Calculates the index of the last channel and returns the next available index.
+   * @returns {number} The next available channel index.
+   */
+  lastChannelIndex(): number {
+    const channels = this.channelService.allChannels.filter(
+      (channel) => channel.index !== undefined && channel.index !== null
+    );
+    return Math.max(...channels.map((channel) => channel.index));
+  }
+
   /**
    * Checks the user array.
    * @returns The user array.

src/app/components/sidebar/sidebar-channels/sidebar-channels.component.html

@@ -8,7 +8,7 @@
         class="arrowImg"
       />
       <img src="./assets/img/sidebar/bubbles.svg" alt="" />
-      <p> {{ 'sidebar-channels.channel' | translate }}</p>
+      <p>{{ "sidebar-channels.channel" | translate }}</p>
     </div>
     <div class="btn">
       <app-small-btn
@@ -29,7 +29,7 @@
       showAllChanneld: minimizeChannels
     }"
   >
-    @for (channel of getChannels(); track channel; let i = $index) {
+    @for (channel of getChannels(); track channel) {
     <div
       class="channelName"
       routerLink="/main/{{ channel.id }}"
@@ -47,7 +47,7 @@
     <div class="circle">
       <img src="./assets/img/sidebar/add-circle.svg" alt="" />
     </div>
-    <p>{{ 'sidebar-channels.addChannel' | translate }}</p>
+    <p>{{ "sidebar-channels.addChannel" | translate }}</p>
   </div>
   <app-add-new-channel
     [viewWidth]="viewWidth"

src/app/components/sidebar/sidebar-channels/sidebar-channels.component.ts

@@ -82,6 +82,8 @@ export class SidebarChannelsComponent {
       (channel) => !priorityChannels.includes(channel)
     );
 
-    return [...priorityChannels, ...otherChannels];
+    return [...priorityChannels, ...otherChannels].sort(
+      (a, b) => a.index - b.index
+    );
   }
 }

src/app/interface/channel.interface.ts

@@ -12,6 +12,7 @@ export interface Channel {
   hashtag: string;
   createdDate: string;
   addedUser: Array<string>;
+  index: number;
 }
 
 export interface PrvChannel {