mirror of
https://github.com/0PandaDEV/Qopy.git
synced 2025-04-21 13:14:04 +02:00
fix: not reloading when nothing is new
This commit is contained in:
parent
fa02076b75
commit
042d708c4b
1 changed files with 179 additions and 110 deletions
287
pages/index.vue
287
pages/index.vue
|
@ -2,24 +2,24 @@
|
||||||
<div class="bg" @keydown.down.prevent="selectNext" @keydown.up.prevent="selectPrevious"
|
<div class="bg" @keydown.down.prevent="selectNext" @keydown.up.prevent="selectPrevious"
|
||||||
@keydown.enter.prevent="pasteSelectedItem" @keydown.esc="hideApp" tabindex="0">
|
@keydown.enter.prevent="pasteSelectedItem" @keydown.esc="hideApp" tabindex="0">
|
||||||
<input ref="searchInput" v-model="searchQuery" @input="searchHistory" autocorrect="off" autocapitalize="off"
|
<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="bottom-bar">
|
||||||
<div class="left">
|
<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>
|
<p>Qopy</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="paste" @click="pasteSelectedItem">
|
<div class="paste" @click="pasteSelectedItem">
|
||||||
<p>Paste</p>
|
<p>Paste</p>
|
||||||
<img src="../public/enter.svg" alt="">
|
<img src="../public/enter.svg" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="divider"></div>
|
<div class="divider"></div>
|
||||||
<div class="actions">
|
<div class="actions">
|
||||||
<p>Actions</p>
|
<p>Actions</p>
|
||||||
<div>
|
<div>
|
||||||
<img v-if="os === 'windows' || os === 'linux'" src="../public/ctrl.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 v-if="os === 'macos'" src="../public/cmd.svg" alt="" />
|
||||||
<img src="../public/k.svg" alt="">
|
<img src="../public/k.svg" alt="" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -28,48 +28,52 @@
|
||||||
:options="{ scrollbars: { autoHide: 'scroll' } }">
|
:options="{ scrollbars: { autoHide: 'scroll' } }">
|
||||||
<template v-for="(group, groupIndex) in groupedHistory" :key="groupIndex">
|
<template v-for="(group, groupIndex) in groupedHistory" :key="groupIndex">
|
||||||
<div class="time-separator">{{ group.label }}</div>
|
<div class="time-separator">{{ group.label }}</div>
|
||||||
<div v-for="(item, index) in group.items" :key="item.id"
|
<div v-for="(item, index) in group.items" :key="item.id" :class="[
|
||||||
:class="['result clothoid-corner', { 'selected': isSelected(groupIndex, index) }]"
|
'result clothoid-corner',
|
||||||
@click="selectItem(groupIndex, index)"
|
{ selected: isSelected(groupIndex, index) },
|
||||||
:ref="el => { if (isSelected(groupIndex, index)) selectedElement = el as HTMLElement }">
|
]" @click="selectItem(groupIndex, index)" :ref="(el) => {
|
||||||
|
if (isSelected(groupIndex, index))
|
||||||
|
selectedElement = el as HTMLElement;
|
||||||
|
}
|
||||||
|
">
|
||||||
<template v-if="item.content_type === 'image'">
|
<template v-if="item.content_type === 'image'">
|
||||||
<img v-if="!imageLoading && !imageLoadError" :src="getComputedImageUrl(item)" alt="Image" class="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" />
|
<img v-if="imageLoading || imageLoadError" src="../public/icons/Image.svg" class="icon" />
|
||||||
</template>
|
</template>
|
||||||
<img v-else-if="hasFavicon(item.favicon ?? '')" :src="getFaviconFromDb(item.favicon ?? '')" alt="Favicon"
|
<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/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/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'" />
|
<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>
|
<span v-else>{{ truncateContent(item.content) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</OverlayScrollbarsComponent>
|
</OverlayScrollbarsComponent>
|
||||||
<div class="content" v-if="selectedItem?.content_type === 'image'">
|
<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>
|
</div>
|
||||||
<OverlayScrollbarsComponent v-else class="content">
|
<OverlayScrollbarsComponent v-else class="content">
|
||||||
<img v-if="selectedItem?.content && isYoutubeWatchUrl(selectedItem.content)"
|
<img v-if="selectedItem?.content && isYoutubeWatchUrl(selectedItem.content)"
|
||||||
:src="getYoutubeThumbnail(selectedItem.content)" alt="YouTube Thumbnail" class="full-image">
|
:src="getYoutubeThumbnail(selectedItem.content)" alt="YouTube Thumbnail" class="full-image" />
|
||||||
<span v-else>{{ selectedItem?.content || '' }}</span>
|
<span v-else>{{ selectedItem?.content || "" }}</span>
|
||||||
</OverlayScrollbarsComponent>
|
</OverlayScrollbarsComponent>
|
||||||
<Noise />
|
<Noise />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed, onMounted, watch, nextTick, shallowRef } from 'vue';
|
import { ref, computed, onMounted, watch, nextTick, shallowRef } from "vue";
|
||||||
import Database from '@tauri-apps/plugin-sql';
|
import Database from "@tauri-apps/plugin-sql";
|
||||||
import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
|
import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
|
||||||
import 'overlayscrollbars/overlayscrollbars.css';
|
import "overlayscrollbars/overlayscrollbars.css";
|
||||||
import { app, window } from '@tauri-apps/api';
|
import { app, window } from "@tauri-apps/api";
|
||||||
import { platform } from '@tauri-apps/plugin-os';
|
import { platform } from "@tauri-apps/plugin-os";
|
||||||
import { invoke } from '@tauri-apps/api/core';
|
import { invoke } from "@tauri-apps/api/core";
|
||||||
import { enable, isEnabled } from "@tauri-apps/plugin-autostart";
|
import { enable, isEnabled } from "@tauri-apps/plugin-autostart";
|
||||||
import { listen } from '@tauri-apps/api/event';
|
import { listen } from "@tauri-apps/api/event";
|
||||||
import { readFile } from '@tauri-apps/plugin-fs';
|
import { readFile } from "@tauri-apps/plugin-fs";
|
||||||
|
|
||||||
interface HistoryItem {
|
interface HistoryItem {
|
||||||
id: number;
|
id: number;
|
||||||
|
@ -90,13 +94,15 @@ const history: Ref<HistoryItem[]> = ref([]);
|
||||||
const chunkSize: number = 50;
|
const chunkSize: number = 50;
|
||||||
let offset: number = 0;
|
let offset: number = 0;
|
||||||
let isLoading: boolean = false;
|
let isLoading: boolean = false;
|
||||||
const resultsContainer: Ref<InstanceType<typeof OverlayScrollbarsComponent> | null> = ref(null);
|
const resultsContainer: Ref<InstanceType<
|
||||||
const searchQuery: Ref<string> = ref('');
|
typeof OverlayScrollbarsComponent
|
||||||
|
> | null> = ref(null);
|
||||||
|
const searchQuery: Ref<string> = ref("");
|
||||||
const selectedGroupIndex: Ref<number> = ref(0);
|
const selectedGroupIndex: Ref<number> = ref(0);
|
||||||
const selectedItemIndex: Ref<number> = ref(0);
|
const selectedItemIndex: Ref<number> = ref(0);
|
||||||
const selectedElement: Ref<HTMLElement | null> = ref(null);
|
const selectedElement: Ref<HTMLElement | null> = ref(null);
|
||||||
const searchInput: Ref<HTMLInputElement | 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 imageLoadError = ref(false);
|
||||||
const imageLoading = ref(true);
|
const imageLoading = ref(true);
|
||||||
const imageUrls: Ref<Record<number, string>> = shallowRef({});
|
const imageUrls: Ref<Record<number, string>> = shallowRef({});
|
||||||
|
@ -116,26 +122,31 @@ const groupedHistory: ComputedRef<GroupedHistory[]> = computed(() => {
|
||||||
const thisYear = now.getFullYear();
|
const thisYear = now.getFullYear();
|
||||||
|
|
||||||
const groups: GroupedHistory[] = [
|
const groups: GroupedHistory[] = [
|
||||||
{ label: 'Today', items: [] },
|
{ label: "Today", items: [] },
|
||||||
{ label: 'Yesterday', items: [] },
|
{ label: "Yesterday", items: [] },
|
||||||
{ label: 'This Week', items: [] },
|
{ label: "This Week", items: [] },
|
||||||
{ label: 'Last Week', items: [] },
|
{ label: "Last Week", items: [] },
|
||||||
{ label: 'This Year', items: [] },
|
{ label: "This Year", items: [] },
|
||||||
{ label: 'Last Year', items: [] },
|
{ label: "Last Year", items: [] },
|
||||||
];
|
];
|
||||||
|
|
||||||
const filteredItems = searchQuery.value
|
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;
|
: history.value;
|
||||||
|
|
||||||
filteredItems.forEach(item => {
|
filteredItems.forEach((item) => {
|
||||||
const itemDate = new Date(item.timestamp);
|
const itemDate = new Date(item.timestamp);
|
||||||
const itemWeek = getWeekNumber(itemDate);
|
const itemWeek = getWeekNumber(itemDate);
|
||||||
const itemYear = itemDate.getFullYear();
|
const itemYear = itemDate.getFullYear();
|
||||||
|
|
||||||
if (itemDate.toDateString() === today.toDateString()) {
|
if (itemDate.toDateString() === today.toDateString()) {
|
||||||
groups[0].items.push(item);
|
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);
|
groups[1].items.push(item);
|
||||||
} else if (itemYear === thisYear && itemWeek === thisWeek) {
|
} else if (itemYear === thisYear && itemWeek === thisWeek) {
|
||||||
groups[2].items.push(item);
|
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(() => {
|
const selectedItem: ComputedRef<HistoryItem | null> = computed(() => {
|
||||||
|
@ -157,7 +168,10 @@ const selectedItem: ComputedRef<HistoryItem | null> = computed(() => {
|
||||||
});
|
});
|
||||||
|
|
||||||
const isSelected = (groupIndex: number, itemIndex: number): boolean => {
|
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> => {
|
const searchHistory = async (): Promise<void> => {
|
||||||
|
@ -168,17 +182,19 @@ const searchHistory = async (): Promise<void> => {
|
||||||
|
|
||||||
const query = `%${searchQuery.value}%`;
|
const query = `%${searchQuery.value}%`;
|
||||||
const results = await db.value.select<HistoryItem[]>(
|
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]
|
[query, chunkSize]
|
||||||
);
|
);
|
||||||
|
|
||||||
history.value = await Promise.all(results.map(async item => {
|
history.value = await Promise.all(
|
||||||
if (item.content_type === 'image') {
|
results.map(async (item) => {
|
||||||
const dimensions = await getImageDimensions(item.content);
|
if (item.content_type === "image") {
|
||||||
return { ...item, dimensions };
|
const dimensions = await getImageDimensions(item.content);
|
||||||
}
|
return { ...item, dimensions };
|
||||||
return item;
|
}
|
||||||
}));
|
return item;
|
||||||
|
})
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const selectNext = (): void => {
|
const selectNext = (): void => {
|
||||||
|
@ -197,7 +213,8 @@ const selectPrevious = (): void => {
|
||||||
selectedItemIndex.value--;
|
selectedItemIndex.value--;
|
||||||
} else if (selectedGroupIndex.value > 0) {
|
} else if (selectedGroupIndex.value > 0) {
|
||||||
selectedGroupIndex.value--;
|
selectedGroupIndex.value--;
|
||||||
selectedItemIndex.value = groupedHistory.value[selectedGroupIndex.value].items.length - 1;
|
selectedItemIndex.value =
|
||||||
|
groupedHistory.value[selectedGroupIndex.value].items.length - 1;
|
||||||
}
|
}
|
||||||
scrollToSelectedItem();
|
scrollToSelectedItem();
|
||||||
};
|
};
|
||||||
|
@ -213,18 +230,18 @@ const pasteSelectedItem = async (): Promise<void> => {
|
||||||
|
|
||||||
let content = selectedItem.value.content;
|
let content = selectedItem.value.content;
|
||||||
let contentType: String = selectedItem.value.content_type;
|
let contentType: String = selectedItem.value.content_type;
|
||||||
if (contentType === 'image') {
|
if (contentType === "image") {
|
||||||
try {
|
try {
|
||||||
content = readFile(content).toString();
|
content = readFile(content).toString();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error reading image file:', error);
|
console.error("Error reading image file:", error);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
await hideApp();
|
await hideApp();
|
||||||
await invoke("write_and_paste", {
|
await invoke("write_and_paste", {
|
||||||
content,
|
content,
|
||||||
contentType
|
contentType,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -232,21 +249,27 @@ const truncateContent = (content: string): string => {
|
||||||
const maxWidth = 284;
|
const maxWidth = 284;
|
||||||
const charWidth = 9;
|
const charWidth = 9;
|
||||||
const maxChars = Math.floor(maxWidth / charWidth);
|
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 => {
|
const hasFavicon = (str: string): boolean => {
|
||||||
return str.trim() !== '';
|
return str.trim() !== "";
|
||||||
};
|
};
|
||||||
|
|
||||||
const isYoutubeWatchUrl = (url: string): boolean => {
|
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 => {
|
const getYoutubeThumbnail = (url: string): string => {
|
||||||
let videoId;
|
let videoId;
|
||||||
if (url.includes('youtu.be')) {
|
if (url.includes("youtu.be")) {
|
||||||
videoId = url.split('youtu.be/')[1];
|
videoId = url.split("youtu.be/")[1];
|
||||||
} else {
|
} else {
|
||||||
videoId = url.match(/[?&]v=([^&]+)/)?.[1];
|
videoId = url.match(/[?&]v=([^&]+)/)?.[1];
|
||||||
}
|
}
|
||||||
|
@ -266,10 +289,10 @@ const getImageDimensions = (path: string): Promise<string> => {
|
||||||
resolve(`${img.width}x${img.height}`);
|
resolve(`${img.width}x${img.height}`);
|
||||||
};
|
};
|
||||||
img.onerror = (e) => {
|
img.onerror = (e) => {
|
||||||
console.error('Error loading image:', e);
|
console.error("Error loading image:", e);
|
||||||
imageLoadError.value = true;
|
imageLoadError.value = true;
|
||||||
imageLoading.value = false;
|
imageLoading.value = false;
|
||||||
resolve('0x0');
|
resolve("0x0");
|
||||||
};
|
};
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
@ -277,24 +300,24 @@ const getImageDimensions = (path: string): Promise<string> => {
|
||||||
const dataUrl = await getImageUrl(path);
|
const dataUrl = await getImageUrl(path);
|
||||||
img.src = dataUrl;
|
img.src = dataUrl;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error getting image URL:', error);
|
console.error("Error getting image URL:", error);
|
||||||
imageLoadError.value = true;
|
imageLoadError.value = true;
|
||||||
imageLoading.value = false;
|
imageLoading.value = false;
|
||||||
resolve('0x0');
|
resolve("0x0");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const getImageUrl = async (path: string): Promise<string> => {
|
const getImageUrl = async (path: string): Promise<string> => {
|
||||||
const isWindows = path.includes('\\');
|
const isWindows = path.includes("\\");
|
||||||
const separator = isWindows ? '\\' : '/';
|
const separator = isWindows ? "\\" : "/";
|
||||||
const filename = path.split(separator).pop();
|
const filename = path.split(separator).pop();
|
||||||
|
|
||||||
try {
|
try {
|
||||||
imageLoading.value = true;
|
imageLoading.value = true;
|
||||||
const base64 = await invoke<string>("read_image", { filename });
|
const base64 = await invoke<string>("read_image", { filename });
|
||||||
if (!base64 || base64.length === 0) {
|
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}`;
|
const dataUrl = `data:image/png;base64,${base64}`;
|
||||||
|
@ -303,26 +326,26 @@ const getImageUrl = async (path: string): Promise<string> => {
|
||||||
imageLoading.value = false;
|
imageLoading.value = false;
|
||||||
return dataUrl;
|
return dataUrl;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error reading image file:', error);
|
console.error("Error reading image file:", error);
|
||||||
imageLoadError.value = true;
|
imageLoadError.value = true;
|
||||||
imageLoading.value = false;
|
imageLoading.value = false;
|
||||||
return '';
|
return "";
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const getComputedImageUrl = (item: HistoryItem): string => {
|
const getComputedImageUrl = (item: HistoryItem): string => {
|
||||||
if (!imageUrls.value[item.id]) {
|
if (!imageUrls.value[item.id]) {
|
||||||
imageUrls.value[item.id] = '';
|
imageUrls.value[item.id] = "";
|
||||||
getImageUrl(item.content)
|
getImageUrl(item.content)
|
||||||
.then(url => {
|
.then((url) => {
|
||||||
imageUrls.value = { ...imageUrls.value, [item.id]: url };
|
imageUrls.value = { ...imageUrls.value, [item.id]: url };
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch((error) => {
|
||||||
console.error('Failed to get image URL:', error);
|
console.error("Failed to get image URL:", error);
|
||||||
imageUrls.value = { ...imageUrls.value, [item.id]: '' };
|
imageUrls.value = { ...imageUrls.value, [item.id]: "" };
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
return imageUrls.value[item.id] || '';
|
return imageUrls.value[item.id] || "";
|
||||||
};
|
};
|
||||||
|
|
||||||
const loadHistoryChunk = async (): Promise<void> => {
|
const loadHistoryChunk = async (): Promise<void> => {
|
||||||
|
@ -334,12 +357,12 @@ const loadHistoryChunk = async (): Promise<void> => {
|
||||||
if (searchQuery.value) {
|
if (searchQuery.value) {
|
||||||
const query = `%${searchQuery.value}%`;
|
const query = `%${searchQuery.value}%`;
|
||||||
results = await db.value.select(
|
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]
|
[query, chunkSize, offset]
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
results = await db.value.select(
|
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]
|
[chunkSize, offset]
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -349,14 +372,16 @@ const loadHistoryChunk = async (): Promise<void> => {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const processedChunk = await Promise.all(results.map(async item => {
|
const processedChunk = await Promise.all(
|
||||||
if (item.content_type === 'image') {
|
results.map(async (item) => {
|
||||||
const dimensions = await getImageDimensions(item.content);
|
if (item.content_type === "image") {
|
||||||
getComputedImageUrl(item);
|
const dimensions = await getImageDimensions(item.content);
|
||||||
return { ...item, dimensions };
|
getComputedImageUrl(item);
|
||||||
}
|
return { ...item, dimensions };
|
||||||
return item;
|
}
|
||||||
}));
|
return item;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
history.value = [...history.value, ...processedChunk];
|
history.value = [...history.value, ...processedChunk];
|
||||||
offset += chunkSize;
|
offset += chunkSize;
|
||||||
|
@ -387,34 +412,31 @@ const focusSearchInput = (): void => {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const scrollToSelectedItem = (): void => {
|
const scrollToSelectedItem = (forceScrollTop: boolean = false): void => {
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
if (selectedElement.value && resultsContainer.value) {
|
if (selectedElement.value && resultsContainer.value) {
|
||||||
const osInstance = resultsContainer.value.osInstance();
|
const osInstance = resultsContainer.value.osInstance();
|
||||||
const viewport = osInstance?.elements().viewport;
|
const viewport = osInstance?.elements().viewport;
|
||||||
if (!viewport) return;
|
if (!viewport) return;
|
||||||
|
|
||||||
const viewportRect = viewport.getBoundingClientRect();
|
if (!forceScrollTop) {
|
||||||
const elementRect = selectedElement.value.getBoundingClientRect();
|
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;
|
if (isAbove || isBelow) {
|
||||||
const isBelow = elementRect.bottom > viewportRect.bottom - 8;
|
let scrollOffset;
|
||||||
|
if (isAbove) {
|
||||||
if (isAbove || isBelow) {
|
scrollOffset = elementRect.top - viewportRect.top - 8;
|
||||||
let scrollOffset;
|
} else {
|
||||||
|
scrollOffset = elementRect.bottom - viewportRect.bottom + 9;
|
||||||
if (isAbove && selectedItemIndex.value === 0 && selectedGroupIndex.value === 0) {
|
}
|
||||||
scrollOffset = elementRect.top - viewportRect.top - 36;
|
viewport.scrollBy({
|
||||||
} else if (isAbove) {
|
top: scrollOffset,
|
||||||
scrollOffset = elementRect.top - viewportRect.top - 8;
|
behavior: "smooth",
|
||||||
} else {
|
});
|
||||||
scrollOffset = elementRect.bottom - viewportRect.bottom + 9;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
viewport.scrollBy({
|
|
||||||
top: scrollOffset,
|
|
||||||
behavior: 'smooth'
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -425,40 +447,87 @@ const onImageError = (): void => {
|
||||||
imageLoading.value = false;
|
imageLoading.value = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
watch([selectedGroupIndex, selectedItemIndex], scrollToSelectedItem);
|
watch([selectedGroupIndex, selectedItemIndex], () => {
|
||||||
|
scrollToSelectedItem();
|
||||||
|
});
|
||||||
|
|
||||||
watch(searchQuery, () => {
|
watch(searchQuery, () => {
|
||||||
searchHistory();
|
searchHistory();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const lastUpdateTime = ref<number>(Date.now());
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
db.value = await Database.load('sqlite:data.db');
|
db.value = await Database.load("sqlite:data.db");
|
||||||
await loadHistoryChunk();
|
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 = [];
|
history.value = [];
|
||||||
offset = 0;
|
offset = 0;
|
||||||
await loadHistoryChunk();
|
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();
|
focusSearchInput();
|
||||||
});
|
});
|
||||||
|
|
||||||
await listen('tauri://blur', () => {
|
await listen("tauri://blur", () => {
|
||||||
if (searchInput.value) {
|
if (searchInput.value) {
|
||||||
searchInput.value.blur();
|
searchInput.value.blur();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!await isEnabled()) {
|
if (!(await isEnabled())) {
|
||||||
await enable()
|
await enable();
|
||||||
}
|
}
|
||||||
|
|
||||||
os.value = await platform();
|
os.value = platform();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
watch([selectedGroupIndex, selectedItemIndex], () =>
|
||||||
|
scrollToSelectedItem(false)
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@use '~/assets/css/index.scss';
|
@use "~/assets/css/index.scss";
|
||||||
</style>
|
</style>
|
Loading…
Add table
Add a link
Reference in a new issue