funkwhale/front/src/ui/components/UserMenu.vue

<script setup lang="ts">
import { SUPPORTED_LOCALES, setI18nLanguage } from '~/init/locale'
import { useI18n } from 'vue-i18n'
import { computed, ref } from 'vue'
import { useStore } from '~/store'
import { useRoute } from 'vue-router'

import useThemeList from '~/composables/useThemeList'
import useTheme from '~/composables/useTheme'

import Button from '~/components/ui/Button.vue'
import Popover from '~/components/ui/Popover.vue'
import PopoverCheckbox from '~/components/ui/popover/PopoverCheckbox.vue'
import PopoverItem from '~/components/ui/popover/PopoverItem.vue'
import PopoverRadio from '~/components/ui/popover/PopoverRadio.vue'
import PopoverRadioItem from '~/components/ui/popover/PopoverRadioItem.vue'
import PopoverSubmenu from '~/components/ui/popover/PopoverSubmenu.vue'
import Link from '~/components/ui/Link.vue'

interface Events {
  (e: 'show:shortcuts-modal'): void
}

const route = useRoute()
const store = useStore()

const emit = defineEmits<Events>()

const { t, locale } = useI18n()

const themes = useThemeList()
const { theme } = useTheme()

const openUserMenu = ref(false)

const labels = computed(() => ({
  profile: t('components.common.UserMenu.link.profile'),
  settings: t('components.common.UserMenu.link.settings'),
  logout: t('components.common.UserMenu.link.logout'),
  about: t('components.common.UserMenu.link.about'),
  shortcuts: t('components.common.UserMenu.label.shortcuts'),
  support: t('components.common.UserMenu.link.support'),
  forum: t('components.common.UserMenu.link.forum'),
  docs: t('components.common.UserMenu.link.docs'),
  language: t('components.common.UserMenu.label.language'),
  theme: t('components.common.UserMenu.label.theme'),
  chat: t('components.common.UserMenu.link.chat'),
  git: t('components.common.UserMenu.link.git'),
  login: t('components.common.UserMenu.link.login'),
  signup: t('components.common.UserMenu.link.signup'),
  notifications: t('components.common.UserMenu.link.notifications')
}))
</script>

<template>
  <Popover v-model:open="openUserMenu">
    <Button
      @click="openUserMenu = !openUserMenu"
      round
      icon
      ghost
      class="is-icon-only"
    >
      <img
        v-if="store.state.auth.authenticated && store.state.auth.profile?.avatar?.urls.medium_square_crop"
        alt=""
        :src="store.getters['instance/absoluteUrl'](store.state.auth.profile?.avatar.urls.medium_square_crop)"
      >
      <i v-else class="bi bi-gear-fill" />
    </Button>
    <template #items>
      <PopoverItem v-if="store.state.ui.notifications.inbox + additionalNotifications > 0">
        <Link :to="{name: 'notifications'}">
          <i class="bi bi-inbox-fill" />
          >
          {{ store.state.ui.notifications.inbox + additionalNotifications }}
          {{ labels.notifications }}
        </Link>
      </PopoverItem>
      <PopoverItem v-if="store.state.auth.authenticated && store.state.auth.profile?.avatar?.urls.medium_square_crop">
        <Link
          :to="{name: 'profile.overview', params: { username: store.state.auth.username },}"
          icon="bi-person-fill"
          >
          {{ labels.profile }}
        </Link>
      </PopoverItem>
      <PopoverItem v-if="store.state.auth.authenticated && store.state.auth.profile?.avatar?.urls.medium_square_crop">
        <Link
          :to="{ path: '/settings' }"
          icon="bi-gear-fill"
        >
          {{ labels.settings }}
        </Link>
      </PopoverItem>
      <hr v-if="store.state.auth.authenticated"/>
      <PopoverSubmenu>
        <i class="bi bi-translate" />
        {{ labels.language }}
        <template #items>
          <PopoverItem v-for="(language, key) in SUPPORTED_LOCALES"
          :key="key"
          @click="setI18nLanguage(key)" >
            {{ language }}
          </PopoverItem>
        </template>
      </PopoverSubmenu>
      <PopoverSubmenu>
        <i class="bi bi-palette-fill" />
        {{ labels.theme }}
        <template #items>
          <PopoverItem v-for="th in themes"
          :key="th.key"
          @click="theme= th.key" >
            <i :class="th.icon" />
            {{ th.name }}
          </PopoverItem>
        </template>
      </PopoverSubmenu>
      <hr />
      <PopoverSubmenu>
        <i class="bi bi-question-square-fill" />
        {{ labels.support }}
        <template #items>
          <PopoverItem>
            <Link
              to="https://forum.funkwhale.audio"
            >
              <i class="bi-gear-fill" />
              {{ labels.forum }}
            </Link>
          </PopoverItem>
          <PopoverItem>
            <Link
              to="https://matrix.to/#/#funkwhale-support:matrix.org"
            >
              <i class="bi bi-chat-left-fill" />
              {{ labels.chat }}
            </Link>
          </PopoverItem>
          <PopoverItem>
            <Link
              to="https://dev.funkwhale.audio/funkwhale/funkwhale/issues"
            >
              <i class="bi-gitlab" />
              {{ labels.git }}
            </Link>
          </PopoverItem>
        </template>
      </PopoverSubmenu>
      <PopoverItem>
        <nav class="button-list">
          <Link
            to="https://docs.funkwhale.audio"
            class="item"
            target="_blank"
          >
            <i class="bi bi-book" />
            {{ labels.docs }}
          </Link>
        </nav>
      </PopoverItem>
      <PopoverItem
        @click.prevent="emit('show:shortcuts-modal')"
      >
        <i class="bi bi-keyboard" />
        {{ labels.shortcuts }}
      </PopoverItem>
      <hr v-if="store.state.auth.authenticated"/>
      <PopoverItem v-if="store.state.auth.authenticated && route.path != '/logout'"
      >
        <nav class="button-list">
          <Link :to="{ name: 'logout' }">
            <i class="bi bi-box-arrow-right" />
            {{ labels.logout }}
          </Link>
        </nav>
      </PopoverItem>
      <PopoverItem v-if="!store.state.auth.authenticated">
        <nav class="button-list">
          <Link
            :to="{ name: 'login' }"
          >
            <i class="bi-box-arrow-in-right" />
            {{ labels.login }}
          </Link>
        </nav>
      </PopoverItem>
      <PopoverItem v-if="!store.state.auth.authenticated && store.state.instance.settings.users.registration_enabled.value">
        <nav class="button-list">
          <Link
            :to="{ name: 'signup' }"
          >
            <i class="bi bi-person-square" />
            {{ labels.signup }}
          </Link>
        </nav>
      </PopoverItem>
    </template>
  </Popover>
</template>

<style scoped lang="scss">
nav.button-list {
  width: 100%;
  a:hover {
    background-color: transparent;
    border: none;
  }
}
</style>