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

<script setup lang="ts">
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 PopoverItem from '~/components/ui/popover/PopoverItem.vue'
import PopoverSubmenu from '~/components/ui/popover/PopoverSubmenu.vue'
import Link from '~/components/ui/Link.vue'

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

const { t } = useI18n()

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

const isOpen = 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 raised v-model:open="isOpen">
    <Button
      min-content
      @click="isOpen = !isOpen"
      round
      default
      align-self="center"
      raised
      ghost
      :ariaPressed="isOpen ? true : undefined"
    >
      <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 /* TODO: Check: + additionalNotifications */ > 0">
        <Link :to="{name: 'notifications'}">
          <i class="bi bi-inbox-fill" />
          >
          {{ store.state.ui.notifications.inbox /* TODO: Check: + 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 && store.state.auth.profile?.avatar?.urls.medium_square_crop"/>
      <PopoverItem @click="store.commit('ui/toggleModal', 'languages')"
        :aria-pressed="store.state.ui.modalsOpen.has('languages') || undefined"
      >
        <i class="bi bi-translate" />
        {{ labels.language }}...
      </PopoverItem>
      <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 to="https://forum.funkwhale.audio">
              <i class="bi bi-gear-fill" />
              {{ labels.forum }}
          </PopoverItem>
          <PopoverItem to="https://matrix.to/#/#funkwhale-support:matrix.org">
              <i class="bi bi-chat-left-fill" />
              {{ labels.chat }}
          </PopoverItem>
          <PopoverItem to="https://dev.funkwhale.audio/funkwhale/funkwhale/issues">
              <i class="bi bi-gitlab" />
              {{ labels.git }}
          </PopoverItem>
        </template>
      </PopoverSubmenu>
      <PopoverItem to="https://docs.funkwhale.audio">
          <i class="bi bi-book" />
          {{ labels.docs }}
      </PopoverItem>
      <PopoverItem @click="store.commit('ui/toggleModal', 'shortcuts')"
        :aria-pressed="store.state.ui.modalsOpen.has('shortcuts') || undefined"
        >
        <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'"
        :to="{ name: 'logout' }"
      >
        <i class="bi bi-box-arrow-right" />
        {{ labels.logout }}
      </PopoverItem>
      <PopoverItem v-if="!store.state.auth.authenticated && route.path != '/login'"
        :to="{ name: 'login' }"
      >
        <i class="bi bi-box-arrow-in-right" />
        {{ labels.login }}
      </PopoverItem>
      <PopoverItem v-if="!store.state.auth.authenticated && store.state.instance.settings.users.registration_enabled.value"
        :to="{ name: 'signup' }"
      >
        <i class="bi bi-person-square" />
        {{ labels.signup }}
      </PopoverItem>
    </template>
  </Popover>
</template>

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