frontend/src/components/SidePanel.vue

<script setup lang="ts">
import type { ModelInfo, StatsResponse, AuthUser } from '../types'
import Wc3Button from '../wc3/base/Button.vue'
import { RACE_KEY } from '../wc3/consts'

defineProps<{
  models: Record<string, ModelInfo>
  stats: StatsResponse
  user: AuthUser | null
}>()

const model = defineModel<string>('model', { required: true })
const showCitations = defineModel<boolean>('showCitations', { required: true })
const race = defineModel<RACE_KEY>('race', { required: true })

const emit = defineEmits<{
  'clear-chat': []
  'logout': []
}>()

const races = [
  { key: RACE_KEY.HUMAN, label: 'Human' },
  { key: RACE_KEY.ORC, label: 'Orc' },
  { key: RACE_KEY.NIGHT_ELF, label: 'Night Elf' },
  { key: RACE_KEY.UNDEAD, label: 'Undead' },
]
</script>

<template>
  <div>
    <!-- User info -->
    <div v-if="user" class="user-badge">
      <img v-if="user.picture" :src="user.picture" class="user-avatar" referrerpolicy="no-referrer" alt="" />
      <div class="user-info">
        <span class="user-name">{{ user.name }}</span>
        <button class="logout-btn" @click="emit('logout')">Odjavi se</button>
      </div>
    </div>

    <div v-if="user" class="gold-divider"></div>

    <!-- Model -->
    <h2>Odaberi model</h2>
    <select class="wc3-select" :value="model" @change="model = ($event.target as HTMLSelectElement).value">
      <option v-for="(info, key) in models" :key="key" :value="key">
        {{ info.name }}
      </option>
    </select>
    <p class="model-caption" v-if="models[model]">
      {{ models[model].description }}
    </p>

    <div class="gold-divider"></div>

    <!-- Theme -->
    <h2>Tema</h2>
    <select class="wc3-select" :value="race" @change="race = ($event.target as HTMLSelectElement).value as RACE_KEY">
      <option v-for="r in races" :key="r.key" :value="r.key">
        {{ r.label }}
      </option>
    </select>

    <div class="gold-divider"></div>

    <!-- Options -->
    <h2>Opcije</h2>
    <label class="wc3-checkbox">
      <input type="checkbox" :checked="showCitations" @change="showCitations = ($event.target as HTMLInputElement).checked" />
      Prikazi izvore
    </label>

    <div style="margin-top: 0.75rem; height: 32px; min-width: 100%;">
      <Wc3Button size="s" @click="emit('clear-chat')">
        Novi razgovor
      </Wc3Button>
    </div>

    <div class="gold-divider"></div>

    <!-- Stats -->
    <h2>Baza znanja</h2>
    <div class="resource-bar">
      {{ stats.documents.toLocaleString() }} dokumenata
    </div>

    <!-- Footer -->
    <div class="sidebar-footer">
      <div class="gold-divider"></div>
      Learn Pathophysiology<br>
      Powered by Gemini AI
    </div>
  </div>
</template>