Added inern app integration

resources/js/components/MyRooms.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Link, useForm } from '@inertiajs/vue3';
-import { DoorOpen, Plus, Trash2 } from '@lucide/vue';
+import { DoorOpen, Plus, Settings as SettingsIcon, Trash2 } from '@lucide/vue';
 import { ref } from 'vue';
 
 import DashboardRoomCard from '@/components/dashboard/DashboardRoomCard.vue';
@@ -13,6 +13,7 @@ import {
     DialogTitle,
 } from '@/components/ui/dialog';
 import { create, destroy, reopen, show } from '@/routes/room';
+import { edit as roomSettings } from '@/routes/room/settings';
 import type { DashboardRoom, OwnedRoomListProps } from '@/types/dashboard';
 
 defineProps<OwnedRoomListProps>();
@@ -91,6 +92,14 @@ function deleteRoom(): void {
                         Raum öffnen
                     </Link>
 
+                    <Link
+                        :href="roomSettings(room.id)"
+                        class="inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold transition hover:bg-slate-700"
+                    >
+                        <SettingsIcon class="size-4" />
+                        Einstellungen
+                    </Link>
+
                     <button
                         type="button"
                         class="inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold text-rose-300 transition hover:bg-rose-500/80"

resources/js/components/rooms/RoomExperience.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { Head, usePage } from '@inertiajs/vue3';
+import { computed, ref } from 'vue';
+
+import RoomHeader from '@/components/rooms/RoomHeader.vue';
+import RoomRetentionNotice from '@/components/rooms/RoomRetentionNotice.vue';
+import RoomTable from '@/components/rooms/RoomTable.vue';
+import RoomVoteDeck from '@/components/rooms/RoomVoteDeck.vue';
+import { useRoomRealtime } from '@/composables/useRoomRealtime';
+import type { RoomExperienceProps } from '@/types/room';
+
+const props = withDefaults(defineProps<RoomExperienceProps>(), {
+    embedded: false,
+});
+
+const page = usePage();
+const presenterMode = ref(false);
+const roomNotice = computed(() => page.props.roomNotice);
+const canFavorite = computed(
+    () => !props.embedded && page.props.auth.user?.id != props.room.owner_id,
+);
+
+const {
+    room: realtimeRoom,
+    currentPlayer: realtimeCurrentPlayer,
+    setCurrentVote,
+} = useRoomRealtime(
+    () => props.room,
+    () => props.currentPlayer,
+);
+</script>
+
+<template>
+    <Head :title="realtimeRoom.title ?? 'Scrum Poker'" />
+
+    <main
+        class="min-h-svh bg-slate-900 px-3 py-6 text-white sm:px-6 md:flex md:min-h-0 md:flex-col md:overflow-hidden lg:px-10"
+        :class="
+            embedded
+                ? 'md:h-dvh'
+                : '-m-6 min-h-[calc(100svh-4rem)] md:h-[calc(100dvh-4rem-1px)]'
+        "
+    >
+        <RoomRetentionNotice v-if="roomNotice" :notice="roomNotice" />
+
+        <RoomHeader
+            :id="realtimeRoom.id"
+            :title="realtimeRoom.title"
+            :join_code="realtimeRoom.join_code"
+            :is_favorite="realtimeRoom.is_favorite"
+            :can-favorite="canFavorite"
+            :embedded="embedded"
+            :player-name="realtimeCurrentPlayer.name"
+            v-model:presenter-mode="presenterMode"
+        />
+
+        <RoomTable
+            :room="realtimeRoom"
+            :current-player="realtimeCurrentPlayer"
+            :presenter-mode="presenterMode"
+        />
+
+        <RoomVoteDeck
+            :room-id="realtimeRoom.id"
+            :revealed="realtimeRoom.revealed"
+            :cards="realtimeRoom.deck.cards"
+            :current-vote="realtimeCurrentPlayer.current_vote"
+            :presenter-mode="presenterMode"
+            @vote-changed="setCurrentVote"
+        />
+    </main>
+</template>

resources/js/components/rooms/RoomHeader.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
-import { Check, Copy } from '@lucide/vue';
+import { Check, Copy, LogOut } from '@lucide/vue';
 import { ref } from 'vue';
 
 import { Checkbox } from '@/components/ui/checkbox';
+import { logout as embeddedLogout } from '@/routes/embedded';
 import { favorite } from '@/routes/room';
 import type { RoomHeaderEmits, RoomHeaderProps } from '@/types/room';
 
@@ -48,6 +49,24 @@ async function copyInviteLink(): Promise<void> {
         </div>
 
         <div class="flex flex-col items-end gap-2">
+            <Link
+                v-if="embedded"
+                :href="
+                    embeddedLogout({
+                        query: {
+                            join_code,
+                            player_name: playerName,
+                        },
+                    })
+                "
+                method="post"
+                as="button"
+                class="inline-flex items-center gap-2 text-sm text-slate-300 transition hover:text-white"
+            >
+                <LogOut class="size-4" />
+                Abmelden
+            </Link>
+
             <button
                 type="button"
                 class="flex w-fit items-center gap-3 rounded-xl border border-slate-700 bg-slate-800 px-4 py-2.5 text-left transition hover:bg-slate-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-300"

resources/js/components/rooms/RoomTable.vue

@@ -120,7 +120,10 @@ const voteCount = computed(
             />
 
             <RoomModeratorControls
-                v-if="currentPlayer.is_moderator"
+                v-if="
+                    currentPlayer.is_moderator ||
+                    room.allow_participants_to_manage_rounds
+                "
                 :room-id="room.id"
                 :revealed="room.revealed"
                 :has-votes="voteCount > 0"