bak

src/App.vue

@@ -15,6 +15,7 @@ import {
   PhSparkle,
   PhStop,
 } from '@phosphor-icons/vue'
+import AboutDialog from './components/AboutDialog.vue'
 import AssetSidebar from './components/AssetSidebar.vue'
 import CanvasStage from './components/CanvasStage.vue'
 import DocumentSettings from './components/DocumentSettings.vue'
@@ -48,6 +49,7 @@ const exportOpen = ref(false)
 const testsOpen = ref(false)
 const welcomeOpen = ref(false)
 const fullscreenOpen = ref(false)
+const aboutOpen = ref(false)
 const TIMELINE_HEIGHT_KEY = 'animatr:timelineHeight'
 const DEFAULT_TIMELINE_HEIGHT = 220
 const MIN_TIMELINE_HEIGHT = 120
@@ -237,6 +239,12 @@ function isEditable(el: EventTarget | null): boolean {
   return false
 }
 
+function onDocumentContextMenu(e: MouseEvent) {
+  // Allow native context menu only on editable inputs (for paste, etc.).
+  if (isEditable(e.target)) return
+  e.preventDefault()
+}
+
 function onKeyDown(e: KeyboardEvent) {
   if (e.ctrlKey && e.shiftKey && e.altKey && (e.code === 'KeyT' || e.key.toLowerCase() === 't')) {
     e.preventDefault()
@@ -270,11 +278,13 @@ function onKeyDown(e: KeyboardEvent) {
 
 onMounted(() => {
   document.addEventListener('keydown', onKeyDown)
+  document.addEventListener('contextmenu', onDocumentContextMenu)
   window.addEventListener('resize', onWindowResize)
   bootWelcome()
 })
 onBeforeUnmount(() => {
   document.removeEventListener('keydown', onKeyDown)
+  document.removeEventListener('contextmenu', onDocumentContextMenu)
   window.removeEventListener('resize', onWindowResize)
 })
 </script>
@@ -283,10 +293,10 @@ onBeforeUnmount(() => {
   <div class="app" :style="appStyle">
     <header class="topbar">
       <div class="brand-area">
-        <span class="brand">
+        <button class="brand" :title="t('about.openTooltip')" @click="aboutOpen = true">
           <PhSparkle :size="16" weight="fill" class="brand-icon" />
           Animatr
-        </span>
+        </button>
       </div>
       <div class="transport">
         <IconButton
@@ -380,6 +390,7 @@ onBeforeUnmount(() => {
     <ExportDialog v-model="exportOpen" />
     <TestOverlay v-model="testsOpen" />
     <FullscreenPreview v-model="fullscreenOpen" />
+    <AboutDialog v-model="aboutOpen" />
     <DialogsHost />
     <WelcomeDialog
       v-model="welcomeOpen"
@@ -434,6 +445,18 @@ onBeforeUnmount(() => {
   display: inline-flex;
   align-items: center;
   gap: 6px;
+  padding: 4px 8px;
+  margin-left: -8px;
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--text);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+
+.brand:hover {
+  background: var(--panel-alt);
+  border-color: var(--border);
 }
 
 .brand-icon {