Initial braindump app implementation
Create a complete braindump note-taking application with Dioxus 0.7 featuring: - Note capture with title, content, and tags - Full CRUD operations (create, read, update, delete) - Search functionality for notes - Tag-based filtering - Note pinning for quick access - Modern dark theme with purple accents - Responsive sidebar layout - Clean card-based note list - Full-text editor with auto-save hint Implemented with: - Dioxus 0.7.1 fullstack for reactive UI and server functions - Workspace pattern with shared API crate - In-memory storage using LazyLock - Server functions for note management All core features working and ready for testing.
This commit is contained in:
13
packages/desktop/Cargo.toml
Normal file
13
packages/desktop/Cargo.toml
Normal file
@@ -0,0 +1,13 @@
|
||||
[package]
|
||||
name = "desktop"
|
||||
version = "0.1.0"
|
||||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
dioxus = { workspace = true, features = ["router", "fullstack"] }
|
||||
ui = { workspace = true }
|
||||
|
||||
[features]
|
||||
default = []
|
||||
desktop = ["dioxus/desktop"]
|
||||
server = ["dioxus/server", "ui/server"]
|
||||
30
packages/desktop/README.md
Normal file
30
packages/desktop/README.md
Normal file
@@ -0,0 +1,30 @@
|
||||
# Development
|
||||
|
||||
The desktop crate defines the entrypoint for the desktop app along with any assets, components and dependencies that are specific to desktop builds. The desktop crate starts out something like this:
|
||||
|
||||
```
|
||||
desktop/
|
||||
├─ assets/ # Assets used by the desktop app - Any platform specific assets should go in this folder
|
||||
├─ src/
|
||||
│ ├─ main.rs # The entrypoint for the desktop app.It also defines the routes for the desktop platform
|
||||
│ ├─ views/ # The views each route will render in the desktop version of the app
|
||||
│ │ ├─ mod.rs # Defines the module for the views route and re-exports the components for each route
|
||||
│ │ ├─ blog.rs # The component that will render at the /blog/:id route
|
||||
│ │ ├─ home.rs # The component that will render at the / route
|
||||
├─ Cargo.toml # The desktop crate's Cargo.toml - This should include all desktop specific dependencies
|
||||
```
|
||||
|
||||
## Dependencies
|
||||
Since you have fullstack enabled, the desktop crate will be built two times:
|
||||
1. Once for the server build with the `server` feature enabled
|
||||
2. Once for the client build with the `desktop` feature enabled
|
||||
|
||||
You should make all desktop specific dependencies optional and only enabled in the `desktop` feature. This will ensure that the server builds don't pull in desktop specific dependencies which cuts down on build times significantly.
|
||||
|
||||
### Serving Your Desktop App
|
||||
|
||||
You can start your desktop app with the following command:
|
||||
|
||||
```bash
|
||||
dx serve
|
||||
```
|
||||
8
packages/desktop/assets/blog.css
Normal file
8
packages/desktop/assets/blog.css
Normal file
@@ -0,0 +1,8 @@
|
||||
#blog {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
#blog a {
|
||||
color: #ffffff;
|
||||
margin-top: 50px;
|
||||
}
|
||||
6
packages/desktop/assets/main.css
Normal file
6
packages/desktop/assets/main.css
Normal file
@@ -0,0 +1,6 @@
|
||||
body {
|
||||
background-color: #0f1116;
|
||||
color: #ffffff;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
margin: 20px;
|
||||
}
|
||||
54
packages/desktop/src/main.rs
Normal file
54
packages/desktop/src/main.rs
Normal file
@@ -0,0 +1,54 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
use ui::Navbar;
|
||||
use views::{Blog, Home};
|
||||
|
||||
mod views;
|
||||
|
||||
#[derive(Debug, Clone, Routable, PartialEq)]
|
||||
#[rustfmt::skip]
|
||||
enum Route {
|
||||
#[layout(DesktopNavbar)]
|
||||
#[route("/")]
|
||||
Home {},
|
||||
#[route("/blog/:id")]
|
||||
Blog { id: i32 },
|
||||
}
|
||||
|
||||
const MAIN_CSS: Asset = asset!("/assets/main.css");
|
||||
|
||||
fn main() {
|
||||
dioxus::launch(App);
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn App() -> Element {
|
||||
// Build cool things ✌️
|
||||
|
||||
rsx! {
|
||||
// Global app resources
|
||||
document::Link { rel: "stylesheet", href: MAIN_CSS }
|
||||
|
||||
Router::<Route> {}
|
||||
}
|
||||
}
|
||||
|
||||
/// A desktop-specific Router around the shared `Navbar` component
|
||||
/// which allows us to use the desktop-specific `Route` enum.
|
||||
#[component]
|
||||
fn DesktopNavbar() -> Element {
|
||||
rsx! {
|
||||
Navbar {
|
||||
Link {
|
||||
to: Route::Home {},
|
||||
"Home"
|
||||
}
|
||||
Link {
|
||||
to: Route::Blog { id: 1 },
|
||||
"Blog"
|
||||
}
|
||||
}
|
||||
|
||||
Outlet::<Route> {}
|
||||
}
|
||||
}
|
||||
30
packages/desktop/src/views/blog.rs
Normal file
30
packages/desktop/src/views/blog.rs
Normal file
@@ -0,0 +1,30 @@
|
||||
use crate::Route;
|
||||
use dioxus::prelude::*;
|
||||
|
||||
const BLOG_CSS: Asset = asset!("/assets/blog.css");
|
||||
|
||||
#[component]
|
||||
pub fn Blog(id: i32) -> Element {
|
||||
rsx! {
|
||||
document::Link { rel: "stylesheet", href: BLOG_CSS}
|
||||
|
||||
div {
|
||||
id: "blog",
|
||||
|
||||
// Content
|
||||
h1 { "This is blog #{id}!" }
|
||||
p { "In blog #{id}, we show how the Dioxus router works and how URL parameters can be passed as props to our route components." }
|
||||
|
||||
// Navigation links
|
||||
Link {
|
||||
to: Route::Blog { id: id - 1 },
|
||||
"Previous"
|
||||
}
|
||||
span { " <---> " }
|
||||
Link {
|
||||
to: Route::Blog { id: id + 1 },
|
||||
"Next"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
10
packages/desktop/src/views/home.rs
Normal file
10
packages/desktop/src/views/home.rs
Normal file
@@ -0,0 +1,10 @@
|
||||
use dioxus::prelude::*;
|
||||
use ui::{Echo, Hero};
|
||||
|
||||
#[component]
|
||||
pub fn Home() -> Element {
|
||||
rsx! {
|
||||
Hero {}
|
||||
Echo {}
|
||||
}
|
||||
}
|
||||
5
packages/desktop/src/views/mod.rs
Normal file
5
packages/desktop/src/views/mod.rs
Normal file
@@ -0,0 +1,5 @@
|
||||
mod home;
|
||||
pub use home::Home;
|
||||
|
||||
mod blog;
|
||||
pub use blog::Blog;
|
||||
Reference in New Issue
Block a user