Replace hash-based tab routing with path-based routing

Use leptos_router with /balance and /transactions paths instead of #balance
and #transactions hash fragments. The server now falls back to the shell
HTML for any unmatched route so deep links and refreshes work, and the
client router redirects / to /balance.

Author: ad-si

src/app.rs

@@ -1,80 +1,33 @@
-use leptos::ev;
 use leptos::prelude::*;
+use leptos_router::components::{FlatRoutes, Redirect, Route, Router, A};
+use leptos_router::path;
 
 use crate::{BalanceEntry, TransactionEntry};
 
-#[derive(Debug, Clone, Copy, PartialEq, Eq)]
-enum Tab {
-  Balance,
-  Transactions,
-}
-
-fn tab_from_hash() -> Tab {
-  match location_hash().as_deref() {
-    Some("transactions") => Tab::Transactions,
-    _ => Tab::Balance,
-  }
-}
-
-fn tab_hash(tab: Tab) -> &'static str {
-  match tab {
-    Tab::Balance => "balance",
-    Tab::Transactions => "transactions",
-  }
-}
-
-fn write_hash(tab: Tab) {
-  if !is_server() {
-    let _ = window().location().set_hash(tab_hash(tab));
-  }
-}
-
 #[component]
 pub fn App() -> impl IntoView {
-  let tab = RwSignal::new(tab_from_hash());
-
-  // Sync browser back/forward and manual hash edits into the signal.
-  if !is_server() {
-    let handle = window_event_listener(ev::hashchange, move |_| {
-      let new_tab = tab_from_hash();
-      if tab.get_untracked() != new_tab {
-        tab.set(new_tab);
-      }
-    });
-    on_cleanup(move || handle.remove());
-  }
-
-  let is_balance = move || tab.get() == Tab::Balance;
-  let is_transactions = move || tab.get() == Tab::Transactions;
-
   view! {
-    <nav>
-      <h1>"Transity"</h1>
-      <div class="tabs">
-        <button
-          class="tab"
-          class:active=is_balance
-          on:click=move |_| {
-            tab.set(Tab::Balance);
-            write_hash(Tab::Balance);
-          }
-        >"Balance"</button>
-        <button
-          class="tab"
-          class:active=is_transactions
-          on:click=move |_| {
-            tab.set(Tab::Transactions);
-            write_hash(Tab::Transactions);
-          }
-        >"Transactions"</button>
-      </div>
-    </nav>
-    <main>
-      {move || match tab.get() {
-        Tab::Balance => view! { <BalancePage /> }.into_any(),
-        Tab::Transactions => view! { <TransactionsPage /> }.into_any(),
-      }}
-    </main>
+    <Router>
+      <nav>
+        <h1>"Transity"</h1>
+        <div class="tabs">
+          <A href="/balance" attr:class="tab">"Balance"</A>
+          <A href="/transactions" attr:class="tab">"Transactions"</A>
+        </div>
+      </nav>
+      <main>
+        <FlatRoutes fallback=|| view! {
+          <p class="error">"Page not found."</p>
+        }>
+          <Route
+            path=path!("")
+            view=|| view! { <Redirect path="/balance" /> }
+          />
+          <Route path=path!("/balance") view=BalancePage />
+          <Route path=path!("/transactions") view=TransactionsPage />
+        </FlatRoutes>
+      </main>
+    </Router>
   }
 }
 

src/server.rs

@@ -68,7 +68,6 @@ pub async fn start(ledger: Ledger, port: u16) -> anyhow::Result<()> {
   let addr = SocketAddr::from(([127, 0, 0, 1], port));
 
   let app = Router::new()
-    .route("/", axum::routing::get(serve_shell))
     .route("/pkg/transity.js", axum::routing::get(serve_js))
     .route("/pkg/transity.css", axum::routing::get(serve_css))
     .route("/pkg/transity.wasm", axum::routing::get(serve_wasm))
@@ -86,7 +85,8 @@ pub async fn start(ledger: Ledger, port: u16) -> anyhow::Result<()> {
           )
         }
       }),
-    );
+    )
+    .fallback(serve_shell);
 
   eprintln!("Serving on http://{}", addr);
   let listener = tokio::net::TcpListener::bind(&addr).await?;

style/main.css

@@ -83,14 +83,15 @@ nav h1 {
   border-bottom: 2px solid transparent;
   border-radius: 0;
   margin-bottom: -1px;
+  text-decoration: none;
   transition: color 0.1s ease, border-color 0.1s ease;
 }
 
 .tab:hover {
   color: var(--color-text);
 }
 
-.tab.active {
+.tab[aria-current="page"] {
   color: var(--color-text);
   border-bottom-color: var(--color-leaf-account);
 }