Initial commit: Momentry Portal v0.1.0

src/components/PersonThumbnail.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="w-16 h-16 bg-gray-700 rounded-lg overflow-hidden border border-gray-600 flex-shrink-0 flex items-center justify-center">
+    <img 
+      v-if="src" 
+      :src="src" 
+      alt="Person"
+      class="w-full h-full object-cover"
+      loading="lazy"
+    />
+    <span v-else-if="loading" class="text-gray-500 text-xs">...</span>
+    <svg v-else class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { getPersonThumbnail } from '@/api/client'
+
+const props = defineProps<{
+  personId: string
+  videoUuid?: string
+}>()
+
+const src = ref('')
+const loading = ref(false)
+
+onMounted(async () => {
+  loading.value = true
+  try {
+    src.value = await getPersonThumbnail(props.personId)
+  } catch (e) {
+    console.error('Failed to load thumbnail', e)
+  } finally {
+    loading.value = false
+  }
+})
+</script>