Implement displaying comments for tokens

Closes #251

Tekst-Web/src/components/browse/BrowseToolbar.vue

@@ -109,7 +109,7 @@ const buttonSize = computed(() => (state.smallScreen ? 'small' : 'large'));
   /* width: 100vw; */
   left: 0px;
   box-shadow: var(--fixed-box-shadow);
-  z-index: 2;
+  z-index: 3;
 }
 
 .browse-toolbar {

Tekst-Web/src/components/content/TextAnnotationContent.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import type { TextAnnotationContentRead, TextAnnotationResourceRead } from '@/api';
 import type { CSSProperties } from 'vue';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
+import { MetadataIcon } from '@/icons';
+import { NTable, NAlert } from 'naive-ui';
+import GenericModal from '@/components/generic/GenericModal.vue';
 
 interface AnnotationDisplayFormatFlags {
   bold?: boolean;
@@ -36,6 +39,12 @@ const props = withDefaults(
   }
 );
 
+const showDetailsModal = ref(false);
+const tokenDetailsData = ref<TextAnnotationContentRead['tokens'][number]>();
+const tokenDetailsComment = computed(
+  () => tokenDetailsData.value?.annotations?.find((a) => a.key === 'comment')?.value
+);
+
 const annotationDisplayTemplates = computed<AnnotationDisplayTemplate[]>(() => {
   if (!props.resource.config?.displayTemplate) return [];
   const out: AnnotationDisplayTemplate[] = [];
@@ -78,7 +87,9 @@ const contents = computed(() =>
     tokens: c.tokens.map((t) => ({
       token: t.token,
       lb: t.lb,
-      annotations: applyAnnotationDisplayTemplate(t.annotations),
+      annotations: t.annotations,
+      annotationsDisplay: applyAnnotationDisplayTemplate(t.annotations),
+      comment: t.annotations?.find((a) => a.key === 'comment')?.value,
     })),
   }))
 );
@@ -139,30 +150,75 @@ function getAnnotationStyle(fmtFlags?: AnnotationDisplayFormatFlags): CSSPropert
 <template>
   <div v-for="content in contents" :key="content.id" class="content-container" :class="{ reduced }">
     <template v-for="(token, tokenIndex) in content.tokens" :key="tokenIndex">
-      <div class="token-container">
+      <div
+        class="token-container"
+        :class="{
+          'token-with-annos': !!token.annotations?.length,
+          'token-with-comment': !!token.annotations?.find((a) => a.key === 'comment'),
+        }"
+        :title="token.comment || undefined"
+        @click="
+          tokenDetailsData = token;
+          showDetailsModal = true;
+        "
+      >
         <div class="token b i" :style="fontStyle">
           {{ token.token }}
         </div>
         <div class="annotations">
           <span
-            v-for="(annotation, index) in token.annotations"
+            v-for="(annotationDisplay, index) in token.annotationsDisplay"
             :key="index"
-            :style="getAnnotationStyle(annotation.format)"
+            :style="getAnnotationStyle(annotationDisplay.format)"
           >
-            {{ annotation.display }}
+            {{ annotationDisplay.display }}
           </span>
         </div>
       </div>
       <hr v-if="token.lb" class="token-lb" />
     </template>
   </div>
+
+  <generic-modal
+    v-model:show="showDetailsModal"
+    :title="$t('resources.types.textAnnotation.browse.allAnnotations')"
+    :icon="MetadataIcon"
+    heading-level="3"
+    @after-leave="() => (tokenDetailsData = undefined)"
+  >
+    <n-alert
+      v-if="tokenDetailsComment"
+      type="default"
+      :show-icon="false"
+      :title="$t('general.comment')"
+      style="margin-bottom: var(--layout-gap)"
+    >
+      {{ tokenDetailsComment }}
+    </n-alert>
+    <n-table :bordered="false" :bottom-bordered="false" size="small">
+      <thead>
+        <tr>
+          <th>{{ $t('resources.types.textAnnotation.contentFields.annotationKey') }}</th>
+          <th>{{ $t('resources.types.textAnnotation.contentFields.annotationValue') }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <template v-for="(annotation, index) in tokenDetailsData?.annotations" :key="index">
+          <tr v-if="annotation.key !== 'comment'">
+            <td>{{ annotation.key }}</td>
+            <td>{{ annotation.value }}</td>
+          </tr>
+        </template>
+      </tbody>
+    </n-table>
+  </generic-modal>
 </template>
 
 <style scoped>
 .content-container {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: 0px;
 }
 
 .content-container:not(:last-child) {
@@ -176,11 +232,26 @@ function getAnnotationStyle(fmtFlags?: AnnotationDisplayFormatFlags): CSSPropert
 }
 
 .token-container {
+  position: relative;
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   border-left: 1px solid var(--main-bg-color);
-  padding-left: 8px;
+  padding: 0 8px;
+}
+
+.token-container.token-with-annos {
+  cursor: pointer;
+  transition: 0.2s;
+  background: linear-gradient(135deg, var(--main-bg-color) 6px, transparent 0);
+}
+
+.token-container.token-with-annos:hover {
+  background-color: var(--accent-color-fade5);
+}
+
+.token-container.token-with-comment {
+  background: linear-gradient(135deg, var(--accent-color-fade3) 6px, transparent 0);
 }
 
 .reduced .token-container {

Tekst-Web/src/components/resource/ContentCommentWidget.vue

@@ -17,15 +17,15 @@ const showModal = ref(false);
 <template>
   <content-container-header-widget
     v-if="!!resource.contents?.[0]?.comment"
-    :title="$t('browse.contents.widgets.contentComment.title')"
+    :title="$t('general.comment')"
     :icon-component="CommentIcon"
     @click="showModal = true"
   />
 
   <generic-modal
     v-model:show="showModal"
     width="wide"
-    :title="$t('browse.contents.widgets.contentComment.title')"
+    :title="$t('general.comment')"
     :icon="CommentIcon"
   >
     <p v-if="resource.contents?.[0]?.comment" style="white-space: pre-wrap">

Tekst-Web/src/components/resource/ResourceInfoWidget.vue

@@ -141,7 +141,7 @@ watch(showInfoModal, async (after) => {
 
     <template v-if="resource.comment?.length">
       <icon-heading level="3" :icon="CommentIcon">
-        {{ $t('models.resource.comment') }}
+        {{ $t('general.comment') }}
       </icon-heading>
       <div class="resource-comment">
         <n-ellipsis :tooltip="false" :line-clamp="2" expand-trigger="click">

Tekst-Web/src/forms/formRules.ts

@@ -206,7 +206,7 @@ export const resourceSettingsFormRules: Record<string, FormItemRule[]> = {
   ],
   citation: [minMaxCharsRule(0, 1000, 'blur')],
   commentTranslation: [
-    requiredRule(() => $t('models.resource.comment'), 'blur'),
+    requiredRule(() => $t('general.comment'), 'blur'),
     minMaxCharsRule(1, 2000, 'blur'),
   ],
   metaKey: [requiredRule(() => $t('models.meta.key'), 'blur'), minMaxCharsRule(1, 16, 'blur')],

Tekst-Web/src/forms/resources/config/ResourceSettingsFormItems.vue

@@ -193,8 +193,8 @@ function renderUserSelectTag(props: { option: SelectOption; handleClose: () => v
     parent-form-path-prefix="comment"
     multiline
     :max-translation-length="2000"
-    :main-form-label="$t('models.resource.comment')"
-    :translation-form-label="$t('models.resource.comment')"
+    :main-form-label="$t('general.comment')"
+    :translation-form-label="$t('general.comment')"
     :translation-form-rule="resourceSettingsFormRules.commentTranslation"
     @update:model-value="(v) => handleUpdate('comment', v)"
   />

Tekst-Web/translations/ui/deDE.yml

@@ -1,6 +1,7 @@
 general:
   general: Allgemein
   status: Status
+  comment: Kommentar
   tipThemeToggleLight: Zu hellem Farbschema wechseln
   tipThemeToggleDark: Zu dunklem Farbschema wechseln
   yesAction: 'Ja'
@@ -179,8 +180,6 @@ browse:
   locationNoData: Die ausgewählten Ressourcen enthalten keine Daten für diese Ebene und Fundstelle. Wählen Sie eine andere Fundstelle oder aktivieren Sie mehr Ressourcen.
   contents:
     widgets:
-      contentComment:
-        title: Kommentar
       contentEdit:
         title: Inhalt bearbeiten
       deepLTranslate:
@@ -283,7 +282,6 @@ models:
     public: öffentlich
     proposed: vorgeschlagen für Veröffentlichung
     citation: Zitation
-    comment: Kommentar
     share: Zugriff teilen
     sharedRead: Lesezugriff teilen
     sharedWrite: Schreibzugriff teilen
@@ -464,6 +462,8 @@ resources:
         annotationValue: Wert
       config:
         displayTemplate: Darstellungsvorlage
+      browse:
+        allAnnotations: Alle Annotationen
     audio:
       label: Audio
       parenthesis: Audiowiedergabe

Tekst-Web/translations/ui/enUS.yml

@@ -1,6 +1,7 @@
 general:
   general: General
   status: Status
+  comment: Comment
   tipThemeToggleLight: Switch to light mode
   tipThemeToggleDark: Switch to dark mode
   yesAction: 'Yes'
@@ -175,8 +176,6 @@ browse:
   locationNoData: The selected resources contain no data for this text level and location. Try choosing a different location or activating more resources.
   contents:
     widgets:
-      contentComment:
-        title: Comment
       contentEdit:
         title: Edit content
       deepLTranslate:
@@ -280,7 +279,6 @@ models:
     public: public
     proposed: proposed for publication
     citation: Citation
-    comment: Comment
     share: Share access
     sharedRead: Share read access
     sharedWrite: Share write access
@@ -453,6 +451,8 @@ resources:
         annotationValue: Value
       config:
         displayTemplate: Display Template
+      browse:
+        allAnnotations: All annotations
     audio:
       label: Audio
       parenthesis: audio playback