Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 | 49x 49x 49x 49x 49x 2x 2x 2x 2x 2x 2x 1x 1x 1x 1x 1x 1x 49x 49x 49x 49x 49x 49x 49x 3x 3x 49x 33x | import Typography from '@mui/material/Typography';
import Select from '@mui/material/Select';
import Box from '@mui/material/Box';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { prefsQueryOptions, prefsMutationOptions } from '../../queries/options';
import { useAppTheme } from '../../contexts/ThemeContext';
import { useSnackbar } from '../../contexts/SnackbarContext';
function PrefsGeneral() {
const { updateTheme } = useAppTheme();
const queryClient = useQueryClient();
const { addSnackMessage } = useSnackbar();
// Query: Fetch all effective preferences using unified config API
const { data: prefs } = useQuery(prefsQueryOptions.all());
// Mutation: Save preference using unified config API with custom callbacks
const savePrefMutation = useMutation({
...prefsMutationOptions.save(queryClient),
onSuccess: (data, variables) => {
// Invalidate queries
queryClient.invalidateQueries({ queryKey: ['getEffectivePreferences'] });
queryClient.invalidateQueries({ queryKey: ['getEffectivePreference'] });
// Add snackbar feedback
Iif (variables.prefKey === 'interfaceStyle') {
const themeName = variables.prefValue === 'quiqr10-dark' ? 'Dark' : 'Light';
addSnackMessage(`Interface style changed to ${themeName}`, { severity: 'success' });
I} else if (variables.prefKey === 'sitesListingView') {
addSnackMessage('Site library view updated', { severity: 'success' });
E} else if (variables.prefKey === 'customOpenCommand') {
if (variables.prefValue) {
addSnackMessage('Custom open command saved', { severity: 'success' });
} else {
addSnackMessage('Custom open command cleared', { severity: 'success' });
}
}
},
onError: (error: Error, variables) => {
Iif (variables.prefKey === 'interfaceStyle') {
addSnackMessage(`Failed to change interface style: ${error.message}`, { severity: 'error' });
I} else if (variables.prefKey === 'sitesListingView') {
addSnackMessage(`Failed to update site library view: ${error.message}`, { severity: 'error' });
E} else if (variables.prefKey === 'customOpenCommand') {
addSnackMessage(`Failed to save custom open command: ${error.message}`, { severity: 'error' });
}
}
});
const interfaceStyle = prefs?.interfaceStyle ?? 'quiqr10-light';
const sitesListingView = (prefs?.sitesListingView as string | undefined) ?? 'cards';
const customOpenCommand = (prefs?.customOpenCommand as string | undefined) ?? '';
// Local state for custom open command input
const [customCommandInput, setCustomCommandInput] = useState(customOpenCommand);
const handleInterfaceStyleChange = (value: string) => {
// Optimistically update the theme immediately
updateTheme(value);
// Save to backend using unified config API
savePrefMutation.mutate({ prefKey: 'interfaceStyle', prefValue: value });
};
const handleSitesListingViewChange = (value: string) => {
savePrefMutation.mutate({ prefKey: 'sitesListingView', prefValue: value }, {
onSuccess: () => {
const viewName = value === 'cards' ? 'card view' : 'list view';
addSnackMessage(`Site library switched to ${viewName}`, { severity: 'success' });
}
});
};
const handleSaveCustomCommand = () => {
const trimmedCommand = (customCommandInput as string).trim();
savePrefMutation.mutate({
prefKey: 'customOpenCommand',
prefValue: trimmedCommand || undefined
});
};
return (
<Box sx={{ padding: '20px', height: '100%' }}>
<Typography variant="h4">Appearance</Typography>
<Box my={2}>
<FormControl variant="outlined" sx={{ m: 1, minWidth: 300 }}>
<InputLabel>Interface Style</InputLabel>
<Select
value={interfaceStyle}
onChange={(e) => handleInterfaceStyleChange(e.target.value)}
label="Interface Style"
sx={{ minWidth: 300 }}
>
<MenuItem key="quiqr10" value="quiqr10-light">
Light
</MenuItem>
<MenuItem key="quiqr10-dark" value="quiqr10-dark">
Dark
</MenuItem>
</Select>
</FormControl>
</Box>
<Box my={2}>
<FormControl variant="outlined" sx={{ m: 1, minWidth: 300 }}>
<InputLabel>Site Library View</InputLabel>
<Select
value={sitesListingView}
onChange={(e) => handleSitesListingViewChange(e.target.value)}
label="Site Library View"
sx={{ minWidth: 300 }}
>
<MenuItem value="cards">Card View</MenuItem>
<MenuItem value="list">List View</MenuItem>
</Select>
</FormControl>
<Typography variant="caption" color="text.secondary" sx={{ ml: 1, display: 'block' }}>
Controls how sites are displayed in the Site Library (cards or list).
</Typography>
</Box>
<Box my={2} mx={1}>
<Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
Custom Open-In Command
</Typography>
<Typography variant="caption" color="text.secondary" sx={{ mb: 2, display: 'block' }}>
Configure a custom command to open sites with your preferred editor or tool.
Use %site_path% as a placeholder for the site path and %site_name% for the site name.
</Typography>
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
<TextField
value={customCommandInput}
onChange={(e) => setCustomCommandInput(e.target.value)}
placeholder='Example: code "%site_path%" or alacritty --title "%site_name%" --working-directory "%site_path%"'
fullWidth
sx={{ flex: 1 }}
/>
<Button
variant="contained"
onClick={handleSaveCustomCommand}
disabled={savePrefMutation.isPending}
sx={{ mt: 0.5 }}
>
Save
</Button>
</Box>
</Box>
</Box>
);
}
export default PrefsGeneral;
|