garrettmills/commafeed
1
0
Fork 0
forked from Archives/Athou_commafeed
Code Pull Requests Activity

Cleaned up UI for Indicator

Browse Source
This commit is contained in:
Eshwar Tangirala
2025-05-12 16:30:06 -04:00
parent afc56c6053
commit d6910aa1e8
1 changed files with 21 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
commafeed-client/src/components/sidebar/UnreadCount.tsx
View File

@@ -1,60 +1,28 @@
import { Badge, Box, Flex, Tooltip } from "@mantine/core"; import { Badge, Indicator, Tooltip } from "@mantine/core"
import { Constants } from "app/constants"; import { Constants } from "app/constants"
import { tss } from "tss"; import { tss } from "tss"
const useStyles = tss.create(() => ({ const useStyles = tss.create(() => ({
badge: { badge: {
width: "3.2rem", width: "3.2rem",
cursor: "pointer", cursor: "pointer",
display: "flex", },
justifyContent: "flex-start", }))
alignItems: "center",
},
}));
export function UnreadCount(props: { export function UnreadCount(props: { unreadCount: number, newMessages: boolean | undefined }) {
unreadCount: number; const { classes } = useStyles()
newMessages?: boolean;
}) {
const { classes } = useStyles();
if (props.unreadCount <= 0) return null; if (props.unreadCount <= 0) return null
const count = props.unreadCount >= 10000 ? "10k+" : props.unreadCount; const count = props.unreadCount >= 10000 ? "10k+" : props.unreadCount
return ( return (
<Tooltip <Tooltip label={props.unreadCount} disabled={props.unreadCount === count} openDelay={Constants.tooltip.delay}>
label={props.unreadCount} <Indicator disabled={!props.newMessages} size={4} offset={10} position="top-start" color="orange" withBorder={false} zIndex={5}>
disabled={props.unreadCount === count} <Badge className={`${classes.badge} cf-badge`} variant="light" fullWidth>
openDelay={Constants.tooltip.delay} {count}
> </Badge>
<Badge className={`${classes.badge} cf-badge`} variant="light"> </Indicator>
<Flex align="center" justify="center" style={{ width: "100%" }}> </Tooltip>
{/* Dot wrapper: always renders, but conditionally visible */} )
<Box
style={{
width: 8,
display: "flex",
justifyContent: "center",
alignItems: "center",
marginRight: 4,
}}
>
{props.newMessages && (
<div
style={{
width: 5,
height: 5,
borderRadius: "50%",
backgroundColor: "orange",
}}
/>
)}
</Box>
<Box style={{ minWidth: "1.3rem", textAlign: "center" }}>{count}</Box>
</Flex>
</Badge>
</Tooltip>
);
} }