From 08a3f24903ebcfd5711e9b10a4997dbd23ce4921 Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Thu, 21 Nov 2024 14:08:42 -0800
Subject: [PATCH 01/19] Create start of flat file map

---
 .../webviews/homeView/src/stores/home.ts      |  5 +++-
 .../webviews/homeView/src/utils/files.ts      | 25 +++++++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/extensions/vscode/webviews/homeView/src/stores/home.ts b/extensions/vscode/webviews/homeView/src/stores/home.ts
index 2763ee03c..6719ec6a1 100644
--- a/extensions/vscode/webviews/homeView/src/stores/home.ts
+++ b/extensions/vscode/webviews/homeView/src/stores/home.ts
@@ -15,7 +15,7 @@ import { isConfigurationError } from "../../../../src/api/types/configurations";
 import { WebviewToHostMessageType } from "../../../../src/types/messages/webviewToHostMessages";
 import { RPackage } from "../../../../src/api/types/packages";
 import { DeploymentSelector } from "../../../../src/types/shared";
-import { splitFilesOnInclusion } from "src/utils/files";
+import { flattenFiles, splitFilesOnInclusion } from "src/utils/files";
 import {
   isAgentErrorInvalidTOML,
   isAgentErrorTypeUnknown,
@@ -138,6 +138,8 @@ export const useHomeStore = defineStore("home", () => {
 
   const files = ref<ContentRecordFile>();
 
+  const ultraFlatFiles = computed(() => flattenFiles(files.value?.files || []));
+
   const flatFiles = computed(() => {
     const response: {
       includedFiles: ContentRecordFile[];
@@ -424,6 +426,7 @@ export const useHomeStore = defineStore("home", () => {
     selectedConfiguration,
     serverCredential,
     files,
+    ultraFlatFiles,
     flatFiles,
     initializingRequestComplete,
     lastContentRecordResult,
diff --git a/extensions/vscode/webviews/homeView/src/utils/files.ts b/extensions/vscode/webviews/homeView/src/utils/files.ts
index 6e215bc04..2a9d0163e 100644
--- a/extensions/vscode/webviews/homeView/src/utils/files.ts
+++ b/extensions/vscode/webviews/homeView/src/utils/files.ts
@@ -35,3 +35,28 @@ export function canFileBeIncluded(file: ContentRecordFile): boolean {
 export function canFileBeExcluded(file: ContentRecordFile): boolean {
   return Boolean(!file.reason?.exclude);
 }
+
+export type FlatFile = Omit<ContentRecordFile, "files"> & {
+  indent: number;
+  parent?: string;
+};
+
+export function flattenFiles(
+  files: ContentRecordFile[],
+  map = new Map<string, FlatFile>(),
+  indent = 0,
+  parentFile?: string,
+): Map<string, FlatFile> {
+  files.forEach((file) => {
+    const { files, ...rest } = file;
+    const flatFile = {
+      ...rest,
+      indent: indent,
+      parent: parentFile,
+    };
+    map.set(file.id, flatFile);
+    flattenFiles(file.files, map, indent + 1, file.id);
+  });
+
+  return map;
+}

From 5d2e0bb8380d9c756101ac1f669af3a5b7fb3a89 Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Thu, 21 Nov 2024 14:08:59 -0800
Subject: [PATCH 02/19] Update tooltip functions to use minimal types

---
 .../src/components/views/projectFiles/tooltips.ts         | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/extensions/vscode/webviews/homeView/src/components/views/projectFiles/tooltips.ts b/extensions/vscode/webviews/homeView/src/components/views/projectFiles/tooltips.ts
index 1b63c7c88..5f11d8050 100644
--- a/extensions/vscode/webviews/homeView/src/components/views/projectFiles/tooltips.ts
+++ b/extensions/vscode/webviews/homeView/src/components/views/projectFiles/tooltips.ts
@@ -1,6 +1,8 @@
 import { ContentRecordFile, FileMatchSource } from "../../../../../../src/api";
 
-export function includedFileTooltip(file: ContentRecordFile) {
+export function includedFileTooltip(
+  file: Pick<ContentRecordFile, "rel" | "reason">,
+) {
   let tooltip = `${file.rel} will be included in the next deployment.`;
   if (file.reason) {
     tooltip += `\nThe configuration file ${file.reason?.fileName} is including it with the pattern '${file.reason?.pattern}'`;
@@ -8,7 +10,9 @@ export function includedFileTooltip(file: ContentRecordFile) {
   return tooltip;
 }
 
-export function excludedFileTooltip(file: ContentRecordFile) {
+export function excludedFileTooltip(
+  file: Pick<ContentRecordFile, "rel" | "reason">,
+) {
   let tooltip = `${file.rel} will be excluded in the next deployment.`;
   if (file.reason) {
     if (file.reason.source === FileMatchSource.BUILT_IN) {

From 183fa6ef988b6ec7a64a9ee3d9b015804792d2b4 Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Thu, 21 Nov 2024 14:09:15 -0800
Subject: [PATCH 03/19] Make TreeProjectFiles take flat file map

---
 .../views/projectFiles/TreeProjectFiles.vue   | 39 ++++++++++---------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/extensions/vscode/webviews/homeView/src/components/views/projectFiles/TreeProjectFiles.vue b/extensions/vscode/webviews/homeView/src/components/views/projectFiles/TreeProjectFiles.vue
index ba58a6230..06fe01849 100644
--- a/extensions/vscode/webviews/homeView/src/components/views/projectFiles/TreeProjectFiles.vue
+++ b/extensions/vscode/webviews/homeView/src/components/views/projectFiles/TreeProjectFiles.vue
@@ -1,7 +1,7 @@
 <template>
   <TreeItemCheckbox
-    v-for="file in props.files"
-    :key="file.id"
+    v-for="[id, file] in props.files"
+    :key="id"
     :title="file.base"
     :checked="isFileIncluded(file)"
     :disabled="
@@ -20,14 +20,14 @@
         ? includedFileTooltip(file)
         : excludedFileTooltip(file)
     "
-    :indentLevel="indentLevel"
+    :indentLevel="file.indent"
     :actions="fileActions(file)"
-    @check="includeFile(file)"
-    @uncheck="excludeFile(file)"
+    @check="includeFile(id)"
+    @uncheck="excludeFile(id)"
   >
-    <template v-if="file.isDir" #default="{ indentLevel }">
+    <!-- <template v-if="file.isDir" #default="{ indentLevel }">
       <TreeProjectFiles :files="file.files" :indentLevel="indentLevel" />
-    </template>
+    </template> -->
 
     <template #postDecor>
       <PostDecor
@@ -66,6 +66,7 @@ import { useHomeStore } from "src/stores/home";
 import { useHostConduitService } from "src/HostConduitService";
 import PostDecor from "src/components/tree/PostDecor.vue";
 import { ActionButton } from "src/components/ActionToolbar.vue";
+import { FlatFile } from "src/utils/files";
 
 import {
   ContentRecordFile,
@@ -74,7 +75,7 @@ import {
 import { WebviewToHostMessageType } from "../../../../../../src/types/messages/webviewToHostMessages";
 
 interface Props {
-  files: ContentRecordFile[];
+  files: Map<string, FlatFile>;
   indentLevel?: number;
 }
 
@@ -85,7 +86,7 @@ const props = withDefaults(defineProps<Props>(), {
 const home = useHomeStore();
 const { sendMsg } = useHostConduitService();
 
-const isEntrypoint = (file: ContentRecordFile): boolean => {
+const isEntrypoint = (file: Pick<ContentRecordFile, "id">): boolean => {
   const config = home.selectedConfiguration;
   if (config != undefined && !isConfigurationError(config)) {
     return file.id === config.configuration.entrypoint;
@@ -93,32 +94,34 @@ const isEntrypoint = (file: ContentRecordFile): boolean => {
   return false;
 };
 
-const isFileIncluded = (file: ContentRecordFile) => {
+const isFileIncluded = (file: Pick<ContentRecordFile, "reason">) => {
   return Boolean(file.reason?.exclude === false);
 };
 
-const includeFile = (file: ContentRecordFile) => {
+const includeFile = (id: string) => {
   sendMsg({
     kind: WebviewToHostMessageType.INCLUDE_FILE,
-    content: { path: file.id },
+    content: { path: id },
   });
 };
 
-const excludeFile = (file: ContentRecordFile) => {
+const excludeFile = (id: string) => {
   sendMsg({
     kind: WebviewToHostMessageType.EXCLUDE_FILE,
-    content: { path: file.id },
+    content: { path: id },
   });
 };
 
-const openFile = (file: ContentRecordFile) => {
+const openFile = (id: string) => {
   sendMsg({
     kind: WebviewToHostMessageType.VSCODE_OPEN_RELATIVE,
-    content: { relativePath: file.id },
+    content: { relativePath: id },
   });
 };
 
-const fileActions = (file: ContentRecordFile): ActionButton[] => {
+const fileActions = (
+  file: Pick<ContentRecordFile, "id" | "isFile">,
+): ActionButton[] => {
   let actions: ActionButton[] = [];
 
   if (file.isFile) {
@@ -126,7 +129,7 @@ const fileActions = (file: ContentRecordFile): ActionButton[] => {
       label: "Open file",
       codicon: "codicon-link-external",
       fn: () => {
-        openFile(file);
+        openFile(file.id);
       },
     });
   }

From 134c01bbe3329e628ad677f89395e8911a518233 Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Thu, 21 Nov 2024 14:09:26 -0800
Subject: [PATCH 04/19] Pass flat file map to TreeProjectFiles component

---
 .../homeView/src/components/views/projectFiles/ProjectFiles.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/extensions/vscode/webviews/homeView/src/components/views/projectFiles/ProjectFiles.vue b/extensions/vscode/webviews/homeView/src/components/views/projectFiles/ProjectFiles.vue
index ce09a6f94..8fcfde657 100644
--- a/extensions/vscode/webviews/homeView/src/components/views/projectFiles/ProjectFiles.vue
+++ b/extensions/vscode/webviews/homeView/src/components/views/projectFiles/ProjectFiles.vue
@@ -12,7 +12,7 @@
     ]"
   >
     <template v-if="home.files">
-      <TreeProjectFiles :files="home.files.files" />
+      <TreeProjectFiles :files="home.ultraFlatFiles" />
     </template>
     <p v-else>No files found</p>
   </TreeSection>

From 3d7c57c1febf89cd7834b9bdd6f0d92fadf567cf Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Thu, 21 Nov 2024 15:27:47 -0800
Subject: [PATCH 05/19] Install vue-virtual-scroller in homeView

---
 .../webviews/homeView/package-lock.json       | 37 ++++++++++++++++++-
 .../vscode/webviews/homeView/package.json     |  3 +-
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/extensions/vscode/webviews/homeView/package-lock.json b/extensions/vscode/webviews/homeView/package-lock.json
index 1587d30cd..f4da09d3b 100644
--- a/extensions/vscode/webviews/homeView/package-lock.json
+++ b/extensions/vscode/webviews/homeView/package-lock.json
@@ -11,7 +11,8 @@
         "axios": "1.7.4",
         "eventsource": "^2.0.2",
         "pinia": "^2.1.7",
-        "vue": "^3.4.21"
+        "vue": "^3.4.21",
+        "vue-virtual-scroller": "^2.0.0-beta.8"
       },
       "devDependencies": {
         "@tsconfig/node20": "^20.1.4",
@@ -1585,6 +1586,11 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/mitt": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
+      "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -2566,6 +2572,22 @@
         }
       }
     },
+    "node_modules/vue-observe-visibility": {
+      "version": "2.0.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-2.0.0-alpha.1.tgz",
+      "integrity": "sha512-flFbp/gs9pZniXR6fans8smv1kDScJ8RS7rEpMjhVabiKeq7Qz3D9+eGsypncjfIyyU84saU88XZ0zjbD6Gq/g==",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/vue-resize": {
+      "version": "2.0.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
+      "integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-tsc": {
       "version": "2.1.10",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.1.10.tgz",
@@ -2583,6 +2605,19 @@
         "typescript": ">=5.0.0"
       }
     },
+    "node_modules/vue-virtual-scroller": {
+      "version": "2.0.0-beta.8",
+      "resolved": "https://registry.npmjs.org/vue-virtual-scroller/-/vue-virtual-scroller-2.0.0-beta.8.tgz",
+      "integrity": "sha512-b8/f5NQ5nIEBRTNi6GcPItE4s7kxNHw2AIHLtDp+2QvqdTjVN0FgONwX9cr53jWRgnu+HRLPaWDOR2JPI5MTfQ==",
+      "dependencies": {
+        "mitt": "^2.1.0",
+        "vue-observe-visibility": "^2.0.0-alpha.1",
+        "vue-resize": "^2.0.0-alpha.1"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
diff --git a/extensions/vscode/webviews/homeView/package.json b/extensions/vscode/webviews/homeView/package.json
index 3b9269153..ab04b781e 100644
--- a/extensions/vscode/webviews/homeView/package.json
+++ b/extensions/vscode/webviews/homeView/package.json
@@ -11,7 +11,8 @@
     "axios": "1.7.4",
     "eventsource": "^2.0.2",
     "pinia": "^2.1.7",
-    "vue": "^3.4.21"
+    "vue": "^3.4.21",
+    "vue-virtual-scroller": "^2.0.0-beta.8"
   },
   "devDependencies": {
     "@tsconfig/node20": "^20.1.4",

From b0b5fc019f4255e4c2dc75f3af6a965dde1bcb45 Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Thu, 21 Nov 2024 15:28:04 -0800
Subject: [PATCH 06/19] Use RecycleScroller in Vue App

---
 extensions/vscode/webviews/homeView/src/main.ts          | 9 ++++++++-
 .../webviews/homeView/src/vue-virtual-scroller.d.ts      | 5 +++++
 2 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 extensions/vscode/webviews/homeView/src/vue-virtual-scroller.d.ts

diff --git a/extensions/vscode/webviews/homeView/src/main.ts b/extensions/vscode/webviews/homeView/src/main.ts
index c6ac0f5fd..01acd403e 100644
--- a/extensions/vscode/webviews/homeView/src/main.ts
+++ b/extensions/vscode/webviews/homeView/src/main.ts
@@ -1,6 +1,7 @@
 // Copyright (C) 2024 by Posit Software, PBC.
 
 import { createApp } from "vue";
+import { RecycleScroller } from "vue-virtual-scroller";
 import { createPinia } from "pinia";
 import {
   provideVSCodeDesignSystem,
@@ -14,6 +15,8 @@ import {
 
 import App from "src/App.vue";
 
+import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
+
 import "src/style.css";
 
 // In order to use the Webview UI Toolkit web components they
@@ -30,4 +33,8 @@ provideVSCodeDesignSystem().register(
 
 const pinia = createPinia();
 
-createApp(App).use(pinia).mount("#app");
+const app = createApp(App);
+app.use(pinia);
+app.component("RecycleScroller", RecycleScroller);
+
+app.mount("#app");
diff --git a/extensions/vscode/webviews/homeView/src/vue-virtual-scroller.d.ts b/extensions/vscode/webviews/homeView/src/vue-virtual-scroller.d.ts
new file mode 100644
index 000000000..d12239901
--- /dev/null
+++ b/extensions/vscode/webviews/homeView/src/vue-virtual-scroller.d.ts
@@ -0,0 +1,5 @@
+declare module "vue-virtual-scroller" {
+  import { Component } from "vue";
+
+  export const RecycleScroller: Component;
+}

From dc8a80239d6b3aee15144539641b4eaa8569daf3 Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Thu, 21 Nov 2024 15:28:29 -0800
Subject: [PATCH 07/19] Convert flattenFiles to array instead of Map

---
 extensions/vscode/webviews/homeView/src/utils/files.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/extensions/vscode/webviews/homeView/src/utils/files.ts b/extensions/vscode/webviews/homeView/src/utils/files.ts
index 2a9d0163e..6b7bb6a63 100644
--- a/extensions/vscode/webviews/homeView/src/utils/files.ts
+++ b/extensions/vscode/webviews/homeView/src/utils/files.ts
@@ -43,10 +43,10 @@ export type FlatFile = Omit<ContentRecordFile, "files"> & {
 
 export function flattenFiles(
   files: ContentRecordFile[],
-  map = new Map<string, FlatFile>(),
+  arr = new Array<FlatFile>(),
   indent = 0,
   parentFile?: string,
-): Map<string, FlatFile> {
+): FlatFile[] {
   files.forEach((file) => {
     const { files, ...rest } = file;
     const flatFile = {
@@ -54,9 +54,9 @@ export function flattenFiles(
       indent: indent,
       parent: parentFile,
     };
-    map.set(file.id, flatFile);
-    flattenFiles(file.files, map, indent + 1, file.id);
+    arr.push(flatFile);
+    flattenFiles(file.files, arr, indent + 1, file.id);
   });
 
-  return map;
+  return arr;
 }

From b7de66b4aa063db01e11510701895e4666840bbb Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Thu, 21 Nov 2024 15:28:47 -0800
Subject: [PATCH 08/19] Use RecycleScroller in TreeProjectFiles

---
 .../views/projectFiles/TreeProjectFiles.vue   | 121 +++++++++---------
 1 file changed, 62 insertions(+), 59 deletions(-)

diff --git a/extensions/vscode/webviews/homeView/src/components/views/projectFiles/TreeProjectFiles.vue b/extensions/vscode/webviews/homeView/src/components/views/projectFiles/TreeProjectFiles.vue
index 06fe01849..7b57e82e8 100644
--- a/extensions/vscode/webviews/homeView/src/components/views/projectFiles/TreeProjectFiles.vue
+++ b/extensions/vscode/webviews/homeView/src/components/views/projectFiles/TreeProjectFiles.vue
@@ -1,58 +1,59 @@
 <template>
-  <TreeItemCheckbox
-    v-for="[id, file] in props.files"
-    :key="id"
-    :title="file.base"
-    :checked="isFileIncluded(file)"
-    :disabled="
-      file.reason?.source === 'built-in' ||
-      file.reason?.source === 'permissions'
-    "
-    :list-style="
-      isEntrypoint(file)
-        ? 'emphasized'
-        : isFileIncluded(file)
-          ? 'default'
-          : 'deemphasized'
-    "
-    :tooltip="
-      isFileIncluded(file)
-        ? includedFileTooltip(file)
-        : excludedFileTooltip(file)
-    "
-    :indentLevel="file.indent"
-    :actions="fileActions(file)"
-    @check="includeFile(id)"
-    @uncheck="excludeFile(id)"
+  <RecycleScroller
+    class="scroller"
+    :items="files"
+    :item-size="22"
+    v-slot="{ item }"
   >
-    <!-- <template v-if="file.isDir" #default="{ indentLevel }">
-      <TreeProjectFiles :files="file.files" :indentLevel="indentLevel" />
-    </template> -->
-
-    <template #postDecor>
-      <PostDecor
-        v-if="
-          file.isFile &&
-          isFileIncluded(file) &&
-          !home.flatFiles.lastDeployedFiles.has(file.id)
-        "
-        class="text-git-added"
-        :data-automation="`${file.id}-decorator`"
-      >
-        A
-      </PostDecor>
-      <PostDecor
-        v-if="
-          file.isFile &&
-          !isFileIncluded(file) &&
-          home.flatFiles.lastDeployedFiles.has(file.id)
-        "
-        class="text-git-deleted"
-      >
-        R
-      </PostDecor>
-    </template>
-  </TreeItemCheckbox>
+    <TreeItemCheckbox
+      :title="item.base"
+      :checked="isFileIncluded(item)"
+      :disabled="
+        item.reason?.source === 'built-in' ||
+        item.reason?.source === 'permissions'
+      "
+      :list-style="
+        isEntrypoint(item)
+          ? 'emphasized'
+          : isFileIncluded(item)
+            ? 'default'
+            : 'deemphasized'
+      "
+      :tooltip="
+        isFileIncluded(item)
+          ? includedFileTooltip(item)
+          : excludedFileTooltip(item)
+      "
+      :indentLevel="item.indent + 1"
+      :actions="fileActions(item)"
+      @check="includeFile(item.id)"
+      @uncheck="excludeFile(item.id)"
+    >
+      <template #postDecor>
+        <PostDecor
+          v-if="
+            item.isFile &&
+            isFileIncluded(item) &&
+            !home.flatFiles.lastDeployedFiles.has(item.id)
+          "
+          class="text-git-added"
+          :data-automation="`${item.id}-decorator`"
+        >
+          A
+        </PostDecor>
+        <PostDecor
+          v-if="
+            item.isFile &&
+            !isFileIncluded(item) &&
+            home.flatFiles.lastDeployedFiles.has(item.id)
+          "
+          class="text-git-deleted"
+        >
+          R
+        </PostDecor>
+      </template>
+    </TreeItemCheckbox>
+  </RecycleScroller>
 </template>
 
 <script setup lang="ts">
@@ -61,7 +62,6 @@ import {
   includedFileTooltip,
   excludedFileTooltip,
 } from "src/components/views/projectFiles/tooltips";
-import TreeProjectFiles from "src/components/views/projectFiles/TreeProjectFiles.vue";
 import { useHomeStore } from "src/stores/home";
 import { useHostConduitService } from "src/HostConduitService";
 import PostDecor from "src/components/tree/PostDecor.vue";
@@ -75,13 +75,10 @@ import {
 import { WebviewToHostMessageType } from "../../../../../../src/types/messages/webviewToHostMessages";
 
 interface Props {
-  files: Map<string, FlatFile>;
-  indentLevel?: number;
+  files: FlatFile[];
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  indentLevel: 1,
-});
+defineProps<Props>();
 
 const home = useHomeStore();
 const { sendMsg } = useHostConduitService();
@@ -137,3 +134,9 @@ const fileActions = (
   return actions;
 };
 </script>
+
+<style lang="scss" scoped>
+.scroller {
+  max-height: 500px;
+}
+</style>

From b3a977e466f2681de2fa966afefa35fde527072c Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Fri, 22 Nov 2024 12:25:57 -0800
Subject: [PATCH 09/19] Separate files into its own store

---
 .../homeView/src/HostConduitService.ts        |  7 ++-
 .../views/projectFiles/ProjectFiles.vue       | 15 ++---
 .../views/projectFiles/TreeProjectFiles.vue   |  6 +-
 .../webviews/homeView/src/stores/file.ts      | 60 +++++++++++++++++++
 .../webviews/homeView/src/stores/home.ts      | 26 --------
 .../webviews/homeView/src/utils/files.ts      | 28 ---------
 6 files changed, 73 insertions(+), 69 deletions(-)
 create mode 100644 extensions/vscode/webviews/homeView/src/stores/file.ts

diff --git a/extensions/vscode/webviews/homeView/src/HostConduitService.ts b/extensions/vscode/webviews/homeView/src/HostConduitService.ts
index 48136d423..480bee724 100644
--- a/extensions/vscode/webviews/homeView/src/HostConduitService.ts
+++ b/extensions/vscode/webviews/homeView/src/HostConduitService.ts
@@ -20,7 +20,8 @@ import {
   WebviewToHostMessage,
   WebviewToHostMessageType,
 } from "../../../src/types/messages/webviewToHostMessages";
-import { useHomeStore } from "./stores/home";
+import { useFileStore } from "src/stores/file";
+import { useHomeStore } from "src/stores/home";
 import { vscodeAPI } from "src/vscode";
 
 let hostConduit: HostConduit | undefined = undefined;
@@ -196,8 +197,8 @@ const onSaveSelectionMsg = () => {
 };
 
 const onRefreshFilesMsg = (msg: RefreshFilesMsg) => {
-  const home = useHomeStore();
-  home.files = msg.content.files;
+  const fileStore = useFileStore();
+  fileStore.files = msg.content.files;
 };
 
 const onUpdatePythonPackages = (msg: UpdatePythonPackages) => {
diff --git a/extensions/vscode/webviews/homeView/src/components/views/projectFiles/ProjectFiles.vue b/extensions/vscode/webviews/homeView/src/components/views/projectFiles/ProjectFiles.vue
index 8fcfde657..c2ecd55d1 100644
--- a/extensions/vscode/webviews/homeView/src/components/views/projectFiles/ProjectFiles.vue
+++ b/extensions/vscode/webviews/homeView/src/components/views/projectFiles/ProjectFiles.vue
@@ -6,26 +6,21 @@
       {
         label: 'Refresh Project Files',
         codicon: 'codicon-refresh',
-        fn: () =>
-          sendMsg({ kind: WebviewToHostMessageType.REQUEST_FILES_LISTS }),
+        fn: () => fileStore.refreshFiles,
       },
     ]"
   >
-    <template v-if="home.files">
-      <TreeProjectFiles :files="home.ultraFlatFiles" />
+    <template v-if="fileStore.flatFiles">
+      <TreeProjectFiles :files="fileStore.flatFiles" />
     </template>
     <p v-else>No files found</p>
   </TreeSection>
 </template>
 
 <script setup lang="ts">
-import { WebviewToHostMessageType } from "../../../../../../src/types/messages/webviewToHostMessages";
-
 import TreeSection from "src/components/tree/TreeSection.vue";
-import { useHomeStore } from "src/stores/home";
-import { useHostConduitService } from "src/HostConduitService";
 import TreeProjectFiles from "src/components/views/projectFiles/TreeProjectFiles.vue";
+import { useFileStore } from "src/stores/file";
 
-const home = useHomeStore();
-const { sendMsg } = useHostConduitService();
+const fileStore = useFileStore();
 </script>
diff --git a/extensions/vscode/webviews/homeView/src/components/views/projectFiles/TreeProjectFiles.vue b/extensions/vscode/webviews/homeView/src/components/views/projectFiles/TreeProjectFiles.vue
index 7b57e82e8..b6c3172f8 100644
--- a/extensions/vscode/webviews/homeView/src/components/views/projectFiles/TreeProjectFiles.vue
+++ b/extensions/vscode/webviews/homeView/src/components/views/projectFiles/TreeProjectFiles.vue
@@ -34,7 +34,7 @@
           v-if="
             item.isFile &&
             isFileIncluded(item) &&
-            !home.flatFiles.lastDeployedFiles.has(item.id)
+            !fileStore.lastDeployedFiles.has(item.id)
           "
           class="text-git-added"
           :data-automation="`${item.id}-decorator`"
@@ -45,7 +45,7 @@
           v-if="
             item.isFile &&
             !isFileIncluded(item) &&
-            home.flatFiles.lastDeployedFiles.has(item.id)
+            fileStore.lastDeployedFiles.has(item.id)
           "
           class="text-git-deleted"
         >
@@ -63,6 +63,7 @@ import {
   excludedFileTooltip,
 } from "src/components/views/projectFiles/tooltips";
 import { useHomeStore } from "src/stores/home";
+import { useFileStore } from "src/stores/file";
 import { useHostConduitService } from "src/HostConduitService";
 import PostDecor from "src/components/tree/PostDecor.vue";
 import { ActionButton } from "src/components/ActionToolbar.vue";
@@ -81,6 +82,7 @@ interface Props {
 defineProps<Props>();
 
 const home = useHomeStore();
+const fileStore = useFileStore();
 const { sendMsg } = useHostConduitService();
 
 const isEntrypoint = (file: Pick<ContentRecordFile, "id">): boolean => {
diff --git a/extensions/vscode/webviews/homeView/src/stores/file.ts b/extensions/vscode/webviews/homeView/src/stores/file.ts
new file mode 100644
index 000000000..cdebaff22
--- /dev/null
+++ b/extensions/vscode/webviews/homeView/src/stores/file.ts
@@ -0,0 +1,60 @@
+import { defineStore } from "pinia";
+import { computed, ref } from "vue";
+
+import { useHomeStore } from "src/stores/home";
+import { useHostConduitService } from "src/HostConduitService";
+import { flattenFiles } from "src/utils/files";
+
+import { ContentRecordFile } from "../../../../src/api/types/files";
+import { WebviewToHostMessageType } from "../../../../src/types/messages/webviewToHostMessages";
+
+export const useFileStore = defineStore("file", () => {
+  const home = useHomeStore();
+  const { sendMsg } = useHostConduitService();
+
+  const files = ref<ContentRecordFile>();
+
+  const flatFiles = computed(() => flattenFiles(files.value?.files || []));
+
+  const lastDeployedFiles = computed((): Set<string> => {
+    if (home.selectedContentRecord?.state !== "new") {
+      return new Set(home.selectedContentRecord?.files);
+    }
+    return new Set();
+  });
+
+  function refreshFiles() {
+    sendMsg({ kind: WebviewToHostMessageType.REQUEST_FILES_LISTS });
+  }
+
+  function includeFile({ id }: Pick<ContentRecordFile, "id">) {
+    sendMsg({
+      kind: WebviewToHostMessageType.INCLUDE_FILE,
+      content: { path: id },
+    });
+  }
+
+  function excludeFile({ id }: Pick<ContentRecordFile, "id">) {
+    sendMsg({
+      kind: WebviewToHostMessageType.EXCLUDE_FILE,
+      content: { path: id },
+    });
+  }
+
+  function openFile({ id }: Pick<ContentRecordFile, "id">) {
+    sendMsg({
+      kind: WebviewToHostMessageType.VSCODE_OPEN_RELATIVE,
+      content: { relativePath: id },
+    });
+  }
+
+  return {
+    files,
+    lastDeployedFiles,
+    flatFiles,
+    refreshFiles,
+    includeFile,
+    excludeFile,
+    openFile,
+  };
+});
diff --git a/extensions/vscode/webviews/homeView/src/stores/home.ts b/extensions/vscode/webviews/homeView/src/stores/home.ts
index 6719ec6a1..6c71de4cf 100644
--- a/extensions/vscode/webviews/homeView/src/stores/home.ts
+++ b/extensions/vscode/webviews/homeView/src/stores/home.ts
@@ -8,14 +8,12 @@ import {
   ContentRecord,
   PreContentRecord,
   Configuration,
-  ContentRecordFile,
   ConfigurationError,
 } from "../../../../src/api";
 import { isConfigurationError } from "../../../../src/api/types/configurations";
 import { WebviewToHostMessageType } from "../../../../src/types/messages/webviewToHostMessages";
 import { RPackage } from "../../../../src/api/types/packages";
 import { DeploymentSelector } from "../../../../src/types/shared";
-import { flattenFiles, splitFilesOnInclusion } from "src/utils/files";
 import {
   isAgentErrorInvalidTOML,
   isAgentErrorTypeUnknown,
@@ -136,27 +134,6 @@ export const useHomeStore = defineStore("home", () => {
   const lastContentRecordResult = ref<string>();
   const lastContentRecordMsg = ref<string>();
 
-  const files = ref<ContentRecordFile>();
-
-  const ultraFlatFiles = computed(() => flattenFiles(files.value?.files || []));
-
-  const flatFiles = computed(() => {
-    const response: {
-      includedFiles: ContentRecordFile[];
-      excludedFiles: ContentRecordFile[];
-      lastDeployedFiles: Set<string>;
-    } = { includedFiles: [], excludedFiles: [], lastDeployedFiles: new Set() };
-    if (files.value) {
-      splitFilesOnInclusion(files.value, response);
-    }
-
-    if (selectedContentRecord.value?.state !== "new") {
-      response.lastDeployedFiles = new Set(selectedContentRecord.value?.files);
-    }
-
-    return response;
-  });
-
   const pythonProject = ref<boolean>(false);
   const pythonPackages = ref<string[]>();
   const pythonPackageFile = ref<string>();
@@ -425,9 +402,6 @@ export const useHomeStore = defineStore("home", () => {
     selectedContentRecord,
     selectedConfiguration,
     serverCredential,
-    files,
-    ultraFlatFiles,
-    flatFiles,
     initializingRequestComplete,
     lastContentRecordResult,
     lastContentRecordMsg,
diff --git a/extensions/vscode/webviews/homeView/src/utils/files.ts b/extensions/vscode/webviews/homeView/src/utils/files.ts
index 6b7bb6a63..2a3832f7a 100644
--- a/extensions/vscode/webviews/homeView/src/utils/files.ts
+++ b/extensions/vscode/webviews/homeView/src/utils/files.ts
@@ -1,33 +1,5 @@
 import { ContentRecordFile } from "../../../../src/api";
 
-export function splitFilesOnInclusion(
-  file: ContentRecordFile,
-  response: {
-    includedFiles: ContentRecordFile[];
-    excludedFiles: ContentRecordFile[];
-  } = { includedFiles: [], excludedFiles: [] },
-): {
-  includedFiles: ContentRecordFile[];
-  excludedFiles: ContentRecordFile[];
-} {
-  if (file.isFile) {
-    if (file.reason?.exclude === false) {
-      response.includedFiles.push(file);
-    } else {
-      response.excludedFiles.push(file);
-    }
-  } else {
-    // Don't include .posit files in the response
-    if (file.id === ".posit") {
-      return response;
-    }
-  }
-
-  file.files.forEach((f) => splitFilesOnInclusion(f, response));
-
-  return response;
-}
-
 export function canFileBeIncluded(file: ContentRecordFile): boolean {
   return Boolean(file.reason?.exclude && file.reason?.source !== "built-in");
 }

From 607c6af01700b5e7827931001ff5d56795d5ca73 Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Fri, 22 Nov 2024 13:28:26 -0800
Subject: [PATCH 10/19] Create ProjectFile component for virtualization

---
 .../views/projectFiles/ProjectFile.vue        | 107 ++++++++++++++++++
 1 file changed, 107 insertions(+)
 create mode 100644 extensions/vscode/webviews/homeView/src/components/views/projectFiles/ProjectFile.vue

diff --git a/extensions/vscode/webviews/homeView/src/components/views/projectFiles/ProjectFile.vue b/extensions/vscode/webviews/homeView/src/components/views/projectFiles/ProjectFile.vue
new file mode 100644
index 000000000..08dbb5551
--- /dev/null
+++ b/extensions/vscode/webviews/homeView/src/components/views/projectFiles/ProjectFile.vue
@@ -0,0 +1,107 @@
+<template>
+  <TreeItemCheckbox
+    :title="file.base"
+    :checked="isIncluded"
+    :disabled="isDisabled"
+    :list-style="listStyle"
+    :indent-level="file.indent + 1"
+    :tooltip="tooltip"
+    :actions="actions"
+    @check="fileStore.includeFile(file)"
+    @uncheck="fileStore.excludeFile(file)"
+  >
+    <template #postDecor>
+      <PostDecor
+        v-if="isBeingAdded"
+        class="text-git-added"
+        :data-automation="`${file.id}-decorator`"
+      >
+        A
+      </PostDecor>
+      <PostDecor v-if="isBeingRemoved" class="text-git-deleted">R</PostDecor>
+    </template>
+  </TreeItemCheckbox>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+import TreeItemCheckbox from "src/components/tree/TreeItemCheckbox.vue";
+import { ActionButton } from "src/components/ActionToolbar.vue";
+import { useHomeStore } from "src/stores/home";
+import { useFileStore } from "src/stores/file";
+import { FlatFile } from "src/utils/files";
+import {
+  excludedFileTooltip,
+  includedFileTooltip,
+} from "src/components/views/projectFiles/tooltips";
+import { isConfigurationError } from "../../../../../../src/api";
+
+interface Props {
+  file: FlatFile;
+}
+
+const props = defineProps<Props>();
+
+const home = useHomeStore();
+const fileStore = useFileStore();
+
+const isDisabled = computed((): boolean => {
+  const source = props.file.reason?.source;
+  return source === "built-in" || source === "permissions";
+});
+
+const isIncluded = computed((): boolean => {
+  return Boolean(props.file.reason?.exclude === false);
+});
+
+const inLastDeployed = computed(() => {
+  return fileStore.lastDeployedFiles.has(props.file.id);
+});
+
+const isBeingAdded = computed(() => {
+  return props.file.isFile && isIncluded.value && !inLastDeployed.value;
+});
+
+const isBeingRemoved = computed(() => {
+  return props.file.isFile && !isIncluded.value && inLastDeployed.value;
+});
+
+const isEntrypoint = computed((): boolean => {
+  const config = home.selectedConfiguration;
+  if (config != undefined && !isConfigurationError(config)) {
+    return props.file.id === config.configuration.entrypoint;
+  }
+  return false;
+});
+
+const listStyle = computed((): "emphasized" | "default" | "deemphasized" => {
+  return isEntrypoint.value
+    ? "emphasized"
+    : isIncluded.value
+      ? "default"
+      : "deemphasized";
+});
+
+const tooltip = computed((): string => {
+  return isIncluded.value
+    ? includedFileTooltip(props.file)
+    : excludedFileTooltip(props.file);
+});
+
+const actions = computed((): ActionButton[] => {
+  let actions: ActionButton[] = [];
+
+  if (props.file.isFile) {
+    actions.push({
+      label: "Open file",
+      codicon: "codicon-link-external",
+      fn: () => {
+        fileStore.openFile(props.file);
+      },
+    });
+  }
+
+  return actions;
+});
+</script>

From f9c403031f1e4a2ebb550d5650e170dd46e51fa5 Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Fri, 22 Nov 2024 13:28:39 -0800
Subject: [PATCH 11/19] Raise RecycleScroller to ProjectFiles

---
 .../views/projectFiles/ProjectFiles.vue       |  19 ++-
 .../views/projectFiles/TreeProjectFiles.vue   | 144 ------------------
 2 files changed, 16 insertions(+), 147 deletions(-)
 delete mode 100644 extensions/vscode/webviews/homeView/src/components/views/projectFiles/TreeProjectFiles.vue

diff --git a/extensions/vscode/webviews/homeView/src/components/views/projectFiles/ProjectFiles.vue b/extensions/vscode/webviews/homeView/src/components/views/projectFiles/ProjectFiles.vue
index c2ecd55d1..374268721 100644
--- a/extensions/vscode/webviews/homeView/src/components/views/projectFiles/ProjectFiles.vue
+++ b/extensions/vscode/webviews/homeView/src/components/views/projectFiles/ProjectFiles.vue
@@ -10,8 +10,15 @@
       },
     ]"
   >
-    <template v-if="fileStore.flatFiles">
-      <TreeProjectFiles :files="fileStore.flatFiles" />
+    <template v-if="fileStore.flatFiles.length">
+      <RecycleScroller
+        class="scroller"
+        :items="fileStore.flatFiles"
+        :item-size="22"
+        v-slot="{ item }"
+      >
+        <ProjectFile :file="item" />
+      </RecycleScroller>
     </template>
     <p v-else>No files found</p>
   </TreeSection>
@@ -19,8 +26,14 @@
 
 <script setup lang="ts">
 import TreeSection from "src/components/tree/TreeSection.vue";
-import TreeProjectFiles from "src/components/views/projectFiles/TreeProjectFiles.vue";
 import { useFileStore } from "src/stores/file";
+import ProjectFile from "src/components/views/projectFiles/ProjectFile.vue";
 
 const fileStore = useFileStore();
 </script>
+
+<style lang="scss" scoped>
+.scroller {
+  max-height: 500px;
+}
+</style>
diff --git a/extensions/vscode/webviews/homeView/src/components/views/projectFiles/TreeProjectFiles.vue b/extensions/vscode/webviews/homeView/src/components/views/projectFiles/TreeProjectFiles.vue
deleted file mode 100644
index b6c3172f8..000000000
--- a/extensions/vscode/webviews/homeView/src/components/views/projectFiles/TreeProjectFiles.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<template>
-  <RecycleScroller
-    class="scroller"
-    :items="files"
-    :item-size="22"
-    v-slot="{ item }"
-  >
-    <TreeItemCheckbox
-      :title="item.base"
-      :checked="isFileIncluded(item)"
-      :disabled="
-        item.reason?.source === 'built-in' ||
-        item.reason?.source === 'permissions'
-      "
-      :list-style="
-        isEntrypoint(item)
-          ? 'emphasized'
-          : isFileIncluded(item)
-            ? 'default'
-            : 'deemphasized'
-      "
-      :tooltip="
-        isFileIncluded(item)
-          ? includedFileTooltip(item)
-          : excludedFileTooltip(item)
-      "
-      :indentLevel="item.indent + 1"
-      :actions="fileActions(item)"
-      @check="includeFile(item.id)"
-      @uncheck="excludeFile(item.id)"
-    >
-      <template #postDecor>
-        <PostDecor
-          v-if="
-            item.isFile &&
-            isFileIncluded(item) &&
-            !fileStore.lastDeployedFiles.has(item.id)
-          "
-          class="text-git-added"
-          :data-automation="`${item.id}-decorator`"
-        >
-          A
-        </PostDecor>
-        <PostDecor
-          v-if="
-            item.isFile &&
-            !isFileIncluded(item) &&
-            fileStore.lastDeployedFiles.has(item.id)
-          "
-          class="text-git-deleted"
-        >
-          R
-        </PostDecor>
-      </template>
-    </TreeItemCheckbox>
-  </RecycleScroller>
-</template>
-
-<script setup lang="ts">
-import TreeItemCheckbox from "src/components/tree/TreeItemCheckbox.vue";
-import {
-  includedFileTooltip,
-  excludedFileTooltip,
-} from "src/components/views/projectFiles/tooltips";
-import { useHomeStore } from "src/stores/home";
-import { useFileStore } from "src/stores/file";
-import { useHostConduitService } from "src/HostConduitService";
-import PostDecor from "src/components/tree/PostDecor.vue";
-import { ActionButton } from "src/components/ActionToolbar.vue";
-import { FlatFile } from "src/utils/files";
-
-import {
-  ContentRecordFile,
-  isConfigurationError,
-} from "../../../../../../src/api";
-import { WebviewToHostMessageType } from "../../../../../../src/types/messages/webviewToHostMessages";
-
-interface Props {
-  files: FlatFile[];
-}
-
-defineProps<Props>();
-
-const home = useHomeStore();
-const fileStore = useFileStore();
-const { sendMsg } = useHostConduitService();
-
-const isEntrypoint = (file: Pick<ContentRecordFile, "id">): boolean => {
-  const config = home.selectedConfiguration;
-  if (config != undefined && !isConfigurationError(config)) {
-    return file.id === config.configuration.entrypoint;
-  }
-  return false;
-};
-
-const isFileIncluded = (file: Pick<ContentRecordFile, "reason">) => {
-  return Boolean(file.reason?.exclude === false);
-};
-
-const includeFile = (id: string) => {
-  sendMsg({
-    kind: WebviewToHostMessageType.INCLUDE_FILE,
-    content: { path: id },
-  });
-};
-
-const excludeFile = (id: string) => {
-  sendMsg({
-    kind: WebviewToHostMessageType.EXCLUDE_FILE,
-    content: { path: id },
-  });
-};
-
-const openFile = (id: string) => {
-  sendMsg({
-    kind: WebviewToHostMessageType.VSCODE_OPEN_RELATIVE,
-    content: { relativePath: id },
-  });
-};
-
-const fileActions = (
-  file: Pick<ContentRecordFile, "id" | "isFile">,
-): ActionButton[] => {
-  let actions: ActionButton[] = [];
-
-  if (file.isFile) {
-    actions.push({
-      label: "Open file",
-      codicon: "codicon-link-external",
-      fn: () => {
-        openFile(file.id);
-      },
-    });
-  }
-
-  return actions;
-};
-</script>
-
-<style lang="scss" scoped>
-.scroller {
-  max-height: 500px;
-}
-</style>

From 949eb6da24c0bdc8084866bfe5a0743f7c110edf Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Fri, 22 Nov 2024 13:30:03 -0800
Subject: [PATCH 12/19] Add comment about file prop virtual reactivity

---
 .../src/components/views/projectFiles/ProjectFile.vue        | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/extensions/vscode/webviews/homeView/src/components/views/projectFiles/ProjectFile.vue b/extensions/vscode/webviews/homeView/src/components/views/projectFiles/ProjectFile.vue
index 08dbb5551..cb253f5d2 100644
--- a/extensions/vscode/webviews/homeView/src/components/views/projectFiles/ProjectFile.vue
+++ b/extensions/vscode/webviews/homeView/src/components/views/projectFiles/ProjectFile.vue
@@ -37,6 +37,11 @@ import {
 } from "src/components/views/projectFiles/tooltips";
 import { isConfigurationError } from "../../../../../../src/api";
 
+/**
+ * This component is used for list virtualization. It must be reactive to the
+ * item prop being updated without being re-created.
+ * See: https://github.com/Akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/README.md#important-notes
+ */
 interface Props {
   file: FlatFile;
 }

From 71392201b2a395c3df87fbe21d2a82450b6e9906 Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Mon, 2 Dec 2024 15:23:19 -0800
Subject: [PATCH 13/19] Allow TreeItemCheckbox parent to handle expand

---
 .../src/components/tree/TreeItemCheckbox.vue  | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/extensions/vscode/webviews/homeView/src/components/tree/TreeItemCheckbox.vue b/extensions/vscode/webviews/homeView/src/components/tree/TreeItemCheckbox.vue
index 9afec3740..3139c464b 100644
--- a/extensions/vscode/webviews/homeView/src/components/tree/TreeItemCheckbox.vue
+++ b/extensions/vscode/webviews/homeView/src/components/tree/TreeItemCheckbox.vue
@@ -3,7 +3,7 @@
     class="tree-item"
     :class="{
       'align-icon-with-twisty': alignIconWithTwisty,
-      collapsible: $slots.default,
+      collapsible: isExpandable,
       'text-list-emphasized': listStyle === 'emphasized',
       'text-foreground': listStyle === 'default',
       'text-list-deemphasized': listStyle === 'deemphasized',
@@ -16,15 +16,15 @@
       <div
         class="twisty-container text-icon"
         :class="[
-          { codicon: $slots.default },
-          $slots.default
+          { codicon: isExpandable },
+          expandable || $slots.default
             ? expanded
               ? 'codicon-chevron-down'
               : 'codicon-chevron-right'
             : undefined,
         ]"
         v-on="{
-          click: $slots.default ? toggleExpanded : undefined,
+          click: isExpandable ? toggleExpanded : undefined,
         }"
       />
       <vscode-checkbox
@@ -46,13 +46,15 @@
       </div>
     </div>
 
-    <div v-show="$slots.default && expanded" class="tree-item-children">
+    <div v-show="isExpandable && expanded" class="tree-item-children">
       <slot :indent-level="indentLevel + 1" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
+
 import ActionToolbar, { ActionButton } from "src/components/ActionToolbar.vue";
 
 export type TreeItemStyle = "emphasized" | "default" | "deemphasized";
@@ -69,23 +71,30 @@ interface Props {
   alignIconWithTwisty?: boolean;
   actions?: ActionButton[];
   indentLevel?: number;
+  expandable?: boolean;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   listStyle: "default",
   indentLevel: 1,
+  expandable: false,
 });
 
-defineSlots<{
+const slots = defineSlots<{
   default(props: { indentLevel: number }): any;
   postDecor(): any;
 }>();
 
-defineEmits(["check", "uncheck"]);
+const emits = defineEmits(["check", "uncheck", "expand", "collapse"]);
 
 const toggleExpanded = () => {
   expanded.value = !expanded.value;
+  emits(expanded.value ? "expand" : "collapse");
 };
+
+const isExpandable = computed((): Boolean => {
+  return Boolean(slots.default || props.expandable);
+});
 </script>
 
 <style lang="scss" scoped>

From cfd0801c656c0c41053cbc483c2b192eb6599026 Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Mon, 2 Dec 2024 15:25:47 -0800
Subject: [PATCH 14/19] Handle expanded directories in file store

---
 .../views/projectFiles/ProjectFile.vue          |  3 +++
 .../vscode/webviews/homeView/src/stores/file.ts | 17 ++++++++++++++++-
 .../vscode/webviews/homeView/src/utils/files.ts |  5 ++++-
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/extensions/vscode/webviews/homeView/src/components/views/projectFiles/ProjectFile.vue b/extensions/vscode/webviews/homeView/src/components/views/projectFiles/ProjectFile.vue
index cb253f5d2..dcd849f5a 100644
--- a/extensions/vscode/webviews/homeView/src/components/views/projectFiles/ProjectFile.vue
+++ b/extensions/vscode/webviews/homeView/src/components/views/projectFiles/ProjectFile.vue
@@ -5,10 +5,13 @@
     :disabled="isDisabled"
     :list-style="listStyle"
     :indent-level="file.indent + 1"
+    :expandable="file.isDir"
     :tooltip="tooltip"
     :actions="actions"
     @check="fileStore.includeFile(file)"
     @uncheck="fileStore.excludeFile(file)"
+    @expand="fileStore.expandDir(file)"
+    @collapse="fileStore.collapseDir(file)"
   >
     <template #postDecor>
       <PostDecor
diff --git a/extensions/vscode/webviews/homeView/src/stores/file.ts b/extensions/vscode/webviews/homeView/src/stores/file.ts
index cdebaff22..f87c627f1 100644
--- a/extensions/vscode/webviews/homeView/src/stores/file.ts
+++ b/extensions/vscode/webviews/homeView/src/stores/file.ts
@@ -14,7 +14,11 @@ export const useFileStore = defineStore("file", () => {
 
   const files = ref<ContentRecordFile>();
 
-  const flatFiles = computed(() => flattenFiles(files.value?.files || []));
+  const expandedDirs = ref<Set<string>>(new Set());
+
+  const flatFiles = computed(() =>
+    flattenFiles(files.value?.files || [], expandedDirs.value),
+  );
 
   const lastDeployedFiles = computed((): Set<string> => {
     if (home.selectedContentRecord?.state !== "new") {
@@ -48,13 +52,24 @@ export const useFileStore = defineStore("file", () => {
     });
   }
 
+  function expandDir({ id }: Pick<ContentRecordFile, "id">) {
+    expandedDirs.value.add(id);
+  }
+
+  function collapseDir({ id }: Pick<ContentRecordFile, "id">) {
+    expandedDirs.value.delete(id);
+  }
+
   return {
     files,
+    expandedDirs,
     lastDeployedFiles,
     flatFiles,
     refreshFiles,
     includeFile,
     excludeFile,
     openFile,
+    expandDir,
+    collapseDir,
   };
 });
diff --git a/extensions/vscode/webviews/homeView/src/utils/files.ts b/extensions/vscode/webviews/homeView/src/utils/files.ts
index 2a3832f7a..7d0d5ff6c 100644
--- a/extensions/vscode/webviews/homeView/src/utils/files.ts
+++ b/extensions/vscode/webviews/homeView/src/utils/files.ts
@@ -15,6 +15,7 @@ export type FlatFile = Omit<ContentRecordFile, "files"> & {
 
 export function flattenFiles(
   files: ContentRecordFile[],
+  expandedDirs: Set<string>,
   arr = new Array<FlatFile>(),
   indent = 0,
   parentFile?: string,
@@ -27,7 +28,9 @@ export function flattenFiles(
       parent: parentFile,
     };
     arr.push(flatFile);
-    flattenFiles(file.files, arr, indent + 1, file.id);
+    if (file.files.length > 0 && expandedDirs.has(file.id)) {
+      flattenFiles(file.files, expandedDirs, arr, indent + 1, file.id);
+    }
   });
 
   return arr;

From e2f13b22c41d457250141de3abd48bb80ee71880 Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Mon, 2 Dec 2024 15:25:57 -0800
Subject: [PATCH 15/19] Reset expanded folders when the base file changes

---
 .../vscode/webviews/homeView/src/HostConduitService.ts      | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/extensions/vscode/webviews/homeView/src/HostConduitService.ts b/extensions/vscode/webviews/homeView/src/HostConduitService.ts
index 480bee724..e45a90ae4 100644
--- a/extensions/vscode/webviews/homeView/src/HostConduitService.ts
+++ b/extensions/vscode/webviews/homeView/src/HostConduitService.ts
@@ -198,6 +198,12 @@ const onSaveSelectionMsg = () => {
 
 const onRefreshFilesMsg = (msg: RefreshFilesMsg) => {
   const fileStore = useFileStore();
+
+  // If the root file has changed, reset the expanded directories
+  if (msg.content.files.abs !== fileStore.files?.abs) {
+    fileStore.expandedDirs = new Set();
+  }
+
   fileStore.files = msg.content.files;
 };
 

From 3a7d90e16b4ccaac7d3ab81f4c7414cafc064068 Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Mon, 2 Dec 2024 15:30:18 -0800
Subject: [PATCH 16/19] Add JSDoc to flattenFiles function

---
 extensions/vscode/webviews/homeView/src/utils/files.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/extensions/vscode/webviews/homeView/src/utils/files.ts b/extensions/vscode/webviews/homeView/src/utils/files.ts
index 7d0d5ff6c..a4429867a 100644
--- a/extensions/vscode/webviews/homeView/src/utils/files.ts
+++ b/extensions/vscode/webviews/homeView/src/utils/files.ts
@@ -13,6 +13,16 @@ export type FlatFile = Omit<ContentRecordFile, "files"> & {
   parent?: string;
 };
 
+/**
+ * Flattens a ContentRecordFile[] into a FlatFile[] array
+ *
+ * @param files The ContentRecordFile[] to flatten
+ * @param expandedDirs The Set of expanded directories
+ * @param arr The array to push the flattened files to
+ * @param indent The current indent level
+ * @param parentFile The parent file of the directory being flattened
+ * @returns
+ */
 export function flattenFiles(
   files: ContentRecordFile[],
   expandedDirs: Set<string>,

From 609b154a45a6461aaa8e61b2adffa6696cac36bb Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Mon, 2 Dec 2024 16:04:20 -0800
Subject: [PATCH 17/19] Change TreeItemCheckbox hover based on if virtual

---
 .../src/components/tree/TreeItemCheckbox.vue       | 14 +++++++++++---
 .../components/views/projectFiles/ProjectFile.vue  |  1 +
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/extensions/vscode/webviews/homeView/src/components/tree/TreeItemCheckbox.vue b/extensions/vscode/webviews/homeView/src/components/tree/TreeItemCheckbox.vue
index 3139c464b..f402662c4 100644
--- a/extensions/vscode/webviews/homeView/src/components/tree/TreeItemCheckbox.vue
+++ b/extensions/vscode/webviews/homeView/src/components/tree/TreeItemCheckbox.vue
@@ -9,7 +9,11 @@
       'text-list-deemphasized': listStyle === 'deemphasized',
     }"
   >
-    <div class="tree-item-container" :title="tooltip">
+    <div
+      class="tree-item-container"
+      :class="virtualized ? 'class-hover' : undefined"
+      :title="tooltip"
+    >
       <div class="indent">
         <div v-for="_ in indentLevel - 1" class="indent-guide"></div>
       </div>
@@ -72,12 +76,14 @@ interface Props {
   actions?: ActionButton[];
   indentLevel?: number;
   expandable?: boolean;
+  virtualized?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   listStyle: "default",
   indentLevel: 1,
   expandable: false,
+  virtualized: false,
 });
 
 const slots = defineSlots<{
@@ -183,7 +189,8 @@ const isExpandable = computed((): Boolean => {
       flex-grow: 100;
     }
 
-    &:hover {
+    .hover &.class-hover,
+    &:not(.class-hover):hover {
       color: var(--vscode-list-hoverForeground, var(--vscode-foreground));
       background-color: var(--vscode-list-hoverBackground);
 
@@ -200,7 +207,8 @@ const isExpandable = computed((): Boolean => {
       }
     }
 
-    &:hover .actions,
+    .hover &.class-hover .actions,
+    &:not(.class-hover):hover .actions,
     &:focus-within .actions {
       display: initial;
     }
diff --git a/extensions/vscode/webviews/homeView/src/components/views/projectFiles/ProjectFile.vue b/extensions/vscode/webviews/homeView/src/components/views/projectFiles/ProjectFile.vue
index dcd849f5a..9fe33a31c 100644
--- a/extensions/vscode/webviews/homeView/src/components/views/projectFiles/ProjectFile.vue
+++ b/extensions/vscode/webviews/homeView/src/components/views/projectFiles/ProjectFile.vue
@@ -8,6 +8,7 @@
     :expandable="file.isDir"
     :tooltip="tooltip"
     :actions="actions"
+    :virtualized="true"
     @check="fileStore.includeFile(file)"
     @uncheck="fileStore.excludeFile(file)"
     @expand="fileStore.expandDir(file)"

From ca12df181de4c26193dd5a8e8c45962a875ff87a Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Mon, 2 Dec 2024 16:11:32 -0800
Subject: [PATCH 18/19] Add features to TreeItem as well

---
 .../homeView/src/components/tree/TreeItem.vue | 34 ++++++++++++++-----
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/extensions/vscode/webviews/homeView/src/components/tree/TreeItem.vue b/extensions/vscode/webviews/homeView/src/components/tree/TreeItem.vue
index 5a5f6bef5..f23eb5c16 100644
--- a/extensions/vscode/webviews/homeView/src/components/tree/TreeItem.vue
+++ b/extensions/vscode/webviews/homeView/src/components/tree/TreeItem.vue
@@ -3,7 +3,7 @@
     class="tree-item"
     :class="{
       'align-icon-with-twisty': alignIconWithTwisty,
-      collapsible: $slots.default,
+      collapsible: isExpandable,
       'text-list-emphasized': listStyle === 'emphasized',
       'text-foreground': listStyle === 'default',
       'text-list-deemphasized': listStyle === 'deemphasized',
@@ -11,9 +11,10 @@
   >
     <div
       class="tree-item-container"
+      :class="virtualized ? 'class-hover' : undefined"
       :title="tooltip"
       v-on="{
-        click: $slots.default ? toggleExpanded : undefined,
+        click: isExpandable ? toggleExpanded : undefined,
       }"
     >
       <div class="indent">
@@ -22,8 +23,8 @@
       <div
         class="twisty-container text-icon"
         :class="[
-          { codicon: $slots.default },
-          $slots.default
+          { codicon: isExpandable },
+          expandable || $slots.default
             ? expanded
               ? 'codicon-chevron-down'
               : 'codicon-chevron-right'
@@ -52,13 +53,15 @@
       </div>
     </div>
 
-    <div v-show="$slots.default && expanded" class="tree-item-children">
+    <div v-show="isExpandable && expanded" class="tree-item-children">
       <slot :indent-level="indentLevel + 1" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
+
 import ActionToolbar, { ActionButton } from "src/components/ActionToolbar.vue";
 
 export type TreeItemStyle = "emphasized" | "default" | "deemphasized";
@@ -74,22 +77,33 @@ interface Props {
   codicon?: string;
   actions?: ActionButton[];
   indentLevel?: number;
+  expandable?: boolean;
+  virtualized?: boolean;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   listStyle: "default",
   indentLevel: 1,
+  expandable: false,
+  virtualized: false,
 });
 
-defineSlots<{
+const slots = defineSlots<{
   default(props: { indentLevel: number }): any;
   description(): any;
   postDecor(): any;
 }>();
 
+const emits = defineEmits(["expand", "collapse"]);
+
 const toggleExpanded = () => {
   expanded.value = !expanded.value;
+  emits(expanded.value ? "expand" : "collapse");
 };
+
+const isExpandable = computed((): Boolean => {
+  return Boolean(slots.default || props.expandable);
+});
 </script>
 
 <style lang="scss" scoped>
@@ -192,7 +206,8 @@ const toggleExpanded = () => {
       flex-grow: 100;
     }
 
-    &:hover {
+    .hover &.class-hover,
+    &:not(.class-hover):hover {
       color: var(--vscode-list-hoverForeground, var(--vscode-foreground));
       background-color: var(--vscode-list-hoverBackground);
 
@@ -209,7 +224,8 @@ const toggleExpanded = () => {
       }
     }
 
-    &:hover .actions,
+    .hover &.class-hover .actions,
+    &:not(.class-hover):hover .actions,
     &:focus-within .actions {
       display: initial;
     }

From b8d9eee3d67e544139785c36d69392e107b0b5b2 Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Mon, 2 Dec 2024 16:58:08 -0800
Subject: [PATCH 19/19] Add File store unit tests

---
 .../webviews/homeView/src/stores/file.test.ts | 90 +++++++++++++++++++
 1 file changed, 90 insertions(+)
 create mode 100644 extensions/vscode/webviews/homeView/src/stores/file.test.ts

diff --git a/extensions/vscode/webviews/homeView/src/stores/file.test.ts b/extensions/vscode/webviews/homeView/src/stores/file.test.ts
new file mode 100644
index 000000000..66d1c8f38
--- /dev/null
+++ b/extensions/vscode/webviews/homeView/src/stores/file.test.ts
@@ -0,0 +1,90 @@
+import { setActivePinia, createPinia } from "pinia";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { WebviewApi } from "vscode-webview";
+
+import { vscodeAPI } from "src/vscode";
+import { useFileStore } from "src/stores/file";
+
+vi.mock(import("src/vscode"));
+
+vi.mock("src/vscode", () => {
+  const postMessage = vi.fn();
+
+  const vscodeAPI = vi.fn(() => ({
+    postMessage: postMessage,
+  }));
+
+  return { vscodeAPI };
+});
+
+describe("File Store", () => {
+  let vscodeApi: WebviewApi<unknown>;
+
+  beforeEach(() => {
+    vscodeApi = vscodeAPI();
+
+    setActivePinia(createPinia());
+    vi.clearAllMocks();
+  });
+
+  test("initializes with no expanded directories", () => {
+    const file = useFileStore();
+    expect(file.expandedDirs.size).toBe(0);
+  });
+
+  test("refreshing files sends a message to vscode", () => {
+    const file = useFileStore();
+    file.refreshFiles();
+    expect(vscodeApi.postMessage).toHaveBeenCalledWith(
+      JSON.stringify({
+        kind: "requestFilesLists",
+      }),
+    );
+  });
+
+  test("including a file sends a message to vscode", () => {
+    const file = useFileStore();
+    file.includeFile({ id: "file" });
+    expect(vscodeApi.postMessage).toHaveBeenCalledWith(
+      JSON.stringify({
+        kind: "includeFile",
+        content: { path: "file" },
+      }),
+    );
+  });
+
+  test("excluding a file sends a message to vscode", () => {
+    const file = useFileStore();
+    file.excludeFile({ id: "file" });
+    expect(vscodeApi.postMessage).toHaveBeenCalledWith(
+      JSON.stringify({
+        kind: "excludeFile",
+        content: { path: "file" },
+      }),
+    );
+  });
+
+  test("opening a file sends a message to vscode", () => {
+    const file = useFileStore();
+    file.openFile({ id: "file" });
+    expect(vscodeApi.postMessage).toHaveBeenCalledWith(
+      JSON.stringify({
+        kind: "VSCodeOpenRelativeMsg",
+        content: { relativePath: "file" },
+      }),
+    );
+  });
+
+  test("expanding a directory adds it to the expanded directories", () => {
+    const file = useFileStore();
+    file.expandDir({ id: "dir" });
+    expect(file.expandedDirs.has("dir")).toBe(true);
+  });
+
+  test("collapsing a directory removes it from the expanded directories", () => {
+    const file = useFileStore();
+    file.expandDir({ id: "dir" });
+    file.collapseDir({ id: "dir" });
+    expect(file.expandedDirs.has("dir")).toBe(false);
+  });
+});