fix: redirect to preset

apps/client/src/common/components/client-modal/RedirectClientModal.tsx

@@ -33,6 +33,11 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
     if (newPath === '/' || newPath === currentPath) {
       return;
     }
+
+    if (newPath.startsWith('preset-')) {
+      setRedirect({ target: id, redirect: newPath });
+    }
+
     setRedirect({ target: id, redirect: newPath });
     onClose();
   };
@@ -45,7 +50,7 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
       label: view.label,
     })),
     ...enabledPresets.map((preset) => ({
-      value: preset.search,
+      value: `preset-${preset.alias}`,
       label: `URL Preset: ${preset.alias}`,
     })),
   ];
@@ -61,32 +66,11 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
         <>
           <Info>
             Remotely redirect the client to a different URL. <br />
-            Either by selecting a URL Preset or entering a custom path.
+            Either by entering a custom path or selecting a URL Preset.
             <br />
             <br />
             <AppLink search='settings=sharing__presets'>Manage URL Presets</AppLink>
           </Info>
-          <div>
-            <span className={style.label}>Select View or URL Preset</span>
-            <div className={style.textEntry}>
-              <Select
-                fluid
-                options={viewOptions}
-                defaultValue={viewOptions[0].value}
-                onValueChange={(value) => setSelected(value)}
-                disabled={enabledPresets.length === 0}
-              />
-              <Button
-                variant='primary'
-                aria-label='Redirect to preset'
-                className={style.redirect}
-                disabled={enabledPresets.length === 0 || selected === '/'}
-                onClick={() => handleRedirect(selected)}
-              >
-                Redirect <IoArrowForward />
-              </Button>
-            </div>
-          </div>
           <div className={style.inlineEntry}>
             <span className={style.label}>Enter custom path</span>
             <label className={style.textEntry}>
@@ -100,9 +84,34 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
               className={style.redirect}
               onClick={() => handleRedirect(path)}
             >
-              Redirect <IoArrowForward />
+              Redirect
+              <IoArrowForward />
             </Button>
           </div>
+          <div>
+            <span className={style.label}>Select View or URL Preset</span>
+            <div className={style.inlineEntry}>
+              <label className={style.textEntry}>
+                {origin}
+                <Select
+                  fluid
+                  options={viewOptions}
+                  defaultValue={viewOptions[0].value}
+                  onValueChange={(value) => setSelected(value)}
+                  disabled={enabledPresets.length === 0}
+                />
+              </label>
+              <Button
+                variant='primary'
+                aria-label='Redirect to preset'
+                className={style.redirect}
+                disabled={enabledPresets.length === 0 || selected === '/'}
+                onClick={() => handleRedirect(selected)}
+              >
+                Redirect <IoArrowForward />
+              </Button>
+            </div>
+          </div>
         </>
       }
     />

apps/client/src/features/app-settings/panel/network-panel/client-control/ClientControlPanel.module.scss

@@ -14,4 +14,8 @@
 .copiable {
   cursor: text  ;
   user-select: text;
-}
+}
+
+.self {
+  background-color: $blue-1100;
+}

apps/client/src/features/app-settings/panel/network-panel/client-control/ClientList.tsx

@@ -8,6 +8,7 @@ import { RenameClientModal } from '../../../../../common/components/client-modal
 import Tag from '../../../../../common/components/tag/Tag';
 import { setClientRemote } from '../../../../../common/hooks/useSocket';
 import { useClientStore } from '../../../../../common/stores/clientStore';
+import { cx } from '../../../../../common/utils/styleUtils';
 import * as Panel from '../../../panel-utils/PanelUtils';
 
 import style from './ClientControlPanel.module.scss';
@@ -71,13 +72,13 @@ export default function ClientList() {
               const { identify, name, path } = client;
               const isCurrent = id === key;
               return (
-                <tr key={key}>
+                <tr key={key} className={cx([isCurrent && style.self])}>
                   <Panel.InlineElements relation='inner' as='td'>
                     {isCurrent && <Tag>SELF</Tag>}
                     {name}
                   </Panel.InlineElements>
                   <td className={style.copiable}>{path}</td>
-                  <Panel.InlineElements relation='inner'>
+                  <Panel.InlineElements relation='inner' as='td'>
                     <Button
                       size='small'
                       className={`${identify ? style.blink : ''}`}