Comments ui playground

frontend/src/components/comments/Comment.vue

@@ -0,0 +1,73 @@
+<template>
+  <v-sheet
+    outlined
+    class="ec-comment"
+    elevation="2"
+    rounded="lg"
+    border="left"
+    colored-border="blue"
+  >
+    <PromptEntityDelete
+      v-if="deletable"
+      entity="/gugus"
+      class="ec-comment__delete"
+      warning-text-entity="Kommentar"
+    >
+      <template #activator="{ attrs, on }">
+        <v-btn
+          v-if="deletable"
+          class="ec-comment__delete"
+          icon
+          absolute
+          right
+          v-bind="attrs"
+          v-on="on"
+        >
+          <v-icon>mdi-delete</v-icon>
+        </v-btn>
+      </template>
+    </PromptEntityDelete>
+    <v-card-text class="px-3 pt-2 pb-2 ec-comment__text">
+      <slot />
+    </v-card-text>
+  </v-sheet>
+</template>
+
+<script>
+import PromptEntityDelete from '@/components/prompt/PromptEntityDelete.vue'
+
+export default {
+  name: 'Comment',
+  components: { PromptEntityDelete },
+  props: {
+    deletable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+}
+</script>
+
+<style scoped>
+.ec-comment {
+  background-color: #cfe2f1 !important;
+  border-color: #e3edfc #cfe2f1 #588ebc !important;
+}
+
+.ec-comment:not(:hover) .ec-comment__delete {
+  display: none;
+}
+
+.ec-comment__text :deep(p) {
+  margin-bottom: 6px;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.375rem;
+  letter-spacing: -0.006em;
+}
+
+.ec-comment__text :deep(.editor) {
+  padding-top: 10px;
+  padding-bottom: 2px;
+}
+</style>

frontend/src/components/comments/CommentWrapper.vue

@@ -0,0 +1,54 @@
+<template>
+  <div style="display: flex" class="gap-4">
+    <div style="flex-grow: 1; flex-shrink: 1">
+      <slot />
+    </div>
+    <div
+      v-if="$vuetify.breakpoint.width > 1360"
+      style="flex-basis: 320px"
+      class="d-flex flex-column gap-2 items-center"
+    >
+      <slot name="comments" />
+    </div>
+    <v-navigation-drawer
+      v-else
+      :value="openComments ? null : false"
+      clipped
+      right
+      app
+      permanent
+      temporary
+      color="blue-grey"
+      floating
+      width="320"
+    >
+      <div class="py-3 px-3 d-flex flex-column gap-2 items-center">
+        <slot name="comments" />
+      </div>
+    </v-navigation-drawer>
+    <v-btn
+      fab
+      fixed
+      bottom
+      right
+      color="primary"
+      class="mb-4 mr-4"
+      @click="openComments = !openComments"
+    >
+      <v-icon>mdi-chat</v-icon>
+    </v-btn>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CommentWrapper',
+  data() {
+    return {
+      openComments: false,
+    }
+  },
+}
+</script>
+
+<style scoped></style>

frontend/src/views/camp/activity/Activity.vue

@@ -4,16 +4,49 @@ Displays a single activity
 
 <template>
   <v-container fluid>
-    <ScheduleEntry :activity-id="activityId" :schedule-entry-id="scheduleEntryId" />
+    <CommentWrapper>
+      <ScheduleEntry :activity-id="activityId" :schedule-entry-id="scheduleEntryId" />
+      <template #comments>
+        <Comment deletable>
+          <p class="mb-2">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi magnam nobis
+            perferendis rerum sequi. Culpa cupiditate dolorum, ea earum eveniet harum
+            illo, illum nemo neque pariatur quasi quia.
+          </p>
+          <div class="d-flex align-center justify-space-between mt-1 gap-2">
+            <span
+              ><UserAvatar :user="authUser" size="24" class="mr-1" />
+              {{ authUser.displayName }}</span
+            >
+            <span>31.02.2025 12:00</span>
+          </div>
+        </Comment>
+        <Comment class="relative">
+          <e-textarea dense placeholder="Kommentar" style="margin: -8px -12px 0" />
+          <div class="d-flex align-center mt-2 gap-2">
+            <span
+              ><UserAvatar :user="authUser" size="24" class="mr-1" />
+              {{ authUser.displayName }}</span
+            >
+          </div>
+          <v-btn absolute text style="bottom: 2px; right: 1px">Send</v-btn>
+        </Comment>
+      </template>
+    </CommentWrapper>
   </v-container>
 </template>
 
 <script>
 import ScheduleEntry from '@/components/activity/ScheduleEntry.vue'
+import CommentWrapper from '@/components/comments/CommentWrapper.vue'
+import UserAvatar from '@/components/user/UserAvatar.vue'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'Activity',
   components: {
+    UserAvatar,
+    CommentWrapper,
     ScheduleEntry,
   },
 
@@ -27,5 +60,10 @@ export default {
       default: null,
     },
   },
+  computed: {
+    ...mapGetters({
+      authUser: 'getLoggedInUser',
+    }),
+  },
 }
 </script>

frontend/src/views/camp/navigation/desktop/NavTopbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app-bar app clipped-left color="blue-grey darken-4" dark>
+  <v-app-bar app clipped-left clipped-right color="blue-grey darken-4" dark>
     <logo text />
 
     <v-toolbar-items>