better system messages, display name relocation

resources/js/pages/Dynamics/Show.vue

@@ -2,10 +2,8 @@
 import Chat from '@/components/Chat.vue';
 import ParticipantsList from '@/components/ParticipantsList.vue';
 import LedgerList from '@/components/LedgerList.vue';
-import DisplayNameForm from '@/components/DisplayNameForm.vue';
-import { Head, Link as InertiaLink, usePage } from '@inertiajs/vue3';
+import { Head, Link as InertiaLink } from '@inertiajs/vue3';
 import { route } from 'ziggy-js';
-import { computed } from 'vue';
 
 const props = defineProps<{
     dynamic: {
@@ -25,17 +23,6 @@ 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 = [
     {
@@ -71,7 +58,7 @@ const breadcrumbs = [
             </div>
 
             <!-- Dynamic Chat -->
-            <Chat :chat="dynamic.chat" />
+            <Chat :chat="dynamic.chat" :participants="dynamic.participants" :dynamic-id="dynamic.id" />
 
             <!-- Participants Component -->
             <ParticipantsList :participants="dynamic.participants" />
@@ -79,9 +66,6 @@ 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