Hribernik development

web/package.json

@@ -23,15 +23,15 @@
         "@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": {
         "@histoire/plugin-vue": "^1.0.0-alpha.5",
         "@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"
     }

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>

web/src/components/chat/chat-text-field.vue

@@ -0,0 +1,101 @@
+<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"
+                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="small" />
+        </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: baseline;
+}
+
+.c-textarea {
+    flex-grow: 1;
+    font-size: 14px;
+    line-height: 1.2;
+    max-height: 5lh;
+
+    padding-left: 10px;
+    box-sizing: border-box;
+}
+
+.icon-gray {
+    flex-shrink: 1;
+}
+
+.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;
+    padding: 0;
+
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+
+    resize: none;
+}
+</style>

web/src/components/icon/icons.ts

@@ -7,6 +7,17 @@ export const ICONS = [
     'delete',
     'add',
     'arrow_down',
+    'promote',
+    'remove',
+    'smile',
+    'suggest',
+    'handle',
+    'playing',
+    'queue_add',
+    'play_arrow',
+    'close',
+    'warning',
+    'explosion',
 ] as const
 
 export type TIconName = (typeof ICONS)[number]

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>

web/src/components/input/sync-input.vue

@@ -8,21 +8,23 @@ const props = defineProps<{
     err?: string
 
     required?: boolean
+    disabled?: boolean
     autocomplete?: string
 }>()
 
 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"
             type="input"
             :class="{ 'input-field-error': err }"
             :name="props.name"
             :id="props.name"
+            :disabled="props.disabled ?? false"
             :placeholder="props.placeholder ?? ' '"
             :required="props.required"
             :autocomplete="props.autocomplete"
@@ -60,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);

web/src/components/prompt/confirmation-prompt.vue

@@ -0,0 +1,80 @@
+<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;
+
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+
+    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>

web/src/components/prompt/reconnecting-prompt.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+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(13)}` }}</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>