Tags search

src/RequestAPI.d.ts

@@ -66,6 +66,7 @@ export type RequestAPI = {
   ) => InfiniteScrollerResponse<Song>;
   "query::queue::init": () => InfiniteScrollerInitResponse;
   "query::queue": (request: InfiniteScrollerRequest) => InfiniteScrollerResponse<Song>;
+  "query::tags::search": () => string[];
 
   "save::localVolume": (volume: number, song: ResourceID) => void;
 

src/main/router/import.ts

@@ -11,4 +11,5 @@ import "./resource-router";
 import "./settings-router";
 import "./song-color-router";
 import "./songs-pool-router";
+import "./tags-router";
 import "./window-router";

src/main/router/tags-router.ts

@@ -0,0 +1,31 @@
+import { Router } from "../lib/route-pass/Router";
+import { Storage } from "../lib/storage/Storage";
+
+Router.respond("query::tags::search", () => {
+  const allTags = Storage.getTable("system").get("allTags");
+  if (allTags.isNone) {
+    return [];
+  }
+
+  const tagsByUse: string[][] = [];
+  Object.entries(allTags.value).forEach(([tagName, songs]) => {
+    if (!tagName) {
+      return;
+    }
+
+    const size = songs.length;
+    tagsByUse[size] = (tagsByUse[size] ?? []).concat(tagName);
+  });
+
+  let result: string[] = [];
+  for (let i = tagsByUse.length - 1; i > 0; i--) {
+    const tagGroup = tagsByUse[i];
+    if (!tagGroup) {
+      continue;
+    }
+
+    result = result.concat(tagGroup);
+  }
+
+  return result;
+});

src/renderer/src/components/input/Input.tsx

@@ -3,7 +3,7 @@ import { Component, JSX, splitProps } from "solid-js";
 
 export const inputStyles = cva(
   [
-    "ring-offset-background placeholder:text-subtext flex h-[42px] w-full rounded-lg px-3.5 py-2 disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:bg-surface",
+    "ring-offset-background placeholder:text-subtext flex w-full rounded-lg disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:bg-surface",
   ],
   {
     variants: {
@@ -12,21 +12,27 @@ export const inputStyles = cva(
         outlined:
           "border border-stroke bg-transparent border-solid block focus-visible:border-grey-400",
       },
+      size: {
+        sm: "h-[32px] text-sm px-2.5",
+        default: "h-[42px] text-base px-3.5 py-2",
+      },
     },
     defaultVariants: {
       variant: "outlined",
+      size: "default",
     },
   },
 );
 
 type Props = JSX.IntrinsicElements["input"] & VariantProps<typeof inputStyles>;
 export const Input: Component<Props> = (_props) => {
-  const [props, rest] = splitProps(_props, ["class", "variant"]);
+  const [props, rest] = splitProps(_props, ["class", "variant", "size"]);
   return (
     <input
       {...rest}
       class={inputStyles({
         variant: props.variant,
+        size: props.size,
         class: props.class,
       })}
     />

src/renderer/src/components/song/song-list-search/SongListSearch.tsx

@@ -2,17 +2,17 @@ import { Optional, Order, Tag } from "../../../../../@types";
 import { SearchQueryError } from "../../../../../main/lib/search-parser/@search-types";
 import { setSongsSearch } from "../song-list/song-list.utils";
 import SongListSearchOrderBy from "./SongListSearchOrderBy";
-import { SongListSearchTags } from "./SongListSearchTags";
+import { SongListSearchTags, TagMode } from "./SongListSearchTags";
 import Button from "@renderer/components/button/Button";
 import { Input } from "@renderer/components/input/Input";
 import { FilterIcon, SearchIcon, FilterXIcon } from "lucide-solid";
-import { Accessor, Component, createSignal, Match, Setter, Signal, Switch } from "solid-js";
+import { Accessor, Component, createSignal, Match, Setter, Switch } from "solid-js";
 
 export type SearchProps = {
-  tags: Signal<Tag[]>;
   count: Accessor<number>;
   error: Accessor<Optional<SearchQueryError>>;
   setOrder: Setter<Order>;
+  setTags: Setter<Tag[]>;
 };
 
 const SongListSearch: Component<SearchProps> = (props) => {
@@ -66,6 +66,17 @@ const SongListSearch: Component<SearchProps> = (props) => {
   //   }
   // });
 
+  const handleValueChange = (tags: Map<string, TagMode>) => {
+    const searchFormattedTags = Array.from(
+      tags.entries(),
+      ([tagName, mode]): Tag => ({
+        name: tagName,
+        isSpecial: mode === "discart",
+      }),
+    );
+    props.setTags(searchFormattedTags);
+  };
+
   return (
     <div class="px-5 pb-2 pt-1">
       <div class="flex gap-2">
@@ -109,8 +120,8 @@ const SongListSearch: Component<SearchProps> = (props) => {
         }}
       >
         <div class="mt-2 flex flex-nowrap items-center gap-2 overflow-y-auto">
-          <SongListSearchOrderBy disabled={!filterExpanded()} setOrder={props.setOrder} />
-          <SongListSearchTags disabled={!filterExpanded()} />
+          <SongListSearchOrderBy setOrder={props.setOrder} />
+          <SongListSearchTags onValueChange={handleValueChange} />
         </div>
       </div>
     </div>