From dc7548a55080ddb4726d08afa8758fdd9055cc0e Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Wed, 17 Apr 2024 15:12:27 -0700
Subject: [PATCH 1/7] Start styling TreeSection actions

---
 .../homeView/src/components/TreeSection.vue   | 86 +++++++++++++++++++
 1 file changed, 86 insertions(+)

diff --git a/extensions/vscode/webviews/homeView/src/components/TreeSection.vue b/extensions/vscode/webviews/homeView/src/components/TreeSection.vue
index 5e7bb4fe6..c3a949eb8 100644
--- a/extensions/vscode/webviews/homeView/src/components/TreeSection.vue
+++ b/extensions/vscode/webviews/homeView/src/components/TreeSection.vue
@@ -10,6 +10,30 @@
         :class="expanded ? 'codicon-chevron-down' : 'codicon-chevron-right'"
       />
       <h3 class="title">{{ title }}</h3>
+      <div class="actions">
+        <div class="monaco-toolbar">
+          <div class="monaco-action-bar">
+            <ul
+              class="actions-container"
+              role="toolbar"
+              :aria-label="`${title} actions`"
+            >
+              <li
+                class="action-item menu-entry"
+                role="presentation"
+                custom-hover="true"
+              >
+                <a
+                  class="action-label codicon codicon-refresh"
+                  role="button"
+                  aria-label="Refresh Deployment Files"
+                  tabindex="0"
+                ></a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
     </div>
     <div v-if="expanded" class="pane-body">
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo ad adipisci
@@ -31,6 +55,68 @@ defineProps<{
 </script>
 
 <style lang="scss" scoped>
+.pane {
+  .actions {
+    display: none;
+    margin-left: auto;
+
+    .monaco-toolbar {
+      height: 100%;
+
+      .monaco-action-bar {
+        white-space: nowrap;
+        height: 100%;
+
+        .actions-container {
+          align-items: center;
+          display: flex;
+          height: 100%;
+          margin: 0 auto;
+          padding: 0;
+          width: 100%;
+
+          .action-item {
+            display: block;
+            cursor: pointer;
+            position: relative;
+            z-index: 2;
+            margin-right: 4px;
+
+            .action-label {
+              border-radius: 5px;
+              padding: 2px;
+              font-size: 16px;
+              align-items: center;
+              display: flex;
+              height: 20px;
+              width: 20px;
+              color: var(--vscode-icon-foreground);
+
+              &:focus {
+                opacity: 1;
+                outline-color: var(--vscode-focusBorder);
+                outline-offset: -1px;
+                outline-style: solid;
+                outline-width: 1px;
+              }
+
+              &:hover {
+                background-color: var(--vscode-toolbar-hoverBackground);
+                outline: 1px dashed var(--vscode-toolbar-hoverOutline);
+                outline-offset: -1px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.expanded:hover .actions {
+    display: initial;
+  }
+}
+
 .pane-header {
   line-height: 22px;
   color: var(--vscode-sideBarSectionHeader-foreground);

From 8d0347dbd2e2cc9fcca664a4d481723a79c3972e Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Wed, 17 Apr 2024 15:14:47 -0700
Subject: [PATCH 2/7] Move .title CSS under .pane-header

---
 .../homeView/src/components/TreeSection.vue   | 34 ++++++++++---------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/extensions/vscode/webviews/homeView/src/components/TreeSection.vue b/extensions/vscode/webviews/homeView/src/components/TreeSection.vue
index c3a949eb8..803389fb7 100644
--- a/extensions/vscode/webviews/homeView/src/components/TreeSection.vue
+++ b/extensions/vscode/webviews/homeView/src/components/TreeSection.vue
@@ -5,11 +5,13 @@
       :class="{ expanded: expanded }"
       @click="expanded = !expanded"
     >
-      <div
-        class="twisty-container codicon"
-        :class="expanded ? 'codicon-chevron-down' : 'codicon-chevron-right'"
-      />
-      <h3 class="title">{{ title }}</h3>
+      <div>
+        <div
+          class="twisty-container codicon"
+          :class="expanded ? 'codicon-chevron-down' : 'codicon-chevron-right'"
+        />
+        <h3 class="title">{{ title }}</h3>
+      </div>
       <div class="actions">
         <div class="monaco-toolbar">
           <div class="monaco-action-bar">
@@ -136,21 +138,21 @@ defineProps<{
     font-size: 16px;
     color: var(--vscode-icon-foreground);
   }
+
+  .title {
+    font-size: 11px;
+    min-width: 3ch;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-transform: uppercase;
+    white-space: nowrap;
+    -webkit-margin-before: 0;
+    -webkit-margin-after: 0;
+  }
 }
 
 .pane-body {
   flex: 1;
   overflow: hidden;
 }
-
-.title {
-  font-size: 11px;
-  min-width: 3ch;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  text-transform: uppercase;
-  white-space: nowrap;
-  -webkit-margin-before: 0;
-  -webkit-margin-after: 0;
-}
 </style>

From 25611eb92075e9e761ca2485e861b9106fa76dbf Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Wed, 17 Apr 2024 15:21:12 -0700
Subject: [PATCH 3/7] Do not expand on actions click

---
 .../homeView/src/components/TreeSection.vue   | 43 ++++++++++---------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/extensions/vscode/webviews/homeView/src/components/TreeSection.vue b/extensions/vscode/webviews/homeView/src/components/TreeSection.vue
index 803389fb7..5cd527392 100644
--- a/extensions/vscode/webviews/homeView/src/components/TreeSection.vue
+++ b/extensions/vscode/webviews/homeView/src/components/TreeSection.vue
@@ -1,11 +1,7 @@
 <template>
   <div class="pane" :class="{ expanded: expanded }">
-    <div
-      class="pane-header"
-      :class="{ expanded: expanded }"
-      @click="expanded = !expanded"
-    >
-      <div>
+    <div class="pane-header" :class="{ expanded: expanded }">
+      <div class="pane-header-title-container" @click="expanded = !expanded">
         <div
           class="twisty-container codicon"
           :class="expanded ? 'codicon-chevron-down' : 'codicon-chevron-right'"
@@ -128,26 +124,33 @@ defineProps<{
   align-items: center;
   cursor: pointer;
   display: flex;
+  justify-content: space-between;
   font-size: 11px;
   font-weight: 700;
   height: 22px;
   overflow: hidden;
 
-  .twisty-container {
-    margin: 0 2px;
-    font-size: 16px;
-    color: var(--vscode-icon-foreground);
-  }
+  .pane-header-title-container {
+    display: flex;
+    flex: 1;
+    align-items: center;
+
+    .twisty-container {
+      margin: 0 2px;
+      font-size: 16px;
+      color: var(--vscode-icon-foreground);
+    }
 
-  .title {
-    font-size: 11px;
-    min-width: 3ch;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    text-transform: uppercase;
-    white-space: nowrap;
-    -webkit-margin-before: 0;
-    -webkit-margin-after: 0;
+    .title {
+      font-size: 11px;
+      min-width: 3ch;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-transform: uppercase;
+      white-space: nowrap;
+      -webkit-margin-before: 0;
+      -webkit-margin-after: 0;
+    }
   }
 }
 

From a783850f055e3ead02a5dc52d016f4dd3049fc5f Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Wed, 17 Apr 2024 15:21:34 -0700
Subject: [PATCH 4/7] Do not allow TreeSection title selection

---
 .../vscode/webviews/homeView/src/components/TreeSection.vue      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/extensions/vscode/webviews/homeView/src/components/TreeSection.vue b/extensions/vscode/webviews/homeView/src/components/TreeSection.vue
index 5cd527392..b81356557 100644
--- a/extensions/vscode/webviews/homeView/src/components/TreeSection.vue
+++ b/extensions/vscode/webviews/homeView/src/components/TreeSection.vue
@@ -148,6 +148,7 @@ defineProps<{
       text-overflow: ellipsis;
       text-transform: uppercase;
       white-space: nowrap;
+      user-select: none;
       -webkit-margin-before: 0;
       -webkit-margin-after: 0;
     }

From a3613de711db20f4334c5c53c384ebb80f23916c Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Wed, 17 Apr 2024 15:30:49 -0700
Subject: [PATCH 5/7] Make pane-header focus-able

---
 .../homeView/src/components/TreeSection.vue         | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/extensions/vscode/webviews/homeView/src/components/TreeSection.vue b/extensions/vscode/webviews/homeView/src/components/TreeSection.vue
index b81356557..796a58282 100644
--- a/extensions/vscode/webviews/homeView/src/components/TreeSection.vue
+++ b/extensions/vscode/webviews/homeView/src/components/TreeSection.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="pane" :class="{ expanded: expanded }">
-    <div class="pane-header" :class="{ expanded: expanded }">
+    <div class="pane-header" tabindex="0" :class="{ expanded: expanded }">
       <div class="pane-header-title-container" @click="expanded = !expanded">
         <div
           class="twisty-container codicon"
@@ -110,7 +110,8 @@ defineProps<{
     }
   }
 
-  &.expanded:hover .actions {
+  &.expanded:hover .actions,
+  &.expanded:focus-within .actions {
     display: initial;
   }
 }
@@ -130,6 +131,14 @@ defineProps<{
   height: 22px;
   overflow: hidden;
 
+  &:focus {
+    opacity: 1;
+    outline-color: var(--vscode-focusBorder);
+    outline-offset: -1px;
+    outline-style: solid;
+    outline-width: 1px;
+  }
+
   .pane-header-title-container {
     display: flex;
     flex: 1;

From 6938593a7aabf0e85725ebaa4a9cd4858450be0d Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Wed, 17 Apr 2024 15:31:03 -0700
Subject: [PATCH 6/7] Create toggleExpanded function helper

---
 .../vscode/webviews/homeView/src/components/TreeSection.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/extensions/vscode/webviews/homeView/src/components/TreeSection.vue b/extensions/vscode/webviews/homeView/src/components/TreeSection.vue
index 796a58282..69fcf3cec 100644
--- a/extensions/vscode/webviews/homeView/src/components/TreeSection.vue
+++ b/extensions/vscode/webviews/homeView/src/components/TreeSection.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="pane" :class="{ expanded: expanded }">
     <div class="pane-header" tabindex="0" :class="{ expanded: expanded }">
-      <div class="pane-header-title-container" @click="expanded = !expanded">
+      <div class="pane-header-title-container" @click="toggleExpanded">
         <div
           class="twisty-container codicon"
           :class="expanded ? 'codicon-chevron-down' : 'codicon-chevron-right'"
@@ -50,6 +50,10 @@ const expanded = defineModel("expanded", { required: false, default: false });
 defineProps<{
   title: string;
 }>();
+
+const toggleExpanded = () => {
+  expanded.value = !expanded.value;
+};
 </script>
 
 <style lang="scss" scoped>

From f67c44892538c25a527eb014a407a45971ae1276 Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Wed, 17 Apr 2024 16:00:39 -0700
Subject: [PATCH 7/7] Support enter expand in TreeSection

---
 .../webviews/homeView/src/components/TreeSection.vue       | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/extensions/vscode/webviews/homeView/src/components/TreeSection.vue b/extensions/vscode/webviews/homeView/src/components/TreeSection.vue
index 69fcf3cec..b3829c931 100644
--- a/extensions/vscode/webviews/homeView/src/components/TreeSection.vue
+++ b/extensions/vscode/webviews/homeView/src/components/TreeSection.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="pane" :class="{ expanded: expanded }">
-    <div class="pane-header" tabindex="0" :class="{ expanded: expanded }">
+    <div
+      class="pane-header"
+      tabindex="0"
+      :class="{ expanded: expanded }"
+      @keydown.enter.self="toggleExpanded"
+    >
       <div class="pane-header-title-container" @click="toggleExpanded">
         <div
           class="twisty-container codicon"