From c0499a5c7a278b54f987fe91db7679852f28eea2 Mon Sep 17 00:00:00 2001
From: misterkirill <misterkirill666@gmail.com>
Date: Fri, 4 Jul 2025 20:28:53 +0500
Subject: [PATCH] feat: ui improvements

---
 src/app/(editor)/page.tsx                |  6 +++---
 src/components/Header.tsx                |  2 +-
 src/components/{ui => }/HeaderButton.tsx |  0
 src/components/IconOnlyButton.tsx        | 14 ++++++++++++++
 src/components/{ui => }/LineInput.tsx    |  0
 src/components/LineInputGroup.tsx        | 23 +++++++++++++++--------
 src/components/ui/IconButton.tsx         |  9 ---------
 7 files changed, 33 insertions(+), 21 deletions(-)
 rename src/components/{ui => }/HeaderButton.tsx (100%)
 create mode 100644 src/components/IconOnlyButton.tsx
 rename src/components/{ui => }/LineInput.tsx (100%)
 delete mode 100644 src/components/ui/IconButton.tsx

diff --git a/src/app/(editor)/page.tsx b/src/app/(editor)/page.tsx
index 2431a93..903690c 100644
--- a/src/app/(editor)/page.tsx
+++ b/src/app/(editor)/page.tsx
@@ -3,11 +3,11 @@
 import { Plus } from "lucide-react";
 import { ChangeEvent } from "react";
 import LineInputGroup from "@/components/LineInputGroup";
-import IconButton from "@/components/ui/IconButton";
+import IconOnlyButton from "@/components/IconOnlyButton";
 
 export default function Home() {
   const saveChanges = (e: ChangeEvent) => {
-
+    // TODO
   };
 
   return (
@@ -15,7 +15,7 @@ export default function Home() {
       <div className="flex flex-col items-center px-4 max-w-2xl w-full gap-4">
         <input className="font-bold text-xl w-full text-center focus:outline-none" onChange={saveChanges} defaultValue="Song" />
         <LineInputGroup size={4} onChange={saveChanges} />
-        <IconButton icon={<Plus size={24} />} />
+        <IconOnlyButton icon={<Plus size={24} />} />
       </div>
     </div>
   );
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 61d8702..561c308 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { ArrowRightFromLine, CircleQuestionMark, List, Plus, UserRound } from "lucide-react";
-import HeaderButton from "./ui/HeaderButton";
+import HeaderButton from "./HeaderButton";
 
 export default function Header({ showToolbar = true }: { showToolbar?: boolean }) {
   return (
diff --git a/src/components/ui/HeaderButton.tsx b/src/components/HeaderButton.tsx
similarity index 100%
rename from src/components/ui/HeaderButton.tsx
rename to src/components/HeaderButton.tsx
diff --git a/src/components/IconOnlyButton.tsx b/src/components/IconOnlyButton.tsx
new file mode 100644
index 0000000..75bfe93
--- /dev/null
+++ b/src/components/IconOnlyButton.tsx
@@ -0,0 +1,14 @@
+import { ButtonHTMLAttributes, ReactNode } from "react";
+
+interface IconOnlyButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  icon: ReactNode;
+  alwaysOn?: boolean;
+}
+
+export default function IconOnlyButton({ icon, alwaysOn = false, ...props }: IconOnlyButtonProps) {
+  return (
+    <button className={`rounded-full p-2 border cursor-pointer ${alwaysOn ? "border-neutral-400 text-neutral-400" : "border-neutral-500 hover:border-neutral-400 text-neutral-500 hover:text-neutral-400"}`} {...props}>
+      {icon}
+    </button>
+  );
+}
diff --git a/src/components/ui/LineInput.tsx b/src/components/LineInput.tsx
similarity index 100%
rename from src/components/ui/LineInput.tsx
rename to src/components/LineInput.tsx
diff --git a/src/components/LineInputGroup.tsx b/src/components/LineInputGroup.tsx
index a25a2fb..cfe282e 100644
--- a/src/components/LineInputGroup.tsx
+++ b/src/components/LineInputGroup.tsx
@@ -1,7 +1,9 @@
-import { LockOpen, X } from "lucide-react";
-import LineInput from "./ui/LineInput";
-import IconButton from "./ui/IconButton";
-import { ChangeEvent } from "react";
+"use client";
+
+import { Lock, LockOpen, Menu, X } from "lucide-react";
+import LineInput from "./LineInput";
+import IconOnlyButton from "./IconOnlyButton";
+import { ChangeEvent, useState } from "react";
 
 export default function LineInputGroup({
   size = 4,
@@ -10,15 +12,20 @@ export default function LineInputGroup({
   size: number;
   onChange: (e: ChangeEvent) => void;
 }) {
+  const [locked, setLocked] = useState(false);
+
+  const switchLock = () => setLocked((locked) => !locked);
+
   return (
     <div className="flex gap-2 w-full">
       <div className="border-2 border-neutral-800 rounded-lg p-3 w-full">
-        <input type="text" placeholder="tag line" className="w-full focus:outline-none" />
-        {[...Array(size)].map((_, i) => <LineInput onChange={onChange} key={i} />)}
+        <input type="text" placeholder="enter tag..." className="w-full focus:outline-none" disabled={locked} />
+        {[...Array(size)].map((_, i) => <LineInput key={i} onChange={onChange} disabled={locked} />)}
       </div>
       <div className="flex flex-col gap-3">
-        <IconButton icon={<X size={18} />} />
-        <IconButton icon={<LockOpen size={18} />} />
+        <IconOnlyButton icon={<X size={18} />} />
+        <IconOnlyButton alwaysOn={locked} icon={locked ? <Lock size={18} /> : <LockOpen size={18} />} onClick={switchLock} />
+        <IconOnlyButton icon={<Menu size={18} />} />
       </div>
     </div>
   );
diff --git a/src/components/ui/IconButton.tsx b/src/components/ui/IconButton.tsx
deleted file mode 100644
index dabb1c3..0000000
--- a/src/components/ui/IconButton.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { ReactNode } from "react";
-
-export default function IconButton({ icon }: { icon: ReactNode }) {
-  return (
-    <button className="rounded-full p-2 border cursor-pointer border-neutral-500 hover:border-neutral-400 text-neutral-500 hover:text-neutral-400">
-      {icon}
-    </button>
-  );
-}