Fix content comment widget on mobile

Fixes #1295
Fixes #1294

Author: bkis

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

@@ -8,6 +8,7 @@ defineProps<{
   disabled?: boolean;
   full?: boolean;
   toggled?: boolean;
+  highlight?: boolean;
 }>();
 </script>
 
@@ -18,6 +19,7 @@ defineProps<{
     :type="toggled ? 'primary' : undefined"
     :block="full"
     :circle="!full"
+    :color="highlight && !toggled ? 'var(--error-color)' : undefined"
     :focusable="false"
     :title="!full ? title : undefined"
     :disabled="disabled"

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

@@ -98,7 +98,12 @@ function handleSmallScreenWidgetsTriggered() {
       <!-- generic content widgets -->
       <location-content-context-widget :resource="resource" full @done="closeModal" />
       <correction-note-widget :resource="resource" full @done="closeModal" />
-      <content-comment-widget :resource="resource" full @done="closeModal" />
+      <content-comment-widget
+        v-model:show-comments="showComments"
+        :resource="resource"
+        full
+        @done="closeModal"
+      />
       <content-edit-widget :resource="resource" full @done="closeModal" />
       <resource-settings-widget :resource="resource" full @done="closeModal" />
       <jump-to-content-widget :resource="resource" direction="before" full @done="closeModal" />

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

@@ -2,7 +2,6 @@
 import type { AnyResourceRead } from '@/api';
 import ContentContainerHeaderWidget from '@/components/browse/ContentContainerHeaderWidget.vue';
 import { CommentIcon } from '@/icons';
-import { NBadge } from 'naive-ui';
 import { computed } from 'vue';
 
 const props = defineProps<{
@@ -25,18 +24,18 @@ const hasComments = computed(
 </script>
 
 <template>
-  <n-badge v-if="hasComments" :show="!showComments" dot :offset="[-5, 10]">
-    <content-container-header-widget
-      :full="full"
-      :title="$t('common.comment', 2)"
-      :icon-component="CommentIcon"
-      :toggled="showComments"
-      @click="
-        () => {
-          showComments = !showComments;
-          emit('done');
-        }
-      "
-    />
-  </n-badge>
+  <content-container-header-widget
+    v-if="hasComments"
+    :full="full"
+    :title="$t('common.comment', 2)"
+    :icon-component="CommentIcon"
+    :toggled="showComments"
+    :highlight="hasComments && !showComments"
+    @click="
+      () => {
+        showComments = !showComments;
+        emit('done');
+      }
+    "
+  />
 </template>