different names in different dynamics

resources/js/components/DisplayNameForm.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { useForm } from '@inertiajs/vue3';
+import { route } from 'ziggy-js';
+
+const props = defineProps<{
+    dynamicId: number;
+    participant: {
+        id: number;
+        name: string;
+        display_name: string | null;
+    };
+}>();
+
+const form = useForm({
+    display_name: props.participant.display_name ?? '',
+});
+
+function submit() {
+    form.put(route('dynamics.participant.update', props.dynamicId));
+}
+</script>
+
+<template>
+    <div class="c-display-name-form">
+        <h4 class="c-display-name-form__title">
+            Display Name for {{ participant.name }}
+        </h4>
+        <form @submit.prevent="submit" class="c-display-name-form__form">
+            <div class="c-display-name-form__field">
+                <label
+                    for="display_name"
+                    class="c-display-name-form__label"
+                >
+                    Dynamic-specific Display Name
+                </label>
+                <input
+                    v-model="form.display_name"
+                    id="display_name"
+                    type="text"
+                    class="c-display-name-form__input"
+                />
+                <div
+                    v-if="form.errors.display_name"
+                    class="c-display-name-form__error"
+                >
+                    {{ form.errors.display_name }}
+                </div>
+            </div>
+
+            <div class="c-display-name-form__actions">
+                <button
+                    type="submit"
+                    :disabled="form.processing"
+                    class="c-display-name-form__submit-btn"
+                >
+                    Save
+                </button>
+            </div>
+        </form>
+    </div>
+</template>
+
+<style scoped>
+@reference '../../css/app.css';
+
+.c-display-name-form {
+    @apply mt-8;
+}
+
+.c-display-name-form__title {
+    @apply text-lg font-medium;
+    color: var(--foreground);
+}
+
+.c-display-name-form__form {
+    @apply mt-4 space-y-4;
+}
+
+.c-display-name-form__field {
+    @apply block;
+}
+
+.c-display-name-form__label {
+    @apply block text-sm font-medium;
+    color: var(--foreground);
+}
+
+.c-display-name-form__input {
+    @apply mt-1 block w-full rounded-md border shadow-sm focus:border-indigo-500 focus:ring-indigo-500;
+    border-color: var(--border);
+    background-color: var(--background);
+    color: var(--foreground);
+}
+
+.c-display-name-form__error {
+    @apply text-sm;
+    color: var(--destructive);
+}
+
+.c-display-name-form__actions {
+    @apply flex items-center gap-4;
+}
+
+.c-display-name-form__submit-btn {
+    @apply inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold tracking-widest text-white uppercase transition duration-150 ease-in-out hover:bg-gray-700 focus:bg-gray-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none active:bg-gray-900;
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+
+    &:hover {
+        opacity: 0.9;
+    }
+}
+</style>

resources/js/components/ParticipantsList.vue

@@ -3,6 +3,9 @@ defineProps<{
     participants: Array<{
         id: number;
         name: string;
+        pivot: {
+            display_name: string | null;
+        };
     }>;
 }>();
 </script>
@@ -16,7 +19,7 @@ defineProps<{
                 :key="participant.id"
                 class="c-participants-list__item"
             >
-                {{ participant.name }}
+                {{ participant.pivot.display_name ?? participant.name }}
             </li>
         </ul>
     </div>

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