quote chronological cursor scroll, icon

src/quotes/mod.rs

@@ -113,6 +113,24 @@ impl Quote {
             None => Ok(None),
         }
     }
+    pub fn get_chronological_cursorscroll(
+        conn: &Connection,
+        cursor: Option<Uuid>,
+        amount: i64,
+    ) -> Result<Vec<Quote>, QuoteError> {
+        let ids = match cursor {
+            Some(c) => conn
+                .prepare("SELECT id FROM quotes WHERE id < ?1 ORDER BY id DESC LIMIT ?2")?
+                .query_map((c, amount), |r| r.get(0))?
+                .collect::<Result<Vec<Uuid>, _>>()?,
+            None => conn
+                .prepare("SELECT id FROM quotes ORDER BY id DESC LIMIT ?1")?
+                .query_map((amount,), |r| r.get(0))?
+                .collect::<Result<Vec<Uuid>, _>>()?,
+        };
+
+        ids.iter().map(|id| Self::get_by_id(conn, *id)).collect()
+    }
     pub fn create(
         conn: &Connection,
         lines: Vec<(String, Name)>,

src/web/icons/calendar-arrow-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-arrow-down-icon lucide-calendar-arrow-down"><path d="m14 18 4 4 4-4"/><path d="M16 2v4"/><path d="M18 14v8"/><path d="M21 11.354V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7.343"/><path d="M3 10h18"/><path d="M8 2v4"/></svg>

src/web/icons/mod.rs

@@ -1,6 +1,7 @@
 // Below icons sourced from https://lucide.dev
 pub const ARROW_RIGHT: &str = include_str!("arrow-right.svg");
 pub const CALENDAR_1: &str = include_str!("calendar-1.svg");
+pub const CALENDAR_ARROW_DOWN: &str = include_str!("calendar-arrow-down.svg");
 pub const CIRCLE_MINUS: &str = include_str!("circle-minus.svg");
 pub const CLIPBOARD_CLOCK: &str = include_str!("clipboard-clock.svg");
 pub const CLOCK: &str = include_str!("clock.svg");

src/web/pages/quotes.rs

@@ -5,20 +5,31 @@ use axum::{
 use maud::{PreEscaped, html};
 
 use crate::{
+    database,
     error::CompositeError,
-    users::{User, auth::UserAuthenticate},
-    web::{components::nav::nav, icons, pages::base},
+    quotes::Quote,
+    users::{
+        User,
+        auth::{UserAuthRequired, UserAuthenticate},
+    },
+    web::{
+        components::{nav::nav, quote::quote},
+        icons,
+        pages::base,
+    },
 };
 
 pub mod add;
 
 pub async fn page(req: Request) -> Result<Response, CompositeError> {
-    let u = User::authenticate(req.headers())?;
+    let u = User::authenticate(req.headers())?.required()?;
+    let conn = database::conn()?;
+    let quotes = Quote::get_chronological_cursorscroll(&conn, None, 20)?;
 
     Ok(base(
         "Quotes | Mnemosyne",
         html!(
-            (nav(u.as_ref(), req.uri().path()))
+            (nav(Some(&u), req.uri().path()))
 
             div class="max-w-4xl mx-auto px-2" {
                 div class="my-4 flex justify-between" {
@@ -26,16 +37,24 @@ pub async fn page(req: Request) -> Result<Response, CompositeError> {
                         span class="text-neutral-500" {(PreEscaped(icons::SCROLL_TEXT))}
                         span class="text-2xl font-semibold font-lora" {"Quotes"}
                     }
-                    @if let Some(_) = u {
-                        a href="/quotes/add" class="group border rounded flex items-center gap-1 px-2 border-neutral-200/25 hover:border-neutral-200/45 bg-neutral-400/5 hover:bg-neutral-400/10" {
-                            span class="text-neutral-300 group-hover:text-neutral-200" {(PreEscaped(icons::PLUS))}
-                            span class="text-neutral-300 group-hover:text-neutral-200" {"Add quote"}
-                        }
+                    a href="/quotes/add" class="group border rounded flex items-center gap-1 px-2 border-neutral-200/25 hover:border-neutral-200/45 bg-neutral-400/5 hover:bg-neutral-400/10" {
+                        span class="text-neutral-300 group-hover:text-neutral-200" {(PreEscaped(icons::PLUS))}
+                        span class="text-neutral-300 group-hover:text-neutral-200" {"Add quote"}
                     }
                 }
                 input class="border w-full border-neutral-200/25 hover:border-neutral-200/45 bg-neutral-950/50 p-2 rounded"
-                    placeholder="Search for quotes...";
-                div class="text-center p-4" {"Search not yet implemented."}
+                    placeholder="Search not yet implemented.";
+                div class="my-2 w-full" {
+                    p class="ml-auto w-fit text-neutral-500 text-sm flex items-center" {
+                        span class="scale-[.6]" {(PreEscaped(icons::CALENDAR_ARROW_DOWN))}
+                        "Chronological"
+                    }
+                }
+                div class="flex flex-col gap-4" {
+                    @for q in quotes {
+                        (quote(&q))
+                    }
+                }
             }
         ),
     )