diff --git a/assets/css/index.scss b/assets/css/index.scss
index 003253d..db473f6 100644
--- a/assets/css/index.scss
+++ b/assets/css/index.scss
@@ -89,7 +89,7 @@ $mutedtext: #78756f;
}
.icon {
- width: 20px;
+ width: 18px;
height: 18px;
}
}
@@ -98,32 +98,32 @@ $mutedtext: #78756f;
position: absolute;
top: 53px;
left: 284px;
- padding: 8px;
- height: calc(100vh - 256px);
+ height: calc(100vh - 254px);
font-family: CommitMono Nerd Font !important;
- font-size: 14px;
+ font-size: 12px;
letter-spacing: 1;
border-radius: 10px;
width: calc(100vw - 286px);
white-space: pre-wrap;
word-wrap: break-word;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ overflow: hidden;
+
+ &:not(:has(.image)) {
+ padding: 8px;
+ }
span {
font-family: CommitMono Nerd Font !important;
}
- .full-image {
- width: 100%;
- aspect-ratio: 16 / 9;
- object-fit: cover;
- object-position: center;
- }
-
.image {
- max-width: 100%;
- max-height: 100%;
+ width: 100%;
+ height: 100%;
object-fit: contain;
- object-position: top left;
+ object-position: center;
}
}
@@ -212,6 +212,9 @@ $mutedtext: #78756f;
.information {
position: absolute;
+ display: flex;
+ flex-direction: column;
+ gap: 14px;
bottom: 40px;
left: 284px;
height: 160px;
@@ -225,6 +228,47 @@ $mutedtext: #78756f;
font-size: 12px;
letter-spacing: 0.6px;
}
+
+ .info-content {
+ display: flex;
+ gap: 0;
+ flex-direction: column;
+
+ .info-row {
+ display: flex;
+ width: 100%;
+ font-size: 12px;
+ justify-content: space-between;
+ padding: 8px 0;
+ border-bottom: 1px solid $divider;
+ line-height: 1;
+
+ &:last-child {
+ border-bottom: none;
+ padding-bottom: 0;
+ }
+
+ &:first-child {
+ padding-top: 22px;
+ }
+
+ p {
+ font-family: SFRoundedMedium;
+ color: $text2;
+ font-weight: 500;
+ flex-shrink: 0;
+ }
+
+ span {
+ font-family: CommitMono;
+ color: $text;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ margin-left: 32px;
+ }
+ }
+ }
}
.clothoid-corner {
diff --git a/pages/index.vue b/pages/index.vue
index 22a727d..c902e9b 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -63,11 +63,13 @@
@error="onImageError" />
-
+
+
+
+
-
-
![Image]()
+
+
+
![Image]()
+
+
+
![YouTube Thumbnail]()
+
+
+
-
- {{ selectedItem?.content || "" }}
+ {{ selectedItem?.content || "" }}
-
+
+
+
{{ row.label }}
+
+ {{ row.value }}
+
+
+
+
@@ -114,17 +156,18 @@ import { platform } from "@tauri-apps/plugin-os";
import { enable, isEnabled } from "@tauri-apps/plugin-autostart";
import { listen } from "@tauri-apps/api/event";
import { useNuxtApp } from "#app";
+import { invoke } from "@tauri-apps/api/core";
import { HistoryItem, ContentType } from "~/types/types";
+import type { InfoText, InfoImage, InfoFile, InfoLink, InfoColor, InfoCode } from "~/types/types";
interface GroupedHistory {
label: string;
items: HistoryItem[];
}
-const { $history, $settings } = useNuxtApp();
+const { $history } = useNuxtApp();
const CHUNK_SIZE = 50;
const SCROLL_THRESHOLD = 100;
-const IMAGE_LOAD_DEBOUNCE = 300;
const history = shallowRef([]);
let offset = 0;
@@ -141,9 +184,12 @@ const searchInput = ref(null);
const os = ref("");
const imageUrls = shallowRef>({});
const imageDimensions = shallowRef>({});
+const imageSizes = shallowRef>({});
const lastUpdateTime = ref(Date.now());
const imageLoadError = ref(false);
const imageLoading = ref(false);
+const pageTitle = ref('');
+const pageOgImage = ref('');
const keyboard = useKeyboard();
@@ -230,7 +276,9 @@ const loadHistoryChunk = async (): Promise => {
item.source,
item.content_type,
item.content,
- item.favicon
+ item.favicon,
+ item.source_icon,
+ item.language
);
Object.assign(historyItem, {
id: item.id,
@@ -238,10 +286,34 @@ const loadHistoryChunk = async (): Promise => {
});
if (historyItem.content_type === ContentType.Image) {
- await Promise.all([
- getItemDimensions(historyItem),
- loadImageUrl(historyItem),
- ]);
+ try {
+ const base64 = await $history.readImage({
+ filename: historyItem.content,
+ });
+ const size = Math.ceil((base64.length * 3) / 4);
+ imageSizes.value[historyItem.id] = formatFileSize(size);
+
+ const img = new Image();
+ img.src = `data:image/png;base64,${base64}`;
+ imageUrls.value[historyItem.id] = img.src;
+
+ await new Promise((resolve) => {
+ img.onload = () => {
+ imageDimensions.value[
+ historyItem.id
+ ] = `${img.width}x${img.height}`;
+ resolve();
+ };
+ img.onerror = () => {
+ imageDimensions.value[historyItem.id] = "Error";
+ resolve();
+ };
+ });
+ } catch (error) {
+ console.error("Error processing image:", error);
+ imageDimensions.value[historyItem.id] = "Error";
+ imageSizes.value[historyItem.id] = "Error";
+ }
}
return historyItem;
})
@@ -281,7 +353,9 @@ const scrollToSelectedItem = (forceScrollTop: boolean = false): void => {
if (isAbove || isBelow) {
const scrollOffset = isAbove
- ? elementRect.top - viewportRect.top - 8
+ ? elementRect.top -
+ viewportRect.top -
+ (selectedItemIndex.value === 0 ? 36 : 8)
: elementRect.bottom - viewportRect.bottom + 9;
viewport.scrollBy({ top: scrollOffset, behavior: "smooth" });
@@ -347,7 +421,7 @@ const pasteSelectedItem = async (): Promise => {
let contentType: string = selectedItem.value.content_type;
if (contentType === "image") {
try {
- content = await $history.getImagePath(content);
+ content = await $history.readImage({ filename: content });
} catch (error) {
console.error("Error reading image file:", error);
return;
@@ -386,73 +460,78 @@ const getYoutubeThumbnail = (url: string): string => {
videoId = url.match(/[?&]v=([^&]+)/)?.[1];
}
return videoId
- ? `https://img.youtube.com/vi/${videoId}/0.jpg`
- : "https://via.placeholder.com/150";
+ ? `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`
+ : "https://via.placeholder.com/1280x720";
};
const getFaviconFromDb = (favicon: string): string => {
return `data:image/png;base64,${favicon}`;
};
-const getImageData = async (
- item: HistoryItem
-): Promise<{ url: string; dimensions: string }> => {
- try {
- const base64 = await $history.readImage({ filename: item.content });
- const dataUrl = `data:image/png;base64,${base64}`;
- const img = new Image();
- img.src = dataUrl;
-
- await new Promise((resolve, reject) => {
- img.onload = () => resolve();
- img.onerror = reject;
- });
-
- return {
- url: dataUrl,
- dimensions: `${img.width}x${img.height}`,
- };
- } catch (error) {
- console.error("Error processing image:", error);
- return { url: "", dimensions: "Error" };
- }
-};
-
-const processHistoryItem = async (item: any): Promise => {
- const historyItem = new HistoryItem(
- item.content_type as string,
- ContentType[item.content_type as keyof typeof ContentType],
- item.content,
- item.favicon
- );
-
- Object.assign(historyItem, {
- id: item.id,
- timestamp: new Date(item.timestamp),
- });
-
- if (historyItem.content_type === ContentType.Image) {
- const { url, dimensions } = await getImageData(historyItem);
- imageUrls.value[historyItem.id] = url;
- imageDimensions.value[historyItem.id] = dimensions;
- }
-
- return historyItem;
-};
-
const updateHistory = async (resetScroll: boolean = false): Promise => {
- history.value = [];
- offset = 0;
- await loadHistoryChunk();
+ const results = await $history.loadHistoryChunk(0, CHUNK_SIZE);
+ if (results.length > 0) {
+ const existingIds = new Set(history.value.map((item) => item.id));
+ const uniqueNewItems = results.filter((item) => !existingIds.has(item.id));
- if (
- resetScroll &&
- resultsContainer.value?.osInstance()?.elements().viewport
- ) {
- resultsContainer.value.osInstance()?.elements().viewport?.scrollTo({
- top: 0,
- behavior: "smooth",
- });
+ const processedNewItems = await Promise.all(
+ uniqueNewItems.map(async (item) => {
+ const historyItem = new HistoryItem(
+ item.source,
+ item.content_type,
+ item.content,
+ item.favicon
+ );
+ Object.assign(historyItem, {
+ id: item.id,
+ timestamp: new Date(item.timestamp),
+ });
+
+ if (historyItem.content_type === ContentType.Image) {
+ try {
+ const base64 = await $history.readImage({
+ filename: historyItem.content,
+ });
+ const size = Math.ceil((base64.length * 3) / 4);
+ imageSizes.value[historyItem.id] = formatFileSize(size);
+
+ const img = new Image();
+ img.src = `data:image/png;base64,${base64}`;
+ imageUrls.value[historyItem.id] = img.src;
+
+ await new Promise((resolve) => {
+ img.onload = () => {
+ imageDimensions.value[
+ historyItem.id
+ ] = `${img.width}x${img.height}`;
+ resolve();
+ };
+ img.onerror = () => {
+ imageDimensions.value[historyItem.id] = "Error";
+ resolve();
+ };
+ });
+ } catch (error) {
+ console.error("Error processing image:", error);
+ imageDimensions.value[historyItem.id] = "Error";
+ imageSizes.value[historyItem.id] = "Error";
+ }
+ }
+ return historyItem;
+ })
+ );
+
+ history.value = [...processedNewItems, ...history.value];
+
+ if (
+ resetScroll &&
+ resultsContainer.value?.osInstance()?.elements().viewport
+ ) {
+ resultsContainer.value.osInstance()?.elements().viewport?.scrollTo({
+ top: 0,
+ behavior: "smooth",
+ });
+ }
}
};
@@ -466,29 +545,13 @@ const handleSelection = (
if (shouldScroll) scrollToSelectedItem();
};
-const handleMediaContent = async (
- content: string,
- type: string
-): Promise => {
- if (type === "image") {
- return await $history.getImagePath(content);
- }
-
- if (isYoutubeWatchUrl(content)) {
- const videoId = content.includes("youtu.be")
- ? content.split("youtu.be/")[1]
- : content.match(/[?&]v=([^&]+)/)?.[1];
- return videoId ? `https://img.youtube.com/vi/${videoId}/0.jpg` : "";
- }
-
- return content;
-};
-
const setupEventListeners = async (): Promise => {
await listen("clipboard-content-updated", async () => {
lastUpdateTime.value = Date.now();
- handleSelection(0, 0, false);
await updateHistory(true);
+ if (groupedHistory.value[0]?.items.length > 0) {
+ handleSelection(0, 0, false);
+ }
});
await listen("tauri://focus", async () => {
@@ -506,17 +569,12 @@ const setupEventListeners = async (): Promise => {
lastUpdateTime.value = currentTime;
handleSelection(previousState.groupIndex, previousState.itemIndex, false);
- nextTick(() => {
- const viewport = resultsContainer.value
- ?.osInstance()
- ?.elements().viewport;
- if (viewport) {
- viewport.scrollTo({
- top: previousState.scroll,
- behavior: "instant",
- });
- }
- });
+ if (resultsContainer.value?.osInstance()?.elements().viewport?.scrollTo) {
+ resultsContainer.value.osInstance()?.elements().viewport?.scrollTo({
+ top: previousState.scroll,
+ behavior: "instant",
+ });
+ }
}
focusSearchInput();
});
@@ -558,7 +616,6 @@ const setupEventListeners = async (): Promise => {
if (isMacActionCombo || isOtherOsActionCombo) {
event.preventDefault();
- console.log("Actions shortcut triggered");
}
});
};
@@ -611,40 +668,179 @@ watch([selectedGroupIndex, selectedItemIndex], () =>
scrollToSelectedItem(false)
);
-const getItemDimensions = async (item: HistoryItem) => {
- if (!imageDimensions.value[item.id]) {
- try {
- const base64 = await $history.readImage({ filename: item.content });
- const img = new Image();
- img.src = `data:image/png;base64,${base64}`;
- await new Promise((resolve, reject) => {
- img.onload = () => resolve();
- img.onerror = () => reject();
- });
- imageDimensions.value[item.id] = `${img.width}x${img.height}`;
- } catch (error) {
- console.error("Error loading image dimensions:", error);
- imageDimensions.value[item.id] = "Error";
- }
- }
- return imageDimensions.value[item.id] || "Loading...";
+const getFormattedDate = computed(() => {
+ if (!selectedItem.value?.timestamp) return "";
+ return new Intl.DateTimeFormat("en-US", {
+ dateStyle: "medium",
+ timeStyle: "medium",
+ }).format(selectedItem.value.timestamp);
+});
+
+const formatFileSize = (bytes: number): string => {
+ if (bytes === 0) return "0 Bytes";
+ const k = 1024;
+ const sizes = ["Bytes", "KB", "MB", "GB"];
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+ return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
};
-const loadImageUrl = async (item: HistoryItem) => {
- if (!imageUrls.value[item.id]) {
- try {
- const base64 = await $history.readImage({ filename: item.content });
- imageUrls.value[item.id] = `data:image/png;base64,${base64}`;
- } catch (error) {
- console.error("Error loading image:", error);
+const fetchPageMeta = async (url: string) => {
+ try {
+ const [title, ogImage] = await invoke('fetch_page_meta', { url }) as [string, string | null];
+ pageTitle.value = title;
+ if (ogImage) {
+ pageOgImage.value = ogImage;
}
+ } catch (error) {
+ console.error('Error fetching page meta:', error);
+ pageTitle.value = 'Error loading title';
}
};
-const getComputedImageUrl = (item: HistoryItem | null): string => {
- if (!item) return "";
- return imageUrls.value[item.id] || "";
-};
+watch(() => selectedItem.value, (newItem) => {
+ if (newItem?.content_type === ContentType.Link) {
+ pageTitle.value = 'Loading...';
+ pageOgImage.value = '';
+ fetchPageMeta(newItem.content);
+ } else {
+ pageTitle.value = '';
+ pageOgImage.value = '';
+ }
+});
+
+const getInfo = computed(() => {
+ if (!selectedItem.value) return null;
+
+ const baseInfo = {
+ source: selectedItem.value.source,
+ copied: selectedItem.value.timestamp,
+ };
+
+ const infoMap: Record InfoText | InfoImage | InfoFile | InfoLink | InfoColor | InfoCode> = {
+ [ContentType.Text]: () => ({
+ ...baseInfo,
+ content_type: ContentType.Text,
+ characters: selectedItem.value!.content.length,
+ words: selectedItem.value!.content.trim().split(/\s+/).length,
+ }),
+ [ContentType.Image]: () => ({
+ ...baseInfo,
+ content_type: ContentType.Image,
+ dimensions: imageDimensions.value[selectedItem.value!.id] || "Loading...",
+ size: parseInt(imageSizes.value[selectedItem.value!.id] || "0"),
+ }),
+ [ContentType.File]: () => ({
+ ...baseInfo,
+ content_type: ContentType.File,
+ path: selectedItem.value!.content,
+ filesize: 0,
+ }),
+ [ContentType.Link]: () => ({
+ ...baseInfo,
+ content_type: ContentType.Link,
+ title: pageTitle.value,
+ url: selectedItem.value!.content,
+ characters: selectedItem.value!.content.length,
+ }),
+ [ContentType.Color]: () => {
+ const hex = selectedItem.value!.content;
+ const r = parseInt(hex.slice(1, 3), 16);
+ const g = parseInt(hex.slice(3, 5), 16);
+ const b = parseInt(hex.slice(5, 7), 16);
+
+ const rNorm = r / 255;
+ const gNorm = g / 255;
+ const bNorm = b / 255;
+
+ const max = Math.max(rNorm, gNorm, bNorm);
+ const min = Math.min(rNorm, gNorm, bNorm);
+ let h = 0, s = 0;
+ const l = (max + min) / 2;
+
+ if (max !== min) {
+ const d = max - min;
+ s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+
+ switch (max) {
+ case rNorm:
+ h = (gNorm - bNorm) / d + (gNorm < bNorm ? 6 : 0);
+ break;
+ case gNorm:
+ h = (bNorm - rNorm) / d + 2;
+ break;
+ case bNorm:
+ h = (rNorm - gNorm) / d + 4;
+ break;
+ }
+ h /= 6;
+ }
+
+ return {
+ ...baseInfo,
+ content_type: ContentType.Color,
+ hex: hex,
+ rgb: `rgb(${r}, ${g}, ${b})`,
+ hsl: `hsl(${Math.round(h * 360)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`,
+ };
+ },
+ [ContentType.Code]: () => ({
+ ...baseInfo,
+ content_type: ContentType.Code,
+ language: selectedItem.value!.language ?? "Unknown",
+ lines: selectedItem.value!.content.split('\n').length,
+ }),
+ };
+
+ return infoMap[selectedItem.value.content_type]();
+});
+
+const infoRows = computed(() => {
+ if (!getInfo.value) return [];
+
+ const commonRows = [
+ { label: "Source", value: getInfo.value.source, isUrl: false },
+ { label: "Content Type", value: getInfo.value.content_type.charAt(0).toUpperCase() + getInfo.value.content_type.slice(1), isUrl: false },
+ ];
+
+ const typeSpecificRows: Record> = {
+ [ContentType.Text]: [
+ { label: "Characters", value: (getInfo.value as InfoText).characters },
+ { label: "Words", value: (getInfo.value as InfoText).words },
+ ],
+ [ContentType.Image]: [
+ { label: "Dimensions", value: (getInfo.value as InfoImage).dimensions },
+ { label: "Image size", value: formatFileSize((getInfo.value as InfoImage).size) },
+ ],
+ [ContentType.File]: [
+ { label: "Path", value: (getInfo.value as InfoFile).path },
+ ],
+ [ContentType.Link]: [
+ ...((getInfo.value as InfoLink).title && (getInfo.value as InfoLink).title !== 'Loading...'
+ ? [{ label: "Title", value: (getInfo.value as InfoLink).title || '' }]
+ : []),
+ { label: "URL", value: (getInfo.value as InfoLink).url, isUrl: true },
+ { label: "Characters", value: (getInfo.value as InfoLink).characters },
+ ],
+ [ContentType.Color]: [
+ { label: "Hex", value: (getInfo.value as InfoColor).hex },
+ { label: "RGB", value: (getInfo.value as InfoColor).rgb },
+ { label: "HSL", value: (getInfo.value as InfoColor).hsl },
+ ],
+ [ContentType.Code]: [
+ { label: "Language", value: (getInfo.value as InfoCode).language },
+ { label: "Lines", value: (getInfo.value as InfoCode).lines },
+ ],
+ };
+
+ const specificRows = typeSpecificRows[getInfo.value.content_type]
+ .filter(row => row.value !== "");
+
+ return [
+ ...commonRows,
+ ...specificRows,
+ { label: "Copied", value: getFormattedDate.value },
+ ];
+});
\ No newline at end of file
+@use "~/assets/css/settings.scss";
+
diff --git a/plugins/history.ts b/plugins/history.ts
index dd880b0..934ded5 100644
--- a/plugins/history.ts
+++ b/plugins/history.ts
@@ -27,8 +27,12 @@ export default defineNuxtPlugin(() => {
});
},
- async getImagePath(path: string): Promise {
- return await invoke("get_image_path", { path });
+ async deleteHistoryItem(id: string): Promise {
+ await invoke("delete_history_item", { id });
+ },
+
+ async clearHistory(): Promise {
+ await invoke("clear_history");
},
async writeAndPaste(data: {
diff --git a/public/icons/Code.svg b/public/icons/Code.svg
index b5c1a42..5c34abf 100644
--- a/public/icons/Code.svg
+++ b/public/icons/Code.svg
@@ -1,10 +1,7 @@
-