add sort func sorting

src/presentation/components/team/Team.vue

@@ -4,10 +4,10 @@
     :caption="t('noteSettings.team.caption')"
   >
     <Row
-      v-for="(member, memberIndex) in team"
+      v-for="(member, memberIndex) in sortedTeam"
       :key="member.id"
       :title="member.user.name || member.user.email"
-      :has-delimiter="memberIndex !== team.length - 1"
+      :has-delimiter="memberIndex !== sortedTeam.length - 1"
       data-dimensions="medium"
     >
       <template #right>
@@ -33,24 +33,62 @@
 </template>
 
 <script setup lang="ts">
-import { Team } from '@/domain/entities/Team';
+import { TeamMember, MemberRole } from '@/domain/entities/Team';
 import { NoteId } from '@/domain/entities/Note';
 import { Section, Row, Avatar } from 'codex-ui/vue';
 import RoleSelect from './RoleSelect.vue';
 import { useI18n } from 'vue-i18n';
+import {computed, defineProps} from "vue";
 
-defineProps<{
+const { t } = useI18n();
+
+const props = defineProps<{
   /**
    * Team of the current note
    */
-  team: Team;
+  team: TeamMember[];
   /**
    * Id of the current note
    */
   noteId: NoteId;
 }>();
 
-const { t } = useI18n();
+/**
+ * Sorts the team members based on their role and whether they are the creator of the note.
+ *
+ * @param members - Array of TeamMember objects to be sorted.
+ * @returns Sorted array of TeamMember objects.
+ */
+const sortMembers = (members: TeamMember[]): TeamMember[] => {
+  return members.sort((a, b) => {
+    const roleOrder = {
+      [MemberRole.Write]: 0,
+      [MemberRole.Read]: 1,
+    };
+
+    const isCreatorA = String(a.user.id) === props.noteId;
+    const isCreatorB = String(b.user.id) === props.noteId;
+
+    if (isCreatorA && !isCreatorB) {
+      return -1;
+    }
+    if (!isCreatorA && isCreatorB) {
+      return 1;
+    }
+
+    if (!roleOrder[a.role] && !roleOrder[b.role]) {
+      return 0;
+    }
+
+    if (roleOrder[a.role] === roleOrder[b.role]) {
+      return 0;
+    }
+
+    return roleOrder[a.role] < roleOrder[b.role] ? -1 : 1;
+  });
+};
+
+const sortedTeam = computed(()=>sortMembers(props.team))
 </script>
 
 <style scoped>