docs: add Focus Mode section and group-from-selection video

Document Focus Mode on the Control Center overview (right-click a node
and choose Focus, or select it and press F) with two screenshots, and
move the F shortcut prose there from the Draft Mode page. Add a
recording of creating a group from a multi-peer selection to the
Draft Mode page. New media compressed like the rest.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Eduard Gert
2026-08-20 15:47:58 +02:00
parent af71ccae45
commit cd60447368
5 changed files with 24 additions and 2 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 125 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 139 KiB

View File

@@ -44,7 +44,6 @@ The toolbar at the bottom of the canvas holds the select and hand (pan) tools, z
- **Select** (`V`) is the default tool: click a node to select it, drag it to move it, or drag across empty canvas to select several nodes at once.
- **Hand** (`H`) pans the canvas as you drag, so you can move around a large draft without touching any nodes.
- With a node selected, `F` focuses it and dims everything unrelated.
### Add Nodes
@@ -103,7 +102,14 @@ Right-click a node and choose **Rename**. We rename the server to `staging-01` a
### Assign Peers to Groups
Drag the `staging-01` node onto the `Staging` group. The peer is absorbed into the group and the group's member count goes up. Membership travels with the group's change, so you never manage it separately. You can also select several nodes and press `G` to create a new group containing them.
Drag the `staging-01` node onto the `Staging` group. The peer is absorbed into the group and the group's member count goes up. Membership travels with the group's change, so you never manage it separately.
To group several peers at once, drag a selection across them, then click **Create Group** in the selection menu (or press `G`) and name the group:
<p>
<Video src="/docs-static/img/manage/control-center/control-center-draft-group-from-selection.mp4"
label="Drag-selecting several peers, clicking Create Group in the selection menu, and naming the new group"/>
</p>
<p>
<Video src="/docs-static/img/manage/control-center/control-center-draft-drag-to-group.mp4"

View File

@@ -88,6 +88,22 @@ Use this to see who can access resources in your routed [networks](/manage/netwo
- The network node shows its resources. Connecting lines display the port allowed by the policy and which groups have access.
- Click any policy chip to edit it in the standard editor. NetBird Networks and routing peers enable access to private subnets and IP resources.
## Focus Mode
When the graph gets busy, focus a single node to see only what is connected to it. Right-click a node and choose **Focus**, or select the node and press `F`.
<p>
<img src="/docs-static/img/manage/control-center/control-center-focus-context-menu.png" alt="The right-click menu on a policy node with the Focus option highlighted"
className="imagewrapper-big"/>
</p>
Everything unrelated dims, leaving only the focused node and its connections highlighted. A "Focusing on" pill at the top of the canvas shows what is in focus; close it to return to the full view.
<p>
<img src="/docs-static/img/manage/control-center/control-center-focus-active.png" alt="Focus Mode active on a group node, with unrelated nodes dimmed and the Focusing on pill shown at the top of the canvas"
className="imagewrapper-big"/>
</p>
## Edit Nodes
Control Center is not just a viewer. In the live view you can make changes in place, like editing a policy or changing a peer's group assignments: