Remove custom htmx indicator mechanism

Cargo.lock

@@ -17,21 +17,6 @@ version = "2.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "512761e0bb2578dd7380c6baaa0f4ce03e84f95e960231d1dec8bf4d7d6e2627"
 
-[[package]]
-name = "android-tzdata"
-version = "0.1.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e999941b234f3131b00bc13c22d06e8c5ff726d1b6318ac7eb276997bbb4fef0"
-
-[[package]]
-name = "android_system_properties"
-version = "0.1.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "819e7219dbd41043ac279b19830f2efc897156490d7fd6ea916720117ee66311"
-dependencies = [
- "libc",
-]
-
 [[package]]
 name = "anstream"
 version = "0.6.18"
@@ -245,47 +230,18 @@ version = "2.8.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8f68f53c83ab957f72c32642f3868eec03eb974d1fb82e453128456482613d36"
 
-[[package]]
-name = "bumpalo"
-version = "3.16.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "79296716171880943b8470b5f8d03aa55eb2e645a4874bdbb28adb49162e012c"
-
 [[package]]
 name = "bytes"
 version = "1.9.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "325918d6fe32f23b19878fe4b34794ae41fc19ddbe53b10571a4874d44ffd39b"
 
-[[package]]
-name = "cc"
-version = "1.2.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "27f657647bcff5394bf56c7317665bbf790a137a50eaaa5c6bfbb9e27a518f2d"
-dependencies = [
- "shlex",
-]
-
 [[package]]
 name = "cfg-if"
 version = "1.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd"
 
-[[package]]
-name = "chrono"
-version = "0.4.39"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7e36cc9d416881d2e24f9a963be5fb1cd90966419ac844274161d10488b3e825"
-dependencies = [
- "android-tzdata",
- "iana-time-zone",
- "js-sys",
- "num-traits",
- "wasm-bindgen",
- "windows-targets",
-]
-
 [[package]]
 name = "clap"
 version = "4.5.27"
@@ -332,12 +288,6 @@ version = "1.0.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "5b63caa9aa9397e2d9480a9b13673856c78d8ac123288526c37d7839f2a86990"
 
-[[package]]
-name = "core-foundation-sys"
-version = "0.8.7"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "773648b94d0e5d620f64f280777445740e61fe701025087ec8b57f45c791888b"
-
 [[package]]
 name = "darling"
 version = "0.20.10"
@@ -562,11 +512,11 @@ dependencies = [
  "askama",
  "askama_axum",
  "axum",
- "chrono",
  "clap",
  "deadpool-diesel",
  "diesel",
  "dotenvy",
+ "serde",
  "tokio",
  "tower",
  "tower-http",
@@ -670,29 +620,6 @@ dependencies = [
  "tower-service",
 ]
 
-[[package]]
-name = "iana-time-zone"
-version = "0.1.61"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "235e081f3925a06703c2d0117ea8b91f042756fd6e7a6e5d901e8ca1a996b220"
-dependencies = [
- "android_system_properties",
- "core-foundation-sys",
- "iana-time-zone-haiku",
- "js-sys",
- "wasm-bindgen",
- "windows-core",
-]
-
-[[package]]
-name = "iana-time-zone-haiku"
-version = "0.1.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f31827a206f56af32e590ba56d5d2d085f558508192593743f16b2306495269f"
-dependencies = [
- "cc",
-]
-
 [[package]]
 name = "ident_case"
 version = "1.0.1"
@@ -711,16 +638,6 @@ version = "1.0.14"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d75a2a4b1b190afb6f5425f10f6a8f959d2ea0b9c2b1d79553551850539e4674"
 
-[[package]]
-name = "js-sys"
-version = "0.3.76"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6717b6b5b077764fb5966237269cb3c64edddde4b14ce42647430a78ced9e7b7"
-dependencies = [
- "once_cell",
- "wasm-bindgen",
-]
-
 [[package]]
 name = "lazy_static"
 version = "1.5.0"
@@ -1052,12 +969,6 @@ dependencies = [
  "lazy_static",
 ]
 
-[[package]]
-name = "shlex"
-version = "1.3.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0fda2ff0d084019ba4d7c6f371c95d8fd75ce3524c3cb8fb653a3023f6323e64"
-
 [[package]]
 name = "signal-hook-registry"
 version = "1.4.2"
@@ -1336,60 +1247,6 @@ version = "0.11.0+wasi-snapshot-preview1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9c8d87e72b64a3b4db28d11ce29237c246188f4f51057d65a7eab63b7987e423"
 
-[[package]]
-name = "wasm-bindgen"
-version = "0.2.99"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a474f6281d1d70c17ae7aa6a613c87fce69a127e2624002df63dcb39d6cf6396"
-dependencies = [
- "cfg-if",
- "once_cell",
- "wasm-bindgen-macro",
-]
-
-[[package]]
-name = "wasm-bindgen-backend"
-version = "0.2.99"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5f89bb38646b4f81674e8f5c3fb81b562be1fd936d84320f3264486418519c79"
-dependencies = [
- "bumpalo",
- "log",
- "proc-macro2",
- "quote",
- "syn",
- "wasm-bindgen-shared",
-]
-
-[[package]]
-name = "wasm-bindgen-macro"
-version = "0.2.99"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2cc6181fd9a7492eef6fef1f33961e3695e4579b9872a6f7c83aee556666d4fe"
-dependencies = [
- "quote",
- "wasm-bindgen-macro-support",
-]
-
-[[package]]
-name = "wasm-bindgen-macro-support"
-version = "0.2.99"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "30d7a95b763d3c45903ed6c81f156801839e5ee968bb07e534c44df0fcd330c2"
-dependencies = [
- "proc-macro2",
- "quote",
- "syn",
- "wasm-bindgen-backend",
- "wasm-bindgen-shared",
-]
-
-[[package]]
-name = "wasm-bindgen-shared"
-version = "0.2.99"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "943aab3fdaaa029a6e0271b35ea10b72b943135afe9bffca82384098ad0e06a6"
-
 [[package]]
 name = "winapi"
 version = "0.3.9"
@@ -1412,15 +1269,6 @@ version = "0.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "712e227841d057c1ee1cd2fb22fa7e5a5461ae8e48fa2ca79ec42cfc1931183f"
 
-[[package]]
-name = "windows-core"
-version = "0.52.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "33ab640c8d7e35bf8ba19b884ba838ceb4fba93a4e8c65a9059d08afcfc683d9"
-dependencies = [
- "windows-targets",
-]
-
 [[package]]
 name = "windows-sys"
 version = "0.52.0"

Cargo.toml

@@ -6,11 +6,11 @@ edition = "2021"
 [dependencies]
 tokio = { version = "1", features = ["full"] }
 axum = "0.7.9"
+serde = { version = "1.0.217", features = ["derive"] }
 tower = "0.5.2"
 tracing = "0.1.41"
 tracing-subscriber = "0.3.19"
 tower-http = { version = "0.6.2", features = ["cors", "trace", "fs"] }
-chrono = "0.4.39"
 diesel = { version = "2.2.0", features = ["sqlite", "returning_clauses_for_sqlite_3_35"] }
 dotenvy = "0.15"
 anyhow = "1.0.95"

assets/oval.svg

@@ -0,0 +1,17 @@
+<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
+    <g fill="none" fill-rule="evenodd">
+        <g transform="translate(1 1)" stroke-width="2">
+            <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
+            <path d="M36 18c0-9.94-8.06-18-18-18">
+                <animateTransform
+                    attributeName="transform"
+                    type="rotate"
+                    from="0 18 18"
+                    to="360 18 18"
+                    dur="1s"
+                    repeatCount="indefinite"/>
+            </path>
+        </g>
+    </g>
+</svg>

httptests/Index.http

@@ -1,4 +0,0 @@
-### GET request to index
-GET http://{{host}}:{{port}}/
-
-###

httptests/http-client.env.json

@@ -1,6 +0,0 @@
-{
-  "dev": {
-    "host": "127.0.0.1",
-    "port": "3000"
-  }
-}

src/main.rs

@@ -1,18 +1,10 @@
 use diesel::prelude::*;
-use std::env;
-use std::sync::Arc;
 use anyhow::{anyhow, Result, Context};
 use askama_axum::Template;
-use axum::{
-    extract::{Path, State},
-    http::{Method, header, StatusCode, Request, Uri},
-    response::{IntoResponse, Response, Html},
-    routing::{get, post},
-    Json, Router,
-};
+use axum::{extract::{Path, State}, http::{Method, header, StatusCode, Request, Uri}, response::{IntoResponse, Response, Html}, routing::{get, post}, Json, Router, Form, http};
+use axum::http::HeaderValue;
 use deadpool_diesel::sqlite::{Runtime, Manager, Pool};
 use clap::Parser;
-use tokio::sync::Mutex;
 use tower::{ServiceBuilder};
 use tower_http::{
     cors::{Any, CorsLayer},
@@ -20,6 +12,7 @@ use tower_http::{
     services::ServeDir,
     LatencyUnit
 };
+use serde::Deserialize;
 use tracing::{
     info, error, debug, info_span, enabled,
     instrument, Level, Span
@@ -44,7 +37,6 @@ struct Config {
 struct AppContext {
     config: Config,
     pool: Pool,
-    counter: Arc<Mutex<i32>>
 }
 
 async fn establish_connection(database_url: &str) -> Pool {
@@ -71,7 +63,6 @@ async fn main() -> Result<()> {
     let context = AppContext {
         config: config.clone(),
         pool: pool.clone(),
-        counter: Arc::new(Mutex::new(0)),
     };
     // Prepare Middlewares
     let cors = CorsLayer::very_permissive();
@@ -99,7 +90,10 @@ async fn main() -> Result<()> {
     let app = Router::new()
         .nest_service("/assets", ServeDir::new("assets"))
         .route("/", get(index))
-        .route("/feed/:id/", get(get_feed))
+        .route("/feed/", get(get_list_feed).post(post_feed))
+        .route("/feed/:id", get(get_feed).delete(delete_feed).put(put_feed))
+        .route("/feed/:id/edit/form", get(get_feed_form))
+        .route("/feed/:id/edit/inline", get(get_feed_inline))
         .layer(middlewares)
         .with_state(context.clone());
     // Run our app with hyper
@@ -145,14 +139,127 @@ async fn get_feed(
 }
 
 #[derive(Template)]
-#[template(path = "index.html")]
-struct IndexTemplate {
-    feeds: Vec<RssFeed>,
+#[template(path="feed_form.html")]
+struct FeedFormTemplate {
+    feed: RssFeed
 }
 
-async fn index(
+async fn get_feed_form(
     State(ctx): State<AppContext>,
-) -> IndexTemplate {
+    Path(feed_id): Path<i32>
+) -> impl IntoResponse {
+    let conn = ctx.pool.get().await.unwrap();
+    use self::schema::rss_feeds::dsl::*;
+    let result = conn.interact(move |conn| {
+        rss_feeds
+            .find(feed_id)
+            .select(RssFeed::as_select())
+            .first(conn)
+            .optional()
+            .expect("Error loading feeds")
+    }).await.unwrap();
+    if let Some(feed) = result {
+        FeedFormTemplate{ feed }
+    } else {
+        FeedFormTemplate{
+            feed: RssFeed{
+                id: -1,
+                name: "ERROR".to_string(),
+                feed_url: "ERROR".to_string(),
+                last_pub_date: Some("ERROR".to_string())
+            }
+        }
+    }
+}
+
+#[derive(Template)]
+#[template(path="feed_inline.html")]
+struct FeedInlineTemplate {
+    feed: RssFeed
+}
+
+async fn get_feed_inline(
+    State(ctx): State<AppContext>,
+    Path(feed_id): Path<i32>
+) -> impl IntoResponse {
+    let conn = ctx.pool.get().await.unwrap();
+    use self::schema::rss_feeds::dsl::*;
+    let result = conn.interact(move |conn| {
+        rss_feeds
+            .find(feed_id)
+            .select(RssFeed::as_select())
+            .first(conn)
+            .optional()
+            .expect("Error loading feeds")
+    }).await.unwrap();
+    if let Some(feed) = result {
+        FeedInlineTemplate{ feed }
+    } else {
+        FeedInlineTemplate{
+            feed: RssFeed{
+                id: -1,
+                name: "ERROR".to_string(),
+                feed_url: "ERROR".to_string(),
+                last_pub_date: Some("ERROR".to_string())
+            }
+        }
+    }
+}
+
+#[derive(Deserialize, AsChangeset)]
+#[diesel(table_name = crate::schema::rss_feeds)]
+struct PostForm{
+    name: String,
+    feed_url: String,
+}
+
+async fn post_feed(
+    State(ctx): State<AppContext>,
+    Form(post): Form<PostForm>,
+) -> impl IntoResponse {
+    let conn = ctx.pool.get().await.unwrap();
+    use self::schema::rss_feeds::dsl::*;
+    let result = conn.interact(move |conn| {
+        let new_feed = NewRssFeed{name: post.name.as_str(), feed_url: post.feed_url.as_str() };
+        diesel::insert_into(rss_feeds)
+            .values(&new_feed)
+            .returning(RssFeed::as_select())
+            .get_result(conn)
+            .expect("Error saving new feed")
+    }).await.unwrap();
+    FeedTemplate{ feed: result }
+}
+
+async fn put_feed(
+    State(ctx): State<AppContext>,
+    Path(feed_id): Path<i32>,
+    Form(post): Form<PostForm>
+) -> impl IntoResponse {
+    let conn = ctx.pool.get().await.unwrap();
+    use self::schema::rss_feeds::dsl::*;
+    let result = conn.interact(move |conn| {
+        diesel::update(rss_feeds.find(feed_id))
+            .set(post)
+            .returning(RssFeed::as_select())
+            .get_result(conn)
+            .expect("Error updating feed")
+    }).await.unwrap();
+    FeedTemplate{ feed: result }
+}
+
+
+#[derive(Template)]
+#[template(source="\
+{% for feed in feeds %}
+{% include \"feed.html\" %}
+{% endfor %}", ext="html")]
+struct FeedsTemplate {
+    feeds: Vec<RssFeed>
+}
+
+async fn get_list_feed(
+    State(ctx): State<AppContext>,
+) -> FeedsTemplate {
     let conn = ctx.pool.get().await.unwrap();
     use self::schema::rss_feeds::dsl::*;
     let result = conn.interact(|conn| {
@@ -161,5 +268,38 @@ async fn index(
             .load(conn)
             .expect("Error loading feeds")
     }).await.unwrap();
-    IndexTemplate { feeds: result }
+    FeedsTemplate{ feeds: result }
+}
+
+async fn delete_feed(
+    State(ctx): State<AppContext>,
+    Path(feed_id): Path<i32>,
+) -> impl IntoResponse {
+    let conn = ctx.pool.get().await.unwrap();
+    use self::schema::rss_feeds::dsl::*;
+    let num_deleted = conn.interact(move |conn| {
+        diesel::delete(rss_feeds.find(feed_id))
+            .execute(conn)
+            .expect("Error deleting posts")
+    }).await.unwrap();
+    if num_deleted == 0 {
+        (StatusCode::NOT_FOUND, "Not found")
+    } else {
+        // HTMX swaps only on 200, so we cannot use NO_CONTENT
+        // In fact, MSDN says that NO_CONTENT means "do nothing", but this is debated.
+        (StatusCode::OK, "")
+    }
+}
+
+#[derive(Template)]
+#[template(path = "index.html")]
+struct IndexTemplate {
+    feeds: FeedsTemplate
+}
+
+async fn index(
+    State(ctx): State<AppContext>,
+) -> IndexTemplate {
+    let feeds = get_list_feed(State(ctx)).await;
+    IndexTemplate { feeds }
 }

src/models.rs

@@ -9,3 +9,11 @@ pub struct RssFeed {
     pub feed_url: String,
     pub last_pub_date: Option<String>,
 }
+
+
+#[derive(Insertable)]
+#[diesel(table_name = crate::schema::rss_feeds)]
+pub struct NewRssFeed<'a> {
+    pub name: &'a str,
+    pub feed_url: &'a str,
+}

templates/base.html

@@ -2,9 +2,14 @@
 <html lang="en">
 <head>
     <link rel="stylesheet" href="https://matcha.mizu.sh/matcha.css">
-<!--    <script src="https://cdn.twind.style" crossorigin></script>-->
     <title>{% block title %}{{ title }}{% endblock %}</title>
     <script src="https://unpkg.com/htmx.org@2.0.4"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"></script>
+    <style>
+        [x-cloak] {
+            display: none !important;
+        }
+    </style>
     {% block head %}{% endblock %}
 </head>
 <body>

templates/feed.html

@@ -3,11 +3,22 @@
     <td>{{feed.feed_url}}</td>
     <td>{{feed.last_pub_date.clone().unwrap_or("None".to_string())}}</td>
     <td>
-        <button hx-get="/feed/{{feed.id}}/"
+        <button hx-get="/feed/{{feed.id}}/edit/inline"
                 hx-target="#feed_{{feed.id}}"
-                hx-swap="outerHTML"
-                hx-trigger="click">
-            Refresh
+                hx-swap="outerHTML">
+            Edit Inline
+        </button>
+        <button hx-get="/feed/{{feed.id}}/edit/form"
+                hx-target="body"
+                hx-swap="beforeend">
+            Edit Dialog
+        </button>
+        <button class="danger"
+                hx-confirm="Are you sure?"
+                hx-delete="/feed/{{feed.id}}"
+                hx-target="#feed_{{feed.id}}"
+                hx-swap="outerHTML">
+            Delete
         </button>
     </td>
 </tr>

templates/feed_form.html

@@ -0,0 +1,29 @@
+<div id="modal" x-data>
+    <div class="overlay" style="z-index: 30"></div>
+    <dialog open style="z-index: 31">
+        <header>
+            <h2>Modify RSS Feed subscription</h2>
+        </header>
+        <form id="modify_form" hx-put="/feed/{{feed.id}}" hx-target="#feed_{{feed.id}}" hx-swap="outerHTML"
+              hx-indicator="#mod_indicator"
+              @htmx:after-on-load="document.getElementById('modal').remove()">
+            <label>
+                Name
+                <input type="text" name="name" value="{{feed.name}}">
+            </label>
+            <label>
+                Feed URL
+                <input type="url" name="feed_url" value="{{feed.feed_url}}">
+            </label>
+        </form>
+        <footer>
+            <button form="modify_form" type="reset" @click="document.getElementById('modal').remove()">Close
+            </button>
+            <button form="modify_form" type="submit">
+                Submit
+                <img id="mod_indicator" class="htmx-indicator" src="/assets/oval.svg"
+                     style="height: 1rem; margin-left: 2px" alt="...">
+            </button>
+        </footer>
+    </dialog>
+</div>

templates/feed_inline.html

@@ -0,0 +1,29 @@
+<tr id="feed_{{feed.id}}">
+    <td>
+        <label style="width: 100%">
+            <input type="text" name="name" form="update_feed_{{feed.id}}" value="{{feed.name}}">
+        </label>
+    </td>
+    <td>
+        <label style="width: 100%">
+            <input type="url" name="feed_url" form="update_feed_{{feed.id}}" value="{{feed.feed_url}}">
+        </label>
+    </td>
+    <td>{{feed.last_pub_date.clone().unwrap_or("None".to_string())}}</td>
+    <td>
+        <form id="update_feed_{{feed.id}}" hx-put="/feed/{{feed.id}}" hx-target="#feed_{{feed.id}}" hx-swap="outerHTML"
+              hx-indicator="update_feed_{{feed.id}}_indicator" style="padding: 0; background: unset">
+            <button type="reset"
+                    hx-get="/feed/{{feed.id}}"
+                    hx-target="#feed_{{feed.id}}"
+                    hx-swap="outerHTML">
+                Cancel
+            </button>
+            <button type="submit">
+                Confirm
+                <img id="update_feed_{{feed.id}}_indicator" class="htmx-indicator" src="/assets/oval.svg"
+                     style="height: 1rem; margin-left: 2px" alt="...">
+            </button>
+        </form>
+    </td>
+</tr>

templates/index.html

@@ -3,28 +3,87 @@
 {% block title %}Hello!{% endblock %}
 
 {% block head %}
+<style>
+    .navbar {
+        overflow: hidden;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        background: #161b22;
+    }
+
+    .overlay {
+        width: 100%;
+        height: 100%;
+        position: fixed;
+        top: 0;
+        left: 0;
+        background: #161b22;
+        opacity: 0.75;
+    }
+
+    th {
+        white-space: nowrap;
+    }
+
+    td {
+        white-space: nowrap;
+    }
+</style>
 {% endblock %}
 
 {% block content %}
-<nav class="no-overflow fixed width" style="z-index: 20">
+<nav class="navbar" style="z-index: 20">
     <div>
-        <a href="/" class="flex">
-            <img src="/assets/logo.svg" class="m-.5" style="height: 32px" alt="RSS Notifier Logo"/>
+        <a href="/" style="display: flex">
+            <img src="/assets/logo.svg" style="margin:8px; height: 32px" alt="RSS Notifier Logo"/>
             <h2 style="margin-bottom: auto; margin-top: auto">RSS Notifier</h2>
         </a>
     </div>
 </nav>
 <div style="height: 48px; margin-bottom: 8px"></div>
-<div class="flex end"><button>Create</button></div>
-<table class="centered">
+<div x-data="{'isModalOpen': false}">
+    <div style="display:flex; justify-content:flex-end">
+        <button @click="isModalOpen = true">Create</button>
+    </div>
+    <div class="overlay" style="z-index: 30" x-show="isModalOpen" x-cloak></div>
+    <dialog open style="z-index: 31" x-show="isModalOpen" x-cloak x-transition>
+        <header>
+            <h2>Create new RSS Feed subscription</h2>
+        </header>
+        <form id="create_form" hx-post="/feed/" hx-target="#feed_tbody" hx-swap="beforeend" hx-indicator="#indicator"
+              @htmx:after-on-load="document.getElementById('create_form').reset();isModalOpen = false">
+            <label>
+                Name
+                <input type="text" name="name">
+            </label>
+            <label>
+                Feed URL
+                <input type="url" name="feed_url">
+            </label>
+        </form>
+        <footer>
+            <button form="create_form" type="reset" @click="isModalOpen = false">Close</button>
+            <button form="create_form" type="submit">
+                Submit
+                <img id="indicator" class="htmx-indicator" src="/assets/oval.svg" style="height: 1rem; margin-left: 2px"
+                     alt="...">
+            </button>
+        </footer>
+    </dialog>
+    <table style="text-align:center">
+        <thead>
         <tr>
             <th>Feed Name</th>
             <th>Feed URL</th>
             <th>Last Mail Sent</th>
             <th>Actions</th>
         </tr>
-    {% for feed in feeds %}
-    {% include "feed.html" %}
-    {% endfor %}
+        </thead>
+        <tbody id="feed_tbody">
+        {{ feeds|safe }}
+        </tbody>
     </table>
+</div>
 {% endblock %}