@3cr/viewer-browser 0.0.247 → 0.0.292

package/src/components/modal/app-bars/__tests__/ViewerAppBar.spec.ts

@@ -0,0 +1,99 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { defineComponent } from 'vue';
+import { createPinia, setActivePinia, storeToRefs } from 'pinia';
+import { createTestingPinia } from '@pinia/testing';
+
+import ViewerAppBar from '@/components/modal/app-bars/ViewerAppBar.vue';
+import { useSaveStore } from '@/stores/save.store';
+import { VBtn, VIcon, VSlideXTransition } from 'vuetify/components';
+import { useViewerStore } from '@/stores/viewer.store';
+import { getAnimationFrame } from '@test/getAnimationFrame';
+import OtaClient from '@crowdin/ota-client';
+import { useLanguageStore } from '@/stores/language.store';
+import { MockInstance } from '@vitest/spy';
+import AvatarDropdownMenu from '@/components/modal/menus/AvatarDropdownMenu.vue';
+
+const app = defineComponent({
+  template: '<v-app><ViewerAppBar></ViewerAppBar></v-app>',
+  components: { ViewerAppBar }
+});
+
+describe('ViewerAppBar tests', () => {
+  let wrapper = mount(app, {
+    plugins: [createTestingPinia({ createSpy: vi.fn })],
+    global: { stubs: ['settings-menu'] }
+  });
+  setActivePinia(createPinia());
+  let getStringsByLocaleSpy: MockInstance;
+  let listLanguagesSpy: MockInstance;
+
+  beforeEach(() => {
+    getStringsByLocaleSpy = vi.spyOn(OtaClient.prototype, 'getStringsByLocale').mockResolvedValue({});
+    listLanguagesSpy = vi.spyOn(OtaClient.prototype, 'listLanguages').mockResolvedValue([]);
+
+    wrapper = mount(app);
+  });
+
+  afterEach(() => {
+    getStringsByLocaleSpy.mockRestore();
+    listLanguagesSpy.mockRestore();
+
+    vi.clearAllMocks();
+    wrapper.unmount();
+  });
+
+  it('inflates', () => {
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('shows text', () => {
+    const { text, showText } = storeToRefs(useSaveStore());
+
+    showText.value = true;
+    expect(wrapper).toBeTruthy();
+    expect(wrapper.html()).toContain(text.value);
+  });
+
+  it('shows text on hover', async () => {
+    const { text, showText } = storeToRefs(useSaveStore());
+    const { options } = storeToRefs(useViewerStore());
+    showText.value = false;
+    options.value.onUpgrade = () => {};
+    options.value.onNotificationDropdown = () => {};
+
+    const [_folderIcon, saveIcon] = wrapper.findAllComponents(VIcon);
+    await flushPromises();
+    await saveIcon.trigger('mouseenter');
+    await flushPromises();
+    await getAnimationFrame();
+    expect(wrapper.findComponent(VSlideXTransition).html()).toContain(text.value);
+  });
+
+  it('should upgrade', async () => {
+    const onUpgrade = vi.fn();
+    const { options } = storeToRefs(useViewerStore());
+    options.value.onUpgrade = onUpgrade;
+    options.value.onNotificationDropdown = undefined;
+
+    const { showText } = storeToRefs(useSaveStore());
+    showText.value = false;
+
+    const [upgradeBtn] = wrapper.findAllComponents(VBtn);
+    await flushPromises();
+    await upgradeBtn.trigger('click');
+    expect(onUpgrade).toHaveBeenCalled();
+  });
+
+  it('should close dropdown', async () => {
+    vi.spyOn(useLanguageStore(), 'getLanguages').mockResolvedValue([]);
+    const onUpgrade = vi.fn();
+    const { options } = storeToRefs(useViewerStore());
+    options.value.onUpgrade = vi.fn();
+    options.value.onNotificationDropdown = onUpgrade;
+
+    const menu = wrapper.findComponent(AvatarDropdownMenu);
+    await flushPromises();
+    await menu.vm.$emit('close');
+    // expect(onUpgrade).toHaveBeenCalled();
+  });
+});

package/src/components/modal/layouts/Layout1x3ClipPath.vue

@@ -0,0 +1,35 @@
+<template>
+  <svg class="w-100 h-100 position-absolute">
+    <defs>
+      <clipPath id="layout-1x3">
+        <rect :x="v.x" :y="v.y" :width="v.width" :height="v.height" :rx="radius" :ry="radius" />
+        <rect :x="s.x" :y="s.y" :width="s.width" :height="s.height" :rx="radius" :ry="radius" />
+        <rect :x="t.x" :y="t.y" :width="t.width" :height="t.height" :rx="radius" :ry="radius" />
+        <rect :x="c.x" :y="c.y" :width="c.width" :height="c.height" :rx="radius" :ry="radius" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useLayout1x3 } from '@/components/modal/layouts/composables/useLayout1x3';
+
+interface Props {
+  canvas: HTMLCanvasElement;
+  padding?: number;
+  radius?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  padding: 8,
+  radius: 8
+});
+
+const layout = useLayout1x3(props.canvas, props.padding);
+
+const v = computed(() => layout.volume);
+const s = computed(() => layout.sagittal);
+const t = computed(() => layout.transverse);
+const c = computed(() => layout.coronal);
+</script>

package/src/components/modal/layouts/Layout2x2ClipPath.vue

@@ -0,0 +1,35 @@
+<template>
+  <svg class="w-100 h-100 position-absolute">
+    <defs>
+      <clipPath id="layout-2x2">
+        <rect :x="v.x" :y="v.y" :width="v.width" :height="v.height" :rx="radius" :ry="radius" />
+        <rect :x="s.x" :y="s.y" :width="s.width" :height="s.height" :rx="radius" :ry="radius" />
+        <rect :x="t.x" :y="t.y" :width="t.width" :height="t.height" :rx="radius" :ry="radius" />
+        <rect :x="c.x" :y="c.y" :width="c.width" :height="c.height" :rx="radius" :ry="radius" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useLayout2x2 } from '@/components/modal/layouts/composables/useLayout2x2';
+
+interface Props {
+  canvas: HTMLCanvasElement;
+  padding?: number;
+  radius?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  padding: 8,
+  radius: 8
+});
+
+const layout = useLayout2x2(props.canvas, props.padding);
+
+const v = computed(() => layout.volume);
+const s = computed(() => layout.sagittal);
+const t = computed(() => layout.transverse);
+const c = computed(() => layout.coronal);
+</script>

package/src/components/modal/layouts/LayoutFullscreenClipPath.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg class="w-100 h-100 position-absolute">
+    <defs>
+      <clipPath id="layout-fullscreen">
+        <rect :x="f.x" :y="f.y" :width="f.width" :height="f.height" :rx="radius" :ry="radius" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useLayoutFullscreen } from '@/components/modal/layouts/composables/useLayoutFullscreen';
+
+interface Props {
+  canvas: HTMLCanvasElement;
+  padding?: number;
+  radius?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  padding: 8,
+  radius: 8
+});
+
+const layout = useLayoutFullscreen(props.canvas, props.padding);
+
+const f = computed(() => layout.fullscreen);
+</script>

package/src/components/modal/layouts/__tests__/Layout1x3ClipPath.spec.ts

@@ -0,0 +1,15 @@
+import Layout1x3ClipPath from '@/components/modal/layouts/Layout1x3ClipPath.vue';
+import { mount } from '@vue/test-utils';
+
+describe('Layout1x3ClipPath tests', () => {
+  const canvas = document.createElement('canvas');
+  canvas.getBoundingClientRect = vi.fn(() => ({ x: 0, y: 0, width: 100, height: 100 }) as DOMRect);
+
+  it('should define clip path', () => {
+    const props = { canvas };
+    const wrapper = mount(Layout1x3ClipPath, { props });
+    const path = wrapper.find('clipPath');
+    expect(path.exists()).toBeTruthy();
+    expect(path.attributes()['id']).toBe('layout-1x3');
+  });
+});

package/src/components/modal/layouts/__tests__/Layout2x2ClipPath.spec.ts

@@ -0,0 +1,15 @@
+import { mount } from '@vue/test-utils';
+import Layout2x2ClipPath from '@/components/modal/layouts/Layout2x2ClipPath.vue';
+
+describe('Layout2x2ClipPath tests', () => {
+  const canvas = document.createElement('canvas');
+  canvas.getBoundingClientRect = vi.fn(() => ({ x: 0, y: 0, width: 100, height: 100 }) as DOMRect);
+
+  it('should define clip path', () => {
+    const props = { canvas };
+    const wrapper = mount(Layout2x2ClipPath, { props });
+    const path = wrapper.find('clipPath');
+    expect(path.exists()).toBeTruthy();
+    expect(path.attributes()['id']).toBe('layout-2x2');
+  });
+});

package/src/components/modal/layouts/__tests__/LayoutFullscreenClipPath.spec.ts

@@ -0,0 +1,15 @@
+import { mount } from '@vue/test-utils';
+import LayoutFullscreenClipPath from '@/components/modal/layouts/LayoutFullscreenClipPath.vue';
+
+describe('LayoutFullscreenClipPath tests', () => {
+  const canvas = document.createElement('canvas');
+  canvas.getBoundingClientRect = vi.fn(() => ({ x: 0, y: 0, width: 100, height: 100 }) as DOMRect);
+
+  it('should define clip path', () => {
+    const props = { canvas };
+    const wrapper = mount(LayoutFullscreenClipPath, { props });
+    const path = wrapper.find('clipPath');
+    expect(path.exists()).toBeTruthy();
+    expect(path.attributes()['id']).toBe('layout-fullscreen');
+  });
+});

package/src/components/modal/layouts/composables/__tests__/useLayout1x3.spec.ts

@@ -0,0 +1,40 @@
+import { useLayout1x3 } from '@/components/modal/layouts/composables/useLayout1x3';
+import { ref } from 'vue';
+
+describe('useLayout1x3 tests', () => {
+  const canvas = document.createElement('canvas');
+  canvas.getBoundingClientRect = vi.fn(() => ({ x: 0, y: 0, width: 100, height: 100 }) as DOMRect);
+
+  it('useLayout1x3 volume', () => {
+    const layout = useLayout1x3(canvas, ref(16));
+
+    expect(layout.volume).toStrictEqual({
+      height: 0,
+      width: 0,
+      x: 0,
+      y: 0
+    });
+  });
+
+  it('should resize', () => {
+    const layout = useLayout1x3(canvas, ref(16));
+
+    layout.onResize([
+      {
+        contentBoxSize: [
+          {
+            inlineSize: 12,
+            blockSize: 24
+          }
+        ]
+      } as unknown as ResizeObserverEntry
+    ]);
+
+    expect(layout.volume).toStrictEqual({
+      height: 0,
+      width: 0,
+      x: 16,
+      y: 16
+    });
+  });
+});

package/src/components/modal/layouts/composables/__tests__/useLayout2x2.spec.ts

@@ -0,0 +1,40 @@
+import { ref } from 'vue';
+import { useLayout2x2 } from '@/components/modal/layouts/composables/useLayout2x2';
+
+describe('useLayout2x2 tests', () => {
+  const canvas = document.createElement('canvas');
+  canvas.getBoundingClientRect = vi.fn(() => ({ x: 0, y: 0, width: 100, height: 100 }) as DOMRect);
+
+  it('useLayout2x2 volume', () => {
+    const layout = useLayout2x2(canvas, ref(16));
+
+    expect(layout.volume).toStrictEqual({
+      height: 0,
+      width: 0,
+      x: 0,
+      y: 0
+    });
+  });
+
+  it('should resize', () => {
+    const layout = useLayout2x2(canvas, ref(16));
+
+    layout.onResize([
+      {
+        contentBoxSize: [
+          {
+            inlineSize: 12,
+            blockSize: 24
+          }
+        ]
+      } as unknown as ResizeObserverEntry
+    ]);
+
+    expect(layout.volume).toStrictEqual({
+      height: 0,
+      width: 0,
+      x: 16,
+      y: 16
+    });
+  });
+});

package/src/components/modal/layouts/composables/__tests__/useLayoutFullscreen.spec.ts

@@ -0,0 +1,40 @@
+import { ref } from 'vue';
+import { useLayoutFullscreen } from '@/components/modal/layouts/composables/useLayoutFullscreen';
+
+describe('fullscreen tests', () => {
+  const canvas = document.createElement('canvas');
+  canvas.getBoundingClientRect = vi.fn(() => ({ x: 0, y: 0, width: 100, height: 100 }) as DOMRect);
+
+  it('fullscreen volume', () => {
+    const layout = useLayoutFullscreen(canvas, ref(16));
+
+    expect(layout.fullscreen).toStrictEqual({
+      height: 0,
+      width: 0,
+      x: 0,
+      y: 0
+    });
+  });
+
+  it('should resize', () => {
+    const layout = useLayoutFullscreen(canvas, ref(16));
+
+    layout.onResize([
+      {
+        contentBoxSize: [
+          {
+            inlineSize: 12,
+            blockSize: 24
+          }
+        ]
+      } as unknown as ResizeObserverEntry
+    ]);
+
+    expect(layout.fullscreen).toStrictEqual({
+      height: 0,
+      width: 0,
+      x: 16,
+      y: 16
+    });
+  });
+});

package/src/components/modal/layouts/composables/useLayout1x3.ts

@@ -0,0 +1,46 @@
+import { MaybeRef, reactive, unref } from 'vue';
+import { useResizeObserver } from '@/composables/useResizeObserver';
+
+export function useLayout1x3(canvas: HTMLCanvasElement, padding: MaybeRef<number>) {
+  const volume = reactive({ x: 0, y: 0, width: 0, height: 0 });
+  const transverse = reactive({ x: 0, y: 0, width: 0, height: 0 });
+  const sagittal = reactive({ x: 0, y: 0, width: 0, height: 0 });
+  const coronal = reactive({ x: 0, y: 0, width: 0, height: 0 });
+
+  useResizeObserver(canvas, onResize);
+
+  function onResize(entries: ResizeObserverEntry[]): void {
+    if (entries.length > 0 && entries[0].contentBoxSize.length > 0) {
+      const { inlineSize: width, blockSize: height } = entries[0].contentBoxSize[0];
+      recalculate(width, height, unref(padding));
+    }
+  }
+
+  function recalculate(width: number, height: number, padding: number): void {
+    // centre
+    volume.x = padding;
+    volume.y = padding;
+    volume.width = Math.max(width - height / 3 - padding, 0);
+    volume.height = Math.max(height - padding * 2, 0);
+
+    // top right
+    transverse.x = width - height / 3 + padding;
+    transverse.y = padding;
+    transverse.width = Math.max(height / 3 - padding * 2, 0);
+    transverse.height = Math.max(height / 3 - padding, 0);
+
+    // centre right
+    coronal.x = width - height / 3 + padding;
+    coronal.y = height / 3 + padding;
+    coronal.width = Math.max(height / 3 - padding * 2, 0);
+    coronal.height = Math.max(height / 3 - padding, 0);
+
+    // bottom right
+    sagittal.x = width - height / 3 + padding;
+    sagittal.y = (height / 3) * 2 + padding;
+    sagittal.width = Math.max(height / 3 - padding * 2, 0);
+    sagittal.height = Math.max(height / 3 - padding * 2, 0);
+  }
+
+  return { volume, transverse, sagittal, coronal, onResize };
+}

package/src/components/modal/layouts/composables/useLayout2x2.ts

@@ -0,0 +1,46 @@
+import { MaybeRef, reactive, unref } from 'vue';
+import { useResizeObserver } from '@/composables/useResizeObserver';
+
+export function useLayout2x2(canvas: HTMLCanvasElement, padding: MaybeRef<number>) {
+  const volume = reactive({ x: 0, y: 0, width: 0, height: 0 });
+  const transverse = reactive({ x: 0, y: 0, width: 0, height: 0 });
+  const sagittal = reactive({ x: 0, y: 0, width: 0, height: 0 });
+  const coronal = reactive({ x: 0, y: 0, width: 0, height: 0 });
+
+  useResizeObserver(canvas, onResize);
+
+  function onResize(entries: ResizeObserverEntry[]): void {
+    if (entries.length > 0 && entries[0].contentBoxSize.length > 0) {
+      const { inlineSize: width, blockSize: height } = entries[0].contentBoxSize[0];
+      recalculate(width, height, unref(padding));
+    }
+  }
+
+  function recalculate(width: number, height: number, padding: number): void {
+    // top left
+    volume.x = padding;
+    volume.y = padding;
+    volume.width = Math.max(width / 2 - padding * 1.5, 0);
+    volume.height = Math.max(height / 2 - padding * 1.5, 0);
+
+    // top right
+    sagittal.x = width / 2 + padding / 2;
+    sagittal.y = padding;
+    sagittal.width = Math.max(width / 2 - padding * 1.5, 0);
+    sagittal.height = Math.max(height / 2 - padding * 1.5, 0);
+
+    // bottom left
+    transverse.x = padding;
+    transverse.y = height / 2 + padding / 2;
+    transverse.width = Math.max(width / 2 - padding * 1.5, 0);
+    transverse.height = Math.max(height / 2 - padding * 1.5, 0);
+
+    // bottom right
+    coronal.x = width / 2 + padding / 2;
+    coronal.y = height / 2 + padding / 2;
+    coronal.width = Math.max(width / 2 - padding * 1.5, 0);
+    coronal.height = Math.max(height / 2 - padding * 1.5, 0);
+  }
+
+  return { volume, transverse, sagittal, coronal, onResize };
+}

package/src/components/modal/layouts/composables/useLayoutFullscreen.ts

@@ -0,0 +1,24 @@
+import { MaybeRef, reactive, unref } from 'vue';
+import { useResizeObserver } from '@/composables/useResizeObserver';
+
+export function useLayoutFullscreen(canvas: HTMLCanvasElement, padding: MaybeRef<number>) {
+  const fullscreen = reactive({ x: 0, y: 0, width: 0, height: 0 });
+
+  useResizeObserver(canvas, onResize);
+
+  function onResize(entries: ResizeObserverEntry[]): void {
+    if (entries.length > 0 && entries[0].contentBoxSize.length > 0) {
+      const { inlineSize: width, blockSize: height } = entries[0].contentBoxSize[0];
+      recalculate(width, height, unref(padding));
+    }
+  }
+
+  function recalculate(width: number, height: number, padding: number): void {
+    fullscreen.x = padding;
+    fullscreen.y = padding;
+    fullscreen.width = Math.max(width - padding * 2, 0);
+    fullscreen.height = Math.max(height - padding * 2, 0);
+  }
+
+  return { fullscreen, onResize };
+}

package/src/components/modal/menus/AutoAnnotateMenu.vue

@@ -0,0 +1,67 @@
+<template>
+  <v-menu v-bind="$attrs" v-model="menuOpen" :close-on-content-click="false" width="492" data-testid="menu">
+    <template #activator="{ props, isActive }">
+      <div class="d-flex">
+        <v-btn
+          class="rounded-e-0"
+          color="primary"
+          prepend-icon="auto_awesome"
+          variant="outlined"
+          @click="checkAndOpenMenu"
+          data-testid="openBtn"
+        >
+          <span class="minsk-900">{{ t('labels.runAiModels') }}</span>
+        </v-btn>
+        <v-btn v-bind="props" class="border-s-0 rounded-s-0" color="primary" size="40" variant="outlined">
+          <v-icon :icon="isActive ? 'close' : 'arrow_drop_down'" />
+        </v-btn>
+      </div>
+    </template>
+    <ai-model-list data-testid="modelList" v-model:selected="selectedModels" />
+  </v-menu>
+  <AutoAnnotateModal v-model="loading" />
+  <AnnotationGeneratedSnackbar v-model="s_annotate" />
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { ref } from 'vue';
+import { useViewerStore } from '@/stores/viewer.store';
+import { useI18n } from 'vue-i18n';
+
+defineOptions({ inheritAttrs: false });
+
+const { t } = useI18n();
+const { options } = storeToRefs(useViewerStore());
+
+const selectedModels = ref<string[]>([]);
+const loading = ref<boolean>(false);
+const s_annotate = ref<boolean>(false);
+const done = ref<boolean>(false);
+const menuOpen = ref(false);
+
+async function checkAndOpenMenu(): Promise<void> {
+  if (selectedModels.value.length === 0) {
+    menuOpen.value = true;
+    console.log('array was not passed');
+  } else {
+    await runAiModels();
+    console.log('test works');
+  }
+}
+
+async function runAiModels(): Promise<void> {
+  if (options.value.onRunAIModel) {
+    loading.value = true;
+    console.log('loading set to:', loading.value);
+    await options.value.onRunAIModel(selectedModels.value);
+    setTimeout(() => {
+      loading.value = false;
+      done.value = true;
+      s_annotate.value = true;
+      selectedModels.value = [];
+    }, 4000);
+  }
+}
+defineExpose({ menuOpen, selectedModels, runAiModels, done, loading, s_annotate, checkAndOpenMenu });
+</script>

package/src/components/modal/menus/AvatarDropdownMenu.vue

@@ -0,0 +1,66 @@
+<template>
+  <v-btn
+    id="avatar-dropdown"
+    v-bind="mergeProps(activatorProps)"
+    v-if="showAvatarDropdown"
+    data-testid="btn"
+    tile
+    rounded
+    border="sm"
+    class="pl-1 pr-3 ml-1"
+    style="opacity: 1 !important"
+    variant="plain"
+    :append-icon="'keyboard_arrow_down'"
+    @click="options.onProfileDropdown!(innerWidth - 16, 50)"
+  >
+    <v-img :src="userAvatar" width="32px" height="32px" rounded="circle" style="opacity: 1 !important" />
+  </v-btn>
+  <DemoAvatarDropdownMenu v-if="isDemo" @close="emit('close')" />
+</template>
+
+<script setup lang="ts">
+import { computed, mergeProps } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useViewerStore } from '@/stores/viewer.store';
+import { useDemoStore } from '@/stores/demo.store';
+
+interface Props {
+  activatorProps?: Record<string, unknown>;
+}
+
+type Emits = {
+  close: [void];
+};
+
+const emit = defineEmits<Emits>();
+
+withDefaults(defineProps<Props>(), {
+  activatorProps: () => ({})
+});
+
+const { isDemo } = storeToRefs(useDemoStore());
+const { options } = storeToRefs(useViewerStore());
+
+const innerWidth = computed(() => window.innerWidth);
+
+const showAvatarDropdown = computed(() => {
+  return !!options.value.onProfileDropdown;
+});
+
+const userAvatar = computed(() => {
+  const name = options.value.user?.name || 'Unknown User';
+  return options.value.user?.avatarUrl || name[0];
+});
+</script>
+
+<style lang="scss">
+#avatar-dropdown {
+  .v-icon {
+    // --v-icon-size-multiplier: 1 !important;
+    color: #92939e !important;
+  }
+  .v-btn__append {
+    margin-inline-start: 4px !important;
+  }
+}
+</style>

package/src/components/modal/menus/HelpMenu.vue

@@ -0,0 +1,47 @@
+<template>
+  <v-menu v-bind="$attrs">
+    <template #activator="{ props: menu }">
+      <v-tooltip open-delay="1000" location="right">
+        <template #activator="{ props: tooltip }">
+          <v-list-item
+            v-bind="mergeProps(menu, tooltip)"
+            class="mx-auto py-0"
+            width="42px"
+            min-height="30px"
+            color="primary"
+            prepend-icon="help"
+          />
+          <div class="text-center text-xs-semibold mb-4">
+            <span>{{ t('labels.help') }}</span>
+          </div>
+        </template>
+        <span>{{ t('labels.help') }}</span>
+      </v-tooltip>
+    </template>
+    <v-list>
+      <v-list-item prepend-icon="help" @click="knowledgeBase">
+        <v-list-item-title>{{ t('labels.helpDesk') }}</v-list-item-title>
+      </v-list-item>
+      <v-list-item prepend-icon="keyboard" @click="m_shortcuts = true">
+        <v-list-item-title>{{ t('labels.keyboardShortcuts') }}</v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+  <KeyboardShortcuts v-model="m_shortcuts" />
+</template>
+
+<script setup lang="ts">
+import { openUrl } from '@/functions/openUrl';
+import { mergeProps, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+defineOptions({ inheritAttrs: false });
+
+const { t } = useI18n();
+
+const m_shortcuts = ref<boolean>(false);
+
+function knowledgeBase(): void {
+  openUrl('https://3dicomviewer.com/knowledgebase', '_blank');
+}
+</script>