MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(front): admin menu in sidebar

This commit is contained in:
ArneBo 2025-03-12 13:00:00 +01:00
parent 58f39630e2
commit bd6eecbaba
1 changed files with 73 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
front/src/ui/components/Sidebar.vue
View File

@ -9,6 +9,8 @@ import Logo from '~/components/Logo.vue'
import Input from '~/components/ui/Input.vue'
import Link from '~/components/ui/Link.vue'
import UserMenu from './UserMenu.vue'
import Popover from '~/components/ui/Popover.vue'
import PopoverItem from '~/components/ui/popover/PopoverItem.vue'
import Button from '~/components/ui/Button.vue'
import Layout from '~/components/ui/Layout.vue'
import Spacer from '~/components/ui/Spacer.vue'
@ -30,6 +32,8 @@ const { value: searchParameter } = useModal('search')
const store = useStore()
const uploads = useUploadsStore()
const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index' : 'index')
const isOpen = ref(false)
</script>
<template>
@ -63,14 +67,75 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
flex
style="align-items: center;"
>
<Link
v-if="store.state.auth.availablePermissions['settings'] || store.state.auth.availablePermissions['moderation']"
to="/manage/settings"
round
square-small
icon="bi-wrench"
ghost
/>
<Popover
v-if="$store.state.auth.availablePermissions['settings'] || $store.state.auth.availablePermissions['moderation']"
v-model="isOpen"
raised
>
<Button
v-if="$store.state.auth.availablePermissions['settings'] || $store.state.auth.availablePermissions['moderation']"
round
square-small
ghost
icon="bi-wrench"
:aria-pressed="isOpen ? true : undefined"
@click="isOpen = !isOpen"
>
<div
v-if="moderationNotifications > 0"
:class="['ui', 'accent', 'mini', 'bottom floating', 'circular', 'label']"
>
{{ moderationNotifications }}
</div>
</Button>
<template #items>
<PopoverItem
v-if="store.state.auth.availablePermissions['library']"
:to="{name: 'manage.library.edits', query: {q: 'is_approved:null'}}"
icon="bi-music-note-beamed"
>
{{ $t('components.Sidebar.link.library') }}
<div
v-if="$store.state.ui.notifications.pendingReviewEdits > 0"
:title="labels.pendingReviewEdits"
:class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']"
>
{{ $store.state.ui.notifications.pendingReviewEdits }}
</div>
</PopoverItem>
<PopoverItem
v-if="$store.state.auth.availablePermissions['moderation']"
:to="{name: 'manage.moderation.reports.list', query: {q: 'resolved:no'}}"
icon="bi-megaphone-fill"
>
{{ $t('components.Sidebar.link.moderation') }}
<div
v-if="$store.state.ui.notifications.pendingReviewReports + $store.state.ui.notifications.pendingReviewRequests > 0"
:title="labels.pendingReviewReports"
:class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']"
>
{{ $store.state.ui.notifications.pendingReviewReports + $store.state.ui.notifications.pendingReviewRequests }}
</div>
</PopoverItem>
<PopoverItem
v-if="$store.state.auth.availablePermissions['settings']"
:to="{name: 'manage.users.users.list'}"
icon="bi-people-fill"
>
{{ $t('components.Sidebar.link.users') }}
</PopoverItem>
<PopoverItem
v-if="$store.state.auth.availablePermissions['settings']"
:to="{path: '/manage/settings'}"
icon="bi-wrench"
>
{{ $t('components.Sidebar.link.settings') }}
</PopoverItem>
</template>
</Popover>
<Link
v-if="store.state.auth.authenticated"