added global room creation in frontend and fixed global rooms

src/api/rooms.ts

@@ -5,10 +5,10 @@ export function fetchRooms(userUuid: string) {
   return apiFetch<Room[]>(`/rooms/${userUuid}`)
 }
 
-export function createRoom(name: string) {
+export function createRoom(name: string, global: boolean) {
   return apiFetch<Room>('/rooms', {
     method: 'POST',
-    body: JSON.stringify({ name }),
+    body: JSON.stringify({ name, global }),
   })
 }
 

src/components/CreateRoomForm.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { createRoom } from '../api/rooms'
-import type { Room } from '../types/api'
-
-const name = ref('')
-const emit = defineEmits<{ (e: 'created', room: Room): void }>()
-
-async function submit() {
-  const room = await createRoom(name.value)
-  emit('created', room)
-  name.value = ''
-}
-</script>
-
-<template>
-  <div>
-    <input v-model="name" placeholder="room name" />
-    <button @click="submit">Create</button>
-  </div>
-</template>

src/components/CreateRoomModal.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { createRoom } from '../api/rooms'
+import type { Room } from '../types/api'
+
+const name = ref('')
+const global = ref(false)
+
+const emit = defineEmits<{
+  (e: 'created', room: Room): void
+  (e: 'close'): void
+}>()
+
+async function submit() {
+  const room = await createRoom(name.value, global.value)
+  emit('created', room)
+  emit('close')
+  name.value = ''
+  global.value = false
+}
+</script>
+
+<template>
+  <div class="backdrop" @click.self="emit('close')">
+    <div class="modal">
+      <h2>Create room</h2>
+
+      <input v-model="name" placeholder="Room name" />
+
+      <label class="checkbox">
+        <input type="checkbox" v-model="global" />
+        <span>Global room</span>
+      </label>
+
+      <div class="actions">
+        <button @click="emit('close')" class="secondary">Cancel</button>
+        <button @click="submit">Create</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.5rem;
+  width: 100%;
+  max-width: 420px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.modal h2 {
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.checkbox {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+.secondary {
+  background: transparent;
+  color: var(--text);
+  border: 1px solid var(--border);
+}
+
+.secondary:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+</style>

src/pages/ChatPage.vue

@@ -107,10 +107,7 @@ onUnmounted(() => {
   border-top: 1px solid var(--border);
   background: var(--panel);
 }
-</style>
 
-
-<style scoped>
 .chat-page {
   display: flex;
   flex-direction: column;

src/pages/RoomsPage.vue

@@ -2,13 +2,16 @@
   <div class="rooms-page">
     <header class="rooms-header">
       <h1>Your rooms</h1>
-      <CreateRoomForm @created="rooms.push($event)" />
+      <button @click="showCreate = true">Create room</button>
     </header>
 
+    <CreateRoomModal v-if="showCreate" @close="showCreate = false" @created="rooms.push($event)" />
+
+
     <ul class="rooms-list">
       <li v-for="room in rooms" :key="room.uuid" class="room-item">
         <router-link class="room-link" :to="`/rooms/${room.uuid}`">
-          {{ room.name }}
+          {{ room.name }} <span class="owner">{{ room.owner_name }}</span>
         </router-link>
       </li>
     </ul>
@@ -23,6 +26,10 @@ import { useRouter } from 'vue-router'
 import { initAuth, logout as authLogout } from '../stores/auth.ts'
 import { fetchRooms } from '../api/rooms'
 import type { Room } from '../types/api'
+import CreateRoomModal from '../components/CreateRoomModal.vue'
+
+const showCreate = ref(false)
+
 
 const router = useRouter()
 
@@ -39,11 +46,6 @@ function logout() {
 }
 </script>
 
-<script lang="ts">
-import CreateRoomForm from '../components/CreateRoomForm.vue'
-export default { components: { CreateRoomForm } }
-</script>
-
 <style scoped>
 .rooms-page {
   max-width: 720px;
@@ -97,4 +99,11 @@ export default { components: { CreateRoomForm } }
   top: 0;
   margin: 30px;
 }
+
+.owner {
+  font-weight: normal;
+  opacity: 0.7;
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
+}
 </style>

src/types/api.ts

@@ -5,8 +5,9 @@ export interface LoginResponse {
 
 export interface Room {
   uuid: string
-  owner: number
+  owner_name: number
   name: string
+  globa: boolean
 }
 
 export interface Message {