fix: code reviews

Author: Nemikolh

packages/astro/src/default/components/MobileContentToggle.astro

@@ -1,17 +1,13 @@
----
-
----
-
 <div class="h-12 sm:hidden"></div>
 <view-toggle
   class="fixed sm:hidden h-12 bottom-0 w-full bg-tk-elements-app-backgroundColor border-t border-tk-elements-app-borderColor flex justify-center items-center z-60 text-tk-elements-app-textColor"
 >
-  <button aria-hidden="true">Tutorial</button>
-  <button aria-pressed="true" class="rounded-full w-8 h-4 p-0.5 bg-gray-4 dark:bg-gray-6 mx-2 relative">
+  <button>Tutorial</button>
+  <button class="rounded-full w-8 h-4 p-0.5 bg-gray-4 dark:bg-gray-6 mx-2 relative">
     <span class="inline-block transition-all absolute top-0.5 left-0.5 rounded-full bg-white dark:bg-gray-2 w-3 h-3"
     ></span>
   </button>
-  <button aria-hidden="true">Editor</button>
+  <button>Editor</button>
 </view-toggle>
 <script>
   import { viewStore, type View } from '../stores/view-store';
@@ -20,9 +16,7 @@
     constructor() {
       super();
 
-      const [tutorialBtn, toggleButton, editorButton] = this.querySelectorAll(
-        ':scope > button' as 'button',
-      );
+      const [tutorialBtn, toggleButton, editorButton] = this.querySelectorAll(':scope > button' as 'button');
 
       const toggle = toggleButton.querySelector('span')!;
 

packages/astro/src/default/components/ResizablePanel.astro

@@ -63,13 +63,13 @@ const panelClass = `overflow-hidden ${type === 'horizontal' ? 'h-full' : ''}`;
         $container.style.setProperty('--pos', pos);
       }
     </script>
-    <div class={panelClass}>
+    <div class={panelClass} data-id="main-panel">
       <slot name="a" />
     </div>
     {
       hasSidePanel && (
         <>
-          <div class={`${panelClass} ${sidePanelClass}`}>
+          <div class={`${panelClass} ${sidePanelClass}`} data-id="side-panel">
             <slot name="b" />
           </div>
           <div
@@ -97,12 +97,16 @@ const panelClass = `overflow-hidden ${type === 'horizontal' ? 'h-full' : ''}`;
     #dragging = false;
 
     #container: HTMLElement;
+    #mainPanel: HTMLElement;
+    #sidePanel: HTMLElement | undefined;
     #divider: HTMLElement | undefined;
 
     constructor() {
       super();
 
       this.#container = this.querySelector(':scope > [data-id="container"]') as HTMLElement;
+      this.#mainPanel = this.#container.querySelector(':scope > [data-id="main-panel"]') as HTMLElement;
+      this.#sidePanel = this.#container.querySelector(':scope > [data-id="side-panel"]') as HTMLElement | undefined;
       this.#divider = this.#container.querySelector(':scope > [data-id="divider"]') as HTMLElement | undefined;
 
       this.#width = this.#container.clientWidth;
@@ -126,11 +130,11 @@ const panelClass = `overflow-hidden ${type === 'horizontal' ? 'h-full' : ''}`;
     }
 
     mainPanel(): HTMLElement {
-      return this.#container.children[1] as HTMLElement;
+      return this.#mainPanel;
     }
 
     sidePanel(): HTMLElement | undefined {
-      return this.#container.children[2] as HTMLElement | undefined;
+      return this.#sidePanel;
     }
 
     divider(): HTMLElement | undefined {