Add settings modal and option to show calls

This commit is contained in:
lowcarbdev
2025-11-30 11:02:36 -07:00
parent 6f0ffdb9ca
commit 50ceab88ec
6 changed files with 348 additions and 5 deletions
+59 -5
View File
@@ -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(() => {
fetchConversations()
}, [startDate, endDate])
const fetchSettings = async () => {
try {
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>
)
}
+142
View File
@@ -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
+7
View File
@@ -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);
`
+28
View File
@@ -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)
}
+110
View File
@@ -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)
}
+2
View File
@@ -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 {