Code Monkey home page Code Monkey logo

tauri-macos-spotlight-example's Introduction

Tauri macOS Spotlight Example

This is an example project that shows how to create a macOS Spotlight app using Tauri.

Check out the file-upload branch for an example of the spotlight app, now featuring file upload functionality. See it in action here.

This template is based on Tauri + React + Typescript template. It should help get you started developing with Tauri, React and Typescript in Vite.

Prerequisites

Getting Started

  1. Clone this repository:
git clone https://github.com/ahkohd/tauri-macos-spotlight-example.git
  1. Navigate to the project directory:
cd tauri-macos-spotlight-example
  1. Run the demo
pnpm install
pnpm tauri dev
  1. Press Cmdk to toggle the spotlight window

Demo

Recommended IDE Setup

Related

The following are related to this project:

  • tauri-nspanel: A Tauri plugin that enables the transformation of a standard application window into a panel, providing panel-specific functionalities and methods. It is designed for versatile application across various projects.
  • tauri-plugin-spotlight: Also a Tauri plugin that helps you to emulate a spotlight window behavior. Unlike the tauri-nspanel or this example project, it does not utilize a panel. As a result, its ability to draw over fullscreen applications on newer macOS versions may be limited.

License

This project is licensed under the MIT License. See the LICENSE file for details.

tauri-macos-spotlight-example's People

Contributors

ahkohd avatar sammcj avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

tauri-macos-spotlight-example's Issues

Spotlight w/ file picker upload

I have identified a bug:

When using <input type="file"> to select a file, I am unable to choose a file from the popped-up Finder.

Could this issue be addressed? Thank you! โค๏ธ

My macOS version is 12.3.1.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

This repository currently has no open or pending branches.

Detected dependencies

cargo
src-tauri/Cargo.toml
  • serde_json 1.0
  • serde 1.0
  • tauri 1.2
  • cocoa 0.24.1
  • objc 0.2.7
  • tauri-build 1.2
npm
package.json
  • react ^18.2.0
  • react-dom ^18.2.0
  • @tauri-apps/api ^1.2.0
  • @types/node ^18.7.10
  • @types/react ^18.0.15
  • @types/react-dom ^18.0.6
  • @vitejs/plugin-react ^3.0.0
  • typescript ^4.6.4
  • vite ^4.0.0
  • @tauri-apps/cli ^1.2.2

  • Check this box to trigger a request for Renovate to run again on this repository

Package as an application?

Hi, thanks for this project, it was really interesting to see a spotlight like application written in Rust/Tauri.

I wanted to use this project as a "proof of concept" to make sure that all the functionality I needed for a project of mine was viable in Tauri, and ran into one hiccup.

When running it with npm run tauri dev it runs as expected, and the sportlight works exactly as expected.

However, I was hoping to be able to bundle and shit the app, and tried to do so using npm run tauri build, but the bundled app, when run, would shortly terminate, making it effectively unusable.

I was wondering if there was a solution to this? Is there any way to build a packaged app with the same functionality from the project in its present state?

For context, I'm running this on a darwin mac running Mac OS 14.2. Any help would be appreciated, thanks!

[SOLVED] App panicks when using more than one window

Make sure to call init_spotlight_window in the correct window on the frontend

I was making this mistake where I was calling init_spotlight in a different window than the actual target window and then trying to hide the panel using the ESC key, which then invokes hide_window and the app kept crashing.

Here's a error message for anyone googling it.

thread 'main' panicked at 'called `Option::unwrap()` on a `None` value', src/spotlight.rs:149:5
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace

Also make sure to set the correct panel label on line 113 of spotlight.rs

static PANEL_LABEL: &str = "main"; // Defaults to main

Resizeable Window

Hey! ๐Ÿ‘‹

I need to make this window resizable, but whenever I try to do it, the window stops appearing on top of fullscreen apps.

Do you have any ideas how to implement this?

Solved, I guess. The solution below seems to work.

  1. Extend RawNSPanel with this method:
fn set_resizable(&self) {
    let current_style_mask: NSWindowStyleMask = unsafe { msg_send![self, styleMask] };
    let new_style_mask = current_style_mask | NSWindowStyleMask::NSWindowStyleMaskResizable;
    self.set_style_mask(new_style_mask.bits() as i32);
}
  1. Update init method
#[tauri::command]
pub fn init_spotlight_window(app_handle: AppHandle<Wry>, window: Window<Wry>) {
    INIT.call_once(|| {
        let panel = create_spotlight_panel(&window);
        set_state!(app_handle, panel, Some(create_spotlight_panel(&window)));
        panel.set_resizable();
        register_shortcut(app_handle);
    });
}

Can a solution be provided to prevent the window from stealing focus from the currently active window

Can a solution be provided to prevent the window from stealing focus from the currently active window, as mentioned in this issue?

I'd like to create a window/app that behaves like macOS Spotlight:

  1. It shows over fullscreen apps
  2. It doesn't deactivate the active app. If the window opens while you have Chrome focused, the Chrome menu bar is still shown and the Chrome window looks like it's still focused.

On macOS I think this kind of window is an NSPanel

Can not Display Input Method Editor in Window

Hello, thank you very much for your project, which has helped me a lot, but I have a question to ask you.
When I try to type in < INPUT >, my input method editor cannot be displayed on the window.

Hover is not working on macOS (12.3).

In macOS (12.3), hover works only under two conditions: first, when the window utilizes setFocus, and second, when a click event occurs in the hover area.

Kapture.2023-11-26.at.13.18.37.mp4

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.