2023-01-20 17:07:14 +00:00
|
|
|
import { useDispatch, useSelector } from "react-redux";
|
2023-01-31 14:41:21 +00:00
|
|
|
import { InitState, setPreferences, UserPreferences } from "State/Login";
|
2023-01-20 17:07:14 +00:00
|
|
|
import { RootState } from "State/Store";
|
|
|
|
import "./Preferences.css";
|
|
|
|
|
|
|
|
const PreferencesPage = () => {
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
const perf = useSelector<RootState, UserPreferences>(s => s.login.preferences);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="preferences">
|
|
|
|
<h3>Preferences</h3>
|
|
|
|
|
|
|
|
<div className="card flex">
|
|
|
|
<div className="flex f-col f-grow">
|
|
|
|
<div>Theme</div>
|
|
|
|
</div>
|
|
|
|
<div>
|
2023-01-31 14:41:21 +00:00
|
|
|
<select value={perf.theme} onChange={e => dispatch(setPreferences({ ...perf, theme: e.target.value } as UserPreferences))}>
|
2023-01-20 18:59:08 +00:00
|
|
|
<option value="system">System (Default)</option>
|
2023-01-20 17:07:14 +00:00
|
|
|
<option value="light">Light</option>
|
|
|
|
<option value="dark">Dark</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="card flex">
|
|
|
|
<div className="flex f-col f-grow">
|
|
|
|
<div>Automatically load media</div>
|
|
|
|
<small>Media in posts will automatically be shown, if disabled only the link will show</small>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<input type="checkbox" checked={perf.autoLoadMedia} onChange={e => dispatch(setPreferences({ ...perf, autoLoadMedia: e.target.checked }))} />
|
|
|
|
</div>
|
|
|
|
</div>
|
2023-01-31 14:41:21 +00:00
|
|
|
<div className="card flex f-col">
|
|
|
|
<div className="flex w-max">
|
|
|
|
<div className="flex f-col f-grow">
|
|
|
|
<div>Image proxy service</div>
|
|
|
|
<small>Use imgproxy to compress images</small>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<input type="checkbox" checked={perf.imgProxyConfig !== null} onChange={e => dispatch(setPreferences({ ...perf, imgProxyConfig: e.target.checked ? InitState.preferences.imgProxyConfig : null }))} />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{perf.imgProxyConfig && (<div className="w-max mt10 form">
|
|
|
|
<div className="form-group">
|
|
|
|
<div>
|
|
|
|
Service Url
|
|
|
|
</div>
|
|
|
|
<div className="w-max">
|
|
|
|
<input type="text" value={perf.imgProxyConfig?.url} placeholder="Url.." onChange={e => dispatch(setPreferences({ ...perf, imgProxyConfig: { ...perf.imgProxyConfig!, url: e.target.value } }))} />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
|
|
<div>
|
|
|
|
Service Key
|
|
|
|
</div>
|
|
|
|
<div className="w-max">
|
|
|
|
<input type="password" value={perf.imgProxyConfig?.key} placeholder="Hex key.." onChange={e => dispatch(setPreferences({ ...perf, imgProxyConfig: { ...perf.imgProxyConfig!, key: e.target.value } }))} />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
|
|
<div>
|
|
|
|
Service Salt
|
|
|
|
</div>
|
|
|
|
<div className="w-max">
|
|
|
|
<input type="password" value={perf.imgProxyConfig?.salt} placeholder="Hex salt.." onChange={e => dispatch(setPreferences({ ...perf, imgProxyConfig: { ...perf.imgProxyConfig!, salt: e.target.value } }))} />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>)}
|
|
|
|
</div>
|
2023-01-20 17:07:14 +00:00
|
|
|
<div className="card flex">
|
|
|
|
<div className="flex f-col f-grow">
|
|
|
|
<div>Enable reactions</div>
|
|
|
|
<small>Reactions will be shown on every page, if disabled no reactions will be shown</small>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<input type="checkbox" checked={perf.enableReactions} onChange={e => dispatch(setPreferences({ ...perf, enableReactions: e.target.checked }))} />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="card flex">
|
|
|
|
<div className="flex f-col f-grow">
|
|
|
|
<div>Confirm reposts</div>
|
|
|
|
<small>Reposts need to be manually confirmed</small>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<input type="checkbox" checked={perf.confirmReposts} onChange={e => dispatch(setPreferences({ ...perf, confirmReposts: e.target.checked }))} />
|
|
|
|
</div>
|
|
|
|
</div>
|
2023-01-21 16:09:35 +00:00
|
|
|
<div className="card flex">
|
|
|
|
<div className="flex f-col f-grow">
|
|
|
|
<div>Automatically show latest notes</div>
|
|
|
|
<small>Notes will stream in real time into global and posts tab</small>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<input type="checkbox" checked={perf.autoShowLatest} onChange={e => dispatch(setPreferences({ ...perf, autoShowLatest: e.target.checked }))} />
|
|
|
|
</div>
|
|
|
|
</div>
|
2023-01-23 17:36:49 +00:00
|
|
|
<div className="card flex">
|
|
|
|
<div className="flex f-col f-grow">
|
|
|
|
<div>File upload service</div>
|
|
|
|
<small>Pick which upload service you want to upload attachments to</small>
|
|
|
|
</div>
|
|
|
|
<div>
|
2023-01-31 14:41:21 +00:00
|
|
|
<select value={perf.fileUploader} onChange={e => dispatch(setPreferences({ ...perf, fileUploader: e.target.value } as UserPreferences))}>
|
2023-01-23 17:36:49 +00:00
|
|
|
<option value="void.cat">void.cat (Default)</option>
|
|
|
|
<option value="nostr.build">nostr.build</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
</div>
|
2023-01-21 17:00:09 +00:00
|
|
|
<div className="card flex">
|
|
|
|
<div className="flex f-col f-grow">
|
|
|
|
<div>Debug Menus</div>
|
2023-01-24 11:59:18 +00:00
|
|
|
<small>Shows "Copy ID" and "Copy Event JSON" in the context menu on each message</small>
|
2023-01-21 17:00:09 +00:00
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<input type="checkbox" checked={perf.showDebugMenus} onChange={e => dispatch(setPreferences({ ...perf, showDebugMenus: e.target.checked }))} />
|
|
|
|
</div>
|
|
|
|
</div>
|
2023-01-20 17:07:14 +00:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
export default PreferencesPage;
|