-
- {doubleStep !== undefined && (
+ render={({ field: { onChange, value } }) => {
+ return (
+
+ {label?.length != 0 ?
{label} : <>}
+
+
+ {doubleStep !== undefined && (
+
+ )}
- )}
-
-
-
- {valueLabelFormat ? valueLabelFormat(value) : value}
-
-
-
- {doubleStep !== undefined && (
+
+
+ {valueLabelFormat ? valueLabelFormat(value) : value}
+
+
- )}
+ {doubleStep !== undefined && (
+
+ )}
+
-
- )}
+ );
+ }}
/>
);
}
diff --git a/gui/src/components/commons/icon/ResetSettingIcon.tsx b/gui/src/components/commons/icon/ResetSettingIcon.tsx
new file mode 100644
index 0000000000..a1588e3eac
--- /dev/null
+++ b/gui/src/components/commons/icon/ResetSettingIcon.tsx
@@ -0,0 +1,13 @@
+export function ResetSettingIcon({ size = 24 }: { size?: number }) {
+ return (
+
+ );
+}
diff --git a/gui/src/components/onboarding/UdevRulesModal.tsx b/gui/src/components/onboarding/UdevRulesModal.tsx
index b89af1e733..bce273972f 100644
--- a/gui/src/components/onboarding/UdevRulesModal.tsx
+++ b/gui/src/components/onboarding/UdevRulesModal.tsx
@@ -4,21 +4,19 @@ import { BaseModal } from '@/components/commons/BaseModal';
import { CheckboxInternal } from '@/components/commons/Checkbox';
import { Typography } from '@/components/commons/Typography';
import { useElectron } from '@/hooks/electron';
-import { useWebsocketAPI } from '@/hooks/websocket-api';
-import { RpcMessage, InstalledInfoResponseT } from 'solarxr-protocol';
import { useConfig } from '@/hooks/config';
import { useLocalization } from '@fluent/react';
+import { useAppContext } from '@/hooks/app';
export function UdevRulesModal() {
const { config, setConfig } = useConfig();
- const { useRPCPacket, sendRPCPacket } = useWebsocketAPI();
const electron = useElectron();
const [udevContent, setUdevContent] = useState('');
- const [isUdevInstalledResponse, setIsUdevInstalledResponse] = useState(true);
const [showUdevWarning, setShowUdevWarning] = useState(false);
const [dontShowThisSession, setDontShowThisSession] = useState(false);
const [dontShowAgain, setDontShowAgain] = useState(false);
const { l10n } = useLocalization();
+ const { installInfo } = useAppContext();
const handleUdevContent = async () => {
if (electron.isElectron) {
@@ -38,28 +36,14 @@ export function UdevRulesModal() {
if (!config) throw 'Invalid state!';
if (electron.isElectron) {
const isLinux = electron.data().os.type === 'linux';
- const udevMissing = !isUdevInstalledResponse;
+ const udevMissing = !installInfo?.isUdevInstalled;
const notHiddenGlobally = !config.dontShowUdevModal;
const notHiddenThisSession = !dontShowThisSession;
const shouldShow =
isLinux && udevMissing && notHiddenGlobally && notHiddenThisSession;
setShowUdevWarning(shouldShow);
}
- }, [config, isUdevInstalledResponse, dontShowThisSession]);
-
- useEffect(() => {
- sendRPCPacket(
- RpcMessage.InstalledInfoRequest,
- new InstalledInfoResponseT()
- );
- }, []);
-
- useRPCPacket(
- RpcMessage.InstalledInfoResponse,
- ({ isUdevInstalled }: InstalledInfoResponseT) => {
- setIsUdevInstalledResponse(isUdevInstalled);
- }
- );
+ }, [config, dontShowThisSession]);
const handleModalClose = () => {
if (!config) throw 'Invalid State!';
@@ -72,7 +56,7 @@ export function UdevRulesModal() {
};
return (
-
+
diff --git a/gui/src/components/settings/SettingsLayout.tsx b/gui/src/components/settings/SettingsLayout.tsx
index 7bfc062ef8..ca148f86ca 100644
--- a/gui/src/components/settings/SettingsLayout.tsx
+++ b/gui/src/components/settings/SettingsLayout.tsx
@@ -58,6 +58,10 @@ export function SettingSelectorMobile() {
label: l10n.getString('settings-sidebar-advanced'),
value: { url: '/settings/advanced' },
},
+ {
+ label: l10n.getString('settings-sidebar-keybinds'),
+ value: { url: '/settings/keybinds' },
+ },
{
label: l10n.getString('navbar-onboarding'),
value: { url: '/onboarding/home' },
diff --git a/gui/src/components/settings/SettingsSidebar.tsx b/gui/src/components/settings/SettingsSidebar.tsx
index 1095073394..4a9837759f 100644
--- a/gui/src/components/settings/SettingsSidebar.tsx
+++ b/gui/src/components/settings/SettingsSidebar.tsx
@@ -73,6 +73,13 @@ export function SettingsSidebar() {
scrollTo="gestureControl"
id="settings-sidebar-gesture_control"
/>
+ {
+
+ }
diff --git a/gui/src/components/settings/pages/KeybindSettings.scss b/gui/src/components/settings/pages/KeybindSettings.scss
new file mode 100644
index 0000000000..b73610c1a0
--- /dev/null
+++ b/gui/src/components/settings/pages/KeybindSettings.scss
@@ -0,0 +1,15 @@
+.keybind-settings {
+ display: grid;
+
+ grid-template:
+ 'n v d ' auto
+ 'k k k ' auto
+ 'b . . ' auto
+ / 1fr 1fr 90px;
+
+ grid-template-columns: subgrid;
+ grid-template-rows: subgrid;
+
+ align-items: left;
+ gap: 10px;
+}
diff --git a/gui/src/components/settings/pages/KeybindSettings.tsx b/gui/src/components/settings/pages/KeybindSettings.tsx
new file mode 100644
index 0000000000..f9b2ba5fb7
--- /dev/null
+++ b/gui/src/components/settings/pages/KeybindSettings.tsx
@@ -0,0 +1,269 @@
+import { KeybindRecorderModal } from '@/components/commons/KeybindRecorderModal';
+import {
+ SettingsPageLayout,
+ SettingsPagePaneLayout,
+} from '@/components/settings/SettingsPageLayout';
+import { WrenchIcon } from '@/components/commons/icon/WrenchIcons';
+import { Typography } from '@/components/commons/Typography';
+import { useLocalization } from '@fluent/react';
+import './KeybindSettings.scss';
+import { Button } from '@/components/commons/Button';
+import { KeybindsRow } from '@/components/commons/KeybindsRow';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
+import { ReactNode, useEffect, useRef, useState } from 'react';
+import {
+ ChangeKeybindRequestT,
+ KeybindRequestT,
+ KeybindResponseT,
+ KeybindT,
+ OpenUriRequestT,
+ RpcMessage,
+} from 'solarxr-protocol';
+import {
+ FieldPath,
+ FormProvider,
+ useFieldArray,
+ useForm,
+} from 'react-hook-form';
+import { useAppContext } from '@/hooks/app';
+import { useElectron } from '@/hooks/electron';
+
+export type KeybindForm = {
+ keybinds: {
+ id: number;
+ name: string;
+ binding: string[];
+ delay: number;
+ }[];
+};
+
+export function KeybindSettings() {
+ const electron = useElectron();
+ const { l10n } = useLocalization();
+ const { sendRPCPacket, useRPCPacket } = useWebsocketAPI();
+ const [isOpen, setIsOpen] = useState
(false);
+ const [defaultKeybindsState, setDefaultKeybindsState] = useState(
+ {
+ keybinds: [],
+ }
+ );
+ const currentIndex = useRef(null);
+ const { installInfo } = useAppContext();
+
+ const methods = useForm({
+ defaultValues: defaultKeybindsState,
+ });
+
+ const {
+ control,
+ handleSubmit,
+ reset,
+ setValue,
+ getValues,
+ setError,
+ clearErrors,
+ resetField,
+ } = methods;
+
+ const { fields } = useFieldArray({
+ control,
+ name: 'keybinds',
+ });
+
+ const onSubmit = () => {
+ const value = getValues();
+ if (checkDuplicates(value)) {
+ return;
+ }
+ clearErrors('keybinds');
+
+ value.keybinds.forEach((kb) => {
+ const changeKeybindRequest = new ChangeKeybindRequestT();
+
+ const keybind = new KeybindT();
+ keybind.keybindId = kb.id;
+ keybind.keybindNameId = kb.name;
+ keybind.keybindValue = kb.binding.join('+');
+ keybind.keybindDelay = kb.delay;
+
+ changeKeybindRequest.keybind = keybind;
+
+ sendRPCPacket(RpcMessage.ChangeKeybindRequest, changeKeybindRequest);
+ setIsOpen(false);
+ });
+ };
+
+ const checkDuplicates = (value: KeybindForm) => {
+ const normalized = value.keybinds
+ .filter((kb) => kb.binding.length > 0)
+ .map((kb) => JSON.stringify([...kb.binding].sort()));
+
+ const unique = new Set(normalized);
+
+ if (unique.size !== normalized.length) {
+ setError('keybinds', {
+ type: 'manual',
+ message: 'Duplicate keybind combinations are not allowed',
+ });
+ return true;
+ }
+
+ return false;
+ };
+
+ const handleOpenSystemSettingsButton = () => {
+ sendRPCPacket(RpcMessage.OpenUriRequest, new OpenUriRequestT());
+ };
+
+ useRPCPacket(
+ RpcMessage.KeybindResponse,
+ ({ keybind, defaultKeybinds }: KeybindResponseT) => {
+ if (!keybind) return;
+
+ const mappedDefaults = defaultKeybinds.map((kb) => ({
+ id: kb.keybindId,
+ name: typeof kb.keybindNameId === 'string' ? kb.keybindNameId : '',
+ binding:
+ typeof kb.keybindValue === 'string' ? kb.keybindValue.split('+') : [],
+ delay: kb.keybindDelay,
+ }));
+
+ setDefaultKeybindsState({ keybinds: mappedDefaults });
+ reset({ keybinds: mappedDefaults });
+
+ const mapped = keybind.map((kb) => ({
+ id: kb.keybindId,
+ name: typeof kb.keybindNameId === 'string' ? kb.keybindNameId : '',
+ binding:
+ typeof kb.keybindValue === 'string' ? kb.keybindValue.split('+') : [],
+ delay: kb.keybindDelay,
+ }));
+
+ mapped.forEach((keybind, index) => {
+ setValue(`keybinds.${index}.binding`, keybind.binding);
+ setValue(`keybinds.${index}.delay`, keybind.delay);
+ });
+ }
+ );
+
+ const handleOpenRecorderModal = (index: number) => {
+ currentIndex.current = index;
+ if (currentIndex !== null) {
+ setIsOpen(true);
+ }
+ };
+
+ const onClose = () => {
+ if (currentIndex.current != null) {
+ resetField(`keybinds.${currentIndex.current}.binding`);
+ }
+ setIsOpen(false);
+ };
+
+ const createKeybindRows = (): ReactNode => {
+ return fields.map((field, index) => {
+ return (
+
+
+
+ );
+ });
+ };
+
+ useEffect(() => {
+ sendRPCPacket(RpcMessage.KeybindRequest, new KeybindRequestT());
+ }, []);
+
+ return (
+
+ } id="keybinds">
+
+
+
+ {l10n
+ .getString('settings-keybinds-description')
+ .split('\n')
+ .map((line, i) => (
+ {line}
+ ))}
+
+ {!installInfo?.isWayland ? (
+
+ ) : (
+ electron.isElectron &&
+ electron.data().os.type !== 'windows' && (
+ <>
+
+
+
+
+
+ {createKeybindRows()}
+
+
+
+
+ }
+ isVisisble={isOpen}
+ onClose={onClose}
+ onUnbind={() => {
+ if (currentIndex.current != null)
+ setValue(
+ `keybinds.${currentIndex.current}.binding`,
+ []
+ );
+ }}
+ onSubmit={onSubmit}
+ />
+
+
+ )
+ )}
+