feat: consistent styling and clipboard copy apikey

src/server/routes/html/knowledge/entities.rs

@@ -35,7 +35,6 @@ page_data!(KnowledgeBaseData, "knowledge/base.html", {
 pub async fn show_knowledge_page(
     State(state): State<AppState>,
     auth: AuthSession<User, String, SessionSurrealPool<Any>, Surreal<Any>>,
-    session: Session<SessionSurrealPool<Any>>,
 ) -> Result<impl IntoResponse, HtmlError> {
     // Early return if the user is not authenticated
     let user = match auth.current_user {

tailwind.config.js

@@ -7,7 +7,7 @@ module.exports = {
    theme: {
     container: {
       padding: {
-        DEFAULT: '1rem',
+        DEFAULT: '10px',
         sm: '2rem',
         lg: '4rem',
         xl: '5rem',

templates/auth/account_settings.html

@@ -5,8 +5,8 @@
     opacity: 0.5;
   }
 </style>
-<main class="grow flex flex-col prose container mx-auto mt-2 p-5 sm:mt-4">
-  <h1 class="text-center">Account Settings</h1>
+<main class="container flex-grow flex flex-col mx-auto mt-4 space-y-1">
+  <h1 class="text-3xl font-bold mb-2">Account Settings</h1>
   <div class="form-control">
     <label class="label">
       <span class="label-text">Email</span>
@@ -21,12 +21,16 @@
     </label>
     {% block api_key_section %}
     {% if user.api_key %}
-    <input type="text" name="api-key" value="{{ user.api_key }}"
-      class="input text-primary-content input-bordered w-full" disabled />
+    <div class="relative">
+      <input id="api_key_input" type="text" name="api_key" value="{{ user.api_key }}"
+        class="input text-primary-content input-bordered w-full pr-12" disabled />
+      <button type="button" id="copy_api_key_btn" onclick="copy_api_key()"
+        class="absolute inset-y-0 cursor-pointer right-0 flex items-center pr-3" title="Copy API key">
+        {% include "icons/clipboard_icon.html" %}
+      </button>
+    </div>
     <a href="https://www.icloud.com/shortcuts/66985f7b98a74aaeac6ba29c3f1f0960"
-      class="btn btn-accent mt-4 w-full">Download
-      iOS
-      shortcut</a>
+      class="btn btn-accent mt-4 w-full">Download iOS shortcut</a>
     {% else %}
     <button hx-post="/set-api-key" class="btn btn-secondary w-full" hx-swap="outerHTML">
       Create API-Key
@@ -35,6 +39,49 @@
     {% endblock %}
   </div>
 
+  <script>
+    // Using a single toast element avoids creating many timeouts when clicking repeatedly.
+    let current_toast = null;
+    let toast_timeout = null;
+
+    function show_toast(message) {
+      if (current_toast) {
+        // Update message and reset timeout if a toast is already displayed.
+        current_toast.querySelector('span').textContent = message;
+        clearTimeout(toast_timeout);
+      } else {
+        current_toast = document.createElement('div');
+        current_toast.className = 'toast';
+        current_toast.innerHTML = `<div class="alert alert-success">
+        <div>
+        <span>${message}</span>
+        </div>
+        </div>`;
+        document.body.appendChild(current_toast);
+      }
+      toast_timeout = setTimeout(() => {
+        if (current_toast) {
+          current_toast.remove();
+          current_toast = null;
+        }
+      }, 3000);
+    }
+
+    function copy_api_key() {
+      const input = document.getElementById('api_key_input');
+      if (!input) return;
+      if (navigator.clipboard && window.isSecureContext) {
+        navigator.clipboard.writeText(input.value).then(() => {
+          show_toast('API key copied!');
+        }).catch(() => {
+          show_toast('Copy failed');
+        });
+      } else {
+        show_toast('Copy not supported');
+      }
+    }
+  </script>
+
   <div class="form-control mt-4">
     <label class="label">
       <span class="label-text">Timezone</span>

templates/auth/admin_panel.html

@@ -1,7 +1,7 @@
 {% extends 'body_base.html' %}
 {% block main %}
-<main class="container flex-grow flex flex-col mx-auto mt-4 p-5 space-y-6">
-  <h1 class="text-3xl font-bold">Admin Dashboard</h1>
+<main class="container flex-grow flex flex-col mx-auto mt-4 space-y-6">
+  <h1 class="text-3xl font-bold mb-2">Admin Dashboard</h1>
 
   <div class="stats stats-vertical lg:stats-horizontal shadow">
     <div class="stat">

templates/body_base.html

@@ -7,7 +7,7 @@
     <nav class="navbar bg-base-200">
       <div class="container flex mx-auto">
         <div class="flex-1 flex items-center">
-          <a class="btn text-2xl border-transparent btn-outline btn-primary" href="/" hx-boost="true">Minne</a>
+          <a class="text-2xl text-primary " href="/" hx-boost="true">Minne</a>
         </div>
         <div>
           <ul class="menu menu-horizontal px-1">

templates/errors/error.html

@@ -1,6 +1,6 @@
 {% extends 'body_base.html' %}
 {% block main %}
-<main class="container justify-center flex-grow flex mx-auto mt-4 p-5">
+<main class="container justify-center flex-grow flex mx-auto mt-4">
   <div class="flex flex-col space-y-4 text-center">
     <h1 class="text-2xl font-bold  text-error">
       {{ status_code }}

templates/icons/clipboard_icon.html

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+  class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round"
+    d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184" />
+</svg>

templates/index/signed_in/active_jobs.html

@@ -1,6 +1,6 @@
 {% block active_jobs_section %}
 <ul id="active_jobs_section" class="list ">
-  <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Active Jobs</li>
+  <li class="py-4 text-xs opacity-60 tracking-wide">Active Jobs</li>
   {% for item in active_jobs %}
   <li class="list-row">
     <div class="bg-secondary rounded-box size-10 flex justify-center items-center text-secondary-content">

templates/index/signed_in/quick_actions.html

@@ -1,4 +1,4 @@
-<div class="p-4 shadow mt-4 rounded-box">
+<div class="shadow mt-4 rounded-box">
   <div class="flex gap-4">
     <button class="btn btn-primary" hx-get="/ingress-form" hx-swap="outerHTML">Add Content</button>
     <a class="btn btn-secondary" href="/knowledge" hx-boost="true">View Knowledge</a>

templates/index/signed_in/recent_content.html

@@ -1,6 +1,6 @@
 {% block latest_content_section %}
 <ul id="latest_content_section" class="list">
-  <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Recently added content</li>
+  <li class="py-4 text-xs opacity-60 tracking-wide">Recently added content</li>
   {% for item in latest_text_contents %}
   <li class="list-row">
     <div class="bg-accent rounded-box size-10 flex justify-center items-center text-accent-content">

templates/index/signed_in/searchbar.html

@@ -1,4 +1,4 @@
-<div class="p-4 shadow rounded-box">
+<div class="py-4 shadow rounded-box">
   <h2>
     Search your content
   </h2>

templates/knowledge/base.html

@@ -2,19 +2,17 @@
 {% block main %}
 <main class="flex justify-center grow mt-2 sm:mt-4 gap-6">
   <div class="container">
-    <div class="p-4">
 
-      <h2>Entities</h2>
+    <h2>Entities</h2>
 
-      {% for entity in entities %}
-      <p>{{entity.description}} /p>
-        {% endfor %}
+    {% for entity in entities %}
+    <p>{{entity.description}} /p>
+      {% endfor %}
 
 
-      <h2 class="mt-10">Relationships</h2>
-      <p>{{relationships}}</p>
+    <h2 class="mt-10">Relationships</h2>
+    <p>{{relationships}}</p>
 
-    </div>
   </div>
 </main>
 {% endblock %}