feat: enhance timer UI and fix history panel issues

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tauri-apps/api": "^1.5.3",
+    "date-fns": "^4.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1"

src-tauri/src/lib.rs

@@ -12,7 +12,6 @@ async fn read_file_content(path: String) -> Result<String, String> {
     fs::read_to_string(path)
         .map_err(|e| e.to_string())
 }
-
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     tauri::Builder::default()

src-tauri/tauri.conf.json

@@ -9,7 +9,7 @@
   },
   "package": {
     "productName": "CleanType",
-    "version": "0.1.0"
+    "version": "0.2.0"
   },
   "tauri": {
     "allowlist": {

src/App.module.css

@@ -0,0 +1,36 @@
+.app {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: all 0.15s ease;
+}
+
+.darkTheme {
+  background-color: #1a1a1a;
+  color: rgba(255, 255, 255, 0.9);
+  --bg-color: #1a1a1a;
+  --text-color: rgba(255, 255, 255, 0.9);
+  --nav-bg: rgba(0, 0, 0, 0.85);
+  --border-color: rgba(255, 255, 255, 0.1);
+}
+
+.lightTheme {
+  background-color: rgb(255, 252, 242);
+  color: rgba(0, 0, 0, 0.9);
+  --bg-color: rgb(255, 252, 242);
+  --text-color: rgba(0, 0, 0, 0.9);
+  --nav-bg: rgba(255, 252, 242, 0.95);
+  --border-color: rgba(0, 0, 0, 0.1);
+}
+
+/* Mobile styles */
+@media (max-width: 768px) {
+  .app {
+    padding: 0;
+  }
+} 

src/App.tsx

@@ -1,14 +1,49 @@
+import { useState, useEffect } from 'react';
 import { FullscreenEditor } from "./components/FullscreenEditor";
 import { ErrorBoundary } from "./components/ErrorBoundary";
+import KeyboardShortcuts from './components/KeyboardShortcuts';
+import styles from './App.module.css';
 
 function App() {
+  const [isDarkTheme, setIsDarkTheme] = useState(() => {
+    const saved = localStorage.getItem('cleantype-theme');
+    return saved !== 'light'; // Default to dark theme if not explicitly set to light
+  });
+
+  const [isShortcutsOpen, setIsShortcutsOpen] = useState(false);
+
+  // Save theme changes to localStorage
+  useEffect(() => {
+    localStorage.setItem('cleantype-theme', isDarkTheme ? 'dark' : 'light');
+  }, [isDarkTheme]);
+
+  useEffect(() => {
+    const handleKeyPress = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === '/') {
+        e.preventDefault();
+        setIsShortcutsOpen(prev => !prev);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyPress);
+    return () => window.removeEventListener('keydown', handleKeyPress);
+  }, []);
+
   return (
     <ErrorBoundary>
-      <div className="App">
-        <FullscreenEditor />
+      <div className={`${styles.app} ${isDarkTheme ? styles.darkTheme : styles.lightTheme}`}>
+        <FullscreenEditor 
+          isDarkTheme={isDarkTheme}
+          onThemeToggle={() => setIsDarkTheme(prev => !prev)}
+        />
+        <KeyboardShortcuts
+          isOpen={isShortcutsOpen}
+          onClose={() => setIsShortcutsOpen(false)}
+          isDarkTheme={isDarkTheme}
+        />
       </div>
     </ErrorBoundary>
   );
 }
 
-export default App;
+export default App;

src/components/ConfirmDialog.module.css

@@ -0,0 +1,114 @@
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+  backdrop-filter: blur(4px);
+}
+
+.dialog {
+  background: rgba(30, 30, 30, 0.95);
+  border-radius: 12px;
+  padding: 24px;
+  min-width: 320px;
+  max-width: 90%;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+  animation: dialogAppear 0.2s ease;
+}
+
+.dialog h3 {
+  margin: 0 0 12px;
+  font-size: 18px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.dialog p {
+  margin: 0 0 24px;
+  font-size: 15px;
+  line-height: 1.5;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.cancelButton,
+.confirmButton {
+  all: unset;
+  cursor: pointer;
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.cancelButton {
+  background: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.cancelButton:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.confirmButton {
+  background: rgba(255, 59, 48, 0.15);
+  color: #ff3b30;
+}
+
+.confirmButton:hover {
+  background: rgba(255, 59, 48, 0.25);
+}
+
+/* Light theme */
+.lightTheme {
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+
+.lightTheme h3 {
+  color: rgba(0, 0, 0, 0.9);
+}
+
+.lightTheme p {
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.lightTheme .cancelButton {
+  background: rgba(0, 0, 0, 0.05);
+  color: rgba(0, 0, 0, 0.8);
+}
+
+.lightTheme .cancelButton:hover {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.lightTheme .confirmButton {
+  background: rgba(255, 59, 48, 0.1);
+}
+
+.lightTheme .confirmButton:hover {
+  background: rgba(255, 59, 48, 0.15);
+}
+
+@keyframes dialogAppear {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+} 

src/components/ConfirmDialog.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import styles from './ConfirmDialog.module.css';
+
+interface ConfirmDialogProps {
+  isOpen: boolean;
+  title: string;
+  message: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  isDarkTheme: boolean;
+}
+
+export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
+  isOpen,
+  title,
+  message,
+  onConfirm,
+  onCancel,
+  isDarkTheme,
+}) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className={styles.overlay}>
+      <div className={`${styles.dialog} ${isDarkTheme ? styles.darkTheme : styles.lightTheme}`}>
+        <h3>{title}</h3>
+        <p>{message}</p>
+        <div className={styles.actions}>
+          <button className={styles.cancelButton} onClick={onCancel}>
+            Cancel
+          </button>
+          <button className={styles.confirmButton} onClick={onConfirm}>
+            Confirm
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};