Update case

renderer/components/footer.tsx

@@ -0,0 +1,45 @@
+import { newsAtom, showNewsModalAtom } from "@/atoms/news-atom";
+import { translationAtom } from "@/atoms/translations-atom";
+import { useAtomValue, useSetAtom } from "jotai";
+import React from "react";
+
+function Footer() {
+  const setShowNewsModal = useSetAtom(showNewsModalAtom);
+  const news = useAtomValue(newsAtom);
+  const t = useAtomValue(translationAtom);
+
+  return (
+    <div className="p-2 text-center text-xs text-base-content/50">
+      {news && !news?.data?.dontShow && (
+        <button
+          className="badge badge-neutral mb-2"
+          onClick={() => setShowNewsModal(true)}
+        >
+          {t("FOOTER.NEWS_TITLE")}
+        </button>
+      )}
+      <p>
+        {t("FOOTER.COPYRIGHT")} {new Date().getFullYear()} -{" "}
+        <a
+          className="font-bold"
+          href="https://github.com/upscayl/upscayl"
+          target="_blank"
+        >
+          {t("TITLE")}
+        </a>
+      </p>
+      <p>
+        {t("FOOTER.TITLE")}
+        <a
+          href="https://github.com/upscayl"
+          className="font-bold"
+          target="_blank"
+        >
+          {t("FOOTER.LINK_TITLE")}
+        </a>
+      </p>
+    </div>
+  );
+}
+
+export default Footer;

renderer/components/header.tsx

@@ -0,0 +1,32 @@
+import { FEATURE_FLAGS } from "@common/feature-flags";
+import React from "react";
+import UpscaylSVGLogo from "@/components/icons/upscayl-logo-svg";
+import { useAtomValue } from "jotai";
+import { translationAtom } from "@/atoms/translations-atom";
+
+export default function Header({ version }: { version: string }) {
+  const t = useAtomValue(translationAtom);
+
+  return (
+    <a
+      href="https://github.com/upscayl/upscayl"
+      target="_blank"
+      className={`outline-none focus-visible:ring-2`}
+      data-tooltip-id="tooltip"
+      data-tooltip-content={t("HEADER.GITHUB_BUTTON_TITLE")}
+    >
+      <div className="flex items-center gap-3 px-5 py-5">
+        <UpscaylSVGLogo className="inline-block h-14 w-14" />
+        <div className="flex flex-col justify-center">
+          <h1 className="text-3xl font-bold">
+            {t("TITLE")}{" "}
+            <span className="text-xs">
+              {version} {FEATURE_FLAGS.APP_STORE_BUILD && "Mac"}
+            </span>
+          </h1>
+          <p className="">{t("HEADER.DESCRIPTION")}</p>
+        </div>
+      </div>
+    </a>
+  );
+}

renderer/components/tabs.tsx

@@ -0,0 +1,35 @@
+import { translationAtom } from "@/atoms/translations-atom";
+import { useAtomValue } from "jotai";
+import React from "react";
+
+type TabsProps = {
+  selectedTab: number;
+  setSelectedTab: (tab: number) => void;
+};
+
+const Tabs = ({ selectedTab, setSelectedTab }: TabsProps) => {
+  const t = useAtomValue(translationAtom);
+
+  return (
+    <div className="tabs-boxed tabs mx-auto mb-2">
+      <a
+        className={`tab ${selectedTab === 0 && "tab-active"}`}
+        onClick={() => {
+          setSelectedTab(0);
+        }}
+      >
+        {t("TITLE")}
+      </a>
+      <a
+        className={`tab ${selectedTab === 1 && "tab-active"}`}
+        onClick={() => {
+          setSelectedTab(1);
+        }}
+      >
+        {t("SETTINGS.TITLE")}
+      </a>
+    </div>
+  );
+};
+
+export default Tabs;