From e450c5dca3c65a992738b708cf83d62df42f594c Mon Sep 17 00:00:00 2001
From: Joshua Boniface <joshuab@clearcable.ca>
Date: Sun, 2 Mar 2025 11:22:51 -0500
Subject: [PATCH] Move selector into dedicated component

---
 .../src/components/general/NodeSelectBar.vue  | 70 +++++++++++++++++++
 .../components/pages/nodes/NodeOverview.vue   | 36 ++++------
 2 files changed, 85 insertions(+), 21 deletions(-)
 create mode 100644 pvc-vue/src/components/general/NodeSelectBar.vue

diff --git a/pvc-vue/src/components/general/NodeSelectBar.vue b/pvc-vue/src/components/general/NodeSelectBar.vue
new file mode 100644
index 0000000..74aeb2e
--- /dev/null
+++ b/pvc-vue/src/components/general/NodeSelectBar.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="node-select-bar">
+    <button
+      v-for="node in nodes"
+      :key="node"
+      class="node-tab"
+      :class="{ 'active': modelValue === node }"
+      @click="selectNode(node)"
+    >
+      {{ node }}
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    required: true
+  },
+  nodes: {
+    type: Array,
+    required: true,
+    default: () => []
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'select']);
+
+const selectNode = (node) => {
+  emit('update:modelValue', node);
+  emit('select', node);
+};
+</script>
+
+<style scoped>
+.node-select-bar {
+  display: flex;
+  gap: 0.25rem;
+  padding: 0.5rem;
+  background-color: white;
+  border-radius: 0.25rem;
+  overflow-x: auto;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+  margin-bottom: 0.5rem;
+}
+
+.node-tab {
+  padding: 0.375rem 0.75rem;
+  border: none;
+  background: none;
+  color: #495057;
+  font-weight: 500;
+  cursor: pointer;
+  border-radius: 0.25rem;
+  white-space: nowrap;
+  transition: all 0.2s;
+}
+
+.node-tab:hover {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
+.node-tab.active {
+  color: #0d6efd;
+  background-color: rgba(13, 110, 253, 0.1);
+}
+</style> 
\ No newline at end of file
diff --git a/pvc-vue/src/components/pages/nodes/NodeOverview.vue b/pvc-vue/src/components/pages/nodes/NodeOverview.vue
index 073c55f..5040a58 100644
--- a/pvc-vue/src/components/pages/nodes/NodeOverview.vue
+++ b/pvc-vue/src/components/pages/nodes/NodeOverview.vue
@@ -1,26 +1,10 @@
 <template>
   <div class="overview-container">
-    <!-- Node Tabs -->
-    <div class="node-tabs-wrapper">
-      <div class="node-tabs" ref="tabsContainer">
-        <button
-          v-for="node in nodeData"
-          :key="node.name"
-          class="node-tab"
-          :class="{ 'active': selectedNode === node.name }"
-          @click="selectNode(node.name)"
-        >
-          {{ node.name }}
-        </button>
-      </div>
-      <!-- Tab scroll buttons -->
-      <button class="tab-scroll-button left" @click="scrollTabs('left')" v-show="showLeftScroll">
-        <i class="fas fa-chevron-left"></i>
-      </button>
-      <button class="tab-scroll-button right" @click="scrollTabs('right')" v-show="showRightScroll">
-        <i class="fas fa-chevron-right"></i>
-      </button>
-    </div>
+    <NodeSelectBar
+      v-model="selectedNode"
+      :nodes="availableNodes"
+      @select="handleNodeSelect"
+    />
 
     <!-- Node Details -->
     <div v-if="selectedNodeData" class="node-details">
@@ -208,6 +192,7 @@ import StorageChart from '../../charts/StorageChart.vue';
 import HealthChart from '../../charts/HealthChart.vue';
 import ValueCard from '../../general/ValueCard.vue';
 import CollapsibleSection from '../../general/CollapsibleSection.vue';
+import NodeSelectBar from '../../general/NodeSelectBar.vue';
 
 // Move all the props, refs, computed properties, and functions from Nodes.vue
 const props = defineProps({
@@ -494,6 +479,15 @@ watch(() => props.nodeData, () => {
 onUnmounted(() => {
   window.removeEventListener('resize', checkScrollButtons);
 });
+
+const availableNodes = computed(() => {
+  return props.nodeData.map(node => node.name).sort();
+});
+
+const handleNodeSelect = (node) => {
+  selectedNode.value = node;
+  // Any other node selection handling logic
+};
 </script>
 
 <style scoped>