FE-1599: Start subnet navigation and presentation cleanup

.changeset/subnet-panel-navigation.md

@@ -0,0 +1,5 @@
+---
+"@hashintel/petrinaut": patch
+---
+
+Open a subnet directly from a component instance's properties panel.

libs/@hashintel/petrinaut/docs/drawing-a-net.md

@@ -94,6 +94,8 @@ You can also focus the outgoing handle with **Tab**, press **Enter** or **Space*
 
 Subnets can expose selected places as ports. If you don't see subnet or component controls, enable **User settings → Labs → Net Components** first.
 
+To open a subnet from the canvas, select a component instance and click **Open subnet** in its properties panel. This navigation is also available in read-only mode.
+
 Open the subnet, select a boundary place, and enable **Component port** in the place properties panel.
 
 When you instantiate that subnet as a component, each port appears as a handle on the component instance:

libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/component-instance-properties/subviews/main.tsx

@@ -1,3 +1,5 @@
+import { use } from "react";
+
 import {
   Button,
   Form,
@@ -9,6 +11,7 @@ import { css } from "@hashintel/ds-helpers/css";
 import { validateEntityName } from "@hashintel/petrinaut-core";
 
 import { usePetrinautMutations } from "../../../../../../../react";
+import { ActiveNetContext } from "../../../../../../../react/state/active-net-context";
 import { useIsReadOnly } from "../../../../../../../react/state/use-is-read-only";
 import { DescriptionField } from "../../../../../../components/description-field";
 import { PropertyValue } from "../../../../../../components/property-value";
@@ -50,6 +53,7 @@ const hintTextStyle = css({
 });
 
 const ComponentInstanceMainContent: React.FC = () => {
+  const { setActiveSubnetId } = use(ActiveNetContext);
   const { instance, subnet, subnetParameters, updateComponentInstance } =
     useComponentInstancePropertiesContext();
   const isDisabled = useIsReadOnly();
@@ -122,6 +126,15 @@ const ComponentInstanceMainContent: React.FC = () => {
           <div className={hintTextStyle}>
             {subnet?.name ?? "The referenced subnet no longer exists."}
           </div>
+          {subnet && (
+            <Button
+              size="xs"
+              variant="subtle"
+              onClick={() => setActiveSubnetId(subnet.id)}
+            >
+              Open subnet
+            </Button>
+          )}
         </Form.Field>
       </Form.Section>