Add functionality to pin sources

src/modules/source/components/SourceCard.tsx

@@ -14,6 +14,9 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import Stack from '@mui/material/Stack';
+import PushPinIcon from '@mui/icons-material/PushPin';
+import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined';
+import IconButton from '@mui/material/IconButton';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { SourceContentType } from '@/modules/source/screens/SourceMangas.tsx';
 import { GetSourcesListQuery } from '@/lib/graphql/generated/graphql.ts';
@@ -23,6 +26,10 @@ import { MUIUtil } from '@/lib/mui/MUI.util.ts';
 import { Sources } from '@/modules/source/services/Sources.ts';
 import { ListCardAvatar } from '@/modules/core/components/lists/cards/ListCardAvatar.tsx';
 import { ListCardContent } from '@/modules/core/components/lists/cards/ListCardContent.tsx';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
+import { createUpdateSourceMetadata, useGetSourceMetadata } from '@/modules/source/services/SourceMetadata.ts';
+import { makeToast } from '@/modules/core/utils/Toast.ts';
+import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 
 interface IProps {
     source: GetSourcesListQuery['sources']['nodes'][number];
@@ -43,8 +50,14 @@ export const SourceCard: React.FC<IProps> = (props: IProps) => {
         extension: { repo },
     } = source;
 
+    const { isPinned } = useGetSourceMetadata(source);
+
     const sourceName = Sources.isLocalSource(source) ? t('source.local_source.title') : name;
 
+    const updateSetting = createUpdateSourceMetadata(source, (e) =>
+        makeToast(t('global.error.label.failed_to_save_changes'), 'error', getErrorMessage(e)),
+    );
+
     return (
         <Card
             sx={{
@@ -91,6 +104,18 @@ export const SourceCard: React.FC<IProps> = (props: IProps) => {
                             {t('global.button.latest')}
                         </Button>
                     )}
+                    <CustomTooltip title={t(isPinned ? 'source.pin.remove' : 'source.pin.add')}>
+                        <IconButton
+                            {...MUIUtil.preventRippleProp()}
+                            onClick={(e) => {
+                                e.preventDefault();
+                                updateSetting('isPinned', !isPinned);
+                            }}
+                            color={isPinned ? 'primary' : 'inherit'}
+                        >
+                            {isPinned ? <PushPinIcon /> : <PushPinOutlinedIcon />}
+                        </IconButton>
+                    </CustomTooltip>
                 </ListCardContent>
             </CardActionArea>
         </Card>