From 042d708c4bbbdb911cd4d924a9310544353c88b7 Mon Sep 17 00:00:00 2001
From: PandaDEV <70103896+0PandaDEV@users.noreply.github.com>
Date: Fri, 22 Nov 2024 00:15:27 +1000
Subject: [PATCH] fix: not reloading when nothing is new

---
 pages/index.vue | 289 ++++++++++++++++++++++++++++++------------------
 1 file changed, 179 insertions(+), 110 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index fd456d2..559e557 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,24 +2,24 @@
   <div class="bg" @keydown.down.prevent="selectNext" @keydown.up.prevent="selectPrevious"
     @keydown.enter.prevent="pasteSelectedItem" @keydown.esc="hideApp" tabindex="0">
     <input ref="searchInput" v-model="searchQuery" @input="searchHistory" autocorrect="off" autocapitalize="off"
-      spellcheck="false" class="search" type="text" placeholder="Type to filter entries...">
+      spellcheck="false" class="search" type="text" placeholder="Type to filter entries..." />
     <div class="bottom-bar">
       <div class="left">
-        <img class="logo" width="18px" src="../public/logo.png" alt="">
+        <img class="logo" width="18px" src="../public/logo.png" alt="" />
         <p>Qopy</p>
       </div>
       <div class="right">
         <div class="paste" @click="pasteSelectedItem">
           <p>Paste</p>
-          <img src="../public/enter.svg" alt="">
+          <img src="../public/enter.svg" alt="" />
         </div>
         <div class="divider"></div>
         <div class="actions">
           <p>Actions</p>
           <div>
-            <img v-if="os === 'windows' || os === 'linux'" src="../public/ctrl.svg" alt="">
-            <img v-if="os === 'macos'" src="../public/cmd.svg" alt="">
-            <img src="../public/k.svg" alt="">
+            <img v-if="os === 'windows' || os === 'linux'" src="../public/ctrl.svg" alt="" />
+            <img v-if="os === 'macos'" src="../public/cmd.svg" alt="" />
+            <img src="../public/k.svg" alt="" />
           </div>
         </div>
       </div>
@@ -28,48 +28,52 @@
       :options="{ scrollbars: { autoHide: 'scroll' } }">
       <template v-for="(group, groupIndex) in groupedHistory" :key="groupIndex">
         <div class="time-separator">{{ group.label }}</div>
-        <div v-for="(item, index) in group.items" :key="item.id"
-          :class="['result clothoid-corner', { 'selected': isSelected(groupIndex, index) }]"
-          @click="selectItem(groupIndex, index)"
-          :ref="el => { if (isSelected(groupIndex, index)) selectedElement = el as HTMLElement }">
+        <div v-for="(item, index) in group.items" :key="item.id" :class="[
+          'result clothoid-corner',
+          { selected: isSelected(groupIndex, index) },
+        ]" @click="selectItem(groupIndex, index)" :ref="(el) => {
+          if (isSelected(groupIndex, index))
+            selectedElement = el as HTMLElement;
+        }
+          ">
           <template v-if="item.content_type === 'image'">
             <img v-if="!imageLoading && !imageLoadError" :src="getComputedImageUrl(item)" alt="Image" class="image"
-              @error="onImageError">
+              @error="onImageError" />
             <img v-if="imageLoading || imageLoadError" src="../public/icons/Image.svg" class="icon" />
           </template>
           <img v-else-if="hasFavicon(item.favicon ?? '')" :src="getFaviconFromDb(item.favicon ?? '')" alt="Favicon"
-            class="favicon">
+            class="favicon" />
           <img src="../public/icons/File.svg" class="icon" v-else-if="item.content_type === 'files'" />
           <img src="../public/icons/Text.svg" class="icon" v-else-if="item.content_type === 'text'" />
           <img src="../public/icons/Code.svg" class="icon" v-else-if="item.content_type === 'code'" />
-          <span v-if="item.content_type === 'image'">Image ({{ item.dimensions || 'Loading...' }})</span>
+          <span v-if="item.content_type === 'image'">Image ({{ item.dimensions || "Loading..." }})</span>
           <span v-else>{{ truncateContent(item.content) }}</span>
         </div>
       </template>
     </OverlayScrollbarsComponent>
     <div class="content" v-if="selectedItem?.content_type === 'image'">
-      <img :src="getComputedImageUrl(selectedItem)" alt="Image" class="image">
+      <img :src="getComputedImageUrl(selectedItem)" alt="Image" class="image" />
     </div>
     <OverlayScrollbarsComponent v-else class="content">
       <img v-if="selectedItem?.content && isYoutubeWatchUrl(selectedItem.content)"
-        :src="getYoutubeThumbnail(selectedItem.content)" alt="YouTube Thumbnail" class="full-image">
-      <span v-else>{{ selectedItem?.content || '' }}</span>
+        :src="getYoutubeThumbnail(selectedItem.content)" alt="YouTube Thumbnail" class="full-image" />
+      <span v-else>{{ selectedItem?.content || "" }}</span>
     </OverlayScrollbarsComponent>
     <Noise />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, watch, nextTick, shallowRef } from 'vue';
-import Database from '@tauri-apps/plugin-sql';
+import { ref, computed, onMounted, watch, nextTick, shallowRef } from "vue";
+import Database from "@tauri-apps/plugin-sql";
 import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
-import 'overlayscrollbars/overlayscrollbars.css';
-import { app, window } from '@tauri-apps/api';
-import { platform } from '@tauri-apps/plugin-os';
-import { invoke } from '@tauri-apps/api/core';
+import "overlayscrollbars/overlayscrollbars.css";
+import { app, window } from "@tauri-apps/api";
+import { platform } from "@tauri-apps/plugin-os";
+import { invoke } from "@tauri-apps/api/core";
 import { enable, isEnabled } from "@tauri-apps/plugin-autostart";
-import { listen } from '@tauri-apps/api/event';
-import { readFile } from '@tauri-apps/plugin-fs';
+import { listen } from "@tauri-apps/api/event";
+import { readFile } from "@tauri-apps/plugin-fs";
 
 interface HistoryItem {
   id: number;
@@ -90,13 +94,15 @@ const history: Ref<HistoryItem[]> = ref([]);
 const chunkSize: number = 50;
 let offset: number = 0;
 let isLoading: boolean = false;
-const resultsContainer: Ref<InstanceType<typeof OverlayScrollbarsComponent> | null> = ref(null);
-const searchQuery: Ref<string> = ref('');
+const resultsContainer: Ref<InstanceType<
+  typeof OverlayScrollbarsComponent
+> | null> = ref(null);
+const searchQuery: Ref<string> = ref("");
 const selectedGroupIndex: Ref<number> = ref(0);
 const selectedItemIndex: Ref<number> = ref(0);
 const selectedElement: Ref<HTMLElement | null> = ref(null);
 const searchInput: Ref<HTMLInputElement | null> = ref(null);
-const os: Ref<string> = ref('');
+const os: Ref<string> = ref("");
 const imageLoadError = ref(false);
 const imageLoading = ref(true);
 const imageUrls: Ref<Record<number, string>> = shallowRef({});
@@ -116,26 +122,31 @@ const groupedHistory: ComputedRef<GroupedHistory[]> = computed(() => {
   const thisYear = now.getFullYear();
 
   const groups: GroupedHistory[] = [
-    { label: 'Today', items: [] },
-    { label: 'Yesterday', items: [] },
-    { label: 'This Week', items: [] },
-    { label: 'Last Week', items: [] },
-    { label: 'This Year', items: [] },
-    { label: 'Last Year', items: [] },
+    { label: "Today", items: [] },
+    { label: "Yesterday", items: [] },
+    { label: "This Week", items: [] },
+    { label: "Last Week", items: [] },
+    { label: "This Year", items: [] },
+    { label: "Last Year", items: [] },
   ];
 
   const filteredItems = searchQuery.value
-    ? history.value.filter(item => item.content.toLowerCase().includes(searchQuery.value.toLowerCase()))
+    ? history.value.filter((item) =>
+      item.content.toLowerCase().includes(searchQuery.value.toLowerCase())
+    )
     : history.value;
 
-  filteredItems.forEach(item => {
+  filteredItems.forEach((item) => {
     const itemDate = new Date(item.timestamp);
     const itemWeek = getWeekNumber(itemDate);
     const itemYear = itemDate.getFullYear();
 
     if (itemDate.toDateString() === today.toDateString()) {
       groups[0].items.push(item);
-    } else if (itemDate.toDateString() === new Date(today.getTime() - 86400000).toDateString()) {
+    } else if (
+      itemDate.toDateString() ===
+      new Date(today.getTime() - 86400000).toDateString()
+    ) {
       groups[1].items.push(item);
     } else if (itemYear === thisYear && itemWeek === thisWeek) {
       groups[2].items.push(item);
@@ -148,7 +159,7 @@ const groupedHistory: ComputedRef<GroupedHistory[]> = computed(() => {
     }
   });
 
-  return groups.filter(group => group.items.length > 0);
+  return groups.filter((group) => group.items.length > 0);
 });
 
 const selectedItem: ComputedRef<HistoryItem | null> = computed(() => {
@@ -157,7 +168,10 @@ const selectedItem: ComputedRef<HistoryItem | null> = computed(() => {
 });
 
 const isSelected = (groupIndex: number, itemIndex: number): boolean => {
-  return selectedGroupIndex.value === groupIndex && selectedItemIndex.value === itemIndex;
+  return (
+    selectedGroupIndex.value === groupIndex &&
+    selectedItemIndex.value === itemIndex
+  );
 };
 
 const searchHistory = async (): Promise<void> => {
@@ -168,17 +182,19 @@ const searchHistory = async (): Promise<void> => {
 
   const query = `%${searchQuery.value}%`;
   const results = await db.value.select<HistoryItem[]>(
-    'SELECT * FROM history WHERE content LIKE ? ORDER BY timestamp DESC LIMIT ?',
+    "SELECT * FROM history WHERE content LIKE ? ORDER BY timestamp DESC LIMIT ?",
     [query, chunkSize]
   );
 
-  history.value = await Promise.all(results.map(async item => {
-    if (item.content_type === 'image') {
-      const dimensions = await getImageDimensions(item.content);
-      return { ...item, dimensions };
-    }
-    return item;
-  }));
+  history.value = await Promise.all(
+    results.map(async (item) => {
+      if (item.content_type === "image") {
+        const dimensions = await getImageDimensions(item.content);
+        return { ...item, dimensions };
+      }
+      return item;
+    })
+  );
 };
 
 const selectNext = (): void => {
@@ -197,7 +213,8 @@ const selectPrevious = (): void => {
     selectedItemIndex.value--;
   } else if (selectedGroupIndex.value > 0) {
     selectedGroupIndex.value--;
-    selectedItemIndex.value = groupedHistory.value[selectedGroupIndex.value].items.length - 1;
+    selectedItemIndex.value =
+      groupedHistory.value[selectedGroupIndex.value].items.length - 1;
   }
   scrollToSelectedItem();
 };
@@ -213,18 +230,18 @@ const pasteSelectedItem = async (): Promise<void> => {
 
   let content = selectedItem.value.content;
   let contentType: String = selectedItem.value.content_type;
-  if (contentType === 'image') {
+  if (contentType === "image") {
     try {
       content = readFile(content).toString();
     } catch (error) {
-      console.error('Error reading image file:', error);
+      console.error("Error reading image file:", error);
       return;
     }
   }
   await hideApp();
   await invoke("write_and_paste", {
     content,
-    contentType
+    contentType,
   });
 };
 
@@ -232,21 +249,27 @@ const truncateContent = (content: string): string => {
   const maxWidth = 284;
   const charWidth = 9;
   const maxChars = Math.floor(maxWidth / charWidth);
-  return content.length > maxChars ? content.slice(0, maxChars - 3) + '...' : content;
+  return content.length > maxChars
+    ? content.slice(0, maxChars - 3) + "..."
+    : content;
 };
 
 const hasFavicon = (str: string): boolean => {
-  return str.trim() !== '';
+  return str.trim() !== "";
 };
 
 const isYoutubeWatchUrl = (url: string): boolean => {
-  return /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/watch\?v=[\w-]+/.test(url) || /^(https?:\/\/)?(www\.)?youtu\.be\/[\w-]+/.test(url);
+  return (
+    /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/watch\?v=[\w-]+/.test(
+      url
+    ) || /^(https?:\/\/)?(www\.)?youtu\.be\/[\w-]+/.test(url)
+  );
 };
 
 const getYoutubeThumbnail = (url: string): string => {
   let videoId;
-  if (url.includes('youtu.be')) {
-    videoId = url.split('youtu.be/')[1];
+  if (url.includes("youtu.be")) {
+    videoId = url.split("youtu.be/")[1];
   } else {
     videoId = url.match(/[?&]v=([^&]+)/)?.[1];
   }
@@ -266,10 +289,10 @@ const getImageDimensions = (path: string): Promise<string> => {
       resolve(`${img.width}x${img.height}`);
     };
     img.onerror = (e) => {
-      console.error('Error loading image:', e);
+      console.error("Error loading image:", e);
       imageLoadError.value = true;
       imageLoading.value = false;
-      resolve('0x0');
+      resolve("0x0");
     };
 
     try {
@@ -277,24 +300,24 @@ const getImageDimensions = (path: string): Promise<string> => {
       const dataUrl = await getImageUrl(path);
       img.src = dataUrl;
     } catch (error) {
-      console.error('Error getting image URL:', error);
+      console.error("Error getting image URL:", error);
       imageLoadError.value = true;
       imageLoading.value = false;
-      resolve('0x0');
+      resolve("0x0");
     }
   });
 };
 
 const getImageUrl = async (path: string): Promise<string> => {
-  const isWindows = path.includes('\\');
-  const separator = isWindows ? '\\' : '/';
+  const isWindows = path.includes("\\");
+  const separator = isWindows ? "\\" : "/";
   const filename = path.split(separator).pop();
 
   try {
     imageLoading.value = true;
     const base64 = await invoke<string>("read_image", { filename });
     if (!base64 || base64.length === 0) {
-      throw new Error('Received empty image data');
+      throw new Error("Received empty image data");
     }
 
     const dataUrl = `data:image/png;base64,${base64}`;
@@ -303,26 +326,26 @@ const getImageUrl = async (path: string): Promise<string> => {
     imageLoading.value = false;
     return dataUrl;
   } catch (error) {
-    console.error('Error reading image file:', error);
+    console.error("Error reading image file:", error);
     imageLoadError.value = true;
     imageLoading.value = false;
-    return '';
+    return "";
   }
 };
 
 const getComputedImageUrl = (item: HistoryItem): string => {
   if (!imageUrls.value[item.id]) {
-    imageUrls.value[item.id] = '';
+    imageUrls.value[item.id] = "";
     getImageUrl(item.content)
-      .then(url => {
+      .then((url) => {
         imageUrls.value = { ...imageUrls.value, [item.id]: url };
       })
-      .catch(error => {
-        console.error('Failed to get image URL:', error);
-        imageUrls.value = { ...imageUrls.value, [item.id]: '' };
+      .catch((error) => {
+        console.error("Failed to get image URL:", error);
+        imageUrls.value = { ...imageUrls.value, [item.id]: "" };
       });
   }
-  return imageUrls.value[item.id] || '';
+  return imageUrls.value[item.id] || "";
 };
 
 const loadHistoryChunk = async (): Promise<void> => {
@@ -334,12 +357,12 @@ const loadHistoryChunk = async (): Promise<void> => {
   if (searchQuery.value) {
     const query = `%${searchQuery.value}%`;
     results = await db.value.select(
-      'SELECT * FROM history WHERE content LIKE ? ORDER BY timestamp DESC LIMIT ? OFFSET ?',
+      "SELECT * FROM history WHERE content LIKE ? ORDER BY timestamp DESC LIMIT ? OFFSET ?",
       [query, chunkSize, offset]
     );
   } else {
     results = await db.value.select(
-      'SELECT * FROM history ORDER BY timestamp DESC LIMIT ? OFFSET ?',
+      "SELECT * FROM history ORDER BY timestamp DESC LIMIT ? OFFSET ?",
       [chunkSize, offset]
     );
   }
@@ -349,14 +372,16 @@ const loadHistoryChunk = async (): Promise<void> => {
     return;
   }
 
-  const processedChunk = await Promise.all(results.map(async item => {
-    if (item.content_type === 'image') {
-      const dimensions = await getImageDimensions(item.content);
-      getComputedImageUrl(item);
-      return { ...item, dimensions };
-    }
-    return item;
-  }));
+  const processedChunk = await Promise.all(
+    results.map(async (item) => {
+      if (item.content_type === "image") {
+        const dimensions = await getImageDimensions(item.content);
+        getComputedImageUrl(item);
+        return { ...item, dimensions };
+      }
+      return item;
+    })
+  );
 
   history.value = [...history.value, ...processedChunk];
   offset += chunkSize;
@@ -387,34 +412,31 @@ const focusSearchInput = (): void => {
   });
 };
 
-const scrollToSelectedItem = (): void => {
+const scrollToSelectedItem = (forceScrollTop: boolean = false): void => {
   nextTick(() => {
     if (selectedElement.value && resultsContainer.value) {
       const osInstance = resultsContainer.value.osInstance();
       const viewport = osInstance?.elements().viewport;
       if (!viewport) return;
 
-      const viewportRect = viewport.getBoundingClientRect();
-      const elementRect = selectedElement.value.getBoundingClientRect();
+      if (!forceScrollTop) {
+        const viewportRect = viewport.getBoundingClientRect();
+        const elementRect = selectedElement.value.getBoundingClientRect();
+        const isAbove = elementRect.top < viewportRect.top;
+        const isBelow = elementRect.bottom > viewportRect.bottom - 8;
 
-      const isAbove = elementRect.top < viewportRect.top;
-      const isBelow = elementRect.bottom > viewportRect.bottom - 8;
-
-      if (isAbove || isBelow) {
-        let scrollOffset;
-
-        if (isAbove && selectedItemIndex.value === 0 && selectedGroupIndex.value === 0) {
-          scrollOffset = elementRect.top - viewportRect.top - 36;
-        } else if (isAbove) {
-          scrollOffset = elementRect.top - viewportRect.top - 8;
-        } else {
-          scrollOffset = elementRect.bottom - viewportRect.bottom + 9;
+        if (isAbove || isBelow) {
+          let scrollOffset;
+          if (isAbove) {
+            scrollOffset = elementRect.top - viewportRect.top - 8;
+          } else {
+            scrollOffset = elementRect.bottom - viewportRect.bottom + 9;
+          }
+          viewport.scrollBy({
+            top: scrollOffset,
+            behavior: "smooth",
+          });
         }
-
-        viewport.scrollBy({
-          top: scrollOffset,
-          behavior: 'smooth'
-        });
       }
     }
   });
@@ -425,40 +447,87 @@ const onImageError = (): void => {
   imageLoading.value = false;
 };
 
-watch([selectedGroupIndex, selectedItemIndex], scrollToSelectedItem);
+watch([selectedGroupIndex, selectedItemIndex], () => {
+  scrollToSelectedItem();
+});
 
 watch(searchQuery, () => {
   searchHistory();
 });
 
+const lastUpdateTime = ref<number>(Date.now());
+
 onMounted(async () => {
-  db.value = await Database.load('sqlite:data.db');
+  db.value = await Database.load("sqlite:data.db");
   await loadHistoryChunk();
 
-  resultsContainer.value?.osInstance()?.elements()?.viewport?.addEventListener('scroll', handleScroll);
+  resultsContainer.value
+    ?.osInstance()
+    ?.elements()
+    ?.viewport?.addEventListener("scroll", handleScroll);
 
-  await listen('tauri://focus', async () => {
+  await listen("clipboard-content-updated", async () => {
+    lastUpdateTime.value = Date.now();
+    selectedGroupIndex.value = 0;
+    selectedItemIndex.value = 0;
     history.value = [];
     offset = 0;
     await loadHistoryChunk();
+    if (resultsContainer.value?.osInstance()?.elements().viewport) {
+      resultsContainer.value.osInstance()?.elements().viewport?.scrollTo({
+        top: 0,
+        behavior: "smooth",
+      });
+    }
+  });
+
+  await listen("tauri://focus", async () => {
+    const currentTime = Date.now();
+    if (currentTime - lastUpdateTime.value > 0) {
+      const previousGroupIndex = selectedGroupIndex.value;
+      const previousItemIndex = selectedItemIndex.value;
+      const previousScroll =
+        resultsContainer.value?.osInstance()?.elements().viewport?.scrollTop ||
+        0;
+
+      history.value = [];
+      offset = 0;
+      await loadHistoryChunk();
+      lastUpdateTime.value = currentTime;
+
+      selectedGroupIndex.value = previousGroupIndex;
+      selectedItemIndex.value = previousItemIndex;
+
+      nextTick(() => {
+        if (resultsContainer.value?.osInstance()?.elements().viewport) {
+          resultsContainer.value.osInstance()?.elements().viewport?.scrollTo({
+            top: previousScroll,
+            behavior: "instant",
+          });
+        }
+      });
+    }
     focusSearchInput();
   });
 
-  await listen('tauri://blur', () => {
+  await listen("tauri://blur", () => {
     if (searchInput.value) {
       searchInput.value.blur();
     }
   });
 
-  if (!await isEnabled()) {
-    await enable()
+  if (!(await isEnabled())) {
+    await enable();
   }
 
-  os.value = await platform();
+  os.value = platform();
 });
 
+watch([selectedGroupIndex, selectedItemIndex], () =>
+  scrollToSelectedItem(false)
+);
 </script>
 
 <style scoped lang="scss">
-@use '~/assets/css/index.scss';
-</style>
\ No newline at end of file
+@use "~/assets/css/index.scss";
+</style>