From 2572db7a24c44cf755e9f27dd15a64bddaaa897e Mon Sep 17 00:00:00 2001
From: eiiko6 <myeiiko6@gmail.com>
Date: Thu, 18 Dec 2025 08:06:20 +0100
Subject: [PATCH] added global room creation in frontend and fixed global rooms

---
 src/api/rooms.ts                   |  4 +-
 src/components/CreateRoomForm.vue  | 21 -------
 src/components/CreateRoomModal.vue | 95 ++++++++++++++++++++++++++++++
 src/pages/ChatPage.vue             |  3 -
 src/pages/RoomsPage.vue            | 23 +++++---
 src/types/api.ts                   |  3 +-
 6 files changed, 115 insertions(+), 34 deletions(-)
 delete mode 100644 src/components/CreateRoomForm.vue
 create mode 100644 src/components/CreateRoomModal.vue

diff --git a/src/api/rooms.ts b/src/api/rooms.ts
index bf5abf9..05db338 100644
--- a/src/api/rooms.ts
+++ b/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 }),
   })
 }
 
diff --git a/src/components/CreateRoomForm.vue b/src/components/CreateRoomForm.vue
deleted file mode 100644
index 735b0e2..0000000
--- a/src/components/CreateRoomForm.vue
+++ /dev/null
@@ -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>
diff --git a/src/components/CreateRoomModal.vue b/src/components/CreateRoomModal.vue
new file mode 100644
index 0000000..4b36fb4
--- /dev/null
+++ b/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>
diff --git a/src/pages/ChatPage.vue b/src/pages/ChatPage.vue
index fbb5372..b1dc5ae 100644
--- a/src/pages/ChatPage.vue
+++ b/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;
diff --git a/src/pages/RoomsPage.vue b/src/pages/RoomsPage.vue
index a4ec1ff..ff74869 100644
--- a/src/pages/RoomsPage.vue
+++ b/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>
diff --git a/src/types/api.ts b/src/types/api.ts
index d5c8280..741affd 100644
--- a/src/types/api.ts
+++ b/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 {