Added tip button to bottom of page

client/src/App.tsx

@@ -2,7 +2,7 @@ import { Refine } from "@refinedev/core";
 import { RefineKbar, RefineKbarProvider } from "@refinedev/kbar";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
-import { ErrorComponent, ThemedLayoutV2, ThemedSiderV2, ThemedTitleV2 } from "@refinedev/antd";
+import { ErrorComponent } from "@refinedev/antd";
 import "@refinedev/antd/dist/reset.css";
 
 import routerBindings, {
@@ -13,19 +13,15 @@ import routerBindings, {
 import dataProvider from "./components/dataProvider";
 import { useTranslation } from "react-i18next";
 import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";
-import { Header } from "./components/header";
 import { ColorModeContextProvider } from "./contexts/color-mode";
-// @ts-expect-error: svg file
-import Logo from "./icon.svg?react";
 import { FileOutlined, HighlightOutlined, UserOutlined } from "@ant-design/icons";
 import { ConfigProvider } from "antd";
-import { Footer } from "antd/es/layout/layout";
-import { Version } from "./components/version";
 import React from "react";
 import { Locale } from "antd/es/locale";
 import { languages } from "./i18n";
 import loadable from "@loadable/component";
 import SpoolmanNotificationProvider from "./components/notificationProvider";
+import { SpoolmanLayout } from "./components/layout";
 
 interface PageProps {
   resource: "spools" | "filaments" | "vendors";
@@ -135,24 +131,9 @@ function App() {
               <Routes>
                 <Route
                   element={
-                    <ThemedLayoutV2
-                      Header={() => <Header sticky />}
-                      Sider={() => (
-                        <ThemedSiderV2
-                          fixed
-                          Title={({ collapsed }) => (
-                            <ThemedTitleV2 collapsed={collapsed} text="Spoolman" icon={<Logo />} />
-                          )}
-                        />
-                      )}
-                      Footer={() => (
-                        <Footer style={{ textAlign: "center" }}>
-                          Spoolman - {t("version")} <Version />
-                        </Footer>
-                      )}
-                    >
+                    <SpoolmanLayout>
                       <Outlet />
-                    </ThemedLayoutV2>
+                    </SpoolmanLayout>
                   }
                 >
                   <Route index element={<NavigateToResource resource="spool" />} />

client/src/components/layout.tsx

@@ -0,0 +1,67 @@
+import { ThemedLayoutV2, ThemedSiderV2, ThemedTitleV2 } from "@refinedev/antd";
+import { Header } from "./header";
+import { Footer } from "antd/es/layout/layout";
+import { Version } from "./version";
+import { Button } from "antd";
+// @ts-expect-error: svg file
+import Logo from "../icon.svg?react";
+import { useTranslate } from "@refinedev/core";
+
+const SpoolmanFooter: React.FC = () => {
+  const t = useTranslate();
+
+  return (
+    <Footer style={{ textAlign: "center" }}>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          flexDirection: "row",
+          gap: "2em",
+        }}
+      >
+        <div>
+          {t("version")} <Version />
+        </div>
+        <div>
+          <Button
+            icon={
+              <img
+                src="./kofi_s_logo_nolabel.png"
+                style={{
+                  height: "1.6em",
+                }}
+              />
+            }
+            type="text"
+            ghost
+            href="https://ko-fi.com/donkie"
+            target="_blank"
+          >
+            Tip me on Ko-fi
+          </Button>
+        </div>
+      </div>
+    </Footer>
+  );
+};
+
+interface SpoolmanLayoutProps {
+  children: React.ReactNode;
+}
+
+export const SpoolmanLayout: React.FC<SpoolmanLayoutProps> = ({ children }) => (
+  <ThemedLayoutV2
+    Header={() => <Header sticky />}
+    Sider={() => (
+      <ThemedSiderV2
+        fixed
+        Title={({ collapsed }) => <ThemedTitleV2 collapsed={collapsed} text="Spoolman" icon={<Logo />} />}
+      />
+    )}
+    Footer={() => <SpoolmanFooter />}
+  >
+    {children}
+  </ThemedLayoutV2>
+);