Refactor code structure and remove redundant functions for improved readability and maintainability

backend/uvicorn.log

@@ -0,0 +1,12 @@
+INFO:     Started server process [20979]
+INFO:     Waiting for application startup.
+INFO:     Application startup complete.
+INFO:     Uvicorn running on http://0.0.0.0:8000 (Press CTRL+C to quit)
+INFO:     192.168.2.244:65488 - "GET /video-paths/ HTTP/1.1" 200 OK
+INFO:     192.168.2.244:65488 - "GET /video-paths/ HTTP/1.1" 200 OK
+INFO:     192.168.2.244:65489 - "GET /videos/ HTTP/1.1" 200 OK
+INFO:     192.168.2.244:65488 - "GET /videos/ HTTP/1.1" 200 OK
+INFO:     192.168.2.244:49178 - "POST /video-paths/?path=%2Fmnt%2Fdata1%2FPorn%2Ftwitter HTTP/1.1" 200 OK
+INFO:     192.168.2.244:49178 - "GET /video-paths/ HTTP/1.1" 200 OK
+INFO:     192.168.2.244:49178 - "POST /scan-videos/ HTTP/1.1" 200 OK
+INFO:     192.168.2.244:49178 - "GET /videos/ HTTP/1.1" 200 OK

frontend/src/App.css

@@ -24,22 +24,7 @@
   margin-left: 80px; /* Same as collapsed sidebar width */
 }
 
-.app-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: white;
-  padding: 10px 20px;
-  border-radius: 8px;
-  margin-bottom: 20px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
 
-.app-header h1 {
-  margin: 0;
-  font-size: 24px;
-  color: #333;
-}
 
 /* Sidebar Styles */
 .path-section {
@@ -100,9 +85,10 @@
   word-break: break-all;
 }
 
-/* Scan Button */
+.scan-btn-sidebar {
-.scan-btn {
+  width: 100%;
   padding: 10px 20px;
+  margin-top: 10px;
   background-color: #28a745;
   color: white;
   border: none;
@@ -112,11 +98,11 @@
   transition: background-color 0.3s;
 }
 
-.scan-btn:hover {
+.scan-btn-sidebar:hover {
   background-color: #218838;
 }
 
-.scan-btn:disabled {
+.scan-btn-sidebar:disabled {
   background-color: #ccc;
   cursor: not-allowed;
 }

frontend/src/App.jsx

@@ -71,10 +71,10 @@ function App() {
       <Sidebar collapsed={collapsed} className="app-sidebar">
         <Menu iconShape="square">
           <MenuItem icon={<FaBars />} onClick={() => setCollapsed(!collapsed)}>
-            <h2>{collapsed ? '' : 'Menu'}</h2>
+            <h2>{collapsed ? '' : 'Video App'}</h2>
           </MenuItem>
           <MenuItem icon={<FaHome />}>Home</MenuItem>
-          <SubMenu icon={<FaFolder />} title="Management">
+          <SubMenu icon={<FaFolder />} label="Library">
             <div className="path-section">
               <h2>Video Library Paths</h2>
               <div className="path-form">
@@ -102,6 +102,13 @@ function App() {
                   <p>No video paths added yet</p>
                 )}
               </div>
+              <button 
+                onClick={scanVideos} 
+                disabled={loading}
+                className="scan-btn-sidebar"
+              >
+                {loading ? 'Scanning...' : 'Scan Videos'}
+              </button>
             </div>
           </SubMenu>
           <MenuItem icon={<FaVideo />}>Videos</MenuItem>
@@ -109,17 +116,6 @@ function App() {
       </Sidebar>
 
       <main className="app-main">
-        <header className="app-header">
-          <h1>Video Organization App</h1>
-          <button 
-            onClick={scanVideos} 
-            disabled={loading}
-            className="scan-btn"
-          >
-            {loading ? 'Scanning...' : 'Scan Videos'}
-          </button>
-        </header>
-
         <section className="videos-section">
           <h2>Video Library</h2>
           {videos.length > 0 ? (