File size: 3,115 Bytes
adc1e1c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | /*
Copyright (c) 2025 Tethys Plex
This file is part of Veloera.
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import React, { useEffect, useState } from 'react';
import { Badge, Button, Tooltip } from '@douyinfe/semi-ui';
import { IconMail } from '@douyinfe/semi-icons';
import { useNavigate } from 'react-router-dom';
import { API } from '../helpers';
import { useTranslation } from 'react-i18next';
const InboxIcon = () => {
const { t } = useTranslation();
const navigate = useNavigate();
const [unreadCount, setUnreadCount] = useState(0);
const [loading, setLoading] = useState(false);
const loadUnreadCount = async () => {
if (loading) return;
setLoading(true);
try {
const res = await API.get('/api/user/messages/unread_count');
const { success, data } = res.data;
if (success) {
setUnreadCount(data.unread_count || 0);
}
} catch (error) {
// Silently fail - unread count is not critical
console.error('Failed to load unread count:', error);
} finally {
setLoading(false);
}
};
const handleClick = () => {
navigate('/app/inbox');
};
useEffect(() => {
loadUnreadCount();
// Poll for unread count every 30 seconds
const interval = setInterval(loadUnreadCount, 30000);
return () => clearInterval(interval);
}, []);
return (
<Tooltip content={t('收件箱')} position="bottom">
<div style={{ position: 'relative', display: 'inline-block' }}>
<Button
icon={<IconMail />}
theme="borderless"
type="tertiary"
onClick={handleClick}
style={{
color: 'var(--semi-color-text-2)',
fontSize: '16px',
padding: '8px',
minWidth: 'auto',
height: 'auto'
}}
/>
{unreadCount > 0 && (
<Badge
count={unreadCount > 99 ? '99+' : unreadCount}
style={{
position: 'absolute',
top: '-2px',
right: '-2px',
fontSize: '10px',
minWidth: '16px',
height: '16px',
lineHeight: '16px',
padding: '0 4px',
borderRadius: '8px',
backgroundColor: 'var(--semi-color-danger)',
color: 'white',
border: '1px solid var(--semi-color-bg-1)',
boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)'
}}
/>
)}
</div>
</Tooltip>
);
};
export default InboxIcon; |