front end enhancements

app.vue

@@ -33,9 +33,9 @@
         {{ truncateContent(item.content) }}
       </div>
     </OverlayScrollbarsComponent>
-    <div class="content">
+    <OverlayScrollbarsComponent class="content">
       {{ filteredHistory[selectedIndex]?.content || '' }}
-    </div>
+    </OverlayScrollbarsComponent>
     <Noise />
   </div>
 </template>
@@ -44,18 +44,19 @@
 import { ref, computed, onMounted, watch, nextTick } from 'vue';
 import Database from '@tauri-apps/plugin-sql';
 import { register, unregister, isRegistered } from '@tauri-apps/plugin-global-shortcut';
-import { writeText } from '@tauri-apps/plugin-clipboard-manager';
+import { writeText, paste } from '@tauri-apps/plugin-clipboard-manager';
 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';
 
+const db = ref(null);
 const history = ref([]);
 const searchQuery = ref('');
 const selectedIndex = ref(0);
-const isVisible = ref(false);
 const resultsContainer = ref(null);
 const selectedElement = ref(null);
 const os = platform();
@@ -127,11 +128,8 @@ const pasteSelectedItem = async () => {
   const selectedItem = filteredHistory.value[selectedIndex.value];
   if (selectedItem) {
     await writeText(selectedItem.content);
-    isVisible.value = false;
+    await hideApp();
-    await app.hide();
+    await invoke("simulate_paste");
-    await window.getCurrent().hide();
-    await window.getCurrent().setFocus();
-    await invoke('simulate_paste');
   }
 };
 
@@ -143,31 +141,32 @@ const truncateContent = (content) => {
 };
 
 onMounted(async () => {
-  const db = await Database.load('sqlite:data.db');
+  db.value = await Database.load('sqlite:data.db');
-  history.value = await db.select('SELECT * FROM history ORDER BY timestamp DESC');
+  await refreshHistory();
-
-  if (await isRegistered("MetaLeft+V")) {
-    await unregister("MetaLeft+V")
-  }
-
-  await register('MetaLeft+V', (event) => {
-    if (event.state === "MetaLeft+V") {
-      if (isVisible.value == true) {
-        app.hide()
-        isVisible.value = false;
-      } else {
-        app.show()
-        isVisible.value = true;
-        selectedIndex.value = 0;
-      }
-    }
-  });
 
   if (!await isEnabled()) {
     await enable()
   }
+
+  await listen('tauri://blur', hideApp);
 });
 
+const refreshHistory = async () => {
+  history.value = await db.value.select('SELECT * FROM history ORDER BY timestamp DESC');
+};
+
+const hideApp = async () => {
+  await app.hide();
+  await window.getCurrent().hide();
+};
+
+const showApp = async () => {
+  await refreshHistory();
+  await app.show();
+  await window.getCurrent().show();
+  selectedIndex.value = 0;
+};
+
 watch(selectedIndex, scrollToSelectedItem);
 </script>
 

assets/css/style.scss

@@ -90,7 +90,7 @@ body,
   flex-direction: column;
   padding-inline: 8px;
   padding-top: 14px;
-  padding-bottom: 8px;
+  padding-bottom: 49px;
   overflow-y: auto;
   overflow-x: hidden;
 
@@ -115,17 +115,27 @@ body,
 }
 
 .content {
-  position: fixed;
+  position: absolute;
   top: 53px;
   left: 284px;
   padding: 10px;
+  height: calc(100vh - 96px);
   padding-inline: 14px;
-  font-family: SFMonoRegular;
+  font-family: SFMonoRegular !important;
   font-size: 12px;
+  border-radius: 10px;
+  width: calc(100vw - 286px);
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  
+  div {
+    border-radius: 10px;
+    font-family: SFMonoRegular !important;
+  }
 }
 
 .bottom-bar {
-  height: 40px;
+  height: 41px;
   width: calc(100vw - 2px);
   backdrop-filter: blur(18px);
   background-color: rgba(46, 45, 43, 0.8);
@@ -140,6 +150,7 @@ body,
   padding-inline: 12px;
   align-items: center;
   font-size: 14px;
+  border-top: 1px solid $divider;
 
   p {
     color: $text2;

src-tauri/Cargo.lock

@@ -4078,6 +4078,7 @@ dependencies = [
  "gtk",
  "heck 0.5.0",
  "http",
+ "image 0.24.9",
  "jni",
  "libc",
  "log",

src-tauri/Cargo.toml

@@ -18,16 +18,16 @@ crate-type = ["staticlib", "cdylib", "rlib"]
 tauri-build = { version = "2.0.0-beta.18", features = [] }
 
 [dependencies]
-tauri = { version = "2.0.0-beta.23", features = ["unstable"] }
+tauri = { version = "2.0.0-beta.23", features = ["unstable", "tray-icon", "image-png"] }
 tauri-plugin-clipboard-manager = "2.1.0-beta.5"
 tauri-plugin-window-state = "2.0.0-beta.10"
 tauri-plugin-sql = {version = "2.0.0-beta.8", features = ["sqlite"] }
 tauri-plugin-global-shortcut = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
 tauri-plugin-autostart = "2.0.0-beta.8"
+tauri-plugin-os = "2.0.0-beta.7"
 sqlx = { version = "0.7.4", features = ["runtime-tokio-native-tls", "sqlite"] }
 serde = { version = "1.0", features = ["derive"] }
 tokio = { version = "1.0", features = ["full"] }
 serde_json = "1.0"
 rdev = "0.5.3"
 rand = "0.8"
-tauri-plugin-os = "2.0.0-beta.7"

src-tauri/capabilities/default.json

@@ -37,6 +37,8 @@
     "app:allow-app-show",
     "window:allow-hide",
     "window:allow-show",
-    "window:allow-set-focus"
+    "window:allow-set-focus",
+    "window:allow-is-focused",
+    "window:allow-is-visible"
   ]
 }

src-tauri/tauri.conf.json

@@ -25,7 +25,7 @@
         "center": true,
         "shadow": false,
         "transparent": true,
-        "visible": false
+        "skipTaskbar": true
       }
     ],
     "security": {