Settings UI enhancement

Date & Time Display
Added a real-time clock component in the sidebar

Event Logs System
Implemented an EventLogsTab component for system monitoring
Provides a structured way to:
Track user interactions
Monitor system events
Display activity history

app/lib/hooks/useSettings.tsx

@@ -1,12 +1,20 @@
 import { useStore } from '@nanostores/react';
-import { isDebugMode, isLocalModelsEnabled, LOCAL_PROVIDERS, providersStore } from '~/lib/stores/settings';
+import {
+  isDebugMode,
+  isEventLogsEnabled,
+  isLocalModelsEnabled,
+  LOCAL_PROVIDERS,
+  providersStore,
+} from '~/lib/stores/settings';
 import { useCallback, useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
 import type { IProviderSetting, ProviderInfo } from '~/types/model';
+import { logStore } from '~/lib/stores/logs'; // assuming logStore is imported from this location
 
 export function useSettings() {
   const providers = useStore(providersStore);
   const debug = useStore(isDebugMode);
+  const eventLogs = useStore(isEventLogsEnabled);
   const isLocalModel = useStore(isLocalModelsEnabled);
   const [activeProviders, setActiveProviders] = useState<ProviderInfo[]>([]);
 
@@ -39,6 +47,13 @@ export function useSettings() {
       isDebugMode.set(savedDebugMode === 'true');
     }
 
+    // load event logs from cookies
+    const savedEventLogs = Cookies.get('isEventLogsEnabled');
+
+    if (savedEventLogs) {
+      isEventLogsEnabled.set(savedEventLogs === 'true');
+    }
+
     // load local models from cookies
     const savedLocalModels = Cookies.get('isLocalModelsEnabled');
 
@@ -80,11 +95,19 @@ export function useSettings() {
 
   const enableDebugMode = useCallback((enabled: boolean) => {
     isDebugMode.set(enabled);
+    logStore.logSystem(`Debug mode ${enabled ? 'enabled' : 'disabled'}`);
     Cookies.set('isDebugEnabled', String(enabled));
   }, []);
 
+  const enableEventLogs = useCallback((enabled: boolean) => {
+    isEventLogsEnabled.set(enabled);
+    logStore.logSystem(`Event logs ${enabled ? 'enabled' : 'disabled'}`);
+    Cookies.set('isEventLogsEnabled', String(enabled));
+  }, []);
+
   const enableLocalModels = useCallback((enabled: boolean) => {
     isLocalModelsEnabled.set(enabled);
+    logStore.logSystem(`Local models ${enabled ? 'enabled' : 'disabled'}`);
     Cookies.set('isLocalModelsEnabled', String(enabled));
   }, []);
 
@@ -94,6 +117,8 @@ export function useSettings() {
     updateProviderSettings,
     debug,
     enableDebugMode,
+    eventLogs,
+    enableEventLogs,
     isLocalModel,
     enableLocalModels,
   };