marcel/omni-tools
1
0
Fork 0
mirror of https://github.com/iib0011/omni-tools.git synced 2025-09-21 06:59:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: refine bookmarking

Browse Source
This commit is contained in:
Ibrahima G. Coulibaly
2025-07-15 14:01:38 +01:00
parent afc61e6f4c
commit 1031db7ed2
4 changed files with 47 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/Hero.tsx
View File

@@ -23,6 +23,7 @@ import {
isBookmarked,
toggleBookmarked
} from '@utils/bookmark';
import IconButton from '@mui/material/IconButton';
const GroupHeader = styled('div')(({ theme }) => ({
position: 'sticky',
@@ -167,24 +168,27 @@ export default function Hero() {
</Typography>
</Box>
</Stack>
<Icon
fontSize={20}
<IconButton
onClick={(e) => {
e.stopPropagation();
toggleBookmarked(option.path);
setBookmarkedToolPaths(getBookmarkedToolPaths());
}}
color={
isBookmarked(option.path)
? theme.palette.primary.main
: theme.palette.grey[500]
}
icon={
isBookmarked(option.path)
? 'mdi:bookmark'
: 'mdi:bookmark-plus-outline'
}
/>
>
<Icon
fontSize={20}
color={
isBookmarked(option.path)
? theme.palette.primary.main
: theme.palette.grey[500]
}
icon={
isBookmarked(option.path)
? 'mdi:bookmark'
: 'mdi:bookmark-plus-outline'
}
/>
</IconButton>
</Stack>
</Box>
)}
@@ -194,9 +198,6 @@ export default function Hero() {
}
}}
/>
{bookmarkedToolPaths.length > 0 && (
<Typography fontSize={{ xs: 20, md: 25 }}>Bookmarked tools:</Typography>
)}
<Grid container spacing={2} mt={2}>
{displayedTools.map((tool) => (
<Grid
@@ -223,23 +224,28 @@ export default function Hero() {
cursor: 'pointer',
'&:hover': {
backgroundColor: 'background.hover'
}
},
height: '100%'
}}
>
<Stack direction={'row'} spacing={2} alignItems={'center'}>
<Typography>{tool.label}</Typography>
<Stack direction={'row'} spacing={1} alignItems={'center'}>
<Typography textAlign={'center'}>{tool.label}</Typography>
{bookmarkedToolPaths.length > 0 && (
<Icon
icon={'mdi:close'}
color={theme.palette.grey[500]}
fontSize={20}
<IconButton
onClick={(e) => {
e.stopPropagation();
const path = tool.url.substring(1);
toggleBookmarked(path);
setBookmarkedToolPaths(getBookmarkedToolPaths());
}}
/>
size={'small'}
>
<Icon
icon={'mdi:close'}
color={theme.palette.grey[500]}
fontSize={15}
/>
</IconButton>
)}
</Stack>
</Box>