Merge branch 'feature/song-search' of github.com:OpenNBS/NoteBlockWorld into feature/song-search

Author: tomast1337

apps/frontend/src/app/(content)/search-song/page.tsx renamed to apps/frontend/src/app/(content)/search/page.tsx

@@ -13,7 +13,7 @@ import { checkLogin, getUserData } from '@web/modules/auth/features/auth.utils';
 import { BlockTab } from './BlockTab';
 import { NavLinks } from './NavLinks';
 import { RandomSongButton } from './RandomSongButton';
-import { SearchButton } from './SearchButton';
+import { SearchBar } from './SearchBar';
 
 export async function Header() {
   let isLogged;
@@ -34,22 +34,6 @@ export async function Header() {
     <header className='fixed w-[calc(100vw_-_16px)] h-14 flex flex-row justify-center items-center bg-zinc-900 border-b border-zinc-700 py-2 z-10'>
       {/* Navbar */}
       <nav className='w-full flex flex-row justify-between items-center gap-8 md:gap-12 max-w-screen-xl px-6 sm:px-10'>
-        {/* Logo */}
-        <div className='hidden lg:block flex-0 text-lg text-nowrap'>
-          <picture className='w-full h-auto'>
-            <Link href='/'>
-              <Image
-                unoptimized
-                src='/nbw-logo-flat.png'
-                alt='Note Block World logo'
-                className=''
-                width={300}
-                height={64}
-              />
-            </Link>
-          </picture>
-        </div>
-
         {/* Icon */}
         <div className='flex-0 flex justify-start lg:justify-center min-w-fit'>
           <Link href='/'>
@@ -68,6 +52,11 @@ export async function Header() {
           </Link>
         </div>
 
+        {/* Search bar */}
+        <div className='flex-1 max-w-sm'>
+          <SearchBar />
+        </div>
+
         {/* Info pages */}
         <div className='flex flex-1 justify-center gap-1 h-8 text-center'>
           <BlockTab
@@ -94,7 +83,6 @@ export async function Header() {
             label='About'
             className='bg-cyan-700 after:bg-cyan-900 before:bg-cyan-950'
           />
-          <SearchButton />
           <RandomSongButton />
         </div>
 

apps/frontend/src/modules/shared/components/layout/Header.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+
+export function SearchBar() {
+  const router = useRouter();
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const handleSearch = () => {
+    if (searchQuery.trim()) {
+      router.push(`/search?q=${encodeURIComponent(searchQuery.trim())}`);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      handleSearch();
+    }
+  };
+
+  return (
+    <div className='flex'>
+      <input
+        type='text'
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder='Search songs...'
+        className='flex-1 px-3 py-2 bg-transparent border border-zinc-700 rounded-l-full text-sm text-white placeholder-zinc-500 focus:outline-none focus:border-blue-500 focus:border-transparent'
+      />
+      <button
+        onClick={handleSearch}
+        disabled={!searchQuery.trim()}
+        className='px-4 py-2 pl-3 bg-zinc-700 hover:bg-zinc-600 text-white rounded-r-full transition-colors duration-200 flex items-center gap-2'
+        aria-label='Search'
+      >
+        <FontAwesomeIcon icon={faMagnifyingGlass} />
+      </button>
+    </div>
+  );
+}

apps/frontend/src/modules/shared/components/layout/SearchBar.tsx

@@ -15,7 +15,7 @@
         "eslint": "^9.36.0",
         "eslint-plugin-import": "^2.32.0",
         "eslint-plugin-mdx": "^3.6.2",
-        "eslint-plugin-unused-imports": "^2.0.0",
+        "eslint-plugin-unused-imports": "^4.2.0",
         "globals": "^16.4.0",
         "husky": "^9.1.7",
         "lint-staged": "^16.2.3",
@@ -1620,9 +1620,7 @@
 
     "eslint-plugin-react-hooks": ["[email protected]", "", { "peerDependencies": { "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0" } }, "sha512-AZYbMo/NW9chdL7vk6HQzQhT+PvTAEVqWk9ziruUoW2kAOcN5qNyelv70e0F1VNQAbvutOC9oc+xfWycI9FxDw=="],
 
-    "eslint-plugin-unused-imports": ["[email protected]", "", { "dependencies": { "eslint-rule-composer": "^0.3.0" }, "peerDependencies": { "@typescript-eslint/eslint-plugin": "^5.0.0", "eslint": "^8.0.0" }, "optionalPeers": ["@typescript-eslint/eslint-plugin"] }, "sha512-3APeS/tQlTrFa167ThtP0Zm0vctjr4M44HMpeg1P4bK6wItarumq0Ma82xorMKdFsWpphQBlRPzw/pxiVELX1A=="],
-
-    "eslint-rule-composer": ["[email protected]", "", {}, "sha512-bt+Sh8CtDmn2OajxvNO+BX7Wn4CIWMpTRm3MaiKPCQcnnlm0CS2mhui6QaoeQugs+3Kj2ESKEEGJUdVafwhiCg=="],
+    "eslint-plugin-unused-imports": ["[email protected]", "", { "peerDependencies": { "@typescript-eslint/eslint-plugin": "^8.0.0-0 || ^7.0.0 || ^6.0.0 || ^5.0.0", "eslint": "^9.0.0 || ^8.0.0" }, "optionalPeers": ["@typescript-eslint/eslint-plugin"] }, "sha512-hLbJ2/wnjKq4kGA9AUaExVFIbNzyxYdVo49QZmKCnhk5pc9wcYRbfgLHvWJ8tnsdcseGhoUAddm9gn/lt+d74w=="],
 
     "eslint-scope": ["[email protected]", "", { "dependencies": { "esrecurse": "^4.3.0", "estraverse": "^5.2.0" } }, "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg=="],
 

apps/frontend/src/modules/shared/components/layout/SearchButton.tsx

@@ -4,6 +4,7 @@ import eslint from '@eslint/js';
 import { defineConfig } from 'eslint/config';
 import importPlugin from 'eslint-plugin-import';
 import react from 'eslint-plugin-react';
+import unusedImports from 'eslint-plugin-unused-imports';
 import globals from 'globals';
 import tseslint from 'typescript-eslint';
 
@@ -34,6 +35,7 @@ export default defineConfig(
     },
     plugins: {
       import: importPlugin,
+      'unused-imports': unusedImports,
     },
     settings: {
       'import/resolver': {
@@ -57,16 +59,7 @@ export default defineConfig(
       '@typescript-eslint/no-explicit-any': 'warn',
       '@typescript-eslint/no-require-imports': 'warn',
       '@typescript-eslint/ban-ts-comment': 'warn',
-      '@typescript-eslint/no-unused-vars': [
-        'warn',
-        {
-          vars: 'all',
-          varsIgnorePattern: '^_',
-          args: 'after-used',
-          argsIgnorePattern: '^_',
-          caughtErrors: 'none', // Allow unused error variables in catch blocks
-        },
-      ],
+      '@typescript-eslint/no-unused-vars': 'off', // Handled by unused-imports plugin
       'lines-between-class-members': [
         'warn',
         'always',
@@ -98,6 +91,17 @@ export default defineConfig(
       ],
       'import/newline-after-import': 'warn',
       'import/no-duplicates': 'warn',
+      'unused-imports/no-unused-imports': 'warn',
+      'unused-imports/no-unused-vars': [
+        'warn',
+        {
+          vars: 'all',
+          varsIgnorePattern: '^_',
+          args: 'after-used',
+          argsIgnorePattern: '^_',
+          caughtErrors: 'none', // Allow unused error variables in catch blocks
+        },
+      ],
     },
   },
 

bun.lock

@@ -79,7 +79,7 @@
     "eslint": "^9.36.0",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-mdx": "^3.6.2",
-    "eslint-plugin-unused-imports": "^2.0.0",
+    "eslint-plugin-unused-imports": "^4.2.0",
     "globals": "^16.4.0",
     "husky": "^9.1.7",
     "lint-staged": "^16.2.3",