Add settings modal and option to show calls

frontend/src/App.jsx

@@ -11,6 +11,7 @@ import DateFilter from './components/DateFilter'
 import Upload from './components/Upload'
 import Search from './components/Search'
 import ChangePasswordModal from './components/ChangePasswordModal'
+import SettingsModal from './components/SettingsModal'
 import './App.css'
 
 const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8081/api'
@@ -27,8 +28,14 @@ function App() {
   const [dateRange, setDateRange] = useState({ min: null, max: null })
   const [showUpload, setShowUpload] = useState(false)
   const [showPasswordModal, setShowPasswordModal] = useState(false)
+  const [showSettingsModal, setShowSettingsModal] = useState(false)
   const [searchFilter, setSearchFilter] = useState('')
   const [version, setVersion] = useState('...')
+  const [settings, setSettings] = useState({
+    conversations: {
+      show_calls: true
+    }
+  })
 
   // Mobile sidebar state
   const [showSidebar, setShowSidebar] = useState(true)
@@ -50,11 +57,16 @@ function App() {
     : 'conversations'
 
   useEffect(() => {
+    fetchSettings()
     fetchDateRange()
-    fetchConversations()
     fetchVersion()
   }, [])
 
+  useEffect(() => {
+    // Fetch conversations after settings are loaded
+    fetchConversations()
+  }, [startDate, endDate, settings])
+
   const fetchVersion = async () => {
     try {
       const response = await axios.get(`${API_BASE}/version`)
@@ -65,9 +77,20 @@ function App() {
     }
   }
 
-  useEffect(() => {
+  const fetchSettings = async () => {
-    fetchConversations()
+    try {
-  }, [startDate, endDate])
+      const response = await axios.get(`${API_BASE}/settings`)
+      setSettings(response.data)
+    } catch (error) {
+      console.error('Failed to fetch settings:', error)
+      // Use default settings if fetch fails
+      setSettings({
+        conversations: {
+          show_calls: true
+        }
+      })
+    }
+  }
 
   // Sync selected conversation from URL and manage sidebar visibility
   useEffect(() => {
@@ -112,7 +135,9 @@ function App() {
       if (endDate) params.end = endDate.toISOString()
 
       const response = await axios.get(`${API_BASE}/conversations`, { params })
-      setConversations(response.data || [])
+      const conversationList = response.data || []
+
+      setConversations(conversationList)
     } catch (error) {
       console.error('Error fetching conversations:', error)
     } finally {
@@ -197,6 +222,13 @@ function App() {
                   Version {version}
                 </Dropdown.ItemText>
                 <Dropdown.Divider />
+                <Dropdown.Item onClick={() => setShowSettingsModal(true)}>
+                  <svg style={{width: '1rem', height: '1rem'}} className="me-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <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>
+                  Settings
+                </Dropdown.Item>
                 <Dropdown.Item onClick={() => setShowPasswordModal(true)}>
                   <svg style={{width: '1rem', height: '1rem'}} className="me-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
@@ -370,6 +402,17 @@ function App() {
         />
       )}
 
+      {/* Settings Modal */}
+      <SettingsModal
+        show={showSettingsModal}
+        onClose={() => setShowSettingsModal(false)}
+        onSettingsUpdated={(newSettings) => {
+          setSettings(newSettings)
+          // Reload conversations if show_calls setting changed
+          fetchConversations()
+        }}
+      />
+
       {/* Change Password Modal */}
       {showPasswordModal && (
         <ChangePasswordModal
@@ -380,6 +423,17 @@ function App() {
           }}
         />
       )}
+
+      {/* Settings Modal */}
+      <SettingsModal
+        show={showSettingsModal}
+        onClose={() => setShowSettingsModal(false)}
+        onSettingsUpdated={(newSettings) => {
+          setSettings(newSettings)
+          // Reload conversations if show_calls setting changed
+          fetchConversations()
+        }}
+      />
     </div>
   )
 }

frontend/src/components/SettingsModal.jsx

@@ -0,0 +1,142 @@
+import { useState, useEffect } from 'react'
+import axios from 'axios'
+
+const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8081/api'
+
+function SettingsModal({ show, onClose, onSettingsUpdated }) {
+  const [settings, setSettings] = useState({
+    conversations: {
+      show_calls: true
+    }
+  })
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    if (show) {
+      fetchSettings()
+    }
+  }, [show])
+
+  const fetchSettings = async () => {
+    try {
+      setLoading(true)
+      const response = await axios.get(`${API_BASE}/settings`)
+      setSettings(response.data)
+    } catch (err) {
+      console.error('Failed to fetch settings:', err)
+      setError('Failed to load settings')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleSave = async () => {
+    try {
+      setSaving(true)
+      setError('')
+      await axios.put(`${API_BASE}/settings`, settings)
+
+      // Notify parent component that settings were updated
+      if (onSettingsUpdated) {
+        onSettingsUpdated(settings)
+      }
+
+      onClose()
+    } catch (err) {
+      console.error('Failed to save settings:', err)
+      setError('Failed to save settings')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleToggleShowCalls = () => {
+    setSettings({
+      ...settings,
+      conversations: {
+        ...settings.conversations,
+        show_calls: !settings.conversations.show_calls
+      }
+    })
+  }
+
+  if (!show) return null
+
+  return (
+    <div className="modal show d-block" tabIndex="-1" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
+      <div className="modal-dialog modal-dialog-centered">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h5 className="modal-title">Settings</h5>
+            <button type="button" className="btn-close" onClick={onClose} disabled={saving}></button>
+          </div>
+          <div className="modal-body">
+            {loading ? (
+              <div className="text-center py-4">
+                <div className="spinner-border" role="status">
+                  <span className="visually-hidden">Loading...</span>
+                </div>
+              </div>
+            ) : (
+              <>
+                {error && (
+                  <div className="alert alert-danger" role="alert">
+                    {error}
+                  </div>
+                )}
+
+                <h6 className="mb-3">Conversations</h6>
+
+                <div className="form-check form-switch">
+                  <input
+                    className="form-check-input"
+                    type="checkbox"
+                    id="showCallsToggle"
+                    checked={settings.conversations.show_calls}
+                    onChange={handleToggleShowCalls}
+                    disabled={saving}
+                  />
+                  <label className="form-check-label" htmlFor="showCallsToggle">
+                    Show calls in conversation list
+                  </label>
+                  <div className="form-text">
+                    When enabled, phone calls will appear in the conversation list alongside messages.
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+          <div className="modal-footer">
+            <button
+              type="button"
+              className="btn btn-secondary"
+              onClick={onClose}
+              disabled={saving}
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              className="btn btn-primary"
+              onClick={handleSave}
+              disabled={loading || saving}
+            >
+              {saving ? (
+                <>
+                  <span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+                  Saving...
+                </>
+              ) : (
+                'Save Changes'
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SettingsModal

internal/auth.go

@@ -41,6 +41,13 @@ func InitAuthDB(filepath string) error {
 		FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
 	);
 
+	CREATE TABLE IF NOT EXISTS settings (
+		user_id TEXT PRIMARY KEY,
+		settings_json TEXT NOT NULL DEFAULT '{}',
+		updated_at INTEGER NOT NULL,
+		FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
+	);
+
 	CREATE INDEX IF NOT EXISTS idx_sessions_user_id ON sessions(user_id);
 	CREATE INDEX IF NOT EXISTS idx_sessions_expires_at ON sessions(expires_at);
 	`

internal/handlers.go

@@ -191,6 +191,22 @@ func HandleMessages(c echo.Context) error {
 			}
 		}
 
+		// Get user ID from context to fetch settings
+		userID, ok := c.Get("user_id").(string)
+		if !ok {
+			return c.JSON(http.StatusUnauthorized, map[string]string{
+				"error": "User not authenticated",
+			})
+		}
+
+		// Fetch user settings to check if calls should be shown
+		settings, err := GetUserSettings(userID)
+		if err != nil {
+			slog.Error("Error getting user settings", "error", err)
+			// If we can't get settings, default to showing calls
+			settings = GetDefaultSettings()
+		}
+
 		activities, err := GetActivityByAddress(userDB, address, startDate, endDate, limit, offset)
 		if err != nil {
 			slog.Error("Error getting activity", "error", err)
@@ -198,6 +214,18 @@ func HandleMessages(c echo.Context) error {
 				"error": "Failed to get activity",
 			})
 		}
+
+		// Filter out calls if show_calls setting is false
+		if !settings.Conversations.ShowCalls {
+			filteredActivities := []ActivityItem{}
+			for _, activity := range activities {
+				if activity.Type != "call" {
+					filteredActivities = append(filteredActivities, activity)
+				}
+			}
+			activities = filteredActivities
+		}
+
 		return c.JSON(http.StatusOK, activities)
 	}
 

internal/settings.go

@@ -0,0 +1,110 @@
+package internal
+
+import (
+	"database/sql"
+	"encoding/json"
+	"net/http"
+	"time"
+
+	"github.com/labstack/echo/v4"
+)
+
+// Settings represents user settings stored as JSON
+type Settings struct {
+	Conversations ConversationSettings `json:"conversations"`
+}
+
+// ConversationSettings contains settings for the conversation view
+type ConversationSettings struct {
+	ShowCalls bool `json:"show_calls"`
+}
+
+// GetDefaultSettings returns the default settings
+func GetDefaultSettings() Settings {
+	return Settings{
+		Conversations: ConversationSettings{
+			ShowCalls: true,
+		},
+	}
+}
+
+// GetUserSettings retrieves settings for a user
+func GetUserSettings(userID string) (Settings, error) {
+	var settingsJSON string
+	var updatedAt int64
+
+	err := authDB.QueryRow(
+		"SELECT settings_json, updated_at FROM settings WHERE user_id = ?",
+		userID,
+	).Scan(&settingsJSON, &updatedAt)
+
+	if err == sql.ErrNoRows {
+		// Return default settings if no settings exist
+		return GetDefaultSettings(), nil
+	}
+
+	if err != nil {
+		return Settings{}, err
+	}
+
+	var settings Settings
+	if err := json.Unmarshal([]byte(settingsJSON), &settings); err != nil {
+		return Settings{}, err
+	}
+
+	return settings, nil
+}
+
+// SaveUserSettings saves settings for a user
+func SaveUserSettings(userID string, settings Settings) error {
+	settingsJSON, err := json.Marshal(settings)
+	if err != nil {
+		return err
+	}
+
+	now := time.Now().Unix()
+
+	_, err = authDB.Exec(`
+		INSERT INTO settings (user_id, settings_json, updated_at)
+		VALUES (?, ?, ?)
+		ON CONFLICT(user_id) DO UPDATE SET
+			settings_json = excluded.settings_json,
+			updated_at = excluded.updated_at
+	`, userID, string(settingsJSON), now)
+
+	return err
+}
+
+// HandleGetSettings handles GET /api/settings
+func HandleGetSettings(c echo.Context) error {
+	userID := c.Get("user_id").(string)
+
+	settings, err := GetUserSettings(userID)
+	if err != nil {
+		return c.JSON(http.StatusInternalServerError, map[string]string{
+			"error": "Failed to get settings",
+		})
+	}
+
+	return c.JSON(http.StatusOK, settings)
+}
+
+// HandleUpdateSettings handles PUT /api/settings
+func HandleUpdateSettings(c echo.Context) error {
+	userID := c.Get("user_id").(string)
+
+	var settings Settings
+	if err := c.Bind(&settings); err != nil {
+		return c.JSON(http.StatusBadRequest, map[string]string{
+			"error": "Invalid settings data",
+		})
+	}
+
+	if err := SaveUserSettings(userID, settings); err != nil {
+		return c.JSON(http.StatusInternalServerError, map[string]string{
+			"error": "Failed to save settings",
+		})
+	}
+
+	return c.JSON(http.StatusOK, settings)
+}

main.go

@@ -74,6 +74,8 @@ func main() {
 	protected.GET("/progress", internal.HandleProgress)
 	protected.GET("/media", internal.HandleMedia)
 	protected.GET("/search", internal.HandleSearch)
+	protected.GET("/settings", internal.HandleGetSettings)
+	protected.PUT("/settings", internal.HandleUpdateSettings)
 
 	// Health check
 	e.GET("/api/health", func(c echo.Context) error {