7b2b3ac37d
# Pull Request Template ## Description This PR updates settings page UI ## Type of change - [x] New feature (non-breaking change which adds functionality) ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules
40 lines
946 B
Vue
40 lines
946 B
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import Icon from 'next/icon/Icon.vue';
|
|
import ChannelIcon from 'next/icon/ChannelIcon.vue';
|
|
|
|
const props = defineProps({
|
|
label: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
// eslint-disable-next-line vue/no-unused-properties
|
|
active: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
inbox: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const reauthorizationRequired = computed(() => {
|
|
return props.inbox.reauthorization_required;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<span class="size-4 grid place-content-center rounded-full">
|
|
<ChannelIcon :inbox="inbox" class="size-4" />
|
|
</span>
|
|
<div class="flex-1 truncate min-w-0">{{ label }}</div>
|
|
<div
|
|
v-if="reauthorizationRequired"
|
|
v-tooltip.top-end="$t('SIDEBAR.REAUTHORIZE')"
|
|
class="grid place-content-center size-5 bg-n-ruby-5/60 rounded-full"
|
|
>
|
|
<Icon icon="i-woot-alert" class="size-3 text-n-ruby-9" />
|
|
</div>
|
|
</template>
|