Skip to content

Commit

Permalink
Updated the settings menu look
Browse files Browse the repository at this point in the history
  • Loading branch information
@jordan-dalby
jordan-dalby committed Nov 15, 2024
1 parent d73640f commit d7a2611
Showing 1 changed file with 167 additions and 99 deletions.
266 changes: 167 additions & 99 deletions client/src/components/settings/SettingsModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,63 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
}
};

const SettingsGroup: React.FC<{ title: string; children: React.ReactNode }> = ({ title, children }) => (
<div className="space-y-3 p-4 pt-0 pl-0 bg-gray-800 rounded-lg">
<h3 className="text-sm font-medium text-gray-200 mb-3">{title}</h3>
{children}
</div>
);

const SettingRow: React.FC<{
label: string;
htmlFor: string;
children: React.ReactNode;
indent?: boolean;
description?: string;
}> = ({ label, htmlFor, children, indent, description }) => (
<div className={`${indent ? 'ml-4' : ''}`}>
<div className="flex items-center justify-between">
<div className="space-y-1">
<label htmlFor={htmlFor} className="text-gray-300 text-sm">
{label}
</label>
{description && (
<p className="text-gray-400 text-xs">
{description}
</p>
)}
</div>
{children}
</div>
</div>
);

const Switch: React.FC<{
id: string;
checked: boolean;
onChange: (checked: boolean) => void;
}> = ({ id, checked, onChange }) => (
<button
id={id}
role="switch"
aria-checked={checked}
onClick={() => onChange(!checked)}
className={`
relative inline-flex h-5 w-9 items-center rounded-full
transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500
${checked ? 'bg-blue-600' : 'bg-gray-600'}
`}
>
<span
className={`
inline-block h-4 w-4 transform rounded-full bg-white
transition duration-200 ease-in-out
${checked ? 'translate-x-5' : 'translate-x-1'}
`}
/>
</button>
);

return (
<Modal
isOpen={isOpen}
Expand All @@ -191,86 +248,113 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
>
<div className="pb-4">
<div className="space-y-4">
<div className="flex items-center justify-between">
<label htmlFor="compactView" className="text-gray-300">Compact View</label>
<input
type="checkbox"
id="compactView"
checked={compactView}
onChange={(e) => setCompactView(e.target.checked)}
className="form-checkbox h-5 w-5 text-blue-600 rounded focus:ring-blue-500"
/>
</div>
<div className="flex items-center justify-between">
<label htmlFor="showCodePreview" className="text-gray-300">Show Code Preview</label>
<input
type="checkbox"
id="showCodePreview"
checked={showCodePreview}
onChange={(e) => setShowCodePreview(e.target.checked)}
className="form-checkbox h-5 w-5 text-blue-600 rounded focus:ring-blue-500"
/>
</div>
{showCodePreview && (
<div className="flex items-center justify-between">
<label htmlFor="previewLines" className="text-gray-300">Preview Lines</label>
<input
type="number"
id="previewLines"
value={previewLines}
onChange={(e) => setPreviewLines(Math.max(1, Math.min(20, parseInt(e.target.value) || 1)))}
min="1"
max="20"
className="form-input w-20 rounded-md bg-gray-700 border border-gray-600 text-white p-2 text-sm"
{/* View Settings */}
<SettingsGroup title="View Settings">
<SettingRow
label="Compact View"
htmlFor="compactView"
description="Display snippets in a more condensed format"
>
<Switch
id="compactView"
checked={compactView}
onChange={setCompactView}
/>
</SettingRow>

<div className="space-y-3">
<SettingRow
label="Show Code Preview"
htmlFor="showCodePreview"
description="Display a preview of the code in the snippet list"
>
<Switch
id="showCodePreview"
checked={showCodePreview}
onChange={setShowCodePreview}
/>
</SettingRow>

{showCodePreview && (
<SettingRow
label="Number of Preview Lines"
htmlFor="previewLines"
indent
description="Maximum number of lines to show in preview (1-20)"
>
<input
type="number"
id="previewLines"
value={previewLines}
onChange={(e) => setPreviewLines(Math.max(1, Math.min(20, parseInt(e.target.value) || 1)))}
min="1"
max="20"
className="form-input w-20 rounded-md bg-gray-700 border border-gray-600 text-white p-1 text-sm"
/>
</SettingRow>
)}
</div>
)}
<div className="flex items-center justify-between">
<label htmlFor="includeCodeInSearch" className="text-gray-300">Include Code in Search Queries</label>
<input
type="checkbox"
id="includeCodeInSearch"
checked={includeCodeInSearch}
onChange={(e) => setIncludeCodeInSearch(e.target.checked)}
className="form-checkbox h-5 w-5 text-blue-600 rounded focus:ring-blue-500"
/>
</div>
<div className="flex items-center justify-between">
<label htmlFor="showCategories" className="text-gray-300">Show Categories</label>
<input
type="checkbox"
id="showCategories"
checked={showCategories}
onChange={(e) => setShowCategories(e.target.checked)}
className="form-checkbox h-5 w-5 text-blue-600 rounded focus:ring-blue-500"
/>
</div>

{showCategories && (
<div className="flex items-center justify-between">
<label htmlFor="expandCategories" className="text-gray-300">Expand Categories</label>
<input
type="checkbox"
id="expandCategories"
checked={expandCategories}
onChange={(e) => setExpandCategories(e.target.checked)}
className="form-checkbox h-5 w-5 text-blue-600 rounded focus:ring-blue-500"

<SettingRow
label="Show Line Numbers"
htmlFor="showLineNumbers"
description="Display line numbers in code blocks"
>
<Switch
id="showLineNumbers"
checked={showLineNumbers}
onChange={setShowLineNumbers}
/>
</div>
)}
<div className="flex items-center justify-between">
<label htmlFor="showLineNumbers" className="text-gray-300">Show Line Numbers</label>
<input
type="checkbox"
id="showLineNumbers"
checked={showLineNumbers}
onChange={(e) => setShowLineNumbers(e.target.checked)}
className="form-checkbox h-5 w-5 text-blue-600 rounded focus:ring-blue-500"
/>
</div>
</SettingRow>
</SettingsGroup>

{/* Export/Import Section */}
<div className="space-y-4 mb-6">
{/* Category Settings */}
<SettingsGroup title="Category Settings">
<SettingRow
label="Show Categories"
htmlFor="showCategories"
description="Display category labels for snippets"
>
<Switch
id="showCategories"
checked={showCategories}
onChange={setShowCategories}
/>
</SettingRow>

{showCategories && (
<SettingRow
label="Expand Categories"
htmlFor="expandCategories"
indent
description="Automatically expand category groups"
>
<Switch
id="expandCategories"
checked={expandCategories}
onChange={setExpandCategories}
/>
</SettingRow>
)}
</SettingsGroup>

{/* Search Settings */}
<SettingsGroup title="Search Settings">
<SettingRow
label="Include Code in Search"
htmlFor="includeCodeInSearch"
description="Search within code content, not just titles"
>
<Switch
id="includeCodeInSearch"
checked={includeCodeInSearch}
onChange={setIncludeCodeInSearch}
/>
</SettingRow>
</SettingsGroup>

{/* Data Management */}
<SettingsGroup title="Data Management">
<div className="flex gap-2">
<button
onClick={handleExport}
Expand All @@ -297,17 +381,13 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
</label>
</div>

{/* Import Progress */}
{importProgress && (
<div className="bg-gray-800 rounded-lg p-4 space-y-2">
<div className="mt-4 space-y-2">
<div className="flex justify-between text-sm text-gray-300">
<span>Importing snippets...</span>
<span>
{importProgress.current} / {importProgress.total}
</span>
<span>{importProgress.current} / {importProgress.total}</span>
</div>

{/* Progress Bar */}
<div className="w-full h-2 bg-gray-700 rounded-full overflow-hidden">
<div
className="h-full bg-blue-600 transition-all duration-200"
Expand All @@ -317,7 +397,6 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
/>
</div>

{/* Error Summary (if any) */}
{importProgress.errors.length > 0 && (
<div className="mt-2 text-sm">
<div className="flex items-center gap-1 text-red-400">
Expand All @@ -335,8 +414,9 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
)}
</div>
)}
</div>
</SettingsGroup>

{/* Links Section */}
<div className="border-t border-gray-700 pt-4 mt-4">
<div className="flex gap-4 justify-center">
<button
Expand All @@ -353,11 +433,7 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
className="opacity-60 hover:opacity-100 transition-opacity"
title="GitHub Repository"
>
<img
src="/github-mark-white.svg"
alt="GitHub"
className="w-6 h-6"
/>
<img src="/github-mark-white.svg" alt="GitHub" className="w-6 h-6" />
</a>
<a
href={DOCKER_URL}
Expand All @@ -366,11 +442,7 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
className="opacity-60 hover:opacity-100 transition-opacity"
title="GitHub Packages"
>
<img
src="/docker-mark-white.svg"
alt="Docker"
className="w-6 h-6"
/>
<img src="/docker-mark-white.svg" alt="Docker" className="w-6 h-6" />
</a>
<a
href={REDDIT_URL}
Expand All @@ -379,11 +451,7 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
className="opacity-60 hover:opacity-100 transition-opacity"
title="Reddit Post"
>
<img
src="/reddit-mark-white.svg"
alt="Reddit"
className="w-6 h-6"
/>
<img src="/reddit-mark-white.svg" alt="Reddit" className="w-6 h-6" />
</a>
<a
href={WIKI_URL}
Expand Down

0 comments on commit d7a2611

Please sign in to comment.