chore(nc-gui): fix type issues and set proper ref types

packages/nc-gui/components/tabs/auth/user-management/FeedbackForm.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import CloseIcon from '~icons/material-symbols/close-rounded'
-
 const { feedbackForm } = useGlobal()
+
 const showForm = ref(false)
+
 setTimeout(() => (showForm.value = true), 60000)
 </script>
 
 <template>
   <div v-if="showForm && feedbackForm && !feedbackForm.isHidden" class="nc-feedback-form-wrapper mt-6">
-    <CloseIcon class="nc-close-icon" @click="feedbackForm.isHidden = true" />
+    <MaterialSymbolsCloseRounded class="nc-close-icon" @click="feedbackForm.isHidden = true" />
 
     <iframe :src="feedbackForm.url" width="100%" height="500" frameborder="0" marginheight="0" marginwidth="0">Loading… </iframe>
   </div>

packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue

@@ -1,10 +1,6 @@
 <script setup lang="ts">
 import { message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
-import { onMounted, useClipboard, useNuxtApp, useProject } from '#imports'
-import { extractSdkResponseErrorMsg } from '~/utils'
-
-const { t } = useI18n()
+import { extractSdkResponseErrorMsg, onMounted, useClipboard, useI18n, useNuxtApp, useProject } from '#imports'
 
 interface ShareBase {
   uuid?: string
@@ -17,6 +13,8 @@ enum ShareBaseRole {
   Viewer = 'viewer',
 }
 
+const { t } = useI18n()
+
 const { dashboardUrl } = $(useDashboard())
 
 const { $api, $e } = useNuxtApp()

packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue

@@ -1,28 +1,23 @@
 <script setup lang="ts">
 import { Form, message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
 import ShareBase from './ShareBase.vue'
 import {
   computed,
   extractSdkResponseErrorMsg,
   isEmail,
   onMounted,
+  projectRoleTagColors,
   projectRoles,
   ref,
   useClipboard,
   useDashboard,
+  useI18n,
   useNuxtApp,
   useProject,
 } from '#imports'
 import type { User } from '~/lib'
 import { ProjectRole } from '~/lib'
 
-const { show, selectedUser } = defineProps<Props>()
-
-const emit = defineEmits(['closed', 'reload'])
-
-const { t } = useI18n()
-
 interface Props {
   show: boolean
   selectedUser?: User
@@ -34,6 +29,12 @@ interface Users {
   invitationToken?: string
 }
 
+const { show, selectedUser } = defineProps<Props>()
+
+const emit = defineEmits(['closed', 'reload'])
+
+const { t } = useI18n()
+
 const { project } = useProject()
 const { $api, $e } = useNuxtApp()
 const { copy } = useClipboard()
@@ -69,7 +70,8 @@ const { validateInfos } = useForm(usersData, validators)
 onMounted(() => {
   if (!usersData.emails && selectedUser?.email) {
     usersData.emails = selectedUser.email
-    usersData.role = selectedUser.roles
+    // todo: types not matching, probably a bug here?
+    usersData.role = selectedUser.roles as any
   }
 })