settings page created

electron-ui/src/renderer/App.tsx

@@ -12,6 +12,8 @@ import './App.css';
 import ClipList from './components/ClipList';
 import { useAppDispatch, useAppSelector } from './hooks';
 import { store } from '../redux/main';
+import { useNavigate } from 'react-router-dom';
+import SettingsPage from './Settings';
 
 function MainPage() {
   const dispatch = useAppDispatch();
@@ -23,6 +25,7 @@ function MainPage() {
   );
   const [newCollectionOpen, setNewCollectionOpen] = useState(false);
   const [newCollectionName, setNewCollectionName] = useState<string>('');
+  const navigate = useNavigate();
 
   useEffect(() => {
     const fetchMetadata = async () => {
@@ -139,6 +142,22 @@ function MainPage() {
             </li>
           ))}
         </ul>
+        {/* Settings Button at Bottom Left */}
+        <div className="mt-auto mb-2">
+          <button
+            type="button"
+            className="w-full rounded px-4 py-2 bg-neutral-800 text-offwhite hover:bg-plumDark text-left"
+            style={{
+              position: 'absolute',
+              bottom: 16,
+              left: 8,
+              width: 'calc(100% - 16px)',
+            }}
+            onClick={() => navigate('/settings')}
+          >
+            ⚙️ Settings
+          </button>
+        </div>
       </nav>
       {/* Main Content */}
       <div
@@ -153,14 +172,27 @@ function MainPage() {
 
 export default function App() {
   const theme = createTheme({
-    palette: {
-      primary: {
-        main: '#6e44ba', // plum
-      },
-      secondary: {
-        main: '#4f3186', // plumDark
+    colorSchemes: {
+      light: false,
+      dark: {
+        palette: {
+          primary: {
+            main: '#6e44ba', // plum
+            dark: '#6e44ba', // plum
+            contrastText: '#ffffff',
+          },
+          secondary: {
+            main: '#4f3186', // plumDark
+            dark: '#4f3186', // plumDark
+            contrastText: '#ffffff',
+          },
+        },
       },
     },
+    // colorSchemes: {
+    //   light: false,
+    //   dark: true,
+    // },
   });
   return (
     <Provider store={store}>
@@ -168,6 +200,7 @@ export default function App() {
         <Router>
           <Routes>
             <Route path="/" element={<MainPage />} />
+            <Route path="/settings" element={<SettingsPage />} />
           </Routes>
         </Router>
       </ThemeProvider>