Most of the basic functionality

src/db.rs

···
             creation_datetime TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP
         );",
     ),
-
+    M::up(
+        "CREATE TABLE tag (
+            name TEXT NOT NULL
+        );",
+    ),
+    M::up(
+        "CREATE TABLE subscription_tag (
+            subscription_id INTEGER NOT NULL,
+            tag_id INTEGER NOT NULL,
+            PRIMARY KEY (subscription_id, tag_id)
+        );",
+    ),
+    M::up(
+        "ALTER TABLE subscription
+        ADD COLUMN last_updated TEXT DEFAULT CURRENT_TIMESTAMP;",
+    ),
+    M::up(
+        "ALTER TABLE subscription
+        ADD COLUMN last_updated TEXT DEFAULT CURRENT_TIMESTAMP;",
+    ),
 ];
 
 const MIGRATIONS: Migrations<'_> = Migrations::from_slice(MIGRATIONS_SLICE);

src/fragments.rs

···
+use maud::{Markup, html};
+
+pub mod video_grid;
+
+pub fn wrapper(markup: Markup) -> Markup {
+    html! {
+        head {
+            link rel="stylesheet" href="/style.css";
+            meta name="color-scheme" content="light dark";
+        }
+        body {
+            (markup)
+        }
+    }
+}

src/fragments/video_grid.rs

···
+use maud::{Markup, html};
+use rustypipe::model::VideoItem;
+
+const MINUTE: u32 = 60;
+const HOUR: u32 = 3600;
+
+pub fn video_grid(videos: Vec<VideoItem>) -> Markup {
+    html!(
+
+        ol .thumb-grid {
+            @for vid in videos.into_iter().take(20) {
+                @let channel = vid.channel.unwrap();
+                @let duration = vid.duration.unwrap_or_default();
+                li {
+                    vid-thumbnail {
+                        img src=(vid.thumbnail.first().unwrap().url);
+
+                        vid-timestamp {
+                            @if (duration / HOUR) > 0 {
+                                (duration / HOUR)
+                                ":"
+                            }
+                            ((duration / MINUTE) % 60)
+                            ":"
+                                (format!("{:02}", duration % MINUTE))
+                        }
+
+                    }
+
+                    vid-details-large {
+                        // @let avatar = channel.avatar.first().unwrap();
+                        // img src=(avatar.url) width=(avatar.width) height=(avatar.height);
+                        vid-title {  a href={ "https://youtu.be/" (vid.id)}{(vid.name)} }
+                    }
+
+                    vid-details-small {
+                        vid-channel {  (channel.name) }
+                        upload-date { (vid.publish_date_txt.unwrap_or_default())}
+                    }
+                }
+            }
+        }
+    )
+}

src/main.rs

···
-use poem::{EndpointExt as _, Route, Server, endpoint::StaticFileEndpoint, get, listener::TcpListener, web::Data};
+use poem::{
+    EndpointExt as _, Route, Server, endpoint::StaticFileEndpoint, get, listener::TcpListener,
+    web::Data,
+};
 use rusqlite::Connection;
-use std::{env, sync::{Arc, Mutex}};
+use std::{
+    env,
+    sync::{Arc, Mutex},
+};
 
 mod db;
+mod fragments;
 mod routes;
+
+pub const NBSP: &str = "\u{00a0}";
 
 // type WrappedConnection = Arc<Mutex<Connection>>;
 // type W = WrappedConnection;
···
     let conn = Arc::new(Mutex::new(db::connect()));
 
     let app = Route::new()
-        .at("/", poem::get(routes::index::get).post(routes::index::post))
-
-        .at("/style.css", StaticFileEndpoint::new("./style.css").no_cache(true))
+        .at("/", poem::get(routes::index::get))
+        .at("/tag", poem::post(routes::tag::post))
+        .at("/tag/:id", poem::get(routes::tag::by_id))
+        .at("/sub", poem::post(routes::sub::post))
+        .at("/sub/tag", poem::post(routes::sub::tag))
+        .at("/sub/:id/delete", poem::get(routes::sub::delete))
+        .at(
+            "/style.css",
+            StaticFileEndpoint::new("./style.css").no_cache(true),
+        )
         //.with(CookieJarManager::new())
         .data(conn.clone());
 

src/routes.rs

···
 pub mod index;
 pub mod sub;
+pub mod tag;

src/routes/index.rs

···
-use std::collections::HashMap;
-
+use crate::{
+    Db, NBSP,
+    fragments::{video_grid::video_grid, wrapper},
+};
 use maud::{Markup, html};
-use poem::{IntoResponse as _, Response, handler, web::{Data, Form, Redirect}};
-use rustypipe::{client::RustyPipe, model::{UrlTarget, VideoItem}};
-
-use crate::Db;
+use poem::{handler, web::Data};
+use rusqlite::Connection;
+use rustypipe::{client::RustyPipe, model::VideoItem};
 
 #[derive(Clone)]
-struct Subs {
+pub struct Sub {
     db_id: i32,
     channel_id: String,
     name: String,
+    tags: Vec<Tag>,
 }
 
+#[derive(Clone)]
+pub struct Tag {
+    pub db_id: i32,
+    pub name: String,
+}
 
-#[handler]
-pub async fn post(Data(conn): Db<'_>, Form(form): Form<HashMap<String, String>>) {
-    let channel = &form["channel"];
-
-    let rp = RustyPipe::new();
-    let UrlTarget::Channel { id } = rp.query().resolve_string(channel, false).await.unwrap() else { unreachable!() };
+fn get_sub_tags(conn: &Connection, subscription_id: i32) -> Vec<Tag> {
+    let mut stmt = conn
+        .prepare(
+            "SELECT t.rowid, t.name FROM subscription s
+            LEFT JOIN subscription_tag st ON s.rowid = st.subscription_id
+            LEFT JOIN tag t ON t.rowid = st.tag_id
+            WHERE s.ROWID = ?1",
+        )
+        .unwrap();
 
-    let channel = rp.query().channel_videos(&id).await.unwrap();
-    {
-        let conn = conn.lock().unwrap();
-        let mut stmt = conn.prepare("INSERT INTO subscription (name, channel_id) VALUES (?1, ?2)").unwrap();
-        stmt.execute([channel.name, channel.id]).unwrap();
+    let thing: rusqlite::Result<Vec<_>> = stmt
+        .query_map([subscription_id], |row| {
+            Ok((row.get(0).unwrap(), row.get(1).unwrap()))
+        })
+        .unwrap()
+        .collect();
 
-    }
+    thing
+        .unwrap()
+        .into_iter()
+        .flat_map(|(id, name)| match (id, name) {
+            (Some(db_id), Some(name)) => Some(Tag { db_id, name }),
+            _ => None,
+        })
+        .collect()
 }
 
-#[handler]
-pub async fn get(Data(conn): Db<'_>) -> Markup {
-
-    let subscriptions: rusqlite::Result<Vec<Subs>> = {
-        let conn = conn.lock().unwrap();
-        let mut stmt = conn.prepare("SELECT ROWID, channel_id, name FROM subscription").unwrap();
+pub enum VideoFilter {
+    AllVideos,
+    ByTag { id: i32 },
+    BySubscription { id: i32 },
+}
 
-        stmt
-        .query_map([], |row| {
-            Ok(Subs {
-                db_id: row.get(0).unwrap(),
-                channel_id: row.get(1).unwrap(),
-                name: row.get(2).unwrap(),
-            })
-        }).unwrap()
-        .collect()
+pub fn get_subscriptions(conn: &Connection, filter: VideoFilter) -> rusqlite::Result<Vec<Sub>> {
+    let map_fn = |row: &rusqlite::Row<'_>| {
+        let db_id = row.get(0).unwrap();
+        Ok(Sub {
+            db_id,
+            channel_id: row.get(1).unwrap(),
+            name: row.get(2).unwrap(),
+            tags: get_sub_tags(&conn, db_id),
+        })
     };
-    let subscriptions = subscriptions.unwrap();
 
+    match filter {
+        VideoFilter::AllVideos => {
+            let mut stmt = conn
+                .prepare("SELECT ROWID, channel_id, name FROM subscription")
+                .unwrap();
+            stmt.query_map([], map_fn).unwrap().collect()
+        }
+        VideoFilter::ByTag { id } => {
+            let mut stmt = conn
+                .prepare(
+                    "SELECT s.ROWID, s.channel_id, s.name FROM subscription s
+                LEFT JOIN subscription_tag st ON s.rowid = st.subscription_id
+                LEFT JOIN tag t ON t.rowid = st.tag_id
+                WHERE t.ROWID = ?1",
+                )
+                .unwrap();
+            stmt.query_map([id], map_fn).unwrap().collect()
+        }
+        VideoFilter::BySubscription { id } => todo!(),
+    }
+}
+
+pub async fn get_videos(subscriptions: &[Sub]) -> Vec<VideoItem> {
     let rp = RustyPipe::new();
 
     let mut videos = vec![];
     for subscription in subscriptions.clone() {
-        let vids = rp.query()
-            .channel_videos_tab(subscription.channel_id, rustypipe::param::ChannelVideoTab::Videos).await.unwrap();
+        let vids = rp
+            .query()
+            .channel_videos_tab(
+                subscription.channel_id.clone(),
+                rustypipe::param::ChannelVideoTab::Videos,
+            )
+            .await
+            .unwrap();
         videos.extend(vids.content.items);
     }
 
     videos.sort_by(|a, b| {
-        let make_timestamp = |e: &VideoItem| {e.publish_date.map(|t| t.unix_timestamp()).unwrap_or_default()};
+        let make_timestamp = |e: &VideoItem| {
+            e.publish_date
+                .map(|t| t.unix_timestamp())
+                .unwrap_or_default()
+        };
         make_timestamp(a).cmp(&make_timestamp(b))
     });
 
     videos.reverse();
 
-    html!{
-        link rel="stylesheet" href="/style.css";
+    videos
+}
 
-        form method="POST" {
+#[handler]
+pub async fn get(Data(conn): Db<'_>) -> Markup {
+    let tags: Vec<Tag> = {
+        let conn = conn.lock().unwrap();
 
-            label { "sub" input name="channel"; }
-            input type="submit";
+        let mut stmt = conn.prepare("SELECT ROWID, name FROM tag").unwrap();
+
+        let tags: rusqlite::Result<Vec<Tag>> = stmt
+            .query_map([], |row| {
+                Ok(Tag {
+                    db_id: row.get(0).unwrap(),
+                    name: row.get(1).unwrap(),
+                })
+            })
+            .unwrap()
+            .collect();
+
+        tags.unwrap()
+    };
+
+    let subscriptions = {
+        let conn = conn.lock().unwrap();
+        get_subscriptions(&conn, VideoFilter::AllVideos).unwrap()
+    };
+
+    let videos = get_videos(&subscriptions[..]).await;
+
+    wrapper(html! {
+
+        nav {
+            h1.plain.heading { "All Subscriptions" }
         }
+        hr;
 
-        details {
-            summary { "All subscriptions" }
+        details name="grouped" {
+            summary { "Manage Subscriptions" }
+            form action="/sub" method="POST" {
+
+                label {
+                    "Channel ID, or username, or @handle "
+                    br;
+                    input name="channel";
+                }
+                br;
+                input type="submit" value="Subscribe";
+            }
             @for sub in subscriptions {
                 ul {
                     li {
                         (sub.name)
 
-                        form action="/sub" method="DELETE" {
-                            input type="hidden" name="id" value=(sub.db_id);
+                        br;
+                        div style="border: 1px solid rebeccapurple; display: inline-flex; gap: 1rem;" {
+                            @for tag in sub.tags {
+                                span {(tag.name)}
+                            }
+                        }
+                        form action="/sub/tag" method="POST" {
+                            input type="hidden" name="sub" value=(sub.db_id);
+                            select name="tag" {
+                                @for tag in &tags {
+                                    option value=(tag.db_id) { (tag.name) }
+                                }
+                            }
+                            input type="submit" value="Add tag";
+                        }
+
+                        form action={"/sub/" (sub.db_id) "/delete"} method="GET" {
+                            input type="submit" value="Delete";
                         }
                     }
                 }
             }
         }
 
-        ol .thumb-grid {
-            @for vid in videos {
-                @let channel = vid.channel.unwrap();
-                @let duration = vid.duration.unwrap_or_default();
-                li {
-                    vid-thumbnail {
-                        img src=(vid.thumbnail.first().unwrap().url);
-
-                        vid-timestamp {
-                            (duration / 60)
-                            ":"
-                            (duration % 60)
-                        }
-
-                    }
+        details name="grouped" {
+            summary { "Manage Tags" }
+            form action="/tag" method="POST" {
 
-                    vid-details-large {
-                        // @let avatar = channel.avatar.first().unwrap();
-                        // img src=(avatar.url) width=(avatar.width) height=(avatar.height);
-                        vid-title { (vid.name) }
-                    }
-
-                    vid-details-small {
-                        vid-channel { (channel.name) }
-                        upload-date { (vid.publish_date_txt.unwrap_or_default())}
+                label {
+                    "Tag name "
+                    br;
+                    input name="name";
+                }
+                br;
+                input type="submit" value="New tag";
+            }
+            @for tag in tags {
+                ul {
+                    li {
+                        (tag.name) (NBSP) a href={"/tag/"(tag.db_id)} {"View Posts"}
                     }
                 }
             }
         }
 
-    }
+        (video_grid(videos))
+
+    })
 }

src/routes/sub.rs

···
-use poem::{handler, web::Data};
+use std::collections::HashMap;
+
 use crate::Db;
+use poem::{
+    handler,
+    web::{Data, Form, Path, Redirect},
+};
+use rustypipe::{client::RustyPipe, model::UrlTarget};
 
 #[handler]
-pub async fn delete(Data(conn): Db<'_>) {
+pub async fn tag(
+    Data(conn): Db<'_>,
+    Form(form): Form<HashMap<String, String>>,
+) -> poem::web::Redirect {
+    let tag = &form["tag"];
+    let sub = &form["sub"];
+
+    let conn = conn.lock().unwrap();
+    let mut stmt = conn
+        .prepare("INSERT INTO subscription_tag (subscription_id, tag_id) VALUES (?1, ?2)")
+        .unwrap();
+    stmt.execute([sub, tag]).unwrap();
 
+    Redirect::see_other("/")
+}
+
+#[handler]
+pub async fn delete(Data(conn): Db<'_>) {}
+
+#[handler]
+pub async fn post(Data(conn): Db<'_>, Form(form): Form<HashMap<String, String>>) -> Redirect {
+    let channel = &form["channel"];
+
+    let rp = RustyPipe::new();
+    let UrlTarget::Channel { id } = rp.query().resolve_string(channel, false).await.unwrap() else {
+        unreachable!()
+    };
+
+    let channel = rp.query().channel_videos(&id).await.unwrap();
+    {
+        let conn = conn.lock().unwrap();
+        let mut stmt = conn
+            .prepare("INSERT INTO subscription (name, channel_id) VALUES (?1, ?2)")
+            .unwrap();
+        stmt.execute([channel.name, channel.id]).unwrap();
+    }
+
+    Redirect::see_other("/")
 }

src/routes/tag.rs

···
+use std::collections::HashMap;
+
+use maud::{Markup, html};
+use poem::{
+    handler,
+    web::{Data, Form, Path, Redirect},
+};
+
+use crate::{
+    Db, NBSP,
+    fragments::{video_grid::video_grid, wrapper},
+    routes::index::{Tag, VideoFilter, get_subscriptions, get_videos},
+};
+
+#[handler]
+pub async fn by_id(Path(id): Path<i32>, Data(conn): Db<'_>) -> Markup {
+    let subscriptions = {
+        let conn = conn.lock().unwrap();
+        get_subscriptions(&conn, VideoFilter::ByTag { id }).unwrap()
+    };
+
+    let videos = get_videos(&subscriptions[..]).await;
+
+    let tag: Tag = {
+        let conn = conn.lock().unwrap();
+
+        let mut stmt = conn
+            .prepare("SELECT name FROM tag WHERE rowid = ?1")
+            .unwrap();
+
+        stmt.query_one([id], |row| {
+            Ok(Tag {
+                db_id: id,
+                name: row.get(0).unwrap(),
+            })
+        })
+        .unwrap()
+    };
+
+    wrapper(html! {
+        nav {
+            a href="/" { "← Back to Index" } (NBSP) h1.plain.heading { (tag.name) }
+        }
+        hr;
+        (video_grid(videos))
+    })
+}
+
+#[handler]
+pub fn post(Data(conn): Db<'_>, Form(form): Form<HashMap<String, String>>) -> Redirect {
+    let name = &form["name"];
+
+    let conn = conn.lock().unwrap();
+    let mut stmt = conn.prepare("INSERT INTO tag (name) VALUES (?1)").unwrap();
+    stmt.execute([name]).unwrap();
+
+    Redirect::see_other("/")
+}

style.css

···
     box-sizing: border-box;
 }
 
+h1.plain,
+h2.plain,
+h3.plain {
+    font-size: inherit;
+    font-weight: inherit;
+    display: inline;
+}
+
+.heading.heading {
+    font-weight: bold;
+    text-transform: capitalize;
+}
+
 ol.thumb-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, 16rem);
     gap: 1rem;
+    padding: 0;
+    justify-content: center;
 
     li {
         display: flex;