fix: not reloading when nothing is new

This commit is contained in:
PandaDEV 2024-11-22 00:15:27 +10:00
parent fa02076b75
commit 042d708c4b
No known key found for this signature in database
GPG key ID: 13EFF9BAF70EE75C

View file

@ -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>