Merge branch 'mealie-next' into feat/announcements

frontend/app/components/Layout/LayoutParts/AppFooter.vue

@@ -0,0 +1,31 @@
+<template>
+  <v-footer
+    color="primary"
+    padless
+    app
+  >
+    <v-row
+      justify="center"
+      align="center"
+      dense
+      no-gutters
+    >
+      <v-col
+        class="py-2 text-center white--text"
+        cols="12"
+      >
+        <v-btn
+          color="white"
+          icon
+          href="https://github.com/mealie-recipes/mealie"
+          target="_blank"
+        >
+          <v-icon>
+            {{ $globals.icons.github }}
+          </v-icon>
+        </v-btn>
+        {{ new Date().getFullYear() }} — <strong> Mealie </strong>
+      </v-col>
+    </v-row>
+  </v-footer>
+</template>

frontend/app/components/Layout/LayoutParts/AppHeader.vue

@@ -0,0 +1,140 @@
+<template>
+  <v-app-bar
+    clipped-left
+    density="compact"
+    app
+    color="primary"
+    dark
+    class="d-print-none"
+  >
+    <slot />
+    <RouterLink :to="routerLink">
+      <v-btn
+        icon
+        color="white"
+      >
+        <v-icon size="40"> {{ $globals.icons.primary }} </v-icon>
+      </v-btn>
+    </RouterLink>
+
+    <div
+      btn
+      class="pl-2"
+    >
+      <v-toolbar-title
+        style="cursor: pointer"
+        @click="$router.push(routerLink)"
+      >
+        Mealie
+      </v-toolbar-title>
+    </div>
+    <RecipeDialogSearch ref="domSearchDialog" />
+
+    <v-spacer />
+
+    <!-- Navigation Menu -->
+    <template v-if="menu">
+      <v-responsive
+        v-if="!xs"
+        max-width="250"
+        @click="activateSearch"
+      >
+        <v-text-field
+          readonly
+          class="mt-1"
+          rounded
+          variant="solo-filled"
+          density="compact"
+          flat
+          :prepend-inner-icon="$globals.icons.search"
+          bg-color="primary-darken-1"
+          :placeholder="$t('search.search-hint')"
+        />
+      </v-responsive>
+      <v-btn
+        v-else
+        icon
+        @click="activateSearch"
+      >
+        <v-icon> {{ $globals.icons.search }}</v-icon>
+      </v-btn>
+      <v-btn
+        v-if="loggedIn"
+        :variant="smAndUp ? 'text' : undefined"
+        :icon="xs"
+        @click="logout()"
+      >
+        <v-icon :start="smAndUp">
+          {{ $globals.icons.logout }}
+        </v-icon>
+        {{ smAndUp ? $t("user.logout") : "" }}
+      </v-btn>
+      <v-btn
+        v-else
+        variant="text"
+        nuxt
+        to="/login"
+      >
+        <v-icon start>
+          {{ $globals.icons.user }}
+        </v-icon>
+        {{ $t("user.login") }}
+      </v-btn>
+    </template>
+  </v-app-bar>
+</template>
+
+<script setup lang="ts">
+import { useLoggedInState } from "~/composables/use-logged-in-state";
+import type RecipeDialogSearch from "~/components/Domain/Recipe/RecipeDialogSearch.vue";
+
+defineProps({
+  menu: {
+    type: Boolean,
+    default: true,
+  },
+});
+const auth = useMealieAuth();
+const { loggedIn } = useLoggedInState();
+const route = useRoute();
+const groupSlug = computed(() => route.params.groupSlug as string || auth.user.value?.groupSlug || "");
+const { xs, smAndUp } = useDisplay();
+
+const routerLink = computed(() => groupSlug.value ? `/g/${groupSlug.value}` : "/");
+const domSearchDialog = ref<InstanceType<typeof RecipeDialogSearch> | null>(null);
+
+function activateSearch() {
+  domSearchDialog.value?.open();
+}
+
+function handleKeyEvent(e: KeyboardEvent) {
+  const activeTag = document.activeElement?.tagName;
+  if (e.key === "/" && activeTag !== "INPUT" && activeTag !== "TEXTAREA") {
+    e.preventDefault();
+    activateSearch();
+  }
+}
+
+onMounted(() => {
+  document.addEventListener("keydown", handleKeyEvent);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener("keydown", handleKeyEvent);
+});
+
+async function logout() {
+  try {
+    await auth.signOut("/login?direct=1");
+  }
+  catch (e) {
+    console.error(e);
+  }
+}
+</script>
+
+<style scoped>
+.v-toolbar {
+  z-index: 2010 !important;
+}
+</style>

frontend/app/components/Layout/LayoutParts/AppScrollToTop.vue

@@ -0,0 +1,38 @@
+<template>
+  <v-fade-transition>
+    <v-btn
+      v-if="showButton"
+      icon
+      position="fixed"
+      location="bottom right"
+      class="ma-4"
+      color="primary"
+      elevation="4"
+      style="z-index: 999;"
+      @click="scrollToTop"
+    >
+      <v-icon>{{ $globals.icons.arrowUp }}</v-icon>
+    </v-btn>
+  </v-fade-transition>
+</template>
+
+<script setup lang="ts">
+const showButton = ref(false);
+const threshold = 400;
+
+function onScroll() {
+  showButton.value = document.documentElement.scrollTop > threshold;
+}
+
+function scrollToTop() {
+  document.documentElement.scrollTop = 0;
+}
+
+onMounted(() => {
+  window.addEventListener("scroll", onScroll);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", onScroll);
+});
+</script>

frontend/app/components/Layout/LayoutParts/AppSidebar.vue

@@ -0,0 +1,236 @@
+<template>
+  <v-navigation-drawer v-model="modelValue" class="d-flex flex-column d-print-none position-fixed" touchless>
+    <AnnouncementDialog v-model="showAnnouncementsDialog" />
+    <LanguageDialog v-model="state.languageDialog" />
+    <!-- User Profile -->
+    <template v-if="loggedIn && sessionUser">
+      <v-list-item lines="two" :to="userProfileLink" exact>
+        <div class="d-flex align-center ga-2">
+          <UserAvatar list :user-id="sessionUser.id" :tooltip="false" />
+
+          <div class="d-flex flex-column justify-start">
+            <v-list-item-title class="pr-2 pl-1">
+              {{ sessionUser.fullName }}
+            </v-list-item-title>
+            <v-list-item-subtitle class="opacity-100">
+              <v-btn v-if="isOwnGroup" class="px-2 pa-0" variant="text" :to="userFavoritesLink" size="small">
+                <v-icon start size="small">
+                  {{ $globals.icons.heart }}
+                </v-icon>
+                {{ $t("user.favorite-recipes") }}
+              </v-btn>
+            </v-list-item-subtitle>
+          </div>
+        </div>
+      </v-list-item>
+      <v-divider />
+    </template>
+
+    <slot />
+
+    <!-- Primary Links -->
+    <template v-if="topLink">
+      <v-list v-model:selected="state.secondarySelected" nav density="comfortable" color="primary">
+        <template v-for="nav in topLink">
+          <div v-if="!nav.restricted || isOwnGroup" :key="nav.key || nav.title">
+            <!-- Multi Items -->
+            <v-list-group
+              v-if="nav.children"
+              :key="(nav.key || nav.title) + 'multi-item'"
+              v-model="state.dropDowns[nav.title]"
+              color="primary"
+              :prepend-icon="nav.icon"
+              :fluid="true"
+            >
+              <template #activator="{ props: hoverProps }">
+                <v-list-item v-bind="hoverProps" :prepend-icon="nav.icon" :title="nav.title" />
+              </template>
+
+              <v-list-item
+                v-for="child in nav.children"
+                :key="child.key || child.title"
+                exact
+                :to="child.to"
+                :prepend-icon="child.icon"
+                :title="child.title"
+                class="ml-4"
+              />
+            </v-list-group>
+
+            <!-- Single Item -->
+            <template v-else>
+              <v-list-item
+                :key="(nav.key || nav.title) + 'single-item'"
+                exact
+                link
+                :to="nav.to"
+                :prepend-icon="nav.icon"
+                :title="nav.title"
+              />
+            </template>
+          </div>
+        </template>
+      </v-list>
+    </template>
+
+    <!-- Secondary Links -->
+    <template v-if="secondaryLinks.length > 0">
+      <v-divider class="mt-2" />
+      <v-list v-model:selected="state.secondarySelected" nav density="compact" exact>
+        <template v-for="nav in secondaryLinks">
+          <div v-if="!nav.restricted || isOwnGroup" :key="nav.key || nav.title">
+            <!-- Multi Items -->
+            <v-list-group
+              v-if="nav.children"
+              :key="(nav.key || nav.title) + 'multi-item'"
+              v-model="state.dropDowns[nav.title]"
+              color="primary"
+              :prepend-icon="nav.icon"
+              fluid
+            >
+              <template #activator="{ props: hoverProps }">
+                <v-list-item v-bind="hoverProps" :prepend-icon="nav.icon" :title="nav.title" />
+              </template>
+
+              <v-list-item
+                v-for="child in nav.children"
+                :key="child.key || child.title"
+                exact
+                :to="child.to"
+                class="ml-2"
+                :prepend-icon="child.icon"
+                :title="child.title"
+              />
+            </v-list-group>
+
+            <!-- Single Item -->
+            <v-list-item v-else :key="(nav.key || nav.title) + 'single-item'" exact link :to="nav.to">
+              <template #prepend>
+                <v-icon>{{ nav.icon }}</v-icon>
+              </template>
+              <v-list-item-title>{{ nav.title }}</v-list-item-title>
+            </v-list-item>
+          </div>
+        </template>
+      </v-list>
+    </template>
+
+    <!-- Bottom Navigation Links -->
+    <template #append>
+      <v-list v-model:selected="state.bottomSelected" nav density="comfortable">
+        <v-list-item
+          v-if="loggedIn && announcementsEnabled"
+          :title="$t('announcements.announcements')"
+          @click="() => showAnnouncementsDialog = !showAnnouncementsDialog"
+        >
+          <template #prepend>
+            <v-badge
+              :model-value="!!newAnnouncements.length"
+              color="accent"
+              :content="newAnnouncements.length || undefined"
+              offset-x="-2"
+            >
+              <v-icon>
+                {{ $globals.icons.bullhornVariant }}
+              </v-icon>
+            </v-badge>
+          </template>
+        </v-list-item>
+        <v-menu location="end bottom" :offset="15">
+          <template #activator="{ props: hoverProps }">
+            <v-list-item v-bind="hoverProps" :prepend-icon="$globals.icons.cog" :title="$t('general.settings')" />
+          </template>
+          <v-list density="comfortable" color="primary">
+            <v-list-item :prepend-icon="$globals.icons.translate" :title="$t('sidebar.language')" @click="state.languageDialog=true" />
+            <v-list-item :prepend-icon="$vuetify.theme.current.dark ? $globals.icons.weatherSunny : $globals.icons.weatherNight" :title="$vuetify.theme.current.dark ? $t('settings.theme.light-mode') : $t('settings.theme.dark-mode')" @click="toggleDark" />
+            <v-divider v-if="loggedIn" class="my-2" />
+            <v-list-item v-if="loggedIn" :prepend-icon="$globals.icons.cog" :title="$t('profile.user-settings')" to="/user/profile" />
+            <v-list-item v-if="canManage" :prepend-icon="$globals.icons.manageData" :title="$t('data-pages.data-management')" to="/group/data" />
+            <v-divider v-if="isAdmin" class="my-2" />
+            <v-list-item v-if="isAdmin" :prepend-icon="$globals.icons.wrench" :title="$t('settings.admin-settings')" to="/admin/site-settings" />
+          </v-list>
+        </v-menu>
+      </v-list>
+    </template>
+  </v-navigation-drawer>
+</template>
+
+<script setup lang="ts">
+import { useLoggedInState } from "~/composables/use-logged-in-state";
+import type { SidebarLinks } from "~/types/application-types";
+import AnnouncementDialog from "~/components/Domain/Announcement/AnnouncementDialog.vue";
+import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
+import { useToggleDarkMode } from "~/composables/use-utils";
+import { useAnnouncements } from "~/composables/use-announcements";
+
+const props = defineProps({
+  user: {
+    type: Object,
+    default: null,
+  },
+  topLink: {
+    type: Array as () => SidebarLinks,
+    required: true,
+  },
+  secondaryLinks: {
+    type: Array as () => SidebarLinks,
+    required: false,
+    default: null,
+  },
+});
+
+const modelValue = defineModel<boolean>({ default: false });
+
+const auth = useMealieAuth();
+const sessionUser = computed(() => auth.user.value);
+const { loggedIn, isOwnGroup } = useLoggedInState();
+const isAdmin = computed(() => auth.user.value?.admin);
+const canManage = computed(() => auth.user.value?.canManage);
+
+const userFavoritesLink = computed(() => auth.user.value ? `/user/${auth.user.value.id}/favorites` : undefined);
+const userProfileLink = computed(() => auth.user.value ? "/user/profile" : undefined);
+
+const toggleDark = useToggleDarkMode();
+
+const showAnnouncementsDialog = ref(false);
+const { announcementsEnabled, newAnnouncements } = useAnnouncements();
+
+const state = reactive({
+  dropDowns: {} as Record<string, boolean>,
+  secondarySelected: null as string[] | null,
+  bottomSelected: null as string[] | null,
+  languageDialog: false as boolean,
+});
+
+const allLinks = computed(() => [...props.topLink, ...(props.secondaryLinks || [])]);
+function initDropdowns() {
+  allLinks.value.forEach((link) => {
+    state.dropDowns[link.title] = link.childrenStartExpanded || false;
+  });
+}
+watch(
+  () => allLinks,
+  () => {
+    initDropdowns();
+  },
+  {
+    deep: true,
+  },
+);
+</script>
+
+<style scoped>
+@media print {
+  .no-print {
+    display: none;
+  }
+}
+
+.favorites-link {
+  text-decoration: none;
+}
+
+.favorites-link:hover {
+  text-decoration: underline;
+}
+</style>

frontend/app/components/Layout/LayoutParts/TheSnackbar.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="text-center">
+    <v-snackbar
+      v-model="toastAlert.open"
+      location="top"
+      :color="toastAlert.color"
+      timeout="2000"
+    >
+      <v-icon
+        v-if="icon"
+        dark
+        start
+        :icon="icon"
+      />
+
+      {{ toastAlert.title }}
+      {{ toastAlert.text }}
+
+      <template #actions>
+        <v-btn
+          variant="text"
+          @click="toastAlert.open = false"
+        >
+          {{ $t('general.close') }}
+        </v-btn>
+      </template>
+    </v-snackbar>
+    <v-snackbar
+      v-model="toastLoading.open"
+      content-class="py-2"
+      density="compact"
+      location="bottom"
+      :timeout="-1"
+      :color="toastLoading.color"
+    >
+      <div
+        class="d-flex flex-column align-center justify-start"
+        @click="toastLoading.open = false"
+      >
+        <div class="mb-2 mt-0 text-subtitle-1 text-center">
+          {{ toastLoading.text }}
+        </div>
+        <v-progress-linear
+          indeterminate
+          color="white-darken-2"
+        />
+      </div>
+    </v-snackbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useNuxtApp } from "#app";
+import { toastAlert, toastLoading } from "~/composables/use-toast";
+
+const { $globals } = useNuxtApp();
+const icon = computed(() => {
+  switch (toastAlert.color) {
+    case "error":
+      return $globals.icons.alertOutline;
+    case "success":
+      return $globals.icons.checkBold;
+    case "info":
+      return $globals.icons.informationOutline;
+    default:
+      return $globals.icons.alertOutline;
+  }
+});
+</script>