measurements-add-form.tsx. Clean up and improve components such as UserAuthForm and GlobalVariableOverview, incorporating better handling for loading states and UI adjustments. Added pagination and sorting functionality to ArticleSearchAndGrid. Introduced a new AIStepLoader component for handling asynchronous steps with a progress bar. Additionally, link paths and icons have been corrected for consistency across the application.

Took 1 minute

Author: mikepsinn

components/AIStepLoader.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Progress } from "@/components/ui/progress"
+
+interface AILoadingProps {
+  steps: string[];
+  currentStepIndex?: number;
+}
+
+export default function AIStepLoader({ steps, currentStepIndex: initialStepIndex = 0 }: AILoadingProps) {
+  const [currentStep, setCurrentStep] = useState(initialStepIndex)
+  const [text, setText] = useState('')
+  const [progress, setProgress] = useState(0)
+
+  useEffect(() => {
+    let interval: NodeJS.Timeout
+
+    const totalDuration = 20000; // Total duration in milliseconds (20 seconds)
+    const stepDuration = totalDuration / steps.length; // Duration per step
+
+    const typeWriter = (fullText: string, index: number) => {
+      if (index < fullText.length) {
+        setText(fullText.slice(0, index + 1))
+        interval = setTimeout(() => typeWriter(fullText, index + 1), 50)
+      } else {
+        setTimeout(() => {
+          setProgress((currentStep + 1) * (100 / steps.length))
+        }, stepDuration - (fullText.length * 50)) // Adjust delay to fit within stepDuration
+      }
+    }
+
+    typeWriter(`${steps[currentStep]}...`, 0)
+
+    const stepInterval = setInterval(() => {
+      setCurrentStep(prev => (prev + 1) % steps.length)
+    }, totalDuration / steps.length)
+
+    return () => {
+      clearTimeout(interval)
+      clearInterval(stepInterval)
+    }
+  }, [currentStep, steps])
+
+  return (
+    <div className="fixed inset-0 flex flex-col items-center justify-center bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 p-4">
+      <div className="bg-white rounded-lg shadow-xl p-8 max-w-md w-full">
+        <div className="h-20 flex items-center justify-center">
+          <p className="text-xl text-gray-700">
+            {text}
+            <span className="animate-pulse">|</span>
+          </p>
+        </div>
+        <Progress value={progress} className="w-full mt-4" />
+        <p className="text-sm text-gray-600 mt-2 text-center">
+          {Math.round(progress)}% Complete
+        </p>
+      </div>
+    </div>
+  )
+}

components/ArticleGrid.tsx

@@ -27,11 +27,11 @@ export default function ArticleGrid({ articles }: ArticleGridProps) {
                         </Link>
                     )}
                     <CardHeader className="pb-2">
-                        <Link href={`/researcher/articles/categories/${article.category.slug}`}>
+                        <Link href={`/articles/category/${article.category.slug}`}>
                             <Badge variant="secondary" className="mb-2">{article.category.name}</Badge>
                         </Link>
                         <CardTitle className="text-xl">
-                            <Link href={`/researcher/article/${article.slug}`}
+                            <Link href={`/article/${article.slug}`}
                             className="hover:underline">
                                 {article.title}
                             </Link>
@@ -43,7 +43,7 @@ export default function ArticleGrid({ articles }: ArticleGridProps) {
                     <CardFooter className="mt-auto pt-4 border-t">
                         <div className="flex flex-wrap gap-2">
                             {article.tags.map((tag) => (
-                                <Link key={tag.name} href={`/researcher/articles/tags/${tag.slug}`}>
+                                <Link key={tag.name} href={`/articles/tag/${tag.slug}`}>
                                     <Badge variant="outline" className="text-xs">{tag.name}</Badge>
                                 </Link>
                             ))}

components/ArticleSearchBox.tsx

@@ -12,6 +12,7 @@ import { exampleMessages } from "@/components/ChatExampleQuestions"
 
 import { UserMessage } from "./assistant/Message"
 import {useRouter} from "next/navigation";
+import { siteConfig } from "@/config/site"
 
 function ChatPanel({ agentData }: { agentData?: Agent | null }) {
   const [aiState] = useAIState()
@@ -105,7 +106,7 @@ const router = useRouter();
             className="
           bg-gradient-to-t from-black/50 to-black bg-clip-text text-transparent dark:from-white/50 dark:to-white"
           >
-            Talk to Wishonia
+            Talk to {siteConfig.name}
           </span>
         </h1>
         <p

components/ChatPanel.tsx

@@ -20,18 +20,23 @@ import {
   NavigationMenuTrigger,
   navigationMenuTriggerStyle,
 } from "@/components/ui/navigation-menu"
+import { siteConfig } from "@/config/site"
 
 const components: { title: string; href: string; icon: any }[] = [
   {
-    title: "Wishonia.love",
-    href: "https://wishonia.love",
+    title: siteConfig.name,
+    href: siteConfig.url.base || "",
     icon: <Globe size={18} />,
   },
-  {
-    title: "GitHub",
-    href: "https://github.com/wishonia/wishonia",
-    icon: <GithubLogo size={18} />,
-  },
+  ...(siteConfig.links.github
+    ? [
+        {
+          title: "GitHub",
+          href: siteConfig.links.github,
+          icon: <GithubLogo size={18} />,
+        },
+      ]
+    : []),
 ]
 
 export default function Navigation() {

components/Navigation.tsx

@@ -1,50 +1,202 @@
+'use client'
+
 import { useState, useEffect } from 'react'
 import ArticleGrid from '@/components/ArticleGrid'
-import ArticleSearchBox from '@/components/ArticleSearchBox'
+import { ArticleStatus } from '@prisma/client'
 import { ArticleWithRelations } from '@/lib/agents/researcher/researcher'
 import { searchArticles } from '@/app/researcher/researcherActions'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Button } from '@/components/ui/button'
+import { Search, SortAsc, Loader2, ChevronLeft, ChevronRight } from "lucide-react"
+import { Input } from "@/components/ui/input"
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+
+type SortOption = {
+  label: string
+  field: 'createdAt' | 'updatedAt' | 'publishedAt' | 'title'
+  order: 'asc' | 'desc'
+}
 
+const sortOptions: SortOption[] = [
+  { label: 'Newest First', field: 'createdAt', order: 'desc' },
+  { label: 'Oldest First', field: 'publishedAt', order: 'asc' },
+  { label: 'Recently Updated', field: 'updatedAt', order: 'desc' },
+  { label: 'Title A-Z', field: 'title', order: 'asc' },
+  { label: 'Title Z-A', field: 'title', order: 'desc' },
+]
 
 type ArticleSearchAndGridProps = {
   categorySlug?: string
   tagSlug?: string
+  authorUsername?: string
+  status?: ArticleStatus
 }
 
-export default function ArticleSearchAndGrid({ categorySlug = '', tagSlug = '' }: ArticleSearchAndGridProps) {
+export default function ArticleSearchAndGrid({ 
+  categorySlug = '', 
+  tagSlug = '',
+  authorUsername = '',
+  status = ArticleStatus.PUBLISH
+}: ArticleSearchAndGridProps) {
   const [articles, setArticles] = useState<ArticleWithRelations[]>([])
   const [isLoading, setIsLoading] = useState(true)
   const [searchQuery, setSearchQuery] = useState('')
+  const [selectedSort, setSelectedSort] = useState<SortOption>(sortOptions[0])
+  const [currentPage, setCurrentPage] = useState(1)
+  const [totalPages, setTotalPages] = useState(1)
+  const pageSize = 12
 
   useEffect(() => {
     const fetchArticles = async () => {
-        setIsLoading(true)
-        try {
-            const results = await searchArticles(searchQuery, categorySlug, tagSlug)
-            setArticles(results as ArticleWithRelations[])
-        } catch (error) {
-            console.error('Error fetching articles:', error)
-        } finally {
-            setIsLoading(false)
-        }
+      setIsLoading(true)
+      try {
+        const results = await searchArticles(
+          searchQuery, 
+          categorySlug, 
+          tagSlug, 
+          authorUsername,
+          status,
+          selectedSort.field,
+          selectedSort.order,
+          currentPage,
+          pageSize
+        )
+        setArticles(results.articles as ArticleWithRelations[])
+        setTotalPages(results.totalPages)
+      } catch (error) {
+        console.error('Error fetching articles:', error)
+      } finally {
+        setIsLoading(false)
+      }
     }
     fetchArticles()
-}, [categorySlug, tagSlug, searchQuery])
+  }, [categorySlug, tagSlug, authorUsername, searchQuery, status, selectedSort, currentPage])
 
   const handleSearch = (query: string) => {
     setSearchQuery(query)
+    setCurrentPage(1) // Reset to first page on new search
+  }
+
+  const handleSortChange = (value: string) => {
+    const option = sortOptions.find(opt => `${opt.field}-${opt.order}` === value)
+    if (option) {
+      setSelectedSort(option)
+      setCurrentPage(1) // Reset to first page on sort change
+    }
   }
 
   return (
-    <>
-      <ArticleSearchBox
-        searchQuery={searchQuery}
-        setSearchQuery={handleSearch}
-        isLoading={isLoading}
-      />
+    <div className="space-y-6">
+      <div className="rounded-lg border bg-card shadow-sm">
+        <div className="flex flex-col sm:flex-row gap-4 items-center p-4">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              type="search"
+              placeholder="Search articles..."
+              value={searchQuery}
+              onChange={(e) => handleSearch(e.target.value)}
+              className={cn(
+                "w-full pl-9 pr-4",
+                isLoading && "pr-12"
+              )}
+            />
+            {isLoading && (
+              <div className="absolute right-3 top-1/2 -translate-y-1/2">
+                <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+              </div>
+            )}
+          </div>
+          
+          <div className="flex items-center gap-2">
+            <SortAsc className="h-4 w-4 text-muted-foreground" />
+            <Select
+              value={`${selectedSort.field}-${selectedSort.order}`}
+              onValueChange={handleSortChange}
+            >
+              <SelectTrigger className="w-[180px] bg-background">
+                <SelectValue placeholder="Sort by..." />
+              </SelectTrigger>
+              <SelectContent>
+                {sortOptions.map((option) => (
+                  <SelectItem 
+                    key={`${option.field}-${option.order}`} 
+                    value={`${option.field}-${option.order}`}
+                  >
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        {(categorySlug || tagSlug || authorUsername) && (
+          <div className="px-4 py-2 border-t flex gap-2 flex-wrap">
+            {categorySlug && (
+              <Badge variant="secondary">
+                Category: {categorySlug}
+              </Badge>
+            )}
+            {tagSlug && (
+              <Badge variant="secondary">
+                Tag: {tagSlug}
+              </Badge>
+            )}
+            {authorUsername && (
+              <Badge variant="secondary">
+                Author: {authorUsername}
+              </Badge>
+            )}
+          </div>
+        )}
+      </div>
+
       <ArticleGrid articles={articles} />
+      
       {articles.length === 0 && !isLoading && (
-        <p className="text-center text-muted-foreground mt-6">No articles found.</p>
+        <div className="text-center py-12">
+          <p className="text-muted-foreground">No articles found.</p>
+          <p className="text-sm text-muted-foreground mt-1">
+            Try adjusting your search or filters
+          </p>
+        </div>
+      )}
+
+      {totalPages > 1 && (
+        <div className="flex justify-center gap-2 mt-6">
+          <Button
+            variant="outline"
+            onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
+            disabled={currentPage === 1}
+            className="gap-2"
+          >
+            <ChevronLeft className="h-4 w-4" />
+            Previous
+          </Button>
+          <div className="flex items-center px-4 rounded-md border bg-background">
+            <span className="text-sm">
+              Page {currentPage} of {totalPages}
+            </span>
+          </div>
+          <Button
+            variant="outline"
+            onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
+            disabled={currentPage === totalPages}
+            className="gap-2"
+          >
+            Next
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
       )}
-    </>
+    </div>
   )
 }