different names in different dynamics

resources/js/pages/Dynamics/Show.vue

@@ -2,8 +2,10 @@
 import Chat from '@/components/Chat.vue';
 import ParticipantsList from '@/components/ParticipantsList.vue';
 import LedgerList from '@/components/LedgerList.vue';
-import { Head, Link as InertiaLink } from '@inertiajs/vue3';
+import DisplayNameForm from '@/components/DisplayNameForm.vue';
+import { Head, Link as InertiaLink, usePage } from '@inertiajs/vue3';
 import { route } from 'ziggy-js';
+import { computed } from 'vue';
 
 const props = defineProps<{
     dynamic: {
@@ -11,7 +13,7 @@ const props = defineProps<{
         name: string;
         rules: string;
         chat: any;
-        participants: Array<{ id: number; name: string }>;
+        participants: Array<{ id: number; name: string, pivot: { display_name: string | null } }>;
         ledgers: Array<{
             id: number;
             name: string;
@@ -23,6 +25,18 @@ const props = defineProps<{
     isOwner: boolean;
 }>();
 
+const currentUser = computed(() => {
+    const page = usePage();
+    const authUser = page.props.auth.user;
+    const participant = props.dynamic.participants.find(p => p.id === authUser.id);
+    return {
+        id: authUser.id,
+        name: authUser.name,
+        display_name: participant?.pivot?.display_name ?? null,
+    };
+});
+
+
 const breadcrumbs = [
     {
         name: 'Dynamics',
@@ -65,6 +79,9 @@ const breadcrumbs = [
             <!-- Ledgers List Component -->
             <LedgerList :dynamic-id="dynamic.id" :ledgers="dynamic.ledgers" />
 
+            <!-- Display Name Form -->
+            <DisplayNameForm :dynamic-id="dynamic.id" :participant="currentUser" />
+
             <div v-if="isOwner" class="mt-8 flex gap-4">
                 <InertiaLink :href="route('dynamics.invitations.create', dynamic.id)" class="c-dynamic-show__action-btn">
                     Invite User