Implement basic search and overhaul styling

Closes #5

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.0.6",
+    "pixelarticons": "^1.8.1",
     "pocketbase": "^0.25.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -27,6 +28,7 @@
     "globals": "^15.14.0",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.22.0",
-    "vite": "^6.1.0"
+    "vite": "^6.1.0",
+    "vite-plugin-svgr": "^4.3.0"
   }
 }

src/QuoteInfo.tsx

@@ -8,16 +8,16 @@ export default function QuoteInfo({ quote }: QuoteInfoProps) {
 
   return (
     //TODO: Bettes Colors
-    <div className="dark:bg-slate-800 shadow-(--box) m-1 p-2">
-      <p className="border-4 border-black bg-slate-300 text-black p-1 my-1">{quote.quote}</p>
-      {quote.context && <p className="border-4 border-black bg-slate-300 text-slate-600 p-1 my-1">{quote.context}</p>}
+    <div className="dark:bg-slate-800 shadow-(--box) m-1 p-2 cursor-pointer" onClick={(e) => console.log(quote.id)}>
+      <p className="border-4 border-black bg-slate-300 text-black p-1 my-1 cursor-text">{quote.quote}</p>
+      {quote.context && <p className="border-4 border-black bg-slate-300 text-slate-600 p-1 my-1 cursor-text">{quote.context}</p>}
       <div className="flex flex-row">
-        <p className="bg-lime-400 text-zinc-800 p-1 border-4 border-r-2 border-black w-20">Author:</p>
-        <p className="bg-slate-300 border-4 border-l-2 border-black text-black p-1 grow">{quote.author}</p>
+        <p className="bg-lime-400 text-zinc-800 p-1 border-4 border-r-2 border-black w-20 cursor-text">Author:</p>
+        <p className="bg-slate-300 border-4 border-l-2 border-black text-black p-1 grow cursor-text">{quote.author}</p>
       </div>
       <div className="flex flex-row">
-        <p className="bg-lime-400 text-zinc-800 p-1 border-4 border-r-2 border-black w-20">Date:</p>
-        <p className="bg-slate-300 border-4 border-l-2 border-black text-black p-1 grow">{quote.date}</p>
+        <p className="bg-lime-400 text-zinc-800 p-1 border-4 border-r-2 border-black w-20 cursor-text">Date:</p>
+        <p className="bg-slate-300 border-4 border-l-2 border-black text-black p-1 grow cursor-text">{quote.date}</p>
       </div>
     </div>
   )

src/QuoteList.tsx

@@ -1,9 +1,9 @@
-import { useEffect, useState } from 'react'
-import QuoteInfo from './QuoteInfo.tsx'
-import getAllQuotes from './quoteHook.tsx'
-import { Quote, Collections, TypedPocketBase } from './pocketbase-types.ts'
 import PocketBase from 'pocketbase'
-
+import { ChangeEvent, useEffect, useState } from 'react'
+import QuoteInfo from './QuoteInfo.tsx'
+import { Collections, Quote, TypedPocketBase } from './pocketbase-types.ts'
+import FilterIcon from "pixelarticons/svg/sliders-2.svg?react"
+import AddIcon from "pixelarticons/svg/note-plus.svg?react"
 //TODO: Add Comments
 
 export default function QuoteList() {
@@ -12,15 +12,26 @@ export default function QuoteList() {
   const pb = new PocketBase("https://api.m3.fyi") as TypedPocketBase
 
   const [quotes, setQuotes] = useState<Quote[] | null>(null)
+  const [filteredQuotes, setFilteredQuotes] = useState<Quote[] | null>(null)
   const [loading, setLoading] = useState<boolean>(true)
   const [error, setError] = useState<Error | null>(null)
   const [collection, setCollection] = useState<Collections | null>(Collections.QtBit)
+  const [searchItem, setSearchItem] = useState<string | null>(null)
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const searchTerm = e.target.value;
+    setSearchItem(searchTerm)
+
+    const filteredItems = quotes?.filter((quote) => quote.quote.toLowerCase().includes(searchTerm.toLowerCase()));
+    setFilteredQuotes(filteredItems!)
+  }
 
   useEffect(() => {
     pb.realtime.subscribe(`${collection}`, function (e) {
       console.log("realtime", e.record);
       let x = quotes!.filter((quote) => quote.id !== e.record.id);
       setQuotes([e.record, ...x])
+      setFilteredQuotes([e.record, ...x])
     });
     return () => {
       pb.realtime.unsubscribe();
@@ -30,9 +41,10 @@ export default function QuoteList() {
     try {
       const records = await pb.collection(`${collection}`).getFullList<Quote>({ sort: "-created", requestKey: null });
       setQuotes(records);
+      setFilteredQuotes(records);
     } catch (err: any) {
       setError(err)
-      console.error("Error:", err)
+      console.error("Error:", error)
     } finally {
       setLoading(false)
     }
@@ -46,6 +58,7 @@ export default function QuoteList() {
     <div className='p-3 pt-0'>
       <div className='border-2 bg-slate-800 ml-2 mb-5 p-2 border-lime-500 shadow-(--box) flex flex-row'>
         <select
+          title='Select quote collection'
           className='pr-10 bg-slate-700'
           value={collection as string}
           onChange={e => setCollection(e.target.value as Collections)}>
@@ -54,17 +67,29 @@ export default function QuoteList() {
           <option value="qt_theshegays">TheSheGays</option>
         </select>
         <p className='text-lime-500'>|</p>
-        <div className='pl-2'>
-          <input placeholder='Search...' className='placeholder:text-slate-400 bg-slate-700' />
+        <div className='pl-2 flex flex-row'>
+          <input
+            title='Search for quote'
+            placeholder='Search...'
+            value={searchItem as string}
+            onChange={e => handleInputChange(e)}
+            className='placeholder:text-slate-400 bg-slate-700' />
+          <button type="button" className='cursor-pointer' title='Filter search'>
+            <FilterIcon className="w-5 mx-1 active:text-lime-500" />
+          </button>
         </div>
         <p className='text-lime-500'>|</p>
+        <button type='button' className='cursor-pointer ml-auto' title='Add new quote'>
+          <AddIcon className="w-5 mx-1 active:text-lime-500" />
+        </button>
+        <p className='text-lime-500'>|</p>
       </div>
       {loading ? (<p> Loading...</p >) : (
         //TODO: Replace div with styled QuoteInfo component
         <div className="grid grid-cols-4 gap-4">
-
+          {/* {filteredQuotes.map(quote => <QuoteInfo key={quote.id} quote={quote}/>)} */}
           {/* {quotes != null ? (quotes.map((quote) => (<div key={quote.id}>{quote.quote}</div>))) : (<p>No Quotes</p>)} */}
-          {quotes != null ? (quotes.map((quote) => (<QuoteInfo key={quote.id} quote={quote} />))) : (<p>No Quotes</p>)}
+          {filteredQuotes != null ? (filteredQuotes.map((quote) => (<QuoteInfo key={quote.id} quote={quote} />))) : (<p>No Quotes</p>)}
         </div>
       )
       }

src/vite-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />

vite.config.ts

@@ -1,8 +1,8 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
 import tailwindcss from '@tailwindcss/vite'
-
+import svgr from 'vite-plugin-svgr'
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react(), tailwindcss()],
+  plugins: [react(), tailwindcss(), svgr()],
 })