From 61d1a18ce66335cc80542f403e1e1e37dfc89313 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alja=C5=BE=20Hribernik?= <hribernik.aljaz@gmail.com>
Date: Thu, 8 Jan 2026 04:28:46 +0100
Subject: [PATCH 01/11] room user, user label and context menu

---
 web/package.json                              |   6 +-
 web/src/components/icon/icons.ts              |   2 +
 .../components/identity/user-context-menu.vue | 137 ++++++++++++++++++
 web/src/components/identity/user-identity.vue |   2 +-
 web/src/components/identity/user-label.vue    |  66 +++++++++
 web/src/components/identity/user-room.vue     |  41 ++++++
 web/src/icons/promote.svg                     |   3 +
 web/src/icons/remove.svg                      |   4 +
 web/src/main.css                              |   6 +
 web/src/views/RoomView.vue                    |  12 +-
 10 files changed, 274 insertions(+), 5 deletions(-)
 create mode 100644 web/src/components/identity/user-context-menu.vue
 create mode 100644 web/src/components/identity/user-label.vue
 create mode 100644 web/src/components/identity/user-room.vue
 create mode 100644 web/src/icons/promote.svg
 create mode 100644 web/src/icons/remove.svg

diff --git a/web/package.json b/web/package.json
index c84007f..483b90c 100644
--- a/web/package.json
+++ b/web/package.json
@@ -23,7 +23,7 @@
         "@regle/rules": "^1.16.1",
         "crypto-js": "^4.2.0",
         "slugify": "^1.6.6",
-        "vue": "3.5.15",
+        "vue": "^3.5.26",
         "vue-router": "4"
     },
     "devDependencies": {
@@ -31,7 +31,7 @@
         "@spiriit/vite-plugin-svg-spritemap": "^6.0.0",
         "@types/crypto-js": "^4.2.2",
         "@types/node": "^24.10.1",
-        "@vitejs/plugin-vue": "5.2.1",
+        "@vitejs/plugin-vue": "^6.0.0",
         "@vue/eslint-config-prettier": "^10.2.0",
         "@vue/eslint-config-typescript": "^14.6.0",
         "@vue/tsconfig": "^0.8.1",
@@ -42,7 +42,7 @@
         "oxlint": "^1.36.0",
         "prettier": "^3.7.4",
         "typescript": "~5.9.3",
-        "vite": "~7.0.0",
+        "vite": "^7.3.0",
         "vite-plugin-vue-devtools": "^8.0.5",
         "vue-tsc": "^3.2.1"
     }
diff --git a/web/src/components/icon/icons.ts b/web/src/components/icon/icons.ts
index fe4d76c..0b09475 100644
--- a/web/src/components/icon/icons.ts
+++ b/web/src/components/icon/icons.ts
@@ -7,6 +7,8 @@ export const ICONS = [
     'delete',
     'add',
     'arrow_down',
+    'promote',
+    'remove',
 ] as const
 
 export type TIconName = (typeof ICONS)[number]
diff --git a/web/src/components/identity/user-context-menu.vue b/web/src/components/identity/user-context-menu.vue
new file mode 100644
index 0000000..f6003d6
--- /dev/null
+++ b/web/src/components/identity/user-context-menu.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import SyncButton from '../button/sync-button.vue';
+import UserLabel from './user-label.vue';
+
+
+const props = defineProps<{
+    username: string
+    isAdmin: boolean
+
+    timeConnected?: number
+    ping?: number
+    error?: number
+    buffer?: number
+}>()
+
+const emits = defineEmits<{
+    (e: 'promote'): void
+    (e: 'remove'): void
+}>()
+</script>
+
+<template>
+    <div class="user-context-menu shadow-high">
+        <UserLabel 
+        :username="props.username" 
+        :is-admin="props.isAdmin" 
+        :is-context-m="true" />
+        <hr class="s-separator" />
+        <div class="s-status">
+            <span class="t-bold">Sync Status</span>
+            <div class="u-connected">
+                <span>Connected:</span>
+                <span>{{ props.timeConnected ?? 'NaN' }}</span>
+            </div>
+            <div class="u-stats">
+                <div class="ping stat">
+                    <span class="t-bold">Ping</span>
+                    <span>{{ props.ping ?? 'NaN'}}</span>
+                </div>
+                <div class="error stat">
+                    <span class="t-bold">Error</span>
+                    <span>{{ props.error ?? 'NaN'}}</span>
+                </div>
+                <div class="buffer stat">
+                    <span class="t-bold">Buffer</span>
+                    <span>{{ props.buffer ?? 'NaN'}}</span>
+                </div>
+            </div>
+        </div>
+        <hr class="s-separator" />
+        <div class="admin-actions">
+            <SyncButton @click="$emit('promote')"
+            class="icon-gold" 
+            text="Promote" 
+            icon="promote" 
+            bstyle="small" 
+            color="background" />
+            <SyncButton @click="$emit('remove')"
+            class="icon-red" 
+            text="Remove" 
+            icon="remove" 
+            bstyle="small" 
+            color="background" />
+        </div>
+    </div>
+
+</template>
+
+<style scoped>
+
+.user-context-menu {
+    position: absolute;
+    min-width: 289px;
+    
+    display: flex;
+    flex-direction: column;
+    
+    font-family: var(--s-font);
+    
+    padding: 4px 10px 4px 10px;
+    border: 1px solid var(--s-border);
+    border-radius: 16px;
+
+    box-sizing: border-box;
+    
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+}
+
+.s-status {
+    font-size: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.u-connected {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.u-stats {
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+}
+
+.stat {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.t-bold {
+    font-weight: var(--s-weight-bold);
+}
+
+.admin-actions {
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+    & > * {
+        flex: 1;
+    }
+}
+
+.icon-gold :deep(svg) {
+  fill: var(--s-gold) !important;
+}
+.icon-red :deep(svg) {
+  fill: var(--s-error) !important;
+}
+
+</style>
\ No newline at end of file
diff --git a/web/src/components/identity/user-identity.vue b/web/src/components/identity/user-identity.vue
index c4a3973..f5755dc 100644
--- a/web/src/components/identity/user-identity.vue
+++ b/web/src/components/identity/user-identity.vue
@@ -18,7 +18,7 @@ const emit = defineEmits<{
 
 <template>
     <div class="s-identity">
-        <img class="avatar" :src="props.image" :alt="`${username}'s Avatar`" />
+        <img class="avatar" :src="props.image" :alt="`${props.username}'s Avatar`" />
 
         <div class="midstack">
             <span class="title">{{ props.title }}</span>
diff --git a/web/src/components/identity/user-label.vue b/web/src/components/identity/user-label.vue
new file mode 100644
index 0000000..b081358
--- /dev/null
+++ b/web/src/components/identity/user-label.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+
+const props = defineProps<{
+    username: string
+    isAdmin: boolean
+    isContextM: boolean
+    // position: {x: number, y: number}
+    // adminAction: boolean
+    
+    // timeConnected?: number
+    // ping?: number
+    // error?: number
+    // buffer?: number
+}>()
+
+// const emits = defineEmits<{
+//     (e: 'promote'): void
+//     (e: 'remove'): void
+// }>()
+</script>
+
+<template>
+    <div class="user-label" :class="[{'label-container shadow-high' : !isContextM}]">
+        <span class="username">{{ props.username }}</span>
+        <span class="role">{{ props.isAdmin ? "Admin" : "User"}}</span>
+    </div>
+</template>
+
+<style scoped>
+
+.user-label {
+    display: flex;
+    flex-direction: column;
+    font-family: var(--s-font);
+}
+
+.label-container {
+    position: absolute;
+    min-width: 146px;
+
+    padding: 4px 8px 4px 8px;
+    border: 1px solid var(--s-border);
+    border-radius: 8px;
+
+    box-sizing: border-box;
+    
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+}
+
+.username {
+    font-size: 20px;
+    font-weight: var(--s-weight-bold);
+}
+
+.role {
+    font-size: 16px;
+    color: var(--s-text-subtle);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+
+</style>
\ No newline at end of file
diff --git a/web/src/components/identity/user-room.vue b/web/src/components/identity/user-room.vue
new file mode 100644
index 0000000..4fcd8f3
--- /dev/null
+++ b/web/src/components/identity/user-room.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const props = defineProps <{
+    username: string
+    image: string
+    isSelf: boolean
+    isOnline: boolean
+
+
+}>()
+
+const emit = defineEmits<{
+    (e: 'select'): void
+}>()
+</script>
+
+<template>
+    <img 
+    class="avatar" 
+    :class="[{'self' : props.isSelf}, {'offline' : !props.isOnline}]" 
+    :src="props.image" :alt="`${props.username}'s Avatar'`"
+    @click="$emit('select')">
+</template>
+
+<style scoped>
+
+.avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    border: 2px solid transparent;
+}
+
+.self {
+    border-color: var(--s-primary);
+}
+
+.offline {
+    opacity: 0.5;
+}
+
+</style>
\ No newline at end of file
diff --git a/web/src/icons/promote.svg b/web/src/icons/promote.svg
new file mode 100644
index 0000000..c6e3492
--- /dev/null
+++ b/web/src/icons/promote.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.99994 20.9999H18.9999M11.5619 3.26592C11.6051 3.18753 11.6685 3.12216 11.7456 3.07663C11.8226 3.0311 11.9104 3.00708 11.9999 3.00708C12.0894 3.00708 12.1773 3.0311 12.2543 3.07663C12.3314 3.12216 12.3948 3.18753 12.4379 3.26592L15.3899 8.86992C15.4603 8.99969 15.5586 9.11225 15.6776 9.19954C15.7967 9.28683 15.9336 9.34668 16.0785 9.37478C16.2235 9.40289 16.3728 9.39856 16.5159 9.3621C16.6589 9.32564 16.7921 9.25797 16.9059 9.16392L21.1829 5.49992C21.265 5.43315 21.3662 5.39414 21.4719 5.38853C21.5776 5.38291 21.6823 5.41097 21.771 5.46867C21.8598 5.52637 21.9279 5.61073 21.9656 5.70961C22.0033 5.8085 22.0087 5.9168 21.9809 6.01892L19.1469 16.2649C19.0891 16.4746 18.9645 16.6597 18.7919 16.7921C18.6194 16.9246 18.4084 16.9972 18.1909 16.9989H5.80994C5.59227 16.9974 5.38105 16.9249 5.20833 16.7924C5.03561 16.66 4.91083 16.4748 4.85294 16.2649L2.01994 6.01992C1.99219 5.9178 1.99756 5.8095 2.03528 5.71061C2.073 5.61173 2.14112 5.52737 2.22984 5.46967C2.31855 5.41197 2.42329 5.38391 2.52898 5.38953C2.63466 5.39514 2.73583 5.43415 2.81794 5.50092L7.09394 9.16492C7.20773 9.25897 7.34094 9.32664 7.484 9.3631C7.62705 9.39956 7.77641 9.40389 7.92134 9.37578C8.06626 9.34768 8.20317 9.28783 8.32223 9.20054C8.44129 9.11325 8.53954 9.00069 8.60994 8.87092L11.5619 3.26592Z" stroke="#E7D237" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/web/src/icons/remove.svg b/web/src/icons/remove.svg
new file mode 100644
index 0000000..5f433ef
--- /dev/null
+++ b/web/src/icons/remove.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 10C10.0304 10 10.5391 9.78929 10.9142 9.41421C11.2893 9.03914 11.5 8.53043 11.5 8C11.5 7.46957 11.2893 6.96086 10.9142 6.58579C10.5391 6.21071 10.0304 6 9.5 6C8.96957 6 8.46086 6.21071 8.08579 6.58579C7.71071 6.96086 7.5 7.46957 7.5 8C7.5 8.53043 7.71071 9.03914 8.08579 9.41421C8.46086 9.78929 8.96957 10 9.5 10ZM9.5 12C10.5609 12 11.5783 11.5786 12.3284 10.8284C13.0786 10.0783 13.5 9.06087 13.5 8C13.5 6.93913 13.0786 5.92172 12.3284 5.17157C11.5783 4.42143 10.5609 4 9.5 4C8.43913 4 7.42172 4.42143 6.67157 5.17157C5.92143 5.92172 5.5 6.93913 5.5 8C5.5 9.06087 5.92143 10.0783 6.67157 10.8284C7.42172 11.5786 8.43913 12 9.5 12ZM16.293 9.293C16.4805 9.10553 16.7348 9.00021 17 9.00021C17.2652 9.00021 17.5195 9.10553 17.707 9.293L19 10.586L20.293 9.293C20.3852 9.19749 20.4956 9.12131 20.6176 9.0689C20.7396 9.01649 20.8708 8.9889 21.0036 8.98775C21.1364 8.9866 21.2681 9.0119 21.391 9.06218C21.5138 9.11246 21.6255 9.18671 21.7194 9.28061C21.8133 9.3745 21.8875 9.48615 21.9378 9.60905C21.9881 9.73194 22.0134 9.86362 22.0123 9.9964C22.0111 10.1292 21.9835 10.2604 21.9311 10.3824C21.8787 10.5044 21.8025 10.6148 21.707 10.707L20.414 12L21.707 13.293C21.8892 13.4816 21.99 13.7342 21.9877 13.9964C21.9854 14.2586 21.8802 14.5094 21.6948 14.6948C21.5094 14.8802 21.2586 14.9854 20.9964 14.9877C20.7342 14.99 20.4816 14.8892 20.293 14.707L19 13.414L17.707 14.707C17.5184 14.8892 17.2658 14.99 17.0036 14.9877C16.7414 14.9854 16.4906 14.8802 16.3052 14.6948C16.1198 14.5094 16.0146 14.2586 16.0123 13.9964C16.01 13.7342 16.1108 13.4816 16.293 13.293L17.586 12L16.293 10.707C16.1055 10.5195 16.0002 10.2652 16.0002 10C16.0002 9.73484 16.1055 9.48053 16.293 9.293ZM3.354 15.176C4.311 13.836 5.77 13 7.643 13H11.357C13.23 13 14.689 13.837 15.646 15.176C16.577 16.479 17 18.202 17 20C17 20.2652 16.8946 20.5196 16.7071 20.7071C16.5196 20.8946 16.2652 21 16 21C15.7348 21 15.4804 20.8946 15.2929 20.7071C15.1054 20.5196 15 20.2652 15 20C15 18.484 14.64 17.207 14.019 16.339C13.424 15.507 12.562 15 11.357 15H7.643C6.438 15 5.576 15.507 4.981 16.339C4.361 17.207 4 18.484 4 19.999C4 20.2642 3.89464 20.5186 3.70711 20.7061C3.51957 20.8936 3.26522 20.999 3 20.999C2.73478 20.999 2.48043 20.8936 2.29289 20.7061C2.10536 20.5186 2 20.2642 2 19.999C2 18.202 2.422 16.479 3.354 15.176Z" fill="#E92323"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 20C2 19.7348 2.10536 19.4804 2.29289 19.2929C2.48043 19.1054 2.73478 19 3 19H15.969C16.2342 19 16.4886 19.1054 16.6761 19.2929C16.8636 19.4804 16.969 19.7348 16.969 20C16.969 20.2652 16.8636 20.5196 16.6761 20.7071C16.4886 20.8946 16.2342 21 15.969 21H3C2.73478 21 2.48043 20.8946 2.29289 20.7071C2.10536 20.5196 2 20.2652 2 20Z" fill="#E92323"/>
+</svg>
diff --git a/web/src/main.css b/web/src/main.css
index 7b5a6a0..fb407e7 100644
--- a/web/src/main.css
+++ b/web/src/main.css
@@ -58,3 +58,9 @@ body {
 .s-link {
     color: var(--s-primary);
 }
+.s-separator {
+  border: none;
+  height: 2px;
+  background: var(--s-border, rgba(0, 0, 0, 0.1));
+  margin: 8px 0;
+}
diff --git a/web/src/views/RoomView.vue b/web/src/views/RoomView.vue
index 1293a44..794e04d 100644
--- a/web/src/views/RoomView.vue
+++ b/web/src/views/RoomView.vue
@@ -1,9 +1,19 @@
 <script setup lang="ts">
 import { useRoute } from 'vue-router'
 
+import UserRoom from '../components/identity/user-room.vue';
+import UserLabel from '../components/identity/user-label.vue';
+import UserContextMenu from '../components/identity/user-context-menu.vue';
+
 const route = useRoute()
 </script>
 
 <template>
-    <h1>Room {{ route.params.room }}</h1>
+    <!-- <UserRoom 
+    username="neki" 
+    image=" https://www.gravatar.com/avatar/09abd59eb5653a7183ba812b8261f48b" 
+    :is-self=true
+    :is-online=false 
+    @select="console.log('fetch data')" /> -->
+    <UserContextMenu username="Neki" :is-admin="true" />
 </template>

From d6398202fa6b1c695e7288ee1b70eb4af64df0e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alja=C5=BE=20Hribernik?= <hribernik.aljaz@gmail.com>
Date: Thu, 8 Jan 2026 04:35:01 +0100
Subject: [PATCH 02/11] user folder

---
 web/src/components/{identity => user}/user-context-menu.vue | 0
 web/src/components/{identity => user}/user-label.vue        | 0
 web/src/components/{identity => user}/user-room.vue         | 0
 web/src/views/RoomView.vue                                  | 4 +---
 4 files changed, 1 insertion(+), 3 deletions(-)
 rename web/src/components/{identity => user}/user-context-menu.vue (100%)
 rename web/src/components/{identity => user}/user-label.vue (100%)
 rename web/src/components/{identity => user}/user-room.vue (100%)

diff --git a/web/src/components/identity/user-context-menu.vue b/web/src/components/user/user-context-menu.vue
similarity index 100%
rename from web/src/components/identity/user-context-menu.vue
rename to web/src/components/user/user-context-menu.vue
diff --git a/web/src/components/identity/user-label.vue b/web/src/components/user/user-label.vue
similarity index 100%
rename from web/src/components/identity/user-label.vue
rename to web/src/components/user/user-label.vue
diff --git a/web/src/components/identity/user-room.vue b/web/src/components/user/user-room.vue
similarity index 100%
rename from web/src/components/identity/user-room.vue
rename to web/src/components/user/user-room.vue
diff --git a/web/src/views/RoomView.vue b/web/src/views/RoomView.vue
index 794e04d..baebd5f 100644
--- a/web/src/views/RoomView.vue
+++ b/web/src/views/RoomView.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { useRoute } from 'vue-router'
 
-import UserRoom from '../components/identity/user-room.vue';
-import UserLabel from '../components/identity/user-label.vue';
-import UserContextMenu from '../components/identity/user-context-menu.vue';
+import UserContextMenu from '../components/user/user-context-menu.vue';
 
 const route = useRoute()
 </script>

From 3eb999bb5d91a10bc7c8106edeba85959804de2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alja=C5=BE=20Hribernik?= <hribernik.aljaz@gmail.com>
Date: Fri, 9 Jan 2026 04:22:01 +0100
Subject: [PATCH 03/11] chat text field and some formating

---
 web/src/components/chat/chat-text-field.vue   | 99 +++++++++++++++++++
 web/src/components/icon/icons.ts              |  1 +
 web/src/components/user/user-context-menu.vue | 61 ++++++------
 web/src/components/user/user-label.vue        | 14 +--
 web/src/components/user/user-room.vue         | 20 ++--
 web/src/icons/smile.svg                       |  4 +
 web/src/main.css                              |  8 +-
 web/src/views/RoomView.vue                    |  5 +-
 8 files changed, 154 insertions(+), 58 deletions(-)
 create mode 100644 web/src/components/chat/chat-text-field.vue
 create mode 100644 web/src/icons/smile.svg

diff --git a/web/src/components/chat/chat-text-field.vue b/web/src/components/chat/chat-text-field.vue
new file mode 100644
index 0000000..3024c79
--- /dev/null
+++ b/web/src/components/chat/chat-text-field.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { ref, nextTick } from 'vue'
+import SyncButton from '../button/sync-button.vue'
+
+const message = ref('')
+
+function send(e: Event) {
+    if (!message.value.trim()) return
+
+    emit('send', message.value)
+    message.value = ''
+    nextTick(() => autoResizeTextarea(e.target as HTMLInputElement))
+}
+
+function onInput(e: Event) {
+    autoResizeTextarea(e.target as HTMLInputElement)
+}
+
+function autoResizeTextarea(textarea: HTMLInputElement) {
+    textarea.style.height = 'auto'
+    textarea.style.height = `${textarea.scrollHeight}px`
+}
+
+const emit = defineEmits<{
+    (e: 'send', message: string): void
+}>()
+</script>
+
+<template>
+    <div class="c-text-field">
+        <div class="c-input">
+            <textarea
+                v-model="message"
+                class="c-textarea"
+                placeholder="Write something..."
+                @keydown.enter.exact.prevent="send"
+                @input="onInput"
+            />
+            <SyncButton class="icon-gray" icon="smile" color="bgnb" bstyle="none" />
+        </div>
+        <span class="char-limit">{{ message.length }}/300</span>
+    </div>
+</template>
+
+<style scoped>
+.c-text-field {
+    display: flex;
+    flex-direction: column;
+
+    width: 100%;
+    background-color: var(--s-background-alt);
+
+    border-top: 1px solid var(--s-border);
+
+    font-family: var(--s-font);
+}
+
+.c-input {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 10px;
+}
+
+.c-textarea {
+    flex-grow: 1;
+    font-size: 16px;
+    line-height: 1.2;
+    max-height: 5lh;
+}
+
+.icon-gray {
+    flex-shrink: 1;
+    & :deep(svg) {
+        fill: var(--s-text-subtle) !important;
+    }
+}
+
+.char-limit {
+    padding: 0 5px 0 5px;
+    display: flex;
+    justify-content: flex-end;
+    font-size: 10px;
+}
+
+textarea {
+    border: none;
+    overflow-y: auto;
+    outline: none;
+    background: none;
+    min-height: 1.2em;
+
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+
+    resize: none;
+}
+</style>
diff --git a/web/src/components/icon/icons.ts b/web/src/components/icon/icons.ts
index 0b09475..d39ce56 100644
--- a/web/src/components/icon/icons.ts
+++ b/web/src/components/icon/icons.ts
@@ -9,6 +9,7 @@ export const ICONS = [
     'arrow_down',
     'promote',
     'remove',
+    'smile',
 ] as const
 
 export type TIconName = (typeof ICONS)[number]
diff --git a/web/src/components/user/user-context-menu.vue b/web/src/components/user/user-context-menu.vue
index f6003d6..f103930 100644
--- a/web/src/components/user/user-context-menu.vue
+++ b/web/src/components/user/user-context-menu.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import SyncButton from '../button/sync-button.vue';
-import UserLabel from './user-label.vue';
-
+import SyncButton from '../button/sync-button.vue'
+import UserLabel from './user-label.vue'
 
 const props = defineProps<{
     username: string
@@ -21,10 +20,7 @@ const emits = defineEmits<{
 
 <template>
     <div class="user-context-menu shadow-high">
-        <UserLabel 
-        :username="props.username" 
-        :is-admin="props.isAdmin" 
-        :is-context-m="true" />
+        <UserLabel :username="props.username" :is-admin="props.isAdmin" :is-context-m="true" />
         <hr class="s-separator" />
         <div class="s-status">
             <span class="t-bold">Sync Status</span>
@@ -35,54 +31,56 @@ const emits = defineEmits<{
             <div class="u-stats">
                 <div class="ping stat">
                     <span class="t-bold">Ping</span>
-                    <span>{{ props.ping ?? 'NaN'}}</span>
+                    <span>{{ props.ping ?? 'NaN' }}</span>
                 </div>
                 <div class="error stat">
                     <span class="t-bold">Error</span>
-                    <span>{{ props.error ?? 'NaN'}}</span>
+                    <span>{{ props.error ?? 'NaN' }}</span>
                 </div>
                 <div class="buffer stat">
                     <span class="t-bold">Buffer</span>
-                    <span>{{ props.buffer ?? 'NaN'}}</span>
+                    <span>{{ props.buffer ?? 'NaN' }}</span>
                 </div>
             </div>
         </div>
         <hr class="s-separator" />
         <div class="admin-actions">
-            <SyncButton @click="$emit('promote')"
-            class="icon-gold" 
-            text="Promote" 
-            icon="promote" 
-            bstyle="small" 
-            color="background" />
-            <SyncButton @click="$emit('remove')"
-            class="icon-red" 
-            text="Remove" 
-            icon="remove" 
-            bstyle="small" 
-            color="background" />
+            <SyncButton
+                @click="$emit('promote')"
+                class="icon-gold"
+                text="Promote"
+                icon="promote"
+                bstyle="small"
+                color="background"
+            />
+            <SyncButton
+                @click="$emit('remove')"
+                class="icon-red"
+                text="Remove"
+                icon="remove"
+                bstyle="small"
+                color="background"
+            />
         </div>
     </div>
-
 </template>
 
 <style scoped>
-
 .user-context-menu {
     position: absolute;
     min-width: 289px;
-    
+
     display: flex;
     flex-direction: column;
-    
+
     font-family: var(--s-font);
-    
+
     padding: 4px 10px 4px 10px;
     border: 1px solid var(--s-border);
     border-radius: 16px;
 
     box-sizing: border-box;
-    
+
     background: rgba(255, 255, 255, 0.8);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
@@ -128,10 +126,9 @@ const emits = defineEmits<{
 }
 
 .icon-gold :deep(svg) {
-  fill: var(--s-gold) !important;
+    fill: var(--s-gold) !important;
 }
 .icon-red :deep(svg) {
-  fill: var(--s-error) !important;
+    fill: var(--s-error) !important;
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/components/user/user-label.vue b/web/src/components/user/user-label.vue
index b081358..4492c5c 100644
--- a/web/src/components/user/user-label.vue
+++ b/web/src/components/user/user-label.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-
 const props = defineProps<{
     username: string
     isAdmin: boolean
     isContextM: boolean
     // position: {x: number, y: number}
     // adminAction: boolean
-    
+
     // timeConnected?: number
     // ping?: number
     // error?: number
@@ -20,14 +19,13 @@ const props = defineProps<{
 </script>
 
 <template>
-    <div class="user-label" :class="[{'label-container shadow-high' : !isContextM}]">
+    <div class="user-label" :class="[{ 'label-container shadow-high': !isContextM }]">
         <span class="username">{{ props.username }}</span>
-        <span class="role">{{ props.isAdmin ? "Admin" : "User"}}</span>
+        <span class="role">{{ props.isAdmin ? 'Admin' : 'User' }}</span>
     </div>
 </template>
 
 <style scoped>
-
 .user-label {
     display: flex;
     flex-direction: column;
@@ -43,7 +41,7 @@ const props = defineProps<{
     border-radius: 8px;
 
     box-sizing: border-box;
-    
+
     background: rgba(255, 255, 255, 0.8);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
@@ -61,6 +59,4 @@ const props = defineProps<{
     overflow: hidden;
     text-overflow: ellipsis;
 }
-
-
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/components/user/user-room.vue b/web/src/components/user/user-room.vue
index 4fcd8f3..dfce215 100644
--- a/web/src/components/user/user-room.vue
+++ b/web/src/components/user/user-room.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
-const props = defineProps <{
+const props = defineProps<{
     username: string
     image: string
     isSelf: boolean
     isOnline: boolean
-
-
 }>()
 
 const emit = defineEmits<{
@@ -14,15 +12,16 @@ const emit = defineEmits<{
 </script>
 
 <template>
-    <img 
-    class="avatar" 
-    :class="[{'self' : props.isSelf}, {'offline' : !props.isOnline}]" 
-    :src="props.image" :alt="`${props.username}'s Avatar'`"
-    @click="$emit('select')">
+    <img
+        class="avatar"
+        :class="[{ self: props.isSelf }, { offline: !props.isOnline }]"
+        :src="props.image"
+        :alt="`${props.username}'s Avatar'`"
+        @click="$emit('select')"
+    />
 </template>
 
 <style scoped>
-
 .avatar {
     width: 48px;
     height: 48px;
@@ -37,5 +36,4 @@ const emit = defineEmits<{
 .offline {
     opacity: 0.5;
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/icons/smile.svg b/web/src/icons/smile.svg
new file mode 100644
index 0000000..00cd833
--- /dev/null
+++ b/web/src/icons/smile.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#4C4C4C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 14C8 14 9.5 16 12 16C14.5 16 16 14 16 14M9 9H9.01M15 9H15.01" stroke="#4C4C4C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/web/src/main.css b/web/src/main.css
index fb407e7..cbd2991 100644
--- a/web/src/main.css
+++ b/web/src/main.css
@@ -59,8 +59,8 @@ body {
     color: var(--s-primary);
 }
 .s-separator {
-  border: none;
-  height: 2px;
-  background: var(--s-border, rgba(0, 0, 0, 0.1));
-  margin: 8px 0;
+    border: none;
+    height: 2px;
+    background: var(--s-border, rgba(0, 0, 0, 0.1));
+    margin: 8px 0;
 }
diff --git a/web/src/views/RoomView.vue b/web/src/views/RoomView.vue
index baebd5f..0b0f8af 100644
--- a/web/src/views/RoomView.vue
+++ b/web/src/views/RoomView.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { useRoute } from 'vue-router'
 
-import UserContextMenu from '../components/user/user-context-menu.vue';
+import UserContextMenu from '../components/user/user-context-menu.vue'
+import ChatTextField from '../components/chat/chat-text-field.vue'
 
 const route = useRoute()
 </script>
@@ -13,5 +14,5 @@ const route = useRoute()
     :is-self=true
     :is-online=false 
     @select="console.log('fetch data')" /> -->
-    <UserContextMenu username="Neki" :is-admin="true" />
+    <ChatTextField />
 </template>

From d2d66ec87fea4865a221e1558f3bc029960a4ce7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alja=C5=BE=20Hribernik?= <hribernik.aljaz@gmail.com>
Date: Sat, 10 Jan 2026 04:20:42 +0100
Subject: [PATCH 04/11] chat message and queue card

---
 web/src/components/chat/chat-message.vue    |  77 +++++++++++++++
 web/src/components/chat/chat-text-field.vue |  18 ++--
 web/src/components/icon/icons.ts            |   5 +
 web/src/components/user/user-room.vue       |   4 -
 web/src/icons/handle.svg                    |   1 +
 web/src/icons/play.svg                      |   1 +
 web/src/icons/playing.svg                   |   1 +
 web/src/icons/queue_add.svg                 |   1 +
 web/src/icons/suggest.svg                   |   1 +
 web/src/queue/queue-card.vue                | 102 ++++++++++++++++++++
 web/src/views/RoomView.vue                  |  22 ++++-
 11 files changed, 216 insertions(+), 17 deletions(-)
 create mode 100644 web/src/components/chat/chat-message.vue
 create mode 100644 web/src/icons/handle.svg
 create mode 100644 web/src/icons/play.svg
 create mode 100644 web/src/icons/playing.svg
 create mode 100644 web/src/icons/queue_add.svg
 create mode 100644 web/src/icons/suggest.svg
 create mode 100644 web/src/queue/queue-card.vue

diff --git a/web/src/components/chat/chat-message.vue b/web/src/components/chat/chat-message.vue
new file mode 100644
index 0000000..10682ec
--- /dev/null
+++ b/web/src/components/chat/chat-message.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+const props = defineProps<{
+    username: string
+    image: string
+    timestamp: Date
+
+    text?: string
+    recommendation?: Object
+}>()
+</script>
+
+<template>
+    <div class="c-msg">
+        <img class="avatar" :src="props.image" :alt="`${props.username}'s Avatar'`" />
+        <div class="c-msg-body">
+            <div class="name-time-row">
+                <span class="name">{{ props.username }}</span>
+                <span class="time">{{
+                    props.timestamp.toLocaleTimeString('en-US', {
+                        hour: '2-digit',
+                        minute: '2-digit',
+                        hour12: false,
+                    })
+                }}</span>
+            </div>
+            <div v-if="text" class="c-msg-content text">
+                <span>{{ props.text }}</span>
+            </div>
+            <div v-else class="c-msg-content recommendation"></div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.c-msg {
+    display: flex;
+    flex-direction: row;
+
+    padding: 8px;
+    gap: 8px;
+
+    font-family: var(--s-font);
+}
+
+.avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+}
+
+.c-msg-body {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.text {
+    font-size: 13px;
+}
+
+.name-time-row {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    justify-content: space-between;
+}
+
+.name {
+    font-size: 16px;
+    font-weight: var(--s-weight-bold);
+}
+
+.time {
+    font-size: 12px;
+    color: var(--s-text-subtle);
+}
+</style>
diff --git a/web/src/components/chat/chat-text-field.vue b/web/src/components/chat/chat-text-field.vue
index 3024c79..8ec3c5f 100644
--- a/web/src/components/chat/chat-text-field.vue
+++ b/web/src/components/chat/chat-text-field.vue
@@ -32,11 +32,14 @@ const emit = defineEmits<{
             <textarea
                 v-model="message"
                 class="c-textarea"
+                name="c-textarea"
                 placeholder="Write something..."
+                rows="1"
+                maxlength="300"
                 @keydown.enter.exact.prevent="send"
                 @input="onInput"
             />
-            <SyncButton class="icon-gray" icon="smile" color="bgnb" bstyle="none" />
+            <SyncButton class="icon-gray" icon="smile" color="bgnb" bstyle="small" />
         </div>
         <span class="char-limit">{{ message.length }}/300</span>
     </div>
@@ -58,22 +61,21 @@ const emit = defineEmits<{
 .c-input {
     display: flex;
     flex-direction: row;
-    align-items: flex-start;
-    padding: 10px;
+    align-items: baseline;
 }
 
 .c-textarea {
     flex-grow: 1;
-    font-size: 16px;
+    font-size: 14px;
     line-height: 1.2;
     max-height: 5lh;
+
+    padding-left: 10px;
+    box-sizing: border-box;
 }
 
 .icon-gray {
     flex-shrink: 1;
-    & :deep(svg) {
-        fill: var(--s-text-subtle) !important;
-    }
 }
 
 .char-limit {
@@ -88,7 +90,7 @@ textarea {
     overflow-y: auto;
     outline: none;
     background: none;
-    min-height: 1.2em;
+    padding: 0;
 
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
diff --git a/web/src/components/icon/icons.ts b/web/src/components/icon/icons.ts
index d39ce56..b4d0f46 100644
--- a/web/src/components/icon/icons.ts
+++ b/web/src/components/icon/icons.ts
@@ -10,6 +10,11 @@ export const ICONS = [
     'promote',
     'remove',
     'smile',
+    'suggest',
+    'handle',
+    'playing',
+    'queue_add',
+    'play',
 ] as const
 
 export type TIconName = (typeof ICONS)[number]
diff --git a/web/src/components/user/user-room.vue b/web/src/components/user/user-room.vue
index dfce215..10ce829 100644
--- a/web/src/components/user/user-room.vue
+++ b/web/src/components/user/user-room.vue
@@ -5,10 +5,6 @@ const props = defineProps<{
     isSelf: boolean
     isOnline: boolean
 }>()
-
-const emit = defineEmits<{
-    (e: 'select'): void
-}>()
 </script>
 
 <template>
diff --git a/web/src/icons/handle.svg b/web/src/icons/handle.svg
new file mode 100644
index 0000000..657c55b
--- /dev/null
+++ b/web/src/icons/handle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M160-360v-80h640v80H160Zm0-160v-80h640v80H160Z"/></svg>
\ No newline at end of file
diff --git a/web/src/icons/play.svg b/web/src/icons/play.svg
new file mode 100644
index 0000000..55b233e
--- /dev/null
+++ b/web/src/icons/play.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M320-273v-414q0-17 12-28.5t28-11.5q5 0 10.5 1.5T381-721l326 207q9 6 13.5 15t4.5 19q0 10-4.5 19T707-446L381-239q-5 3-10.5 4.5T360-233q-16 0-28-11.5T320-273Zm80-207Zm0 134 210-134-210-134v268Z"/></svg>
\ No newline at end of file
diff --git a/web/src/icons/playing.svg b/web/src/icons/playing.svg
new file mode 100644
index 0000000..cd58a4e
--- /dev/null
+++ b/web/src/icons/playing.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M320-273v-414q0-17 12-28.5t28-11.5q5 0 10.5 1.5T381-721l326 207q9 6 13.5 15t4.5 19q0 10-4.5 19T707-446L381-239q-5 3-10.5 4.5T360-233q-16 0-28-11.5T320-273Z"/></svg>
\ No newline at end of file
diff --git a/web/src/icons/queue_add.svg b/web/src/icons/queue_add.svg
new file mode 100644
index 0000000..dddf8d3
--- /dev/null
+++ b/web/src/icons/queue_add.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M560-400q17 0 28.5-11.5T600-440v-80h80q17 0 28.5-11.5T720-560q0-17-11.5-28.5T680-600h-80v-80q0-17-11.5-28.5T560-720q-17 0-28.5 11.5T520-680v80h-80q-17 0-28.5 11.5T400-560q0 17 11.5 28.5T440-520h80v80q0 17 11.5 28.5T560-400ZM320-240q-33 0-56.5-23.5T240-320v-480q0-33 23.5-56.5T320-880h480q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H320ZM160-80q-33 0-56.5-23.5T80-160v-520q0-17 11.5-28.5T120-720q17 0 28.5 11.5T160-680v520h520q17 0 28.5 11.5T720-120q0 17-11.5 28.5T680-80H160Z"/></svg>
\ No newline at end of file
diff --git a/web/src/icons/suggest.svg b/web/src/icons/suggest.svg
new file mode 100644
index 0000000..14dee84
--- /dev/null
+++ b/web/src/icons/suggest.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="m400-400 240-160-240-160v320ZM80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Z"/></svg>
\ No newline at end of file
diff --git a/web/src/queue/queue-card.vue b/web/src/queue/queue-card.vue
new file mode 100644
index 0000000..fcfc569
--- /dev/null
+++ b/web/src/queue/queue-card.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import SyncButton from '../components/button/sync-button.vue'
+
+//placeholder interface
+export interface MediaBody {
+    iat: number
+
+    kind: 'videoFile'
+
+    title: string
+    source: string
+    thumbnail?: string
+    duration?: number
+
+    // hrib added
+    description?: string
+}
+
+const props = defineProps<{
+    media: MediaBody
+    isAdmin: boolean
+    inQueue: boolean
+    isSuggestion: boolean
+
+    alreadyPlayed?: boolean
+    playing?: boolean
+}>()
+</script>
+
+<template>
+    <div class="q-card">
+        <!-- <SyncButton
+            v-if="props.inQueue && props.isAdmin"
+            :icon="props.playing ? 'playing' : 'handle'"
+            :color="props.playing ? 'white' : 'bgnb'"
+            bstyle="none"
+        /> -->
+        <div class="q-card-head">
+            <span class="title">{{ props.media.title }}</span>
+            <div class="actions">
+                <SyncButton
+                    v-if="props.isAdmin && props.inQueue"
+                    icon="delete"
+                    :color="props.playing ? 'white' : 'bgnb'"
+                    bstyle="none"
+                    @click="$emit('delete')"
+                />
+                <SyncButton
+                    v-if="!props.inQueue && !props.isSuggestion"
+                    icon="suggest"
+                    :color="props.playing ? 'white' : 'bgnb'"
+                    bstyle="none"
+                    @click="$emit('suggest')"
+                />
+                <SyncButton
+                    v-if="props.isAdmin"
+                    icon="play"
+                    :color="props.playing ? 'white' : 'bgnb'"
+                    bstyle="none"
+                    @click="$emit('play')"
+                />
+                <SyncButton
+                    v-if="props.isAdmin && (props.inQueue || props.isSuggestion)"
+                    icon="queue_add"
+                    :color="props.playing ? 'white' : 'bgnb'"
+                    bstyle="none"
+                    @click="$emit('addToQueue')"
+                />
+            </div>
+        </div>
+        <div class="q-card-body">
+            <div class="thumbnail">
+                <img :src="props.media.thumbnail" :alt="`${props.media.title}'s Thumbnial'`" />
+                <span class="duration">{{ props.media.duration }}</span>
+            </div>
+            <span class="description">{{ props.media.description }}</span>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.q-card {
+    display: flex;
+    flex-direction: column;
+}
+
+.q-card-head {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.actions {
+    display: flex;
+    justify-content: space-evenly;
+}
+
+.q-card-body {
+    display: flex;
+    flex-direction: row;
+}
+</style>
diff --git a/web/src/views/RoomView.vue b/web/src/views/RoomView.vue
index 0b0f8af..dd68ef1 100644
--- a/web/src/views/RoomView.vue
+++ b/web/src/views/RoomView.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { useRoute } from 'vue-router'
+// import { useRoute } from 'vue-router'
 
-import UserContextMenu from '../components/user/user-context-menu.vue'
-import ChatTextField from '../components/chat/chat-text-field.vue'
+import QueueCard from '../queue/queue-card.vue'
 
-const route = useRoute()
+// const route = useRoute()
 </script>
 
 <template>
@@ -14,5 +13,18 @@ const route = useRoute()
     :is-self=true
     :is-online=false 
     @select="console.log('fetch data')" /> -->
-    <ChatTextField />
+    <QueueCard
+        :media="{
+            iat: 1,
+            kind: 'videoFile',
+            title: 'test test',
+            source: 'blalalal',
+            thumbnail: 'https://www.gravatar.com/avatar/09abd59eb5653a7183ba812b8261f48b',
+            duration: 20,
+            description: 'blblblb',
+        }"
+        :is-admin="true"
+        :in-queue="false"
+        :is-suggestion="true"
+    />
 </template>

From 072d418f88e8f78cb2b7cd076a32685000246ed1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alja=C5=BE=20Hribernik?= <hribernik.aljaz@gmail.com>
Date: Mon, 12 Jan 2026 01:56:47 +0100
Subject: [PATCH 05/11] feat: media card

---
 web/src/components/icon/icons.ts              |  2 +-
 web/src/components/user/user-context-menu.vue |  5 -
 web/src/icons/delete.svg                      |  2 +-
 web/src/icons/play.svg                        |  1 -
 web/src/icons/play_arrow.svg                  |  1 +
 web/src/icons/queue_add.svg                   |  2 +-
 web/src/icons/suggest.svg                     |  2 +-
 .../queue/{queue-card.vue => media-card.vue}  | 95 +++++++++++++++----
 web/src/views/RoomView.vue                    | 10 +-
 9 files changed, 88 insertions(+), 32 deletions(-)
 delete mode 100644 web/src/icons/play.svg
 create mode 100644 web/src/icons/play_arrow.svg
 rename web/src/queue/{queue-card.vue => media-card.vue} (52%)

diff --git a/web/src/components/icon/icons.ts b/web/src/components/icon/icons.ts
index b4d0f46..1aa86cb 100644
--- a/web/src/components/icon/icons.ts
+++ b/web/src/components/icon/icons.ts
@@ -14,7 +14,7 @@ export const ICONS = [
     'handle',
     'playing',
     'queue_add',
-    'play',
+    'play_arrow',
 ] as const
 
 export type TIconName = (typeof ICONS)[number]
diff --git a/web/src/components/user/user-context-menu.vue b/web/src/components/user/user-context-menu.vue
index f103930..c57b848 100644
--- a/web/src/components/user/user-context-menu.vue
+++ b/web/src/components/user/user-context-menu.vue
@@ -11,11 +11,6 @@ const props = defineProps<{
     error?: number
     buffer?: number
 }>()
-
-const emits = defineEmits<{
-    (e: 'promote'): void
-    (e: 'remove'): void
-}>()
 </script>
 
 <template>
diff --git a/web/src/icons/delete.svg b/web/src/icons/delete.svg
index 3064115..4821202 100644
--- a/web/src/icons/delete.svg
+++ b/web/src/icons/delete.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm80-160h80v-360h-80v360Zm160 0h80v-360h-80v360Z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" ><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm80-160h80v-360h-80v360Zm160 0h80v-360h-80v360Z"/></svg>
\ No newline at end of file
diff --git a/web/src/icons/play.svg b/web/src/icons/play.svg
deleted file mode 100644
index 55b233e..0000000
--- a/web/src/icons/play.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M320-273v-414q0-17 12-28.5t28-11.5q5 0 10.5 1.5T381-721l326 207q9 6 13.5 15t4.5 19q0 10-4.5 19T707-446L381-239q-5 3-10.5 4.5T360-233q-16 0-28-11.5T320-273Zm80-207Zm0 134 210-134-210-134v268Z"/></svg>
\ No newline at end of file
diff --git a/web/src/icons/play_arrow.svg b/web/src/icons/play_arrow.svg
new file mode 100644
index 0000000..184848c
--- /dev/null
+++ b/web/src/icons/play_arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" ><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 8.64L15.27 12 10 15.36V8.64M8 5v14l11-7L8 5z"/></svg>
\ No newline at end of file
diff --git a/web/src/icons/queue_add.svg b/web/src/icons/queue_add.svg
index dddf8d3..6ca3886 100644
--- a/web/src/icons/queue_add.svg
+++ b/web/src/icons/queue_add.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M560-400q17 0 28.5-11.5T600-440v-80h80q17 0 28.5-11.5T720-560q0-17-11.5-28.5T680-600h-80v-80q0-17-11.5-28.5T560-720q-17 0-28.5 11.5T520-680v80h-80q-17 0-28.5 11.5T400-560q0 17 11.5 28.5T440-520h80v80q0 17 11.5 28.5T560-400ZM320-240q-33 0-56.5-23.5T240-320v-480q0-33 23.5-56.5T320-880h480q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H320ZM160-80q-33 0-56.5-23.5T80-160v-520q0-17 11.5-28.5T120-720q17 0 28.5 11.5T160-680v520h520q17 0 28.5 11.5T720-120q0 17-11.5 28.5T680-80H160Z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" ><path d="M560-400q17 0 28.5-11.5T600-440v-80h80q17 0 28.5-11.5T720-560q0-17-11.5-28.5T680-600h-80v-80q0-17-11.5-28.5T560-720q-17 0-28.5 11.5T520-680v80h-80q-17 0-28.5 11.5T400-560q0 17 11.5 28.5T440-520h80v80q0 17 11.5 28.5T560-400ZM320-240q-33 0-56.5-23.5T240-320v-480q0-33 23.5-56.5T320-880h480q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H320ZM160-80q-33 0-56.5-23.5T80-160v-520q0-17 11.5-28.5T120-720q17 0 28.5 11.5T160-680v520h520q17 0 28.5 11.5T720-120q0 17-11.5 28.5T680-80H160Z"/></svg>
\ No newline at end of file
diff --git a/web/src/icons/suggest.svg b/web/src/icons/suggest.svg
index 14dee84..78450ed 100644
--- a/web/src/icons/suggest.svg
+++ b/web/src/icons/suggest.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="m400-400 240-160-240-160v320ZM80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" ><path d="m400-400 240-160-240-160v320ZM80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Z"/></svg>
\ No newline at end of file
diff --git a/web/src/queue/queue-card.vue b/web/src/queue/media-card.vue
similarity index 52%
rename from web/src/queue/queue-card.vue
rename to web/src/queue/media-card.vue
index fcfc569..6a9db4f 100644
--- a/web/src/queue/queue-card.vue
+++ b/web/src/queue/media-card.vue
@@ -28,15 +28,14 @@ const props = defineProps<{
 </script>
 
 <template>
-    <div class="q-card">
-        <!-- <SyncButton
-            v-if="props.inQueue && props.isAdmin"
-            :icon="props.playing ? 'playing' : 'handle'"
-            :color="props.playing ? 'white' : 'bgnb'"
-            bstyle="none"
-        /> -->
-        <div class="q-card-head">
-            <span class="title">{{ props.media.title }}</span>
+    <div
+        class="media-card"
+        :class="[{ playing: props.playing }, { 'border-subtle': props.isSuggestion }]"
+    >
+        <div class="media-card-head">
+            <span class="title" :class="{ 'already-played': props.alreadyPlayed }">{{
+                props.media.title
+            }}</span>
             <div class="actions">
                 <SyncButton
                     v-if="props.isAdmin && props.inQueue"
@@ -53,50 +52,108 @@ const props = defineProps<{
                     @click="$emit('suggest')"
                 />
                 <SyncButton
+                    :class="{ playing: props.playing }"
                     v-if="props.isAdmin"
-                    icon="play"
-                    :color="props.playing ? 'white' : 'bgnb'"
+                    icon="play_arrow"
+                    color="bgnb"
                     bstyle="none"
                     @click="$emit('play')"
                 />
                 <SyncButton
+                    :class="{ playing: props.playing }"
                     v-if="props.isAdmin && (props.inQueue || props.isSuggestion)"
                     icon="queue_add"
-                    :color="props.playing ? 'white' : 'bgnb'"
+                    color="bgnb"
                     bstyle="none"
                     @click="$emit('addToQueue')"
                 />
             </div>
         </div>
-        <div class="q-card-body">
-            <div class="thumbnail">
+        <div class="media-card-body">
+            <div class="thumbnail" :class="{ 'already-played': props.alreadyPlayed }">
                 <img :src="props.media.thumbnail" :alt="`${props.media.title}'s Thumbnial'`" />
-                <span class="duration">{{ props.media.duration }}</span>
+                <span class="duration">20:20</span>
             </div>
-            <span class="description">{{ props.media.description }}</span>
+            <span class="description" :class="{ 'already-played': props.alreadyPlayed }">{{
+                props.media.description
+            }}</span>
         </div>
     </div>
 </template>
 
 <style scoped>
-.q-card {
+.media-card {
     display: flex;
     flex-direction: column;
+    padding: 8px;
+    gap: 6px;
+}
+
+.border-subtle {
+    border: 1px solid var(--s-border);
+    border-radius: 8px;
+}
+
+.playing {
+    background-color: var(--s-primary);
+    color: white;
+    & :deep(svg) {
+        fill: var(--s-background) !important;
+    }
+}
+
+.already-played {
+    color: var(--s-text-subtle);
+}
+
+.already-played img {
+    opacity: 0.8;
 }
 
-.q-card-head {
+.media-card-head {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
 }
 
+.title {
+    font-size: 16px;
+    font-weight: var(--s-weight-bold);
+}
+
 .actions {
     display: flex;
     justify-content: space-evenly;
+    gap: 10px;
+    &:deep(svg) {
+        fill: var(--s-text-subtle);
+    }
 }
 
-.q-card-body {
+.media-card-body {
     display: flex;
     flex-direction: row;
+    gap: 8px;
+}
+
+.thumbnail {
+    max-width: 103px;
+    position: relative;
+}
+
+.thumbnail img {
+    max-width: inherit;
+    border-radius: 12px;
+}
+
+.duration {
+    font-size: 12px;
+    padding: 3px;
+    position: absolute;
+    color: var(--s-background);
+    bottom: 11px;
+    right: 8px;
+    background-color: rgba(0, 0, 0, 0.75);
+    border-radius: 4px;
 }
 </style>
diff --git a/web/src/views/RoomView.vue b/web/src/views/RoomView.vue
index dd68ef1..cc2c43f 100644
--- a/web/src/views/RoomView.vue
+++ b/web/src/views/RoomView.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 // import { useRoute } from 'vue-router'
 
-import QueueCard from '../queue/queue-card.vue'
+// import UserContextMenu from '../components/user/user-context-menu.vue'
+import MediaCard from '../queue/media-card.vue'
 
 // const route = useRoute()
 </script>
@@ -13,18 +14,21 @@ import QueueCard from '../queue/queue-card.vue'
     :is-self=true
     :is-online=false 
     @select="console.log('fetch data')" /> -->
-    <QueueCard
+    <MediaCard
         :media="{
             iat: 1,
             kind: 'videoFile',
             title: 'test test',
             source: 'blalalal',
-            thumbnail: 'https://www.gravatar.com/avatar/09abd59eb5653a7183ba812b8261f48b',
+            thumbnail: 'https://picsum.photos/1280/720',
             duration: 20,
             description: 'blblblb',
         }"
         :is-admin="true"
         :in-queue="false"
         :is-suggestion="true"
+        :already-played="false"
+        :playing="false"
     />
+    <!-- <UserContextMenu username="neki" :is-admin="false" /> -->
 </template>

From 4da90e174496704383b72e901866390579f3fd1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alja=C5=BE=20Hribernik?= <hribernik.aljaz@gmail.com>
Date: Mon, 12 Jan 2026 03:37:02 +0100
Subject: [PATCH 06/11] feat: prompts

---
 web/src/components/icon/icons.ts              |  1 +
 .../components/prompt/confirmation-prompt.vue | 77 +++++++++++++++++++
 web/src/icons/close.svg                       |  1 +
 web/src/views/RoomView.vue                    | 16 +++-
 4 files changed, 92 insertions(+), 3 deletions(-)
 create mode 100644 web/src/components/prompt/confirmation-prompt.vue
 create mode 100644 web/src/icons/close.svg

diff --git a/web/src/components/icon/icons.ts b/web/src/components/icon/icons.ts
index 1aa86cb..5dc2b77 100644
--- a/web/src/components/icon/icons.ts
+++ b/web/src/components/icon/icons.ts
@@ -15,6 +15,7 @@ export const ICONS = [
     'playing',
     'queue_add',
     'play_arrow',
+    'close',
 ] as const
 
 export type TIconName = (typeof ICONS)[number]
diff --git a/web/src/components/prompt/confirmation-prompt.vue b/web/src/components/prompt/confirmation-prompt.vue
new file mode 100644
index 0000000..255d25b
--- /dev/null
+++ b/web/src/components/prompt/confirmation-prompt.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import SyncButton from '../button/sync-button.vue'
+
+const props = defineProps<{
+    title: string
+    primaryBtnText: string
+    isDanger: boolean
+
+    secondaryBtnText?: string
+}>()
+</script>
+
+<template>
+    <div class="prompt shadow-medium">
+        <div class="prompt-head">
+            <span class="title">{{ props.title }}</span>
+            <SyncButton @click="$emit('close')" icon="close" bstyle="none" color="bgnb" />
+        </div>
+        <div class="prompt-body"><slot></slot></div>
+        <div class="prompt-footer">
+            <SyncButton
+                v-if="props.secondaryBtnText"
+                @click="$emit(props.secondaryBtnText.toLowerCase())"
+                :text="props.secondaryBtnText"
+                bstyle="pill"
+                color="primary-lt"
+            />
+            <SyncButton
+                @click="$emit(props.primaryBtnText.toLowerCase())"
+                :text="props.primaryBtnText"
+                bstyle="pill"
+                :color="props.isDanger ? 'danger-lt' : 'primary-lt'"
+            />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.prompt {
+    position: absolute;
+
+    display: flex;
+    flex-direction: column;
+
+    width: 374px;
+    padding: 16px;
+    gap: 16px;
+
+    border: 1px solid var(--s-border);
+    border-radius: 16px;
+    box-sizing: border-box;
+}
+
+.prompt-head {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.title {
+    font-size: 24px;
+    font-weight: var(--s-weight-bold);
+    color: var(--s-primary);
+}
+
+.prompt-body {
+    font-size: 16px;
+}
+
+.prompt-footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    gap: 10px;
+}
+</style>
diff --git a/web/src/icons/close.svg b/web/src/icons/close.svg
new file mode 100644
index 0000000..a6e6ae0
--- /dev/null
+++ b/web/src/icons/close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z"/></svg>
\ No newline at end of file
diff --git a/web/src/views/RoomView.vue b/web/src/views/RoomView.vue
index cc2c43f..6bdf849 100644
--- a/web/src/views/RoomView.vue
+++ b/web/src/views/RoomView.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import ConfirmationPrompt from '../components/prompt/confirmation-prompt.vue'
+
 // import { useRoute } from 'vue-router'
 
 // import UserContextMenu from '../components/user/user-context-menu.vue'
-import MediaCard from '../queue/media-card.vue'
+// import MediaCard from '../queue/media-card.vue'
 
 // const route = useRoute()
 </script>
@@ -14,7 +16,7 @@ import MediaCard from '../queue/media-card.vue'
     :is-self=true
     :is-online=false 
     @select="console.log('fetch data')" /> -->
-    <MediaCard
+    <!-- <MediaCard
         :media="{
             iat: 1,
             kind: 'videoFile',
@@ -29,6 +31,14 @@ import MediaCard from '../queue/media-card.vue'
         :is-suggestion="true"
         :already-played="false"
         :playing="false"
-    />
+    /> -->
     <!-- <UserContextMenu username="neki" :is-admin="false" /> -->
+    <ConfirmationPrompt
+        title="Test test"
+        primary-btn-text="Test"
+        :is-danger="true"
+        secondary-btn-text="test2"
+    >
+        Test test Test test Test test Test test Test test Test test Test test Test test
+    </ConfirmationPrompt>
 </template>

From cd0beb5a0f0e220d6a92ac08e481a0df217940ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alja=C5=BE=20Hribernik?= <hribernik.aljaz@gmail.com>
Date: Mon, 12 Jan 2026 03:48:43 +0100
Subject: [PATCH 07/11] fix: prompt centering

---
 web/src/components/prompt/confirmation-prompt.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/web/src/components/prompt/confirmation-prompt.vue b/web/src/components/prompt/confirmation-prompt.vue
index 255d25b..6219f74 100644
--- a/web/src/components/prompt/confirmation-prompt.vue
+++ b/web/src/components/prompt/confirmation-prompt.vue
@@ -38,10 +38,13 @@ const props = defineProps<{
 <style scoped>
 .prompt {
     position: absolute;
-
     display: flex;
     flex-direction: column;
 
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+
     width: 374px;
     padding: 16px;
     gap: 16px;

From 8562c1de7c19f1c3da2168f0d96dd2df935f7af6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alja=C5=BE=20Hribernik?= <hribernik.aljaz@gmail.com>
Date: Mon, 12 Jan 2026 23:10:34 +0100
Subject: [PATCH 08/11] feat: a few popups

---
 .../components/prompt/reconnecting-prompt.vue | 63 +++++++++++++++++++
 web/src/components/prompt/share-popup.vue     | 17 +++++
 web/src/views/RoomView.vue                    | 11 +++-
 3 files changed, 88 insertions(+), 3 deletions(-)
 create mode 100644 web/src/components/prompt/reconnecting-prompt.vue
 create mode 100644 web/src/components/prompt/share-popup.vue

diff --git a/web/src/components/prompt/reconnecting-prompt.vue b/web/src/components/prompt/reconnecting-prompt.vue
new file mode 100644
index 0000000..0371e05
--- /dev/null
+++ b/web/src/components/prompt/reconnecting-prompt.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const timeLeft = ref(30)
+
+const emit = defineEmits<{
+    (e: 'sessionDeath'): void
+}>()
+
+let interval: ReturnType<typeof setInterval>
+
+onMounted(() => {
+    interval = setInterval(() => {
+        if (timeLeft.value > 0) {
+            timeLeft.value--
+        } else {
+            clearInterval(interval)
+            emit('sessionDeath')
+        }
+    }, 1000)
+})
+
+onUnmounted(() => {
+    clearInterval(interval)
+})
+
+function formattedTime() {
+    const minutes = Math.floor(timeLeft.value / 60)
+    const seconds = timeLeft.value % 60
+    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
+}
+</script>
+
+<template>
+    <div class="r-prompt shadow-medium">
+        <span style="font-size: 20px; font-weight: var(--s-weight-bold)">Reconnecting</span>
+        <span>{{ `WebSocket connection lost. Session death in ${formattedTime()}` }}</span>
+    </div>
+</template>
+
+<style scoped>
+.r-prompt {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+
+    width: 246px;
+
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+
+    text-align: center;
+    font-size: 16px;
+    color: var(--s-background);
+    background-color: var(--s-error);
+
+    padding: 16px;
+    gap: 8px;
+
+    border-radius: 8px;
+}
+</style>
diff --git a/web/src/components/prompt/share-popup.vue b/web/src/components/prompt/share-popup.vue
new file mode 100644
index 0000000..e7d2c3e
--- /dev/null
+++ b/web/src/components/prompt/share-popup.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts"></script>
+<template><span class="popup shadow-medium">Link copied</span></template>
+<style scoped>
+.popup {
+    position: absolute;
+
+    color: var(--s-background);
+    background-color: var(--s-primary-dark);
+
+    text-align: center;
+
+    font-size: 12px;
+    padding: 8px;
+
+    border-radius: 6px;
+}
+</style>
diff --git a/web/src/views/RoomView.vue b/web/src/views/RoomView.vue
index 6bdf849..ee097f4 100644
--- a/web/src/views/RoomView.vue
+++ b/web/src/views/RoomView.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
-import ConfirmationPrompt from '../components/prompt/confirmation-prompt.vue'
+// import ReconnectingPrompt from '../components/prompt/reconnecting-prompt.vue'
+import SharePopup from '../components/prompt/share-popup.vue'
+
+// import ConfirmationPrompt from '../components/prompt/confirmation-prompt.vue'
 
 // import { useRoute } from 'vue-router'
 
@@ -33,12 +36,14 @@ import ConfirmationPrompt from '../components/prompt/confirmation-prompt.vue'
         :playing="false"
     /> -->
     <!-- <UserContextMenu username="neki" :is-admin="false" /> -->
-    <ConfirmationPrompt
+    <!-- <ConfirmationPrompt
         title="Test test"
         primary-btn-text="Test"
         :is-danger="true"
         secondary-btn-text="test2"
     >
         Test test Test test Test test Test test Test test Test test Test test Test test
-    </ConfirmationPrompt>
+    </ConfirmationPrompt> -->
+    <!-- <ReconnectingPrompt /> -->
+    <SharePopup />
 </template>

From fe93942bd3bd20f8088e7c6ce8dd82b94ca87082 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alja=C5=BE=20Hribernik?= <hribernik.aljaz@gmail.com>
Date: Tue, 13 Jan 2026 03:04:39 +0100
Subject: [PATCH 09/11] feat: room settings

---
 web/src/components/icon/icons.ts          |   2 +
 web/src/components/input/sync-input.vue   |   2 +
 web/src/components/room/room-settings.vue | 127 ++++++++++++++++++++++
 web/src/icons/close.svg                   |   2 +-
 web/src/icons/explosion.svg               |   1 +
 web/src/icons/warning.svg                 |   1 +
 web/src/views/RoomView.vue                |  36 +-----
 7 files changed, 136 insertions(+), 35 deletions(-)
 create mode 100644 web/src/components/room/room-settings.vue
 create mode 100644 web/src/icons/explosion.svg
 create mode 100644 web/src/icons/warning.svg

diff --git a/web/src/components/icon/icons.ts b/web/src/components/icon/icons.ts
index 5dc2b77..882ea0e 100644
--- a/web/src/components/icon/icons.ts
+++ b/web/src/components/icon/icons.ts
@@ -16,6 +16,8 @@ export const ICONS = [
     'queue_add',
     'play_arrow',
     'close',
+    'warning',
+    'explosion',
 ] as const
 
 export type TIconName = (typeof ICONS)[number]
diff --git a/web/src/components/input/sync-input.vue b/web/src/components/input/sync-input.vue
index d28f8c6..7c0f03a 100644
--- a/web/src/components/input/sync-input.vue
+++ b/web/src/components/input/sync-input.vue
@@ -8,6 +8,7 @@ const props = defineProps<{
     err?: string
 
     required?: boolean
+    disabled?: boolean
     autocomplete?: string
 }>()
 
@@ -23,6 +24,7 @@ const model = defineModel<string>({ default: '' })
             :class="{ 'input-field-error': err }"
             :name="props.name"
             :id="props.name"
+            :disabled="props.disabled ?? false"
             :placeholder="props.placeholder ?? ' '"
             :required="props.required"
             :autocomplete="props.autocomplete"
diff --git a/web/src/components/room/room-settings.vue b/web/src/components/room/room-settings.vue
new file mode 100644
index 0000000..5248903
--- /dev/null
+++ b/web/src/components/room/room-settings.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import SyncInput from '../input/sync-input.vue'
+import SyncButton from '../button/sync-button.vue'
+
+const props = defineProps<{
+    roomName: string
+    roomId: string
+}>()
+
+// frys in the bag solution
+const roomNameModel = ref(props.roomName)
+const roomIdModel = ref(props.roomId)
+</script>
+
+<template>
+    <div class="r-settings shadow-medium">
+        <div class="r-settings-head">
+            <span class="r-settings-title">Room settings</span>
+            <SyncButton @click="$emit('close')" icon="close" color="bgnb" bstyle="none" />
+        </div>
+        <div class="r-settings-body">
+            <span class="general-zone-title">General</span>
+            <SyncInput v-model="roomNameModel" name="room-name" label="Room Name" />
+            <SyncInput v-model="roomIdModel" name="room-id" label="Room ID" :disabled="true" />
+            <hr class="s-separator" />
+            <div class="danger-zone-title">
+                <svg width="20" height="20" class="warning-icon">
+                    <use :href="`/__spritemap#sprite-warning`" />
+                </svg>
+                <span>Danger zone</span>
+            </div>
+            <SyncButton
+                class="icon-danger"
+                text="Kick users"
+                icon="remove"
+                color="background"
+                bstyle="small"
+                @click="$emit('kickAll')"
+            />
+            <SyncButton
+                class="icon-danger"
+                text='"Nuke" room'
+                icon="explosion"
+                color="background"
+                bstyle="small"
+                @click="$emit('nuke')"
+            />
+        </div>
+        <div class="r-settings-footer">
+            <SyncButton @click="$emit('discard')" text="Discard" bstyle="pill" color="primary-lt" />
+            <SyncButton @click="$emit('save')" text="Save" bstyle="pill" color="primary-lt" />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.r-settings {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+
+    width: 400px;
+    padding: 16px;
+    gap: 16px;
+
+    border: 1px solid var(--s-border);
+    border-radius: 16px;
+
+    font-family: var(--s-font);
+}
+
+.r-settings-head {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    & :deep(svg) {
+        fill: var(--s-text-subtle) !important;
+    }
+}
+
+.r-settings-title {
+    font-size: 24px;
+    font-weight: var(--s-weight-bold);
+    color: var(--s-primary);
+}
+
+.r-settings-body {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.general-zone-title {
+    font-size: 20px;
+    font-weight: var(--s-weight-bold);
+}
+
+.danger-zone-title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+    font-weight: var(--s-weight-bold);
+
+    font-size: 20px;
+    color: var(--s-error-dark);
+    & :deep(svg) {
+        fill: var(--s-error-dark) !important;
+    }
+}
+
+.icon-danger :deep(svg) {
+    fill: var(--s-error) !important;
+}
+
+.r-settings-footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    gap: 10px;
+}
+</style>
diff --git a/web/src/icons/close.svg b/web/src/icons/close.svg
index a6e6ae0..d0754ee 100644
--- a/web/src/icons/close.svg
+++ b/web/src/icons/close.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" ><path d="M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z"/></svg>
\ No newline at end of file
diff --git a/web/src/icons/explosion.svg b/web/src/icons/explosion.svg
new file mode 100644
index 0000000..f1cceb2
--- /dev/null
+++ b/web/src/icons/explosion.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" ><path d="m421-340 31 30q12 12 28 12t28-12l31-30h41q17 0 28.5-11.5T620-380v-41l30-31q12-12 12-28t-12-28l-30-31v-41q0-17-11.5-28.5T580-620h-41l-38-37q-9-9-21-9t-21 9l-38 37h-41q-17 0-28.5 11.5T340-580v41l-30 31q-12 12-12 28t12 28l30 31v41q0 17 11.5 28.5T380-340h41Zm-75 180H240q-33 0-56.5-23.5T160-240v-106l-77-78q-11-12-17-26.5T60-480q0-15 6-29.5T83-536l77-78v-106q0-33 23.5-56.5T240-800h106l78-77q12-11 26.5-17t29.5-6q15 0 29.5 6t26.5 17l78 77h106q33 0 56.5 23.5T800-720v106l77 78q11 12 17 26.5t6 29.5q0 15-6 29.5T877-424l-77 78v106q0 33-23.5 56.5T720-160H614l-78 77q-12 11-26.5 17T480-60q-15 0-29.5-6T424-83l-78-77Z"/></svg>
\ No newline at end of file
diff --git a/web/src/icons/warning.svg b/web/src/icons/warning.svg
new file mode 100644
index 0000000..84c483b
--- /dev/null
+++ b/web/src/icons/warning.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" ><path d="M109-120q-11 0-20-5.5T75-140q-5-9-5.5-19.5T75-180l370-640q6-10 15.5-15t19.5-5q10 0 19.5 5t15.5 15l370 640q6 10 5.5 20.5T885-140q-5 9-14 14.5t-20 5.5H109Zm371-120q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm0-120q17 0 28.5-11.5T520-400v-120q0-17-11.5-28.5T480-560q-17 0-28.5 11.5T440-520v120q0 17 11.5 28.5T480-360Z"/></svg>
\ No newline at end of file
diff --git a/web/src/views/RoomView.vue b/web/src/views/RoomView.vue
index ee097f4..609b9d3 100644
--- a/web/src/views/RoomView.vue
+++ b/web/src/views/RoomView.vue
@@ -1,14 +1,8 @@
 <script setup lang="ts">
-// import ReconnectingPrompt from '../components/prompt/reconnecting-prompt.vue'
-import SharePopup from '../components/prompt/share-popup.vue'
-
-// import ConfirmationPrompt from '../components/prompt/confirmation-prompt.vue'
+import RoomSettings from '../components/room/room-settings.vue'
 
 // import { useRoute } from 'vue-router'
 
-// import UserContextMenu from '../components/user/user-context-menu.vue'
-// import MediaCard from '../queue/media-card.vue'
-
 // const route = useRoute()
 </script>
 
@@ -19,31 +13,5 @@ import SharePopup from '../components/prompt/share-popup.vue'
     :is-self=true
     :is-online=false 
     @select="console.log('fetch data')" /> -->
-    <!-- <MediaCard
-        :media="{
-            iat: 1,
-            kind: 'videoFile',
-            title: 'test test',
-            source: 'blalalal',
-            thumbnail: 'https://picsum.photos/1280/720',
-            duration: 20,
-            description: 'blblblb',
-        }"
-        :is-admin="true"
-        :in-queue="false"
-        :is-suggestion="true"
-        :already-played="false"
-        :playing="false"
-    /> -->
-    <!-- <UserContextMenu username="neki" :is-admin="false" /> -->
-    <!-- <ConfirmationPrompt
-        title="Test test"
-        primary-btn-text="Test"
-        :is-danger="true"
-        secondary-btn-text="test2"
-    >
-        Test test Test test Test test Test test Test test Test test Test test Test test
-    </ConfirmationPrompt> -->
-    <!-- <ReconnectingPrompt /> -->
-    <SharePopup />
+    <RoomSettings room-name="Balbal" room-id="roomid" />
 </template>

From bb37b46e0bec07cd7414080acbb5a6ec20a1a0c8 Mon Sep 17 00:00:00 2001
From: Matic Babnik <matic.babnik@outlook.com>
Date: Tue, 13 Jan 2026 20:31:00 +0100
Subject: [PATCH 10/11] fix: Drop opacity of disabled input

---
 web/src/components/input/sync-input.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/web/src/components/input/sync-input.vue b/web/src/components/input/sync-input.vue
index 7c0f03a..76630b6 100644
--- a/web/src/components/input/sync-input.vue
+++ b/web/src/components/input/sync-input.vue
@@ -16,7 +16,7 @@ const model = defineModel<string>({ default: '' })
 </script>
 
 <template>
-    <div class="s-input" :class="{ 'has-error': err }">
+    <div class="s-input" :class="{ 'has-error': err, disabled }">
         <input
             class="s-input-input"
             v-model="model"
@@ -62,6 +62,11 @@ const model = defineModel<string>({ default: '' })
     }
 }
 
+.s-input.disabled {
+    opacity: 0.8;
+    pointer-events: none;
+}
+
 .has-error {
     background-color: var(--s-error-light);
     border-color: var(--s-error-light);

From 315d6e29608a34792a3dd67951eb52d0a377ae90 Mon Sep 17 00:00:00 2001
From: Matic Babnik <matic.babnik@outlook.com>
Date: Tue, 13 Jan 2026 20:39:04 +0100
Subject: [PATCH 11/11] fix: CR comments

---
 .../components/prompt/reconnecting-prompt.vue | 35 ++++---------------
 1 file changed, 6 insertions(+), 29 deletions(-)

diff --git a/web/src/components/prompt/reconnecting-prompt.vue b/web/src/components/prompt/reconnecting-prompt.vue
index 0371e05..2cfd930 100644
--- a/web/src/components/prompt/reconnecting-prompt.vue
+++ b/web/src/components/prompt/reconnecting-prompt.vue
@@ -1,40 +1,17 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
-
-const timeLeft = ref(30)
-
-const emit = defineEmits<{
-    (e: 'sessionDeath'): void
-}>()
-
-let interval: ReturnType<typeof setInterval>
-
-onMounted(() => {
-    interval = setInterval(() => {
-        if (timeLeft.value > 0) {
-            timeLeft.value--
-        } else {
-            clearInterval(interval)
-            emit('sessionDeath')
-        }
-    }, 1000)
-})
-
-onUnmounted(() => {
-    clearInterval(interval)
-})
-
-function formattedTime() {
-    const minutes = Math.floor(timeLeft.value / 60)
-    const seconds = timeLeft.value % 60
+function formattedTime(timeLeft: number) {
+    const minutes = Math.floor(timeLeft / 60)
+    const seconds = timeLeft % 60
     return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
 }
+
+// TODO: props
 </script>
 
 <template>
     <div class="r-prompt shadow-medium">
         <span style="font-size: 20px; font-weight: var(--s-weight-bold)">Reconnecting</span>
-        <span>{{ `WebSocket connection lost. Session death in ${formattedTime()}` }}</span>
+        <span>{{ `WebSocket connection lost. Session death in ${formattedTime(13)}` }}</span>
     </div>
 </template>