Merge pull request #2293 from posit-dev/dotnomad/tree-section-count

extensions/vscode/webviews/homeView/src/components/CountBadge.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="count-badge">{{ count }}</div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  count: number;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.count-badge {
+  background-color: var(--vscode-badge-background);
+  color: var(--vscode-badge-foreground);
+  border: 1px solid var(--vscode-badge-foreground);
+
+  border-radius: 11px;
+  box-sizing: border-box;
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 11px;
+  min-height: 18px;
+  min-width: 18px;
+  padding: 3px 6px;
+  text-align: center;
+}
+</style>

extensions/vscode/webviews/homeView/src/components/tree/TreeSection.vue

@@ -27,6 +27,9 @@
       <div v-if="actions" class="actions">
         <ActionToolbar :title="title" :actions="actions" />
       </div>
+      <div v-if="count" class="count">
+        <CountBadge :count="count" />
+      </div>
     </div>
     <div v-show="expanded" class="pane-body">
       <slot />
@@ -36,6 +39,7 @@
 
 <script setup lang="ts">
 import ActionToolbar, { ActionButton } from "src/components/ActionToolbar.vue";
+import CountBadge from "src/components/CountBadge.vue";
 
 const expanded = defineModel("expanded", { required: false, default: false });
 
@@ -44,6 +48,7 @@ defineProps<{
   description?: string;
   codicon?: string;
   actions?: ActionButton[];
+  count?: number;
 }>();
 
 const toggleExpanded = () => {
@@ -141,6 +146,12 @@ const toggleExpanded = () => {
   & :deep(.action-item) {
     margin-right: 4px;
   }
+
+  .count {
+    display: flex;
+    margin-left: 2px;
+    padding-right: 12px;
+  }
 }
 
 .pane-body {