Skip to content

Commit 4052b3d

Browse files
adamshiervaniadamshiervani
authored
Move settings to modals & better modal handling (#194)
* feat(ui): Add other session handling route and modal * feat(ui): Add dedicated update route and refactor update dialog state management * feat(ui): Add local authentication route * refactor(ui): Remove LocalAuthPasswordDialog component and clean up related code * refactor(ui): Remove OtherSessionConnectedModal component * feat(ui): Add dedicated mount route and refactor mount media dialog * refactor(ui): Simplify Escape key navigation in device route * refactor(ui): Add TODO comments for future URL-based state migration * refactor(ui): Migrate settings and update routes to dedicated routes This commit introduces a comprehensive refactoring of the UI routing and state management: - Removed sidebar-based settings view - Replaced global modal state with URL-based routing - Added dedicated routes for settings, including general, security, and update sections - Simplified modal and sidebar interactions - Improved animation and transition handling using motion library - Removed deprecated components and simplified route structure * fix(ui): Add TODO comment for modal session interaction * refactor(ui): Move USB configuration to new settings setup This commit introduces several improvements to the USB configuration workflow: - Refactored USB configuration dialog component - Simplified USB config state management - Moved USB configuration to hardware settings route - Updated JSON-RPC type definitions - Cleaned up unused imports and components - Improved error handling and notifications * refactor(ui): Replace react-router-dom navigation with custom navigation hook This commit introduces a new custom navigation hook `useDeviceUiNavigation` to replace direct usage of `useNavigate` across multiple components: - Removed direct `useNavigate` imports in various components - Added `navigateTo` method from new navigation hook - Updated navigation calls in ActionBar, MountPopover, UpdateInProgressStatusCard, and other routes - Simplified navigation logic and prepared for potential future navigation enhancements - Removed console logs and unnecessary comments * refactor(ui): Remove unused react-router-dom import Clean up unnecessary import of `useNavigate` from react-router-dom in device settings route * feat(ui): Improve mobile navigation and scrolling in device settings * refactor(ui): Reorganize device access and security settings This commit introduces several changes to the device access and security settings: - Renamed "Security" section to "Access" in settings navigation - Moved local authentication routes from security to access - Removed deprecated security settings route - Added new route for device access settings with cloud and local authentication management - Updated cloud URL and adoption logic to be part of the access settings - Simplified routing and component structure for better user experience * fix(ui): Update logout button hover state color * fix(ui): Adjust device de-registration button size to small * fix(ui): Update appearance settings section header and description * refactor(ui): Replace SectionHeader with new SettingsPageHeader and SettingsSectionHeader components This commit introduces two new header components for settings pages: - Created SettingsPageHeader for main page headers - Created SettingsSectionHeader for subsection headers - Replaced all existing SectionHeader imports with new components - Updated styling and type definitions to support more flexible header rendering * feat(ui): Add dev channel toggle to advanced settings Move dev channel update option from general settings to advanced settings - Introduced new state and handler for dev channel toggle - Removed dev channel option from general settings route - Added dev channel toggle in advanced settings with error handling
1 parent 77263e7 commit 4052b3d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+2876
-2330
lines changed

‎config.go‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ var defaultConfig = &Config{
5353
ProductId: "0x0104", //Multifunction Composite Gadget
5454
SerialNumber: "",
5555
Manufacturer: "JetKVM",
56-
Product: "JetKVM USB Emulation Device",
56+
Product: "USB Emulation Device",
5757
},
5858
}
5959

‎jsonrpc.go‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -780,6 +780,10 @@ func rpcResetCloudUrl() error {
780780
return nil
781781
}
782782

783+
func rpcGetDefaultCloudUrl() (string, error) {
784+
return defaultConfig.CloudURL, nil
785+
}
786+
783787
var rpcHandlers = map[string]RPCHandler{
784788
"ping": {Func: rpcPing},
785789
"getDeviceID": {Func: rpcGetDeviceID},
@@ -841,4 +845,5 @@ var rpcHandlers = map[string]RPCHandler{
841845
"setCloudUrl": {Func: rpcSetCloudUrl, Params: []string{"url"}},
842846
"getCloudUrl": {Func: rpcGetCloudUrl},
843847
"resetCloudUrl": {Func: rpcResetCloudUrl},
848+
"getDefaultCloudUrl": {Func: rpcGetDefaultCloudUrl},
844849
}

‎ui/.env.device‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
# Used in settings page to know where to link to when user wants to adopt a device to the cloud
2-
VITE_CLOUD_APP=http://localhost:5173
2+
VITE_CLOUD_APP=http://app.jetkvm.com

‎ui/package-lock.json‎

Lines changed: 65 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ui/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
"framer-motion": "^11.15.0",
3232
"lodash.throttle": "^4.1.1",
3333
"mini-svg-data-uri": "^1.4.4",
34+
"motion": "^12.4.7",
3435
"react": "^18.2.0",
3536
"react-animate-height": "^3.2.3",
3637
"react-dom": "^18.2.0",

‎ui/src/components/ActionBar.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,14 @@ import MountPopopover from "./popovers/MountPopover";
1717
import { Fragment, useCallback, useRef } from "react";
1818
import { CommandLineIcon } from "@heroicons/react/20/solid";
1919
import ExtensionPopover from "./popovers/ExtensionPopover";
20+
import { useDeviceUiNavigation } from "../hooks/useAppNavigation";
2021

2122
export default function Actionbar({
2223
requestFullscreen,
2324
}: {
2425
requestFullscreen: () => Promise<void>;
2526
}) {
27+
const { navigateTo } = useDeviceUiNavigation();
2628
const virtualKeyboard = useHidStore(state => state.isVirtualKeyboardEnabled);
2729

2830
const setVirtualKeyboard = useHidStore(state => state.setVirtualKeyboardEnabled);
@@ -260,15 +262,16 @@ export default function Actionbar({
260262
/>
261263
</div>
262264

263-
<div className="hidden xs:block ">
265+
<div>
264266
<Button
265267
size="XS"
266268
theme="light"
267269
text="Settings"
268270
LeadingIcon={LuSettings}
269-
onClick={() => toggleSidebarView("system")}
271+
onClick={() => navigateTo("/settings")}
270272
/>
271273
</div>
274+
272275
<div className="hidden items-center gap-x-2 lg:flex">
273276
<div className="h-4 w-[1px] bg-slate-300 dark:bg-slate-600" />
274277
<Button

‎ui/src/components/AutoHeight.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const AutoHeight = ({ children, ...props }: { children: React.ReactNode }) => {
2222
{...props}
2323
height={height}
2424
duration={300}
25-
contentClassName="auto-content pointer-events-none"
25+
contentClassName="h-fit"
2626
contentRef={contentDiv}
2727
disableDisplayNone
2828
>

‎ui/src/components/Card.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react";
1+
import React, { forwardRef } from "react";
22
import { cx } from "@/cva.config";
33

44
type CardPropsType = {
@@ -16,23 +16,28 @@ export const GridCard = ({
1616
return (
1717
<Card className={cx("overflow-hidden", cardClassName)}>
1818
<div className="relative h-full">
19-
<div className="absolute inset-0 z-0 w-full h-full transition-colors duration-300 ease-in-out bg-gradient-to-tr from-blue-50/30 to-blue-50/20 dark:from-slate-800/30 dark:to-slate-800/20" />
19+
<div className="absolute inset-0 z-0 h-full w-full bg-gradient-to-tr from-blue-50/30 to-blue-50/20 transition-colors duration-300 ease-in-out dark:from-slate-800/30 dark:to-slate-800/20" />
2020
<div className="absolute inset-0 z-0 h-full w-full rotate-0 bg-grid-blue-100/[25%] dark:bg-grid-slate-700/[7%]" />
21-
<div className="h-full isolate">{children}</div>
21+
<div className="isolate h-full">{children}</div>
2222
</div>
2323
</Card>
2424
);
2525
};
2626

27-
export default function Card({ children, className }: CardPropsType) {
27+
const Card = forwardRef<HTMLDivElement, CardPropsType>(({ children, className }, ref) => {
2828
return (
2929
<div
30+
ref={ref}
3031
className={cx(
31-
"w-full rounded border-none dark:bg-slate-800 dark:outline-slate-300/20 bg-white shadow outline outline-1 outline-slate-800/30",
32+
"w-full rounded border-none bg-white shadow outline outline-1 outline-slate-800/30 dark:bg-slate-800 dark:outline-slate-300/20",
3233
className,
3334
)}
3435
>
3536
{children}
3637
</div>
3738
);
38-
}
39+
});
40+
41+
Card.displayName = "Card";
42+
43+
export default Card;

‎ui/src/components/Header.tsx‎

Lines changed: 40 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Fragment, useCallback } from "react";
22
import { useNavigate } from "react-router-dom";
33
import { ArrowLeftEndOnRectangleIcon, ChevronDownIcon } from "@heroicons/react/16/solid";
4-
import { Menu, MenuButton, Transition } from "@headlessui/react";
4+
import { Menu, MenuButton } from "@headlessui/react";
55
import Container from "@/components/Container";
66
import Card from "@/components/Card";
77
import { LuMonitorSmartphone } from "react-icons/lu";
@@ -37,9 +37,7 @@ export default function DashboardNavbar({
3737
const setUser = useUserStore(state => state.setUser);
3838
const navigate = useNavigate();
3939
const onLogout = useCallback(async () => {
40-
const logoutUrl = isOnDevice
41-
? `${DEVICE_API}/auth/logout`
42-
: `${CLOUD_API}/logout`;
40+
const logoutUrl = isOnDevice ? `${DEVICE_API}/auth/logout` : `${CLOUD_API}/logout`;
4341
const res = await api.POST(logoutUrl);
4442
if (!res.ok) return;
4543

@@ -51,10 +49,10 @@ export default function DashboardNavbar({
5149
const usbState = useHidStore(state => state.usbState);
5250

5351
return (
54-
<div className="w-full bg-white border-b select-none border-b-slate-800/20 dark:border-b-slate-300/20 dark:bg-slate-900">
52+
<div className="w-full select-none border-b border-b-slate-800/20 bg-white dark:border-b-slate-300/20 dark:bg-slate-900">
5553
<Container>
56-
<div className="flex items-center justify-between h-14">
57-
<div className="flex items-center shrink-0 gap-x-8">
54+
<div className="flex h-14 items-center justify-between">
55+
<div className="flex shrink-0 items-center gap-x-8">
5856
<div className="inline-block shrink-0">
5957
<img src={LogoBlueIcon} alt="" className="h-[24px] dark:hidden" />
6058
<img src={LogoWhiteIcon} alt="" className="hidden h-[24px] dark:block" />
@@ -75,10 +73,10 @@ export default function DashboardNavbar({
7573
})}
7674
</div>
7775
</div>
78-
<div className="flex items-center justify-end w-full gap-x-2">
79-
<div className="flex items-center space-x-4 shrink-0">
76+
<div className="flex w-full items-center justify-end gap-x-2">
77+
<div className="flex shrink-0 items-center space-x-4">
8078
{showConnectionStatus && (
81-
<div className="items-center hidden gap-x-2 md:flex">
79+
<div className="hidden items-center gap-x-2 md:flex">
8280
<div className="w-[159px]">
8381
<PeerConnectionStatusCard
8482
state={peerConnectionState}
@@ -105,66 +103,55 @@ export default function DashboardNavbar({
105103
text={
106104
<>
107105
{picture ? <></> : userEmail}
108-
<ChevronDownIcon className="w-4 h-4 shrink-0 text-slate-900 dark:text-white" />
106+
<ChevronDownIcon className="h-4 w-4 shrink-0 text-slate-900 dark:text-white" />
109107
</>
110108
}
111-
LeadingIcon={({ className }) => (
109+
LeadingIcon={({ className }) =>
112110
picture && (
113111
<img
114112
src={picture}
115113
alt="Avatar"
116114
className={cx(
117-
className,
118-
"h-8 w-8 rounded-full border-2 border-transparent transition-colors group-hover:border-blue-700",
119-
)}
115+
className,
116+
"h-8 w-8 rounded-full border-2 border-transparent transition-colors group-hover:border-blue-700",
117+
)}
120118
/>
121119
)
122-
)}
120+
}
123121
/>
124122
</MenuButton>
125123
</div>
126-
<Transition
127-
as={Fragment}
128-
enter="transition ease-in-out duration-75"
129-
enterFrom="transform opacity-0"
130-
enterTo="transform opacity-100"
131-
leave="transition ease-in-out duration-75"
132-
leaveFrom="transform opacity-75"
133-
leaveTo="transform opacity-0"
134-
>
135-
<Menu.Items className="absolute right-0 z-50 w-56 mt-2 origin-top-right focus:outline-none">
136-
<Card className="overflow-hidden">
137-
<div className="p-1 space-y-1 dark:text-white">
138-
{userEmail && (
139-
<div className="border-b border-b-slate-800/20 dark:border-slate-300/20">
140-
<Menu.Item>
141-
<div className="p-2">
142-
<div className="text-xs font-display">
143-
Logged in as
144-
</div>
145-
<div className="w-[200px] truncate font-display text-sm font-semibold">
146-
{userEmail}
147-
</div>
148-
</div>
149-
</Menu.Item>
150-
</div>
151-
)}
152-
<div>
124+
125+
<Menu.Items className="absolute right-0 z-50 mt-2 w-56 origin-top-right focus:outline-none">
126+
<Card className="overflow-hidden">
127+
<div className="space-y-1 p-1 dark:text-white">
128+
{userEmail && (
129+
<div className="border-b border-b-slate-800/20 dark:border-slate-300/20">
153130
<Menu.Item>
154-
<div onClick={onLogout}>
155-
<button className="block w-full">
156-
<div className="flex items-center gap-x-2 rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-slate-600 dark:hover:bg-slate-700">
157-
<ArrowLeftEndOnRectangleIcon className="w-4 h-4" />
158-
<div className="font-display">Log out</div>
159-
</div>
160-
</button>
131+
<div className="p-2">
132+
<div className="font-display text-xs">Logged in as</div>
133+
<div className="w-[200px] truncate font-display text-sm font-semibold">
134+
{userEmail}
135+
</div>
161136
</div>
162137
</Menu.Item>
163138
</div>
139+
)}
140+
<div>
141+
<Menu.Item>
142+
<div onClick={onLogout}>
143+
<button className="block w-full">
144+
<div className="flex items-center gap-x-2 rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700">
145+
<ArrowLeftEndOnRectangleIcon className="h-4 w-4" />
146+
<div className="font-display">Log out</div>
147+
</div>
148+
</button>
149+
</div>
150+
</Menu.Item>
164151
</div>
165-
</Card>
166-
</Menu.Items>
167-
</Transition>
152+
</div>
153+
</Card>
154+
</Menu.Items>
168155
</Menu>
169156
</>
170157
) : null}

0 commit comments

Comments
 (0)