From c3f83488d0a54cd7667ea854d6599c260a7a5938 Mon Sep 17 00:00:00 2001
From: Adam Riley <riley.ad@gmail.com>
Date: Tue, 4 Mar 2025 11:51:11 +0000
Subject: [PATCH 1/4] Make side bar icons match between dashboard and graph
 editor

---
 app/gui/src/project-view/assets/icons.svg     | 20 ++++++++++++++++---
 .../src/project-view/components/DockPanel.vue |  4 ++++
 app/gui/src/project-view/stores/rightDock.ts  |  2 +-
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/app/gui/src/project-view/assets/icons.svg b/app/gui/src/project-view/assets/icons.svg
index 420753256b9a..dbc67b426bde 100644
--- a/app/gui/src/project-view/assets/icons.svg
+++ b/app/gui/src/project-view/assets/icons.svg
@@ -98,7 +98,14 @@
   </symbol>
 
   <symbol id="bottom_panel" viewBox="0 0 16 16" width="16" height="16" fill="none">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M2 2.66667C2 2.29848 2.29848 2 2.66667 2H13.3333C13.7015 2 14 2.29848 14 2.66667V13.3333C14 13.7015 13.7015 14 13.3333 14H2.66667C2.29848 14 2 13.7015 2 13.3333V2.66667ZM5.33333 10C4.96514 10 4.66667 10.2985 4.66667 10.6667C4.66667 11.0349 4.96514 11.3333 5.33333 11.3333H10.6667C11.0349 11.3333 11.3333 11.0349 11.3333 10.6667C11.3333 10.2985 11.0349 10 10.6667 10H5.33333Z" fill="currentColor"></path>
+    <g clip-path="url(#clip0_961_899)">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M16 5.11884V10.8812C16 11.5967 16 12.1872 15.9607 12.6683C15.9199 13.1679 15.8323 13.6272 15.6125 14.0587C15.2716 14.7276 14.7277 15.2716 14.0586 15.6124C13.6272 15.8323 13.1679 15.9199 12.6683 15.9607C12.1872 16 11.5967 16 10.8812 16H5.11884C4.40329 16 3.8128 16 3.33173 15.9607C2.83209 15.9199 2.3728 15.8323 1.94133 15.6124C1.27236 15.2716 0.728445 14.7276 0.387556 14.0587C0.167734 13.6272 0.0800896 13.1679 0.0392896 12.6683C6.78831e-07 12.1872 -1.19209e-07 11.5967 -1.19209e-07 10.8812V5.11883C-1.19209e-07 4.40331 6.78831e-07 3.81277 0.0392896 3.33172C0.0800896 2.83207 0.167734 2.37277 0.387556 1.94137C0.728445 1.27235 1.27236 0.728417 1.94133 0.387533C2.3728 0.167719 2.83209 0.0801068 3.33173 0.0392844C3.8128 -1.96927e-05 4.40329 -1.06242e-05 5.11884 3.6591e-07H10.8812C11.5967 -1.06242e-05 12.1872 -1.9696e-05 12.6683 0.0392844C13.1679 0.0801068 13.6272 0.167719 14.0586 0.387533C14.7277 0.728417 15.2716 1.27235 15.6125 1.94137C15.8323 2.37277 15.9199 2.83207 15.9607 3.33172C16 3.81277 16 4.40331 16 5.11884ZM4.44444 10.6667C3.95351 10.6667 3.55556 11.0646 3.55556 11.5556C3.55556 12.0465 3.95351 12.4444 4.44444 12.4444H11.5556C12.0465 12.4444 12.4444 12.0465 12.4444 11.5556C12.4444 11.0646 12.0465 10.6667 11.5556 10.6667H4.44444Z" fill="currentColor"></path>
+    </g>
+    <defs>
+      <clipPath id="clip0_961_899">
+        <rect width="16" height="16" fill="white" transform="matrix(0 1 -1 0 16 0)"></rect>
+      </clipPath>
+    </defs>
   </symbol>
 
   <symbol id="braces" viewBox="0 0 16 16" width="16" height="16" fill="none">
@@ -520,7 +527,7 @@
   </symbol>
 
   <symbol id="help" viewBox="0 0 16 16" width="16" height="16" fill="none">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.33334C4.3181 1.33334 1.33333 4.3181 1.33333 8C1.33333 11.6819 4.3181 14.6667 8 14.6667C11.6819 14.6667 14.6667 11.6819 14.6667 8C14.6667 4.3181 11.6819 1.33334 8 1.33334ZM6 5.16667C6 4.89053 6.22385 4.66667 6.5 4.66667H9.5C9.77614 4.66667 10 4.89053 10 5.16667V7C10 7.16718 9.91644 7.3233 9.77735 7.41603L8.5 8.26759V8.83334C8.5 9.10948 8.27614 9.33334 8 9.33334C7.72385 9.33334 7.5 9.10948 7.5 8.83334V8C7.5 7.83283 7.58355 7.67671 7.72264 7.58398L9 6.73241V5.66667H7V6.16667C7 6.44281 6.77614 6.66667 6.5 6.66667C6.22385 6.66667 6 6.44281 6 6.16667V5.16667ZM8 10C7.6318 10 7.33333 10.2985 7.33333 10.6667C7.33333 11.0349 7.6318 11.3333 8 11.3333C8.36819 11.3333 8.66666 11.0349 8.66666 10.6667C8.66666 10.2985 8.36819 10 8 10Z" fill="currentColor"></path>
+    <path d="M6.50001 6.16667V5.16667H9.50001V7L8.00001 8V8.83333M8.00001 10.6667V10.66M14.1667 8C14.1667 11.4058 11.4058 14.1667 8.00001 14.1667C4.59425 14.1667 1.83334 11.4058 1.83334 8C1.83334 4.59424 4.59425 1.83333 8.00001 1.83333C11.4058 1.83333 14.1667 4.59424 14.1667 8ZM8.16668 10.6667C8.16668 10.7587 8.09206 10.8333 8.00001 10.8333C7.90796 10.8333 7.83334 10.7587 7.83334 10.6667C7.83334 10.5746 7.90796 10.5 8.00001 10.5C8.09206 10.5 8.16668 10.5746 8.16668 10.6667Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
   </symbol>
 
   <symbol id="home" viewBox="0 0 16 16" width="16" height="16" fill="none">
@@ -934,7 +941,14 @@
   </symbol>
 
   <symbol id="right_panel" viewBox="0 0 16 16" width="16" height="16" fill="none">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M2 2.66667C2 2.29848 2.29848 2 2.66667 2H13.3333C13.7015 2 14 2.29848 14 2.66667V13.3333C14 13.7015 13.7015 14 13.3333 14H2.66667C2.29848 14 2 13.7015 2 13.3333V2.66667ZM10 10.6667C10 11.0349 10.2985 11.3333 10.6667 11.3333C11.0349 11.3333 11.3333 11.0349 11.3333 10.6667V5.33333C11.3333 4.96514 11.0349 4.66667 10.6667 4.66667C10.2985 4.66667 10 4.96514 10 5.33333V10.6667Z" fill="currentColor"></path>
+    <g clip-path="url(#clip0_961_893)">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M5.11884 3.65909e-07H10.8812C11.5967 -1.06242e-05 12.1872 -1.9696e-05 12.6683 0.0392844C13.1679 0.0801068 13.6272 0.167719 14.0587 0.387533C14.7276 0.728417 15.2716 1.27235 15.6124 1.94137C15.8323 2.37277 15.9199 2.83207 15.9607 3.33172C16 3.81276 16 4.40331 16 5.11883V10.8812C16 11.5967 16 12.1872 15.9607 12.6683C15.9199 13.1679 15.8323 13.6272 15.6124 14.0587C15.2716 14.7276 14.7276 15.2716 14.0587 15.6124C13.6272 15.8323 13.1679 15.9199 12.6683 15.9607C12.1872 16 11.5967 16 10.8812 16H5.11883C4.40331 16 3.81277 16 3.33172 15.9607C2.83207 15.9199 2.37277 15.8323 1.94137 15.6124C1.27235 15.2716 0.728417 14.7276 0.387533 14.0587C0.167719 13.6272 0.0801068 13.1679 0.0392844 12.6683C-1.96927e-05 12.1872 -1.06242e-05 11.5967 3.6591e-07 10.8812V5.11884C-1.06242e-05 4.40332 -1.9696e-05 3.81277 0.0392844 3.33172C0.0801068 2.83207 0.167719 2.37277 0.387533 1.94137C0.728417 1.27235 1.27235 0.728417 1.94137 0.387533C2.37277 0.167719 2.83207 0.0801068 3.33172 0.0392844C3.81277 -1.96927e-05 4.40331 -1.06242e-05 5.11884 3.65909e-07ZM10.6667 11.5556C10.6667 12.0465 11.0646 12.4444 11.5556 12.4444C12.0465 12.4444 12.4444 12.0465 12.4444 11.5556V4.44444C12.4444 3.95353 12.0465 3.55556 11.5556 3.55556C11.0646 3.55556 10.6667 3.95353 10.6667 4.44444V11.5556Z" fill="currentColor"></path>
+    </g>
+    <defs>
+      <clipPath id="clip0_961_893">
+        <rect width="16" height="16" fill="white"></rect>
+      </clipPath>
+    </defs>
   </symbol>
 
   <symbol id="right_side_panel" viewBox="0 0 16 16" width="16" height="16" fill="none">
diff --git a/app/gui/src/project-view/components/DockPanel.vue b/app/gui/src/project-view/components/DockPanel.vue
index 68ee38c5256b..979b608e538c 100644
--- a/app/gui/src/project-view/components/DockPanel.vue
+++ b/app/gui/src/project-view/components/DockPanel.vue
@@ -140,6 +140,10 @@ const tabStyle = {
   }
 }
 
+.tab .ToggleIcon svg {
+  opacity: 1 !important;
+}
+
 .toggleDock {
   --icon-margin: 16px; /* Must match `--icon-margin` defined above, which is not in scope because of the teleport. */
   z-index: 1;
diff --git a/app/gui/src/project-view/stores/rightDock.ts b/app/gui/src/project-view/stores/rightDock.ts
index da5458b98e21..e8988a01c696 100644
--- a/app/gui/src/project-view/stores/rightDock.ts
+++ b/app/gui/src/project-view/stores/rightDock.ts
@@ -14,7 +14,7 @@ export type RightDockStore = ReturnType<typeof useRightDock>
 
 export type RightDockTab = ExtractTabs<typeof tabButtons>
 export const { buttons: tabButtons, isValidTab } = defineTabButtons([
-  { tab: 'docs', icon: 'text', title: 'Documentation Editor' },
+  { tab: 'docs', icon: 'document', title: 'Documentation Editor' },
   { tab: 'help', icon: 'help', title: 'Component Help' },
 ])
 

From c93143517edebd3a7f063648f00d3a22be95a01c Mon Sep 17 00:00:00 2001
From: Adam Riley <riley.ad@gmail.com>
Date: Tue, 4 Mar 2025 13:08:45 +0000
Subject: [PATCH 2/4] Code review feedback

---
 app/gui/src/project-view/components/DockPanel.vue | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/app/gui/src/project-view/components/DockPanel.vue b/app/gui/src/project-view/components/DockPanel.vue
index 979b608e538c..17f1b9b6f454 100644
--- a/app/gui/src/project-view/components/DockPanel.vue
+++ b/app/gui/src/project-view/components/DockPanel.vue
@@ -2,6 +2,7 @@
 import { documentationEditorBindings } from '@/bindings'
 import ResizeHandles from '@/components/ResizeHandles.vue'
 import SizeTransition from '@/components/SizeTransition.vue'
+import SvgButton from '@/components/SvgButton.vue'
 import ToggleIcon from '@/components/ToggleIcon.vue'
 import { useResizeObserver } from '@/composables/events'
 import { Rect } from '@/util/data/rect'
@@ -67,11 +68,11 @@ const tabStyle = {
               class="tab"
               :style="tabStyle"
             >
-              <ToggleIcon
+              <SvgButton
                 :modelValue="currentTab == tab"
                 :title="title"
-                :icon="icon"
-                @update:modelValue="currentTab = tab"
+                :name="icon"
+                @click="currentTab = tab"
               />
             </div>
           </div>
@@ -140,10 +141,6 @@ const tabStyle = {
   }
 }
 
-.tab .ToggleIcon svg {
-  opacity: 1 !important;
-}
-
 .toggleDock {
   --icon-margin: 16px; /* Must match `--icon-margin` defined above, which is not in scope because of the teleport. */
   z-index: 1;

From 5182aa6dcf1a2661b79bcac97dd0f79471c87519 Mon Sep 17 00:00:00 2001
From: Adam Riley <riley.ad@gmail.com>
Date: Tue, 4 Mar 2025 14:37:58 +0000
Subject: [PATCH 3/4] Fix

---
 app/gui/src/project-view/components/DockPanel.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/gui/src/project-view/components/DockPanel.vue b/app/gui/src/project-view/components/DockPanel.vue
index 17f1b9b6f454..4575529a69b9 100644
--- a/app/gui/src/project-view/components/DockPanel.vue
+++ b/app/gui/src/project-view/components/DockPanel.vue
@@ -66,10 +66,10 @@ const tabStyle = {
               v-for="{ tab, title, icon } in props.tabButtons"
               :key="tab"
               class="tab"
+              :class="{ activeTab: currentTab === tab }"
               :style="tabStyle"
             >
               <SvgButton
-                :modelValue="currentTab == tab"
                 :title="title"
                 :name="icon"
                 @click="currentTab = tab"
@@ -136,9 +136,10 @@ const tabStyle = {
   display: flex;
   align-items: center;
   justify-content: center;
-  &:has(.toggledOn) {
-    background-color: #fff;
-  }
+}
+
+.activeTab {
+  background-color: #fff;
 }
 
 .toggleDock {

From 8ecfde69198c7cea8b9abb6bd0dd960c3c3c254e Mon Sep 17 00:00:00 2001
From: Adam Riley <riley.ad@gmail.com>
Date: Tue, 4 Mar 2025 14:42:33 +0000
Subject: [PATCH 4/4] corepack pnpm run ci:prettier --write

---
 app/gui/src/project-view/components/DockPanel.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/app/gui/src/project-view/components/DockPanel.vue b/app/gui/src/project-view/components/DockPanel.vue
index 4575529a69b9..d39d80e66a35 100644
--- a/app/gui/src/project-view/components/DockPanel.vue
+++ b/app/gui/src/project-view/components/DockPanel.vue
@@ -69,11 +69,7 @@ const tabStyle = {
               :class="{ activeTab: currentTab === tab }"
               :style="tabStyle"
             >
-              <SvgButton
-                :title="title"
-                :name="icon"
-                @click="currentTab = tab"
-              />
+              <SvgButton :title="title" :name="icon" @click="currentTab = tab" />
             </div>
           </div>
           <ResizeHandles