set translation indication

src/components/CompilationHeader.vue

@@ -109,7 +109,9 @@
             </template>
             <template v-else>
                 <!-- Display in non-edit view -->
-                <div class="level-item is-justify-content-flex-start">
+                <div
+                    class="notranslate level-item is-justify-content-flex-start"
+                >
                     <span class="title is-3" data-cy="compilation-title">
                         <!-- Use a placeholder to still use the height when not actual title is displayed -->
                         <template v-if="compilation.Title">
@@ -118,7 +120,7 @@
                         <template v-else>&nbsp;</template>
                     </span>
                 </div>
-                <div class="level-item">
+                <div class="notranslate level-item">
                     <p class="is-size-7">
                         <ArtistDisplay
                             class="has-cropped-text"

src/components/CueButtonsBar.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        class="cue-buttons-bar buttons field has-addons is-fullwidth is-flex-wrap-nowrap"
+        class="notranslate cue-buttons-bar buttons field has-addons is-fullwidth is-flex-wrap-nowrap"
     >
         <!-- A virtual cue button as prefix, when the first cue is not at the zero position -->
         <!-- Note: Do not crop the (non-existing) text in virtual cue buttons

src/components/CueButtonsField.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="cue-buttons-field buttons has-gap is-fullwidth">
+    <div class="notranslate cue-buttons-field buttons has-gap is-fullwidth">
         <!-- A virtual cue button as prefix, when the first cue is not at the zero position -->
         <CueButton
             v-if="(prefixCue.Duration ?? 0 > 0) && showInitialZeroTimeCue"

src/components/displays/ArtistDisplay.vue

@@ -1,5 +1,5 @@
 <template>
-    <span :class="{ 'mr-3': artist || album }">
+    <span class="notranslate" :class="{ 'mr-3': artist || album }">
         <span v-if="artist" class="is-single-line">
             <span class="has-opacity-half">by&nbsp;</span>
             <span class="is-italic">

src/components/displays/MeterDisplay.vue

@@ -1,5 +1,5 @@
 <template>
-    <span v-if="meter">
+    <span v-if="meter" class="notranslate">
         <span v-if="meter?.BeatsPerMinute" class="is-single-line mr-3">
             <span class="has-opacity-half">BPM:&nbsp;</span>
             <span>{{ meter?.BeatsPerMinute }}</span>

src/components/displays/TagsDisplay.vue

@@ -1,6 +1,6 @@
 <template>
     <span
-        class="tags"
+        class="notranslate tags"
         :class="{
             'are-large': !small,
         }"

src/components/editor/TagsSelector.vue

@@ -1,5 +1,5 @@
 <template>
-    <TransitionGroup name="list" tag="div" class="buttons">
+    <TransitionGroup name="list" tag="div" class="notranslate buttons">
         <ToggleButton
             v-for="tag in allTags"
             :key="tag"

src/components/indicators/MediaSourceIndicator.vue

@@ -1,7 +1,7 @@
 <template>
     <!-- align like a bulma level, vertically centered -->
     <p
-        class="control is-flex is-align-items-center"
+        class="notranslate control is-flex is-align-items-center"
         :title="
             unavailable
                 ? `Track media '${mediaSource}' is unavailable. Please reload or replace it in the editor.`

src/components/track/MediaTrack.vue

@@ -321,7 +321,7 @@
                         <!-- On mobile, the text is cropped at full width minus seek buttons, because of the level's automatic stacking,
                                     on lager viewports the text is cropped to not exceed the dynamic playhead slider -->
                         <p
-                            class="is-size-7 has-cropped-text"
+                            class="notranslate is-size-7 has-cropped-text"
                             :class="{
                                 'has-opacity-half': !canPlay,
                                 'has-text-success': playingCueIsSelected,
@@ -518,7 +518,7 @@
                                             <!-- On mobile, the text is cropped at full width minus seek buttons, because of the level's automatic stacking,
                                     on lager viewports the text is strictly cropped to 129px -->
                                             <p
-                                                class="is-size-7 has-cropped-text"
+                                                class="notranslate is-size-7 has-cropped-text"
                                                 :class="{
                                                     'has-text-success':
                                                         playingCueIsSelected,

src/components/track/PdfTrack.vue

@@ -59,13 +59,15 @@
                                         <!-- NOTE: Toggling the disabled attribute does not work as intended -->
                                         <a
                                             v-if="Boolean(mediaUrl)"
+                                            class="notranslate"
                                             :href="mediaUrl"
                                             target="_blank"
                                         >
                                             {{ track.Name }}
                                         </a>
                                         <a
                                             v-else
+                                            class="notranslate"
                                             :href="mediaUrl"
                                             target="_blank"
                                             disabled

src/components/track/TrackTitle.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- Surrounding div to handle some elements together, e.g. in a bulma level -->
-    <div>
+    <div class="notranslate">
         <!-- The title is the only header element that should shrink (break on words) if necessary -->
         <TrackTitleName
             class="title is-4 mr-2"
@@ -49,23 +49,11 @@
 
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
-import { computed, onUnmounted } from 'vue';
 import TrackTitleName from '@/components/track/TrackTitleName.vue';
 import MeterDisplay from '@/components/displays/MeterDisplay.vue';
 import ArtistDisplay from '@/components/displays/ArtistDisplay.vue';
 import TagsDisplay from '@/components/displays/TagsDisplay.vue';
 import { useTrackStore } from '@/store/track/index';
-import NavButton from '@/components/buttons/NavButton.vue';
-import { mdiDotsVertical } from '@mdi/js';
-
-import DropdownMenu from '@/components/dropdown-menu/DropdownMenu.vue';
-import MenuItemContent from '@/components/dropdown-menu/MenuItemContent.vue';
-import { mdiCog, mdiInformation } from '@mdi/js';
-import type { IMediaHandler } from '@/code/media/IMediaHandler';
-import { DefaultPitchShift, DefaultPlaybackRate } from '@/store/Track';
-import SpeedKnob from '../controls/SpeedKnob.vue';
-import DropdownMenuItem from '@/components/dropdown-menu/DropdownMenuItem.vue';
-import test from 'node:test';
 
 /** Displays a track's title, including name, meter, BPM and tags.
  * @remarks This component makes some layout decisions, but intentionally color decisions.