add by me coffee

lama_cleaner/app/src/components/CoffeeIcon/CoffeeIcon.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react'
+import { useRecoilState } from 'recoil'
+import { Coffee } from 'react-feather'
+import { settingState } from '../../store/Atoms'
+import Button from '../shared/Button'
+import Modal from '../shared/Modal'
+
+const CoffeeIcon = () => {
+  const [show, setShow] = useState(false)
+  const onClick = () => {
+    setShow(true)
+  }
+
+  return (
+    <div>
+      <Button
+        onClick={onClick}
+        toolTip="Buy me a coffee"
+        tooltipPosition="bottom"
+        style={{ border: 0 }}
+        icon={<Coffee />}
+      />
+      <Modal
+        onClose={() => setShow(false)}
+        title="Buy Me a Coffee"
+        className="modal-setting"
+        show={show}
+        showCloseIcon={false}
+      >
+        <h4 style={{ lineHeight: '24px' }}>
+          Hi there, If you found my project is useful, and want to help keep it
+          alive please consider donating! Thank you for your support!
+        </h4>
+        <div
+          style={{
+            display: 'flex',
+            width: '100%',
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+            gap: '12px',
+          }}
+        >
+          <Button onClick={() => setShow(false)}> No thanks </Button>
+          <Button border onClick={() => setShow(false)}>
+            <a
+              href="https://ko-fi.com/Z8Z1CZJGY"
+              target="_blank"
+              rel="noreferrer"
+              style={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                gap: '8px',
+              }}
+            >
+              Sure <Coffee />
+            </a>
+          </Button>
+        </div>
+      </Modal>
+    </div>
+  )
+}
+
+export default CoffeeIcon

lama_cleaner/app/src/components/Header/Header.tsx

@@ -8,6 +8,7 @@ import useResolution from '../../hooks/useResolution'
 import { ThemeChanger } from './ThemeChanger'
 import SettingIcon from '../Settings/SettingIcon'
 import PromptInput from './PromptInput'
+import CoffeeIcon from '../CoffeeIcon/CoffeeIcon'
 
 const Header = () => {
   const [file, setFile] = useRecoilState(fileState)
@@ -42,13 +43,12 @@ const Header = () => {
         {isSD && file ? <PromptInput /> : <></>}
 
         <div className="header-icons-wrapper">
+          <CoffeeIcon />
           <ThemeChanger />
-          {file && (
-            <div className="header-icons">
-              <Shortcuts />
-              <SettingIcon />
-            </div>
-          )}
+          <div className="header-icons">
+            <Shortcuts />
+            <SettingIcon />
+          </div>
         </div>
       </header>
     )

lama_cleaner/app/src/components/Settings/HDSettingBlock.tsx

@@ -18,7 +18,7 @@ export enum LDMSampler {
 
 function HDSettingBlock() {
   const [hdSettings, setHDSettings] = useRecoilState(hdSettingsState)
-  if (!hdSettings.enabled) {
+  if (!hdSettings?.enabled) {
     return <></>
   }
 

lama_cleaner/app/src/components/shared/Modal.tsx

@@ -10,6 +10,7 @@ export interface ModalProps {
   children?: ReactNode
   onClose?: () => void
   title: string
+  showCloseIcon?: boolean
   className?: string
 }
 
@@ -17,7 +18,7 @@ const Modal = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Root>,
   ModalProps
 >((props, forwardedRef) => {
-  const { show, children, onClose, className, title } = props
+  const { show, children, onClose, className, title, showCloseIcon } = props
   const [_, setAppState] = useRecoilState(appState)
 
   const onOpenChange = (open: boolean) => {
@@ -39,7 +40,11 @@ const Modal = React.forwardRef<
         >
           <div className="modal-header">
             <DialogPrimitive.Title>{title}</DialogPrimitive.Title>
-            <Button icon={<XIcon />} onClick={onClose} />
+            {showCloseIcon ? (
+              <Button icon={<XIcon />} onClick={onClose} />
+            ) : (
+              <></>
+            )}
           </div>
           {children}
         </DialogPrimitive.Content>
@@ -48,4 +53,8 @@ const Modal = React.forwardRef<
   )
 })
 
+Modal.defaultProps = {
+  showCloseIcon: true,
+}
+
 export default Modal

lama_cleaner/app/src/components/shared/Tooltip.scss

@@ -14,7 +14,7 @@ $tooltip-margin: 1.5rem;
     animation-name: opacityReveal;
     animation-duration: 0.2s;
     animation-fill-mode: forwards;
-    animation-delay: 1s;
+    animation-delay: 0.2s;
     box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
       hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
   }