Feat: Add distinct/user ID to settings (#2539)

packages/frontend-2/components/settings/user/Profile.vue

@@ -7,6 +7,23 @@
       <SettingsUserProfileChangePassword :user="user" />
       <hr class="my-6 md:my-10" />
       <SettingsUserProfileDeleteAccount :user="user" />
+      <hr class="my-6 md:my-10" />
+      <div class="text-xs text-foreground-2 w-full flex flex-col space-y-2">
+        <div class="flex">
+          User ID: #{{ user.id }}
+          <ClipboardIcon
+            class="w-4 h-4 ml-2 cursor-pointer hover:text-foreground transition"
+            @click="copyUserId"
+          />
+        </div>
+        <div v-if="distinctId" class="flex">
+          {{ distinctId }}
+          <ClipboardIcon
+            class="w-4 h-4 ml-2 cursor-pointer hover:text-foreground transition"
+            @click="copyDistinctId"
+          />
+        </div>
+      </div>
     </div>
   </section>
 </template>
@@ -14,6 +31,8 @@
 <script setup lang="ts">
 import { graphql } from '~~/lib/common/generated/gql'
 import type { SettingsUserProfile_UserFragment } from '~~/lib/common/generated/gql/graphql'
+import { useActiveUser } from '~/lib/auth/composables/activeUser'
+import { ClipboardIcon } from '@heroicons/vue/24/outline'
 
 graphql(`
   fragment SettingsUserProfile_User on User {
@@ -23,7 +42,21 @@ graphql(`
   }
 `)
 
-defineProps<{
+const { distinctId } = useActiveUser()
+
+const props = defineProps<{
   user: SettingsUserProfile_UserFragment
 }>()
+
+const { copy } = useClipboard()
+
+const copyUserId = () => {
+  copy(props.user.id)
+}
+
+const copyDistinctId = () => {
+  if (distinctId.value) {
+    copy(distinctId.value)
+  }
+}
 </script>