"Fix #10: Unify settings system with reusable component"

dashboard/src/components/DailyScheduler.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { database } from "../firebase";
 import { ref, onValue, update } from "firebase/database";
+import Settings from './Settings';
 
 const DailyScheduler = ({ user }) => {
   // Default time range settings
@@ -215,6 +216,7 @@ const DailyScheduler = ({ user }) => {
 
   return (
     <div className="bg-white shadow rounded-md p-6 max-w-4xl mx-auto">
+    <Settings pageName="Daily Scheduler" />
       {/* Header with Settings */}
       <div className="flex justify-between items-center mb-6">
         <div className="flex items-center gap-4">

dashboard/src/components/FocusTimer.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { database } from '../firebase';
 import { dbRef, onValueRef, updateData } from '../firebaseHelpers';
+import Settings from './Settings';
 
 const FocusTimer = ({ user }) => {
   const [time, setTime] = useState(25 * 60);
@@ -176,19 +177,21 @@ const FocusTimer = ({ user }) => {
   };
 
   return (
+    <>
+    <Settings pageName="Focus Timer" />
     <div 
-      className="absolute bg-white shadow-2xl rounded-2xl border border-neutral-200 cursor-move select-none overflow-hidden resize-both"
-      onMouseDown={handleMouseDown}
-      style={{ 
-        left: '50%',
-        top: '50%',
-        width: '500px',
-        height: '400px',
-        minWidth: '320px',
-        minHeight: '300px',
-        transform: `translate(calc(-50% + ${position.x}px), calc(-50% + ${position.y}px))`,
-        transition: isDragging.current ? 'none' : 'transform 0.1s ease-out'
-      }}
+    className="absolute bg-white shadow-2xl rounded-2xl border border-neutral-200 cursor-move select-none overflow-hidden resize-both"
+    onMouseDown={handleMouseDown}
+    style={{ 
+      left: '50%',
+      top: '50%',
+      width: '500px',
+      height: '400px',
+      minWidth: '320px',
+      minHeight: '300px',
+      transform: `translate(calc(-50% + ${position.x}px), calc(-50% + ${position.y}px))`,
+      transition: isDragging.current ? 'none' : 'transform 0.1s ease-out'
+    }}
     >
         <div className="relative w-full h-full flex flex-col">
             <div className="absolute top-4 right-4 z-20">
@@ -294,6 +297,7 @@ const FocusTimer = ({ user }) => {
             )}
         </div>
     </div>
+    </>
   );
 };
 

dashboard/src/components/HabitTracker.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { database } from '../firebase';
 import { dbRef, onValueRef, updateData, setData } from '../firebaseHelpers';
+import Settings from './Settings';
 
 const HabitTracker = ({ user }) => {
   const [habits, setHabits] = useState(['Workout', 'Read', 'Relax']);
@@ -125,6 +126,7 @@ const HabitTracker = ({ user }) => {
 
   return (
     <div className="bg-white shadow rounded-lg p-6 max-w-4xl mx-auto relative">
+        <Settings pageName="Habit Tracker" />
 
       <div className="flex justify-between items-center mb-6">
         <h2 className="text-xl font-semibold text-gray-800">Habit Tracker</h2>

dashboard/src/components/KnowledgeBase.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { database } from '../firebase';
 import { dbRef, onValueRef, pushData, setData, updateData, removeData } from '../firebaseHelpers';
+import Settings from './Settings';
 
 const KnowledgeBase = ({ user }) => {
   const [notes, setNotes] = useState([]);
@@ -95,7 +96,7 @@ const KnowledgeBase = ({ user }) => {
 
   return (
     <div className="bg-white shadow rounded-lg overflow-hidden max-w-6xl mx-auto flex h-[600px] border border-gray-200 relative">
-
+      <Settings pageName="Knowledge Base" />
       <div 
         className={`
             bg-gray-50 border-r border-gray-200 flex flex-col transition-all duration-300 ease-in-out

dashboard/src/components/QuickLinks.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { database } from '../firebase';
 import { dbRef, onValueRef, setData } from '../firebaseHelpers';
+import Settings from './Settings';
 
 const QuickLinks = ({ user }) => {
   const defaultLinks = [
@@ -62,6 +63,7 @@ const QuickLinks = ({ user }) => {
 
   return (
     <div className="bg-white shadow rounded-lg p-6 max-w-6xl mx-auto border border-neutral-200">
+      <Settings pageName="Quick Links" />
       <div className="flex justify-between items-center mb-6">
         <h2 className="text-xl font-semibold text-neutral-800">Quick Links</h2>
         <div className="flex items-center gap-3">

dashboard/src/components/Settings.js

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+
+const Settings = ({ pageName }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  // This function handles the logic that was likely repeated everywhere
+  const toggleSettings = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <div className="fixed top-4 right-4 z-50">
+      {/* The Cog Button */}
+      <button 
+        onClick={toggleSettings}
+        className="p-2 bg-gray-200 rounded-full hover:bg-gray-300 transition-colors shadow-lg"
+        aria-label="Open Settings"
+      >
+        {/* Simple Gear SVG Icon */}
+        <svg 
+          xmlns="http://www.w3.org/2000/svg" 
+          className={`h-6 w-6 text-gray-700 transform transition-transform duration-500 ${isOpen ? 'rotate-180' : ''}`} 
+          fill="none" 
+          viewBox="0 0 24 24" 
+          stroke="currentColor"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+        </svg>
+      </button>
+
+      {/* The Dropdown / Modal Logic */}
+      {isOpen && (
+        <div className="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-xl py-1 border border-gray-200">
+          <div className="px-4 py-2 text-sm text-gray-700 border-b font-bold">
+            Settings
+          </div>
+          <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Display</a>
+          <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Account</a>
+          <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Log Out</a>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Settings;

dashboard/src/components/TaskManager.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { database } from '../firebase';
 import { ref, onValue, push, set, child, remove, update } from "firebase/database";
+import Settings from './Settings';
 
 const TaskManager = ({user}) => {
   const [tasks, setTasks] = useState([]);
@@ -63,6 +64,7 @@ const TaskManager = ({user}) => {
 
   return (
     <div className="bg-white shadow rounded-md p-6 max-w-4xl mx-auto">
+      <Settings pageName="Task Manager" />
       <div className="pb-4">
         <h2 className="text-xl font-semibold text-neutral-800">tasks</h2>
       </div>