From cc86fe374f5930f253de712199c346dc45c57c34 Mon Sep 17 00:00:00 2001
From: Matthew Raymer <mraymer@osinetwork.net>
Date: Sat, 5 Jul 2025 13:07:13 +0000
Subject: [PATCH] Extract LocationSearchSection as vue-facing-decorator
 component and integrate into AccountViewView

- Created LocationSearchSection.vue using vue-facing-decorator (class-based, TypeScript, @Component, @Prop, @Emit).
- Moved 'Location for Searches' UI and logic into the new component.
- Replaced original location section markup in AccountViewView.vue with <LocationSearchSection />.
- Passed isRegistered and searchAreaLabel props, and wired up @set-search-area event to a new placeholder openSearchAreaDialog() method.
- Added placeholder openSearchAreaDialog() with a TODO for future implementation.
- Ensured all linter errors are resolved and code is consistent with project conventions.
---
 src/components/LocationSearchSection.vue | 28 +++++++++++++++++++++++
 src/views/AccountViewView.vue            | 29 +++++++++++++++++++-----
 2 files changed, 51 insertions(+), 6 deletions(-)
 create mode 100644 src/components/LocationSearchSection.vue

diff --git a/src/components/LocationSearchSection.vue b/src/components/LocationSearchSection.vue
new file mode 100644
index 00000000..8bf41ce4
--- /dev/null
+++ b/src/components/LocationSearchSection.vue
@@ -0,0 +1,28 @@
+<template>
+  <section v-if="isRegistered" class="mt-4">
+    <h2 class="text-lg font-semibold mb-2">Location for Searches</h2>
+    <div class="mb-2" v-if="searchAreaLabel">
+      <span class="text-slate-700">Current Area: </span>
+      <span class="font-mono">{{ searchAreaLabel }}</span>
+    </div>
+    <button
+      class="w-full text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
+      @click="setSearchArea"
+    >
+      Set Search Area...
+    </button>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Emit } from 'vue-facing-decorator';
+
+@Component({ name: 'LocationSearchSection' })
+export default class LocationSearchSection extends Vue {
+  @Prop({ required: true }) isRegistered!: boolean;
+  @Prop({ required: false }) searchAreaLabel?: string;
+
+  @Emit('set-search-area')
+  setSearchArea() {}
+}
+</script> 
\ No newline at end of file
diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index 23d7521b..b5b444ed 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -151,12 +151,11 @@
       <h2 id="searchLocationHeading" class="mb-2 font-bold">
         Location for Searches
       </h2>
-      <router-link
-        :to="{ name: 'search-area' }"
-        class="block w-full text-center bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
-      >
-        {{ isSearchAreasSet ? "Change" : "Set" }} Search Area…
-      </router-link>
+      <LocationSearchSection
+        :is-registered="isRegistered"
+        :search-area-label="searchAreaLabel"
+        @set-search-area="onSetSearchArea"
+      />
     </section>
 
     <!-- User Profile -->
@@ -844,6 +843,7 @@ import UserNameDialog from "../components/UserNameDialog.vue";
 import DataExportSection from "../components/DataExportSection.vue";
 import IdentitySection from '@/components/IdentitySection.vue';
 import RegistrationNotice from '@/components/RegistrationNotice.vue';
+import LocationSearchSection from '@/components/LocationSearchSection.vue';
 import {
   AppString,
   DEFAULT_IMAGE_API_SERVER,
@@ -899,6 +899,7 @@ const inputImportFileNameRef = ref<Blob>();
     DataExportSection,
     IdentitySection,
     RegistrationNotice,
+    LocationSearchSection,
   },
   mixins: [PlatformServiceMixin],
 })
@@ -1709,5 +1710,21 @@ export default class AccountViewView extends Vue {
     // TODO: Implement share dialog logic
     this.notify.info('Share dialog not yet implemented.');
   }
+
+  get searchAreaLabel(): string {
+    // Return a string representing the current search area, or blank if not set
+    // Example: return this.searchAreaName || '';
+    return this.isSearchAreasSet ? 'Custom Area Set' : '';
+  }
+
+  onSetSearchArea() {
+    // Call the existing logic for setting the search area, e.g., open the dialog
+    this.openSearchAreaDialog();
+  }
+
+  openSearchAreaDialog() {
+    // TODO: Implement search area dialog logic
+    this.notify.info('Search area dialog not yet implemented.');
+  }
 }
 </script>