feat: allow filtering with null (no) rating

components/Card.tsx

@@ -1,15 +1,25 @@
 import { isLocalImage, isYoutubeLink } from "@lib/string.ts";
 import { IconBrandYoutube } from "@components/icons.tsx";
 import { GenericResource } from "@lib/types.ts";
+import { Rating, SmallRating } from "@components/Rating.tsx";
 
 export function Card(
-  { link, title, image, thumbnail, backgroundColor, backgroundSize = 100 }: {
+  {
+    link,
+    rating,
+    title,
+    image,
+    thumbnail,
+    backgroundColor,
+    backgroundSize = 100,
+  }: {
     backgroundSize?: number;
     backgroundColor?: string;
     thumbnail?: string;
     link?: string;
     title?: string;
     image?: string;
+    rating?: number;
   },
 ) {
   const backgroundStyle = {
@@ -55,13 +65,21 @@ export function Card(
           boxShadow: "0px -60px 40px black inset, 0px 10px 20px #fff1 inset",
         }}
       >
-        <div>
+        <div class="flex-1">
           {/* Recipe Card content */}
         </div>
-        <div class="mt-2 flex items-center gap-2">
+        <div
+          class="mt-2 flex items-center gap-2"
+          style={{ textShadow: "0px 0px 10px black" }}
+        >
           {isYoutubeLink(link || "") && <IconBrandYoutube />}
           {title}
         </div>
+        {rating !== undefined && (
+          <div class="my-2">
+            <SmallRating rating={rating} />
+          </div>
+        )}
       </div>
       <div class="absolute inset-x-0 bottom-0 h-3/4" />
     </a>
@@ -81,6 +99,7 @@ export function ResourceCard(
     <Card
       title={res.name}
       backgroundColor={res.meta?.average}
+      rating={res.meta?.rating}
       thumbnail={res.meta?.thumbnail}
       image={imageUrl}
       link={`/${sublink}/${res.id}`}

components/Rating.tsx

@@ -2,6 +2,27 @@ import { IconStar, IconStarFilled } from "@components/icons.tsx";
 import { useSignal } from "@preact/signals";
 import { useState } from "preact/hooks";
 
+export const SmallRating = (
+  { max = 5, rating }: { max?: number; rating: number },
+) => {
+  return (
+    <div
+      class="flex gap-1 rounded"
+      style={{ filter: "drop-shadow(0px 3px 3px black)" }}
+    >
+      {Array.from({ length: max }).map((_, i) => {
+        return (
+          <span>
+            {(i + 1) <= rating
+              ? <IconStarFilled class="w-3 h-3" />
+              : <IconStar class="w-3 h-3" />}
+          </span>
+        );
+      })}
+    </div>
+  );
+};
+
 export const Rating = (
   props: { max?: number; rating: number },
 ) => {

islands/Search.tsx

@@ -18,11 +18,7 @@ export async function fetchQueryResource(url: URL, type = "") {
 
   try {
     url.pathname = "/api/resources";
-    if (query) {
-      url.searchParams.set("q", encodeURIComponent(query));
-    } else {
-      return;
-    }
+    url.searchParams.set("q", encodeURIComponent(query || "*"));
     if (status) {
       url.searchParams.set("status", "not-seen");
     }
@@ -45,7 +41,7 @@ export const RedirectSearchHandler = () => {
         e.key === "?" &&
         window.location.search === ""
       ) {
-        window.location.href += "?q=";
+        window.location.href += "?q=*";
       }
     }, IS_BROWSER ? document?.body : undefined);
   }
@@ -127,9 +123,9 @@ const Search = (
       u.searchParams.set("q", searchQuery.value);
     }
     if (showSeenStatus.value) {
-      u.searchParams.set("status", "not-seen");
+      u.searchParams.set("rating", "0");
     } else {
-      u.searchParams.delete("status");
+      u.searchParams.delete("rating");
     }
 
     window.history.replaceState({}, "", u);
@@ -191,7 +187,7 @@ const Search = (
             onInput={handleInputChange}
           />
         </div>
-        <Checkbox label="seen" checked={showSeenStatus} />
+        <Checkbox label="not-seen" checked={showSeenStatus} />
         <Rating rating={4} />
       </header>
       {data?.value?.hits?.length && !isLoading.value

lib/env.ts

@@ -23,5 +23,3 @@ export const TYPESENSE_API_KEY = Deno.env.get("TYPESENSE_API_KEY");
 
 export const LOG_LEVEL: string = Deno.env.get("LOG_LEVEL") ||
   "warn";
-
-console.log({ LOG_LEVEL });

lib/log.ts

@@ -23,9 +23,8 @@ const logFuncs = {
 } as const;
 
 let longestScope = 0;
-let logLevel = (_LOG_LEVEL && _LOG_LEVEL in logMap && logMap[_LOG_LEVEL]) ||
+let logLevel = (_LOG_LEVEL && _LOG_LEVEL in logMap && logMap[_LOG_LEVEL]) ??
   LOG_LEVEL.WARN;
-console.log({ logLevel, logMap });
 
 const ee = new EventEmitter<{
   log: { level: LOG_LEVEL; scope: string; args: unknown[] };

lib/resource/articles.ts

@@ -13,7 +13,7 @@ export type Article = {
   name: string;
   tags: string[];
   meta: {
-    status: "finished" | "not-finished";
+    done?: boolean;
     date: Date;
     link: string;
     thumbnail?: string;

lib/resource/movies.ts

@@ -17,7 +17,6 @@ export type Movie = {
     average?: string;
     author: string;
     rating: number;
-    status: "not-seen" | "watch-again" | "finished";
   };
 };
 

lib/resource/series.ts

@@ -18,7 +18,7 @@ export type Series = {
     rating: number;
     average?: string;
     thumbnail?: string;
-    status: "not-seen" | "watch-again" | "finished";
+    done?: boolean;
   };
 };
 

lib/search.ts

@@ -1,6 +1,6 @@
 import { BadRequestError } from "@lib/errors.ts";
 import { resources } from "@lib/resources.ts";
-import { ResourceStatus, SearchResult } from "@lib/types.ts";
+import { SearchResult } from "@lib/types.ts";
 import { getTypeSenseClient } from "@lib/typesense.ts";
 import { extractHashTags } from "@lib/string.ts";
 
@@ -10,7 +10,7 @@ type SearchParams = {
   q: string;
   type?: ResourceType;
   tags?: string[];
-  status?: ResourceStatus;
+  rating?: string;
   author?: string;
   query_by?: string;
 };
@@ -18,7 +18,7 @@ type SearchParams = {
 export function parseResourceUrl(_url: string): SearchParams | undefined {
   try {
     const url = new URL(_url);
-    let query = url.searchParams.get("q");
+    let query = url.searchParams.get("q") || "*";
     if (!query) {
       return undefined;
     }
@@ -34,7 +34,7 @@ export function parseResourceUrl(_url: string): SearchParams | undefined {
       q: query,
       type: url.searchParams.get("type") as ResourceType || undefined,
       tags: hashTags,
-      status: url.searchParams.get("status") as ResourceStatus || undefined,
+      rating: url.searchParams.get("rating") || undefined,
       query_by: url.searchParams.get("query_by") || undefined,
     };
   } catch (_err) {
@@ -43,7 +43,7 @@ export function parseResourceUrl(_url: string): SearchParams | undefined {
 }
 
 export async function searchResource(
-  { q, query_by = "name,description,author,tags", tags = [], type, status }:
+  { q, query_by = "name,description,author,tags", tags = [], type, rating }:
     SearchParams,
 ): Promise<SearchResult> {
   const typesenseClient = await getTypeSenseClient();
@@ -57,10 +57,6 @@ export async function searchResource(
     filter_by.push(`type:=${type}`);
   }
 
-  if (status) {
-    filter_by.push(`status:=${status}`);
-  }
-
   if (tags?.length) {
     filter_by.push(`tags:[${tags.map((t) => `\`${t}\``).join(",")}]`);
     for (const tag of tags) {
@@ -71,6 +67,14 @@ export async function searchResource(
     }
   }
 
+  if (typeof rating !== "undefined") {
+    if (rating === "null") {
+      filter_by.push(`rating: null`);
+    } else {
+      filter_by.push(`rating: ${rating}`);
+    }
+  }
+
   return await typesenseClient.collections("resources")
     .documents().search({
       q,

lib/types.ts

@@ -41,6 +41,7 @@ export type GenericResource = {
   meta?: {
     image?: string;
     author?: string;
+    rating?: number;
     average?: string;
     thumbnail?: string;
   };
@@ -66,9 +67,4 @@ export type TypesenseDocument = {
   image?: string;
 };
 
-export enum ResourceStatus {
-  COMPLETED = "completed",
-  NOT_COMPLETED = "not_completed",
-}
-
 export type SearchResult = SearchResponse<TypesenseDocument>;

lib/typesense.ts

@@ -77,7 +77,6 @@ async function initializeTypesense() {
           { name: "type", type: "string", facet: true },
           { name: "date", type: "string", optional: true },
           { name: "author", type: "string", facet: true, optional: true },
-          { name: "status", type: "string", facet: true, optional: true },
           { name: "rating", type: "int32", facet: true },
           { name: "tags", type: "string[]", facet: true },
           { name: "description", type: "string", optional: true },

routes/api/articles/create/index.ts

@@ -130,7 +130,7 @@ async function processCreateArticle(
   const meta: Article["meta"] = {
     author: (author || "").replace("@", "twitter:"),
     link: fetchUrl,
-    status: "not-finished",
+    done: false,
     date: new Date(),
   };
 
@@ -194,7 +194,7 @@ async function processCreateYoutubeVideo(
     content: video.snippet.description,
     tags: video.snippet.tags.slice(0, 5),
     meta: {
-      status: "not-finished",
+      done: false,
       link: fetchUrl,
       author: video.snippet.channelTitle,
       date: new Date(video.snippet.publishedAt),