Use full-width editor device drawer

src/frontend/components/circuit-tree-editor.tsx

@@ -196,6 +196,8 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
   const [activeSectionId, setActiveSectionId] = useState<string | null>(null);
   const [isSaving, setIsSaving] = useState(false);
   const [projectDevices, setProjectDevices] = useState<ProjectDeviceDto[]>([]);
+  const [isProjectDeviceDrawerOpen, setIsProjectDeviceDrawerOpen] =
+    useState(false);
   const [projectDeviceSearch, setProjectDeviceSearch] = useState("");
   const [selectedProjectDeviceId, setSelectedProjectDeviceId] = useState<string | null>(null);
   const [targetSectionId, setTargetSectionId] = useState<string | null>(null);
@@ -2537,6 +2539,19 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
         <button type="button" onClick={toggleColumnSettingsMenu} aria-expanded={isColumnMenuOpen}>
           Spalten
         </button>
+        <button
+          aria-controls="project-device-drawer"
+          aria-expanded={isProjectDeviceDrawerOpen}
+          className="project-device-drawer-toggle"
+          type="button"
+          onClick={() =>
+            setIsProjectDeviceDrawerOpen((current) => !current)
+          }
+        >
+          {isProjectDeviceDrawerOpen
+            ? "Projektgeräte schließen"
+            : `Projektgeräte öffnen (${projectDevices.length})`}
+        </button>
         <button
           type="button"
           onClick={clearSortAndFilters}
@@ -2566,8 +2581,25 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
       ) : null}
       {isSaving ? <div className="notice info">Wird gespeichert …</div> : null}
       <div className="tree-editor-layout">
-        <aside className="project-device-sidebar">
-          <h3>Projektgeräte</h3>
+        {isProjectDeviceDrawerOpen ? (
+        <aside
+          className="project-device-sidebar project-device-drawer"
+          id="project-device-drawer"
+        >
+          <div className="project-device-drawer-header">
+            <div>
+              <h3>Projektgeräte</h3>
+              <span>{projectDevices.length} verfügbar</span>
+            </div>
+            <button
+              aria-label="Projektgeräte schließen"
+              disabled={draggingProjectDeviceId !== null}
+              onClick={() => setIsProjectDeviceDrawerOpen(false)}
+              type="button"
+            >
+              Schließen
+            </button>
+          </div>
           <input
             type="text"
             placeholder="Name oder Anzeigename suchen …"
@@ -2668,6 +2700,7 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
             </button>
           </div>
         </aside>
+        ) : null}
         <div
           className="tree-grid-wrap"
           ref={containerRef}