Dioxus (#6)

* Small Dioxus thing kind of working from example https://github.com/DioxusLabs/dioxus/blob/main/examples/file_explorer.rs

* Dioxus shows list of streaks

* List and delete now work

* Dioxus now handles checkins, and cli handles them better

* adding streaks works but they don't appear in the list until a restart

* return a streak from Streaks::new

* Dioxus can now visibly add streaks

* Trying to reset form, halfway there

* Sorting works.

* Sorting now shows an indicator

* Confirmation pop up for deletion

* Filtering and search

Cargo.toml

@@ -19,6 +19,10 @@ chrono = { version = "0.4.38", features = ["serde"] }
 clap = { version = "4.5.11", features = ["derive"] }
 console = "0.15.8"
 derive_setters = "0.1.6"
+dioxus = { version = "0.6.0-alpha.2", features = [
+    "desktop",
+    "signals",
+] }
 dirs = "5.0.1"
 futures = "0.3.30"
 lazy_static = "1.5.0"

assets/fileexplorer.css

@@ -0,0 +1,180 @@
+* {
+    margin: 0;
+    padding: 0;
+    font-family: 'Roboto', sans-serif;
+    user-select: none;
+    transition: .2s all;
+}
+
+body {
+    padding-top: 77px;
+}
+
+
+/* header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  padding: 20px;
+  background-color: #2196F3;
+  color: white;
+}
+header h1 {
+  float: left;
+  font-size: 20px;
+  font-weight: 400;
+}
+header .material-icons {
+  float: right;
+  cursor: pointer;
+}
+header .icon-menu {
+  float: left;
+  margin-right: 20px;
+} */
+
+main {
+    padding: 20px 50px;
+}
+
+.folder * {
+    width: 100px;
+}
+
+.folder {
+    float: left;
+    width: 100px;
+    height: 152px;
+    /* //padding: 20px; */
+    margin-right: 50px;
+    margin-bottom: 70px;
+    border-radius: 2px;
+    /* //overflow: hidden; */
+    cursor: pointer;
+}
+
+.folder:hover h1 {
+    display: none;
+}
+
+.folder:hover p.cooltip {
+    opacity: 1;
+    top: 0;
+}
+
+.folder * {
+    text-align: center;
+}
+
+.folder i {
+    margin: 0;
+    font-size: 100px;
+    color: #607D8B;
+}
+
+.folder h1 {
+    position: relative;
+    display: block;
+    top: -37px;
+    font-size: 20px;
+    font-weight: 400;
+}
+
+.folder p.cooltip {
+    position: relative;
+    top: 5px;
+    left: -50%;
+    margin-left: 35px;
+    background: #212121;
+    font-size: 15px;
+    color: white;
+    border-radius: 4px;
+    padding: 10px 20px;
+    padding-right: 30px;
+    width: 100px;
+    opacity: 0;
+}
+
+.folder p.cooltip:before {
+    content: '';
+    position: absolute;
+    display: block;
+    top: -4px;
+    left: 50%;
+    margin-left: -5px;
+    height: 10px;
+    width: 10px;
+    border-radius: 2px;
+    background-color: #212121;
+    transform: rotate(45deg);
+}
+
+div.properties {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10;
+    width: 300px;
+    background-color: white;
+}
+
+div.properties:before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 300px;
+    bottom: 0;
+    background-color: #212121;
+    opacity: .5;
+    overflow: hidden;
+}
+
+div.properties img {
+    position: relative;
+    top: -1px;
+    left: -1px;
+    width: 110%;
+    height: 200px;
+    filter: blur(2px);
+}
+
+div.properties h1 {
+    position: relative;
+    width: 100%;
+    text-align: left;
+    margin-left: 20px;
+    color: white;
+}
+
+header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    padding: 20px;
+    /*background-color: #2196F3;*/
+    /*color: white;*/
+    display: flex;
+    align-items: center;
+}
+
+header h1 {
+    font-weight: 400;
+}
+
+header span {
+    flex: 1;
+}
+
+header i {
+    margin: 0 10px;
+    cursor: pointer;
+}
+
+header i:nth-child(1) {
+    margin: 0 20px;
+}

assets/streaks.css

@@ -0,0 +1,50 @@
+* {
+    margin: 0;
+    padding: 0;
+    font-family: 'Roboto', sans-serif;
+    user-select: none;
+    transition: .2s all;
+}
+
+body {
+    padding-top: 77px;
+}
+
+main {
+    padding: 20px 50px;
+}
+
+
+header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    z-index: 9;
+}
+
+header h1 {
+    font-weight: 400;
+}
+
+header span {
+    flex: 1;
+}
+
+header i {
+    margin: 0 10px;
+    cursor: pointer;
+}
+
+header i:nth-child(1) {
+    margin: 0 20px;
+}
+
+thead {
+    th {
+        white-space: nowrap;
+    }
+}

src/cli/cli.rs

@@ -1,7 +1,7 @@
 use std::path::Path;
 
 use ansi_term::{Color, Style};
-use chrono::Local;
+use catppuccin::PALETTE;
 use clap::{Parser, Subcommand};
 use console::Emoji;
 use dirs;
@@ -10,6 +10,7 @@ use uuid::Uuid;
 use crate::{
     cli::table::build_table,
     db::Database,
+    gui,
     sorting::get_sort_order,
     streak::{sort_streaks, Frequency, Streak},
     tui,
@@ -60,8 +61,10 @@ enum Commands {
     CheckIn { ident: String },
     #[command(about = "Remove a streak", long_about = None, short_flag = 'r')]
     Remove { ident: String },
-    #[command(about = "Switch to TUI", long_about = None, short_flag = 't')]
+    #[command(about = "Switch to TUI", long_about = None)]
     Tui,
+    #[command(about = "Switch to GUI", long_about = None)]
+    Gui,
 }
 
 /// Create a new daily streak item
@@ -113,17 +116,14 @@ fn get_one_by_id(db: &mut Database, ident: &str) -> Option<Streak> {
 
 /// Check in to a streak today
 fn checkin(db: &mut Database, ident: &str) -> Result<(), Box<dyn std::error::Error>> {
-    if let Some(mut streak) = get_one_by_id(db, ident) {
-        if let Some(check_in) = streak.last_checkin {
-            if check_in == Local::now().date_naive() {
-                return Ok(());
-            }
+    let streak = db.get_by_id(ident).unwrap();
+    match db.checkin(streak.id) {
+        Ok(_) => {
+            db.save()?;
+            Ok(())
         }
-        streak.checkin();
-        db.update(streak.id, streak)?;
-        db.save()?;
+        Err(e) => Err(Box::new(e)),
     }
-    Ok(())
 }
 
 /// Remove a streak
@@ -140,7 +140,6 @@ pub fn get_database_url() -> String {
     let path = Path::new(&dirs::data_local_dir().unwrap()).join(cli.database_url);
     path.to_string_lossy().to_string()
 }
-use catppuccin::PALETTE;
 
 const fn ansi(color: &catppuccin::Color) -> ansi_term::Colour {
     ansi_term::Colour::RGB(color.rgb.r, color.rgb.g, color.rgb.b)
@@ -238,6 +237,7 @@ pub fn parse() {
             println!("{trash} {response} {}", name);
         }
         Commands::Tui => tui::main().expect("Couldn't launch TUI"),
+        Commands::Gui => gui::main(),
     }
 }
 

src/cli/table.rs

@@ -21,14 +21,15 @@ pub fn build_table(streaks: Vec<Streak>) -> String {
 
     let (width, _) = match dimensions() {
         Some((w, _)) => (w, 0),
-        None => (80, 0),
+        None => (60, 0),
     };
+    let width = std::cmp::min(width.saturating_sub(60), 30);
+    dbg!(width);
 
     for streak in streaks.iter() {
         let mut wrapped_text = String::new();
-        let wrapped_lines = textwrap::wrap(&streak.task.as_str(), width - 90);
+        let wrapped_lines = textwrap::wrap(&streak.task.as_str(), width);
         for line in wrapped_lines {
-            // TODO: wrapped_text on multiple lines breaks the table layout
             wrapped_text.push_str(&format!("{line}\n"));
         }
         wrapped_text = wrapped_text.trim().to_string();