feat: open keyboard shortcuts with ?

app/src/lib/sidebar/Panel.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { getContext, type Snippet } from "svelte";
-  import type { PanelState } from "./PanelState.svelte";
+  import { type Snippet } from "svelte";
+  import { panelState } from "./PanelState.svelte";
 
   const {
     id,
@@ -18,8 +18,6 @@
     children?: Snippet;
   }>();
 
-  const panelState = getContext<PanelState>("panel-state");
-
   const panel = panelState.registerPanel(id, icon, classes, hidden);
   $effect(() => {
     panel.hidden = hidden;

app/src/lib/sidebar/PanelState.svelte.ts

@@ -1,15 +1,14 @@
-import { localState } from "$lib/helpers/localState.svelte";
+import { localState } from '$lib/helpers/localState.svelte';
 
 type Panel = {
   icon: string;
   classes: string;
   hidden?: boolean;
-}
-
-export class PanelState {
+};
 
+class PanelState {
   panels = $state<Record<string, Panel>>({});
-  activePanel = localState<string | boolean>("node.activePanel", "")
+  activePanel = localState<string | boolean>('node.activePanel', '');
 
   get keys() {
     return Object.keys(this.panels);
@@ -19,7 +18,7 @@ export class PanelState {
     const state = $state({
       icon: icon,
       classes: classes,
-      hidden: hidden,
+      hidden: hidden
     });
     this.panels[id] = state;
     return state;
@@ -29,7 +28,13 @@ export class PanelState {
     if (this.activePanel.value) {
       this.activePanel.value = false;
     } else {
-      this.activePanel.value = this.keys[0]
+      this.activePanel.value = this.keys[0];
     }
   }
+
+  public setActivePanel(panelId: string) {
+    this.activePanel.value = panelId;
+  }
 }
+
+export const panelState = new PanelState();

app/src/lib/sidebar/Sidebar.svelte

@@ -1,9 +1,6 @@
 <script lang="ts">
-  import { setContext, type Snippet } from "svelte";
-  import { PanelState } from "./PanelState.svelte";
-
-  const state = new PanelState();
-  setContext("panel-state", state);
+  import { type Snippet } from "svelte";
+  import { panelState as state } from "./PanelState.svelte";
 
   const { children } = $props<{ children?: Snippet }>();
 </script>