From ff2caff0617e1f81fda8a258d99f245b60940193 Mon Sep 17 00:00:00 2001
From: Junwei Zhao <wahyd4@gmail.com>
Date: Wed, 5 Nov 2025 22:37:22 +1100
Subject: [PATCH] Update

---
 links/templates/links/search_react.html | 50 +++++++++++++------------
 links/urls.py                           |  1 +
 templates/base.html                     |  8 ++++
 3 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/links/templates/links/search_react.html b/links/templates/links/search_react.html
index c99daa8..1daed4d 100644
--- a/links/templates/links/search_react.html
+++ b/links/templates/links/search_react.html
@@ -56,7 +56,7 @@
 
         // Input Component
         const Input = ({ className = "", ...props }) => (
-            <input 
+            <input
                 className={`flex h-10 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
                 {...props}
             />
@@ -64,7 +64,7 @@
 
         // Select Component
         const Select = ({ children, className = "", ...props }) => (
-            <select 
+            <select
                 className={`flex h-10 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm ring-offset-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
                 {...props}
             >
@@ -80,7 +80,7 @@
                 ghost: "hover:bg-gray-100"
             };
             return (
-                <button 
+                <button
                     className={`inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium ring-offset-white transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${variants[variant]} ${className}`}
                     {...props}
                 >
@@ -103,10 +103,10 @@
             };
 
             const formatDate = (dateString) => {
-                return new Date(dateString).toLocaleDateString('en-US', { 
-                    year: 'numeric', 
-                    month: 'short', 
-                    day: 'numeric' 
+                return new Date(dateString).toLocaleDateString('en-US', {
+                    year: 'numeric',
+                    month: 'short',
+                    day: 'numeric'
                 });
             };
 
@@ -122,11 +122,11 @@
                                 <i className={`fas ${typeIcons[result.type]}`}></i>
                             </div>
                         </div>
-                        
+
                         <div className="flex-1 min-w-0">
                             <div className="flex items-center gap-2 mb-1">
-                                <a 
-                                    href={result.type === 'link' ? result.url : result.detail_url || result.url} 
+                                <a
+                                    href={result.type === 'link' ? result.url : result.detail_url || result.url}
                                     className="text-lg font-semibold text-gray-900 hover:text-blue-600 transition-colors truncate"
                                     target={result.type === 'link' ? '_blank' : '_self'}
                                     rel={result.type === 'link' ? 'noopener noreferrer' : ''}
@@ -137,9 +137,9 @@
                                     {result.type}
                                 </Badge>
                             </div>
-                            
+
                             {result.type === 'link' && result.original_url && (
-                                <a 
+                                <a
                                     href={result.original_url}
                                     className="text-sm text-gray-600 hover:text-gray-900 truncate block mb-2"
                                     target="_blank"
@@ -149,13 +149,13 @@
                                     {result.original_url}
                                 </a>
                             )}
-                            
+
                             {(result.description || result.summary) && (
                                 <p className="text-sm text-gray-600 line-clamp-2 mb-2">
                                     {result.description || result.summary}
                                 </p>
                             )}
-                            
+
                             <div className="flex items-center gap-4 text-xs text-gray-500">
                                 <span>
                                     <i className="fas fa-calendar mr-1"></i>
@@ -168,7 +168,7 @@
                                     </span>
                                 )}
                             </div>
-                            
+
                             {result.tags && result.tags.length > 0 && (
                                 <div className="flex flex-wrap gap-1 mt-2">
                                     {result.tags.map(tag => (
@@ -180,9 +180,9 @@
                                 </div>
                             )}
                         </div>
-                        
+
                         <div className="flex-shrink-0">
-                            <a 
+                            <a
                                 href={result.type === 'link' ? `/link/${result.id}/edit/` : result.type === 'page' ? `/ui/pages/${result.id}/edit/` : `/ui/posts/${result.id}/edit/`}
                                 className="text-gray-400 hover:text-blue-600 transition-colors"
                                 title="Edit"
@@ -289,10 +289,12 @@
                     <div className="max-w-5xl mx-auto">
                         {/* Header */}
                         <div className="mb-8 text-center">
-                            <h1 className="text-4xl font-bold text-gray-900 mb-2 flex items-center justify-center gap-3">
-                                <i className="fas fa-search text-blue-600"></i>
-                                Advanced Search
-                            </h1>
+                            <a href="/" className="inline-block hover:opacity-80 transition-opacity">
+                                <h1 className="text-4xl font-bold text-gray-900 mb-2 flex items-center justify-center gap-3">
+                                    <i className="fas fa-search text-blue-600"></i>
+                                    Advanced Search
+                                </h1>
+                            </a>
                             <p className="text-gray-600">Search through all Links, Pages, and Posts</p>
                         </div>
 
@@ -432,7 +434,7 @@
                                             <i className="fas fa-chevron-left mr-2"></i>
                                             Previous
                                         </Button>
-                                        
+
                                         <div className="flex items-center gap-2">
                                             {[...Array(Math.min(5, totalPages))].map((_, i) => {
                                                 let pageNum;
@@ -445,7 +447,7 @@
                                                 } else {
                                                     pageNum = page - 2 + i;
                                                 }
-                                                
+
                                                 return (
                                                     <Button
                                                         key={pageNum}
@@ -478,7 +480,7 @@
                                 <i className="fas fa-search text-6xl text-blue-200 mb-4"></i>
                                 <h3 className="text-xl font-medium text-gray-900 mb-2">Start Searching</h3>
                                 <p className="text-gray-600 max-w-md mx-auto">
-                                    Enter a search query to find links, pages, and posts. 
+                                    Enter a search query to find links, pages, and posts.
                                     You can search by title, content, URL, or tags.
                                 </p>
                             </Card>
diff --git a/links/urls.py b/links/urls.py
index 48d2604..ec33940 100644
--- a/links/urls.py
+++ b/links/urls.py
@@ -24,6 +24,7 @@ urlpatterns = [
 
     # Pages
     path('ui/pages/', page_views.PageListView.as_view(), name='page-list'),
+    path('ui/new_search/', search_views.SearchReactView.as_view(), name='new_search'),
     path('ui/pages/new/', page_views.PageCreateView.as_view(), name='page-create'),
     path('ui/pages/<int:pk>/', page_views.PageDetailView.as_view(), name='page-detail'),
     path('ui/pages/<int:pk>/edit/', page_views.PageUpdateView.as_view(), name='page-update'),
diff --git a/templates/base.html b/templates/base.html
index b312bc4..33dfb89 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -91,6 +91,14 @@
                         {% trans "Menu" %}
                     </button>
                     <div id="more-menu-dropdown" class="absolute right-0 mt-2 py-2 w-48 bg-white rounded-md shadow-xl z-20 hidden">
+                        <a href="{% url 'new_search' %}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
+                            <div class="flex items-center">
+                                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+                                </svg>
+                                {% trans "New Search" %}
+                            </div>
+                        </a>
                         <a href="{% url 'search' %}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                             <div class="flex items-center">
                                 <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">