better system messages, display name relocation

resources/js/pages/settings/Profile.vue

@@ -6,6 +6,7 @@ import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileCo
 import DeleteUser from '@/components/DeleteUser.vue';
 import Heading from '@/components/Heading.vue';
 import InputError from '@/components/InputError.vue';
+import DynamicDisplayNameItem from '@/components/DynamicDisplayNameItem.vue';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -23,6 +24,18 @@ defineOptions({
     },
 });
 
+defineProps<{
+    mustVerifyEmail: boolean;
+    status: string | null;
+    dynamics: Array<{
+        id: number;
+        name: string;
+        pivot: {
+            display_name: string | null;
+        };
+    }>;
+}>();
+
 const page = usePage();
 const user = computed(() => page.props.auth.user);
 </script>
@@ -99,6 +112,27 @@ const user = computed(() => page.props.auth.user);
                 >
             </div>
         </Form>
+
+        <!-- Dynamic-Specific Display Names Section -->
+        <div class="pt-8 border-t">
+            <Heading
+                variant="small"
+                title="Dynamic Display Names"
+                description="Customize your display name for each of your dynamics"
+            />
+            <div class="mt-6 space-y-4">
+                <div v-if="dynamics && dynamics.length > 0" class="space-y-4">
+                    <DynamicDisplayNameItem
+                        v-for="dyn in dynamics"
+                        :key="dyn.id"
+                        :dynamic="dyn"
+                    />
+                </div>
+                <p v-else class="text-sm text-muted-foreground">
+                    You are not a participant in any dynamics yet.
+                </p>
+            </div>
+        </div>
     </div>
 
     <DeleteUser />