design: neobrutalist_theme into main

html-router/templates/knowledge/base.html

@@ -3,22 +3,22 @@
 {% block title %}Minne - Knowledge{% endblock %}
 
 {% block main %}
-<div id="knowledge_pane" class="flex justify-center grow mt-2 sm:mt-4 gap-6 ">
-  <div class="container overflow-y-auto">
-    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4">
-      <h2 class="text-2xl font-bold">Knowledge Entities</h2>
+<div id="knowledge_pane" class="flex justify-center grow mt-2 sm:mt-4 gap-6">
+  <div class="container">
+    <div class="nb-panel p-3 mb-4 flex flex-col sm:flex-row justify-between items-start sm:items-center">
+      <h2 class="text-xl font-extrabold tracking-tight">Knowledge Entities</h2>
       <form hx-get="/knowledge" hx-target="#knowledge_pane" hx-push-url="true" hx-swap="outerHTML"
-        class="flex items-center gap-4 mt-2 sm:mt-0">
-        <div class="form-control">
-          <select name="entity_type" class="select select-bordered">
+        class="flex items-center gap-2 mt-2 sm:mt-0">
+        <div>
+          <select name="entity_type" class="nb-select">
             <option value="">All Types</option>
             {% for type in entity_types %}
             <option value="{{ type }}" {% if selected_entity_type==type %}selected{% endif %}>{{ type }}</option>
             {% endfor %}
           </select>
         </div>
-        <div class="form-control">
-          <select name="content_category" class="select select-bordered">
+        <div>
+          <select name="content_category" class="nb-select">
             <option value="">All Categories</option>
             {% for category in content_categories %}
             <option value="{{ category }}" {% if selected_content_category==category %}selected{% endif %}>{{ category
@@ -26,12 +26,12 @@
             {% endfor %}
           </select>
         </div>
-        <button type="submit" class="btn btn-primary btn-sm">Filter</button>
+        <button type="submit" class="nb-btn btn-sm">Filter</button>
       </form>
     </div>
 
     <h2 class="text-2xl font-bold mb-2 mt-10">Graph</h2>
-    <div class="rounded-box overflow-clip mt-4 shadow p-2 mb-10">
+    <div class="nb-card mt-4 p-2 mb-30">
       <div id="knowledge-graph" class="w-full" style="height: 640px;"
         data-entity-type="{{ selected_entity_type | default(value='') }}"
         data-content-category="{{ selected_content_category | default(value='') }}">

html-router/templates/knowledge/edit_knowledge_entity_modal.html

@@ -7,18 +7,18 @@ hx-swap="outerHTML"
 {% endblock %}
 
 {% block modal_content %}
-<h3 class="text-lg font-bold">Edit Entity</h3>
+<h3 class="text-xl font-extrabold tracking-tight">Edit Entity</h3>
 
 <div class="form-control">
-  <label class="floating-label">
-    <span class="label-text">Name</span>
-    <input type="text" name="name" value="{{ entity.name }}" class="input input-bordered w-full">
+  <label class="w-full">
+    <div class="text-xs uppercase tracking-wide opacity-70 mb-1">Name</div>
+    <input type="text" name="name" value="{{ entity.name }}" class="nb-input w-full">
   </label>
 </div>
 
 <div class="form-control relative" style="margin-top: -1.5rem;">
-  <div class="absolute !left-3 !top-2.5 z-50 p-0.5 bg-white text-xs text-light">Type</div>
-      <select name="entity_type" class="select w-full">
+  <div class="absolute !left-3 !top-2.5 z-50 p-0.5 bg-base-100 text-xs">Type</div>
+      <select name="entity_type" class="nb-select w-full">
     <option disabled>You must select a type</option>
          {% for et in entity_types %}
           <option value="{{ et }}" {% if entity.entity_type==et %}selected{% endif %}>{{ et }}</option>
@@ -29,15 +29,13 @@ hx-swap="outerHTML"
 <input type="text" name="id" value="{{ entity.id }}" class="hidden">
 
 <div class="form-control">
-  <label class="floating-label">
-    <span class="label-text">Description</span>
-    <textarea name="description" class="w-full textarea textarea-bordered h-32">{{ entity.description }}</textarea>
+  <label class="w-full">
+    <div class="text-xs uppercase tracking-wide opacity-70 mb-1">Description</div>
+    <textarea name="description" class="nb-input w-full h-32">{{ entity.description }}</textarea>
   </label>
 </div>
 {% endblock %}
 
 {% block primary_actions %}
-<button type="submit" class="btn btn-primary">
-  Save Changes
-</button>
-{% endblock %}
+<button type="submit" class="nb-btn nb-cta">Save Changes</button>
+{% endblock %}

html-router/templates/knowledge/entity_list.html

@@ -1,4 +1,4 @@
-<div class="grid md:grid-cols-2 2xl:grid-cols-3 gap-4" id="entity-list">
+<div class="grid md:grid-cols-2 2xl:grid-cols-3 gap-4 mt-6" id="entity-list">
   {% for entity in entities %}
   <div class="card min-w-72 bg-base-100 shadow">
     <div class="card-body">
@@ -22,4 +22,4 @@
     </div>
   </div>
   {% endfor %}
-</div>
+</div>

html-router/templates/knowledge/relationship_table.html

@@ -1,12 +1,11 @@
-<div id="relationship_table_section"
-  class="overflow-x-auto shadow rounded-box border border-base-content/5 bg-base-100 mb-10">
-  <table class="table">
+<div id="relationship_table_section" class="overflow-x-auto nb-card mb-10">
+  <table class="nb-table">
     <thead>
       <tr>
-        <th>Origin</th>
-        <th>Target</th>
-        <th>Type</th>
-        <th>Actions</th>
+        <th class="text-left">Origin</th>
+        <th class="text-left">Target</th>
+        <th class="text-left">Type</th>
+        <th class="text-left">Actions</th>
       </tr>
     </thead>
     <tbody>
@@ -31,9 +30,9 @@
           {{ relationship.out }}
           {% endfor %}
         </td>
-        <td>{{ relationship.metadata.relationship_type }}</td>
+        <td class="uppercase tracking-wide text-xs">{{ relationship.metadata.relationship_type }}</td>
         <td>
-          <button class="btn btn-sm btn-outline" hx-delete="/knowledge-relationship/{{ relationship.id }}"
+          <button class="nb-btn btn-xs" hx-delete="/knowledge-relationship/{{ relationship.id }}"
             hx-target="#relationship_table_section" hx-swap="outerHTML">
             {% include "icons/delete_icon.html" %}
           </button>
@@ -43,7 +42,7 @@
       <!-- New linking row -->
       <tr id="new_relationship">
         <td>
-          <select name="in_" class="select select-bordered w-full new_relationship_input">
+          <select name="in_" class="nb-select w-full new_relationship_input">
             <option disabled selected>Select Origin</option>
             {% for entity in entities %}
             <option value="{{ entity.id }}">
@@ -53,7 +52,7 @@
           </select>
         </td>
         <td>
-          <select name="out" class="select select-bordered w-full new_relationship_input">
+          <select name="out" class="nb-select w-full new_relationship_input">
             <option disabled selected>Select Target</option>
             {% for entity in entities %}
             <option value="{{ entity.id }}">{{ entity.name }}</option>
@@ -62,12 +61,11 @@
         </td>
         <td>
           <input id="relationship_type_input" name="relationship_type" type="text" placeholder="RelatedTo"
-            class="input input-bordered w-full new_relationship_input" />
+            class="nb-input w-full new_relationship_input" />
         </td>
         <td>
-          <button id="save_relationship_button" type="button" class="btn btn-primary btn-sm"
-            hx-post="/knowledge-relationship" hx-target="#relationship_table_section" hx-swap="outerHTML"
-            hx-include=".new_relationship_input">
+          <button id="save_relationship_button" type="button" class="nb-btn btn-sm" hx-post="/knowledge-relationship"
+            hx-target="#relationship_table_section" hx-swap="outerHTML" hx-include=".new_relationship_input">
             Save
           </button>
         </td>