fix: proper key for v-for loops

components/collections/ChooseType.vue

@@ -41,7 +41,7 @@
               </option>
               <option
                 v-for="(team, index) in myTeams"
-                :key="index"
+                :key="`team-${index}`"
                 :value="index"
               >
                 {{ team.name }}

components/collections/ImportExport.vue

@@ -140,7 +140,7 @@
             </option>
             <option
               v-for="(collection, index) in myCollections"
-              :key="index"
+              :key="`collection-${index}`"
               :value="index"
             >
               {{ collection.name }}

components/collections/graphql/Collection.vue

@@ -98,7 +98,7 @@
     <div v-show="showChildren || isFiltered">
       <CollectionsGraphqlFolder
         v-for="(folder, index) in collection.folders"
-        :key="folder.name"
+        :key="`folder-${index}`"
         class="ml-5 border-l border-dividerLight"
         :picked="picked"
         :saving-mode="savingMode"
@@ -115,7 +115,7 @@
       />
       <CollectionsGraphqlRequest
         v-for="(request, index) in collection.requests"
-        :key="index"
+        :key="`request-${index}`"
         class="ml-5 border-l border-dividerLight"
         :picked="picked"
         :saving-mode="savingMode"
@@ -145,7 +145,7 @@
         "
       >
         <i class="material-icons opacity-50 pb-2">folder_open</i>
-        <span class="text-xs">
+        <span class="text-xs text-center">
           {{ $t("collection_empty") }}
         </span>
       </div>

components/collections/graphql/Folder.vue

@@ -94,7 +94,7 @@
     <div v-show="showChildren || isFiltered">
       <CollectionsGraphqlFolder
         v-for="(subFolder, subFolderIndex) in folder.folders"
-        :key="subFolder.name"
+        :key="`subFolder-${subFolderIndex}`"
         class="ml-5 border-l border-dividerLight"
         :picked="picked"
         :saving-mode="savingMode"
@@ -111,7 +111,7 @@
       />
       <CollectionsGraphqlRequest
         v-for="(request, index) in folder.requests"
-        :key="index"
+        :key="`request-${index}`"
         class="ml-5 border-l border-dividerLight"
         :picked="picked"
         :saving-mode="savingMode"
@@ -144,7 +144,7 @@
         "
       >
         <i class="material-icons opacity-50 pb-2">folder_open</i>
-        <span class="text-xs">
+        <span class="text-xs text-center">
           {{ $t("folder_empty") }}
         </span>
       </div>

components/collections/graphql/index.vue

@@ -41,7 +41,7 @@
     <div class="flex-col">
       <CollectionsGraphqlCollection
         v-for="(collection, index) in filteredCollections"
-        :key="collection.name"
+        :key="`collection-${index}`"
         :picked="picked"
         :name="collection.name"
         :collection-index="index"
@@ -62,7 +62,7 @@
       class="flex items-center text-secondaryLight flex-col p-4 justify-center"
     >
       <i class="material-icons opacity-50 pb-2">create_new_folder</i>
-      <span class="text-xs">
+      <span class="text-xs text-center">
         {{ $t("create_new_collection") }}
       </span>
     </div>
@@ -71,7 +71,7 @@
       class="flex items-center text-secondaryLight flex-col p-4 justify-center"
     >
       <i class="material-icons opacity-50 pb-2">manage_search</i>
-      <span class="text-xs">
+      <span class="text-xs text-center">
         {{ $t("nothing_found") }} "{{ filterText }}"
       </span>
     </div>

components/collections/index.vue

@@ -4,8 +4,8 @@
     :class="{ 'rounded-lg border-2 border-divider': saveRequest }"
   >
     <div
-      class="flex flex-col sticky top-10 z-10"
-      :class="{ 'bg-primary': !saveRequest }"
+      class="flex flex-col sticky z-10 top-0 bg-primary"
+      :class="{ '!top-10': !saveRequest && !doc }"
     >
       <input
         v-if="!saveRequest"
@@ -70,8 +70,7 @@
             : 'CollectionsTeamsCollection'
         "
         v-for="(collection, index) in filteredCollections"
-        :key="collection.name"
-        :name="collection.name"
+        :key="`collection-${index}`"
         :collection-index="index"
         :collection="collection"
         :doc="doc"
@@ -98,7 +97,7 @@
       class="flex items-center text-secondaryLight flex-col p-4 justify-center"
     >
       <i class="material-icons opacity-50 pb-2">create_new_folder</i>
-      <span class="text-xs">
+      <span class="text-xs text-center">
         {{ $t("create_new_collection") }}
       </span>
     </div>
@@ -107,7 +106,7 @@
       class="flex items-center text-secondaryLight flex-col p-4 justify-center"
     >
       <i class="material-icons opacity-50 pb-2">manage_search</i>
-      <span class="text-xs">
+      <span class="text-xs text-center">
         {{ $t("nothing_found") }} "{{ filterText }}"
       </span>
     </div>

components/collections/my/Collection.vue

@@ -114,7 +114,7 @@
     <div v-show="showChildren || isFiltered">
       <CollectionsMyFolder
         v-for="(folder, index) in collection.folders"
-        :key="index"
+        :key="`folder-${index}`"
         class="ml-5 border-l border-dividerLight"
         :folder="folder"
         :folder-index="index"
@@ -133,7 +133,7 @@
       />
       <CollectionsMyRequest
         v-for="(request, index) in collection.requests"
-        :key="index"
+        :key="`request-${index}`"
         class="ml-5 border-l border-dividerLight"
         :request="request"
         :collection-index="collectionIndex"
@@ -167,7 +167,7 @@
         "
       >
         <i class="material-icons opacity-50 pb-2">folder_open</i>
-        <span class="text-xs">
+        <span class="text-xs text-center">
           {{ $t("collection_empty") }}
         </span>
       </div>

components/collections/my/Folder.vue

@@ -99,7 +99,7 @@
     <div v-show="showChildren || isFiltered">
       <CollectionsMyFolder
         v-for="(subFolder, subFolderIndex) in folder.folders"
-        :key="subFolder.name"
+        :key="`subFolder-${subFolderIndex}`"
         class="ml-5 border-l border-dividerLight"
         :folder="subFolder"
         :folder-index="subFolderIndex"
@@ -118,7 +118,7 @@
       />
       <CollectionsMyRequest
         v-for="(request, index) in folder.requests"
-        :key="index"
+        :key="`request-${index}`"
         class="ml-5 border-l border-dividerLight"
         :request="request"
         :collection-index="collectionIndex"
@@ -153,7 +153,7 @@
         "
       >
         <i class="material-icons opacity-50 pb-2">folder_open</i>
-        <span class="text-xs">
+        <span class="text-xs text-center">
           {{ $t("folder_empty") }}
         </span>
       </div>

components/collections/teams/Collection.vue

@@ -111,7 +111,7 @@
     <div v-show="showChildren || isFiltered">
       <CollectionsTeamsFolder
         v-for="(folder, index) in collection.children"
-        :key="folder.title"
+        :key="`folder-${folder}`"
         class="ml-5 border-l border-dividerLight"
         :folder="folder"
         :folder-index="index"
@@ -131,7 +131,7 @@
       />
       <CollectionsTeamsRequest
         v-for="(request, index) in collection.requests"
-        :key="index"
+        :key="`request-${index}`"
         class="ml-5 border-l border-dividerLight"
         :request="request.request"
         :collection-index="collectionIndex"
@@ -164,7 +164,7 @@
         "
       >
         <i class="material-icons opacity-50 pb-2">folder_open</i>
-        <span class="text-xs">
+        <span class="text-xs text-center">
           {{ $t("collection_empty") }}
         </span>
       </div>

components/collections/teams/Folder.vue

@@ -96,7 +96,7 @@
     <div v-show="showChildren || isFiltered">
       <CollectionsTeamsFolder
         v-for="(subFolder, subFolderIndex) in folder.children"
-        :key="subFolder.name"
+        :key="`subFolder-${subFolderIndex}`"
         class="ml-5 border-l border-dividerLight"
         :folder="subFolder"
         :folder-index="subFolderIndex"
@@ -116,7 +116,7 @@
       />
       <CollectionsTeamsRequest
         v-for="(request, index) in folder.requests"
-        :key="index"
+        :key="`request-${index}`"
         class="ml-5 border-l border-dividerLight"
         :request="request.request"
         :collection-index="collectionIndex"
@@ -148,7 +148,7 @@
         "
       >
         <i class="material-icons opacity-50 pb-2">folder_open</i>
-        <span class="text-xs">
+        <span class="text-xs text-center">
           {{ $t("folder_empty") }}
         </span>
       </div>