all developments of milestone 1

src/views/Admin/AdminGroupProfile.vue

@@ -336,7 +336,7 @@ import EmptyContent from "../../components/Utils/EmptyContent.vue";
 import { ApolloCache, FetchResult } from "@apollo/client/core";
 import { useMutation, useQuery } from "@vue/apollo-composable";
 import { computed, inject } from "vue";
-import { useHead } from "@unhead/vue";
+import { useHead } from "@/utils/head";
 import { integerTransformer, useRouteQuery } from "vue-use-route-query";
 import { useI18n } from "vue-i18n";
 import {

src/views/Admin/AdminProfile.vue

@@ -319,7 +319,7 @@ import { MemberRole } from "@/types/enums";
 import cloneDeep from "lodash/cloneDeep";
 import { useMutation, useQuery } from "@vue/apollo-composable";
 import { integerTransformer, useRouteQuery } from "vue-use-route-query";
-import { useHead } from "@unhead/vue";
+import { useHead } from "@/utils/head";
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import {

src/views/Admin/AdminUserProfile.vue

@@ -327,7 +327,7 @@ import { ADMIN_UPDATE_USER, LANGUAGES_CODES } from "@/graphql/admin";
 import { useMutation, useQuery } from "@vue/apollo-composable";
 import { ILanguage } from "@/types/admin.model";
 import { computed, inject, reactive, ref, watch } from "vue";
-import { useHead } from "@unhead/vue";
+import { useHead } from "@/utils/head";
 import { useI18n } from "vue-i18n";
 import { formatDateTimeString } from "@/filters/datetime";
 import { useRouter } from "vue-router";

src/views/Admin/DashboardView.vue

@@ -90,7 +90,7 @@ import RouteName from "@/router/name";
 import { useQuery } from "@vue/apollo-composable";
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
-import { useHead } from "@unhead/vue";
+import { useHead } from "@/utils/head";
 import NumberDashboardTile from "@/components/Dashboard/NumberDashboardTile.vue";
 import LinkedNumberDashboardTile from "@/components/Dashboard/LinkedNumberDashboardTile.vue";
 import { InstanceFilterFollowStatus } from "@/types/enums";

src/views/Admin/GroupProfiles.vue

@@ -119,7 +119,7 @@ import {
   useRouteQuery,
 } from "vue-use-route-query";
 import { useI18n } from "vue-i18n";
-import { useHead } from "@unhead/vue";
+import { useHead } from "@/utils/head";
 import { computed } from "vue";
 import { Paginate } from "@/types/paginate";
 import { IGroup } from "@/types/actor";

src/views/Admin/InstancesView.vue

@@ -235,7 +235,7 @@ import {
 import { useMutation, useQuery } from "@vue/apollo-composable";
 import { computed, inject, ref, watch } from "vue";
 import { useRouter } from "vue-router";
-import { useHead } from "@unhead/vue";
+import { useHead } from "@/utils/head";
 import CloudQuestion from "../../../node_modules/vue-material-design-icons/CloudQuestion.vue";
 import { Notifier } from "@/plugins/notifier";
 import MastodonLogo from "@/components/Share/MastodonLogo.vue";

src/views/Admin/ProfilesView.vue

@@ -103,7 +103,7 @@ import EmptyContent from "@/components/Utils/EmptyContent.vue";
 import { useQuery } from "@vue/apollo-composable";
 import { useI18n } from "vue-i18n";
 import { computed } from "vue";
-import { useHead } from "@unhead/vue";
+import { useHead } from "@/utils/head";
 import {
   useRouteQuery,
   booleanTransformer,

src/views/Admin/SettingsView.vue

@@ -58,6 +58,70 @@
           </small>
           <o-input v-model="settingsToWrite.contact" id="instance-contact" />
         </div>
+        <label class="field flex flex-col">
+          <p>{{ t("Logo") }}</p>
+          <small>
+            {{
+              t(
+                "Logo of the instance. Defaults to the upstream Mobilizon logo."
+              )
+            }}
+          </small>
+          <picture-upload
+            v-model:modelValue="instanceLogoFile"
+            :defaultImage="settingsToWrite.instanceLogo"
+            :textFallback="t('Logo')"
+            :maxSize="maxSize"
+          />
+        </label>
+        <label class="field flex flex-col">
+          <p>{{ t("Favicon") }}</p>
+          <small>
+            {{
+              t(
+                "Browser tab icon and PWA icon of the instance. Defaults to the upstream Mobilizon icon."
+              )
+            }}
+          </small>
+          <picture-upload
+            v-model:modelValue="instanceFaviconFile"
+            :defaultImage="settingsToWrite.instanceFavicon"
+            :textFallback="t('Favicon')"
+            :maxSize="maxSize"
+          />
+        </label>
+        <label class="field flex flex-col">
+          <p>{{ t("Default Picture") }}</p>
+          <small>
+            {{ t("Default picture when an event or group doesn't have one.") }}
+          </small>
+          <picture-upload
+            v-model:modelValue="defaultPictureFile"
+            :defaultImage="settingsToWrite.defaultPicture"
+            :textFallback="t('Default Picture')"
+            :maxSize="maxSize"
+          />
+        </label>
+        <!-- piece of code to manage instance colors
+        <div class="field flex flex-col">
+          <label class="" for="primary-color">{{ t("Primary Color") }}</label>
+          <o-input
+            type="color"
+            v-model="settingsToWrite.primaryColor"
+            id="primary-color"
+          />
+        </div>
+        <div class="field flex flex-col">
+          <label class="" for="secondary-color">{{
+            t("Secondary Color")
+          }}</label>
+          <o-input
+            type="color"
+            v-model="settingsToWrite.secondaryColor"
+            id="secondary-color"
+          />
+        </div>
+        -->
         <o-field :label="t('Allow registrations')">
           <o-switch v-model="settingsToWrite.registrationsOpen">
             <p
@@ -389,15 +453,29 @@ import RouteName from "@/router/name";
 import { useMutation, useQuery } from "@vue/apollo-composable";
 import { ref, computed, watch, inject } from "vue";
 import { useI18n } from "vue-i18n";
-import { useHead } from "@unhead/vue";
+import { useHead } from "@/utils/head";
 import type { Notifier } from "@/plugins/notifier";
 
+// Media upload related
+import PictureUpload from "@/components/PictureUpload.vue";
+import {
+  initWrappedMedia,
+  loadWrappedMedia,
+  asMediaInput,
+} from "@/utils/image";
+import { useDefaultMaxSize } from "@/composition/config";
+
 const defaultAdminSettings: IAdminSettings = {
   instanceName: "",
   instanceDescription: "",
   instanceSlogan: "",
   instanceLongDescription: "",
   contact: "",
+  instanceLogo: null,
+  instanceFavicon: null,
+  defaultPicture: null,
+  primaryColor: "",
+  secondaryColor: "",
   instanceTerms: "",
   instanceTermsType: InstanceTermsType.DEFAULT,
   instanceTermsUrl: null,
@@ -409,12 +487,30 @@ const defaultAdminSettings: IAdminSettings = {
   instanceLanguages: [],
 };
 
-const { result: adminSettingsResult } = useQuery<{
+const { onResult: onAdminSettingsResult } = useQuery<{
   adminSettings: IAdminSettings;
 }>(ADMIN_SETTINGS);
-const adminSettings = computed(
-  () => adminSettingsResult.value?.adminSettings ?? defaultAdminSettings
-);
+
+const adminSettings = ref<IAdminSettings>();
+
+onAdminSettingsResult(async ({ data }) => {
+  if (!data) return;
+  adminSettings.value =
+    {
+      ...data.adminSettings,
+    } ?? defaultAdminSettings;
+
+  loadWrappedMedia(instanceLogo, adminSettings.value.instanceLogo);
+  loadWrappedMedia(instanceFavicon, adminSettings.value.instanceFavicon);
+  loadWrappedMedia(defaultPicture, adminSettings.value.defaultPicture);
+});
+
+const instanceLogo = initWrappedMedia();
+const { file: instanceLogoFile } = instanceLogo;
+const instanceFavicon = initWrappedMedia();
+const { file: instanceFaviconFile } = instanceFavicon;
+const defaultPicture = initWrappedMedia();
+const { file: defaultPictureFile } = defaultPicture;
 
 const { result: languageResult } = useQuery<{ languages: ILanguage[] }>(
   LANGUAGES
@@ -463,6 +559,9 @@ const {
 } = useMutation(SAVE_ADMIN_SETTINGS);
 
 saveAdminSettingsDone(() => {
+  instanceLogo.firstHash = instanceLogo.hash;
+  instanceFavicon.firstHash = instanceFavicon.hash;
+  defaultPicture.firstHash = defaultPicture.hash;
   notifier?.success(t("Admin settings successfully saved.") as string);
 });
 
@@ -472,11 +571,29 @@ saveAdminSettingsError((e) => {
 });
 
 const updateSettings = async (): Promise<void> => {
-  const variables = { ...settingsToWrite.value };
-  console.debug("updating settings with variables", variables);
+  const variables = {
+    ...settingsToWrite.value,
+    ...asMediaInput(
+      instanceLogo,
+      "instanceLogo",
+      adminSettings.value?.instanceLogo?.id
+    ),
+    ...asMediaInput(
+      instanceFavicon,
+      "instanceFavicon",
+      adminSettings.value?.instanceFavicon?.id
+    ),
+    ...asMediaInput(
+      defaultPicture,
+      "defaultPicture",
+      adminSettings.value?.defaultPicture?.id
+    ),
+  };
   saveAdminSettings(variables);
 };
 
+const maxSize = useDefaultMaxSize();
+
 const getFilteredLanguages = (text: string): void => {
   filteredLanguages.value = languages.value
     ? languages.value

src/views/Admin/UsersView.vue

@@ -110,7 +110,7 @@ import { useQuery } from "@vue/apollo-composable";
 import { ILanguage } from "@/types/admin.model";
 import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
-import { useHead } from "@unhead/vue";
+import { useHead } from "@/utils/head";
 import { integerTransformer, useRouteQuery } from "vue-use-route-query";
 import { formatDateTimeString } from "@/filters/datetime";