Sony MathewandGitHub
e5d66020fd
# Pull Request Template ## Description Made the design for unread-counts more subtle Fixes # DESN-43 ## Type of change Please delete options that are not relevant. - [ ] Bug fix (non-breaking change which fixes an issue) - [x] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality not to work as expected) - [ ] This change requires a documentation update ## How Has This Been Tested? Tested manually. Here are the screenshots. Light theme: <img width="273" height="605" alt="Screenshot 2026-05-22 at 1 28 31 PM" src="https://github.com/user-attachments/assets/cbeccf11-41c4-4899-bbb5-f870df530260" /> Dark theme: <img width="280" height="606" alt="Screenshot 2026-05-22 at 1 27 59 PM" src="https://github.com/user-attachments/assets/3740f57d-3392-435d-9d84-75caf42df610" /> ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [ ] 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 - [x] 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
28 lines
727 B
Vue
28 lines
727 B
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
count: { type: [Number, String], default: 0 },
|
|
});
|
|
|
|
const normalizedCount = computed(() => {
|
|
const count = Number(props.count);
|
|
return Number.isFinite(count) && count > 0 ? count : 0;
|
|
});
|
|
|
|
const displayCount = computed(() =>
|
|
normalizedCount.value > 99 ? '99+' : String(normalizedCount.value)
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<span
|
|
v-if="normalizedCount > 0"
|
|
data-test-id="sidebar-unread-badge"
|
|
class="inline-grid h-5 min-w-5 place-items-center rounded-full bg-n-slate-4 px-1 text-xxs font-medium leading-3 text-n-slate-12 dark:bg-n-slate-5 flex-shrink-0"
|
|
>
|
|
{{ displayCount }}
|
|
</span>
|
|
<span v-else class="hidden" />
|
|
</template>
|