Update README.md

chore(deps): bump ring from 0.17.8 to 0.17.14 in /src-tauri

.github/scripts/macOS.sh

@@ -0,0 +1,40 @@
+#!/bin/bash
+
+if [ -f .env ]; then
+    export $(cat .env | grep -v '^#' | xargs)
+fi
+
+set -e
+
+required_vars=("APPLE_CERTIFICATE" "APPLE_CERTIFICATE_PASSWORD" "APPLE_ID" "APPLE_ID_PASSWORD" "KEYCHAIN_PASSWORD" "APP_BUNDLE_ID")
+for var in "${required_vars[@]}"; do
+    if [ -z "${!var}" ]; then
+        exit 1
+    fi
+done
+
+bun run tauri build
+
+rm -f certificate.p12
+echo "$APPLE_CERTIFICATE" | base64 --decode > certificate.p12 2>/dev/null
+security import certificate.p12 -P "$APPLE_CERTIFICATE_PASSWORD" -A 2>/dev/null
+
+SIGNING_IDENTITY=$(security find-identity -v -p codesigning | grep "Apple Development" | head -1 | awk -F '"' '{print $2}')
+
+if [ -z "$SIGNING_IDENTITY" ]; then
+    exit 1
+fi
+
+codesign --force --options runtime --sign "$SIGNING_IDENTITY" src-tauri/target/release/bundle/macos/*.app 2>/dev/null
+
+rm -f certificate.p12
+
+hdiutil create -volname "Qopy" -srcfolder src-tauri/target/release/bundle/dmg -ov -format UDZO Qopy.dmg
+
+codesign --force --sign "$APPLE_CERTIFICATE" Qopy.dmg 2>/dev/null
+
+xcrun notarytool submit Qopy.dmg --apple-id "$APPLE_ID" --password "$APPLE_ID_PASSWORD" --team-id "$APPLE_CERTIFICATE" --wait
+
+xcrun stapler staple Qopy.dmg
+
+exit 0

.github/workflows/build.yml

@@ -22,14 +22,15 @@ jobs:
 
   build-macos:
     needs: prepare
+    runs-on: macos-latest
+    timeout-minutes: 30
     strategy:
       matrix:
         include:
           - args: "--target aarch64-apple-darwin"
-            arch: "silicon"
+            arch: "arm64"
           - args: "--target x86_64-apple-darwin"
-            arch: "intel"
+            arch: "x64"
-    runs-on: macos-latest
     env:
       APPLE_ID: ${{ secrets.APPLE_ID }}
       APPLE_ID_PASSWORD: ${{ secrets.APPLE_ID_PASSWORD }}
@@ -39,7 +40,7 @@ jobs:
       - name: Redact Sensitive Information
         run: |
           function redact_output {
-            sed -e "s/${{ secrets.REDACT_PATTERN }}/REDACTED/g"
+            sed -e "s/${{ secrets.APPLE_ID }}/REDACTED/g;s/${{ secrets.APPLE_ID_PASSWORD }}/REDACTED/g;s/${{ secrets.APPLE_CERTIFICATE }}/REDACTED/g;s/${{ secrets.APPLE_CERTIFICATE_PASSWORD }}/REDACTED/g;s/${{ secrets.KEYCHAIN_PASSWORD }}/REDACTED/g;s/${{ secrets.PAT }}/REDACTED/g;s/${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}/REDACTED/g"
           }
           exec > >(redact_output) 2>&1
       - uses: actions/setup-node@v4
@@ -71,6 +72,7 @@ jobs:
           security create-keychain -p "$KEYCHAIN_PASSWORD" build.keychain
           security default-keychain -s build.keychain
           security unlock-keychain -p "$KEYCHAIN_PASSWORD" build.keychain
+          security set-keychain-settings -lut 7200 build.keychain
           security import certificate.p12 -k build.keychain -P "$APPLE_CERTIFICATE_PASSWORD" -T /usr/bin/codesign
           security set-key-partition-list -S apple-tool:,apple:,codesign: -s -k "$KEYCHAIN_PASSWORD" build.keychain
           security find-identity -v -p codesigning build.keychain
@@ -85,7 +87,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
           APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
-          TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
+          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
           TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
           APPLE_SIGNING_IDENTITY: ${{ env.CERT_ID }}
         with:
@@ -94,24 +96,31 @@ jobs:
         if: failure()
         run: |
           echo "Attempting manual signing:"
-          codesign --force --options runtime --sign "$CERT_ID" --entitlements src-tauri/entitlements.plist src-tauri/target/aarch64-apple-darwin/release/bundle/macos/Qopy.app
+          timeout 300 codesign --force --options runtime --sign "$CERT_ID" --entitlements src-tauri/entitlements.plist src-tauri/target/${{ matrix.args == '--target aarch64-apple-darwin' && 'aarch64-apple-darwin' || 'x86_64-apple-darwin' }}/release/bundle/macos/Qopy.app
           echo "Verifying signature:"
-          codesign -dv --verbose=4 src-tauri/target/aarch64-apple-darwin/release/bundle/macos/Qopy.app | sed 's/.*Authority=.*/Authority=REDACTED/'
+          codesign -dv --verbose=4 "src-tauri/target/${{ matrix.args == '--target aarch64-apple-darwin' && 'aarch64-apple-darwin' || 'x86_64-apple-darwin' }}/release/bundle/macos/Qopy.app" | sed 's/.*Authority=.*/Authority=REDACTED/'
+      - name: Set architecture label
+        run: |
+          if [[ "${{ matrix.args }}" == "--target aarch64-apple-darwin" ]]; then
+            echo "ARCH_LABEL=aarch64-apple-darwin" >> $GITHUB_ENV
+          else
+            echo "ARCH_LABEL=x86_64-apple-darwin" >> $GITHUB_ENV
+          fi
       - name: Rename and Publish macOS Artifacts
         run: |
-          mv src-tauri/target/${{ matrix.args == '--target aarch64-apple-darwin' && 'aarch64-apple-darwin' || 'x86_64-apple-darwin' }}/release/bundle/dmg/*.dmg src-tauri/target/${{ matrix.args == '--target aarch64-apple-darwin' && 'aarch64-apple-darwin' || 'x86_64-apple-darwin' }}/release/bundle/dmg/Qopy-${{ needs.prepare.outputs.version }}_${{ matrix.arch }}.dmg
+          mv src-tauri/target/${{ env.ARCH_LABEL }}/release/bundle/dmg/*.dmg src-tauri/target/${{ env.ARCH_LABEL }}/release/bundle/dmg/Qopy-${{ needs.prepare.outputs.version }}_${{ matrix.arch }}.dmg
-          mv src-tauri/target/${{ matrix.args == '--target aarch64-apple-darwin' && 'aarch64-apple-darwin' || 'x86_64-apple-darwin' }}/release/bundle/macos/*.app.tar.gz src-tauri/target/${{ matrix.args == '--target aarch64-apple-darwin' && 'aarch64-apple-darwin' || 'x86_64-apple-darwin' }}/release/bundle/macos/Qopy-${{ needs.prepare.outputs.version }}_${{ matrix.arch }}.app.tar.gz
+          mv src-tauri/target/${{ env.ARCH_LABEL }}/release/bundle/macos/*.app.tar.gz src-tauri/target/${{ env.ARCH_LABEL }}/release/bundle/macos/Qopy-${{ needs.prepare.outputs.version }}_${{ matrix.arch }}.app.tar.gz
-          mv src-tauri/target/${{ matrix.args == '--target aarch64-apple-darwin' && 'aarch64-apple-darwin' || 'x86_64-apple-darwin' }}/release/bundle/macos/*.app.tar.gz.sig src-tauri/target/${{ matrix.args == '--target aarch64-apple-darwin' && 'aarch64-apple-darwin' || 'x86_64-apple-darwin' }}/release/bundle/macos/Qopy-${{ needs.prepare.outputs.version }}_${{ matrix.arch }}.app.tar.gz.sig
+          mv src-tauri/target/${{ env.ARCH_LABEL }}/release/bundle/macos/*.app.tar.gz.sig src-tauri/target/${{ env.ARCH_LABEL }}/release/bundle/macos/Qopy-${{ needs.prepare.outputs.version }}_${{ matrix.arch }}.app.tar.gz.sig
       - uses: actions/upload-artifact@v4
         with:
           name: macos-dmg-${{ matrix.arch }}
-          path: src-tauri/target/${{ matrix.args == '--target aarch64-apple-darwin' && 'aarch64-apple-darwin' || 'x86_64-apple-darwin' }}/release/bundle/dmg/*.dmg
+          path: "src-tauri/target/${{ env.ARCH_LABEL }}/release/bundle/dmg/*.dmg"
       - uses: actions/upload-artifact@v4
         with:
           name: updater-macos-${{ matrix.arch }}
           path: |
-            src-tauri/target/${{ matrix.args == '--target aarch64-apple-darwin' && 'aarch64-apple-darwin' || 'x86_64-apple-darwin' }}/release/bundle/macos/*.app.tar.gz
+            src-tauri/target/${{ env.ARCH_LABEL }}/release/bundle/macos/*.app.tar.gz
-            src-tauri/target/${{ matrix.args == '--target aarch64-apple-darwin' && 'aarch64-apple-darwin' || 'x86_64-apple-darwin' }}/release/bundle/macos/*.app.tar.gz.sig
+            src-tauri/target/${{ env.ARCH_LABEL }}/release/bundle/macos/*.app.tar.gz.sig
 
   build-windows:
     needs: prepare

.github/workflows/release.yml

@@ -79,7 +79,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
           APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
-          TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
+          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
           TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
         with:
           args: ${{ matrix.args }}
@@ -233,31 +233,41 @@ jobs:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
+          token: ${{ secrets.PAT }}
+
+      - name: Check if release already exists
+        id: check_release
+        run: |
+          VERSION="${{ needs.prepare.outputs.version }}"
+          RELEASE_EXISTS=$(gh release view v$VERSION --json id --jq '.id' 2>/dev/null || echo "")
+          if [ -n "$RELEASE_EXISTS" ]; then
+            echo "SKIP_RELEASE=true" >> $GITHUB_ENV
+          else
+            echo "SKIP_RELEASE=false" >> $GITHUB_ENV
+          fi
+        env:
+          GITHUB_TOKEN: ${{ secrets.PAT }}
 
       - name: Download all artifacts
+        if: env.SKIP_RELEASE == 'false'
         uses: actions/download-artifact@v4
         with:
           path: artifacts
 
+      - name: Update CHANGELOG
+        if: env.SKIP_RELEASE == 'false'
+        id: changelog
+        uses: requarks/changelog-action@v1
+        with:
+          token: ${{ github.token }}
+          tag: ${{ github.ref_name }}
+
       - name: Generate Release Body
+        if: env.SKIP_RELEASE == 'false'
         id: release_body
         run: |
           VERSION="${{ needs.prepare.outputs.version }}"
 
-          # Get the most recent release tag (v* tags only)
-          LAST_TAG=$(git describe --match "v*" --abbrev=0 --tags `git rev-list --tags --skip=1 --max-count=1` 2>/dev/null || echo "")
-          
-          if [ -n "$LAST_TAG" ]; then
-            echo "Debug: Found last release tag: $LAST_TAG"
-            CHANGES=$(git log ${LAST_TAG}..HEAD --pretty=format:"- %s")
-          else
-            echo "Debug: No previous release tag found, using first commit"
-            CHANGES=$(git log --pretty=format:"- %s")
-          fi
-          
-          echo "Debug: Changelog content:"
-          echo "$CHANGES"
-          
           # Calculate hashes with corrected paths
           WINDOWS_ARM_HASH=$(sha256sum "artifacts/windows-arm64-binaries/Qopy-${VERSION}_arm64.msi" | awk '{ print $1 }')
           WINDOWS_64_HASH=$(sha256sum "artifacts/windows-x64-binaries/Qopy-${VERSION}_x64.msi" | awk '{ print $1 }')
@@ -278,9 +288,8 @@ jobs:
           echo "Red Hat: $REDHAT_HASH"
 
           RELEASE_BODY=$(cat <<-EOF
-          ## ♻️ Changelog
 
-          $CHANGES
+          ${{ needs.create-release.outputs.changelog }}
 
           ## ⬇️ Downloads
           
@@ -299,9 +308,10 @@ jobs:
           echo "EOF" >> $GITHUB_ENV
 
       - name: Create Release
+        if: env.SKIP_RELEASE == 'false'
         uses: softprops/action-gh-release@v2
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.PAT }}
         with:
           draft: true
           tag_name: v${{ needs.prepare.outputs.version }}

.gitignore

@@ -25,3 +25,4 @@ logs
 bun.lockb
 .gitignore
 .vscode
+bun.lock

GET_STARTED.md

@@ -8,11 +8,11 @@ All the data of Qopy is stored inside of a SQLite database.
 |------------------|-----------------------------------------------------------------|
 | Windows          | `C:\Users\USERNAME\AppData\Roaming\net.pandadev.qopy`           |
 | macOS            | `/Users/USERNAME/Library/Application Support/net.pandadev.qopy` |
-| Linux            | `` |
+| Linux            | `/home/USERNAME/.local/share/net.pandadev.qopy` |
 
 ## Disable Windows+V for default clipboard manager
 
-https://github.com/user-attachments/assets/723f9e07-3190-46ec-9bb7-15dfc112f620
+<video src="https://github.com/user-attachments/assets/723f9e07-3190-46ec-9bb7-15dfc112f620" controls title="Disable Windows+V for default clipboard manager"></video>
 
 To disable the default clipboard manager popup from windows open Command prompt and run this command
 

LICENSE

@@ -1,5 +1,5 @@
-                    GNU GENERAL PUBLIC LICENSE
+                    GNU AFFERO GENERAL PUBLIC LICENSE
-                       Version 3, 29 June 2007
+                       Version 3, 19 November 2007
 
  Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
  Everyone is permitted to copy and distribute verbatim copies
@@ -7,17 +7,15 @@
 
                             Preamble
 
-  The GNU General Public License is a free, copyleft license for
+  The GNU Affero General Public License is a free, copyleft license for
-software and other kinds of works.
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
 
   The licenses for most software and other practical works are designed
 to take away your freedom to share and change the works.  By contrast,
-the GNU General Public License is intended to guarantee your freedom to
+our General Public Licenses are intended to guarantee your freedom to
 share and change all versions of a program--to make sure it remains free
-software for all its users.  We, the Free Software Foundation, use the
+software for all its users.
-GNU General Public License for most of our software; it applies also to
-any other work released this way by its authors.  You can apply it to
-your programs, too.
 
   When we speak of free software, we are referring to freedom, not
 price.  Our General Public Licenses are designed to make sure that you
@@ -26,44 +24,34 @@ them if you wish), that you receive source code or can get it if you
 want it, that you can change the software or use pieces of it in new
 free programs, and that you know you can do these things.
 
-  To protect your rights, we need to prevent others from denying you
+  Developers that use our General Public Licenses protect your rights
-these rights or asking you to surrender the rights.  Therefore, you have
+with two steps: (1) assert copyright on the software, and (2) offer
-certain responsibilities if you distribute copies of the software, or if
+you this License which gives you legal permission to copy, distribute
-you modify it: responsibilities to respect the freedom of others.
+and/or modify the software.
 
-  For example, if you distribute copies of such a program, whether
+  A secondary benefit of defending all users' freedom is that
-gratis or for a fee, you must pass on to the recipients the same
+improvements made in alternate versions of the program, if they
-freedoms that you received.  You must make sure that they, too, receive
+receive widespread use, become available for other developers to
-or can get the source code.  And you must show them these terms so they
+incorporate.  Many developers of free software are heartened and
-know their rights.
+encouraged by the resulting cooperation.  However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
 
-  Developers that use the GNU GPL protect your rights with two steps:
+  The GNU Affero General Public License is designed specifically to
-(1) assert copyright on the software, and (2) offer you this License
+ensure that, in such cases, the modified source code becomes available
-giving you legal permission to copy, distribute and/or modify it.
+to the community.  It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server.  Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
 
-  For the developers' and authors' protection, the GPL clearly explains
+  An older license, called the Affero General Public License and
-that there is no warranty for this free software.  For both users' and
+published by Affero, was designed to accomplish similar goals.  This is
-authors' sake, the GPL requires that modified versions be marked as
+a different license, not a version of the Affero GPL, but Affero has
-changed, so that their problems will not be attributed erroneously to
+released a new version of the Affero GPL which permits relicensing under
-authors of previous versions.
+this license.
-
-  Some devices are designed to deny users access to install or run
-modified versions of the software inside them, although the manufacturer
-can do so.  This is fundamentally incompatible with the aim of
-protecting users' freedom to change the software.  The systematic
-pattern of such abuse occurs in the area of products for individuals to
-use, which is precisely where it is most unacceptable.  Therefore, we
-have designed this version of the GPL to prohibit the practice for those
-products.  If such problems arise substantially in other domains, we
-stand ready to extend this provision to those domains in future versions
-of the GPL, as needed to protect the freedom of users.
-
-  Finally, every program is threatened constantly by software patents.
-States should not allow patents to restrict development and use of
-software on general-purpose computers, but in those that do, we wish to
-avoid the special danger that patents applied to a free program could
-make it effectively proprietary.  To prevent this, the GPL assures that
-patents cannot be used to render the program non-free.
 
   The precise terms and conditions for copying, distribution and
 modification follow.
@@ -72,7 +60,7 @@ modification follow.
 
   0. Definitions.
 
-  "This License" refers to version 3 of the GNU General Public License.
+  "This License" refers to version 3 of the GNU Affero General Public License.
 
   "Copyright" also means copyright-like laws that apply to other kinds of
 works, such as semiconductor masks.
@@ -549,35 +537,45 @@ to collect a royalty for further conveying from those to whom you convey
 the Program, the only way you could satisfy both those terms and this
 License would be to refrain entirely from conveying the Program.
 
-  13. Use with the GNU Affero General Public License.
+  13. Remote Network Interaction; Use with the GNU General Public License.
+
+  Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software.  This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
 
   Notwithstanding any other provision of this License, you have
 permission to link or combine any covered work with a work licensed
-under version 3 of the GNU Affero General Public License into a single
+under version 3 of the GNU General Public License into a single
 combined work, and to convey the resulting work.  The terms of this
 License will continue to apply to the part which is the covered work,
-but the special requirements of the GNU Affero General Public License,
+but the work with which it is combined will remain governed by version
-section 13, concerning interaction through a network will apply to the
+3 of the GNU General Public License.
-combination as such.
 
   14. Revised Versions of this License.
 
   The Free Software Foundation may publish revised and/or new versions of
-the GNU General Public License from time to time.  Such new versions will
+the GNU Affero General Public License from time to time.  Such new versions
-be similar in spirit to the present version, but may differ in detail to
+will be similar in spirit to the present version, but may differ in detail to
 address new problems or concerns.
 
   Each version is given a distinguishing version number.  If the
-Program specifies that a certain numbered version of the GNU General
+Program specifies that a certain numbered version of the GNU Affero General
 Public License "or any later version" applies to it, you have the
 option of following the terms and conditions either of that numbered
 version or of any later version published by the Free Software
 Foundation.  If the Program does not specify a version number of the
-GNU General Public License, you may choose any version ever published
+GNU Affero General Public License, you may choose any version ever published
 by the Free Software Foundation.
 
   If the Program specifies that a proxy can decide which future
-versions of the GNU General Public License can be used, that proxy's
+versions of the GNU Affero General Public License can be used, that proxy's
 public statement of acceptance of a version permanently authorizes you
 to choose that version for the Program.
 
@@ -635,40 +633,29 @@ the "copyright" line and a pointer to where the full notice is found.
     Copyright (C) <year>  <name of author>
 
     This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
+    it under the terms of the GNU Affero General Public License as published
-    the Free Software Foundation, either version 3 of the License, or
+    by the Free Software Foundation, either version 3 of the License, or
     (at your option) any later version.
 
     This program is distributed in the hope that it will be useful,
     but WITHOUT ANY WARRANTY; without even the implied warranty of
     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
+    GNU Affero General Public License for more details.
 
-    You should have received a copy of the GNU General Public License
+    You should have received a copy of the GNU Affero General Public License
     along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 Also add information on how to contact you by electronic and paper mail.
 
-  If the program does terminal interaction, make it output a short
+  If your software can interact with users remotely through a computer
-notice like this when it starts in an interactive mode:
+network, you should also make sure that it provides a way for users to
-
+get its source.  For example, if your program is a web application, its
-    <program>  Copyright (C) <year>  <name of author>
+interface could display a "Source" link that leads users to an archive
-    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+of the code.  There are many ways you could offer source, and different
-    This is free software, and you are welcome to redistribute it
+solutions will be better for different programs; see section 13 for the
-    under certain conditions; type `show c' for details.
+specific requirements.
-
-The hypothetical commands `show w' and `show c' should show the appropriate
-parts of the General Public License.  Of course, your program's commands
-might be different; for a GUI interface, you would use an "about box".
 
   You should also get your employer (if you work as a programmer) or school,
 if any, to sign a "copyright disclaimer" for the program, if necessary.
-For more information on this, and how to apply and follow the GNU GPL, see
+For more information on this, and how to apply and follow the GNU AGPL, see
 <https://www.gnu.org/licenses/>.
-
-  The GNU General Public License does not permit incorporating your program
-into proprietary programs.  If your program is a subroutine library, you
-may consider it more useful to permit linking proprietary applications with
-the library.  If this is what you want to do, use the GNU Lesser General
-Public License instead of this License.  But first, please read
-<https://www.gnu.org/licenses/why-not-lgpl.html>.

README.md

@@ -21,7 +21,7 @@ The fixed and simple clipboard manager for both Windows and Linux.
   Linux (rpm)
 </a>
 •
-<a href="https://github.com/0PandaDEV/Qopy/releases/download/v0.3.1/Qopy-0.3.1.">
+<a href="https://github.com/0PandaDEV/Qopy/releases/download/v0.3.1/Qopy-0.3.1.AppImage">
   Linux (AppImage)
 </a>
 <br>
@@ -46,10 +46,9 @@ The fixed and simple clipboard manager for both Windows and Linux.
 
 <details>
   <summary><kbd>Star History</kbd></summary>
-  <a href="https://star-history.com/#0pandadev/qopy&Date">
+  <a href="https://starchart.cc/0PandaDEV/Qopy">
     <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=0pandadev/qopy&theme=dark&type=Date">
+      <img width="100%" src="https://starchart.cc/0PandaDEV/Qopy.svg?variant=adaptive">
-      <img width="100%" src="https://api.star-history.com/svg?repos=0pandadev/qopy&type=Date">
     </picture>
   </a>
 </details>
@@ -61,9 +60,9 @@ The fixed and simple clipboard manager for both Windows and Linux.
 Qopy is a fixed clipboard manager designed as a simple alternative to the standard clipboard on Windows. It aims to provide a faster, more reliable experience while providing an extensive set of features compared to its Windows counterpart.
 
 ## 🚧 Roadmap
-- [ ] [Setup guide](https://github.com/0PandaDEV/Qopy/blob/main/GET_STARTED.md)
+- [x] [Setup guide](https://github.com/0PandaDEV/Qopy/blob/main/GET_STARTED.md)
 - [ ] Sync Clipboard across devices https://github.com/0PandaDEV/Qopy/issues/8
-- [ ] Settings https://github.com/0PandaDEV/Qopy/issues/2
+- [x] Settings https://github.com/0PandaDEV/Qopy/issues/2
 - [x] Metadata for copied items https://github.com/0PandaDEV/Qopy/issues/5
 - [ ] Code highlighting https://github.com/0PandaDEV/Qopy/issues/7
 - [ ] Streamshare integration https://github.com/0PandaDEV/Qopy/issues/4
@@ -95,13 +94,13 @@ You can use GitHub Codespaces for online development:
 
 [![][codespaces-shield]][codespaces-link]
 
-Or to get Qopy set up on your machine, you'll need to have Rust and pnpm installed. Then, follow these steps:
+Or to get Qopy set up on your machine, you'll need to have Rust and bun installed. Then, follow these steps:
 
 ```zsh
 git clone https://github.com/0pandadev/Qopy.git
 cd Qopy
-pnpm i
+bun i
-pnpm dev
+bun dev
 ```
 
 > \[!TIP]
@@ -113,7 +112,7 @@ pnpm dev
 To build for production simply execute:
 
 ```zsh
-pnpm build
+bun build
 ```
 
 > \[!NOTE]
@@ -124,7 +123,7 @@ pnpm build
 
 ## 📝 License
 
-Qopy is licensed under GPL-3. See the [LICENSE file](./LICENCE) for more information.
+Qopy is licensed under AGPL-3. See the [LICENSE file](./LICENCE) for more information.
 
 [codespaces-link]: https://codespaces.new/0pandadev/Qopy
 [codespaces-shield]: https://github.com/codespaces/badge.svg

README_ru.md

@@ -0,0 +1,130 @@
+<div align="center">
+
+<img align="center" width="128px" src="src-tauri/icons/icon.png" />
+<h1 align="center"><b>Qopy</b></h1>
+
+Простой и исправленный менеджер буфера обмена как для Windows, так и для Linux.
+
+<a href="https://github.com/0PandaDEV/Qopy/releases/download/v0.3.1/Qopy-0.3.1_x64.msi">
+  <img src="./public/windows.png"> Windows (x64)
+</a>
+•
+<a href="https://github.com/0PandaDEV/Qopy/releases/download/v0.3.1/Qopy-0.3.1_arm64.msi">
+  Windows (arm64)
+</a>
+<br>
+<a href="https://github.com/0PandaDEV/Qopy/releases/download/v0.3.1/Qopy-0.3.1.deb">
+  <img src="./public/linux.png"> Linux (deb)
+</a>
+•
+<a href="https://github.com/0PandaDEV/Qopy/releases/download/v0.3.1/Qopy-0.3.1.rpm">
+  Linux (rpm)
+</a>
+•
+<a href="https://github.com/0PandaDEV/Qopy/releases/download/v0.3.1/Qopy-0.3.1.AppImage">
+  Linux (AppImage)
+</a>
+<br>
+<a href="https://github.com/0PandaDEV/Qopy/releases/download/v0.3.1/Qopy-0.3.1_silicon.dmg">
+  <img src="./public/apple.png"> macOS (Silicon)
+</a>
+•
+<a href="https://github.com/0PandaDEV/Qopy/releases/download/v0.3.1/Qopy-0.3.1_intel.dmg">
+  macOS (Intel)
+</a>
+<br>
+<br>
+<sup>Тестовые версии можно найти <a href="https://github.com/0PandaDEV/qopy/actions/workflows/build.yml">тут</a> </sup>
+
+</div>
+
+[discord »](https://discord.gg/invite/Y7SbYphVw9)
+
+> \[!IMPORTANT]
+>
+> **Нажав на звезду**, Вы будете получать все уведомления от Github о новых версиях без задержек  \~ ⭐️
+
+<details>
+  <summary><kbd>Star History</kbd></summary>
+  <a href="https://star-history.com/#0pandadev/qopy&Date">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=0pandadev/qopy&theme=dark&type=Date">
+      <img width="100%" src="https://api.star-history.com/svg?repos=0pandadev/qopy&type=Date">
+    </picture>
+  </a>
+</details>
+
+[![wakatime](https://wakatime.com/badge/user/018ce503-097f-4057-9599-db20b190920c/project/fe76359d-56c2-4a13-8413-55207b6ad298.svg?style=flat_square)](https://wakatime.com/badge/user/018ce503-097f-4057-9599-db20b190920c/project/fe76359d-56c2-4a13-8413-55207b6ad298)
+
+## 📋 Что такое Qopy
+
+Qopy представляет собой исправленный менеджер буфера обмена, разработанный как простая альтернатива стандартному буферу обмена в Windows. Его цель - обеспечить более быструю и надежную работу, предоставляя при этом обширный набор функций по сравнению со своим аналогом в Windows.
+
+## 🚧 Дорожная карта
+- [ ] [Руководство по установке](https://github.com/0PandaDEV/Qopy/blob/main/GET_STARTED.md)
+- [ ] Синхронизация буфера обмена между устройствами https://github.com/0PandaDEV/Qopy/issues/8
+- [ ] Настройки https://github.com/0PandaDEV/Qopy/issues/2
+- [x] Метаданные для скопированных элементов https://github.com/0PandaDEV/Qopy/issues/5
+- [ ] Выделение кода https://github.com/0PandaDEV/Qopy/issues/7
+- [ ] Интеграция Streamshare https://github.com/0PandaDEV/Qopy/issues/4
+- [ ] Фильтр типов контента https://github.com/0PandaDEV/Qopy/issues/16
+- [ ] Превью для скопированных файлов https://github.com/0PandaDEV/Qopy/issues/15
+- [ ] Конвертация файлов в другие форматы https://github.com/0PandaDEV/Qopy/issues/17
+- [x] Опция для пользовательской привязки клавиш https://github.com/0PandaDEV/Qopy/issues/3
+- [x] Поддержка macOS https://github.com/0PandaDEV/Qopy/issues/13
+
+<sup>Если у вас есть идеи для функций, которые можно добавить в будущем, пожалуйста, напишите об этом [здесь](https://github.com/0pandadev/Qopy/issues).</sup>
+
+## 📦 Концепты
+
+Здесь вы можете увидеть несколько концепцов, которые могут быть не реализованы:
+
+![Clipboard](https://github.com/user-attachments/assets/45a44a13-6ebd-4f2d-84d2-55178e303a54)
+![Settings](https://github.com/user-attachments/assets/bff5456a-f413-4e62-a43d-22c8e453aa87)
+
+
+## ❤️ Пожертвования и Поддержка
+
+Qopy имеет открытый исходный код и бесплатен для использования. Я ценю пожертвования в поддержку постоянной разработки и улучшений. Ваши взносы являются добровольными и помогают мне улучшить приложение для всех.
+
+<a href="https://buymeacoffee.com/pandadev_"><img src="https://img.shields.io/badge/Buy_Me_A_Coffee-FFDD00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black"/></a>
+
+## ⌨️ Локальная разработка
+
+Вы можете использовать GitHub Codespaces для онлайн-разработки:
+
+[![][codespaces-shield]][codespaces-link]
+
+Или, чтобы настроить Qopy на вашем компьютере, вам необходимо установить Rust и bun. Затем выполните следующие действия:
+
+```zsh
+git clone https://github.com/0pandadev/Qopy.git
+cd Qopy
+bun i
+bun dev
+```
+
+> \[!Tip] 
+>
+> Если вы заинтересованы во внесении кода, не стесняйтесь смотреть здесь [Issues](https://github.com/0pandadev/Qopy/issues).
+
+## 🔨 Сборка для продакшена
+
+Чтобы собрать для продакшена,просто выполните:
+
+```zsh
+bun build
+```
+
+> \[!NOTE]
+>
+> Не волнуйтесь, в конце произойдет сбой, потому что он не сможет обнаружить Приватный ключ, но установочные файлы будут сгенерированы независимо от этого.
+> 
+> Вы можете найти его в `src-tauri/target/release/bundle`.
+
+## 📝 Лицензия
+
+Qopy лицензирован под GPL-3. Смотрите [LICENSE file](./LICENCE) для дополнительной информации.
+
+[codespaces-link]: https://codespaces.new/0pandadev/Qopy
+[codespaces-shield]: https://github.com/codespaces/badge.svg

app.vue

@@ -1,70 +1,95 @@
 <template>
-  <div style="pointer-events: auto;">
+  <div>
+    <Noise />
     <NuxtPage />
   </div>
 </template>
 
 <script setup lang="ts">
-import { listen } from '@tauri-apps/api/event'
+import { listen } from "@tauri-apps/api/event";
-import { app, window } from '@tauri-apps/api';
+import { app, window } from "@tauri-apps/api";
-import { onMounted } from 'vue'
+import { disable, enable } from "@tauri-apps/plugin-autostart";
+import { onMounted } from "vue";
+import { keyboard } from "wrdu-keyboard";
+
+const { $settings } = useNuxtApp();
+keyboard.init();
 
 onMounted(async () => {
-  await listen('change_keybind', async () => {
+  await listen("settings", async () => {
-    console.log("change_keybind");
+    await navigateTo("/settings");
-    await navigateTo('/settings')
     await app.show();
     await window.getCurrentWindow().show();
-  })
+  });
 
-  await listen('main_route', async () => {
+  if ((await $settings.getSetting("autostart")) === "true") {
-    console.log("main_route");
+    await enable();
-    await navigateTo('/')
+  } else {
-  })
+    await disable();
-})
+  }
+
+  await listen("main_route", async () => {
+    await navigateTo("/");
+  });
+});
 </script>
 
 <style lang="scss">
 @font-face {
   font-family: SFRoundedRegular;
   font-display: swap;
-  src: url("~/assets/fonts/SFRoundedRegular.otf") format("opentype");
+  src: url("/fonts/SFRoundedRegular.otf") format("opentype");
 }
 
 @font-face {
   font-family: SFRoundedMedium;
   font-display: swap;
-  src: url("~/assets/fonts/SFRoundedMedium.otf") format("opentype");
+  src: url("/fonts/SFRoundedMedium.otf") format("opentype");
 }
 
 @font-face {
   font-family: SFRoundedSemiBold;
   font-display: swap;
-  src: url("~/assets/fonts/SFRoundedSemiBold.otf") format("opentype");
+  src: url("/fonts/SFRoundedSemiBold.otf") format("opentype");
 }
 
 @font-face {
   font-family: CommitMono;
   font-display: swap;
-  src: url("~/assets/fonts/CommitMono.woff2") format("woff2");
+  src: url("/fonts/CommitMono.woff2") format("woff2");
+}
+
+:root {
+  --background: #2e2d2b;
+  --accent: #feb453;
+  --border: #ffffff0d;
+
+  --text: #e5dfd5;
+  --text-secondary: #ada9a1;
+  --text-muted: #78756f;
+
+  --sidebar-width: 286px;
+  --bottom-bar-height: 39px;
+  --info-panel-height: 160px;
+  --content-view-height: calc(
+    100% - var(--search-height) - var(--info-panel-height) -
+      var(--bottom-bar-height)
+  );
 }
 
 * {
   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;
-  position: relative;
-  z-index: 1;
 
-  --os-handle-bg: #ADA9A1;
+  --os-handle-bg: #ada9a1;
-  --os-handle-bg-hover: #78756F;
+  --os-handle-bg-hover: #78756f;
-  --os-handle-bg-active: #78756F;
+  --os-handle-bg-active: #78756f;
 }
 
 html,
@@ -72,8 +97,8 @@ body {
   background-color: transparent;
   width: 750px;
   height: 474px;
-  user-select: none !important;
+  z-index: -1;
-  pointer-events: none !important;
+  font-size: 14px;
 }
 
 .os-scrollbar-horizontal {

assets/css/index.scss

@@ -1,362 +0,0 @@
-$primary: #2e2d2b;
-$accent: #feb453;
-$divider: #ffffff0d;
-
-$text: #e5dfd5;
-$text2: #ada9a1;
-$mutedtext: #78756f;
-
-.bg {
-  width: 100%;
-  height: 100%;
-  background-color: $primary;
-  border: 1px solid $divider;
-  border-radius: 12px;
-  z-index: -1;
-  position: fixed;
-  outline: none;
-}
-
-.search {
-  width: 100%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 54px;
-  background-color: transparent;
-  outline: none;
-  border: none;
-  font-size: 18px;
-  color: $text;
-  padding-inline: 16px;
-  border-bottom: 1px solid $divider;
-  font-family: SFRoundedMedium;
-}
-
-.results {
-  position: absolute;
-  width: 284px;
-  top: 53px;
-  left: 0;
-  height: calc(100vh - 95px);
-  border-right: 1px solid $divider;
-  display: flex;
-  flex-direction: column;
-  padding-inline: 8px;
-  padding-bottom: 8px;
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  .result {
-    height: 40px;
-    font-size: 14px;
-    align-items: center;
-    display: flex;
-    padding: 10px;
-    padding-inline: 10px;
-    letter-spacing: 0.5px;
-    gap: 10px;
-    overflow: hidden;
-    text-overflow: clip;
-    white-space: nowrap;
-  }
-
-  .result {
-    cursor: pointer;
-
-    &.selected {
-      background-color: $divider;
-    }
-  }
-
-  .time-separator {
-    font-size: 12px;
-    color: $text2;
-    font-family: SFRoundedSemiBold;
-    padding-left: 8px;
-    padding-bottom: 8px;
-    padding-top: 14px;
-  }
-
-  .favicon {
-    width: 18px;
-    height: 18px;
-  }
-
-  .image {
-    width: 18px;
-    height: 18px;
-  }
-
-  .icon {
-    width: 18px;
-    height: 18px;
-  }
-}
-
-.content {
-  position: absolute;
-  top: 53px;
-  left: 284px;
-  height: calc(100vh - 254px);
-  font-family: CommitMono !important;
-  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 !important;
-  }
-
-  .image {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    object-position: center;
-  }
-}
-
-.bottom-bar {
-  height: 40px;
-  width: calc(100vw - 2px);
-  backdrop-filter: blur(18px);
-  background-color: hsla(40, 3%, 16%, 0.8);
-  position: fixed;
-  bottom: 1px;
-  left: 1px;
-  z-index: 100;
-  border-radius: 0 0 12px 12px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding-inline: 12px;
-  padding-right: 6px;
-  padding-top: 1px;
-  align-items: center;
-  font-size: 14px;
-  border-top: 1px solid $divider;
-
-  p {
-    color: $text2;
-  }
-
-  .left {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    .logo {
-      width: 18px;
-      height: 18px;
-    }
-  }
-
-  .right {
-    display: flex;
-    align-items: center;
-
-    .paste p {
-      color: $text;
-    }
-
-    .actions div {
-      display: flex;
-      align-items: center;
-      gap: 2px;
-    }
-
-    .divider {
-      width: 2px;
-      height: 12px;
-      background-color: $divider;
-      margin-left: 8px;
-      margin-right: 4px;
-      transition: all 0.2s;
-    }
-
-    .paste,
-    .actions {
-      padding: 4px;
-      padding-left: 8px;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      border-radius: 7px;
-      background-color: transparent;
-      transition: all 0.2s;
-      cursor: pointer;
-    }
-
-    .paste:hover,
-    .actions:hover {
-      background-color: $divider;
-    }
-
-    &:hover .paste:hover ~ .divider,
-    &:hover .actions:hover ~ .divider {
-      opacity: 0;
-    }
-  }
-}
-
-.information {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-  bottom: 40px;
-  left: 284px;
-  height: 160px;
-  width: calc(100vw - 286px);
-  border-top: 1px solid $divider;
-  background-color: $primary;
-  padding: 14px;
-
-  .title {
-    font-family: SFRoundedSemiBold;
-    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 {
-  clip-path: polygon(
-    13.890123px 0px,
-    calc(100% - 13.890123px) 0px,
-    calc(100% - 12.723414px) 0.004211px,
-    calc(100% - 11.556933px) 0.025635px,
-    calc(100% - 10.391895px) 0.085062px,
-    calc(100% - 9.231074px) 0.199291px,
-    calc(100% - 8.079275px) 0.382298px,
-    calc(100% - 6.947448px) 0.662609px,
-    calc(100% - 5.844179px) 1.039291px,
-    calc(100% - 4.793324px) 1.542842px,
-    calc(100% - 3.811369px) 2.169728px,
-    calc(100% - 2.926417px) 2.926417px,
-    calc(100% - 2.169728px) 3.811369px,
-    calc(100% - 1.542842px) 4.793324px,
-    calc(100% - 1.039291px) 5.844179px,
-    calc(100% - 0.662609px) 6.947448px,
-    calc(100% - 0.382298px) 8.079275px,
-    calc(100% - 0.199291px) 9.231074px,
-    calc(100% - 0.085062px) 10.391895px,
-    calc(100% - 0.025635px) 11.556933px,
-    calc(100% - 0.004211px) 12.723414px,
-    100% 13.890123px,
-    100% calc(100% - 13.890123px),
-    calc(100% - 0.004211px) calc(100% - 12.723414px),
-    calc(100% - 0.025635px) calc(100% - 11.556933px),
-    calc(100% - 0.085062px) calc(100% - 10.391895px),
-    calc(100% - 0.199291px) calc(100% - 9.231074px),
-    calc(100% - 0.382298px) calc(100% - 8.079275px),
-    calc(100% - 0.662609px) calc(100% - 6.947448px),
-    calc(100% - 1.039291px) calc(100% - 5.844179px),
-    calc(100% - 1.542842px) calc(100% - 4.793324px),
-    calc(100% - 2.169728px) calc(100% - 3.811369px),
-    calc(100% - 2.926417px) calc(100% - 2.926417px),
-    calc(100% - 3.811369px) calc(100% - 2.169728px),
-    calc(100% - 4.793324px) calc(100% - 1.542842px),
-    calc(100% - 5.844179px) calc(100% - 1.039291px),
-    calc(100% - 6.947448px) calc(100% - 0.662609px),
-    calc(100% - 8.079275px) calc(100% - 0.382298px),
-    calc(100% - 9.231074px) calc(100% - 0.199291px),
-    calc(100% - 10.391895px) calc(100% - 0.085062px),
-    calc(100% - 11.556933px) calc(100% - 0.025635px),
-    calc(100% - 12.723414px) calc(100% - 0.004211px),
-    calc(100% - 13.890123px) 100%,
-    13.890123px 100%,
-    12.723414px calc(100% - 0.004211px),
-    11.556933px calc(100% - 0.025635px),
-    10.391895px calc(100% - 0.085062px),
-    9.231074px calc(100% - 0.199291px),
-    8.079275px calc(100% - 0.382298px),
-    6.947448px calc(100% - 0.662609px),
-    5.844179px calc(100% - 1.039291px),
-    4.793324px calc(100% - 1.542842px),
-    3.811369px calc(100% - 2.169728px),
-    2.926417px calc(100% - 2.926417px),
-    2.169728px calc(100% - 3.811369px),
-    1.542842px calc(100% - 4.793324px),
-    1.039291px calc(100% - 5.844179px),
-    0.662609px calc(100% - 6.947448px),
-    0.382298px calc(100% - 8.079275px),
-    0.199291px calc(100% - 9.231074px),
-    0.085062px calc(100% - 10.391895px),
-    0.025635px calc(100% - 11.556933px),
-    0.004211px calc(100% - 12.723414px),
-    0px calc(100% - 13.890123px),
-    0px 13.890123px,
-    0.004211px 12.723414px,
-    0.025635px 11.556933px,
-    0.085062px 10.391895px,
-    0.199291px 9.231074px,
-    0.382298px 8.079275px,
-    0.662609px 6.947448px,
-    1.039291px 5.844179px,
-    1.542842px 4.793324px,
-    2.169728px 3.811369px,
-    2.926417px 2.926417px,
-    3.811369px 2.169728px,
-    4.793324px 1.542842px,
-    5.844179px 1.039291px,
-    6.947448px 0.662609px,
-    8.079275px 0.382298px,
-    9.231074px 0.199291px,
-    10.391895px 0.085062px,
-    11.556933px 0.025635px,
-    12.723414px 0.004211px,
-    13.890123px 0px
-  );
-}

assets/css/settings.scss

@@ -1,149 +0,0 @@
-$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;
-}
-
-.back {
-  position: absolute;
-  top: 16px;
-  left: 16px;
-  display: flex;
-  gap: 8px;
-  align-items: center;
-
-  img{
-    background-color: $divider;
-    border-radius: 6px;
-    padding: 8px 6px;
-  }
-
-  p {
-    color: $text2;
-  }
-}
-
-.keybind-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-  gap: 6px;
-
-  .title {
-    font-size: 20px;
-    font-weight: 800;
-  }
-
-  .keybind-input {
-    padding: 6px;
-    border: 1px solid $divider;
-    color: $text2;
-    display: flex;
-    border-radius: 13px;
-    outline: none;
-    gap: 6px;
-
-    .key {
-      color: $text2;
-      font-family: SFRoundedMedium;
-      background-color: $divider;
-      padding: 6px 8px;
-      border-radius: 8px;
-    }
-  }
-
-  .keybind-input:focus {
-    border: 1px solid rgba(255, 255, 255, 0.2);
-  }
-}
-
-.bottom-bar {
-  height: 40px;
-  width: calc(100vw - 2px);
-  backdrop-filter: blur(18px);
-  background-color: hsla(40, 3%, 16%, 0.8);
-  position: fixed;
-  bottom: 1px;
-  left: 1px;
-  z-index: 100;
-  border-radius: 0 0 12px 12px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding-inline: 12px;
-  padding-right: 6px;
-  padding-top: 1px;
-  align-items: center;
-  font-size: 14px;
-  border-top: 1px solid $divider;
-
-  p {
-    color: $text2;
-  }
-
-  .left {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    .logo {
-      width: 18px;
-      height: 18px;
-    }
-  }
-
-  .right {
-    display: flex;
-    align-items: center;
-
-    .actions div {
-      display: flex;
-      align-items: center;
-      gap: 2px;
-    }
-
-    .divider {
-      width: 2px;
-      height: 12px;
-      background-color: $divider;
-      margin-left: 8px;
-      margin-right: 4px;
-      transition: all .2s;
-    }
-
-    .actions {
-      padding: 4px;
-      padding-left: 8px;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      border-radius: 7px;
-      background-color: transparent;
-      transition: all .2s;
-      cursor: pointer;
-    }
-
-    .actions:hover {
-      background-color: $divider;
-    }
-
-    &:hover .actions:hover~.divider {
-      opacity: 0;
-    }
-  }
-}

components/BottomBar.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="bottombar">
+    <div class="branding">
+      <img src="/logo.png" alt="logo" class="logo" />
+      <p class="name">Qopy</p>
+    </div>
+    <div class="buttons">
+      <div v-if="primaryAction" class="paste" @click="primaryAction.onClick">
+        <p class="text">{{ primaryAction.text }}</p>
+        <component :is="primaryAction.icon" />
+      </div>
+      <div v-if="secondaryAction" class="divider"></div>
+      <div v-if="secondaryAction" class="actions" @click="secondaryAction.onClick">
+        <p class="text">{{ secondaryAction.text }}</p>
+        <div>
+          <IconsCtrl v-if="(os === 'windows' || os === 'linux') && secondaryAction.showModifier" />
+          <IconsCmd v-if="os === 'macos' && secondaryAction.showModifier" />
+          <component :is="secondaryAction.icon" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { platform } from "@tauri-apps/plugin-os";
+
+interface Action {
+  text: string;
+  icon: any;
+  onClick?: () => void;
+  showModifier?: boolean;
+}
+
+const props = defineProps<{
+  primaryAction?: Action;
+  secondaryAction?: Action;
+}>();
+
+const os = ref<string>("");
+
+onMounted(() => {
+  os.value = platform();
+});
+</script>
+
+<style scoped lang="scss">
+.bottombar {
+  min-height: 40px;
+  width: 100%;
+  border-top: 1px solid var(--border);
+  backdrop-filter: blur(18px);
+  border-radius: 0 0 11px 11px;
+  background-color: rgba(46, 45, 43, 0.051);
+  display: flex;
+  align-items: center;
+  padding-left: 11px;
+  padding-right: 6px;
+  justify-content: space-between;
+
+  .branding {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    color: var(--text-secondary);
+
+    .logo {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  .buttons {
+    display: flex;
+    align-items: center;
+
+    .text {
+      color: var(--text);
+    }
+
+    .actions div {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+    }
+
+    .divider {
+      width: 2px;
+      height: 12px;
+      background-color: var(--border);
+      margin-left: 8px;
+      margin-right: 4px;
+      transition: all 0.2s;
+    }
+
+    .paste,
+    .actions {
+      padding: 4px;
+      padding-left: 8px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      border-radius: 7px;
+      background-color: transparent;
+      transition: all 0.2s;
+      cursor: pointer;
+    }
+
+    .paste:hover,
+    .actions:hover {
+      background-color: var(--border);
+    }
+
+    &:hover .paste:hover ~ .divider,
+    &:hover .divider:has(+ .actions:hover) {
+      opacity: 0;
+    }
+  }
+}
+
+p {
+  font-family: SFRoundedMedium;
+}
+</style>

components/Icons/Cmd.vue

@@ -0,0 +1,39 @@
+<template>
+  <svg
+    width="24px"
+    height="20px"
+    viewBox="0 0 24 20"
+    version="1.1"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <path d="M0 0L24 0L24 20L0 20L0 0Z" id="path_1" />
+      <clipPath id="clip_1">
+        <use
+          xlink:href="#path_1"
+          clip-rule="evenodd"
+          fill-rule="evenodd"
+          transform="translate(0, -2.133523)" />
+      </clipPath>
+    </defs>
+    <g id="cmd">
+      <path
+        d="M-751 -2016L-751 -2016L-751 -1996L-775 -1996L-775 -2016L-751 -2016Z"
+        id="cmd"
+        fill="none"
+        stroke="none" />
+      <path
+        d="M12 0L17.6 0C19.8402 0 20.9603 0 21.816 0.435974Q22.3804 0.723593 22.8284 1.17157Q23.2764 1.61955 23.564 2.18404C24 3.03969 24 4.15979 24 6.4L24 13.6C24 15.8402 24 16.9603 23.564 17.816Q23.2764 18.3804 22.8284 18.8284Q22.3804 19.2764 21.816 19.564C20.9603 20 19.8402 20 17.6 20L6.4 20C4.15979 20 3.03969 20 2.18404 19.564Q1.61955 19.2764 1.17157 18.8284Q0.723594 18.3804 0.435974 17.816C0 16.9603 0 15.8402 0 13.6L0 6.4C0 4.15979 0 3.03969 0.435974 2.18404Q0.723594 1.61955 1.17157 1.17157Q1.61955 0.723594 2.18404 0.435974C3.03969 0 4.15979 0 6.4 0L12 0Z"
+        id="Rectangle"
+        fill="#FFFFFF"
+        fill-opacity="0.050980393"
+        stroke="none" />
+      <g id="⌘" clip-path="url(#clip_1)" transform="translate(0 2.133523)">
+        <g transform="translate(5.5692472, 0)" id="⌘" fill="#E5DFD5">
+          <path
+            d="M3.55007 12.8061Q2.98224 12.8061 2.51598 12.5268Q2.04972 12.2475 1.77042 11.7789Q1.49112 11.3104 1.49112 10.7472Q1.49112 10.1747 1.77042 9.70614Q2.04972 9.23757 2.51598 8.95827Q2.98224 8.67898 3.55007 8.67898L4.5657 8.67898L4.5657 7.04474L3.55007 7.04474Q2.98224 7.04474 2.51598 6.76775Q2.04972 6.49077 1.77042 6.02219Q1.49112 5.55362 1.49112 4.98579Q1.49112 4.41797 1.77042 3.9494Q2.04972 3.48082 2.51598 3.20383Q2.98224 2.92685 3.55007 2.92684Q4.1179 2.92684 4.58647 3.20383Q5.05504 3.48082 5.33434 3.9494Q5.61364 4.41797 5.61364 4.98579L5.61364 5.99219L7.25249 5.99219L7.25249 4.98579Q7.25249 4.41797 7.52947 3.9494Q7.80646 3.48082 8.27504 3.20383Q8.74361 2.92685 9.31144 2.92684Q9.87926 2.92684 10.3455 3.20383Q10.8118 3.48082 11.0888 3.9494Q11.3658 4.41797 11.3658 4.98579Q11.3658 5.55362 11.0888 6.02219Q10.8118 6.49077 10.3455 6.76775Q9.87926 7.04474 9.31144 7.04474L8.30043 7.04474L8.30043 8.67898L9.31144 8.67898Q9.87926 8.67898 10.3455 8.95827Q10.8118 9.23757 11.0888 9.70614Q11.3658 10.1747 11.3658 10.7472Q11.3658 11.3104 11.0888 11.7789Q10.8118 12.2475 10.3455 12.5268Q9.87926 12.8061 9.31144 12.8061Q8.74361 12.8061 8.27504 12.5268Q7.80646 12.2475 7.52947 11.7789Q7.25249 11.3104 7.25249 10.7472L7.25249 9.73153L5.61364 9.73153L5.61364 10.7472Q5.61364 11.3104 5.33434 11.7789Q5.05504 12.2475 4.58647 12.5268Q4.1179 12.8061 3.55007 12.8061ZM3.55007 11.7536Q3.97017 11.7536 4.26563 11.4604Q4.56108 11.1673 4.5657 10.7472L4.5657 9.73153L3.55007 9.73153Q3.12997 9.73615 2.83452 10.0293Q2.53906 10.3224 2.53906 10.7472Q2.53906 11.1673 2.83452 11.4604Q3.12997 11.7536 3.55007 11.7536ZM9.31144 11.7536Q9.72692 11.7536 10.0224 11.4604Q10.3178 11.1673 10.3178 10.7472Q10.3178 10.3224 10.0224 10.0293Q9.72692 9.73615 9.31144 9.73153L8.30043 9.73153L8.30043 10.7472Q8.29581 11.1673 8.59357 11.4604Q8.89133 11.7536 9.31144 11.7536ZM3.55007 5.99219L4.5657 5.99219L4.5657 4.98579Q4.56108 4.56569 4.26563 4.27255Q3.97017 3.9794 3.55007 3.9794Q3.12997 3.9794 2.83452 4.27255Q2.53906 4.56569 2.53906 4.98579Q2.53906 5.40589 2.83452 5.70135Q3.12997 5.9968 3.55007 5.99219ZM8.30043 5.99219L9.31144 5.99219Q9.72692 5.9968 10.0224 5.70135Q10.3178 5.40589 10.3178 4.98579Q10.3178 4.56569 10.0224 4.27255Q9.72692 3.9794 9.31144 3.9794Q8.89133 3.9794 8.59357 4.27255Q8.29581 4.56569 8.30043 4.98579L8.30043 5.99219ZM5.61364 8.67898L7.25249 8.67898L7.25249 7.04474L5.61364 7.04474L5.61364 8.67898Z" />
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>

components/Icons/Code.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <g>
+      <path
+        d="M3.75 16.0714L11.25 16.0714C12.2855 16.0714 13.125 15.208 13.125 14.1429L13.125 8.02672C13.1248 7.5147 12.9269 7.02399 12.5748 6.66239L8.52375 2.493C8.17225 2.13169 7.69568 1.92868 7.19875 1.92857L3.75 1.92857C2.71447 1.92857 1.875 2.79202 1.875 3.85715L1.875 14.1429C1.875 15.208 2.71447 16.0714 3.75 16.0714M15 8.02672C15.0003 7.00424 14.6053 6.02271 13.9018 5.29904L9.85 1.13143C9.1465 0.406921 8.19178 -0.000123228 7.19625 0L3.75 0C1.67893 0 0 1.7269 0 3.85714L0 14.1429C2.38419e-07 16.2731 1.67893 18 3.75 18L11.25 18C13.3211 18 15 16.2731 15 14.1429L15 8.02672ZM8.40003 12.2529C8.03446 11.8764 8.03446 11.2665 8.40003 10.89L9.61253 9.64286L8.40003 8.39571C8.05583 8.01577 8.06598 7.4237 8.423 7.05648C8.78002 6.68926 9.35564 6.67882 9.72503 7.03286L11.6 8.96143C11.9656 9.33791 11.9656 9.94781 11.6 10.3243L9.72503 12.2529C9.35901 12.6289 8.76605 12.6289 8.40003 12.2529M6.60003 8.39571C6.94423 8.01577 6.93407 7.4237 6.57706 7.05649C6.22004 6.68927 5.64442 6.67882 5.27503 7.03286L3.40003 8.96143C3.03446 9.33791 3.03446 9.94781 3.40003 10.3243L5.27503 12.2529C5.50874 12.5108 5.86072 12.617 6.19289 12.5298C6.52505 12.4425 6.78443 12.1757 6.86926 11.8341C6.95409 11.4924 6.85084 11.1304 6.60003 10.89L5.38753 9.64286L6.60003 8.39571Z"
+        fill="#E5DFD5"
+        fill-rule="evenodd"
+        transform="translate(1.5 0)" />
+    </g>
+  </svg>
+</template>

components/Icons/Ctrl.vue

@@ -0,0 +1,32 @@
+<template>
+  <svg
+    width="24px"
+    height="20px"
+    viewBox="0 0 24 20"
+    version="1.1"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns="http://www.w3.org/2000/svg">
+    <g id="Ctrl" fill-opacity="1">
+      <path
+        d="M-751 -2016L-751 -2016L-751 -1996L-775 -1996L-775 -2016L-751 -2016Z"
+        id="Ctrl"
+        fill="none"
+        stroke="none" />
+      <path
+        d="M12 0L17.6 0C19.8402 0 20.9603 0 21.816 0.435974Q22.3804 0.723593 22.8284 1.17157Q23.2764 1.61955 23.564 2.18404C24 3.03969 24 4.15979 24 6.4L24 13.6C24 15.8402 24 16.9603 23.564 17.816Q23.2764 18.3804 22.8284 18.8284Q22.3804 19.2764 21.816 19.564C20.9603 20 19.8402 20 17.6 20L6.4 20C4.15979 20 3.03969 20 2.18404 19.564Q1.61955 19.2764 1.17157 18.8284Q0.723594 18.3804 0.435974 17.816C0 16.9603 0 15.8402 0 13.6L0 6.4C0 4.15979 0 3.03969 0.435974 2.18404Q0.723594 1.61955 1.17157 1.17157Q1.61955 0.723594 2.18404 0.435974C3.03969 0 4.15979 0 6.4 0L12 0Z"
+        id="Rectangle"
+        fill="#FFFFFF"
+        fill-opacity="0.050980393"
+        stroke="none" />
+      <path
+        d="M7.97095 9.00977L12 5L16 9.00977"
+        id="Vector"
+        fill="none"
+        fill-rule="evenodd"
+        stroke="#E5E0D5"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round" />
+    </g>
+  </svg>
+</template>

components/Icons/Enter.vue

@@ -0,0 +1,41 @@
+<template>
+  <svg
+    width="24px"
+    height="20px"
+    viewBox="0 0 24 20"
+    version="1.1"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns="http://www.w3.org/2000/svg">
+    <g id="Enter" fill-opacity="1">
+      <path
+        d="M-659 -2016L-659 -2016L-659 -1996L-683 -1996L-683 -2016L-659 -2016Z"
+        id="Enter"
+        fill="none"
+        stroke="none" />
+      <path
+        d="M12 0L17.6 0C19.8402 0 20.9603 0 21.816 0.435974Q22.3804 0.723593 22.8284 1.17157Q23.2764 1.61955 23.564 2.18404C24 3.03969 24 4.15979 24 6.4L24 13.6C24 15.8402 24 16.9603 23.564 17.816Q23.2764 18.3804 22.8284 18.8284Q22.3804 19.2764 21.816 19.564C20.9603 20 19.8402 20 17.6 20L6.4 20C4.15979 20 3.03969 20 2.18404 19.564Q1.61955 19.2764 1.17157 18.8284Q0.723594 18.3804 0.435974 17.816C0 16.9603 0 15.8402 0 13.6L0 6.4C0 4.15979 0 3.03969 0.435974 2.18404Q0.723594 1.61955 1.17157 1.17157Q1.61955 0.723594 2.18404 0.435974C3.03969 0 4.15979 0 6.4 0L12 0Z"
+        id="Rectangle"
+        fill="#FFFFFF"
+        fill-opacity="0.050980393"
+        stroke="none" />
+      <path
+        d="M16.0597 5.48914L16.0597 10.5L7.5 10.5"
+        id="Vector"
+        fill="none"
+        fill-rule="evenodd"
+        stroke="#E5DFD5"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round" />
+      <path
+        d="M9.5 8.5L9.5 12.5035L7 10.5L9.5 8.5Z"
+        id="Vector"
+        fill="#E5DFD5"
+        fill-rule="evenodd"
+        stroke="#E5DFD5"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round" />
+    </g>
+  </svg>
+</template>

components/Icons/File.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <g>
+      <path
+        d="M11.25 16.0714L3.75 16.0714C2.71447 16.0714 1.875 15.208 1.875 14.1429L1.875 3.85714C1.875 2.79202 2.71447 1.92857 3.75 1.92857L6.25 1.92857L6.25 5.14286C6.25 7.2731 7.92893 9 10 9L13.125 9L13.125 14.1429C13.125 15.208 12.2855 16.0714 11.25 16.0714M12.8788 7.07143C12.7961 6.92188 12.6944 6.78437 12.5763 6.66257L8.5225 2.493C8.40408 2.37151 8.2704 2.26687 8.125 2.18186L8.125 5.14286C8.125 6.20798 8.96447 7.07143 10 7.07143L12.8788 7.07143ZM13.9013 5.29843C14.6049 6.02193 15.0001 7.00338 15 8.02672L15 14.1429C15 16.2731 13.3211 18 11.25 18L3.75 18C1.67893 18 0 16.2731 0 14.1429L0 3.85714C-5.96046e-07 1.7269 1.67893 0 3.75 0L7.19625 0C8.19116 -0.000122309 9.14535 0.406423 9.84875 1.13014L13.9013 5.29843Z"
+        fill="#E5DFD5"
+        fill-rule="evenodd"
+        transform="translate(1.5 0)" />
+    </g>
+  </svg>
+</template>

components/Icons/Image.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <g>
+      <path
+        d="M13.8462 2.07692L4.15385 2.07692C3.00679 2.07692 2.07692 3.00679 2.07692 4.15385L2.07692 11.1143L3.40892 10.1451C4.26934 9.51991 5.43685 9.5289 6.28754 10.1672L7.57246 11.1309L10.8512 8.32016C11.7843 7.52111 13.1676 7.54669 14.0705 8.37969L15.9231 10.0897L15.9231 4.15385C15.9231 3.00679 14.9932 2.07692 13.8462 2.07692M18 12.4588L18 4.15385C18 1.85974 16.1403 0 13.8462 0L4.15385 0C1.85974 0 0 1.85974 0 4.15385L0 13.8462C3.30118e-07 16.1403 1.85974 18 4.15385 18L13.8462 18C16.1403 18 18 16.1403 18 13.8462L18 12.4588ZM15.9231 12.9157L12.6623 9.90554C12.5333 9.78671 12.3358 9.78314 12.2026 9.89723L8.29108 13.2508L7.65831 13.7935L6.99231 13.2937L5.04 11.8302C4.91867 11.7398 4.75269 11.7386 4.63015 11.8274L2.07692 13.6814L2.07692 13.8462C2.07692 14.9932 3.00679 15.9231 4.15385 15.9231L13.8462 15.9231C14.9932 15.9231 15.9231 14.9932 15.9231 13.8462L15.9231 12.9157ZM8.30769 6.23077C8.30769 7.37782 7.37782 8.30769 6.23077 8.30769C5.08372 8.30769 4.15385 7.37782 4.15385 6.23077C4.15385 5.08372 5.08372 4.15385 6.23077 4.15385C7.37782 4.15385 8.30769 5.08372 8.30769 6.23077"
+        fill="#E5DFD5"
+        fill-rule="evenodd" />
+    </g>
+  </svg>
+</template>

components/Icons/K.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg
+    width="24px"
+    height="20px"
+    viewBox="0 0 24 20"
+    version="1.1"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns="http://www.w3.org/2000/svg">
+    <g id="K" fill-opacity="1">
+      <path
+        d="M-751 -2016L-751 -2016L-751 -1996L-775 -1996L-775 -2016L-751 -2016Z"
+        id="K"
+        fill="none"
+        stroke="none" />
+      <path
+        d="M12 0L17.6 0C19.8402 0 20.9603 0 21.816 0.435974Q22.3804 0.723593 22.8284 1.17157Q23.2764 1.61955 23.564 2.18404C24 3.03969 24 4.15979 24 6.4L24 13.6C24 15.8402 24 16.9603 23.564 17.816Q23.2764 18.3804 22.8284 18.8284Q22.3804 19.2764 21.816 19.564C20.9603 20 19.8402 20 17.6 20L6.4 20C4.15979 20 3.03969 20 2.18404 19.564Q1.61955 19.2764 1.17157 18.8284Q0.723594 18.3804 0.435974 17.816C0 16.9603 0 15.8402 0 13.6L0 6.4C0 4.15979 0 3.03969 0.435974 2.18404Q0.723594 1.61955 1.17157 1.17157Q1.61955 0.723594 2.18404 0.435974C3.03969 0 4.15979 0 6.4 0L12 0Z"
+        id="Rectangle"
+        fill="#FFFFFF"
+        fill-opacity="0.050980393"
+        stroke="none" />
+      <g id="K" transform="translate(8 0)">
+        <g transform="translate(0, 2.8945312)" id="K" fill="#E5E0D5">
+          <path
+            d="M1.5 11.5254C1.97461 11.5254 2.25586 11.2383 2.25586 10.7402L2.25586 8.70703L3.13477 7.77539L5.87695 11.127C6.11133 11.4199 6.31641 11.5313 6.61523 11.5313C7.02539 11.5313 7.3418 11.2148 7.3418 10.8047C7.3418 10.6055 7.25391 10.3945 7.04883 10.1426L4.25391 6.76172L6.79688 4.10742C6.97266 3.91992 7.04297 3.76172 7.04297 3.55664C7.04297 3.16992 6.74414 2.86523 6.33984 2.86523C6.09375 2.86523 5.91211 2.95898 5.70703 3.18164L2.30859 6.84961L2.25586 6.84961L2.25586 3.65625C2.25586 3.1582 1.97461 2.87109 1.5 2.87109C1.03125 2.87109 0.744141 3.1582 0.744141 3.65625L0.744141 10.7402C0.744141 11.2383 1.03125 11.5254 1.5 11.5254Z" />
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>

components/Icons/Link.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <g>
+      <path
+        d="M2.68978 6.95235C3.0999 6.55662 3.75151 6.56259 4.1543 6.96577C4.5571 7.36895 4.56246 8.02056 4.16634 8.43031C4.16634 8.43031 3.15364 9.443 3.15364 9.443C1.68651 10.9393 1.69832 13.3381 3.18012 14.8199C4.66192 16.3017 7.06072 16.3135 8.55703 14.8464C8.55703 14.8464 9.56973 13.8337 9.56973 13.8337C9.98137 13.4501 10.6228 13.4614 11.0207 13.8593C11.4185 14.2571 11.4299 14.8986 11.0463 15.3102C11.0463 15.3102 10.035 16.3229 10.035 16.3229C7.71847 18.5799 4.01808 18.5559 1.73113 16.2689C-0.555826 13.982 -0.579909 10.2816 1.67708 7.96504C1.67708 7.96504 2.68978 6.95235 2.68978 6.95235ZM13.8337 9.56973C13.4501 9.98138 13.4614 10.6228 13.8593 11.0207C14.2571 11.4185 14.8986 11.4299 15.3103 11.0463C15.3103 11.0463 16.323 10.035 16.323 10.035C18.58 7.71847 18.5559 4.01808 16.2689 1.73113C13.982 -0.555826 10.2816 -0.579908 7.96505 1.67708C7.96505 1.67708 6.95235 2.68978 6.95235 2.68978C6.55662 3.0999 6.56259 3.75151 6.96577 4.15431C7.36895 4.55711 8.02056 4.56247 8.43031 4.16635C8.43031 4.16635 9.44301 3.15365 9.44301 3.15365C10.9393 1.68652 13.3381 1.69833 14.8199 3.18013C16.3017 4.66192 16.3135 7.06073 14.8464 8.55704C14.8464 8.55704 13.8337 9.56973 13.8337 9.56973ZM12.5242 6.9523C12.8038 6.69186 12.9188 6.29961 12.8243 5.92945C12.7297 5.55928 12.4407 5.27024 12.0705 5.1757C11.7004 5.08117 11.3081 5.19623 11.0477 5.47574C11.0477 5.47574 5.47574 11.0477 5.47574 11.0477C5.19623 11.3081 5.08117 11.7004 5.1757 12.0705C5.27024 12.4407 5.55928 12.7297 5.92945 12.8243C6.29961 12.9188 6.69186 12.8037 6.9523 12.5242C6.9523 12.5242 12.5242 6.9523 12.5242 6.9523Z"
+        fill="#E5DFD5"
+        fill-rule="evenodd" />
+    </g>
+  </svg>
+</template>

components/Icons/Text.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <g>
+      <path
+        d="M3.75 16.0714L11.25 16.0714C12.2855 16.0714 13.125 15.208 13.125 14.1429L13.125 8.02672C13.1248 7.5147 12.9269 7.02399 12.5748 6.66239L8.52375 2.493C8.17225 2.13169 7.69568 1.92868 7.19875 1.92857L3.75 1.92857C2.71447 1.92857 1.875 2.79202 1.875 3.85714L1.875 14.1429C1.875 15.208 2.71447 16.0714 3.75 16.0714M15 8.02672C15.0003 7.00424 14.6053 6.02271 13.9018 5.29904L9.85 1.13143C9.1465 0.406921 8.19178 -0.000123228 7.19625 0L3.75 0C1.67893 0 0 1.7269 0 3.85714L0 14.1429C2.38419e-07 16.2731 1.67893 18 3.75 18L11.25 18C13.3211 18 15 16.2731 15 14.1429L15 8.02672ZM3.75 9.32143C3.75 8.78887 4.16973 8.35714 4.6875 8.35714L10.3125 8.35714C10.8303 8.35714 11.25 8.78887 11.25 9.32143C11.25 9.85399 10.8303 10.2857 10.3125 10.2857L4.6875 10.2857C4.16973 10.2857 3.75 9.85399 3.75 9.32143M4.6875 12.2143C4.35256 12.2143 4.04307 12.3981 3.8756 12.6964C3.70813 12.9948 3.70813 13.3624 3.8756 13.6607C4.04307 13.9591 4.35256 14.1429 4.6875 14.1429L7.8125 14.1429C8.14744 14.1429 8.45693 13.9591 8.6244 13.6607C8.79187 13.3624 8.79187 12.9948 8.6244 12.6964C8.45693 12.3981 8.14744 12.2143 7.8125 12.2143L4.6875 12.2143Z"
+        fill="#E5DFD5"
+        fill-rule="evenodd"
+        transform="translate(1.5 0)" />
+    </g>
+  </svg>
+</template>

components/Noise.vue

@@ -6,16 +6,18 @@
 .noise {
   position: absolute;
   overflow: hidden;
-  top: 0;
+  top: 1px;
-  left: 0;
+  left: 1px;
-  width: 100vw;
+  width: calc(100vw - 2px);
-  height: 100vh;
+  height: calc(100vh - 2px);
   pointer-events: none;
   user-select: none;
-  z-index: -1;
+  background-image: url("/noise.webp");
-  background-image: url('/noise.png');
   background-repeat: repeat;
   image-rendering: pixelated;
   overflow: hidden;
+  mix-blend-mode: multiply;
+  opacity: .5;
+  border-radius: 12px;
 }
 </style>

components/Result.vue

@@ -0,0 +1,122 @@
+<template>
+  <div
+    :class="['result', { selected }]"
+    @click="$emit('select')"
+    :ref="el => { if (selected && el) $emit('setRef', el as HTMLElement) }">
+    <template v-if="item.content_type === 'image'">
+      <img
+        v-if="imageUrl"
+        :src="imageUrl"
+        alt="Image"
+        class="image"
+        @error="$emit('imageError')" />
+      <IconsImage v-else class="icon" />
+    </template>
+    <template v-else-if="hasFavicon(item.favicon ?? '')">
+      <img
+        v-if="item.favicon"
+        :src="getFaviconFromDb(item.favicon)"
+        alt="Favicon"
+        class="favicon"
+        @error="
+          ($event.target as HTMLImageElement).src = '/public/icons/Link.svg'
+        " />
+      <IconsLink v-else class="icon" />
+    </template>
+    <IconsFile
+      class="icon"
+      v-else-if="item.content_type === ContentType.File" />
+    <IconsText
+      class="icon"
+      v-else-if="item.content_type === ContentType.Text" />
+    <svg
+      v-else-if="item.content_type === ContentType.Color"
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <g>
+        <rect width="18" height="18" />
+        <path
+          d="M9 18C12.2154 18 15.1865 16.2846 16.7942 13.5C18.4019 10.7154 18.4019 7.28461 16.7942 4.5C15.1865 1.71539 12.2154 -1.22615e-06 9 0C5.78461 0 2.81347 1.71539 1.20577 4.5C-0.401925 7.28461 -0.401923 10.7154 1.20577 13.5C2.81347 16.2846 5.78461 18 9 18Z"
+          fill="#E5DFD5" />
+        <path
+          d="M9 16C7.14348 16 5.36301 15.2625 4.05025 13.9497C2.7375 12.637 2 10.8565 2 9C2 7.14348 2.7375 5.36301 4.05025 4.05025C5.36301 2.7375 7.14348 2 9 2C10.8565 2 12.637 2.7375 13.9497 4.05025C15.2625 5.36301 16 7.14348 16 9C16 10.8565 15.2625 12.637 13.9497 13.9497C12.637 15.2625 10.8565 16 9 16Z"
+          :fill="item.content" />
+      </g>
+    </svg>
+    <IconsCode
+      class="icon"
+      v-else-if="item.content_type === ContentType.Code" />
+    <span v-if="item.content_type === ContentType.Image">
+      Image ({{ dimensions || "Loading..." }})
+    </span>
+    <span v-else>{{ truncateContent(item.content) }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ContentType } from "~/types/types";
+import type { HistoryItem } from "~/types/types";
+
+defineProps<{
+  item: HistoryItem;
+  selected: boolean;
+  imageUrl?: string;
+  dimensions?: string;
+}>();
+
+defineEmits<{
+  (e: "select"): void;
+  (e: "imageError"): void;
+  (e: "setRef", el: HTMLElement): void;
+}>();
+
+const hasFavicon = (str: string): boolean => {
+  return str.trim() !== "";
+};
+
+const getFaviconFromDb = (favicon: string): string => {
+  return `data:image/png;base64,${favicon}`;
+};
+
+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;
+};
+</script>
+
+<style scoped lang="scss">
+.result {
+  display: flex;
+  gap: 12px;
+  padding: 11px;
+  border-radius: 10px;
+  cursor: pointer;
+      align-items: center;
+
+  &.selected {
+    background-color: var(--border);
+  }
+
+  .favicon,
+  .image,
+  .icon {
+    width: 18px;
+    height: 18px;
+  }
+
+  span {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--text);
+  }
+}
+</style>

components/TopBar.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="topbar">
+    <input
+      ref="searchInput"
+      v-model="searchQuery"
+      @input="onInputChange"
+      class="search"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+      type="text"
+      placeholder="Type to filter entries..." />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const searchQuery = ref("");
+const searchInput = ref<HTMLInputElement | null>(null);
+
+const emit = defineEmits<{
+  (e: "search", query: string): void;
+  (e: "searchStarted"): void;
+  (e: "focus"): void;
+}>();
+
+const onInputChange = () => {
+  emit("searchStarted");
+  emit("search", searchQuery.value);
+};
+
+defineExpose({ searchInput });
+</script>
+
+<style lang="scss">
+.topbar {
+  width: 100%;
+  min-height: 56px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  padding-inline: 16px;
+  z-index: 100;
+
+  .search {
+    width: 100%;
+    height: 100%;
+    font-size: 18px;
+    color: var(--text);
+    background-color: transparent;
+    outline: none;
+    border: none;
+    font-family: SFRoundedMedium;
+  }
+}
+</style>

lib/selectedResult.ts

@@ -0,0 +1,54 @@
+import type { HistoryItem } from '~/types/types'
+
+interface GroupedHistory {
+  label: string
+  items: HistoryItem[]
+}
+
+export const selectedGroupIndex = ref(0)
+export const selectedItemIndex = ref(0)
+export const selectedElement = ref<HTMLElement | null>(null)
+
+export const useSelectedResult = (groupedHistory: Ref<GroupedHistory[]>) => {
+  const selectedItem = computed<HistoryItem | null>(() => {
+    const group = groupedHistory.value[selectedGroupIndex.value]
+    return group?.items[selectedItemIndex.value] ?? null
+  })
+
+  const isSelected = (groupIndex: number, itemIndex: number): boolean => {
+    return selectedGroupIndex.value === groupIndex && selectedItemIndex.value === itemIndex
+  }
+
+  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
+    }
+  }
+
+  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
+    }
+  }
+
+  const selectItem = (groupIndex: number, itemIndex: number): void => {
+    selectedGroupIndex.value = groupIndex
+    selectedItemIndex.value = itemIndex
+  }
+
+  return {
+    selectedItem,
+    isSelected,
+    selectNext,
+    selectPrevious,
+    selectItem,
+    selectedElement
+  }
+} 

nuxt.config.ts

@@ -3,7 +3,13 @@ export default defineNuxtConfig({
   devtools: { enabled: false },
   compatibilityDate: "2024-07-04",
   ssr: false,
-  modules: ["wrdu-keyboard"],
+  app: {
+    head: {
+      charset: "utf-8",
+      viewport:
+        "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0",
+    },
+  },
   vite: {
     css: {
       preprocessorOptions: {

package.json

@@ -10,17 +10,17 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "@tauri-apps/api": "2.1.1",
+    "@tauri-apps/api": "2.3.0",
-    "@tauri-apps/cli": "2.1.0",
+    "@tauri-apps/cli": "2.3.1",
     "@tauri-apps/plugin-autostart": "2.2.0",
-    "@tauri-apps/plugin-os": "2.2.0",
+    "@tauri-apps/plugin-os": "2.2.1",
-    "nuxt": "3.15.0",
+    "nuxt": "3.16.0",
-    "overlayscrollbars": "2.10.1",
+    "overlayscrollbars": "2.11.1",
     "overlayscrollbars-vue": "0.5.9",
-    "sass-embedded": "1.83.0",
+    "sass-embedded": "1.85.1",
-    "uuid": "11.0.3",
+    "uuid": "11.1.0",
     "vue": "3.5.13",
-    "wrdu-keyboard": "1.1.1"
+    "wrdu-keyboard": "github:0PandaDEV/keyboard"
   },
   "overrides": {
     "chokidar": "^3.6.0"

pages/index.vue

@@ -1,150 +1,58 @@
 <template>
-  <div class="bg" tabindex="0">
+  <main>
-    <input
+    <TopBar ref="topBar" @search="searchHistory" @searchStarted="searchStarted" />
-      ref="searchInput"
+    <div class="container">
-      v-model="searchQuery"
+      <OverlayScrollbarsComponent class="results" ref="resultsContainer"
-      @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 v-for="(group, groupIndex) in groupedHistory" :key="groupIndex" class="group">
           <div class="time-separator">{{ group.label }}</div>
-        <div
+          <div class="results-group">
-          v-for="(item, index) in group.items"
+            <Result v-for="(item, index) in group.items" :key="item.id" :item="item"
-          :key="item.id"
+              :selected="isSelected(groupIndex, index)" :image-url="imageUrls[item.id]"
-          :class="[
+              :dimensions="imageDimensions[item.id]" @select="selectItem(groupIndex, index)" @image-error="onImageError"
-            'result clothoid-corner',
+              @setRef="(el) => (selectedElement = el)" />
-            { selected: isSelected(groupIndex, index) },
-          ]"
-          @click="selectItem(groupIndex, index)"
-          :ref="
-            (el: any) => {
-              if (isSelected(groupIndex, index))
-                selectedElement = el as HTMLElement;
-            }
-          ">
-          <template v-if="item.content_type === 'image'">
-            <img
-              v-if="imageUrls[item.id]"
-              :src="imageUrls[item.id]"
-              alt="Image"
-              class="image"
-              @error="onImageError" />
-            <img v-else src="../public/icons/Image.svg" class="icon" />
-          </template>
-          <template v-else-if="hasFavicon(item.favicon ?? '')">
-            <img
-              :src="item.favicon ? getFaviconFromDb(item.favicon) : '../public/icons/Link.svg'"
-              alt="Favicon"
-              class="favicon"
-              @error="($event.target as HTMLImageElement).src = '../public/icons/Link.svg'" />
-          </template>
-          <img
-            src="../public/icons/File.svg"
-            class="icon"
-            v-else-if="item.content_type === ContentType.File" />
-          <img
-            src="../public/icons/Text.svg"
-            class="icon"
-            v-else-if="item.content_type === ContentType.Text" />
-          <div v-else-if="item.content_type === ContentType.Color">
-            <svg
-              width="18"
-              height="18"
-              viewBox="0 0 18 18"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg">
-              <g>
-                <rect width="18" height="18" />
-                <path
-                  d="M9 18C12.2154 18 15.1865 16.2846 16.7942 13.5C18.4019 10.7154 18.4019 7.28461 16.7942 4.5C15.1865 1.71539 12.2154 -1.22615e-06 9 0C5.78461 0 2.81347 1.71539 1.20577 4.5C-0.401925 7.28461 -0.401923 10.7154 1.20577 13.5C2.81347 16.2846 5.78461 18 9 18Z"
-                  fill="#E5DFD5" />
-                <path
-                  d="M9 16C7.14348 16 5.36301 15.2625 4.05025 13.9497C2.7375 12.637 2 10.8565 2 9C2 7.14348 2.7375 5.36301 4.05025 4.05025C5.36301 2.7375 7.14348 2 9 2C10.8565 2 12.637 2.7375 13.9497 4.05025C15.2625 5.36301 16 7.14348 16 9C16 10.8565 15.2625 12.637 13.9497 13.9497C12.637 15.2625 10.8565 16 9 16Z"
-                  :fill="item.content" />
-              </g>
-            </svg>
           </div>
-          <img
-            src="../public/icons/Code.svg"
-            class="icon"
-            v-else-if="item.content_type === ContentType.Code" />
-          <span v-if="item.content_type === ContentType.Image">
-            Image ({{ imageDimensions[item.id] || "Loading..." }})
-          </span>
-          <span v-else>{{ truncateContent(item.content) }}</span>
         </div>
-      </template>
       </OverlayScrollbarsComponent>
-
+      <div class="right">
-    <div
+        <div class="content" v-if="selectedItem?.content_type === ContentType.Image">
-      class="content"
-      v-if="selectedItem?.content_type === ContentType.Image">
           <img :src="imageUrls[selectedItem.id]" alt="Image" class="image" />
         </div>
-    <div
+        <div v-else-if="selectedItem && isYoutubeWatchUrl(selectedItem.content)" class="content">
-      v-else-if="selectedItem && isYoutubeWatchUrl(selectedItem.content)"
+          <img class="image" :src="getYoutubeThumbnail(selectedItem.content)" alt="YouTube Thumbnail" />
-      class="content">
-      <img
-        class="image"
-        :src="getYoutubeThumbnail(selectedItem.content)"
-        alt="YouTube Thumbnail" />
         </div>
-    <div class="content" v-else-if="selectedItem?.content_type === ContentType.Link && pageOgImage">
+        <div class="content" v-else-if="
-      <img :src="pageOgImage" alt="Image" class="image">
+          selectedItem?.content_type === ContentType.Link && pageOgImage
+        ">
+          <img :src="pageOgImage" alt="Image" class="image" />
         </div>
         <OverlayScrollbarsComponent v-else class="content">
-      <span>{{ selectedItem?.content || "" }}</span>
+          <span class="content-text">{{ selectedItem?.content || "" }}</span>
         </OverlayScrollbarsComponent>
-
+        <OverlayScrollbarsComponent class="information" :options="{ scrollbars: { autoHide: 'scroll' } }">
-    <OverlayScrollbarsComponent
-      class="information"
-      :options="{ scrollbars: { autoHide: 'scroll' } }">
           <div class="title">Information</div>
           <div class="info-content" v-if="selectedItem && getInfo">
             <div class="info-row" v-for="(row, index) in infoRows" :key="index">
               <p class="label">{{ row.label }}</p>
-          <span
+              <span :class="{ 'url-truncate': row.isUrl }" :data-text="row.value">
-            :class="{ 'url-truncate': row.isUrl }"
+                <img v-if="row.icon" :src="row.icon" :alt="String(row.value)">
-            :data-text="row.value">
                 {{ row.value }}
               </span>
             </div>
           </div>
         </OverlayScrollbarsComponent>
-    <Noise />
       </div>
+    </div>
+    <BottomBar :primary-action="{
+      text: 'Paste',
+      icon: IconsEnter,
+      onClick: pasteSelectedItem,
+    }" :secondary-action="{
+      text: 'Actions',
+      icon: IconsK,
+      showModifier: true,
+    }" />
+  </main>
 </template>
 
 <script setup lang="ts">
@@ -153,12 +61,27 @@ import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
 import "overlayscrollbars/overlayscrollbars.css";
 import { app, window } from "@tauri-apps/api";
 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";
+import type {
+  InfoText,
+  InfoImage,
+  InfoFile,
+  InfoLink,
+  InfoColor,
+  InfoCode,
+} from "~/types/types";
+import { Key, keyboard } from "wrdu-keyboard";
+import {
+  selectedGroupIndex,
+  selectedItemIndex,
+  selectedElement,
+  useSelectedResult,
+} from "~/lib/selectedResult";
+import IconsEnter from "~/components/Icons/Enter.vue";
+import IconsK from "~/components/Icons/K.vue";
 
 interface GroupedHistory {
   label: string;
@@ -166,8 +89,11 @@ interface GroupedHistory {
 }
 
 const { $history } = useNuxtApp();
+
 const CHUNK_SIZE = 50;
 const SCROLL_THRESHOLD = 100;
+const SCROLL_PADDING = 8;
+const TOP_SCROLL_PADDING = 37;
 
 const history = shallowRef<HistoryItem[]>([]);
 let offset = 0;
@@ -177,9 +103,6 @@ const resultsContainer = shallowRef<InstanceType<
   typeof OverlayScrollbarsComponent
 > | null>(null);
 const searchQuery = ref("");
-const selectedGroupIndex = ref(0);
-const selectedItemIndex = ref(0);
-const selectedElement = shallowRef<HTMLElement | null>(null);
 const searchInput = ref<HTMLInputElement | null>(null);
 const os = ref<string>("");
 const imageUrls = shallowRef<Record<string, string>>({});
@@ -188,10 +111,10 @@ const imageSizes = shallowRef<Record<string, string>>({});
 const lastUpdateTime = ref<number>(Date.now());
 const imageLoadError = ref<boolean>(false);
 const imageLoading = ref<boolean>(false);
-const pageTitle = ref<string>('');
+const pageTitle = ref<string>("");
-const pageOgImage = ref<string>('');
+const pageOgImage = ref<string>("");
 
-const keyboard = useKeyboard();
+const topBar = ref<{ searchInput: HTMLInputElement | null } | null>(null);
 
 const isSameDay = (date1: Date, date2: Date): boolean => {
   return (
@@ -254,10 +177,8 @@ const groupedHistory = computed<GroupedHistory[]>(() => {
     .map(([label, items]) => ({ label, items }));
 });
 
-const selectedItem = computed<HistoryItem | null>(() => {
+const { selectedItem, isSelected, selectNext, selectPrevious, selectItem } =
-  const group = groupedHistory.value[selectedGroupIndex.value];
+  useSelectedResult(groupedHistory);
-  return group?.items[selectedItemIndex.value] ?? null;
-});
 
 const loadHistoryChunk = async (): Promise<void> => {
   if (isLoading) return;
@@ -338,82 +259,126 @@ const handleScroll = (): void => {
   }
 };
 
-const scrollToSelectedItem = (forceScrollTop: boolean = false): void => {
+const scrollToSelectedItem = (): void => {
   nextTick(() => {
-    const osInstance = resultsContainer.value?.osInstance();
+    const viewport = resultsContainer.value?.osInstance()?.elements().viewport;
-    const viewport = osInstance?.elements().viewport;
     if (!selectedElement.value || !viewport) return;
 
-    if (!forceScrollTop) {
+    setTimeout(() => {
+      if (!selectedElement.value) return;
+
       const viewportRect = viewport.getBoundingClientRect();
       const elementRect = selectedElement.value.getBoundingClientRect();
 
-      const isAbove = elementRect.top < viewportRect.top;
+      const isFirstItemInGroup = selectedItemIndex.value === 0;
-      const isBelow = elementRect.bottom > viewportRect.bottom - 8;
+      const isAbove = elementRect.top < viewportRect.top + SCROLL_PADDING;
+      const isBelow = elementRect.bottom > viewportRect.bottom - SCROLL_PADDING;
 
-      if (isAbove || isBelow) {
+      if (isAbove) {
-        const scrollOffset = isAbove
+        viewport.scrollTo({
-          ? elementRect.top -
+          top:
-            viewportRect.top -
+            viewport.scrollTop +
-            (selectedItemIndex.value === 0 ? 36 : 8)
+            (elementRect.top - viewportRect.top) -
-          : elementRect.bottom - viewportRect.bottom + 9;
+            (isFirstItemInGroup ? TOP_SCROLL_PADDING : SCROLL_PADDING),
-
+          behavior: "smooth",
-        viewport.scrollBy({ top: scrollOffset, behavior: "smooth" });
+        });
-      }
+      } else if (isBelow) {
+        viewport.scrollTo({
+          top:
+            viewport.scrollTop +
+            (elementRect.bottom - viewportRect.bottom) +
+            SCROLL_PADDING,
+          behavior: "smooth",
+        });
       }
+    }, 10);
   });
 };
 
-const isSelected = (groupIndex: number, itemIndex: number): boolean => {
+let searchController: AbortController | null = null;
-  return (
+let searchQueue: Array<string> = [];
-    selectedGroupIndex.value === groupIndex &&
+let isProcessingSearch = false;
-    selectedItemIndex.value === itemIndex
+
-  );
+const searchStarted = () => {
+  if (searchController) {
+    searchController.abort();
+  }
 };
 
-const searchHistory = async (): Promise<void> => {
+const processSearchQueue = async () => {
-  const results = await $history.searchHistory(searchQuery.value);
+  if (isProcessingSearch || searchQueue.length === 0) return;
+
+  isProcessingSearch = true;
+  const query = searchQueue.pop();
+  searchQueue = [];
+
+  try {
+    if (!query || !query.trim()) {
+      history.value = [];
+      offset = 0;
+      await loadHistoryChunk();
+      isProcessingSearch = false;
+      return;
+    }
+
+    const results = await $history.searchHistory(query);
+
+    if (searchController?.signal.aborted) {
+      isProcessingSearch = false;
+      return;
+    }
+
     history.value = results.map((item) =>
       Object.assign(
         new HistoryItem(
           item.source,
           item.content_type,
           item.content,
-        item.favicon
+          item.favicon,
+          item.source_icon,
+          item.language
         ),
         { id: item.id, timestamp: new Date(item.timestamp) }
       )
     );
-};
   
-const selectNext = (): void => {
+  } catch (error) {
-  const currentGroup = groupedHistory.value[selectedGroupIndex.value];
+    console.error("Search error:", error);
-  if (selectedItemIndex.value < currentGroup.items.length - 1) {
+  } finally {
-    selectedItemIndex.value++;
+    isProcessingSearch = false;
-  } else if (selectedGroupIndex.value < groupedHistory.value.length - 1) {
+    if (searchQueue.length > 0) {
-    selectedGroupIndex.value++;
+      requestAnimationFrame(() => processSearchQueue());
-    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 => {
+const searchHistory = async (query: string): Promise<void> => {
-  selectedGroupIndex.value = groupIndex;
+  searchQuery.value = query;
-  selectedItemIndex.value = itemIndex;
+  
-  scrollToSelectedItem();
+  if (searchController) {
+    searchController.abort();
+  }
+  
+  searchController = new AbortController();
+  
+  searchQueue.push(query);
+  if (!isProcessingSearch) {
+    processSearchQueue();
+  }
 };
 
+watch(
+  () => groupedHistory.value,
+  (newGroupedHistory) => {
+    if (newGroupedHistory.length > 0) {
+      handleSelection(0, 0, true);
+    } else {
+      selectItem(-1, -1);
+    }
+  },
+  { deep: true }
+);
+
 const pasteSelectedItem = async (): Promise<void> => {
   if (!selectedItem.value) return;
 
@@ -431,19 +396,6 @@ const pasteSelectedItem = async (): Promise<void> => {
   await $history.writeAndPaste({ 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(
@@ -464,10 +416,6 @@ const getYoutubeThumbnail = (url: string): string => {
     : "https://via.placeholder.com/1280x720";
 };
 
-const getFaviconFromDb = (favicon: string): string => {
-  return `data:image/png;base64,${favicon}`;
-};
-
 const updateHistory = async (resetScroll: boolean = false): Promise<void> => {
   const results = await $history.loadHistoryChunk(0, CHUNK_SIZE);
   if (results.length > 0) {
@@ -480,7 +428,9 @@ const updateHistory = async (resetScroll: boolean = false): Promise<void> => {
           item.source,
           item.content_type,
           item.content,
-          item.favicon
+          item.favicon,
+          item.source_icon,
+          item.language
         );
         Object.assign(historyItem, {
           id: item.id,
@@ -540,8 +490,7 @@ const handleSelection = (
   itemIndex: number,
   shouldScroll: boolean = true
 ): void => {
-  selectedGroupIndex.value = groupIndex;
+  selectItem(groupIndex, itemIndex);
-  selectedItemIndex.value = itemIndex;
   if (shouldScroll) scrollToSelectedItem();
 };
 
@@ -577,47 +526,71 @@ const setupEventListeners = async (): Promise<void> => {
       }
     }
     focusSearchInput();
+
+    keyboard.clear();
+    keyboard.prevent.down([Key.DownArrow], () => {
+      selectNext();
+    });
+
+    keyboard.prevent.down([Key.UpArrow], () => {
+      selectPrevious();
+    });
+
+    keyboard.prevent.down([Key.Enter], () => {
+      pasteSelectedItem();
+    });
+
+    keyboard.prevent.down([Key.Escape], () => {
+      hideApp();
+    });
+
+    switch (os.value) {
+      case "macos":
+        keyboard.prevent.down([Key.LeftMeta, Key.K], () => { });
+        keyboard.prevent.down([Key.RightMeta, Key.K], () => { });
+        break;
+
+      case "linux":
+      case "windows":
+        keyboard.prevent.down([Key.LeftControl, Key.K], () => { });
+        keyboard.prevent.down([Key.RightControl, Key.K], () => { });
+        break;
+    }
   });
 
   await listen("tauri://blur", () => {
     searchInput.value?.blur();
+    keyboard.clear();
   });
 
-  keyboard.down("ArrowDown", (event) => {
+  keyboard.prevent.down([Key.DownArrow], () => {
-    event.preventDefault();
     selectNext();
   });
 
-  keyboard.down("ArrowUp", (event) => {
+  keyboard.prevent.down([Key.UpArrow], () => {
-    event.preventDefault();
     selectPrevious();
   });
 
-  keyboard.down("Enter", (event) => {
+  keyboard.prevent.down([Key.Enter], () => {
-    event.preventDefault();
     pasteSelectedItem();
   });
 
-  keyboard.down("Escape", (event) => {
+  keyboard.prevent.down([Key.Escape], () => {
-    event.preventDefault();
     hideApp();
   });
 
-  keyboard.down("all", (event) => {
+  switch (os.value) {
-    const isMacActionCombo =
+    case "macos":
-      os.value === "macos" &&
+      keyboard.prevent.down([Key.LeftMeta, Key.K], () => { });
-      (event.code === "MetaLeft" || event.code === "MetaRight") &&
+      keyboard.prevent.down([Key.RightMeta, Key.K], () => { });
-      event.key === "k";
+      break;
 
-    const isOtherOsActionCombo =
+    case "linux":
-      os.value !== "macos" &&
+    case "windows":
-      (event.code === "ControlLeft" || event.code === "ControlRight") &&
+      keyboard.prevent.down([Key.LeftControl, Key.K], () => { });
-      event.key === "k";
+      keyboard.prevent.down([Key.RightControl, Key.K], () => { });
-
+      break;
-    if (isMacActionCombo || isOtherOsActionCombo) {
-      event.preventDefault();
   }
-  });
 };
 
 const hideApp = async (): Promise<void> => {
@@ -627,7 +600,7 @@ const hideApp = async (): Promise<void> => {
 
 const focusSearchInput = (): void => {
   nextTick(() => {
-    searchInput.value?.focus();
+    topBar.value?.searchInput?.focus();
   });
 };
 
@@ -636,17 +609,17 @@ const onImageError = (): void => {
   imageLoading.value = false;
 };
 
-watch([selectedGroupIndex, selectedItemIndex], () => {
+watch(
+  [selectedGroupIndex, selectedItemIndex],
+  () => {
     scrollToSelectedItem();
-});
+  },
-
+  { flush: "post" }
-watch(searchQuery, () => {
+);
-  searchHistory();
-});
 
 onMounted(async () => {
   try {
-    os.value = await platform();
+    os.value = platform();
     await loadHistoryChunk();
 
     resultsContainer.value
@@ -655,19 +628,11 @@ onMounted(async () => {
       ?.viewport?.addEventListener("scroll", handleScroll);
 
     await setupEventListeners();
-
-    if (!(await isEnabled())) {
-      await enable();
-    }
   } catch (error) {
     console.error("Error during onMounted:", error);
   }
 });
 
-watch([selectedGroupIndex, selectedItemIndex], () =>
-  scrollToSelectedItem(false)
-);
-
 const getFormattedDate = computed(() => {
   if (!selectedItem.value?.timestamp) return "";
   return new Intl.DateTimeFormat("en-US", {
@@ -686,27 +651,33 @@ const formatFileSize = (bytes: number): string => {
 
 const fetchPageMeta = async (url: string) => {
   try {
-    const [title, ogImage] = await invoke('fetch_page_meta', { url }) as [string, string | null];
+    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);
+    console.error("Error fetching page meta:", error);
-    pageTitle.value = 'Error loading title';
+    pageTitle.value = "Error loading title";
   }
 };
 
-watch(() => selectedItem.value, (newItem) => {
+watch(
+  () => selectedItem.value,
+  (newItem) => {
     if (newItem?.content_type === ContentType.Link) {
-    pageTitle.value = 'Loading...';
+      pageTitle.value = "Loading...";
-    pageOgImage.value = '';
+      pageOgImage.value = "";
       fetchPageMeta(newItem.content);
     } else {
-    pageTitle.value = '';
+      pageTitle.value = "";
-    pageOgImage.value = '';
+      pageOgImage.value = "";
     }
-});
+  }
+);
 
 const getInfo = computed(() => {
   if (!selectedItem.value) return null;
@@ -716,7 +687,10 @@ const getInfo = computed(() => {
     copied: selectedItem.value.timestamp,
   };
 
-  const infoMap: Record<ContentType, () => InfoText | InfoImage | InfoFile | InfoLink | InfoColor | InfoCode> = {
+  const infoMap: Record<
+    ContentType,
+    () => InfoText | InfoImage | InfoFile | InfoLink | InfoColor | InfoCode
+  > = {
     [ContentType.Text]: () => ({
       ...baseInfo,
       content_type: ContentType.Text,
@@ -754,7 +728,8 @@ const getInfo = computed(() => {
 
       const max = Math.max(rNorm, gNorm, bNorm);
       const min = Math.min(rNorm, gNorm, bNorm);
-      let h = 0, s = 0;
+      let h = 0,
+        s = 0;
       const l = (max + min) / 2;
 
       if (max !== min) {
@@ -780,14 +755,16 @@ const getInfo = computed(() => {
         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)}%)`,
+        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,
+      lines: selectedItem.value!.content.split("\n").length,
     }),
   };
 
@@ -798,25 +775,43 @@ 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 },
+      label: "Source",
+      value: getInfo.value.source,
+      isUrl: false,
+      icon: selectedItem.value?.source_icon ? `data:image/png;base64,${selectedItem.value.source_icon}` : undefined
+    },
+    {
+      label: "Content Type",
+      value:
+        getInfo.value.content_type.charAt(0).toUpperCase() +
+        getInfo.value.content_type.slice(1),
+      isUrl: false,
+    },
   ];
 
-  const typeSpecificRows: Record<ContentType, Array<{ label: string; value: string | number; isUrl?: boolean }>> = {
+  const typeSpecificRows: Record<
+    ContentType,
+    Array<{ label: string; value: string | number; isUrl?: boolean; icon?: string }>
+  > = {
     [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) },
+      {
+        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...'
+      ...((getInfo.value as InfoLink).title &&
-        ? [{ label: "Title", value: (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 },
@@ -832,8 +827,9 @@ const infoRows = computed(() => {
     ],
   };
 
-  const specificRows = typeSpecificRows[getInfo.value.content_type]
+  const specificRows = typeSpecificRows[getInfo.value.content_type].filter(
-    .filter(row => row.value !== "");
+    (row) => row.value !== ""
+  );
 
   return [
     ...commonRows,
@@ -844,5 +840,5 @@ const infoRows = computed(() => {
 </script>
 
 <style scoped lang="scss">
-@use "~/assets/css/index.scss";
+@use "/styles/index.scss";
 </style>

pages/settings.vue

@@ -1,37 +1,54 @@
 <template>
-  <div class="bg">
+  <main>
-    <div class="back">
+    <div class="top-bar">
-      <img @click="router.push('/')" src="../public/back_arrow.svg" />
+      <NuxtLink to="/" class="back">
+        <img src="../public/back_arrow.svg" />
         <p>Back</p>
+      </NuxtLink>
     </div>
-    <div class="bottom-bar">
+    <div class="settings-container">
-      <div class="left">
+      <div class="settings">
-        <img alt="" class="logo" src="../public/logo.png" width="18px" />
+        <div class="names">
-        <p>Qopy</p>
+          <p style="line-height: 14px">Startup</p>
+          <p style="line-height: 34px">Qopy Hotkey</p>
         </div>
-      <div class="right">
+        <div class="actions">
-        <div @click="saveKeybind" class="actions">
+          <div class="launch">
-          <p>Save</p>
+            <input
-          <div>
+              type="checkbox"
-            <img alt="" src="../public/cmd.svg" v-if="os === 'macos'" />
+              id="launch"
-            <img
+              v-model="autostart"
-              alt=""
+              @change="toggleAutostart" />
-              src="../public/ctrl.svg"
+            <label for="launch" class="checkmark">
-              v-if="os === 'linux' || os === 'windows'" />
+              <svg
-            <img alt="" src="../public/enter.svg" />
+                width="14"
+                height="14"
+                viewBox="0 0 14 14"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg">
+                <g>
+                  <rect width="14" height="14" />
+                  <path
+                    id="Path"
+                    d="M0 2.00696L2.25015 4.25L6 0"
+                    fill="none"
+                    stroke-width="1.5"
+                    stroke="#E5DFD5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    transform="translate(4 5)" />
+                </g>
+              </svg>
+            </label>
+            <p for="launch">Launch Qopy at login</p>
           </div>
-        </div>
-      </div>
-    </div>
-    <div class="keybind-container">
-      <h2 class="title">Record a new Hotkey</h2>
           <div
             @blur="onBlur"
             @focus="onFocus"
-        @keydown="onKeyDown"
             class="keybind-input"
             ref="keybindInput"
-        tabindex="0">
+            tabindex="0"
+            :class="{ 'empty-keybind': showEmptyKeybindError }">
             <span class="key" v-if="keybind.length === 0">Click here</span>
             <template v-else>
               <span
@@ -39,75 +56,65 @@
                 class="key"
                 :class="{ modifier: isModifier(key) }"
                 v-for="(key, index) in keybind">
-            {{ keyToDisplay(key) }}
+                {{ keyToLabel(key) }}
               </span>
             </template>
           </div>
         </div>
       </div>
+    </div>
+    <BottomBar
+      :primary-action="{
+        text: 'Save',
+        icon: IconsEnter,
+        onClick: saveKeybind,
+        showModifier: true,
+      }" />
+  </main>
 </template>
 
 <script setup lang="ts">
-import { invoke } from "@tauri-apps/api/core";
 import { onMounted, onUnmounted, reactive, ref } from "vue";
 import { platform } from "@tauri-apps/plugin-os";
 import { useRouter } from "vue-router";
+import { KeyValues, KeyLabels } from "../types/keys";
+import { disable, enable } from "@tauri-apps/plugin-autostart";
+import { Key, keyboard } from "wrdu-keyboard";
+import BottomBar from "../components/BottomBar.vue";
+import IconsEnter from "~/components/Icons/Enter.vue";
 
-const activeModifiers = reactive<Set<string>>(new Set());
+const activeModifiers = reactive<Set<KeyValues>>(new Set());
 const isKeybindInputFocused = ref(false);
-const keybind = ref<string[]>([]);
+const keybind = ref<KeyValues[]>([]);
 const keybindInput = ref<HTMLElement | null>(null);
 const lastBlurTime = ref(0);
 const os = ref("");
 const router = useRouter();
-const keyboard = useKeyboard();
+const showEmptyKeybindError = ref(false);
-
+const autostart = ref(false);
-const keyToDisplayMap: Record<string, string> = {
+const { $settings } = useNuxtApp();
-  " ": "Space",
-  Alt: "Alt",
-  AltLeft: "Alt L",
-  AltRight: "Alt R",
-  ArrowDown: "↓",
-  ArrowLeft: "←",
-  ArrowRight: "→",
-  ArrowUp: "↑",
-  Control: "Ctrl",
-  ControlLeft: "Ctrl L",
-  ControlRight: "Ctrl R",
-  Enter: "↵",
-  Meta: "Meta",
-  MetaLeft: "Meta L",
-  MetaRight: "Meta R",
-  Shift: "⇧",
-  ShiftLeft: "⇧ L",
-  ShiftRight: "⇧ R",
-};
 
 const modifierKeySet = new Set([
-  "Alt",
+  KeyValues.AltLeft,
-  "AltLeft",
+  KeyValues.AltRight,
-  "AltRight",
+  KeyValues.ControlLeft,
-  "Control",
+  KeyValues.ControlRight,
-  "ControlLeft",
+  KeyValues.MetaLeft,
-  "ControlRight",
+  KeyValues.MetaRight,
-  "Meta",
+  KeyValues.ShiftLeft,
-  "MetaLeft",
+  KeyValues.ShiftRight,
-  "MetaRight",
-  "Shift",
-  "ShiftLeft",
-  "ShiftRight",
 ]);
 
-const isModifier = (key: string): boolean => {
+const isModifier = (key: KeyValues): boolean => {
   return modifierKeySet.has(key);
 };
 
-const keyToDisplay = (key: string): string => {
+const keyToLabel = (key: KeyValues): string => {
-  return keyToDisplayMap[key] || key;
+  return KeyLabels[key] || key;
 };
 
 const updateKeybind = () => {
-  const modifiers = Array.from(activeModifiers).sort();
+  const modifiers = Array.from(activeModifiers);
   const nonModifiers = keybind.value.filter((key) => !isModifier(key));
   keybind.value = [...modifiers, ...nonModifiers];
 };
@@ -115,19 +122,20 @@ const updateKeybind = () => {
 const onBlur = () => {
   isKeybindInputFocused.value = false;
   lastBlurTime.value = Date.now();
+  showEmptyKeybindError.value = false;
 };
 
 const onFocus = () => {
   isKeybindInputFocused.value = true;
   activeModifiers.clear();
   keybind.value = [];
+  showEmptyKeybindError.value = false;
 };
 
 const onKeyDown = (event: KeyboardEvent) => {
-  event.preventDefault();
+  const key = event.code as KeyValues;
-  const key = event.code;
 
-  if (key === "Escape") {
+  if (key === KeyValues.Escape) {
     if (keybindInput.value) {
       keybindInput.value.blur();
     }
@@ -142,48 +150,83 @@ const onKeyDown = (event: KeyboardEvent) => {
   }
 
   updateKeybind();
+  showEmptyKeybindError.value = false;
 };
 
 const saveKeybind = async () => {
-  console.log("New:", keybind.value);
+  if (keybind.value.length > 0) {
-  const oldKeybind = await invoke<string[]>("get_keybind");
+    await $settings.saveSetting("keybind", JSON.stringify(keybind.value));
-  console.log("Old:", oldKeybind);
+    router.push("/");
-  await invoke("save_keybind", { keybind: keybind.value });
+  } else {
+    showEmptyKeybindError.value = true;
+  }
 };
 
-onMounted(() => {
+const toggleAutostart = async () => {
-  os.value = platform();
+  if (autostart.value === true) {
+    await enable();
+  } else {
+    await disable();
+  }
+  await $settings.saveSetting("autostart", autostart.value ? "true" : "false");
+};
 
-  keyboard.down("all", (event) => {
+os.value = platform();
-    const isMacSaveCombo =
-      os.value === "macos" &&
-      (event.code === "MetaLeft" || event.code === "MetaRight") &&
-      event.key === "Enter";
 
-    const isOtherOsSaveCombo =
+onMounted(async () => {
-      os.value !== "macos" &&
+  keyboard.prevent.down([Key.All], (event: KeyboardEvent) => {
-      (event.code === "ControlLeft" || event.code === "ControlRight") &&
+    if (isKeybindInputFocused.value) {
-      event.key === "Enter";
+      onKeyDown(event);
+    }
+  });
 
-    if (
+  keyboard.prevent.down([Key.Escape], () => {
-      (isMacSaveCombo || isOtherOsSaveCombo) &&
+    if (isKeybindInputFocused.value) {
-      !isKeybindInputFocused.value
+      keybindInput.value?.blur();
-    ) {
+    } else {
-      event.preventDefault();
+      router.push("/");
+    }
+  });
+
+  switch (os.value) {
+    case "macos":
+      keyboard.prevent.down([Key.LeftMeta, Key.Enter], () => {
+        if (!isKeybindInputFocused.value) {
           saveKeybind();
         }
       });
 
-  keyboard.down("Escape", (event) => {
+      keyboard.prevent.down([Key.RightMeta, Key.Enter], () => {
-    const now = Date.now();
+        if (!isKeybindInputFocused.value) {
-    if (!isKeybindInputFocused.value && now - lastBlurTime.value > 100) {
+          saveKeybind();
-      event.preventDefault();
-      router.push("/");
         }
       });
+      break;
+
+    case "linux":
+    case "windows":
+      keyboard.prevent.down([Key.LeftControl, Key.Enter], () => {
+        if (!isKeybindInputFocused.value) {
+          saveKeybind();
+        }
+      });
+
+      keyboard.prevent.down([Key.RightControl, Key.Enter], () => {
+        if (!isKeybindInputFocused.value) {
+          saveKeybind();
+        }
+      });
+      break;
+  }
+
+  autostart.value = (await $settings.getSetting("autostart")) === "true";
+});
+
+onUnmounted(() => {
+  keyboard.clear();
 });
 </script>
 
 <style scoped lang="scss">
-@use "~/assets/css/settings.scss";
+@use "/styles/settings.scss";
 </style>

plugins/history.ts

@@ -14,17 +14,27 @@ export default defineNuxtPlugin(() => {
         },
 
         async searchHistory(query: string): Promise<HistoryItem[]> {
+          try {
             return await invoke<HistoryItem[]>("search_history", { query });
+          } catch (error) {
+            console.error("Error searching history:", error);
+            return [];
+          }
         },
 
         async loadHistoryChunk(
           offset: number,
           limit: number
         ): Promise<HistoryItem[]> {
+          try {
             return await invoke<HistoryItem[]>("load_history_chunk", {
               offset,
               limit,
             });
+          } catch (error) {
+            console.error("Error loading history chunk:", error);
+            return [];
+          }
         },
 
         async deleteHistoryItem(id: string): Promise<void> {

plugins/settings.ts

@@ -1,5 +1,4 @@
 import { invoke } from "@tauri-apps/api/core";
-import type { Settings } from "~/types/types";
 
 export default defineNuxtPlugin(() => {
   return {
@@ -12,14 +11,6 @@ export default defineNuxtPlugin(() => {
         async saveSetting(key: string, value: string): Promise<void> {
           await invoke<void>("save_setting", { key, value });
         },
-
-        async getKeybind(): Promise<string[]> {
-          return await invoke<string[]>("get_keybind");
-        },
-
-        async saveKeybind(keybind: string[]): Promise<void> {
-          await invoke<void>("save_keybind", { keybind });
-        },
       },
     },
   };

public/cmd.svg

@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg width="24px" height="20px" viewBox="0 0 24 20" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <path d="M0 0L24 0L24 20L0 20L0 0Z" id="path_1" />
-    <clipPath id="clip_1">
-      <use xlink:href="#path_1" clip-rule="evenodd" fill-rule="evenodd" transform="translate(0, -2.133523)" />
-    </clipPath>
-  </defs>
-  <g id="cmd">
-    <path d="M-751 -2016L-751 -2016L-751 -1996L-775 -1996L-775 -2016L-751 -2016Z" id="cmd" fill="none" stroke="none" />
-    <path d="M12 0L17.6 0C19.8402 0 20.9603 0 21.816 0.435974Q22.3804 0.723593 22.8284 1.17157Q23.2764 1.61955 23.564 2.18404C24 3.03969 24 4.15979 24 6.4L24 13.6C24 15.8402 24 16.9603 23.564 17.816Q23.2764 18.3804 22.8284 18.8284Q22.3804 19.2764 21.816 19.564C20.9603 20 19.8402 20 17.6 20L6.4 20C4.15979 20 3.03969 20 2.18404 19.564Q1.61955 19.2764 1.17157 18.8284Q0.723594 18.3804 0.435974 17.816C0 16.9603 0 15.8402 0 13.6L0 6.4C0 4.15979 0 3.03969 0.435974 2.18404Q0.723594 1.61955 1.17157 1.17157Q1.61955 0.723594 2.18404 0.435974C3.03969 0 4.15979 0 6.4 0L12 0Z" id="Rectangle" fill="#FFFFFF" fill-opacity="0.050980393" stroke="none" />
-    <g id="⌘" clip-path="url(#clip_1)" transform="translate(0 2.133523)">
-      <g transform="translate(5.5692472, 0)" id="⌘" fill="#E5DFD5">
-        <path d="M3.55007 12.8061Q2.98224 12.8061 2.51598 12.5268Q2.04972 12.2475 1.77042 11.7789Q1.49112 11.3104 1.49112 10.7472Q1.49112 10.1747 1.77042 9.70614Q2.04972 9.23757 2.51598 8.95827Q2.98224 8.67898 3.55007 8.67898L4.5657 8.67898L4.5657 7.04474L3.55007 7.04474Q2.98224 7.04474 2.51598 6.76775Q2.04972 6.49077 1.77042 6.02219Q1.49112 5.55362 1.49112 4.98579Q1.49112 4.41797 1.77042 3.9494Q2.04972 3.48082 2.51598 3.20383Q2.98224 2.92685 3.55007 2.92684Q4.1179 2.92684 4.58647 3.20383Q5.05504 3.48082 5.33434 3.9494Q5.61364 4.41797 5.61364 4.98579L5.61364 5.99219L7.25249 5.99219L7.25249 4.98579Q7.25249 4.41797 7.52947 3.9494Q7.80646 3.48082 8.27504 3.20383Q8.74361 2.92685 9.31144 2.92684Q9.87926 2.92684 10.3455 3.20383Q10.8118 3.48082 11.0888 3.9494Q11.3658 4.41797 11.3658 4.98579Q11.3658 5.55362 11.0888 6.02219Q10.8118 6.49077 10.3455 6.76775Q9.87926 7.04474 9.31144 7.04474L8.30043 7.04474L8.30043 8.67898L9.31144 8.67898Q9.87926 8.67898 10.3455 8.95827Q10.8118 9.23757 11.0888 9.70614Q11.3658 10.1747 11.3658 10.7472Q11.3658 11.3104 11.0888 11.7789Q10.8118 12.2475 10.3455 12.5268Q9.87926 12.8061 9.31144 12.8061Q8.74361 12.8061 8.27504 12.5268Q7.80646 12.2475 7.52947 11.7789Q7.25249 11.3104 7.25249 10.7472L7.25249 9.73153L5.61364 9.73153L5.61364 10.7472Q5.61364 11.3104 5.33434 11.7789Q5.05504 12.2475 4.58647 12.5268Q4.1179 12.8061 3.55007 12.8061ZM3.55007 11.7536Q3.97017 11.7536 4.26563 11.4604Q4.56108 11.1673 4.5657 10.7472L4.5657 9.73153L3.55007 9.73153Q3.12997 9.73615 2.83452 10.0293Q2.53906 10.3224 2.53906 10.7472Q2.53906 11.1673 2.83452 11.4604Q3.12997 11.7536 3.55007 11.7536ZM9.31144 11.7536Q9.72692 11.7536 10.0224 11.4604Q10.3178 11.1673 10.3178 10.7472Q10.3178 10.3224 10.0224 10.0293Q9.72692 9.73615 9.31144 9.73153L8.30043 9.73153L8.30043 10.7472Q8.29581 11.1673 8.59357 11.4604Q8.89133 11.7536 9.31144 11.7536ZM3.55007 5.99219L4.5657 5.99219L4.5657 4.98579Q4.56108 4.56569 4.26563 4.27255Q3.97017 3.9794 3.55007 3.9794Q3.12997 3.9794 2.83452 4.27255Q2.53906 4.56569 2.53906 4.98579Q2.53906 5.40589 2.83452 5.70135Q3.12997 5.9968 3.55007 5.99219ZM8.30043 5.99219L9.31144 5.99219Q9.72692 5.9968 10.0224 5.70135Q10.3178 5.40589 10.3178 4.98579Q10.3178 4.56569 10.0224 4.27255Q9.72692 3.9794 9.31144 3.9794Q8.89133 3.9794 8.59357 4.27255Q8.29581 4.56569 8.30043 4.98579L8.30043 5.99219ZM5.61364 8.67898L7.25249 8.67898L7.25249 7.04474L5.61364 7.04474L5.61364 8.67898Z" />
-      </g>
-    </g>
-  </g>
-</svg>

public/ctrl.svg

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg width="24px" height="20px" viewBox="0 0 24 20" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
-  <g id="Ctrl" fill-opacity="1">
-    <path d="M-751 -2016L-751 -2016L-751 -1996L-775 -1996L-775 -2016L-751 -2016Z" id="Ctrl" fill="none" stroke="none" />
-    <path d="M12 0L17.6 0C19.8402 0 20.9603 0 21.816 0.435974Q22.3804 0.723593 22.8284 1.17157Q23.2764 1.61955 23.564 2.18404C24 3.03969 24 4.15979 24 6.4L24 13.6C24 15.8402 24 16.9603 23.564 17.816Q23.2764 18.3804 22.8284 18.8284Q22.3804 19.2764 21.816 19.564C20.9603 20 19.8402 20 17.6 20L6.4 20C4.15979 20 3.03969 20 2.18404 19.564Q1.61955 19.2764 1.17157 18.8284Q0.723594 18.3804 0.435974 17.816C0 16.9603 0 15.8402 0 13.6L0 6.4C0 4.15979 0 3.03969 0.435974 2.18404Q0.723594 1.61955 1.17157 1.17157Q1.61955 0.723594 2.18404 0.435974C3.03969 0 4.15979 0 6.4 0L12 0Z" id="Rectangle" fill="#FFFFFF" fill-opacity="0.050980393" stroke="none" />
-    <path d="M7.97095 9.00977L12 5L16 9.00977" id="Vector" fill="none" fill-rule="evenodd" stroke="#E5E0D5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-  </g>
-</svg>

public/enter.svg

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg width="24px" height="20px" viewBox="0 0 24 20" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
-  <g id="Enter" fill-opacity="1">
-    <path d="M-659 -2016L-659 -2016L-659 -1996L-683 -1996L-683 -2016L-659 -2016Z" id="Enter" fill="none" stroke="none" />
-    <path d="M12 0L17.6 0C19.8402 0 20.9603 0 21.816 0.435974Q22.3804 0.723593 22.8284 1.17157Q23.2764 1.61955 23.564 2.18404C24 3.03969 24 4.15979 24 6.4L24 13.6C24 15.8402 24 16.9603 23.564 17.816Q23.2764 18.3804 22.8284 18.8284Q22.3804 19.2764 21.816 19.564C20.9603 20 19.8402 20 17.6 20L6.4 20C4.15979 20 3.03969 20 2.18404 19.564Q1.61955 19.2764 1.17157 18.8284Q0.723594 18.3804 0.435974 17.816C0 16.9603 0 15.8402 0 13.6L0 6.4C0 4.15979 0 3.03969 0.435974 2.18404Q0.723594 1.61955 1.17157 1.17157Q1.61955 0.723594 2.18404 0.435974C3.03969 0 4.15979 0 6.4 0L12 0Z" id="Rectangle" fill="#FFFFFF" fill-opacity="0.050980393" stroke="none" />
-    <path d="M16.0597 5.48914L16.0597 10.5L7.5 10.5" id="Vector" fill="none" fill-rule="evenodd" stroke="#E5DFD5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M9.5 8.5L9.5 12.5035L7 10.5L9.5 8.5Z" id="Vector" fill="#E5DFD5" fill-rule="evenodd" stroke="#E5DFD5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-  </g>
-</svg>

public/icons/Code.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g>
-    <rect width="18" height="18" />
-    <path id="Shape" d="M3.75 16.0714L11.25 16.0714C12.2855 16.0714 13.125 15.208 13.125 14.1429L13.125 8.02672C13.1248 7.5147 12.9269 7.02399 12.5748 6.66239L8.52375 2.493C8.17225 2.13169 7.69568 1.92868 7.19875 1.92857L3.75 1.92857C2.71447 1.92857 1.875 2.79202 1.875 3.85714L1.875 14.1429C1.875 15.208 2.71447 16.0714 3.75 16.0714M15 8.02672C15.0003 7.00424 14.6053 6.02271 13.9018 5.29904L9.85 1.13143C9.1465 0.406922 8.19178 -0.000123172 7.19625 5.59301e-08L3.75 5.59301e-08C1.67893 5.59301e-08 0 1.7269 0 3.85714L0 14.1429C2.38419e-07 16.2731 1.67893 18 3.75 18L11.25 18C13.3211 18 15 16.2731 15 14.1429L15 8.02672ZM8.4 12.2529C8.03443 11.8764 8.03443 11.2665 8.4 10.89L9.6125 9.64286L8.4 8.39571C8.0558 8.01577 8.06595 7.4237 8.42297 7.05648C8.77999 6.68927 9.35561 6.67882 9.725 7.03286L11.6 8.96143C11.9656 9.33791 11.9656 9.94781 11.6 10.3243L9.725 12.2529C9.35898 12.6289 8.76602 12.6289 8.4 12.2529M6.6 8.39571C6.9442 8.01577 6.93404 7.4237 6.57703 7.05649C6.22001 6.68927 5.64439 6.67882 5.275 7.03286L3.4 8.96143C3.03443 9.33791 3.03443 9.94781 3.4 10.3243L5.275 12.2529C5.50871 12.5108 5.86069 12.617 6.19286 12.5298C6.52502 12.4425 6.7844 12.1757 6.86923 11.8341C6.95406 11.4924 6.85081 11.1304 6.6 10.89L5.3875 9.64286L6.6 8.39571Z" fill="#E5DFD5" fill-rule="evenodd" transform="translate(1.5 -0)" />
-  </g>
-</svg>

public/icons/File.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g>
-    <rect width="18" height="18" />
-    <path id="Shape" d="M11.25 16.0714L3.75 16.0714C2.71447 16.0714 1.875 15.208 1.875 14.1429L1.875 3.85714C1.875 2.79202 2.71447 1.92857 3.75 1.92857L6.25 1.92857L6.25 5.14286C6.25 7.2731 7.92893 9 10 9L13.125 9L13.125 14.1429C13.125 15.208 12.2855 16.0714 11.25 16.0714M12.8788 7.07143C12.7961 6.92188 12.6944 6.78437 12.5763 6.66257L8.5225 2.493C8.40408 2.37151 8.2704 2.26687 8.125 2.18186L8.125 5.14286C8.125 6.20798 8.96447 7.07143 10 7.07143L12.8788 7.07143ZM13.9013 5.29843C14.6049 6.02193 15.0001 7.00338 15 8.02672L15 14.1429C15 16.2731 13.3211 18 11.25 18L3.75 18C1.67893 18 0 16.2731 0 14.1429L0 3.85714C-5.96046e-07 1.7269 1.67893 2.75893e-08 3.75 2.75893e-08L7.19625 2.75893e-08C8.19116 -0.000122281 9.14535 0.406423 9.84875 1.13014L13.9013 5.29843Z" fill="#E5DFD5" fill-rule="evenodd" transform="translate(1.5 -0)" />
-  </g>
-</svg>

public/icons/Image.svg

@@ -1,10 +0,0 @@
-<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1"
-  xmlns:xlink="http://www.w3.org/1999/xlink"
-  xmlns="http://www.w3.org/2000/svg">
-  <g id="Image" fill-opacity="1">
-    <path d="M18 0L18 0L18 18L0 18L0 0L18 0Z" id="Image" fill="none" stroke="none" />
-    <path
-      d="M13.8462 2.07692L4.15385 2.07692C3.00679 2.07692 2.07692 3.00679 2.07692 4.15385L2.07692 11.1143L3.40892 10.1451C4.26934 9.51991 5.43685 9.5289 6.28754 10.1672L7.57246 11.1309L10.8512 8.32016C11.7843 7.52111 13.1676 7.54669 14.0705 8.37969L15.9231 10.0897L15.9231 4.15385C15.9231 3.00679 14.9932 2.07692 13.8462 2.07692M18 12.4588L18 4.15385C18 1.85974 16.1403 0 13.8462 0L4.15385 0C1.85974 0 0 1.85974 0 4.15385L0 13.8462C3.30118e-07 16.1403 1.85974 18 4.15385 18L13.8462 18C16.1403 18 18 16.1403 18 13.8462L18 12.4588ZM15.9231 12.9157L12.6623 9.90554C12.5333 9.78671 12.3358 9.78314 12.2026 9.89723L8.29108 13.2508L7.65831 13.7935L6.99231 13.2937L5.04 11.8302C4.91867 11.7398 4.75269 11.7386 4.63015 11.8274L2.07692 13.6814L2.07692 13.8462C2.07692 14.9932 3.00679 15.9231 4.15385 15.9231L13.8462 15.9231C14.9932 15.9231 15.9231 14.9932 15.9231 13.8462L15.9231 12.9157ZM8.30769 6.23077C8.30769 7.37782 7.37782 8.30769 6.23077 8.30769C5.08372 8.30769 4.15385 7.37782 4.15385 6.23077C4.15385 5.08372 5.08372 4.15385 6.23077 4.15385C7.37782 4.15385 8.30769 5.08372 8.30769 6.23077"
-      id="Shape" fill="#E5DFD5" fill-rule="evenodd" stroke="none" />
-  </g>
-</svg>

public/icons/Link.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g>
-    <rect width="18" height="18" />
-    <path id="Shape" d="M2.68978 6.95235C3.0999 6.55662 3.75151 6.56259 4.1543 6.96577C4.5571 7.36895 4.56246 8.02056 4.16634 8.43031C4.16634 8.43031 3.15364 9.443 3.15364 9.443C1.68651 10.9393 1.69832 13.3381 3.18012 14.8199C4.66192 16.3017 7.06072 16.3135 8.55703 14.8464C8.55703 14.8464 9.56973 13.8337 9.56973 13.8337C9.98137 13.4501 10.6228 13.4614 11.0207 13.8593C11.4185 14.2571 11.4299 14.8986 11.0463 15.3102C11.0463 15.3102 10.035 16.3229 10.035 16.3229C7.71847 18.5799 4.01808 18.5559 1.73113 16.2689C-0.555826 13.982 -0.579909 10.2816 1.67708 7.96504C1.67708 7.96504 2.68978 6.95235 2.68978 6.95235ZM13.8337 9.56973C13.4501 9.98138 13.4614 10.6228 13.8593 11.0207C14.2571 11.4185 14.8986 11.4299 15.3103 11.0463C15.3103 11.0463 16.323 10.035 16.323 10.035C18.58 7.71847 18.5559 4.01808 16.2689 1.73113C13.982 -0.555826 10.2816 -0.579908 7.96505 1.67708C7.96505 1.67708 6.95235 2.68978 6.95235 2.68978C6.55662 3.0999 6.56259 3.75151 6.96577 4.15431C7.36895 4.55711 8.02056 4.56247 8.43031 4.16635C8.43031 4.16635 9.44301 3.15365 9.44301 3.15365C10.9393 1.68652 13.3381 1.69833 14.8199 3.18013C16.3017 4.66192 16.3135 7.06073 14.8464 8.55704C14.8464 8.55704 13.8337 9.56973 13.8337 9.56973ZM12.5242 6.9523C12.8038 6.69186 12.9188 6.29961 12.8243 5.92945C12.7297 5.55928 12.4407 5.27024 12.0705 5.1757C11.7004 5.08117 11.3081 5.19623 11.0477 5.47574C11.0477 5.47574 5.47574 11.0477 5.47574 11.0477C5.19623 11.3081 5.08117 11.7004 5.1757 12.0705C5.27024 12.4407 5.55928 12.7297 5.92945 12.8243C6.29961 12.9188 6.69186 12.8037 6.9523 12.5242C6.9523 12.5242 12.5242 6.9523 12.5242 6.9523Z" fill="#E5DFD5" fill-rule="evenodd" />
-  </g>
-</svg>

public/icons/Text.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g transform="translate(0 0)">
-    <rect width="18" height="18" />
-    <path id="Shape" d="M3.75 16.0714L11.25 16.0714C12.2855 16.0714 13.125 15.208 13.125 14.1429L13.125 8.02672C13.1248 7.5147 12.9269 7.02399 12.5748 6.66239L8.52375 2.493C8.17225 2.13169 7.69568 1.92868 7.19875 1.92857L3.75 1.92857C2.71447 1.92857 1.875 2.79202 1.875 3.85714L1.875 14.1429C1.875 15.208 2.71447 16.0714 3.75 16.0714M15 8.02672C15.0003 7.00424 14.6053 6.02271 13.9018 5.29904L9.85 1.13143C9.1465 0.406922 8.19178 -0.0001232 7.19625 2.79714e-08L3.75 2.79714e-08C1.67893 2.79714e-08 0 1.7269 0 3.85714L0 14.1429C2.38419e-07 16.2731 1.67893 18 3.75 18L11.25 18C13.3211 18 15 16.2731 15 14.1429L15 8.02672ZM3.75 9.32143C3.75 8.78887 4.16973 8.35714 4.6875 8.35714L10.3125 8.35714C10.8303 8.35714 11.25 8.78887 11.25 9.32143C11.25 9.85399 10.8303 10.2857 10.3125 10.2857L4.6875 10.2857C4.16973 10.2857 3.75 9.85399 3.75 9.32143M4.6875 12.2143C4.35256 12.2143 4.04307 12.3981 3.8756 12.6964C3.70813 12.9948 3.70813 13.3624 3.8756 13.6607C4.04307 13.9591 4.35256 14.1429 4.6875 14.1429L7.8125 14.1429C8.14744 14.1429 8.45693 13.9591 8.6244 13.6607C8.79187 13.3624 8.79187 12.9948 8.6244 12.6964C8.45693 12.3981 8.14744 12.2143 7.8125 12.2143L4.6875 12.2143Z" fill="#E5DFD5" fill-rule="evenodd" transform="translate(1.5 -0)" />
-  </g>
-</svg>

public/k.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg width="24px" height="20px" viewBox="0 0 24 20" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
-  <g id="K" fill-opacity="1">
-    <path d="M-751 -2016L-751 -2016L-751 -1996L-775 -1996L-775 -2016L-751 -2016Z" id="K" fill="none" stroke="none" />
-    <path d="M12 0L17.6 0C19.8402 0 20.9603 0 21.816 0.435974Q22.3804 0.723593 22.8284 1.17157Q23.2764 1.61955 23.564 2.18404C24 3.03969 24 4.15979 24 6.4L24 13.6C24 15.8402 24 16.9603 23.564 17.816Q23.2764 18.3804 22.8284 18.8284Q22.3804 19.2764 21.816 19.564C20.9603 20 19.8402 20 17.6 20L6.4 20C4.15979 20 3.03969 20 2.18404 19.564Q1.61955 19.2764 1.17157 18.8284Q0.723594 18.3804 0.435974 17.816C0 16.9603 0 15.8402 0 13.6L0 6.4C0 4.15979 0 3.03969 0.435974 2.18404Q0.723594 1.61955 1.17157 1.17157Q1.61955 0.723594 2.18404 0.435974C3.03969 0 4.15979 0 6.4 0L12 0Z" id="Rectangle" fill="#FFFFFF" fill-opacity="0.050980393" stroke="none" />
-    <g id="K" transform="translate(8 0)">
-      <g transform="translate(0, 2.8945312)" id="K" fill="#E5E0D5">
-        <path d="M1.5 11.5254C1.97461 11.5254 2.25586 11.2383 2.25586 10.7402L2.25586 8.70703L3.13477 7.77539L5.87695 11.127C6.11133 11.4199 6.31641 11.5313 6.61523 11.5313C7.02539 11.5313 7.3418 11.2148 7.3418 10.8047C7.3418 10.6055 7.25391 10.3945 7.04883 10.1426L4.25391 6.76172L6.79688 4.10742C6.97266 3.91992 7.04297 3.76172 7.04297 3.55664C7.04297 3.16992 6.74414 2.86523 6.33984 2.86523C6.09375 2.86523 5.91211 2.95898 5.70703 3.18164L2.30859 6.84961L2.25586 6.84961L2.25586 3.65625C2.25586 3.1582 1.97461 2.87109 1.5 2.87109C1.03125 2.87109 0.744141 3.1582 0.744141 3.65625L0.744141 10.7402C0.744141 11.2383 1.03125 11.5254 1.5 11.5254Z" />
-      </g>
-    </g>
-  </g>
-</svg>

src-tauri/Cargo.toml

@@ -1,53 +1,58 @@
 [package]
 name = "qopy"
-version = "0.3.3"
+version = "0.4.0"
 description = "Qopy"
 authors = ["pandadev"]
 edition = "2021"
 rust-version = "1.70"
 
 [build-dependencies]
-tauri-build = { version = "2.0.3", features = [] }
+tauri-build = { version = "2.0.6", features = [] }
 
 [dependencies]
-tauri = { version = "2.1.1", features = [
+tauri = { version = "2.3.1", features = [
   "macos-private-api",
   "tray-icon",
-  "image-png"
+  "image-png",
 ] }
 tauri-plugin-sql = { version = "2.2.0", features = ["sqlite"] }
 tauri-plugin-autostart = "2.2.0"
-tauri-plugin-os = "2.2.0"
+tauri-plugin-os = "2.2.1"
-tauri-plugin-updater = "2.3.0"
+tauri-plugin-updater = "2.6.0"
 tauri-plugin-dialog = "2.2.0"
 tauri-plugin-fs = "2.2.0"
 tauri-plugin-clipboard = "2.1.11"
-tauri-plugin-prevent-default = "1.0.1"
+tauri-plugin-prevent-default = "1.2.1"
 tauri-plugin-global-shortcut = "2.2.0"
 tauri-plugin-aptabase = { git = "https://github.com/aptabase/tauri-plugin-aptabase", branch = "v2" }
-sqlx = { version = "0.8.2", features = ["runtime-tokio-native-tls", "sqlite", "chrono"] }
+sqlx = { version = "0.8.3", features = [
-serde = { version = "1.0.216", features = ["derive"] }
+  "runtime-tokio-native-tls",
-tokio = { version = "1.42.0", features = ["full"] }
+  "sqlite",
-serde_json = "1.0.134"
+  "chrono",
+] }
+serde = { version = "1.0.219", features = ["derive"] }
+tokio = { version = "1.44.1", features = ["full"] }
+serde_json = "1.0.140"
 rdev = "0.5.3"
-rand = "0.8.5"
+rand = "0.9.0"
 base64 = "0.22.1"
 image = "0.25.5"
-reqwest = { version = "0.12.9", features = ["json", "blocking"] }
+reqwest = { version = "0.12.14", features = ["json", "blocking"] }
 url = "2.5.4"
 regex = "1.11.1"
 sha2 = "0.10.8"
 lazy_static = "1.5.0"
-time = "0.3.37"
+time = "0.3.39"
-global-hotkey = "0.6.3"
+global-hotkey = "0.6.4"
-chrono = { version = "0.4.39", features = ["serde"] }
+chrono = { version = "0.4.40", features = ["serde"] }
-log = { version = "0.4.22", features = ["std"] }
+log = { version = "0.4.26", features = ["std"] }
-uuid = "1.11.0"
+uuid = "1.16.0"
-active-win-pos-rs = "0.8.4"
 include_dir = "0.7.4"
 # hyperpolyglot = { git = "https://github.com/0pandadev/hyperpolyglot" }
-applications = { git = "https://github.com/HuakunShen/applications-rs", branch = "dev" }
+applications = { git = "https://github.com/HuakunShen/applications-rs", branch = "fix/win-app-detection" }
+glob = "0.3.2"
 meta_fetcher = "0.1.1"
+parking_lot = "0.12.3"
 
 [features]
 custom-protocol = ["tauri/custom-protocol"]

src-tauri/src/api/clipboard.rs

@@ -1,14 +1,14 @@
 use tauri_plugin_aptabase::EventTracker;
-use base64::{engine::general_purpose::STANDARD, Engine};
+use base64::{ engine::general_purpose::STANDARD, Engine };
 // use hyperpolyglot;
 use lazy_static::lazy_static;
-use rdev::{simulate, EventType, Key};
+use rdev::{ simulate, EventType, Key };
 use regex::Regex;
 use sqlx::SqlitePool;
 use std::fs;
-use std::sync::atomic::{AtomicBool, Ordering};
+use std::sync::atomic::{ AtomicBool, Ordering };
-use std::{thread, time::Duration};
+use std::{ thread, time::Duration };
-use tauri::{AppHandle, Emitter, Listener, Manager};
+use tauri::{ AppHandle, Emitter, Listener, Manager };
 use tauri_plugin_clipboard::Clipboard;
 use tokio::runtime::Runtime as TokioRuntime;
 use url::Url;
@@ -17,7 +17,7 @@ use uuid::Uuid;
 use crate::db;
 use crate::utils::commands::get_app_info;
 use crate::utils::favicon::fetch_favicon_as_base64;
-use crate::utils::types::{ContentType, HistoryItem};
+use crate::utils::types::{ ContentType, HistoryItem };
 
 lazy_static! {
     static ref IS_PROGRAMMATIC_PASTE: AtomicBool = AtomicBool::new(false);
@@ -27,16 +27,16 @@ lazy_static! {
 pub async fn write_and_paste(
     app_handle: AppHandle,
     content: String,
-    content_type: String,
+    content_type: String
 ) -> Result<(), String> {
     let clipboard = app_handle.state::<Clipboard>();
 
     match content_type.as_str() {
         "text" => clipboard.write_text(content).map_err(|e| e.to_string())?,
+        "link" => clipboard.write_text(content).map_err(|e| e.to_string())?,
+        "color" => clipboard.write_text(content).map_err(|e| e.to_string())?,
         "image" => {
-            clipboard
+            clipboard.write_image_base64(content).map_err(|e| e.to_string())?;
-                .write_image_base64(content)
-                .map_err(|e| e.to_string())?;
         }
         "files" => {
             clipboard
@@ -44,11 +44,13 @@ pub async fn write_and_paste(
                     content
                         .split(", ")
                         .map(|file| file.to_string())
-                        .collect::<Vec<String>>(),
+                        .collect::<Vec<String>>()
                 )
                 .map_err(|e| e.to_string())?;
         }
-        _ => return Err("Unsupported content type".to_string()),
+        _ => {
+            return Err("Unsupported content type".to_string());
+        }
     }
 
     IS_PROGRAMMATIC_PASTE.store(true, Ordering::SeqCst);
@@ -65,7 +67,7 @@ pub async fn write_and_paste(
             EventType::KeyPress(modifier_key),
             EventType::KeyPress(Key::KeyV),
             EventType::KeyRelease(Key::KeyV),
-            EventType::KeyRelease(modifier_key),
+            EventType::KeyRelease(modifier_key)
         ];
 
         for event in events {
@@ -81,9 +83,12 @@ pub async fn write_and_paste(
         IS_PROGRAMMATIC_PASTE.store(false, Ordering::SeqCst);
     });
 
-    let _ = app_handle.track_event("clipboard_paste", Some(serde_json::json!({
+    let _ = app_handle.track_event(
+        "clipboard_paste",
+        Some(serde_json::json!({
         "content_type": content_type
-    })));
+    }))
+    );
 
     Ok(())
 }
@@ -92,9 +97,7 @@ pub fn setup(app: &AppHandle) {
     let app_handle = app.clone();
     let runtime = TokioRuntime::new().expect("Failed to create Tokio runtime");
 
-    app_handle.clone().listen(
+    app_handle.clone().listen("plugin:clipboard://clipboard-monitor/update", move |_event| {
-        "plugin:clipboard://clipboard-monitor/update",
-        move |_event| {
         let app_handle = app_handle.clone();
         runtime.block_on(async move {
             if IS_PROGRAMMATIC_PASTE.load(Ordering::SeqCst) {
@@ -111,14 +114,20 @@ pub fn setup(app: &AppHandle) {
                     if available_types.image {
                         println!("Handling image change");
                         if let Ok(image_data) = clipboard.read_image_base64() {
-                                let file_path = save_image_to_file(&app_handle, &image_data)
+                            let file_path = save_image_to_file(&app_handle, &image_data).await
-                                    .await
                                 .map_err(|e| e.to_string())
                                 .unwrap_or_else(|e| e);
                             let _ = db::history::add_history_item(
                                 app_handle.clone(),
                                 pool,
-                                    HistoryItem::new(app_name, ContentType::Image, file_path, None, app_icon, None)
+                                HistoryItem::new(
+                                    app_name,
+                                    ContentType::Image,
+                                    file_path,
+                                    None,
+                                    app_icon,
+                                    None
+                                )
                             ).await;
                         }
                     } else if available_types.files {
@@ -135,7 +144,7 @@ pub fn setup(app: &AppHandle) {
                                         None,
                                         app_icon.clone(),
                                         None
-                                        ),
+                                    )
                                 ).await;
                             }
                         }
@@ -143,7 +152,9 @@ pub fn setup(app: &AppHandle) {
                         println!("Handling text change");
                         if let Ok(text) = clipboard.read_text() {
                             let text = text.to_string();
-                                let url_regex = Regex::new(r"^https?://(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&//=]*)$").unwrap();
+                            let url_regex = Regex::new(
+                                r"^https?://(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&//=]*)$"
+                            ).unwrap();
 
                             if url_regex.is_match(&text) {
                                 if let Ok(url) = Url::parse(&text) {
@@ -155,7 +166,14 @@ pub fn setup(app: &AppHandle) {
                                     let _ = db::history::add_history_item(
                                         app_handle.clone(),
                                         pool,
-                                            HistoryItem::new(app_name, ContentType::Link, text, favicon, app_icon, None)
+                                        HistoryItem::new(
+                                            app_name,
+                                            ContentType::Link,
+                                            text,
+                                            favicon,
+                                            app_icon,
+                                            None
+                                        )
                                     ).await;
                                 }
                             } else {
@@ -178,13 +196,27 @@ pub fn setup(app: &AppHandle) {
                                     let _ = db::history::add_history_item(
                                         app_handle.clone(),
                                         pool,
-                                            HistoryItem::new(app_name, ContentType::Color, text, None, app_icon, None)
+                                        HistoryItem::new(
+                                            app_name,
+                                            ContentType::Color,
+                                            text,
+                                            None,
+                                            app_icon,
+                                            None
+                                        )
                                     ).await;
                                 } else {
                                     let _ = db::history::add_history_item(
                                         app_handle.clone(),
                                         pool,
-                                            HistoryItem::new(app_name, ContentType::Text, text.clone(), None, app_icon, None)
+                                        HistoryItem::new(
+                                            app_name,
+                                            ContentType::Text,
+                                            text.clone(),
+                                            None,
+                                            app_icon,
+                                            None
+                                        )
                                     ).await;
                                 }
                             }
@@ -199,19 +231,23 @@ pub fn setup(app: &AppHandle) {
             }
 
             let _ = app_handle.emit("clipboard-content-updated", ());
-                let _ = app_handle.track_event("clipboard_copied", Some(serde_json::json!({
+            let _ = app_handle.track_event(
+                "clipboard_copied",
+                Some(
+                    serde_json::json!({
                     "content_type": if available_types.image { "image" }
                         else if available_types.files { "files" }
                         else if available_types.text { "text" }
                         else { "unknown" }
-                })));
+                })
-            });
+                )
-        },
             );
+        });
+    });
 }
 
 async fn get_pool(
-    app_handle: &AppHandle,
+    app_handle: &AppHandle
 ) -> Result<tauri::State<'_, SqlitePool>, Box<dyn std::error::Error + Send + Sync>> {
     Ok(app_handle.state::<SqlitePool>())
 }
@@ -219,9 +255,7 @@ async fn get_pool(
 #[tauri::command]
 pub fn start_monitor(app_handle: AppHandle) -> Result<(), String> {
     let clipboard = app_handle.state::<Clipboard>();
-    clipboard
+    clipboard.start_monitor(app_handle.clone()).map_err(|e| e.to_string())?;
-        .start_monitor(app_handle.clone())
-        .map_err(|e| e.to_string())?;
     app_handle
         .emit("plugin:clipboard://clipboard-monitor/status", true)
         .map_err(|e| e.to_string())?;
@@ -230,7 +264,7 @@ pub fn start_monitor(app_handle: AppHandle) -> Result<(), String> {
 
 async fn save_image_to_file(
     app_handle: &AppHandle,
-    base64_data: &str,
+    base64_data: &str
 ) -> Result<String, Box<dyn std::error::Error>> {
     let app_data_dir = app_handle.path().app_data_dir().unwrap();
     let images_dir = app_data_dir.join("images");

src-tauri/src/api/hotkeys.rs

@@ -1,128 +1,128 @@
-use tauri_plugin_aptabase::EventTracker;
 use crate::utils::commands::center_window_on_current_monitor;
+use crate::utils::keys::KeyCode;
 use global_hotkey::{
-    hotkey::{Code, HotKey, Modifiers},
+    hotkey::{ Code, HotKey, Modifiers },
-    GlobalHotKeyEvent, GlobalHotKeyManager, HotKeyState,
+    GlobalHotKeyEvent,
+    GlobalHotKeyManager,
+    HotKeyState,
 };
-use std::cell::RefCell;
+use parking_lot::Mutex;
 use std::str::FromStr;
-use tauri::{AppHandle, Listener, Manager};
+use std::sync::Arc;
+use tauri::{ AppHandle, Manager, Listener };
+use tauri_plugin_aptabase::EventTracker;
 
-thread_local! {
+#[derive(Default)]
-    static HOTKEY_MANAGER: RefCell<Option<GlobalHotKeyManager>> = RefCell::new(None);
+struct HotkeyState {
+    manager: Option<GlobalHotKeyManager>,
+    registered_hotkey: Option<HotKey>,
 }
 
-pub fn setup(app_handle: tauri::AppHandle) {
+unsafe impl Send for HotkeyState {}
-    let app_handle_clone = app_handle.clone();
 
-    let manager = GlobalHotKeyManager::new().expect("Failed to initialize hotkey manager");
+pub fn setup(app_handle: tauri::AppHandle) {
-    HOTKEY_MANAGER.with(|m| *m.borrow_mut() = Some(manager));
+    let state = Arc::new(Mutex::new(HotkeyState::default()));
+    let manager = match GlobalHotKeyManager::new() {
+        Ok(manager) => manager,
+        Err(err) => {
+            eprintln!("Failed to initialize hotkey manager: {:?}", err);
+            return;
+        }
+    };
+
+    {
+        let mut hotkey_state = state.lock();
+        hotkey_state.manager = Some(manager);
+    }
 
     let rt = app_handle.state::<tokio::runtime::Runtime>();
     let initial_keybind = rt
-        .block_on(crate::db::settings::get_keybind(app_handle_clone.clone()))
+        .block_on(crate::db::settings::get_keybind(app_handle.clone()))
         .expect("Failed to get initial keybind");
-    let initial_shortcut = initial_keybind.join("+");
 
-    let initial_shortcut_for_update = initial_shortcut.clone();
+    if let Err(e) = register_shortcut(&state, &initial_keybind) {
-    let initial_shortcut_for_save = initial_shortcut.clone();
-
-    if let Err(e) = register_shortcut(&initial_shortcut) {
         eprintln!("Error registering initial shortcut: {:?}", e);
     }
 
+    let state_clone = Arc::clone(&state);
     app_handle.listen("update-shortcut", move |event| {
-        let payload_str = event.payload().to_string();
+        let payload_str = event.payload().replace("\\\"", "\"");
+        let trimmed_str = payload_str.trim_matches('"');
+        unregister_current_hotkey(&state_clone);
         
-        if let Ok(old_hotkey) = parse_hotkey(&initial_shortcut_for_update) {
+        let payload: Vec<String> = serde_json::from_str(trimmed_str).unwrap_or_default();
-            HOTKEY_MANAGER.with(|manager| {
+        if let Err(e) = register_shortcut(&state_clone, &payload) {
-                if let Some(manager) = manager.borrow().as_ref() {
-                    let _ = manager.unregister(old_hotkey);
-                }
-            });
-        }
-
-        if let Err(e) = register_shortcut(&payload_str) {
             eprintln!("Error re-registering shortcut: {:?}", e);
         }
     });
 
+    let state_clone = Arc::clone(&state);
     app_handle.listen("save_keybind", move |event| {
         let payload_str = event.payload().to_string();
+        unregister_current_hotkey(&state_clone);
         
-        if let Ok(old_hotkey) = parse_hotkey(&initial_shortcut_for_save) {
+        let payload: Vec<String> = serde_json::from_str(&payload_str).unwrap_or_default();
-            HOTKEY_MANAGER.with(|manager| {
+        if let Err(e) = register_shortcut(&state_clone, &payload) {
-                if let Some(manager) = manager.borrow().as_ref() {
-                    let _ = manager.unregister(old_hotkey);
-                }
-            });
-        }
-
-        if let Err(e) = register_shortcut(&payload_str) {
             eprintln!("Error registering saved shortcut: {:?}", e);
         }
     });
 
-    let app_handle_for_hotkey = app_handle.clone();
+    setup_hotkey_receiver(app_handle);
-    tauri::async_runtime::spawn(async move {
+}
+
+fn setup_hotkey_receiver(app_handle: AppHandle) {
+    std::thread::spawn(move || {
         loop {
             match GlobalHotKeyEvent::receiver().recv() {
                 Ok(event) => {
                     if event.state == HotKeyState::Released {
                         continue;
                     }
-                    handle_hotkey_event(&app_handle_for_hotkey);
+                    handle_hotkey_event(&app_handle);
-                }
-                Err(e) => {
-                    eprintln!("Error receiving hotkey event: {:?}", e);
                 }
+                Err(e) => eprintln!("Error receiving hotkey event: {:?}", e),
             }
         }
     });
 }
 
-fn register_shortcut(shortcut: &str) -> Result<(), Box<dyn std::error::Error>> {
+fn unregister_current_hotkey(state: &Arc<Mutex<HotkeyState>>) {
-    let hotkey = parse_hotkey(shortcut)?;
+    let mut hotkey_state = state.lock();
-    HOTKEY_MANAGER.with(|manager| {
+    if let Some(old_hotkey) = hotkey_state.registered_hotkey.take() {
-        if let Some(manager) = manager.borrow().as_ref() {
+        if let Some(manager) = &hotkey_state.manager {
-            manager.register(hotkey)?;
+            let _ = manager.unregister(old_hotkey);
+        }
     }
-        Ok(())
-    })
 }
 
-fn parse_hotkey(shortcut: &str) -> Result<HotKey, Box<dyn std::error::Error>> {
+fn register_shortcut(state: &Arc<Mutex<HotkeyState>>, shortcut: &[String]) -> Result<(), Box<dyn std::error::Error>> {
+    let hotkey = parse_hotkey(shortcut)?;
+    let mut hotkey_state = state.lock();
+
+    if let Some(manager) = &hotkey_state.manager {
+        manager.register(hotkey.clone())?;
+        hotkey_state.registered_hotkey = Some(hotkey);
+        Ok(())
+    } else {
+        Err("Hotkey manager not initialized".into())
+    }
+}
+
+fn parse_hotkey(shortcut: &[String]) -> Result<HotKey, Box<dyn std::error::Error>> {
     let mut modifiers = Modifiers::empty();
     let mut code = None;
 
-    let shortcut = shortcut.replace("\"", "");
+    for part in shortcut {
-
-    for part in shortcut.split('+') {
-        let part = part.trim().to_lowercase();
         match part.as_str() {
-            "ctrl" | "control" | "controlleft" => modifiers |= Modifiers::CONTROL,
+            "ControlLeft" => modifiers |= Modifiers::CONTROL,
-            "alt" | "altleft" | "optionleft" => modifiers |= Modifiers::ALT,
+            "AltLeft" => modifiers |= Modifiers::ALT,
-            "shift" | "shiftleft" => modifiers |= Modifiers::SHIFT,
+            "ShiftLeft" => modifiers |= Modifiers::SHIFT,
-            "super" | "meta" | "cmd" | "metaleft" => modifiers |= Modifiers::META,
+            "MetaLeft" => modifiers |= Modifiers::META,
-            key => {
+            key => code = Some(Code::from(KeyCode::from_str(key)?)),
-                let key_code = if key.starts_with("key") {
-                    "Key".to_string() + &key[3..].to_uppercase()
-                } else if key.len() == 1 && key.chars().next().unwrap().is_alphabetic() {
-                    "Key".to_string() + &key.to_uppercase()
-                } else {
-                    key.to_string()
-                };
-
-                code = Some(
-                    Code::from_str(&key_code)
-                        .map_err(|_| format!("Invalid key code: {}", key_code))?,
-                );
-            }
         }
     }
 
-    let key_code =
+    let key_code = code.ok_or_else(|| "No valid key code found".to_string())?;
-        code.ok_or_else(|| format!("No valid key code found in shortcut: {}", shortcut))?;
     Ok(HotKey::new(Some(modifiers), key_code))
 }
 
@@ -144,7 +144,12 @@ fn handle_hotkey_event(app_handle: &AppHandle) {
         center_window_on_current_monitor(&window);
     }
 
-    let _ = app_handle.track_event("hotkey_triggered", Some(serde_json::json!({
+    let _ = app_handle.track_event(
+        "hotkey_triggered",
+        Some(
+            serde_json::json!({
                 "action": if window.is_visible().unwrap() { "hide" } else { "show" }
-    })));
+            })
+        )
+    );
 }

src-tauri/src/api/tray.rs

@@ -1,16 +1,15 @@
-use tauri::{
+use tauri::{ menu::{ MenuBuilder, MenuItemBuilder }, tray::TrayIconBuilder, Emitter, Manager };
-    menu::{MenuBuilder, MenuItemBuilder},
-    tray::TrayIconBuilder,
-    Emitter, Manager,
-};
 use tauri_plugin_aptabase::EventTracker;
 
 pub fn setup(app: &mut tauri::App) -> Result<(), Box<dyn std::error::Error>> {
     let window = app.get_webview_window("main").unwrap();
     let is_visible = window.is_visible().unwrap();
-    let _ = app.track_event("tray_toggle", Some(serde_json::json!({
+    let _ = app.track_event(
+        "tray_toggle",
+        Some(serde_json::json!({
         "action": if is_visible { "hide" } else { "show" }
-    })));
+    }))
+    );
 
     let icon_bytes = include_bytes!("../../icons/Square71x71Logo.png");
     let icon = tauri::image::Image::from_bytes(icon_bytes).unwrap();
@@ -18,23 +17,27 @@ pub fn setup(app: &mut tauri::App) -> Result<(), Box<dyn std::error::Error>> {
     let _tray = TrayIconBuilder::new()
         .menu(
             &MenuBuilder::new(app)
-                .items(&[&MenuItemBuilder::with_id("app_name", "Qopy")
+                .items(&[&MenuItemBuilder::with_id("app_name", "Qopy").enabled(false).build(app)?])
-                    .enabled(false)
-                    .build(app)?])
                 .items(&[&MenuItemBuilder::with_id("show", "Show/Hide").build(app)?])
-                .items(&[&MenuItemBuilder::with_id("keybind", "Change keybind").build(app)?])
+                .items(&[&MenuItemBuilder::with_id("settings", "Settings").build(app)?])
                 .items(&[&MenuItemBuilder::with_id("quit", "Quit").build(app)?])
-                .build()?,
+                .build()?
         )
-        .on_menu_event(move |_app, event| match event.id().as_ref() {
+        .on_menu_event(move |_app, event| {
+            match event.id().as_ref() {
                 "quit" => {
                     let _ = _app.track_event("app_quit", None);
                     std::process::exit(0);
                 }
                 "show" => {
-                let _ = _app.track_event("tray_toggle", Some(serde_json::json!({
+                    let _ = _app.track_event(
+                        "tray_toggle",
+                        Some(
+                            serde_json::json!({
                     "action": if is_visible { "hide" } else { "show" }
-                })));
+                })
+                        )
+                    );
                     let is_visible = window.is_visible().unwrap();
                     if is_visible {
                         window.hide().unwrap();
@@ -44,11 +47,12 @@ pub fn setup(app: &mut tauri::App) -> Result<(), Box<dyn std::error::Error>> {
                     }
                     window.emit("main_route", ()).unwrap();
                 }
-            "keybind" => {
+                "settings" => {
-                let _ = _app.track_event("tray_keybind_change", None);
+                    let _ = _app.track_event("tray_settings", None);
-                window.emit("change_keybind", ()).unwrap();
+                    window.emit("settings", ()).unwrap();
                 }
                 _ => (),
+            }
         })
         .icon(icon)
         .build(app)?;

src-tauri/src/api/updater.rs

@@ -1,8 +1,8 @@
-use tauri::{async_runtime, AppHandle};
+use tauri::{ async_runtime, AppHandle, Manager };
-use tauri_plugin_dialog::{DialogExt, MessageDialogButtons, MessageDialogKind};
+use tauri_plugin_dialog::{ DialogExt, MessageDialogButtons, MessageDialogKind };
 use tauri_plugin_updater::UpdaterExt;
 
-pub async fn check_for_updates(app: AppHandle) {
+pub async fn check_for_updates(app: AppHandle, prompted: bool) {
     println!("Checking for updates...");
 
     let updater = app.updater().unwrap();
@@ -18,21 +18,42 @@ pub async fn check_for_updates(app: AppHandle) {
                 "Would you like to install it now?",
             ]);
 
+            let window = app.get_webview_window("main").unwrap();
+            window.show().unwrap();
+            window.set_focus().unwrap();
+
             app.dialog()
                 .message(msg)
                 .title("Qopy Update Available")
-                .buttons(MessageDialogButtons::OkCancelCustom(String::from("Install"), String::from("Cancel")))
+                .buttons(
+                    MessageDialogButtons::OkCancelCustom(
+                        String::from("Install"),
+                        String::from("Cancel")
+                    )
+                )
                 .show(move |response| {
                     if !response {
                         return;
                     }
                     async_runtime::spawn(async move {
-                        match update.download_and_install(|_, _| {}, || {}).await {
+                        match
+                            update.download_and_install(
+                                |_, _| {},
+                                || {}
+                            ).await
+                        {
                             Ok(_) => {
                                 app.dialog()
-                                    .message("Update installed successfully. The application needs to restart to apply the changes.")
+                                    .message(
+                                        "Update installed successfully. The application needs to restart to apply the changes."
+                                    )
                                     .title("Qopy Update Installed")
-                                    .buttons(MessageDialogButtons::OkCancelCustom(String::from("Restart"), String::from("Cancel")))
+                                    .buttons(
+                                        MessageDialogButtons::OkCancelCustom(
+                                            String::from("Restart"),
+                                            String::from("Cancel")
+                                        )
+                                    )
                                     .show(move |response| {
                                         if response {
                                             app.restart();
@@ -42,7 +63,9 @@ pub async fn check_for_updates(app: AppHandle) {
                             Err(e) => {
                                 println!("Error installing new update: {:?}", e);
                                 app.dialog()
-                                    .message("Failed to install new update. The new update can be downloaded from Github")
+                                    .message(
+                                        "Failed to install new update. The new update can be downloaded from Github"
+                                    )
                                     .kind(MessageDialogKind::Error)
                                     .show(|_| {});
                             }
@@ -50,9 +73,22 @@ pub async fn check_for_updates(app: AppHandle) {
                     });
                 });
         }
-        Ok(None) => println!("No updates available."),
+        Ok(None) => {
+            println!("No updates available.");
+        }
         Err(e) => {
-            println!("Failed to check for updates: {:?}", e);
+            if prompted {
+                let window = app.get_webview_window("main").unwrap();
+                window.show().unwrap();
+                window.set_focus().unwrap();
+
+                app.dialog()
+                    .message("No updates available.")
+                    .title("Qopy Update Check")
+                    .show(|_| {});
+            }
+
+            println!("No updates available. {}", e.to_string());
         }
     }
 }

src-tauri/src/db/database.rs

@@ -1,5 +1,5 @@
-use include_dir::{include_dir, Dir};
+use include_dir::{ include_dir, Dir };
-use sqlx::sqlite::{SqlitePool, SqlitePoolOptions};
+use sqlx::sqlite::{ SqlitePool, SqlitePoolOptions };
 use std::fs;
 use tauri::Manager;
 use tokio::runtime::Runtime as TokioRuntime;
@@ -25,8 +25,7 @@ pub fn setup(app: &mut tauri::App) -> Result<(), Box<dyn std::error::Error>> {
     let pool = rt.block_on(async {
         SqlitePoolOptions::new()
             .max_connections(5)
-            .connect(&db_url)
+            .connect(&db_url).await
-            .await
             .expect("Failed to create pool")
     });
 
@@ -49,29 +48,27 @@ pub fn setup(app: &mut tauri::App) -> Result<(), Box<dyn std::error::Error>> {
 }
 
 async fn apply_migrations(pool: &SqlitePool) -> Result<(), Box<dyn std::error::Error>> {
-    sqlx::query(
+    sqlx
+        ::query(
             "CREATE TABLE IF NOT EXISTS schema_version (
             version INTEGER PRIMARY KEY,
             applied_at DATETIME DEFAULT CURRENT_TIMESTAMP
-        );",
+        );"
         )
-    .execute(pool)
+        .execute(pool).await?;
-    .await?;
 
-    let current_version: Option<i64> =
+    let current_version: Option<i64> = sqlx
-        sqlx::query_scalar("SELECT MAX(version) FROM schema_version")
+        ::query_scalar("SELECT MAX(version) FROM schema_version")
-            .fetch_one(pool)
+        .fetch_one(pool).await?;
-            .await?;
 
     let current_version = current_version.unwrap_or(0);
 
-    let mut migration_files: Vec<(i64, &str)> = MIGRATIONS_DIR
+    let mut migration_files: Vec<(i64, &str)> = MIGRATIONS_DIR.files()
-        .files()
         .filter_map(|file| {
             let file_name = file.path().file_name()?.to_str()?;
-            if file_name.ends_with(".sql") && file_name.starts_with("migration") {
+            if file_name.ends_with(".sql") && file_name.starts_with("v") {
                 let version: i64 = file_name
-                    .trim_start_matches("migration")
+                    .trim_start_matches("v")
                     .trim_end_matches(".sql")
                     .parse()
                     .ok()?;
@@ -93,16 +90,16 @@ async fn apply_migrations(pool: &SqlitePool) -> Result<(), Box<dyn std::error::E
                 .collect();
 
             for statement in statements {
-                sqlx::query(statement)
+                sqlx
-                    .execute(pool)
+                    ::query(statement)
-                    .await
+                    .execute(pool).await
                     .map_err(|e| format!("Failed to execute migration {}: {}", version, e))?;
             }
 
-            sqlx::query("INSERT INTO schema_version (version) VALUES (?)")
+            sqlx
+                ::query("INSERT INTO schema_version (version) VALUES (?)")
                 .bind(version)
-                .execute(pool)
+                .execute(pool).await?;
-                .await?;
         }
     }
 

src-tauri/src/db/history.rs

@@ -1,13 +1,13 @@
-use crate::utils::types::{ContentType, HistoryItem};
+use crate::utils::types::{ ContentType, HistoryItem };
-use base64::{engine::general_purpose::STANDARD, Engine};
+use base64::{ engine::general_purpose::STANDARD, Engine };
-use rand::distributions::Alphanumeric;
+use rand::{ rng, Rng };
-use rand::{thread_rng, Rng};
+use rand::distr::Alphanumeric;
-use sqlx::{Row, SqlitePool};
+use sqlx::{ Row, SqlitePool };
 use std::fs;
 use tauri_plugin_aptabase::EventTracker;
 
 pub async fn initialize_history(pool: &SqlitePool) -> Result<(), Box<dyn std::error::Error>> {
-    let id: String = thread_rng()
+    let id: String = rng()
         .sample_iter(&Alphanumeric)
         .take(16)
         .map(char::from)
@@ -20,19 +20,18 @@ pub async fn initialize_history(pool: &SqlitePool) -> Result<(), Box<dyn std::er
     .bind("System")
     .bind("text")
     .bind("Welcome to your clipboard history!")
-    .execute(pool)
+    .execute(pool).await?;
-    .await?;
 
     Ok(())
 }
 
 #[tauri::command]
 pub async fn get_history(pool: tauri::State<'_, SqlitePool>) -> Result<Vec<HistoryItem>, String> {
-    let rows = sqlx::query(
+    let rows = sqlx
-        "SELECT id, source, source_icon, content_type, content, favicon, timestamp, language FROM history ORDER BY timestamp DESC",
+        ::query(
+            "SELECT id, source, source_icon, content_type, content, favicon, timestamp, language FROM history ORDER BY timestamp DESC"
         )
-    .fetch_all(&*pool)
+        .fetch_all(&*pool).await
-    .await
         .map_err(|e| e.to_string())?;
 
     let items = rows
@@ -56,31 +55,32 @@ pub async fn get_history(pool: tauri::State<'_, SqlitePool>) -> Result<Vec<Histo
 pub async fn add_history_item(
     app_handle: tauri::AppHandle,
     pool: tauri::State<'_, SqlitePool>,
-    item: HistoryItem,
+    item: HistoryItem
 ) -> Result<(), String> {
     let (id, source, source_icon, content_type, content, favicon, timestamp, language) =
         item.to_row();
 
-    let existing = sqlx::query("SELECT id FROM history WHERE content = ? AND content_type = ?")
+    let existing = sqlx
+        ::query("SELECT id FROM history WHERE content = ? AND content_type = ?")
         .bind(&content)
         .bind(&content_type)
-        .fetch_optional(&*pool)
+        .fetch_optional(&*pool).await
-        .await
         .map_err(|e| e.to_string())?;
 
     match existing {
         Some(_) => {
-            sqlx::query(
+            sqlx
+                ::query(
                     "UPDATE history SET timestamp = strftime('%Y-%m-%dT%H:%M:%f+00:00', 'now') WHERE content = ? AND content_type = ?"
                 )
                 .bind(&content)
                 .bind(&content_type)
-            .execute(&*pool)
+                .execute(&*pool).await
-            .await
                 .map_err(|e| e.to_string())?;
         }
         None => {
-            sqlx::query(
+            sqlx
+                ::query(
                     "INSERT INTO history (id, source, source_icon, content_type, content, favicon, timestamp, language) VALUES (?, ?, ?, ?, ?, ?, ?, ?)"
                 )
                 .bind(id)
@@ -91,15 +91,17 @@ pub async fn add_history_item(
                 .bind(favicon)
                 .bind(timestamp)
                 .bind(language)
-            .execute(&*pool)
+                .execute(&*pool).await
-            .await
                 .map_err(|e| e.to_string())?;
         }
     }
 
-    let _ = app_handle.track_event("history_item_added", Some(serde_json::json!({
+    let _ = app_handle.track_event(
+        "history_item_added",
+        Some(serde_json::json!({
         "content_type": item.content_type.to_string()
-    })));
+    }))
+    );
 
     Ok(())
 }
@@ -107,20 +109,29 @@ pub async fn add_history_item(
 #[tauri::command]
 pub async fn search_history(
     pool: tauri::State<'_, SqlitePool>,
-    query: String,
+    query: String
 ) -> Result<Vec<HistoryItem>, String> {
+    if query.trim().is_empty() {
+        return Ok(Vec::new());
+    }
+
     let query = format!("%{}%", query);
-    let rows = sqlx::query(
+    
-        "SELECT id, source, source_icon, content_type, content, favicon, timestamp, language FROM history WHERE content LIKE ? ORDER BY timestamp DESC"
+    let rows = sqlx
+        ::query(
+            "SELECT id, source, source_icon, content_type, content, favicon, timestamp, language 
+             FROM history 
+             WHERE content LIKE ? 
+             ORDER BY timestamp DESC
+             LIMIT 100"
         )
         .bind(query)
-    .fetch_all(&*pool)
+        .fetch_all(&*pool).await
-    .await
         .map_err(|e| e.to_string())?;
 
-    let items = rows
+    let mut items = Vec::with_capacity(rows.len());
-        .iter()
+    for row in rows.iter() {
-        .map(|row| HistoryItem {
+        items.push(HistoryItem {
             id: row.get("id"),
             source: row.get("source"),
             source_icon: row.get("source_icon"),
@@ -129,8 +140,8 @@ pub async fn search_history(
             favicon: row.get("favicon"),
             timestamp: row.get("timestamp"),
             language: row.get("language"),
-        })
+        });
-        .collect();
+    }
 
     Ok(items)
 }
@@ -139,15 +150,15 @@ pub async fn search_history(
 pub async fn load_history_chunk(
     pool: tauri::State<'_, SqlitePool>,
     offset: i64,
-    limit: i64,
+    limit: i64
 ) -> Result<Vec<HistoryItem>, String> {
-    let rows = sqlx::query(
+    let rows = sqlx
+        ::query(
             "SELECT id, source, source_icon, content_type, content, favicon, timestamp, language FROM history ORDER BY timestamp DESC LIMIT ? OFFSET ?"
         )
         .bind(limit)
         .bind(offset)
-    .fetch_all(&*pool)
+        .fetch_all(&*pool).await
-    .await
         .map_err(|e| e.to_string())?;
 
     let items = rows
@@ -171,12 +182,12 @@ pub async fn load_history_chunk(
 pub async fn delete_history_item(
     app_handle: tauri::AppHandle,
     pool: tauri::State<'_, SqlitePool>,
-    id: String,
+    id: String
 ) -> Result<(), String> {
-    sqlx::query("DELETE FROM history WHERE id = ?")
+    sqlx
+        ::query("DELETE FROM history WHERE id = ?")
         .bind(id)
-        .execute(&*pool)
+        .execute(&*pool).await
-        .await
         .map_err(|e| e.to_string())?;
 
     let _ = app_handle.track_event("history_item_deleted", None);
@@ -189,9 +200,9 @@ pub async fn clear_history(
     app_handle: tauri::AppHandle,
     pool: tauri::State<'_, SqlitePool>
 ) -> Result<(), String> {
-    sqlx::query("DELETE FROM history")
+    sqlx
-        .execute(&*pool)
+        ::query("DELETE FROM history")
-        .await
+        .execute(&*pool).await
         .map_err(|e| e.to_string())?;
 
     let _ = app_handle.track_event("history_cleared", None);

src-tauri/src/db/migrations/v3.sql

@@ -0,0 +1 @@
+INSERT INTO settings (key, value) VALUES ('autostart', 'true');

src-tauri/src/db/settings.rs

@@ -1,8 +1,8 @@
-use serde::{Deserialize, Serialize};
+use serde::{ Deserialize, Serialize };
 use serde_json;
 use sqlx::Row;
 use sqlx::SqlitePool;
-use tauri::{Emitter, Manager};
+use tauri::{ Emitter, Manager };
 use tauri_plugin_aptabase::EventTracker;
 
 #[derive(Deserialize, Serialize)]
@@ -16,38 +16,10 @@ pub async fn initialize_settings(pool: &SqlitePool) -> Result<(), Box<dyn std::e
     };
     let json = serde_json::to_string(&default_keybind)?;
 
-    sqlx::query("INSERT INTO settings (key, value) VALUES ('keybind', ?)")
+    sqlx
+        ::query("INSERT INTO settings (key, value) VALUES ('keybind', ?)")
         .bind(json)
-        .execute(pool)
+        .execute(pool).await?;
-        .await?;
-
-    Ok(())
-}
-
-#[tauri::command]
-pub async fn save_keybind(
-    app_handle: tauri::AppHandle,
-    pool: tauri::State<'_, SqlitePool>,
-    keybind: Vec<String>,
-) -> Result<(), String> {
-    let keybind_str = keybind.join("+");
-    let keybind_clone = keybind_str.clone();
-    
-    app_handle
-        .emit("update-shortcut", &keybind_str)
-        .map_err(|e| e.to_string())?;
-
-    let json = serde_json::to_string(&keybind).map_err(|e| e.to_string())?;
-
-    sqlx::query("INSERT OR REPLACE INTO settings (key, value) VALUES ('keybind', ?)")
-        .bind(json)
-        .execute(&*pool)
-        .await
-        .map_err(|e| e.to_string())?;
-
-    let _ = app_handle.track_event("keybind_saved", Some(serde_json::json!({
-        "keybind": keybind_clone
-    })));
 
     Ok(())
 }
@@ -55,12 +27,12 @@ pub async fn save_keybind(
 #[tauri::command]
 pub async fn get_setting(
     pool: tauri::State<'_, SqlitePool>,
-    key: String,
+    key: String
 ) -> Result<String, String> {
-    let row = sqlx::query("SELECT value FROM settings WHERE key = ?")
+    let row = sqlx
+        ::query("SELECT value FROM settings WHERE key = ?")
         .bind(key)
-        .fetch_optional(&*pool)
+        .fetch_optional(&*pool).await
-        .await
         .map_err(|e| e.to_string())?;
 
     Ok(row.map(|r| r.get("value")).unwrap_or_default())
@@ -71,18 +43,25 @@ pub async fn save_setting(
     app_handle: tauri::AppHandle,
     pool: tauri::State<'_, SqlitePool>,
     key: String,
-    value: String,
+    value: String
 ) -> Result<(), String> {
-    sqlx::query("INSERT OR REPLACE INTO settings (key, value) VALUES (?, ?)")
+    sqlx
+        ::query("INSERT OR REPLACE INTO settings (key, value) VALUES (?, ?)")
         .bind(key.clone())
-        .bind(value)
+        .bind(value.clone())
-        .execute(&*pool)
+        .execute(&*pool).await
-        .await
         .map_err(|e| e.to_string())?;
 
-    let _ = app_handle.track_event("setting_saved", Some(serde_json::json!({
+    let _ = app_handle.track_event(
+        "setting_saved",
+        Some(serde_json::json!({
         "key": key
-    })));
+    }))
+    );
+
+    if key == "keybind" {
+        let _ = app_handle.emit("update-shortcut", &value).map_err(|e| e.to_string())?;
+    }
 
     Ok(())
 }
@@ -91,13 +70,16 @@ pub async fn save_setting(
 pub async fn get_keybind(app_handle: tauri::AppHandle) -> Result<Vec<String>, String> {
     let pool = app_handle.state::<SqlitePool>();
 
-    let row = sqlx::query("SELECT value FROM settings WHERE key = 'keybind'")
+    let row = sqlx
-        .fetch_optional(&*pool)
+        ::query("SELECT value FROM settings WHERE key = 'keybind'")
-        .await
+        .fetch_optional(&*pool).await
         .map_err(|e| e.to_string())?;
 
-    let json = row.map(|r| r.get::<String, _>("value")).unwrap_or_else(|| {
+    let json = row
-        serde_json::to_string(&vec!["Meta".to_string(), "V".to_string()])
+        .map(|r| r.get::<String, _>("value"))
+        .unwrap_or_else(|| {
+            serde_json
+                ::to_string(&vec!["MetaLeft".to_string(), "KeyV".to_string()])
                 .expect("Failed to serialize default keybind")
         });
 

src-tauri/src/main.rs

@@ -1,55 +1,65 @@
-#![cfg_attr(
+#![cfg_attr(all(not(debug_assertions), target_os = "windows"), windows_subsystem = "windows")]
-    all(not(debug_assertions), target_os = "windows"),
-    windows_subsystem = "windows"
-)]
 
 mod api;
 mod db;
 mod utils;
 
+use sqlx::sqlite::SqlitePoolOptions;
 use std::fs;
 use tauri::Manager;
-use tauri::WebviewUrl;
+use tauri_plugin_aptabase::{ EventTracker, InitOptions };
-use tauri::WebviewWindow;
-use sqlx::sqlite::SqlitePoolOptions;
 use tauri_plugin_autostart::MacosLauncher;
 use tauri_plugin_prevent_default::Flags;
-use tauri_plugin_aptabase::{EventTracker, InitOptions};
 
 fn main() {
     let runtime = tokio::runtime::Runtime::new().expect("Failed to create Tokio runtime");
     let _guard = runtime.enter();
 
-    tauri::Builder::default()
+    tauri::Builder
+        ::default()
         .plugin(tauri_plugin_clipboard::init())
         .plugin(tauri_plugin_os::init())
         .plugin(tauri_plugin_sql::Builder::default().build())
         .plugin(tauri_plugin_dialog::init())
         .plugin(tauri_plugin_fs::init())
         .plugin(tauri_plugin_updater::Builder::default().build())
-        .plugin(tauri_plugin_aptabase::Builder::new("A-SH-8937252746")
+        .plugin(
+            tauri_plugin_aptabase::Builder
+                ::new("A-SH-8937252746")
                 .with_options(InitOptions {
                     host: Some("https://aptabase.pandadev.net".to_string()),
                     flush_interval: None,
                 })
-            .with_panic_hook(Box::new(|client, info, msg| {
+                .with_panic_hook(
-                let location = info.location().map(|loc| format!("{}:{}:{}", loc.file(), loc.line(), loc.column())).unwrap_or_else(|| "".to_string());
+                    Box::new(|client, info, msg| {
+                        let location = info
+                            .location()
+                            .map(|loc| format!("{}:{}:{}", loc.file(), loc.line(), loc.column()))
+                            .unwrap_or_else(|| "".to_string());
 
-                let _ = client.track_event("panic", Some(serde_json::json!({
+                        let _ = client.track_event(
+                            "panic",
+                            Some(
+                                serde_json::json!({
                             "info": format!("{} ({})", msg, location),
-                })));
+                        })
-            }))
+                            )
-            .build())
+                        );
-        .plugin(tauri_plugin_autostart::init(
+                    })
-            MacosLauncher::LaunchAgent,
+                )
-            Some(vec![]),
+                .build()
-        ))
+        )
+        .plugin(tauri_plugin_autostart::init(MacosLauncher::LaunchAgent, Some(vec![])))
         .plugin(
-            tauri_plugin_prevent_default::Builder::new()
+            tauri_plugin_prevent_default::Builder
+                ::new()
                 .with_flags(Flags::all().difference(Flags::CONTEXT_MENU))
-                .build(),
+                .build()
         )
         .setup(|app| {
+            #[cfg(target_os = "macos")]
+            app.set_activation_policy(tauri::ActivationPolicy::Accessory);
+            
             let app_data_dir = app.path().app_data_dir().unwrap();
             utils::logger::init_logger(&app_data_dir).expect("Failed to initialize logger");
 
@@ -69,29 +79,13 @@ fn main() {
             tauri::async_runtime::spawn(async move {
                 let pool = SqlitePoolOptions::new()
                     .max_connections(5)
-                    .connect(&db_url)
+                    .connect(&db_url).await
-                    .await
                     .expect("Failed to create pool");
 
                 app_handle_clone.manage(pool);
             });
 
-            let main_window = if let Some(window) = app.get_webview_window("main") {
+            let main_window = app.get_webview_window("main");
-                window
-            } else {
-                WebviewWindow::builder(app.handle(), "main", WebviewUrl::App("index.html".into()))
-                    .title("Qopy")
-                    .resizable(false)
-                    .fullscreen(false)
-                    .inner_size(750.0, 474.0)
-                    .focused(true)
-                    .skip_taskbar(true)
-                    .visible(false)
-                    .decorations(false)
-                    .transparent(true)
-                    .always_on_top(false)
-                    .build()?
-            };
 
             let _ = db::database::setup(app);
             api::hotkeys::setup(app_handle.clone());
@@ -99,13 +93,16 @@ fn main() {
             api::clipboard::setup(app.handle());
             let _ = api::clipboard::start_monitor(app_handle.clone());
 
-            utils::commands::center_window_on_current_monitor(&main_window);
+            utils::commands::center_window_on_current_monitor(main_window.as_ref().unwrap());
-            main_window.hide()?;
+            main_window
+                .as_ref()
+                .map(|w| w.hide())
+                .unwrap_or(Ok(()))?;
 
             let _ = app.track_event("app_started", None);
 
             tauri::async_runtime::spawn(async move {
-                api::updater::check_for_updates(app_handle).await;
+                api::updater::check_for_updates(app_handle, false).await;
             });
 
             Ok(())
@@ -118,7 +115,8 @@ fn main() {
                 }
             }
         })
-        .invoke_handler(tauri::generate_handler![
+        .invoke_handler(
+            tauri::generate_handler![
                 api::clipboard::write_and_paste,
                 db::history::get_history,
                 db::history::add_history_item,
@@ -129,10 +127,9 @@ fn main() {
                 db::history::read_image,
                 db::settings::get_setting,
                 db::settings::save_setting,
-            db::settings::save_keybind,
+                utils::commands::fetch_page_meta
-            db::settings::get_keybind,
+            ]
-            utils::commands::fetch_page_meta,
+        )
-        ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }

src-tauri/src/utils/commands.rs

@@ -1,11 +1,16 @@
-use active_win_pos_rs::get_active_window;
+use applications::{AppInfoContext, AppInfo, AppTrait, utils::image::RustImage};
-use base64::{engine::general_purpose::STANDARD, Engine};
+use base64::{ engine::general_purpose::STANDARD, Engine };
 use image::codecs::png::PngEncoder;
 use tauri::PhysicalPosition;
 use meta_fetcher;
 
 pub fn center_window_on_current_monitor(window: &tauri::WebviewWindow) {
-    if let Some(monitor) = window.available_monitors().unwrap().iter().find(|m| {
+    if
+        let Some(monitor) = window
+            .available_monitors()
+            .unwrap()
+            .iter()
+            .find(|m| {
                 let primary_monitor = window
                     .primary_monitor()
                     .unwrap()
@@ -13,33 +18,51 @@ pub fn center_window_on_current_monitor(window: &tauri::WebviewWindow) {
                 let mouse_position = primary_monitor.position();
                 let monitor_position = m.position();
                 let monitor_size = m.size();
-        mouse_position.x >= monitor_position.x
+                mouse_position.x >= monitor_position.x &&
-            && mouse_position.x < monitor_position.x + monitor_size.width as i32
+                    mouse_position.x < monitor_position.x + (monitor_size.width as i32) &&
-            && mouse_position.y >= monitor_position.y
+                    mouse_position.y >= monitor_position.y &&
-            && mouse_position.y < monitor_position.y + monitor_size.height as i32
+                    mouse_position.y < monitor_position.y + (monitor_size.height as i32)
-    }) {
+            })
+    {
         let monitor_size = monitor.size();
         let window_size = window.outer_size().unwrap();
 
-        let x = (monitor_size.width as i32 - window_size.width as i32) / 2;
+        let x = ((monitor_size.width as i32) - (window_size.width as i32)) / 2;
-        let y = (monitor_size.height as i32 - window_size.height as i32) / 2;
+        let y = ((monitor_size.height as i32) - (window_size.height as i32)) / 2;
 
         window
-            .set_position(PhysicalPosition::new(
+            .set_position(PhysicalPosition::new(monitor.position().x + x, monitor.position().y + y))
-                monitor.position().x + x,
-                monitor.position().y + y,
-            ))
             .unwrap();
     }
 }
 
 pub fn get_app_info() -> (String, Option<String>) {
-    match get_active_window() {
+    println!("Getting app info");
+    let mut ctx = AppInfoContext::new(vec![]);
+    println!("Created AppInfoContext");
+    ctx.refresh_apps().unwrap();
+    println!("Refreshed apps");
+    match ctx.get_frontmost_application() {
         Ok(window) => {
-            let app_name = window.app_name;
+            println!("Found frontmost application: {}", window.name);
-            (app_name, None)
+            let name = window.name.clone();
+            let icon = window
+                .load_icon()
+                .ok()
+                .map(|i| {
+                    println!("Loading icon for {}", name);
+                    let png = i.to_png().unwrap();
+                    let encoded = STANDARD.encode(png.get_bytes());
+                    println!("Icon encoded successfully");
+                    encoded
+                });
+            println!("Returning app info: {} with icon: {}", name, icon.is_some());
+            (name, icon)
+        }
+        Err(e) => {
+            println!("Failed to get frontmost application: {:?}", e);
+            ("System".to_string(), None)
         }
-        Err(_) => ("System".to_string(), None),
     }
 }
 
@@ -51,7 +74,6 @@ fn _process_icon_to_base64(path: &str) -> Result<String, Box<dyn std::error::Err
     Ok(STANDARD.encode(png_buffer))
 }
 
-
 pub fn detect_color(color: &str) -> bool {
     let color = color.trim().to_lowercase();
 
@@ -60,12 +82,16 @@ pub fn detect_color(color: &str) -> bool {
         let hex = &color[1..];
         return match hex.len() {
             3 | 6 | 8 => hex.chars().all(|c| c.is_ascii_hexdigit()),
-            _ => false
+            _ => false,
         };
     }
 
     // rgb/rgba
-    if (color.starts_with("rgb(") || color.starts_with("rgba(")) && color.ends_with(")") && !color[..color.len()-1].contains(")") {
+    if
+        (color.starts_with("rgb(") || color.starts_with("rgba(")) &&
+        color.ends_with(")") &&
+        !color[..color.len() - 1].contains(")")
+    {
         let values = color
             .trim_start_matches("rgba(")
             .trim_start_matches("rgb(")
@@ -75,12 +101,16 @@ pub fn detect_color(color: &str) -> bool {
 
         return match values.len() {
             3 | 4 => values.iter().all(|v| v.trim().parse::<f32>().is_ok()),
-            _ => false
+            _ => false,
         };
     }
 
     // hsl/hsla
-    if (color.starts_with("hsl(") || color.starts_with("hsla(")) && color.ends_with(")") && !color[..color.len()-1].contains(")") {
+    if
+        (color.starts_with("hsl(") || color.starts_with("hsla(")) &&
+        color.ends_with(")") &&
+        !color[..color.len() - 1].contains(")")
+    {
         let values = color
             .trim_start_matches("hsla(")
             .trim_start_matches("hsl(")
@@ -90,7 +120,7 @@ pub fn detect_color(color: &str) -> bool {
 
         return match values.len() {
             3 | 4 => values.iter().all(|v| v.trim().parse::<f32>().is_ok()),
-            _ => false
+            _ => false,
         };
     }
 
@@ -99,11 +129,9 @@ pub fn detect_color(color: &str) -> bool {
 
 #[tauri::command]
 pub async fn fetch_page_meta(url: String) -> Result<(String, Option<String>), String> {
-    let metadata = meta_fetcher::fetch_metadata(&url)
+    let metadata = meta_fetcher
+        ::fetch_metadata(&url)
         .map_err(|e| format!("Failed to fetch metadata: {}", e))?;
 
-    Ok((
+    Ok((metadata.title.unwrap_or_else(|| "No title found".to_string()), metadata.image))
-        metadata.title.unwrap_or_else(|| "No title found".to_string()),
-        metadata.image
-    ))
 }

src-tauri/src/utils/favicon.rs

@@ -5,7 +5,7 @@ use reqwest;
 use url::Url;
 
 pub async fn fetch_favicon_as_base64(
-    url: Url,
+    url: Url
 ) -> Result<Option<String>, Box<dyn std::error::Error>> {
     let client = reqwest::Client::new();
     let favicon_url = format!("https://favicone.com/{}", url.host_str().unwrap());

src-tauri/src/utils/keys.rs

@@ -0,0 +1,120 @@
+use global_hotkey::hotkey::Code;
+use std::str::FromStr;
+
+pub struct KeyCode(Code);
+
+impl FromStr for KeyCode {
+    type Err = String;
+
+    fn from_str(s: &str) -> Result<Self, Self::Err> {
+        let code = match s {
+            "Backquote" => Code::Backquote,
+            "Backslash" => Code::Backslash,
+            "BracketLeft" => Code::BracketLeft,
+            "BracketRight" => Code::BracketRight,
+            "Comma" => Code::Comma,
+            "Digit0" => Code::Digit0,
+            "Digit1" => Code::Digit1,
+            "Digit2" => Code::Digit2,
+            "Digit3" => Code::Digit3,
+            "Digit4" => Code::Digit4,
+            "Digit5" => Code::Digit5,
+            "Digit6" => Code::Digit6,
+            "Digit7" => Code::Digit7,
+            "Digit8" => Code::Digit8,
+            "Digit9" => Code::Digit9,
+            "Equal" => Code::Equal,
+            "KeyA" => Code::KeyA,
+            "KeyB" => Code::KeyB,
+            "KeyC" => Code::KeyC,
+            "KeyD" => Code::KeyD,
+            "KeyE" => Code::KeyE,
+            "KeyF" => Code::KeyF,
+            "KeyG" => Code::KeyG,
+            "KeyH" => Code::KeyH,
+            "KeyI" => Code::KeyI,
+            "KeyJ" => Code::KeyJ,
+            "KeyK" => Code::KeyK,
+            "KeyL" => Code::KeyL,
+            "KeyM" => Code::KeyM,
+            "KeyN" => Code::KeyN,
+            "KeyO" => Code::KeyO,
+            "KeyP" => Code::KeyP,
+            "KeyQ" => Code::KeyQ,
+            "KeyR" => Code::KeyR,
+            "KeyS" => Code::KeyS,
+            "KeyT" => Code::KeyT,
+            "KeyU" => Code::KeyU,
+            "KeyV" => Code::KeyV,
+            "KeyW" => Code::KeyW,
+            "KeyX" => Code::KeyX,
+            "KeyY" => Code::KeyY,
+            "KeyZ" => Code::KeyZ,
+            "Minus" => Code::Minus,
+            "Period" => Code::Period,
+            "Quote" => Code::Quote,
+            "Semicolon" => Code::Semicolon,
+            "Slash" => Code::Slash,
+            "Backspace" => Code::Backspace,
+            "CapsLock" => Code::CapsLock,
+            "Delete" => Code::Delete,
+            "Enter" => Code::Enter,
+            "Space" => Code::Space,
+            "Tab" => Code::Tab,
+            "End" => Code::End,
+            "Home" => Code::Home,
+            "Insert" => Code::Insert,
+            "PageDown" => Code::PageDown,
+            "PageUp" => Code::PageUp,
+            "ArrowDown" => Code::ArrowDown,
+            "ArrowLeft" => Code::ArrowLeft,
+            "ArrowRight" => Code::ArrowRight,
+            "ArrowUp" => Code::ArrowUp,
+            "NumLock" => Code::NumLock,
+            "Numpad0" => Code::Numpad0,
+            "Numpad1" => Code::Numpad1,
+            "Numpad2" => Code::Numpad2,
+            "Numpad3" => Code::Numpad3,
+            "Numpad4" => Code::Numpad4,
+            "Numpad5" => Code::Numpad5,
+            "Numpad6" => Code::Numpad6,
+            "Numpad7" => Code::Numpad7,
+            "Numpad8" => Code::Numpad8,
+            "Numpad9" => Code::Numpad9,
+            "NumpadAdd" => Code::NumpadAdd,
+            "NumpadDecimal" => Code::NumpadDecimal,
+            "NumpadDivide" => Code::NumpadDivide,
+            "NumpadMultiply" => Code::NumpadMultiply,
+            "NumpadSubtract" => Code::NumpadSubtract,
+            "Escape" => Code::Escape,
+            "PrintScreen" => Code::PrintScreen,
+            "ScrollLock" => Code::ScrollLock,
+            "Pause" => Code::Pause,
+            "AudioVolumeDown" => Code::AudioVolumeDown,
+            "AudioVolumeMute" => Code::AudioVolumeMute,
+            "AudioVolumeUp" => Code::AudioVolumeUp,
+            "F1" => Code::F1,
+            "F2" => Code::F2,
+            "F3" => Code::F3,
+            "F4" => Code::F4,
+            "F5" => Code::F5,
+            "F6" => Code::F6,
+            "F7" => Code::F7,
+            "F8" => Code::F8,
+            "F9" => Code::F9,
+            "F10" => Code::F10,
+            "F11" => Code::F11,
+            "F12" => Code::F12,
+            _ => {
+                return Err(format!("Unknown key code: {}", s));
+            }
+        };
+        Ok(KeyCode(code))
+    }
+}
+
+impl From<KeyCode> for Code {
+    fn from(key_code: KeyCode) -> Self {
+        key_code.0
+    }
+}

src-tauri/src/utils/logger.rs

@@ -1,6 +1,6 @@
 use chrono;
-use log::{LevelFilter, SetLoggerError};
+use log::{ LevelFilter, SetLoggerError };
-use std::fs::{File, OpenOptions};
+use std::fs::{ File, OpenOptions };
 use std::io::Write;
 use std::panic;
 
@@ -17,7 +17,6 @@ impl log::Log for FileLogger {
         if self.enabled(record.metadata()) {
             let mut file = self.file.try_clone().expect("Failed to clone file handle");
 
-            // Format: timestamp [LEVEL] target: message (file:line)
             writeln!(
                 file,
                 "{} [{:<5}] {}: {} ({}:{})",
@@ -40,29 +39,30 @@ pub fn init_logger(app_data_dir: &std::path::Path) -> Result<(), SetLoggerError>
     let logs_dir = app_data_dir.join("logs");
     std::fs::create_dir_all(&logs_dir).expect("Failed to create logs directory");
 
-    // Use .log extension for standard log files
     let log_path = logs_dir.join("app.log");
     let file = OpenOptions::new()
         .create(true)
-        .append(true) // Use append mode instead of write
+        .append(true)
         .open(&log_path)
         .expect("Failed to open log file");
 
-    // Set up panic hook
     let panic_file = file.try_clone().expect("Failed to clone file handle");
-    panic::set_hook(Box::new(move |panic_info| {
+    panic::set_hook(
+        Box::new(move |panic_info| {
             let mut file = panic_file.try_clone().expect("Failed to clone file handle");
 
-        let location = panic_info.location()
+            let location = panic_info
+                .location()
                 .map(|loc| format!("{}:{}:{}", loc.file(), loc.line(), loc.column()))
                 .unwrap_or_else(|| "unknown location".to_string());
 
             let message = match panic_info.payload().downcast_ref::<&str>() {
                 Some(s) => *s,
-            None => match panic_info.payload().downcast_ref::<String>() {
+                None =>
+                    match panic_info.payload().downcast_ref::<String>() {
                         Some(s) => s.as_str(),
                         None => "Unknown panic message",
-            },
+                    }
             };
 
             let _ = writeln!(
@@ -72,10 +72,13 @@ pub fn init_logger(app_data_dir: &std::path::Path) -> Result<(), SetLoggerError>
                 message,
                 location
             );
-    }));
+        })
+    );
 
     let logger = Box::new(FileLogger { file });
-    unsafe { log::set_logger_racy(Box::leak(logger))? };
+    unsafe {
+        log::set_logger_racy(Box::leak(logger))?;
+    }
     log::set_max_level(LevelFilter::Debug);
     Ok(())
 }

src-tauri/src/utils/mod.rs

@@ -2,3 +2,4 @@ pub mod commands;
 pub mod favicon;
 pub mod types;
 pub mod logger;
+pub mod keys;

src-tauri/src/utils/types.rs

@@ -1,5 +1,5 @@
-use chrono::{DateTime, Utc};
+use chrono::{ DateTime, Utc };
-use serde::{Deserialize, Serialize};
+use serde::{ Deserialize, Serialize };
 use std::fmt;
 use uuid::Uuid;
 
@@ -115,7 +115,7 @@ impl HistoryItem {
         content: String,
         favicon: Option<String>,
         source_icon: Option<String>,
-        language: Option<String>,
+        language: Option<String>
     ) -> Self {
         Self {
             id: Uuid::new_v4().to_string(),
@@ -130,7 +130,7 @@ impl HistoryItem {
     }
 
     pub fn to_row(
-        &self,
+        &self
     ) -> (
         String,
         String,

src-tauri/tauri.conf.json

@@ -1,6 +1,6 @@
 {
   "productName": "Qopy",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "identifier": "net.pandadev.qopy",
   "build": {
     "frontendDist": "../dist",
@@ -51,9 +51,7 @@
   "plugins": {
     "updater": {
       "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IDExNDIzNjA1QjE0NjU1OTkKUldTWlZVYXhCVFpDRWNvNmt0UE5lQmZkblEyZGZiZ2tHelJvT2YvNVpLU1RIM1RKZFQrb2tzWWwK",
-      "endpoints": [
+      "endpoints": ["https://qopy.pandadev.net/"]
-        "https://qopy.pandadev.net/"
-      ]
     }
   },
   "$schema": "../node_modules/@tauri-apps/cli/schema.json"

styles/index.scss

@@ -0,0 +1,186 @@
+$primary: #2e2d2b;
+$accent: #feb453;
+$divider: #ffffff0d;
+
+$text: #e5dfd5;
+$text2: #ada9a1;
+$mutedtext: #78756f;
+
+$search-height: 56px;
+$sidebar-width: 286px;
+$bottom-bar-height: 39px;
+$info-panel-height: 160px;
+$content-view-height: calc(
+  100% - $search-height - $info-panel-height - $bottom-bar-height
+);
+
+main {
+  width: 100vw;
+  height: 100vh;
+  background-color: $primary;
+  border: 1px solid $divider;
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  justify-content: space-between;
+}
+
+.container {
+  height: 376px;
+  width: 100%;
+  display: flex;
+}
+
+.results {
+  display: flex;
+  flex-direction: column;
+  padding: 14px 8px;
+  gap: 8px;
+  min-width: 286px;
+  border-right: 1px solid var(--border);
+
+  .time-separator {
+    font-size: 12px;
+    color: $text2;
+    font-family: SFRoundedSemiBold;
+    padding-left: 8px;
+  }
+
+  .group {
+    & + .group {
+      margin-top: 16px;
+    }
+
+    .time-separator {
+      margin-bottom: 8px;
+    }
+
+    .results-group {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  .favicon,
+  .image,
+  .icon {
+    width: 18px;
+    height: 18px;
+  }
+}
+
+.right {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.content {
+  height: 100%;
+  font-family: CommitMono !important;
+  font-size: 12px;
+  letter-spacing: 1;
+  border-radius: 10px;
+  width: 462px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  overflow: hidden;
+  z-index: 2;
+  color: $text;
+
+  &:not(:has(.image)) {
+    padding: 8px;
+  }
+
+  span.content-text {
+    font-family: CommitMono !important;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    word-break: break-word;
+    max-width: 100%;
+  }
+
+  .image {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    object-position: center;
+  }
+}
+
+.information {
+  min-height: 160px;
+  width: 462px;
+  border-top: 1px solid $divider;
+  padding: 14px;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+
+  .title {
+    font-family: SFRoundedSemiBold;
+    font-size: 12px;
+    letter-spacing: 0.6px;
+    color: $text;
+  }
+
+  .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;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+
+        img {
+          width: 13px;
+          height: 13px;
+          object-fit: contain;
+        }
+      }
+    }
+  }
+}
+
+.search-loading {
+  display: flex;
+  justify-content: center;
+  padding: 20px;
+  font-size: 16px;
+  color: var(--text-secondary);
+}

styles/settings.scss

@@ -0,0 +1,235 @@
+$primary: #2e2d2b;
+$accent: #feb453;
+$divider: #ffffff0d;
+
+$text: #e5dfd5;
+$text2: #ada9a1;
+$mutedtext: #78756f;
+
+main {
+  width: 100vw;
+  height: 100vh;
+  background-color: $primary;
+  border: 1px solid $divider;
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  justify-content: space-between;
+}
+
+.back {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+
+  img {
+    background-color: $divider;
+    border-radius: 6px;
+    padding: 8px 6px;
+  }
+
+  p {
+    color: $text2;
+  }
+}
+
+p {
+  font-family: SFRoundedMedium;
+}
+
+.settings-container {
+  width: 100%;
+  height: 100%;
+  margin-top: 26px;
+  position: relative;
+  font-size: 12px;
+  font-family: SFRoundedMedium;
+
+  .settings {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-left: -26px;
+    display: flex;
+    gap: 24px;
+
+    .names {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+
+      p {
+        font-family: SFRoundedSemiBold;
+        color: $text2;
+        display: flex;
+        justify-content: right;
+      }
+    }
+
+    .actions {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      color: $mutedtext;
+    }
+  }
+}
+
+.launch {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+
+  input[type="checkbox"] {
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    background-color: transparent;
+    border-radius: 5px;
+    border: 1px solid $mutedtext;
+    position: relative;
+    cursor: pointer;
+    transition: background-color 0.2s;
+
+    &:checked {
+      ~ .checkmark {
+        opacity: 1;
+      }
+    }
+  }
+
+  .checkmark {
+    height: 14px;
+    width: 14px;
+    position: absolute;
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+
+  p {
+    color: $text2;
+  }
+}
+
+.keybind-input {
+  width: min-content;
+  white-space: nowrap;
+  padding: 6px;
+  border: 1px solid $divider;
+  color: $text2;
+  display: flex;
+  border-radius: 10px;
+  outline: none;
+  gap: 4px;
+
+  .key {
+    color: $text2;
+    font-family: SFRoundedMedium;
+    background-color: $divider;
+    padding: 2px 6px;
+    border-radius: 6px;
+    font-size: 14px;
+  }
+}
+
+.keybind-input:focus {
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.empty-keybind {
+  border-color: rgba(255, 82, 82, 0.298);
+}
+
+.top-bar {
+  width: 100%;
+  min-height: 56px;
+  border-bottom: 1px solid $divider;
+}
+
+.bottom-bar {
+  height: 40px;
+  width: calc(100vw - 2px);
+  backdrop-filter: blur(18px);
+  background-color: hsla(40, 3%, 16%, 0.8);
+  position: fixed;
+  bottom: 1px;
+  left: 1px;
+  z-index: 100;
+  border-radius: 0 0 12px 12px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-inline: 12px;
+  padding-right: 6px;
+  padding-top: 1px;
+  align-items: center;
+  font-size: 14px;
+  border-top: 1px solid $divider;
+
+  p {
+    color: $text2;
+  }
+
+  .left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .logo {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  .right {
+    display: flex;
+    align-items: center;
+
+    .actions div {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+    }
+
+    .divider {
+      width: 2px;
+      height: 12px;
+      background-color: $divider;
+      margin-left: 8px;
+      margin-right: 4px;
+      transition: all 0.2s;
+    }
+
+    .actions {
+      padding: 4px;
+      padding-left: 8px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      border-radius: 7px;
+      background-color: transparent;
+      transition: all 0.2s;
+      cursor: pointer;
+
+      p {
+        color: $text;
+      }
+
+      &.disabled {
+        pointer-events: none;
+        opacity: 0.5;
+      }
+    }
+
+    .actions:hover {
+      background-color: $divider;
+    }
+
+    &:hover .actions:hover ~ .divider {
+      opacity: 0;
+    }
+  }
+}

types/keys.ts

@@ -0,0 +1,217 @@
+export enum KeyValues {
+  Backquote = 'Backquote',
+  Backslash = 'Backslash',
+  BracketLeft = 'BracketLeft',
+  BracketRight = 'BracketRight',
+  Comma = 'Comma',
+  Digit0 = 'Digit0',
+  Digit1 = 'Digit1',
+  Digit2 = 'Digit2',
+  Digit3 = 'Digit3',
+  Digit4 = 'Digit4',
+  Digit5 = 'Digit5',
+  Digit6 = 'Digit6',
+  Digit7 = 'Digit7',
+  Digit8 = 'Digit8',
+  Digit9 = 'Digit9',
+  Equal = 'Equal',
+  KeyA = 'KeyA',
+  KeyB = 'KeyB',
+  KeyC = 'KeyC',
+  KeyD = 'KeyD',
+  KeyE = 'KeyE',
+  KeyF = 'KeyF',
+  KeyG = 'KeyG',
+  KeyH = 'KeyH',
+  KeyI = 'KeyI',
+  KeyJ = 'KeyJ',
+  KeyK = 'KeyK',
+  KeyL = 'KeyL',
+  KeyM = 'KeyM',
+  KeyN = 'KeyN',
+  KeyO = 'KeyO',
+  KeyP = 'KeyP',
+  KeyQ = 'KeyQ',
+  KeyR = 'KeyR',
+  KeyS = 'KeyS',
+  KeyT = 'KeyT',
+  KeyU = 'KeyU',
+  KeyV = 'KeyV',
+  KeyW = 'KeyW',
+  KeyX = 'KeyX',
+  KeyY = 'KeyY',
+  KeyZ = 'KeyZ',
+  Minus = 'Minus',
+  Period = 'Period',
+  Quote = 'Quote',
+  Semicolon = 'Semicolon',
+  Slash = 'Slash',
+  AltLeft = 'AltLeft',
+  AltRight = 'AltRight',
+  Backspace = 'Backspace',
+  CapsLock = 'CapsLock',
+  ContextMenu = 'ContextMenu',
+  ControlLeft = 'ControlLeft',
+  ControlRight = 'ControlRight',
+  Enter = 'Enter',
+  MetaLeft = 'MetaLeft',
+  MetaRight = 'MetaRight',
+  ShiftLeft = 'ShiftLeft',
+  ShiftRight = 'ShiftRight',
+  Space = 'Space',
+  Tab = 'Tab',
+  Delete = 'Delete',
+  End = 'End',
+  Home = 'Home',
+  Insert = 'Insert',
+  PageDown = 'PageDown',
+  PageUp = 'PageUp',
+  ArrowDown = 'ArrowDown',
+  ArrowLeft = 'ArrowLeft',
+  ArrowRight = 'ArrowRight',
+  ArrowUp = 'ArrowUp',
+  NumLock = 'NumLock',
+  Numpad0 = 'Numpad0',
+  Numpad1 = 'Numpad1',
+  Numpad2 = 'Numpad2',
+  Numpad3 = 'Numpad3',
+  Numpad4 = 'Numpad4',
+  Numpad5 = 'Numpad5',
+  Numpad6 = 'Numpad6',
+  Numpad7 = 'Numpad7',
+  Numpad8 = 'Numpad8',
+  Numpad9 = 'Numpad9',
+  NumpadAdd = 'NumpadAdd',
+  NumpadDecimal = 'NumpadDecimal',
+  NumpadDivide = 'NumpadDivide',
+  NumpadMultiply = 'NumpadMultiply',
+  NumpadSubtract = 'NumpadSubtract',
+  Escape = 'Escape',
+  PrintScreen = 'PrintScreen',
+  ScrollLock = 'ScrollLock',
+  Pause = 'Pause',
+  AudioVolumeDown = 'AudioVolumeDown',
+  AudioVolumeMute = 'AudioVolumeMute',
+  AudioVolumeUp = 'AudioVolumeUp',
+  F1 = 'F1',
+  F2 = 'F2',
+  F3 = 'F3',
+  F4 = 'F4',
+  F5 = 'F5',
+  F6 = 'F6',
+  F7 = 'F7',
+  F8 = 'F8',
+  F9 = 'F9',
+  F10 = 'F10',
+  F11 = 'F11',
+  F12 = 'F12',
+}
+
+export enum KeyLabels {
+  Backquote = '`',
+  Backslash = '\\',
+  BracketLeft = '[',
+  BracketRight = ']',
+  Comma = ',',
+  Digit0 = '0',
+  Digit1 = '1',
+  Digit2 = '2',
+  Digit3 = '3',
+  Digit4 = '4',
+  Digit5 = '5',
+  Digit6 = '6',
+  Digit7 = '7',
+  Digit8 = '8',
+  Digit9 = '9',
+  Equal = '=',
+  KeyA = 'A',
+  KeyB = 'B',
+  KeyC = 'C',
+  KeyD = 'D',
+  KeyE = 'E',
+  KeyF = 'F',
+  KeyG = 'G',
+  KeyH = 'H',
+  KeyI = 'I',
+  KeyJ = 'J',
+  KeyK = 'K',
+  KeyL = 'L',
+  KeyM = 'M',
+  KeyN = 'N',
+  KeyO = 'O',
+  KeyP = 'P',
+  KeyQ = 'Q',
+  KeyR = 'R',
+  KeyS = 'S',
+  KeyT = 'T',
+  KeyU = 'U',
+  KeyV = 'V',
+  KeyW = 'W',
+  KeyX = 'X',
+  KeyY = 'Y',
+  KeyZ = 'Z',
+  Minus = '-',
+  Period = '.',
+  Quote = "'",
+  Semicolon = ';',
+  Slash = '/',
+  AltLeft = 'Alt',
+  AltRight = 'Alt (Right)',
+  Backspace = 'Backspace',
+  CapsLock = 'Caps Lock',
+  ContextMenu = 'Context Menu',
+  ControlLeft = 'Ctrl',
+  ControlRight = 'Ctrl (Right)',
+  Enter = 'Enter',
+  MetaLeft = 'Meta',
+  MetaRight = 'Meta (Right)',
+  ShiftLeft = 'Shift',
+  ShiftRight = 'Shift (Right)',
+  Space = 'Space',
+  Tab = 'Tab',
+  Delete = 'Delete',
+  End = 'End',
+  Home = 'Home',
+  Insert = 'Insert',
+  PageDown = 'Page Down',
+  PageUp = 'Page Up',
+  ArrowDown = '↓',
+  ArrowLeft = '←',
+  ArrowRight = '→',
+  ArrowUp = '↑',
+  NumLock = 'Num Lock',
+  Numpad0 = 'Numpad 0',
+  Numpad1 = 'Numpad 1',
+  Numpad2 = 'Numpad 2',
+  Numpad3 = 'Numpad 3',
+  Numpad4 = 'Numpad 4',
+  Numpad5 = 'Numpad 5',
+  Numpad6 = 'Numpad 6',
+  Numpad7 = 'Numpad 7',
+  Numpad8 = 'Numpad 8',
+  Numpad9 = 'Numpad 9',
+  NumpadAdd = 'Numpad +',
+  NumpadDecimal = 'Numpad .',
+  NumpadDivide = 'Numpad /',
+  NumpadMultiply = 'Numpad *',
+  NumpadSubtract = 'Numpad -',
+  Escape = 'Esc',
+  PrintScreen = 'Print Screen',
+  ScrollLock = 'Scroll Lock',
+  Pause = 'Pause',
+  AudioVolumeDown = 'Volume Down',
+  AudioVolumeMute = 'Volume Mute',
+  AudioVolumeUp = 'Volume Up',
+  F1 = 'F1',
+  F2 = 'F2',
+  F3 = 'F3',
+  F4 = 'F4',
+  F5 = 'F5',
+  F6 = 'F6',
+  F7 = 'F7',
+  F8 = 'F8',
+  F9 = 'F9',
+  F10 = 'F10',
+  F11 = 'F11',
+  F12 = 'F12',
+}