From 9c94c35464cf25685a91a9ed0cf13be9755aa863 Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Sat, 8 Feb 2025 14:26:51 +0000
Subject: [PATCH] refactor: remove "more" menu in menubar

---
 src/components/{home => }/ThemeIcon.tsx | 16 +++++++++++-----
 src/components/menubar/MoreMenu.tsx     | 15 ---------------
 src/components/menubar/index.tsx        | 13 ++++++++-----
 src/pages/IndexPage.tsx                 |  6 +++---
 4 files changed, 22 insertions(+), 28 deletions(-)
 rename src/components/{home => }/ThemeIcon.tsx (61%)
 delete mode 100644 src/components/menubar/MoreMenu.tsx

diff --git a/src/components/home/ThemeIcon.tsx b/src/components/ThemeIcon.tsx
similarity index 61%
rename from src/components/home/ThemeIcon.tsx
rename to src/components/ThemeIcon.tsx
index 1b5710f..09b38fb 100644
--- a/src/components/home/ThemeIcon.tsx
+++ b/src/components/ThemeIcon.tsx
@@ -2,7 +2,11 @@ import { useContext } from "react";
 import { ThemeContext } from "@/context/Theme";
 import { MoonIcon, SunIcon, SunMoonIcon } from "lucide-react";
 
-function ThemeIcon() {
+interface Props {
+	inApp?: boolean;
+}
+
+function ThemeIcon({ inApp }: Props) {
 	const { theme, setTheme } = useContext(ThemeContext);
 
 	const onClick = () => {
@@ -11,18 +15,20 @@ function ThemeIcon() {
 	};
 
 	const getIcon = () => {
+		const size = inApp ? 24 : 30;
+
 		switch (theme) {
 			case "light":
-				return <SunIcon size={30} />;
+				return <SunIcon size={size} />;
 			case "dark":
-				return <MoonIcon size={30} />;
+				return <MoonIcon size={size} />;
 			case "system":
-				return <SunMoonIcon size={30} />;
+				return <SunMoonIcon size={size} />;
 		}
 	};
 
 	return (
-		<button onClick={onClick} title={theme} className="text-white">
+		<button onClick={onClick} title={theme} className={`text-white ${inApp ? "text-black" : ""}`}>
 			{getIcon()}
 		</button>
 	);
diff --git a/src/components/menubar/MoreMenu.tsx b/src/components/menubar/MoreMenu.tsx
deleted file mode 100644
index 798bbb2..0000000
--- a/src/components/menubar/MoreMenu.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { MenubarContent, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar";
-import ThemeChanger from "./ThemeChanger";
-
-function MoreMenu() {
-	return (
-		<MenubarMenu>
-			<MenubarTrigger>More</MenubarTrigger>
-			<MenubarContent>
-				<ThemeChanger />
-			</MenubarContent>
-		</MenubarMenu>
-	);
-}
-
-export default MoreMenu;
diff --git a/src/components/menubar/index.tsx b/src/components/menubar/index.tsx
index 963d985..9f17e88 100644
--- a/src/components/menubar/index.tsx
+++ b/src/components/menubar/index.tsx
@@ -10,7 +10,8 @@ import FileMenu from "./FileMenu";
 import EditMenu from "./EditMenu";
 import SelectMenu from "./SelectMenu";
 import ViewMenu from "./ViewMenu";
-import MoreMenu from "./MoreMenu";
+
+import ThemeIcon from "@/components/ThemeIcon";
 
 import BlockmaticIcon from "@/assets/blockmatic-icon-colored.svg?react";
 import BlockmaticText from "@/assets/blockmatic-text-colored.svg?react";
@@ -31,11 +32,13 @@ function Menubar() {
 				<EditMenu />
 				<SelectMenu />
 				<ViewMenu />
-				<MoreMenu />
 
-				<a href="https://github.com/trafficlunar/blockmatic" className="w-6 absolute right-2">
-					<GithubIcon fill={isDark ? "white" : "black"} />
-				</a>
+				<div className="absolute right-3 flex items-center gap-1">
+					<ThemeIcon inApp={true} />
+					<a href="https://github.com/trafficlunar/blockmatic" className="w-5">
+						<GithubIcon fill={isDark ? "white" : "black"} />
+					</a>
+				</div>
 			</UIMenubar>
 		</DialogProvider>
 	);
diff --git a/src/pages/IndexPage.tsx b/src/pages/IndexPage.tsx
index c4a14fb..5abdd0b 100644
--- a/src/pages/IndexPage.tsx
+++ b/src/pages/IndexPage.tsx
@@ -7,7 +7,7 @@ import { ThemeContext } from "@/context/Theme";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 
-import ThemeIcon from "@/components/home/ThemeIcon";
+import ThemeIcon from "@/components/ThemeIcon";
 import ImageComparison from "@/components/home/ImageComparison";
 
 import BlockmaticLogo from "@/assets/blockmatic.svg?react";
@@ -22,12 +22,12 @@ function IndexPage() {
 			<header className="w-full flex justify-evenly p-8 z-10">
 				<BlockmaticLogo className="h-16 w-max" fill={"white"} />
 
-				<div className="flex items-center gap-2">
+				<div className="flex items-center gap-1">
 					<Button className="bg-white text-black hover:bg-zinc-50/90 mr-4" asChild>
 						<Link to={{ pathname: "/app" }}>Editor</Link>
 					</Button>
 
-					<a href="https://github.com/trafficlunar/blockmatic" className="w-8">
+					<a href="https://github.com/trafficlunar/blockmatic" className="w-7">
 						<GithubIcon fill="white" />
 					</a>
 					<ThemeIcon />