fix: add modal title icon prop

Signed-off-by: Innei <i@innei.in>

.vscode/settings.json

@@ -31,5 +31,8 @@
     { "rule": "simple-import-sort/*", "severity": "off" },
     { "rule": "prefer-const", "severity": "off" },
     { "rule": "unused-imports/no-unused-imports", "severity": "off" }
+  ],
+  "cSpell.words": [
+    "rsshub"
   ]
 }

src/renderer/src/components/ui/modal/stacked/modal.tsx

@@ -80,6 +80,8 @@ export const ModalInternal: Component<{
     modalContainerClassName,
     wrapper: Wrapper = Fragment,
     max,
+    icon,
+
   } = item
   const modalStyle = useMemo(() => ({ zIndex: 99 + index }), [index])
   const dismiss = useCallback(
@@ -157,9 +159,7 @@ export const ModalInternal: Component<{
         <Dialog.Root open onOpenChange={onClose}>
           <Dialog.Portal>
             <DialogOverlay zIndex={20} />
-            <Dialog.DialogTitle className="sr-only">
-              {title}
-            </Dialog.DialogTitle>
+            <Dialog.DialogTitle className="sr-only">{title}</Dialog.DialogTitle>
             <Dialog.Content asChild>
               <div
                 className={cn(
@@ -168,7 +168,10 @@ export const ModalInternal: Component<{
                 )}
                 onClick={clickOutsideToDismiss ? dismiss : undefined}
               >
-                <div className={cn("contents", modalClassName)} onClick={stopPropagation}>
+                <div
+                  className={cn("contents", modalClassName)}
+                  onClick={stopPropagation}
+                >
                   <CustomModalComponent>{finalChildren}</CustomModalComponent>
                 </div>
               </div>
@@ -209,8 +212,12 @@ export const ModalInternal: Component<{
                 onClick={stopPropagation}
               >
                 <div className="relative flex items-center">
-                  <Dialog.Title className="shrink-0 grow items-center px-4 py-1 text-lg font-semibold">
-                    {title}
+                  <Dialog.Title className="flex shrink-0 grow items-center gap-2 px-4 py-1 text-lg font-semibold">
+                    {icon && <span className="size-4">{icon}</span>}
+
+                    <span>
+                      {title}
+                    </span>
                   </Dialog.Title>
                   <Dialog.DialogClose className="center p-2" onClick={close}>
                     <i className="i-mgc-close-cute-re" />

src/renderer/src/components/ui/modal/stacked/types.tsx

@@ -4,6 +4,8 @@ import type { ModalContentPropsInternal } from "./context"
 
 export interface ModalProps {
   title: ReactNode
+  icon?: ReactNode
+
   CustomModalComponent?: FC<PropsWithChildren>
   content: FC<ModalContentPropsInternal>
   clickOutsideToDismiss?: boolean

src/renderer/src/modules/discover/recommendations.tsx

@@ -43,14 +43,13 @@ export function Recommendations() {
                         onClick={() => {
                           present({
                             content: () => <RecommendationContent route={rsshubPopular.data[key].routes[route]} />,
-                            title: (
-                              <div className="flex items-center">
-                                <SiteIcon
-                                  url={`https://${rsshubPopular.data[key].url}`}
-                                />
-                                {`${rsshubPopular.data[key].name} - ${rsshubPopular.data[key].routes[route].name}`}
-                              </div>
+                            icon: (
+                              <SiteIcon
+                                className="size-4"
+                                url={`https://${rsshubPopular.data[key].url}`}
+                              />
                             ),
+                            title: `${rsshubPopular.data[key].name} - ${rsshubPopular.data[key].routes[route].name}`,
                             clickOutsideToDismiss: true,
                           })
                         }}