minor improvements to hydration stuff

frontend-new/src/components/MarkdownEditor.vue

@@ -99,11 +99,11 @@ function deletePage() {
       </div>
     </div>
     <div v-if="!props.title && internalEditing && !preview" class="mt-11"></div>
-    <div v-show="internalEditing && !preview" class="pl-6 mt-1">
+    <div v-if="internalEditing && !preview" class="pl-6 mt-1">
       <InputTextarea v-model="rawEdited" :rows="rawEdited.split(/\r\n|\r|\n/g).length + 3" :maxlength="maxlength" counter></InputTextarea>
     </div>
     <div v-if="props.title && (!internalEditing || preview)" class="-mt-5"></div>
-    <Markdown v-show="!internalEditing" :raw="raw" class="pl-4" />
+    <Markdown v-if="!internalEditing" :raw="raw" class="pl-4" />
     <Markdown v-if="preview" :raw="rawEdited" class="pl-4" />
   </div>
 </template>

frontend-new/src/components/Tag.vue

@@ -63,11 +63,11 @@ const ccColor = computed(() => {
         background: ccColor?.background,
         'border-color': ccColor?.background,
       }"
-      class="tag flex rounded px-2 py-1"
+      class="tag flex rounded px-2 py-1 text-0.8em"
     >
       {{ shortForm && cData ? cData : cName }}
     </span>
-    <span v-if="cData && !shortForm" class="tag flex bg-gray-100 rounded px-2 py-1 text-black">{{ cData }}</span>
+    <span v-if="cData && !shortForm" class="tag flex bg-gray-100 rounded px-2 py-1 text-black text-0.8em">{{ cData }}</span>
   </div>
 </template>
 
@@ -88,8 +88,6 @@ const ccColor = computed(() => {
 
   .tag {
     border: 1px solid #dcdcdc;
-    font-size: 0.8em;
-    line-height: 1;
   }
 }
 </style>

frontend-new/src/components/design/ErrorTooltip.vue

@@ -21,9 +21,11 @@ const hasError = computed<boolean>(() => {
 </script>
 
 <template>
-  <!-- todo this throws hydration errors -->
-  <Popper v-bind="$attrs" :show="hasError" arrow placement="bottom" :content="formattedError" class="text-center">
+  <Popper v-bind="$attrs" :show="hasError" arrow placement="bottom" class="text-center">
     <slot />
+    <template #content>
+      {{ formattedError || "error" }}
+    </template>
   </Popper>
 </template>
 
@@ -34,6 +36,7 @@ const hasError = computed<boolean>(() => {
   border-radius: 0.375rem;
   color: #fff;
 }
+
 :deep(.popper #arrow::before),
 :deep(.popper:hover),
 :deep(.popper:hover > #arrow::before) {

frontend-new/src/components/design/Tooltip.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import Popper from "vue3-popper";
-import { defineComponent, onMounted, ref } from "vue";
 
 const props = withDefaults(
   defineProps<{
@@ -12,31 +11,15 @@ const props = withDefaults(
     show: null,
   }
 );
-
-const ServerOnly = defineComponent({
-  name: "ServerOnly",
-  setup(_, { slots }) {
-    const show = ref(true);
-    onMounted(() => {
-      show.value = false;
-    });
-    return () => (show.value && slots.default ? slots.default() : null);
-  },
-});
 </script>
 
 <template>
-  <ClientOnly>
-    <Popper v-bind="$attrs" :hover="hover" open-delay="200" close-delay="100" :show="show">
-      <slot />
-      <template #content="props">
-        <slot name="content" v-bind="props" />
-      </template>
-    </Popper>
-  </ClientOnly>
-  <ServerOnly>
+  <Popper :hover="hover" open-delay="200" close-delay="100" :show="show">
     <slot />
-  </ServerOnly>
+    <template #content>
+      <slot name="content" />
+    </template>
+  </Popper>
 </template>
 
 <style>

frontend-new/src/composables/useApiHelper.ts

@@ -12,6 +12,7 @@ import {
   Note,
   Organization,
   ProjectChannel,
+  ProjectOwner,
   ProjectPage,
   ReviewQueueEntry,
   RoleTable,
@@ -113,6 +114,10 @@ export async function useVersionApprovals(blocking = true) {
   );
 }
 
+export async function usePossibleOwners(blocking = true) {
+  return useInitialState("usePossibleOwners", () => useInternalApi<ProjectOwner[]>("projects/possibleOwners"), blocking);
+}
+
 export async function useOrgVisibility(user: string, blocking = true) {
   return useInitialState(
     "useOrgVisibility",

frontend-new/src/composables/useValidationHelpers.ts

@@ -54,7 +54,6 @@ export const withI18nMessage = <T extends ValidationRule | ValidatorWrapper>(val
       if (overrideMsg) {
         msg = overrideMsg;
       }
-      console.log("translate", msg, overrideMsg, params);
       return I18n.value.global.t(msg, params);
     },
   })(validator, { withArguments: true });

frontend-new/src/pages/new.vue

@@ -23,6 +23,7 @@ import { useVuelidate } from "@vuelidate/core";
 import { required, maxLength, validProjectName, pattern, url, requiredIf } from "~/composables/useValidationHelpers";
 import Spinner from "~/components/design/Spinner.vue";
 import Link from "~/components/design/Link.vue";
+import { usePossibleOwners } from "~/composables/useApiHelper";
 
 interface NewProjectForm extends ProjectSettingsForm {
   ownerId: ProjectOwner["userId"];
@@ -37,8 +38,7 @@ const router = useRouter();
 const route = useRoute();
 const settings = useSettingsStore();
 
-// TODO move to useApi
-const projectOwners = await useInternalApi<ProjectOwner[]>("projects/possibleOwners");
+const projectOwners = await usePossibleOwners();
 const projectCreationErrors: Ref<string[]> = ref([]);
 const projectLoading = ref(true);
 const form = ref<NewProjectForm>({
@@ -50,7 +50,9 @@ const form = ref<NewProjectForm>({
   } as unknown as ProjectSettingsForm["settings"],
 } as NewProjectForm);
 
-form.value.ownerId = projectOwners[0].userId;
+if (projectOwners.value) {
+  form.value.ownerId = projectOwners.value[0].userId;
+}
 
 const converter = ref({
   bbCode: "",
@@ -119,8 +121,8 @@ function createProject() {
     form.value.pageContent = "# " + form.value.name + "  \nWelcome to your new project!";
   }
   useInternalApi<string>("projects/create", true, "post", form.value)
-    .then((url) => {
-      router.push(url);
+    .then((u) => {
+      router.push(u);
     })
     .catch((err) => {
       projectCreationErrors.value = [];
@@ -143,6 +145,7 @@ function createProject() {
     <template #tos>
       <!-- eslint-disable-next-line vue/no-v-html -->
       <p v-html="i18n.t('project.new.step1.text1')" />
+      <!-- eslint-disable-next-line vue/no-v-html -->
       <Link to="/guidelines"><p v-html="i18n.t('project.new.step1.text2')" /></Link>
     </template>
     <template #basic>

frontend-new/src/store/settings.ts

@@ -9,6 +9,7 @@ import { SUPPORTED_LOCALES } from "~/i18n";
 import { useInternalApi } from "~/composables/useApi";
 
 export const useSettingsStore = defineStore("settings", () => {
+  settingsLog("defineSettingsStore");
   const darkMode: Ref<boolean> = ref(false);
   const locale: Ref<string> = ref("en");