chore: script setup components (#7299)

frontend/components/Layout/LayoutParts/AppSidebar.vue

@@ -1,8 +1,8 @@
 <template>
-  <v-navigation-drawer v-model="showDrawer" class="d-flex flex-column d-print-none position-fixed" touchless>
-    <LanguageDialog v-model="languageDialog" />
+  <v-navigation-drawer v-model="modelValue" class="d-flex flex-column d-print-none position-fixed" touchless>
+    <LanguageDialog v-model="state.languageDialog" />
     <!-- User Profile -->
-    <template v-if="loggedIn">
+    <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" />
@@ -29,20 +29,20 @@
 
     <!-- Primary Links -->
     <template v-if="topLink">
-      <v-list v-model:selected="secondarySelected" nav density="comfortable" color="primary">
+      <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="dropDowns[nav.title]"
+              v-model="state.dropDowns[nav.title]"
               color="primary"
               :prepend-icon="nav.icon"
               :fluid="true"
             >
-              <template #activator="{ props }">
-                <v-list-item v-bind="props" :prepend-icon="nav.icon" :title="nav.title" />
+              <template #activator="{ props: hoverProps }">
+                <v-list-item v-bind="hoverProps" :prepend-icon="nav.icon" :title="nav.title" />
               </template>
 
               <v-list-item
@@ -75,20 +75,20 @@
     <!-- Secondary Links -->
     <template v-if="secondaryLinks.length > 0">
       <v-divider class="mt-2" />
-      <v-list v-model:selected="secondarySelected" nav density="compact" exact>
+      <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="dropDowns[nav.title]"
+              v-model="state.dropDowns[nav.title]"
               color="primary"
               :prepend-icon="nav.icon"
               fluid
             >
-              <template #activator="{ props }">
-                <v-list-item v-bind="props" :prepend-icon="nav.icon" :title="nav.title" />
+              <template #activator="{ props: hoverProps }">
+                <v-list-item v-bind="hoverProps" :prepend-icon="nav.icon" :title="nav.title" />
               </template>
 
               <v-list-item
@@ -116,13 +116,13 @@
 
     <!-- Bottom Navigation Links -->
     <template #append>
-      <v-list v-model:selected="bottomSelected" nav density="comfortable">
+      <v-list v-model:selected="state.bottomSelected" nav density="comfortable">
         <v-menu location="end bottom" :offset="15">
-          <template #activator="{ props }">
-            <v-list-item v-bind="props" :prepend-icon="$globals.icons.cog" :title="$t('general.settings')" />
+          <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="languageDialog=true" />
+            <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" />
@@ -136,92 +136,63 @@
   </v-navigation-drawer>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 import type { SidebarLinks } from "~/types/application-types";
 import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
 import { useToggleDarkMode } from "~/composables/use-utils";
 
-export default defineNuxtComponent({
-  components: {
-    UserAvatar,
+const props = defineProps({
+  user: {
+    type: Object,
+    default: null,
   },
-  props: {
-    modelValue: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    user: {
-      type: Object,
-      default: null,
-    },
-    topLink: {
-      type: Array as () => SidebarLinks,
-      required: true,
-    },
-    secondaryLinks: {
-      type: Array as () => SidebarLinks,
-      required: false,
-      default: null,
-    },
+  topLink: {
+    type: Array as () => SidebarLinks,
+    required: true,
   },
-  emits: ["update:modelValue"],
-  setup(props, context) {
-    const auth = useMealieAuth();
-    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 state = reactive({
-      dropDowns: {} as Record<string, boolean>,
-      topSelected: null as string[] | null,
-      secondarySelected: null as string[] | null,
-      bottomSelected: null as string[] | null,
-      hasOpenedBefore: false as boolean,
-      languageDialog: false as boolean,
-    });
-    // model to control the drawer
-    const showDrawer = computed({
-      get: () => props.modelValue,
-      set: value => context.emit("update:modelValue", value),
-    });
-
-    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,
-      },
-    );
-
-    return {
-      ...toRefs(state),
-      userFavoritesLink,
-      userProfileLink,
-      showDrawer,
-      loggedIn,
-      isAdmin,
-      canManage,
-      isOwnGroup,
-      sessionUser: auth.user,
-      toggleDark,
-    };
+  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 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>