implement

front/src/composables/useShapeOwner.ts

@@ -0,0 +1,51 @@
+import { ref, watch, type Ref } from 'vue'
+import { useAuthStore } from '@/stores/auth'
+import { fetchUser } from '@/services/userService'
+
+function avatarColorFromString(str: string): string {
+  let hash = 5381
+  for (let i = 0; i < str.length; i++) {
+    hash = ((hash << 5) + hash + str.charCodeAt(i)) & 0xffffffff
+  }
+  return `hsl(${Math.abs(hash) % 360}, 65%, 55%)`
+}
+
+export function useShapeOwner(ownerId: Ref<string | null>) {
+  const auth = useAuthStore()
+
+  const displayName = ref('...')
+  const avatarColor = ref('#888')
+  const isLoading = ref(false)
+
+  async function resolve(id: string | null) {
+    if (!id) {
+      displayName.value = '...'
+      avatarColor.value = '#888'
+      isLoading.value = false
+      return
+    }
+
+    if (id === auth.user?.userId) {
+      displayName.value = 'Me'
+      avatarColor.value = avatarColorFromString(auth.user.username || 'Me')
+      isLoading.value = false
+      return
+    }
+
+    isLoading.value = true
+    try {
+      const user = await fetchUser(id)
+      displayName.value = user.username || 'Unknown'
+      avatarColor.value = avatarColorFromString(user.username || id)
+    } catch {
+      displayName.value = 'Unknown'
+      avatarColor.value = '#888'
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  watch(ownerId, resolve, { immediate: true })
+
+  return { displayName, avatarColor, isLoading }
+}