fix: show entity logo actions on mobile

frontend/app/components/entity/EntityLogoMobile.vue

@@ -0,0 +1,88 @@
+<!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
+<template>
+  <section
+    v-if="entity"
+    class="mx-4 mb-4 rounded-md border border-section-div bg-layer-1 p-3 elem-shadow-sm sm:mx-8"
+    data-testid="entity-logo-mobile"
+  >
+    <div class="flex items-center gap-3">
+      <div class="relative h-16 w-16 shrink-0">
+        <div
+          class="flex h-full w-full justify-center overflow-hidden rounded-md border border-section-div bg-layer-0 elem-shadow-sm"
+        >
+          <div
+            v-if="accentClass"
+            class="h-full w-[20%] rounded-l-md"
+            :class="accentClass"
+          ></div>
+          <img
+            v-if="imgUrl"
+            :alt="entityLogoAlt"
+            class="h-full object-cover"
+            :class="imageClass"
+            :src="imgUrl"
+          />
+          <div
+            v-else
+            class="flex h-full items-center justify-center text-primary-text"
+            :class="fallbackClass"
+          >
+            <Icon :name="icon" size="2.75em" />
+          </div>
+        </div>
+        <button
+          v-if="canEditEntity"
+          @click="handleEdit"
+          :aria-label="editAriaLabel"
+          class="absolute bottom-1 right-1 z-10 flex rounded-md border border-black/80 bg-white/80 p-1 text-black/80 focus-brand dark:border-white/80 dark:bg-black/80 dark:text-white/80"
+          data-testid="entity-logo-mobile-edit"
+          type="button"
+        >
+          <Icon :name="IconMap.EDIT" size="1em" />
+        </button>
+      </div>
+      <div class="min-w-0">
+        <p class="truncate font-bold">
+          {{ entity.name }}
+        </p>
+        <p v-if="tagline" class="truncate text-sm font-bold text-distinct-text">
+          {{ tagline }}
+        </p>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  entity: Entity | null;
+  accentClass?: string;
+  icon: string;
+  imgUrl?: string;
+  tagline?: string;
+}>();
+
+const emit = defineEmits(["edit"]);
+const { canEdit } = useUser();
+const { t } = useI18n();
+
+const canEditEntity = computed(() => canEdit(props.entity));
+const imageClass = computed(() => (props.accentClass ? "w-[80%]" : "w-full"));
+const fallbackClass = computed(() =>
+  props.accentClass ? "w-[80%] rounded-r-md" : "w-full"
+);
+
+const entityLogoAlt = computed(() =>
+  t("i18n._global.entity_logo", {
+    entity_name: props.entity?.name ?? "",
+  })
+);
+
+const editAriaLabel = computed(() =>
+  t("i18n.components._global.edit_aria_label")
+);
+
+function handleEdit(): void {
+  emit("edit");
+}
+</script>

frontend/app/components/sidebar/left/content/SidebarLeftContentEvent.vue

@@ -35,9 +35,7 @@
             entityType: EntityType.EVENT,
           })
         "
-        :aria-label="
-          $t('i18n.components.sidebar_left_content_event.edit_aria_label')
-        "
+        :aria-label="$t('i18n.components._global.edit_aria_label')"
         class="absolute bottom-1 right-1 z-10 flex rounded-md border border-black/80 bg-white/80 p-1 text-black/80 focus-brand dark:border-white/80 dark:bg-black/80 dark:text-white/80"
       />
     </div>

frontend/app/components/sidebar/left/content/SidebarLeftContentGroupPage.vue

@@ -25,9 +25,7 @@
           (sidebar.collapsed == false || sidebar.collapsedSwitch == false)
         "
         @click="showToastError('THIS FEATURE IS COMING SOON!')"
-        :aria-label="
-          $t('i18n.components.sidebar_left_content_group_page.edit_aria_label')
-        "
+        :aria-label="$t('i18n.components._global.edit_aria_label')"
         class="absolute bottom-1 right-1 z-10 flex rounded-md border border-black/80 bg-white/80 p-1 text-black/80 focus-brand dark:border-white/80 dark:bg-black/80 dark:text-white/80"
       >
         <Icon :name="IconMap.EDIT" size="1em" />

frontend/app/components/sidebar/left/content/SidebarLeftContentOrganization.vue

@@ -35,11 +35,7 @@
             entityType: EntityType.ORGANIZATION,
           })
         "
-        :aria-label="
-          $t(
-            'i18n.components.sidebar_left_content_organization.edit_aria_label'
-          )
-        "
+        :aria-label="$t('i18n.components._global.edit_aria_label')"
         class="absolute bottom-1 right-1 z-10 flex rounded-md border border-black/80 bg-white/80 p-1 text-black/80 focus-brand dark:border-white/80 dark:bg-black/80 dark:text-white/80"
       />
     </div>

frontend/app/layouts/event/EventPage.vue

@@ -14,6 +14,15 @@
         class="bg-layer-0 pt-14 transition-[padding] duration-500 md:pt-0"
         :class="sidebarContentDynamicClass"
       >
+        <EntityLogoMobile
+          v-if="showMobileEntityShortcut"
+          @edit="handleEditEventLogo"
+          :accentClass="eventLogoAccentClass"
+          :entity="event"
+          :icon="IconMap.EVENT"
+          :imgUrl="eventIconUrl"
+          :tagline="event?.tagline"
+        />
         <NuxtPage :event="event" />
       </div>
       <FooterWebsite
@@ -27,11 +36,30 @@
 <script setup lang="ts">
 const aboveMediumBP = useBreakpoint("md");
 
-const paramsEventId = useRoute().params.eventId;
+const route = useRoute();
+const paramsEventId = route.params.eventId;
 const eventId = typeof paramsEventId === "string" ? paramsEventId : undefined;
 
 const { data: event } = useGetEvent(eventId || "");
 
+const eventIconUrl = computed(() =>
+  event.value?.iconUrl?.fileObject
+    ? `/api/${event.value.iconUrl.fileObject}`
+    : ""
+);
+const eventLogoAccentClass = computed(() =>
+  event.value?.type === "learn" ? "bg-learn-blue" : "bg-action-red"
+);
+
+const normalizedRoutePath = computed(() => route.path.replace(/\/$/, ""));
+const showMobileEntityShortcut = computed(
+  () =>
+    !aboveMediumBP.value &&
+    !!event.value &&
+    !!eventId &&
+    !normalizedRoutePath.value.endsWith(`/events/${eventId}`)
+);
+
 const sidebarHover = ref(false);
 const sidebarContentScrollable = useState<boolean>("sidebarContentScrollable");
 const { getSidebarContentDynamicClass, getSidebarFooterDynamicClass } =
@@ -42,4 +70,17 @@ const sidebarContentDynamicClass = getSidebarContentDynamicClass(
 );
 
 const sidebarFooterDynamicClass = getSidebarFooterDynamicClass(sidebarHover);
+
+const { openModal } = useModalHandlers("ModalUploadImageIcon");
+
+function handleEditEventLogo(): void {
+  if (!event.value?.id) {
+    return;
+  }
+
+  openModal({
+    entityId: event.value.id,
+    entityType: EntityType.EVENT,
+  });
+}
 </script>

frontend/app/layouts/group/GroupPage.vue

@@ -17,6 +17,14 @@
         class="bg-layer-0 pt-8 transition-[padding] duration-500 md:pt-0"
         :class="sidebarContentDynamicClass"
       >
+        <EntityLogoMobile
+          v-if="showMobileEntityShortcut"
+          @edit="handleEditGroupLogo"
+          :entity="group"
+          :icon="IconMap.GROUP"
+          :imgUrl="groupIconUrl"
+          :tagline="group?.tagline"
+        />
         <NuxtPage />
       </div>
       <FooterWebsite
@@ -35,6 +43,15 @@ const groupId = typeof paramsGroupId === "string" ? paramsGroupId : undefined;
 const { data: group } = useGetGroup(groupId ?? "");
 const { data: images } = useGetGroupImages(groupId ?? "");
 
+const groupIconUrl = computed(() =>
+  group.value?.iconUrl?.fileObject
+    ? `/api/${group.value.iconUrl.fileObject}`
+    : ""
+);
+const showMobileEntityShortcut = computed(
+  () => !aboveMediumBP.value && !!group.value
+);
+
 const sidebarHover = ref(false);
 const sidebarContentScrollable = useState<boolean>("sidebarContentScrollable");
 const { getSidebarContentDynamicClass, getSidebarFooterDynamicClass } =
@@ -45,4 +62,9 @@ const sidebarContentDynamicClass = getSidebarContentDynamicClass(
 );
 
 const sidebarFooterDynamicClass = getSidebarFooterDynamicClass(sidebarHover);
+const { showToastError } = useToaster();
+
+function handleEditGroupLogo(): void {
+  showToastError("THIS FEATURE IS COMING SOON!");
+}
 </script>

frontend/app/layouts/organization/OrganizationPage.vue

@@ -14,6 +14,14 @@
         class="bg-layer-0 pt-8 transition-[padding] duration-500 md:pt-0"
         :class="sidebarContentDynamicClass"
       >
+        <EntityLogoMobile
+          v-if="showMobileEntityShortcut"
+          @edit="handleEditOrganizationLogo"
+          :entity="organization"
+          :icon="IconMap.ORGANIZATION"
+          :imgUrl="organizationIconUrl"
+          :tagline="organization?.tagline"
+        />
         <NuxtPage :organization="organization" />
       </div>
       <FooterWebsite
@@ -27,11 +35,27 @@
 <script setup lang="ts">
 const aboveMediumBP = useBreakpoint("md");
 
-const paramsOrgId = useRoute().params.orgId;
+const route = useRoute();
+const paramsOrgId = route.params.orgId;
 const orgId = typeof paramsOrgId === "string" ? paramsOrgId : undefined;
 
 const { data: organization } = useGetOrganization(orgId || "");
 
+const organizationIconUrl = computed(() =>
+  organization.value?.iconUrl?.fileObject
+    ? `/api/${organization.value.iconUrl.fileObject}`
+    : ""
+);
+
+const normalizedRoutePath = computed(() => route.path.replace(/\/$/, ""));
+const showMobileEntityShortcut = computed(
+  () =>
+    !aboveMediumBP.value &&
+    !!organization.value &&
+    !!orgId &&
+    !normalizedRoutePath.value.endsWith(`/organizations/${orgId}`)
+);
+
 const sidebarHover = ref(false);
 const sidebarContentScrollable = useState<boolean>("sidebarContentScrollable");
 const { getSidebarContentDynamicClass, getSidebarFooterDynamicClass } =
@@ -42,4 +66,17 @@ const sidebarContentDynamicClass = getSidebarContentDynamicClass(
 );
 
 const sidebarFooterDynamicClass = getSidebarFooterDynamicClass(sidebarHover);
+
+const { openModal } = useModalHandlers("ModalUploadImageIcon");
+
+function handleEditOrganizationLogo(): void {
+  if (!organization.value?.id) {
+    return;
+  }
+
+  openModal({
+    entityId: organization.value.id,
+    entityType: EntityType.ORGANIZATION,
+  });
+}
 </script>

frontend/i18n/locales/ar.json

@@ -67,6 +67,7 @@
   "i18n.components._global.documentation": "التوثيق",
   "i18n.components._global.draggable_element": "عنصر صفحة قابل للسحب",
   "i18n.components._global.drop_image": "أسقط الصورة هنا لإضافتها",
+  "i18n.components._global.edit_aria_label": "عدّل الصورة",
   "i18n.components._global.event_type": "نوع الحدث",
   "i18n.components._global.event_type_action_aria_label": "فعالية عملية",
   "i18n.components._global.event_type_learn_aria_label": "فعالية تعليمية",
@@ -405,9 +406,6 @@
   "i18n.components.shield_private.private": "خاص",
   "i18n.components.sidebar.left.filter._global.search_button_aria_label": "زر البحث",
   "i18n.components.sidebar_left.sidebar_left_aria_label": "قائمة التنقل الرئيسية",
-  "i18n.components.sidebar_left_content_event.edit_aria_label": "عدّل صورة هذا الحدث",
-  "i18n.components.sidebar_left_content_group_page.edit_aria_label": "عدّل صورة هذه المجموعة",
-  "i18n.components.sidebar_left_content_organization.edit_aria_label": "عدّل صورة هذه المنظمة",
   "i18n.components.sidebar_left_filter_events.days_1_aria_label": "قبل يوم واحد",
   "i18n.components.sidebar_left_filter_events.days_30_aria_label": "30 يومًا قادمًا",
   "i18n.components.sidebar_left_filter_events.days_7_aria_label": "7 أيام المقبلة",

frontend/i18n/locales/de.json

@@ -67,6 +67,7 @@
   "i18n.components._global.documentation": "Dokumentation",
   "i18n.components._global.draggable_element": "Ziehbares Seitenelement",
   "i18n.components._global.drop_image": "Bild hier ablegen, um es hinzuzufügen",
+  "i18n.components._global.edit_aria_label": "Bild bearbeiten",
   "i18n.components._global.event_type": "Event-Typ",
   "i18n.components._global.get_involved": "Beteiligen Sie sich",
   "i18n.components._global.github": "GitHub",
@@ -382,8 +383,6 @@
   "i18n.components.shield_private.private": "Privat",
   "i18n.components.sidebar.left.filter._global.search_button_aria_label": "Suchschaltfläche",
   "i18n.components.sidebar_left.sidebar_left_aria_label": "Hauptnavigationsmenü",
-  "i18n.components.sidebar_left_content_group_page.edit_aria_label": "Bild zu dieser Gruppe bearbeiten",
-  "i18n.components.sidebar_left_content_organization.edit_aria_label": "Bild zu dieser Organisation bearbeiten",
   "i18n.components.sidebar_left_filter_events.days_1_aria_label": "1 Tag im Voraus",
   "i18n.components.sidebar_left_filter_events.days_30_aria_label": "30 Tage im Voraus",
   "i18n.components.sidebar_left_filter_events.days_7_aria_label": "7 Tage im Voraus",

frontend/i18n/locales/en-US.json

@@ -67,6 +67,7 @@
   "i18n.components._global.documentation": "Documentation",
   "i18n.components._global.draggable_element": "Draggable page element",
   "i18n.components._global.drop_image": "Drop the image here to add it",
+  "i18n.components._global.edit_aria_label": "Edit image",
   "i18n.components._global.event_type": "Event type",
   "i18n.components._global.event_type_action_aria_label": "Action type event",
   "i18n.components._global.event_type_learn_aria_label": "Learn type event",
@@ -414,9 +415,6 @@
   "i18n.components.shield_private.private": "Private",
   "i18n.components.sidebar.left.filter._global.search_button_aria_label": "Search button",
   "i18n.components.sidebar_left.sidebar_left_aria_label": "Main navigation menu",
-  "i18n.components.sidebar_left_content_event.edit_aria_label": "Edit the image to this event",
-  "i18n.components.sidebar_left_content_group_page.edit_aria_label": "Edit the image to this group",
-  "i18n.components.sidebar_left_content_organization.edit_aria_label": "Edit the image to this organization",
   "i18n.components.sidebar_left_filter_events.clear_filters_button_aria_label": "Clear filters button",
   "i18n.components.sidebar_left_filter_events.days_1_aria_label": "1 day ahead",
   "i18n.components.sidebar_left_filter_events.days_30_aria_label": "30 days ahead",

frontend/i18n/locales/es.json

@@ -67,6 +67,7 @@
   "i18n.components._global.documentation": "Documentación",
   "i18n.components._global.draggable_element": "Elemento de página arrastrable",
   "i18n.components._global.drop_image": "Suelta la imagen aquí para agregarla",
+  "i18n.components._global.edit_aria_label": "Editar imagen",
   "i18n.components._global.event_type": "Tipo de evento",
   "i18n.components._global.event_type_action_aria_label": "Evento de tipo acción",
   "i18n.components._global.event_type_learn_aria_label": "Evento de aprendizaje",
@@ -414,9 +415,6 @@
   "i18n.components.shield_private.private": "Privado",
   "i18n.components.sidebar.left.filter._global.search_button_aria_label": "Botón de búsqueda",
   "i18n.components.sidebar_left.sidebar_left_aria_label": "Menú de navegación principal",
-  "i18n.components.sidebar_left_content_event.edit_aria_label": "Edita la imagen para este evento",
-  "i18n.components.sidebar_left_content_group_page.edit_aria_label": "Edita la imagen para este grupo",
-  "i18n.components.sidebar_left_content_organization.edit_aria_label": "Edita la imagen para esta organización",
   "i18n.components.sidebar_left_filter_events.clear_filters_button_aria_label": "Vaciar botón de filtros",
   "i18n.components.sidebar_left_filter_events.days_1_aria_label": "1 día posterior",
   "i18n.components.sidebar_left_filter_events.days_30_aria_label": "30 días posteriores",

frontend/i18n/locales/fr.json

@@ -67,6 +67,7 @@
   "i18n.components._global.documentation": "Documentation",
   "i18n.components._global.draggable_element": "Élément de page déplaçable",
   "i18n.components._global.drop_image": "Déposez l’image ici pour l’ajouter",
+  "i18n.components._global.edit_aria_label": "Modifier l’image",
   "i18n.components._global.event_type": "Type d'évènement",
   "i18n.components._global.event_type_action_aria_label": "Événement de type action",
   "i18n.components._global.event_type_learn_aria_label": "Apprendre type d'événement",
@@ -412,9 +413,6 @@
   "i18n.components.shield_private.private": "Privé",
   "i18n.components.sidebar.left.filter._global.search_button_aria_label": "Bouton de recherche",
   "i18n.components.sidebar_left.sidebar_left_aria_label": "Menu principal de navigation",
-  "i18n.components.sidebar_left_content_event.edit_aria_label": "Modifier l’image de cet événement",
-  "i18n.components.sidebar_left_content_group_page.edit_aria_label": "Modifier l’image de ce groupe",
-  "i18n.components.sidebar_left_content_organization.edit_aria_label": "Modifier l’image de cette organisation",
   "i18n.components.sidebar_left_filter_events.clear_filters_button_aria_label": "Vider bouton filtres",
   "i18n.components.sidebar_left_filter_events.days_1_aria_label": "1 jour en avance",
   "i18n.components.sidebar_left_filter_events.days_30_aria_label": "30 jours en avance",

frontend/i18n/locales/id.json

@@ -67,6 +67,7 @@
   "i18n.components._global.documentation": "Dokumentasi",
   "i18n.components._global.draggable_element": "Elemen halaman yang dapat diseret",
   "i18n.components._global.drop_image": "Seret gambar di sini untuk menambahkannya",
+  "i18n.components._global.edit_aria_label": "Edit gambar",
   "i18n.components._global.event_type": "Jenis acara",
   "i18n.components._global.event_type_action_aria_label": "Jenis tindakan acara",
   "i18n.components._global.event_type_learn_aria_label": "Pelajari jenis acara",
@@ -414,9 +415,6 @@
   "i18n.components.shield_private.private": "Pribadi",
   "i18n.components.sidebar.left.filter._global.search_button_aria_label": "Tombol pencarian",
   "i18n.components.sidebar_left.sidebar_left_aria_label": "Menu navigasi utama",
-  "i18n.components.sidebar_left_content_event.edit_aria_label": "Edit gambar untuk acara ini",
-  "i18n.components.sidebar_left_content_group_page.edit_aria_label": "Edit gambar ke grup ini",
-  "i18n.components.sidebar_left_content_organization.edit_aria_label": "Edit gambar ke organisasi ini",
   "i18n.components.sidebar_left_filter_events.clear_filters_button_aria_label": "Tombol hapus filter",
   "i18n.components.sidebar_left_filter_events.days_1_aria_label": "1 hari ke depan",
   "i18n.components.sidebar_left_filter_events.days_30_aria_label": "30 hari ke depan",