added beta banner

packages/app/config/index.js

@@ -37,7 +37,19 @@ export default {
         },
         {
             label: "Support this project",
-            url: "https://www.paypal.com/donate/?hosted_button_id=S4TWMAN79KC76"
+            url: "https://ko-fi.com/comty"
+        }
+    ],
+    donatives: [
+        {
+            name: "PayPal",
+            href: "https://www.paypal.com/donate/?hosted_button_id=S4TWMAN79KC76",
+            icon: "https://raw.githubusercontent.com/andreostrovsky/donate-with-paypal/master/dark.svg"
+        },
+        {
+            name: "Ko-Fi",
+            href: "https://ko-fi.com/comty",
+            icon: "https://cdn.ko-fi.com/cdn/kofi3.png?v=3",
         }
     ],
     logo: {

packages/app/src/components/BetaBanner/index.jsx

@@ -0,0 +1,65 @@
+import React from "react"
+import { Alert, Button } from "antd"
+import { Translation } from "react-i18next"
+
+import DonativeSelector from "@components/DonativeSelector"
+
+import Config from "@config"
+
+import "./index.less"
+
+const BetaBanner = () => {
+    const [closed, setClosed] = React.useState(false)
+
+    function openDonativeSelector() {
+        setClosed(true)
+
+        app.layout.modal.open("donate", DonativeSelector, {
+            closable: true,
+        })
+    }
+
+    function setAsViewed() {
+        localStorage.setItem("welcome_beta", true)
+        setClosed(true)
+    }
+
+    if (localStorage.getItem("welcome_beta") === true || closed) {
+        return null
+    }
+
+    return <div className="beta-banner-wrapper">
+        <Alert
+            closable
+            type="warning"
+            message={<div className="welcome-beta-banner">
+                <div className="welcome-beta-banner-title">
+                    <h3>🎉 <Translation>{t => t("Welcome to")}</Translation> {Config.app.siteName} Beta</h3>
+                </div>
+
+                <div className="welcome-beta-banner-content">
+                    <p><Translation>{t => t("We're glad to have you here, we hope you enjoy the first public beta.")}</Translation></p>
+                    <p><Translation>{t => t("You can help us continue to improve the platform by supporting us with donations.")}</Translation></p>
+                </div>
+
+                <div className="welcome-beta-banner-actions">
+                    <Button
+                        type="primary"
+                        onClick={openDonativeSelector}
+                    >
+                        <Translation>{t => t("Donate")}</Translation>
+                    </Button>
+
+                    <Button
+                        type="default"
+                        onClick={setAsViewed}
+                    >
+                        <Translation>{t => t("Got it")}</Translation>
+                    </Button>
+                </div>
+            </div>}
+        />
+    </div>
+}
+
+export default BetaBanner

packages/app/src/components/BetaBanner/index.less

@@ -0,0 +1,36 @@
+.beta-banner-wrapper {
+    position: fixed;
+
+    bottom: 0;
+    right: 0;
+
+    z-index: 1000;
+
+    width: fit-content;
+
+    display: flex;
+    flex-direction: column;
+
+    align-items: center;
+    justify-content: center;
+
+    padding: 10px;
+
+    .welcome-beta-banner {
+        display: flex;
+        flex-direction: column;
+
+        gap: 10px;
+
+        .welcome-beta-banner-title {}
+
+        .welcome-beta-banner-content {}
+
+        .welcome-beta-banner-actions {
+            display: inline-flex;
+            flex-direction: row;
+
+            gap: 10px;
+        }
+    }
+}

packages/app/src/components/DonativeSelector/index.jsx

@@ -0,0 +1,35 @@
+import React from "react"
+import { Translation } from "react-i18next"
+
+import Config from "@config"
+
+import "./index.less"
+
+const DonativeSelector = () => {
+    return <div className="donative-selector">
+        <h2>✨<Translation>{t => t("Support us to continue improving ")}</Translation>{Config.app.siteName}!✨</h2>
+        <p><Translation>{t => t("Your contribution will help us continue to develop new features and improve our platform experience.")}</Translation></p>
+        <p><Translation>{t => t("Every donation, no matter how small, makes a difference and allows us to continue building a stronger community.")}</Translation></p>
+
+        <div className="donative-selector_channels">
+            {
+                Config.donatives.map((channel) => {
+                    return <a
+                        key={channel.name}
+                        href={channel.href}
+                        target="_blank"
+                        rel="noreferrer"
+                    >
+                        <img
+                            src={channel.icon}
+                            alt={channel.name}
+                        />
+                    </a>
+                })
+            }
+        </div>
+    </div>
+}
+
+
+export default DonativeSelector

packages/app/src/components/DonativeSelector/index.less

@@ -0,0 +1,21 @@
+.donative-selector {
+    display: flex;
+    flex-direction: column;
+
+    gap: 20px;
+
+    .donative-selector_channels {
+        display: flex;
+        flex-direction: row;
+
+        align-items: center;
+        justify-content: center;
+
+        gap: 30px;
+
+        img {
+            width: fit-content;
+            height: 40px;
+        }
+    }
+}

packages/app/src/layouts/default/index.jsx

@@ -1,12 +1,14 @@
 import React from "react"
 import classnames from "classnames"
-import { Layout } from "antd"
+import { Layout, Alert } from "antd"
 
 import Sidebar from "@layouts/components/sidebar"
 import ToolsBar from "@layouts/components/toolsBar"
 import Header from "@layouts/components/header"
 import Modals from "@layouts/components/modals"
 
+import BetaBanner from "@components/BetaBanner"
+
 // mobile components
 import { DraggableDrawerController } from "@layouts/components/draggableDrawer"
 import BottomBar from "@layouts/components/@mobile/bottomBar"
@@ -36,8 +38,11 @@ const DesktopLayout = (props) => {
                     props.children && React.cloneElement(props.children, props)
                 }
             </Layout.Content>
+
             <ToolsBar />
         </Layout>
+
+        <BetaBanner />
     </>
 }