pridana ikonka, screenshot a popis do README.md

frontend/src/components/EditorToolbar.vue

@@ -2,6 +2,7 @@
 import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMosaicStore } from '@/stores/mosaic'
+import mozaicLogo from '@/assets/mozaic-logo.svg'
 
 defineEmits<{ resetViewport: [] }>()
 const store = useMosaicStore()
@@ -22,7 +23,7 @@ function importProject(files: FileList | null): void {
 
 <template>
   <header class="toolbar">
-    <div class="brand"><span class="brand-mark">M</span><span>Mozaic</span></div>
+    <div class="brand"><img class="brand-mark" :src="mozaicLogo" alt="" width="32" height="32" /><span>Mozaic</span></div>
     <div class="toolbar-actions">
       <button class="button primary" type="button" @click="imageInput?.click()">Načítať obrázok</button>
       <button class="icon-button" type="button" :disabled="!canUndo" title="Späť (Ctrl+Z)" @click="store.undo">↶</button>
@@ -40,7 +41,7 @@ function importProject(files: FileList | null): void {
 <style scoped>
 .toolbar { position: sticky; top: 0; z-index: 10; display: flex; min-height: 58px; align-items: center; gap: 24px; padding: 8px 16px; border-bottom: 1px solid #dbe1e8; background: rgba(255,255,255,.96); }
 .brand { display: flex; align-items: center; gap: 9px; color: #172033; font-weight: 760; letter-spacing: -.02em; }
-.brand-mark { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: #1e293b; color: white; }
+.brand-mark { display: block; width: 32px; height: 32px; flex: 0 0 32px; }
 .toolbar-actions { display: flex; min-width: 0; align-items: center; gap: 7px; overflow-x: auto; }
 .divider { width: 1px; height: 26px; margin: 0 2px; background: #dbe1e8; }
 @media (max-width: 700px) { .toolbar { align-items: flex-start; gap: 10px; padding: 8px 10px; } .brand span:last-child { display: none; } }