Add presenter mode and app version display

This commit is contained in:
2026-08-24 23:50:06 +02:00
parent b516eef403
commit fc3c5777ef
13 changed files with 239 additions and 29 deletions
+36 -16
View File
@@ -3,10 +3,12 @@ import { Link } from '@inertiajs/vue3';
import { Check, Copy } from '@lucide/vue';
import { ref } from 'vue';
import { Checkbox } from '@/components/ui/checkbox';
import { favorite } from '@/routes/room';
import type { RoomHeaderProps } from '@/types/room';
import type { RoomHeaderEmits, RoomHeaderProps } from '@/types/room';
const props = defineProps<RoomHeaderProps>();
const emit = defineEmits<RoomHeaderEmits>();
const copied = ref(false);
@@ -45,21 +47,39 @@ async function copyInviteLink(): Promise<void> {
</Link>
</div>
<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"
@click="copyInviteLink"
>
<span>
<span class="block text-sm tracking-[0.18em] text-slate-400">
Raumcode
<div class="flex flex-col items-end gap-2">
<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"
@click="copyInviteLink"
>
<span>
<span
class="block text-sm tracking-[0.18em] text-slate-400"
>
Raumcode
</span>
<strong class="font-mono text-lg tracking-[0.2em]">
{{ join_code }}
</strong>
</span>
<strong class="font-mono text-lg tracking-[0.2em]">
{{ join_code }}
</strong>
</span>
<Check v-if="copied" class="size-5 text-emerald-300" />
<Copy v-else class="size-5 text-slate-300" />
</button>
<Check v-if="copied" class="size-5 text-emerald-300" />
<Copy v-else class="size-5 text-slate-300" />
</button>
<label
for="presenter-mode"
class="flex cursor-pointer items-center gap-2 text-sm text-slate-300"
>
<Checkbox
id="presenter-mode"
:model-value="presenterMode"
@update:model-value="
emit('update:presenterMode', $event === true)
"
/>
<span>Präsentatormodus</span>
</label>
</div>
</header>
</template>