From 4c50f296fc6cd6de7b72230e0ad64ff3e354c22e Mon Sep 17 00:00:00 2001
From: FragginWagon <greg.r.jacobs@gmail.com>
Date: Thu, 29 Jan 2026 04:02:13 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Refactor=20components=20to=20use?=
 =?UTF-8?q?=20modular=20structure=20and=20computed=20properties=20for=20im?=
 =?UTF-8?q?proved=20maintainability=20and=20reusability=20in=20Gamemaster?=
 =?UTF-8?q?=20Explorer=20and=20FilterPanel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/gamemaster/FilterPanel.vue |   9 +-
 .../src/views/GamemasterExplorer.vue          | 229 +++---------------
 2 files changed, 35 insertions(+), 203 deletions(-)

diff --git a/code/websites/pokedex.online/src/components/gamemaster/FilterPanel.vue b/code/websites/pokedex.online/src/components/gamemaster/FilterPanel.vue
index cad0885..1bcd00f 100644
--- a/code/websites/pokedex.online/src/components/gamemaster/FilterPanel.vue
+++ b/code/websites/pokedex.online/src/components/gamemaster/FilterPanel.vue
@@ -64,9 +64,16 @@ const props = defineProps({
   data: {
     type: Array,
     default: () => []
+  },
+  filterState: {
+    type: Object,
+    default: null
   }
 });
 
+const internalFilterState = useJsonFilter();
+const activeFilterState = computed(() => props.filterState || internalFilterState);
+
 const {
   filterProperty,
   filterValue,
@@ -79,7 +86,7 @@ const {
   setFilter,
   clearFilters,
   getUniqueValues
-} = useJsonFilter();
+} = activeFilterState.value;
 
 const hasData = computed(
   () => Array.isArray(props.data) && props.data.length > 0
diff --git a/code/websites/pokedex.online/src/views/GamemasterExplorer.vue b/code/websites/pokedex.online/src/views/GamemasterExplorer.vue
index 3086ced..875ac61 100644
--- a/code/websites/pokedex.online/src/views/GamemasterExplorer.vue
+++ b/code/websites/pokedex.online/src/views/GamemasterExplorer.vue
@@ -90,120 +90,17 @@
       </div>
 
       <!-- File Selector -->
-      <div class="file-selector">
-        <label for="file-select">Select File:</label>
-        <select id="file-select" v-model="selectedFile" @change="onFileChange">
-          <option value="">-- Choose a file --</option>
-          <option
-            v-for="file in uniqueFiles"
-            :key="file.filename"
-            :value="getFileType(file.filename)"
-          >
-            {{ formatFileName(file.filename) }} ({{ formatSize(file.size) }})
-          </option>
-        </select>
-        <span v-if="fileContent" class="file-info"
-          >{{ fileLines.length.toLocaleString() }} lines</span
-        >
-      </div>
+      <FileSelector :files-state="filesState" />
 
-      <!-- Search Bar -->
-      <div v-if="fileContent" class="search-bar">
-        <div class="search-input-wrapper">
-          <input
-            ref="searchInput"
-            type="text"
-            v-model="searchQuery"
-            @input="onSearchInput"
-            placeholder="Search in file... (Ctrl+F)"
-            class="search-input"
-          />
-          <button
-            v-if="searchQuery"
-            @click="clearSearch"
-            class="btn-clear"
-            title="Clear search"
-          >
-            ✕
-          </button>
-        </div>
-
-        <div v-if="searchResults.length > 0" class="search-results">
-          <span :title="`Line ${searchResults[currentResultIndex] + 1}`">
-            {{ currentResultIndex + 1 }} / {{ searchResults.length }} (Line
-            {{ searchResults[currentResultIndex] + 1 }})
-          </span>
-          <button
-            @click="goToPrevResult"
-            class="btn-nav"
-            :disabled="searchResults.length === 0"
-            title="Previous result (Shift+Ctrl+G)"
-          >
-            ↑
-          </button>
-          <button
-            @click="goToNextResult"
-            class="btn-nav"
-            :disabled="searchResults.length === 0"
-            title="Next result (Ctrl+G)"
-          >
-            ↓
-          </button>
-        </div>
-
-        <div
-          v-if="searchHistory.history.value.length > 0"
-          class="search-history"
-        >
-          <button
-            v-for="(item, index) in searchHistory.history.value"
-            :key="index"
-            @click="applyHistoryItem(item)"
-            class="history-item"
-          >
-            {{ item }}
-          </button>
-        </div>
-      </div>
+      <SearchBar
+        v-if="fileContent"
+        :file-lines="fileLines"
+        :display-lines="displayLines"
+        :search-state="searchState"
+      />
 
       <!-- Property Filter -->
-      <div v-if="fileContent && jsonPaths.length > 0" class="property-filter">
-        <label for="property-select">Filter by Property:</label>
-        <select
-          id="property-select"
-          v-model="filterProperty"
-          @change="onFilterChange"
-        >
-          <option value="">All Properties</option>
-          <option v-for="path in jsonPaths" :key="path" :value="path">
-            {{ path }}
-          </option>
-        </select>
-        <input
-          v-if="filterProperty"
-          type="text"
-          v-model="filterValue"
-          @input="onFilterChange"
-          placeholder="Enter value..."
-          class="filter-value-input"
-        />
-        <label v-if="filterProperty" class="filter-mode">
-          <input
-            type="radio"
-            value="OR"
-            v-model="filterMode"
-            @change="onFilterChange"
-          />
-          OR
-          <input
-            type="radio"
-            value="AND"
-            v-model="filterMode"
-            @change="onFilterChange"
-          />
-          AND
-        </label>
-      </div>
+      <FilterPanel v-if="fileContent" :data="filterData" :filter-state="filterState" />
 
       <!-- Progress Bar (for long operations) -->
       <div v-if="operationProgress.active" class="progress-bar-container">
@@ -220,100 +117,28 @@
       </div>
 
       <!-- JSON Content Viewer -->
-      <div
+      <JsonViewer
         v-if="fileContent"
-        class="content-viewer"
-        :class="{
-          'dark-mode': preferences.darkMode,
-          'line-wrap': preferences.lineWrap
-        }"
-      >
-        <!-- Virtual Scroller for large files -->
-        <RecycleScroller
-          v-if="displayLines.length > 1000"
-          ref="virtualScroller"
-          class="scroller"
-          :items="displayLines"
-          :item-size="lineHeight"
-          key-field="lineNumber"
-        >
-          <template #default="{ item }">
-            <div
-              :data-line="item.lineNumber"
-              :class="[
-                'line',
-                { selected: selectedLines.has(item.lineNumber) },
-                { 'highlight-match': item.hasMatch },
-                {
-                  'current-result':
-                    item.lineNumber === searchResults[currentResultIndex] + 1
-                }
-              ]"
-              @click="toggleLineSelection(item.lineNumber, $event)"
-            >
-              <span v-if="preferences.showLineNumbers" class="line-number">{{
-                item.lineNumber
-              }}</span>
-              <pre
-                v-highlight="highlightConfig"
-              ><code>{{ item.content }}</code></pre>
-            </div>
-          </template>
-        </RecycleScroller>
-
-        <!-- Regular render for smaller files -->
-        <div v-else class="lines-container">
-          <div
-            v-for="line in displayLines"
-            :key="line.lineNumber"
-            :data-line="line.lineNumber"
-            :class="[
-              'line',
-              { selected: selectedLines.has(line.lineNumber) },
-              { 'highlight-match': line.hasMatch },
-              {
-                'current-result':
-                  line.lineNumber === searchResults[currentResultIndex] + 1
-              }
-            ]"
-            @click="toggleLineSelection(line.lineNumber, $event)"
-          >
-            <span v-if="preferences.showLineNumbers" class="line-number">{{
-              line.lineNumber
-            }}</span>
-            <pre
-              v-highlight="highlightConfig"
-            ><code>{{ line.content }}</code></pre>
-          </div>
-        </div>
-
-        <!-- Too Large Warning -->
-        <div v-if="fileTooLarge" class="warning-banner">
-          ⚠️ File exceeds 10,000 lines. Showing first 10,000 lines only. Use
-          search or filters to find specific content.
-        </div>
-      </div>
+        :display-lines="displayLines"
+        :file-content="fileContent"
+        :selected-file="selectedFile"
+        :file-too-large="fileTooLarge"
+        :preferences="preferences"
+        :search-results="searchResults"
+        :current-result-index="currentResultIndex"
+        :highlight-config="highlightConfig"
+        :line-height="lineHeight"
+        :selection-state="selectionState"
+      />
 
       <!-- Action Bar -->
-      <div v-if="fileContent" class="action-bar">
-        <button
-          @click="copySelected"
-          :disabled="selectedLines.size === 0"
-          class="btn-action"
-        >
-          📋 Copy Selected ({{ selectedLines.size }} lines)
-        </button>
-        <button @click="copyAll" class="btn-action">📋 Copy All</button>
-        <button
-          @click="exportSelected"
-          :disabled="selectedLines.size === 0"
-          class="btn-action"
-        >
-          💾 Export Selected
-        </button>
-        <button @click="exportAll" class="btn-action">💾 Export All</button>
-        <button @click="shareUrl" class="btn-action">🔗 Share Link</button>
-      </div>
+      <ActionToolbar
+        v-if="fileContent"
+        :display-lines="displayLines"
+        :file-content="fileContent"
+        :selected-file="selectedFile"
+        :selection-state="selectionState"
+      />
 
       <!-- Toast Notifications -->
       <div v-if="clipboard.copied.value" class="toast success">