feat(frontend): show event start time and weekday

src/components/Event/DateCalendarIcon.vue

@@ -4,7 +4,11 @@
     :class="{ small }"
     :style="`--small: ${smallStyle}`"
   >
-    <div class="datetime-container-header" />
+    <div class="datetime-container-header">
+      <time :datetime="dateObj.toISOString()" class="weekday">{{
+        weekday
+      }}</time>
+    </div>
     <div class="datetime-container-content">
       <time :datetime="dateObj.toISOString()" class="day block font-semibold">{{
         day
@@ -38,6 +42,10 @@ const day = computed<string>(() =>
   dateObj.value.toLocaleString(undefined, { day: "numeric" })
 );
 
+const weekday = computed<string>(() =>
+  dateObj.value.toLocaleString(undefined, { weekday: "short" })
+);
+
 const smallStyle = computed<string>(() => (props.small ? "1.2" : "2"));
 </script>
 
@@ -51,6 +59,12 @@ div.datetime-container {
     height: calc(10px * var(--small));
     background: #f3425f;
   }
+  .datetime-container-header .weekday {
+    font-size: calc(9px * var(--small));
+    font-weight: bold;
+    vertical-align: top;
+    line-height: calc(9px * var(--small));
+  }
   .datetime-container-content {
     height: calc(30px * var(--small));
   }

src/components/Event/EventCard.vue

@@ -73,6 +73,16 @@
     </div>
     <div class="p-2 flex-auto" :class="{ 'sm:flex-1': mode === 'row' }">
       <div class="relative flex flex-col h-full">
+        <div
+          class="-mt-3 h-0 flex mb-3 ltr:ml-0 rtl:mr-0 items-end self-end"
+          :class="{ 'sm:hidden': mode === 'row' }"
+        >
+          <start-time-icon
+            :small="true"
+            v-if="!mergedOptions.hideDate && event.options.showStartTime"
+            :date="event.beginsOn.toString()"
+          />
+        </div>
         <span
           class="text-gray-700 dark:text-white font-semibold hidden"
           :class="{ 'sm:block': mode === 'row' }"
@@ -195,6 +205,7 @@ import {
   organizerAvatarUrl,
 } from "@/types/event.model";
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
+import StartTimeIcon from "@/components/Event/StartTimeIcon.vue";
 import ArrowRightThin from "vue-material-design-icons/ArrowRightThin.vue";
 import MenuDown from "vue-material-design-icons/MenuDown.vue";
 import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";

src/components/Event/StartTimeIcon.vue

@@ -0,0 +1,51 @@
+<template>
+  <div
+    class="starttime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white"
+    :class="{ small }"
+    :style="`--small: ${smallStyle}`"
+  >
+    <div class="starttime-container-content font-semibold">
+      <Clock class="clock-icon" /><time :datetime="dateObj.toISOString()">{{
+        time
+      }}</time>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+import Clock from "vue-material-design-icons/ClockTimeTenOutline.vue";
+
+const props = withDefaults(
+  defineProps<{
+    date: string;
+    small?: boolean;
+  }>(),
+  { small: false }
+);
+
+const dateObj = computed<Date>(() => new Date(props.date));
+
+const time = computed<string>(() =>
+  dateObj.value.toLocaleTimeString(undefined, {
+    hour: "2-digit",
+    minute: "2-digit",
+  })
+);
+
+const smallStyle = computed<string>(() => (props.small ? "0.9" : "2"));
+</script>
+
+<style lang="scss" scoped>
+div.starttime-container {
+  width: auto;
+  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
+  padding: 0.25rem 0.25rem;
+  font-size: calc(1rem * var(--small));
+}
+
+.clock-icon {
+  vertical-align: middle;
+  padding-right: 0.2rem;
+  display: inline-block;
+}
+</style>

src/components/NavBar.vue

@@ -186,6 +186,30 @@
             v-model:location="location"
           />
 
+          <li class="m-auto">
+            <router-link
+              :to="{ name: RouteName.SEARCH, query: { contentType: 'EVENTS' } }"
+              class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+              >{{ t("Agenda") }}</router-link
+            >
+          </li>
+          <li class="m-auto" v-if="islongEvents">
+            <router-link
+              :to="{
+                name: RouteName.SEARCH,
+                query: { contentType: 'LONGEVENTS' },
+              }"
+              class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+              >{{ t("Activities") }}</router-link
+            >
+          </li>
+          <li class="m-auto">
+            <router-link
+              :to="{ name: RouteName.SEARCH, query: { contentType: 'GROUPS' } }"
+              class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+              >{{ t("Groups") }}</router-link
+            >
+          </li>
           <li class="m-auto">
             <router-link
               :to="{ name: RouteName.EVENT_CALENDAR }"
@@ -240,7 +264,7 @@ import { ICurrentUserRole } from "@/types/enums";
 import { logout } from "../utils/auth";
 import { displayName } from "../types/actor";
 import RouteName from "../router/name";
-import { computed, ref, watch } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
@@ -249,10 +273,13 @@ import {
   useCurrentActorClient,
   useCurrentUserIdentities,
 } from "@/composition/apollo/actor";
-import { useMutation } from "@vue/apollo-composable";
+import { useLazyQuery, useMutation } from "@vue/apollo-composable";
 import { UPDATE_DEFAULT_ACTOR } from "@/graphql/actor";
 import { changeIdentity } from "@/utils/identity";
-import { useRegistrationConfig } from "@/composition/apollo/config";
+import {
+  useRegistrationConfig,
+  useIsLongEvents,
+} from "@/composition/apollo/config";
 import { useOruga } from "@oruga-ui/oruga-next";
 import {
   UNREAD_ACTOR_CONVERSATIONS,
@@ -260,6 +287,8 @@ import {
 } from "@/graphql/user";
 import { ICurrentUser } from "@/types/current-user.model";
 
+const { islongEvents } = useIsLongEvents();
+
 const { currentUser } = useCurrentUserClient();
 const { currentActor } = useCurrentActorClient();
 

src/views/Event/EventView.vue

@@ -18,6 +18,16 @@
           />
         </div>
 
+        <div
+          class="start-time-icon-wrapper relative"
+          v-if="event?.beginsOn && event?.options.showStartTime"
+        >
+          <start-time-icon
+            :date="event.beginsOn.toString()"
+            class="absolute right-3 -top-16"
+          />
+        </div>
+
         <section class="intro px-2 pt-4" dir="auto">
           <div class="flex flex-wrap gap-2 justify-end">
             <div class="flex-1 min-w-[300px]">
@@ -289,6 +299,7 @@ import {
   usernameWithDomain,
 } from "@/types/actor";
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
+import StartTimeIcon from "@/components/Event/StartTimeIcon.vue";
 import SkeletonDateCalendarIcon from "@/components/Event/SkeletonDateCalendarIcon.vue";
 import Earth from "vue-material-design-icons/Earth.vue";
 import Link from "vue-material-design-icons/Link.vue";