feat: Add detached window with optional toolbar and hostname display#1187
feat: Add detached window with optional toolbar and hostname display#1187tvinhas wants to merge 3 commits intojetkvm:devfrom
Conversation
|
|
|
|
This PR adds a "Detach" button to the top bar that when clicked opens a browser popup with minimal UI so the user can have multiple KVMs open with minimal distractions, without wasting space in the monitor. 
|
tvinhas
force-pushed
the
detach-window
branch
from
9db988e to
5a2c9a2
Compare
- Hide dotted background pattern in detached mode - Remove margins around video container - Remove min-width/height constraints and border/shadow on video
tvinhas
force-pushed
the
detach-window
branch
from
5a2c9a2 to
70f8418
Compare
Prevents merge conflict with copy-and-paste-ocr branch by keeping the import format consistent with dev. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
adamshiervani
left a comment
adamshiervani
left a comment
There was a problem hiding this comment.
Thanks for taking the time implementing this!
Overall feedback - can be much simpler and duplicate less code. The Action bar will get too crowded with another button, but I'll fix that once this is merged, as I need to rethink the entire navigation.
| @@ -0,0 +1,73 @@ | |||
| import { LuX } from "react-icons/lu"; | |||
There was a problem hiding this comment.
Remove this and simply use the replace the fullscreen buttons in the Actionbar with a Close button
| @@ -0,0 +1,550 @@ | |||
| import { useCallback, useEffect, useRef, useState } from "react"; | |||
There was a problem hiding this comment.
By creating a new /detached route, you're missing a bunch of important code and duplicating the most complex part of the application, which is the signaling. Just re-use the device.$id.tsx route and simply add a query parameter for the detached mode.
| // Height constants for window sizing | ||
| const VIDEO_HEIGHT = 720; | ||
| const DETACHED_TOOLBAR_HEIGHT = 32; // h-8 = 32px | ||
| const ACTION_BAR_HEIGHT = 40; // min-h-[39.5px] ≈ 40px |
There was a problem hiding this comment.
This wont last long, I would suggest just set an arbitrary window size as it's the initial window size. The user can resize according to their needs if they don't like it.
3 participants
Summary
Adds a "Detach" button to open the KVM video stream in a separate window. The detached window can optionally show/hide toolbars (configurable in Settings > Appearance), with the window size automatically adjusting. The window title
displays "JetKVM: {hostname}" for easy identification.
Checklist
make test_e2elocally and passed