Move selector into dedicated component

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> 

pvc-vue/src/components/pages/nodes/NodeOverview.vue

@@ -1,26 +1,10 @@
 <template>
   <div class="overview-container">
-    <!-- Node Tabs -->
+    <NodeSelectBar
-    <div class="node-tabs-wrapper">
+      v-model="selectedNode"
-      <div class="node-tabs" ref="tabsContainer">
+      :nodes="availableNodes"
-        <button
+      @select="handleNodeSelect"
-          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>
 
     <!-- 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>