ye

frontend/app/components/viewer/TopBar.vue

@@ -1,17 +1,41 @@
 <script setup>
 import TopSearchBar from './topbar/TopSearchBar.vue';
+import { useCampaignService } from '~/services/Campaign';
+import { CreateWindow } from '~/services/Windows';
+
+const { Campaign } = useCampaignService();
+
+const campaignName = computed(() => {
+    return Campaign.value?.name ?? 'Campaign';
+});
+
+function openCreateNoteWindow() {
+    if (!Campaign.value) {
+        return;
+    }
+
+    CreateWindow('create_note');
+}
 
 </script>
 
 <template>
     <div class="top-bar">
         <div class="left">
-            <span class="top-bar-title"></span>
+            <span class="top-bar-title">
+                <img src="/img/logo.png" alt="Dragonroll Logo" class="logo">
+                <span>{{ campaignName }}</span>
+            </span>
         </div>
         <div class="center">
             <TopSearchBar></TopSearchBar>
         </div>
-        <div class="right"></div>
+        <div class="right">
+            <button class="note-button sound-click" type="button" @click="openCreateNoteWindow" :disabled="!Campaign">
+                <img class="note-button-icon" src="/icons/iconoir/regular/plus.svg" alt="" aria-hidden="true">
+                <span>New Note</span>
+            </button>
+        </div>
     </div>
 </template>
 
@@ -25,17 +49,51 @@ import TopSearchBar from './topbar/TopSearchBar.vue';
     display: flex;
 }
 
+.logo {
+    height: 36px;
+    width: 36px;
+    position: absolute;
+    top: 0px;
+    left: 8px;
+}
+
 .left, .right {
     flex: 1;
 }
 
 .right {
-    text-align: right;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding-right: 10px;
 }
 
 .top-bar-title {
     padding: 10px;
     display: flex;
+    margin-left: 48px;
     font-weight: bold;
 }
-</style>
+
+.note-button {
+    height: 30px;
+    padding: 0 12px;
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    background: var(--color-background-soft);
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+}
+
+.note-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.note-button-icon {
+    width: 16px;
+    height: 16px;
+}
+</style>