PandaDEV/Qopy
1
0
Fork 0
mirror of https://github.com/0PandaDEV/Qopy.git synced 2025-04-21 13:14:04 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

change keybind test

Browse source
This commit is contained in:
PandaDEV 2024-08-27 17:15:37 +10:00
parent 0b077a9b2e
commit ebf6e0311f
No known key found for this signature in database
GPG key ID: 13EFF9BAF70EE75C
8 changed files with 780 additions and 531 deletions
Download patch file Download diff file Expand all files Collapse all files

514
app.vue
View file

@ -1,465 +1,75 @@
<template> <template>
<div class="bg" @keydown.down.prevent="selectNext" @keydown.up.prevent="selectPrevious" <div>
@keydown.enter.prevent="pasteSelectedItem" @keydown.esc="hideApp" tabindex="0"> <NuxtPage />
<input ref="searchInput" v-model="searchQuery" @input="searchHistory" autocorrect="off" autocapitalize="off"
spellcheck="false" class="search" type="text" placeholder="Type to filter entries...">
<div class="bottom-bar">
<div class="left">
<img class="logo" width="18px" src="/logo.png" alt="">
<p>Qopy</p>
</div>
<div class="right">
<div class="paste" @click="pasteSelectedItem">
<p>Paste</p>
<img src="/enter.svg" alt="">
</div>
<div class="divider"></div>
<div class="actions">
<p>Actions</p>
<div>
<img v-if="os === 'windows' || os === 'linux'" src="/ctrl.svg" alt="">
<img v-if="os === 'macos'" src="/cmd.svg" alt="">
<img src="/k.svg" alt="">
</div>
</div>
</div>
</div>
<OverlayScrollbarsComponent class="results" ref="resultsContainer"
: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 }">
<template v-if="item.content_type === 'image'">
<img v-if="!imageLoading && !imageLoadError"
:src="getComputedImageUrl(item)"
alt="Image"
class="image"
@error="onImageError">
<IconsImage v-if="imageLoading || imageLoadError" class="icon" />
</template>
<img v-else-if="hasFavicon(item.favicon ?? '')" :src="getFaviconFromDb(item.favicon ?? '')" alt="Favicon"
class="favicon">
<IconsFile class="icon" v-else-if="item.content_type === 'files'" />
<IconsText class="icon" v-else-if="item.content_type === 'text'" />
<IconsCode class="icon" v-else-if="item.content_type === 'code'" />
<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">
</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>
</OverlayScrollbarsComponent>
<Noise />
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, onMounted, watch, nextTick, shallowRef } from 'vue'; import { listen } from '@tauri-apps/api/event'
import Database from '@tauri-apps/plugin-sql';
import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
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 { onMounted } from 'vue'
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';
interface HistoryItem {
id: number;
content: string;
content_type: string;
timestamp: string;
favicon?: string;
dimensions?: string;
}
interface GroupedHistory {
label: string;
items: HistoryItem[];
}
const db: Ref<Database | null> = ref(null);
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 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 imageLoadError = ref(false);
const imageLoading = ref(true);
const imageUrls: Ref<Record<number, string>> = shallowRef({});
const groupedHistory: ComputedRef<GroupedHistory[]> = computed(() => {
const now = new Date();
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
const getWeekNumber = (d: Date): number => {
d = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
return Math.ceil(((Number(d) - Number(yearStart)) / 86400000 + 1) / 7);
};
const thisWeek = getWeekNumber(now);
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: [] },
];
const filteredItems = searchQuery.value
? history.value.filter(item => item.content.toLowerCase().includes(searchQuery.value.toLowerCase()))
: history.value;
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()) {
groups[1].items.push(item);
} else if (itemYear === thisYear && itemWeek === thisWeek) {
groups[2].items.push(item);
} else if (itemYear === thisYear && itemWeek === thisWeek - 1) {
groups[3].items.push(item);
} else if (itemYear === thisYear) {
groups[4].items.push(item);
} else {
groups[5].items.push(item);
}
});
return groups.filter(group => group.items.length > 0);
});
const selectedItem: ComputedRef<HistoryItem | null> = computed(() => {
const group = groupedHistory.value[selectedGroupIndex.value];
return group ? group.items[selectedItemIndex.value] : null;
});
const isSelected = (groupIndex: number, itemIndex: number): boolean => {
return selectedGroupIndex.value === groupIndex && selectedItemIndex.value === itemIndex;
};
const searchHistory = async (): Promise<void> => {
if (!db.value) return;
history.value = [];
offset = 0;
const query = `%${searchQuery.value}%`;
const results = await db.value.select<HistoryItem[]>(
'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;
}));
};
const selectNext = (): void => {
const currentGroup = groupedHistory.value[selectedGroupIndex.value];
if (selectedItemIndex.value < currentGroup.items.length - 1) {
selectedItemIndex.value++;
} else if (selectedGroupIndex.value < groupedHistory.value.length - 1) {
selectedGroupIndex.value++;
selectedItemIndex.value = 0;
}
scrollToSelectedItem();
};
const selectPrevious = (): void => {
if (selectedItemIndex.value > 0) {
selectedItemIndex.value--;
} else if (selectedGroupIndex.value > 0) {
selectedGroupIndex.value--;
selectedItemIndex.value = groupedHistory.value[selectedGroupIndex.value].items.length - 1;
}
scrollToSelectedItem();
};
const selectItem = (groupIndex: number, itemIndex: number): void => {
selectedGroupIndex.value = groupIndex;
selectedItemIndex.value = itemIndex;
scrollToSelectedItem();
};
const pasteSelectedItem = async (): Promise<void> => {
if (!selectedItem.value) return;
let content = selectedItem.value.content;
let contentType: String = selectedItem.value.content_type;
if (contentType === 'image') {
try {
content = readFile(content).toString();
} catch (error) {
console.error('Error reading image file:', error);
return;
}
}
await hideApp();
await invoke("write_and_paste", {
content,
contentType
});
};
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;
};
const hasFavicon = (str: string): boolean => {
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);
};
const getYoutubeThumbnail = (url: string): string => {
let videoId;
if (url.includes('youtu.be')) {
videoId = url.split('youtu.be/')[1];
} else {
videoId = url.match(/[?&]v=([^&]+)/)?.[1];
}
return `https://img.youtube.com/vi/${videoId}/0.jpg`;
};
const getFaviconFromDb = (favicon: string): string => {
return `data:image/png;base64,${favicon}`;
};
const getImageDimensions = (path: string): Promise<string> => {
return new Promise(async (resolve) => {
const img = new Image();
img.onload = () => {
imageLoadError.value = false;
imageLoading.value = false;
resolve(`${img.width}x${img.height}`);
};
img.onerror = (e) => {
console.error('Error loading image:', e);
imageLoadError.value = true;
imageLoading.value = false;
resolve('0x0');
};
try {
imageLoading.value = true;
const dataUrl = await getImageUrl(path);
img.src = dataUrl;
} catch (error) {
console.error('Error getting image URL:', error);
imageLoadError.value = true;
imageLoading.value = false;
resolve('0x0');
}
});
};
const getImageUrl = async (path: string): Promise<string> => {
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 });
console.log('Image data received, length:', base64.length);
if (!base64 || base64.length === 0) {
throw new Error('Received empty image data');
}
const dataUrl = `data:image/png;base64,${base64}`;
console.log('Data URL preview:', dataUrl.substring(0, 50) + '...');
imageLoadError.value = false;
imageLoading.value = false;
return dataUrl;
} catch (error) {
console.error('Error reading image file:', error);
imageLoadError.value = true;
imageLoading.value = false;
return '';
}
};
const getComputedImageUrl = (item: HistoryItem): string => {
if (!imageUrls.value[item.id]) {
imageUrls.value[item.id] = '';
getImageUrl(item.content)
.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]: '' };
});
}
return imageUrls.value[item.id] || '';
};
const loadHistoryChunk = async (): Promise<void> => {
if (!db.value || isLoading) return;
isLoading = true;
let results: HistoryItem[];
if (searchQuery.value) {
const query = `%${searchQuery.value}%`;
results = await db.value.select(
'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 ?',
[chunkSize, offset]
);
}
if (results.length === 0) {
isLoading = false;
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;
}));
history.value = [...history.value, ...processedChunk];
offset += chunkSize;
isLoading = false;
};
const handleScroll = (): void => {
if (!resultsContainer.value) return;
const { viewport } = resultsContainer.value?.osInstance().elements() ?? {};
const { scrollTop = 0, scrollHeight = 0, clientHeight = 0 } = viewport ?? {};
if (scrollHeight - scrollTop - clientHeight < 100) {
loadHistoryChunk();
}
};
const hideApp = async (): Promise<void> => {
await app.hide();
await window.getCurrentWindow().hide();
};
const focusSearchInput = (): void => {
nextTick(() => {
searchInput.value?.focus();
});
};
const scrollToSelectedItem = (): 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();
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;
}
viewport.scrollBy({
top: scrollOffset,
behavior: 'smooth'
});
}
}
});
};
watch([selectedGroupIndex, selectedItemIndex], scrollToSelectedItem);
watch(searchQuery, () => {
searchHistory();
});
onMounted(async () => { onMounted(async () => {
db.value = await Database.load('sqlite:data.db'); await listen('change_keybind', async () => {
await loadHistoryChunk(); await navigateTo('/keybind')
await app.show();
if (resultsContainer.value) { await window.getCurrentWindow().show();
resultsContainer.value.osInstance().elements().viewport.addEventListener('scroll', handleScroll); })
}
await listen('tauri://focus', async () => {
history.value = [];
offset = 0;
await loadHistoryChunk();
focusSearchInput();
});
await listen('tauri://blur', () => {
if (searchInput.value) {
searchInput.value.blur();
}
});
if (!await isEnabled()) {
await enable()
}
os.value = await platform();
});
await listen('main_route', async () => {
await navigateTo('/')
})
})
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/style.scss'; @font-face {
font-family: SFRoundedRegular;
font-display: swap;
src: url("~/assets/fonts/SFRoundedRegular.otf") format("opentype");
}
@font-face {
font-family: SFRoundedMedium;
font-display: swap;
src: url("~/assets/fonts/SFRoundedMedium.otf") format("opentype");
}
@font-face {
font-family: SFRoundedSemiBold;
font-display: swap;
src: url("~/assets/fonts/SFRoundedSemiBold.otf") format("opentype");
}
@font-face {
font-family: CommitMono;
font-display: swap;
src: url("~/assets/fonts/CommitMono.woff2") format("woff2");
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #E5DFD5;
text-decoration: none;
font-family: SFRoundedRegular;
scroll-behavior: smooth;
scrollbar-width: thin;
user-select: none;
--os-handle-bg: #ADA9A1;
--os-handle-bg-hover: #78756F;
--os-handle-bg-active: #78756F;
}
html,
body,
#__nuxt {
background-color: transparent;
}
.os-scrollbar-horizontal {
display: none;
}
</style> </style>

50
assets/css/style.scss → assets/css/index.scss
View file

@ -6,56 +6,6 @@ $text: #E5DFD5;
$text2: #ADA9A1; $text2: #ADA9A1;
$mutedtext: #78756F; $mutedtext: #78756F;
@font-face {
font-family: SFRoundedRegular;
font-display: swap;
src: url("~/assets/fonts/SFRoundedRegular.otf") format("opentype");
}
@font-face {
font-family: SFRoundedMedium;
font-display: swap;
src: url("~/assets/fonts/SFRoundedMedium.otf") format("opentype");
}
@font-face {
font-family: SFRoundedSemiBold;
font-display: swap;
src: url("~/assets/fonts/SFRoundedSemiBold.otf") format("opentype");
}
@font-face {
font-family: CommitMono;
font-display: swap;
src: url("~/assets/fonts/CommitMono.woff2") format("woff2");
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: $text;
text-decoration: none;
font-family: SFRoundedRegular;
scroll-behavior: smooth;
scrollbar-width: thin;
user-select: none;
--os-handle-bg: #ADA9A1;
--os-handle-bg-hover: #78756F;
--os-handle-bg-active: #78756F;
}
html,
body,
#__nuxt {
background-color: transparent;
}
.os-scrollbar-horizontal {
display: none;
}
.bg { .bg {
width: 750px; width: 750px;
height: 474px; height: 474px;

66
assets/css/keybind.scss Normal file
View file

@ -0,0 +1,66 @@
$primary: #2E2D2B;
$accent: #FEB453;
$divider: #ffffff0d;
$text: #E5DFD5;
$text2: #ADA9A1;
$mutedtext: #78756F;
.bg {
width: 750px;
height: 474px;
background-color: $primary;
border: 1px solid $divider;
border-radius: 12px;
z-index: -1;
position: fixed;
outline: none;
}
.keybind-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
padding: 20px;
}
h2 {
margin-bottom: 20px;
}
.keybind-input {
width: 300px;
height: 50px;
border: 2px solid $accent;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
cursor: pointer;
margin-bottom: 20px;
background-color: rgba($accent, 0.1);
user-select: none;
}
.keybind-input:focus {
outline: none;
box-shadow: 0 0 0 2px rgba($accent, 0.5);
}
button {
padding: 10px 20px;
background-color: $accent;
color: $primary;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}

459
pages/index.vue Normal file
View file

@ -0,0 +1,459 @@
<template>
<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...">
<div class="bottom-bar">
<div class="left">
<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="">
</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="">
</div>
</div>
</div>
</div>
<OverlayScrollbarsComponent class="results" ref="resultsContainer"
: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 }">
<template v-if="item.content_type === 'image'">
<img v-if="!imageLoading && !imageLoadError" :src="getComputedImageUrl(item)" alt="Image" class="image"
@error="onImageError">
<IconsImage v-if="imageLoading || imageLoadError" class="icon" />
</template>
<img v-else-if="hasFavicon(item.favicon ?? '')" :src="getFaviconFromDb(item.favicon ?? '')" alt="Favicon"
class="favicon">
<IconsFile class="icon" v-else-if="item.content_type === 'files'" />
<IconsText class="icon" v-else-if="item.content_type === 'text'" />
<IconsCode class="icon" v-else-if="item.content_type === 'code'" />
<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">
</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>
</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 { 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 { enable, isEnabled } from "@tauri-apps/plugin-autostart";
import { listen } from '@tauri-apps/api/event';
import { readFile } from '@tauri-apps/plugin-fs';
interface HistoryItem {
id: number;
content: string;
content_type: string;
timestamp: string;
favicon?: string;
dimensions?: string;
}
interface GroupedHistory {
label: string;
items: HistoryItem[];
}
const db: Ref<Database | null> = ref(null);
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 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 imageLoadError = ref(false);
const imageLoading = ref(true);
const imageUrls: Ref<Record<number, string>> = shallowRef({});
const groupedHistory: ComputedRef<GroupedHistory[]> = computed(() => {
const now = new Date();
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
const getWeekNumber = (d: Date): number => {
d = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
return Math.ceil(((Number(d) - Number(yearStart)) / 86400000 + 1) / 7);
};
const thisWeek = getWeekNumber(now);
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: [] },
];
const filteredItems = searchQuery.value
? history.value.filter(item => item.content.toLowerCase().includes(searchQuery.value.toLowerCase()))
: history.value;
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()) {
groups[1].items.push(item);
} else if (itemYear === thisYear && itemWeek === thisWeek) {
groups[2].items.push(item);
} else if (itemYear === thisYear && itemWeek === thisWeek - 1) {
groups[3].items.push(item);
} else if (itemYear === thisYear) {
groups[4].items.push(item);
} else {
groups[5].items.push(item);
}
});
return groups.filter(group => group.items.length > 0);
});
const selectedItem: ComputedRef<HistoryItem | null> = computed(() => {
const group = groupedHistory.value[selectedGroupIndex.value];
return group ? group.items[selectedItemIndex.value] : null;
});
const isSelected = (groupIndex: number, itemIndex: number): boolean => {
return selectedGroupIndex.value === groupIndex && selectedItemIndex.value === itemIndex;
};
const searchHistory = async (): Promise<void> => {
if (!db.value) return;
history.value = [];
offset = 0;
const query = `%${searchQuery.value}%`;
const results = await db.value.select<HistoryItem[]>(
'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;
}));
};
const selectNext = (): void => {
const currentGroup = groupedHistory.value[selectedGroupIndex.value];
if (selectedItemIndex.value < currentGroup.items.length - 1) {
selectedItemIndex.value++;
} else if (selectedGroupIndex.value < groupedHistory.value.length - 1) {
selectedGroupIndex.value++;
selectedItemIndex.value = 0;
}
scrollToSelectedItem();
};
const selectPrevious = (): void => {
if (selectedItemIndex.value > 0) {
selectedItemIndex.value--;
} else if (selectedGroupIndex.value > 0) {
selectedGroupIndex.value--;
selectedItemIndex.value = groupedHistory.value[selectedGroupIndex.value].items.length - 1;
}
scrollToSelectedItem();
};
const selectItem = (groupIndex: number, itemIndex: number): void => {
selectedGroupIndex.value = groupIndex;
selectedItemIndex.value = itemIndex;
scrollToSelectedItem();
};
const pasteSelectedItem = async (): Promise<void> => {
if (!selectedItem.value) return;
let content = selectedItem.value.content;
let contentType: String = selectedItem.value.content_type;
if (contentType === 'image') {
try {
content = readFile(content).toString();
} catch (error) {
console.error('Error reading image file:', error);
return;
}
}
await hideApp();
await invoke("write_and_paste", {
content,
contentType
});
};
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;
};
const hasFavicon = (str: string): boolean => {
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);
};
const getYoutubeThumbnail = (url: string): string => {
let videoId;
if (url.includes('youtu.be')) {
videoId = url.split('youtu.be/')[1];
} else {
videoId = url.match(/[?&]v=([^&]+)/)?.[1];
}
return `https://img.youtube.com/vi/${videoId}/0.jpg`;
};
const getFaviconFromDb = (favicon: string): string => {
return `data:image/png;base64,${favicon}`;
};
const getImageDimensions = (path: string): Promise<string> => {
return new Promise(async (resolve) => {
const img = new Image();
img.onload = () => {
imageLoadError.value = false;
imageLoading.value = false;
resolve(`${img.width}x${img.height}`);
};
img.onerror = (e) => {
console.error('Error loading image:', e);
imageLoadError.value = true;
imageLoading.value = false;
resolve('0x0');
};
try {
imageLoading.value = true;
const dataUrl = await getImageUrl(path);
img.src = dataUrl;
} catch (error) {
console.error('Error getting image URL:', error);
imageLoadError.value = true;
imageLoading.value = false;
resolve('0x0');
}
});
};
const getImageUrl = async (path: string): Promise<string> => {
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');
}
const dataUrl = `data:image/png;base64,${base64}`;
imageLoadError.value = false;
imageLoading.value = false;
return dataUrl;
} catch (error) {
console.error('Error reading image file:', error);
imageLoadError.value = true;
imageLoading.value = false;
return '';
}
};
const getComputedImageUrl = (item: HistoryItem): string => {
if (!imageUrls.value[item.id]) {
imageUrls.value[item.id] = '';
getImageUrl(item.content)
.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]: '' };
});
}
return imageUrls.value[item.id] || '';
};
const loadHistoryChunk = async (): Promise<void> => {
if (!db.value || isLoading) return;
isLoading = true;
let results: HistoryItem[];
if (searchQuery.value) {
const query = `%${searchQuery.value}%`;
results = await db.value.select(
'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 ?',
[chunkSize, offset]
);
}
if (results.length === 0) {
isLoading = false;
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;
}));
history.value = [...history.value, ...processedChunk];
offset += chunkSize;
isLoading = false;
};
const handleScroll = (): void => {
if (!resultsContainer.value) return;
const { viewport } = resultsContainer.value?.osInstance().elements() ?? {};
const { scrollTop = 0, scrollHeight = 0, clientHeight = 0 } = viewport ?? {};
if (scrollHeight - scrollTop - clientHeight < 100) {
loadHistoryChunk();
}
};
const hideApp = async (): Promise<void> => {
await app.hide();
await window.getCurrentWindow().hide();
};
const focusSearchInput = (): void => {
nextTick(() => {
searchInput.value?.focus();
});
};
const scrollToSelectedItem = (): 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();
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;
}
viewport.scrollBy({
top: scrollOffset,
behavior: 'smooth'
});
}
}
});
};
watch([selectedGroupIndex, selectedItemIndex], scrollToSelectedItem);
watch(searchQuery, () => {
searchHistory();
});
onMounted(async () => {
db.value = await Database.load('sqlite:data.db');
await loadHistoryChunk();
if (resultsContainer.value) {
resultsContainer.value.osInstance().elements().viewport.addEventListener('scroll', handleScroll);
}
await listen('tauri://focus', async () => {
history.value = [];
offset = 0;
await loadHistoryChunk();
focusSearchInput();
});
await listen('tauri://blur', () => {
if (searchInput.value) {
searchInput.value.blur();
}
});
if (!await isEnabled()) {
await enable()
}
os.value = await platform();
});
</script>
<style lang="scss">
@import '~/assets/css/index.scss';
</style>

53
pages/keybind.vue Normal file
View file

@ -0,0 +1,53 @@
<template>
<div class="bg">
<div class="keybind-container">
<h2>Set New Keybind</h2>
<div
class="keybind-input"
tabindex="0"
@focus="startCapture"
@blur="stopCapture"
ref="keybindInput"
>
{{ currentKeybind || 'Click here, then press your desired key combination' }}
</div>
<button @click="saveKeybind" :disabled="!currentKeybind">Save Keybind</button>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { invoke } from '@tauri-apps/api/core';
import { listen } from '@tauri-apps/api/event';
const currentKeybind = ref('');
const keybindInput = ref<HTMLElement | null>(null);
const startCapture = async () => {
await invoke('start_keybind_capture');
};
const stopCapture = async () => {
await invoke('stop_keybind_capture');
};
const saveKeybind = () => {
console.log('Saving keybind:', currentKeybind.value);
// Implement saving logic here
};
onMounted(async () => {
const unlisten = await listen('keybind_captured', (event: any) => {
currentKeybind.value = event.payload as string;
});
onUnmounted(() => {
unlisten();
});
});
</script>
<style lang="scss">
@import '~/assets/css/keybind.scss';
</style>

152
src-tauri/src/api/hotkeys.rs
View file

@ -1,32 +1,136 @@
use rdev::{listen, EventType, Key}; use rdev::{listen, Event, EventType, Key};
use tauri::Manager; use tauri::{Manager, Emitter};
use std::sync::atomic::{AtomicBool, Ordering};
use std::sync::{Arc, Mutex};
use std::collections::HashSet;
use serde::Serialize;
use crate::utils::commands::center_window_on_current_monitor; use crate::utils::commands::center_window_on_current_monitor;
#[warn(dead_code)] static IS_CAPTURING_KEYBIND: AtomicBool = AtomicBool::new(false);
#[derive(Debug, Clone, Serialize)]
struct CapturedKeybind {
modifiers: Vec<String>,
key: String,
}
struct KeybindState {
pressed_keys: HashSet<Key>,
}
impl KeybindState {
fn new() -> Self {
Self {
pressed_keys: HashSet::new(),
}
}
}
pub fn setup(app_handle: tauri::AppHandle) { pub fn setup(app_handle: tauri::AppHandle) {
let app_handle_clone = app_handle.clone();
let keybind_state = Arc::new(Mutex::new(KeybindState::new()));
std::thread::spawn(move || { std::thread::spawn(move || {
let mut meta_pressed = false; if let Err(e) = listen(move |event| {
listen(move |event| { let mut state = keybind_state.lock().unwrap();
match event.event_type { if IS_CAPTURING_KEYBIND.load(Ordering::SeqCst) {
EventType::KeyPress(Key::MetaLeft) | EventType::KeyPress(Key::MetaRight) => { handle_keybind_capture(&app_handle_clone, event, &mut state);
meta_pressed = true; } else {
} handle_normal_hotkey(&app_handle_clone, event, &mut state);
EventType::KeyRelease(Key::MetaLeft) | EventType::KeyRelease(Key::MetaRight) => {
meta_pressed = false;
}
EventType::KeyPress(Key::KeyV) => {
if meta_pressed {
meta_pressed = false;
let window = app_handle.get_webview_window("main").unwrap();
window.show().unwrap();
window.set_focus().unwrap();
center_window_on_current_monitor(&window);
}
}
_ => {}
} }
}) }) {
.unwrap(); eprintln!("Error setting up event listener: {:?}", e);
}
}); });
} }
fn handle_normal_hotkey(app_handle: &tauri::AppHandle, event: Event, state: &mut KeybindState) {
match event.event_type {
EventType::KeyPress(Key::MetaLeft) | EventType::KeyPress(Key::MetaRight) => {
state.pressed_keys.insert(Key::MetaLeft);
}
EventType::KeyRelease(Key::MetaLeft) | EventType::KeyRelease(Key::MetaRight) => {
state.pressed_keys.remove(&Key::MetaLeft);
}
EventType::KeyPress(Key::KeyV) => {
if state.pressed_keys.contains(&Key::MetaLeft) {
state.pressed_keys.clear();
if let Some(window) = app_handle.get_webview_window("main") {
let _ = window.show();
let _ = window.set_focus();
center_window_on_current_monitor(&window);
}
}
}
_ => {}
}
}
fn handle_keybind_capture(app_handle: &tauri::AppHandle, event: Event, state: &mut KeybindState) {
match event.event_type {
EventType::KeyPress(key) => {
state.pressed_keys.insert(key);
update_captured_keybind(app_handle, &state.pressed_keys);
}
EventType::KeyRelease(key) => {
state.pressed_keys.remove(&key);
}
_ => {}
}
}
fn update_captured_keybind(app_handle: &tauri::AppHandle, pressed_keys: &HashSet<Key>) {
let modifiers: Vec<String> = vec![Key::ControlLeft, Key::ShiftLeft, Key::Alt, Key::MetaLeft]
.into_iter()
.filter(|key| pressed_keys.contains(key))
.map(|key| key_to_string(key))
.collect();
let key = pressed_keys.iter()
.find(|&&key| !vec![Key::ControlLeft, Key::ShiftLeft, Key::Alt, Key::MetaLeft].contains(&key))
.map(|&key| key_to_string(key));
if let Some(key) = key {
let captured_keybind = CapturedKeybind {
modifiers,
key,
};
if let Err(e) = app_handle.emit("keybind_captured", captured_keybind) {
eprintln!("Error emitting keybind_captured event: {:?}", e);
}
}
}
fn key_to_string(key: Key) -> String {
match key {
Key::ControlLeft | Key::ControlRight => "Ctrl".to_string(),
Key::ShiftLeft | Key::ShiftRight => "Shift".to_string(),
Key::Alt => "Alt".to_string(),
Key::MetaLeft | Key::MetaRight => "Meta".to_string(),
_ => format!("{:?}", key),
}
}
#[tauri::command]
pub fn start_keybind_capture() {
IS_CAPTURING_KEYBIND.store(true, Ordering::SeqCst);
}
#[tauri::command]
pub fn stop_keybind_capture() {
IS_CAPTURING_KEYBIND.store(false, Ordering::SeqCst);
}
#[tauri::command]
pub fn get_current_keybind() -> String {
// Implement logic to retrieve the current keybind from your configuration
"Meta+V".to_string() // Placeholder
}
#[tauri::command]
pub fn save_keybind(keybind: String) -> Result<(), String> {
// Implement logic to save the new keybind to your configuration
println!("Saving keybind: {}", keybind);
Ok(())
}

9
src-tauri/src/api/tray.rs
View file

@ -1,7 +1,5 @@
use tauri::{ use tauri::{
menu::{MenuBuilder, MenuItemBuilder}, menu::{MenuBuilder, MenuItemBuilder}, tray::TrayIconBuilder, Emitter, Manager
tray::TrayIconBuilder,
Manager,
}; };
pub fn setup(app: &mut tauri::App) -> Result<(), Box<dyn std::error::Error>> { pub fn setup(app: &mut tauri::App) -> Result<(), Box<dyn std::error::Error>> {
@ -18,6 +16,7 @@ pub fn setup(app: &mut tauri::App) -> Result<(), Box<dyn std::error::Error>> {
.enabled(false) .enabled(false)
.build(app)?]) .build(app)?])
.items(&[&MenuItemBuilder::with_id("show", "Show/Hide").build(app)?]) .items(&[&MenuItemBuilder::with_id("show", "Show/Hide").build(app)?])
.items(&[&MenuItemBuilder::with_id("keybind", "Change keybind").build(app)?])
.items(&[&MenuItemBuilder::with_id("quit", "Quit").build(app)?]) .items(&[&MenuItemBuilder::with_id("quit", "Quit").build(app)?])
.build()?, .build()?,
) )
@ -33,6 +32,10 @@ pub fn setup(app: &mut tauri::App) -> Result<(), Box<dyn std::error::Error>> {
window_clone_for_tray.show().unwrap(); window_clone_for_tray.show().unwrap();
window_clone_for_tray.set_focus().unwrap(); window_clone_for_tray.set_focus().unwrap();
} }
window_clone_for_tray.emit("main_route", ()).unwrap();
}
"keybind" => {
window_clone_for_tray.emit("change_keybind", ()).unwrap();
} }
_ => (), _ => (),
}) })

6
src-tauri/src/main.rs
View file

@ -31,7 +31,7 @@ fn main() {
.setup(|app| { .setup(|app| {
let app_handle = app.handle().clone(); let app_handle = app.handle().clone();
#[cfg(not(target_os = "macos"))] // #[cfg(not(target_os = "macos"))]
api::hotkeys::setup(app_handle.clone()); api::hotkeys::setup(app_handle.clone());
api::tray::setup(app)?; api::tray::setup(app)?;
api::database::setup(app)?; api::database::setup(app)?;
@ -74,6 +74,10 @@ fn main() {
api::clipboard::get_image_path, api::clipboard::get_image_path,
api::clipboard::write_and_paste, api::clipboard::write_and_paste,
api::clipboard::read_image, api::clipboard::read_image,
api::hotkeys::start_keybind_capture,
api::hotkeys::stop_keybind_capture,
api::hotkeys::get_current_keybind,
api::hotkeys::save_keybind,
]) ])
.run(tauri::generate_context!()) .run(tauri::generate_context!())
.expect("error while running tauri application"); .expect("error while running tauri application");