feat: create icon and make app system tray

README.md

@@ -7,3 +7,7 @@ It's simple, lightweight and easy to use.
 ## How To Pasta
 
 `cmd + Shift + V` , it's as easy as that.
+
+Download instructions coming soon.
+
+Build with ❤️

src-tauri/Cargo.toml

@@ -17,9 +17,11 @@ tauri-build = { version = "1.5", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.5", features = [ "macos-private-api", "api-all"] }
+tauri = { version = "1.5", features = [ "system-tray", "macos-private-api", "api-all"] }
 window-vibrancy = "0.4.0"
 tauri-plugin-clipboard = "0.6.0"
+tauri-plugin-positioner = { version = "1.0.4", features = ["system-tray"] }
+tauri-plugin-autostart = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
 
 [features]
 # by default Tauri runs in production mode

src-tauri/src/main.rs

@@ -1,12 +1,13 @@
-use tauri::Manager;
-use window_vibrancy::{apply_vibrancy, NSVisualEffectMaterial};
 use std::time::{SystemTime, UNIX_EPOCH};
+use tauri::{Manager, SystemTray, SystemTrayEvent, SystemTrayMenu};
+use tauri_plugin_positioner::{Position, WindowExt};
+use window_vibrancy::{apply_vibrancy, NSVisualEffectMaterial};
+use tauri_plugin_autostart::MacosLauncher;
 
 #[cfg_attr(
     all(not(debug_assertions), target_os = "windows"),
     windows_subsystem = "windows"
 )]
-
 #[tauri::command]
 fn on_button_clicked() -> String {
     let start = SystemTime::now();
@@ -18,20 +19,50 @@ fn on_button_clicked() -> String {
 }
 
 fn main() {
+    let system_tray_menu = SystemTrayMenu::new();
     let context = tauri::generate_context!();
     tauri::Builder::default()
+        .plugin(tauri_plugin_clipboard::init())
+        .plugin(tauri_plugin_positioner::init())
+        .plugin(tauri_plugin_autostart::init(MacosLauncher::LaunchAgent, Some(vec!["--flag1", "--flag2"])))
+        .system_tray(SystemTray::new().with_menu(system_tray_menu))
+        .on_system_tray_event(|app, event| {
+            tauri_plugin_positioner::on_tray_event(app, &event);
+            match event {
+                SystemTrayEvent::LeftClick {
+                    position: _,
+                    size: _,
+                    ..
+                } => {
+                    let window = app.get_window("main").unwrap();
+                    let _ = window.move_window(Position::TrayCenter);
+                    if window.is_visible().unwrap() {
+                        window.hide().unwrap();
+                    } else {
+                        window.show().unwrap();
+                        window.set_focus().unwrap();
+                    }
+                }
+                _ => {}
+            }
+        })
+        // .on_window_event(|event| match event.event() {
+        //     tauri::WindowEvent::Focused(is_focused) => {
+        //         if !is_focused {
+        //             event.window().hide().unwrap();
+        //         }
+        //     }
+        //     _ => {}
+        // })
         .setup(|app| {
             let window = app.get_window("main").unwrap();
 
-            // apply_acrylic(&window, Some((0, 0, 0, 10)));
-
             #[cfg(target_os = "macos")]
             apply_vibrancy(&window, NSVisualEffectMaterial::HudWindow, None, None)
                 .expect("Unsupported platform! 'apply_vibrancy' is only supported on macOS");
 
             Ok(())
         })
-        .plugin(tauri_plugin_clipboard::init())
         .invoke_handler(tauri::generate_handler![on_button_clicked])
         .run(context)
         .expect("error while running tauri application");

src-tauri/tauri.conf.json

@@ -62,13 +62,22 @@
     "windows": [
       {
         "fullscreen": false,
-        "resizable": true,
+        "resizable": false,
         "title": "Pasta",
         "width": 500,
-        "height": 350,
+        "height": 600,
         "transparent": true,
-        "alwaysOnTop": false
+        "alwaysOnTop": false, 
+        "decorations": false, 
+        "hiddenTitle": true, 
+        "focus": false, 
+        "visible": false
       }
-    ]
+    ],
+    "systemTray": {
+      "iconPath": "icons/Square310x310Logo.png",
+      "iconAsTemplate": true,
+      "menuOnLeftClick": false
+    }
   }
 }

src/pages/index.tsx

@@ -1,16 +1,12 @@
-import { Search } from "@/components/Search";
 import { TextCard } from "@/components/TextCard";
 import { useClipStore } from "@/store/clips.store";
 import { UnlistenFn } from "@tauri-apps/api/event";
-import { CommandEmpty, CommandInput, CommandList } from "cmdk";
+import { CommandInput } from "cmdk";
 import _ from "lodash";
 import type { NextPage } from "next"
-import { useEffect, useState } from "react"
+import { useEffect } from "react"
 import {
   listenToMonitorStatusUpdate,
-  onClipboardUpdate,
-  onFilesUpdate,
-  onImageUpdate,
   onTextUpdate,
   startListening,
 } from "tauri-plugin-clipboard-api";
@@ -47,9 +43,9 @@ const Home: NextPage = () => {
   }, []);
 
   return (
-    <div className="flex h-96">
+    <div className="flex h-96 arrow">
       <main className="w-full overflow-auto overflow-y-auto">
-        <CommandInput placeholder="Type a command or search..." />
+
         {/* <CommandList>
           <CommandEmpty>No Result found.</CommandEmpty>
           {
@@ -62,13 +58,13 @@ const Home: NextPage = () => {
           }
         </CommandList> */}
         {
-            clips.reverse().map((clip, index) => {
-              return (
-                <TextCard text={clip} index={index} key={index} />
-              )
-            }
+          clips?.reverse()?.map((clip, index) => {
+            return (
+              <TextCard text={clip} index={index} key={index} />
             )
           }
+          )
+        }
       </main>
     </div>
   )

src/styles/globals.css

@@ -14,4 +14,31 @@ html, body {
   padding: 0;
   box-sizing: border-box;
   background: transparent;
+}
+
+.arrow {
+  position: relative;
+  padding: 12px 0;
+}
+
+.arrow:before {
+  content: '';
+  height: 0;
+  width: 0;
+  border-width: 0 8px 12px 8px;
+  border-style: solid;
+  border-color: transparent transparent #2f2f2f transparent;
+  position: absolute;
+  top: 0px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+@media (prefers-color-scheme: dark) {
+  .container {
+    border-radius: 7px;
+    padding: 10px;
+    color: #f6f6f6;
+    background-color: #2f2f2f;
+  }
 }