feat(app): tabbed sticky details panel

src/state/atoms.ts

@@ -1,27 +1,33 @@
 import { atom } from "recoil";
 import { IconStyle } from "@phosphor-icons/core";
+import { IconEntry } from "@/lib";
 
 export const searchQueryAtom = atom<string>({
-  key: "searchQueryAtom",
+  key: "searchQuery",
   default: "",
 });
 
 export const iconWeightAtom = atom<IconStyle>({
-  key: "iconWeightAtom",
+  key: "iconWeight",
   default: IconStyle.REGULAR,
 });
 
 export const iconSizeAtom = atom<number>({
-  key: "iconSizeAtom",
+  key: "iconSize",
   default: 32,
 });
 
 export const iconColorAtom = atom<string>({
-  key: "iconColorAtom",
+  key: "iconColor",
   default: "#000000",
 });
 
 export const iconPreviewOpenAtom = atom<string | false>({
-  key: "iconPreviewOpenAtom",
+  key: "iconPreviewOpen",
   default: false,
 });
+
+export const selectionEntryAtom = atom<IconEntry | null>({
+  key: "selectionEntry",
+  default: null,
+});

src/state/selectors.ts

@@ -20,7 +20,7 @@ const fuse = new Fuse(icons, {
 });
 
 export const filteredQueryResultsSelector = selector<ReadonlyArray<IconEntry>>({
-  key: "filteredQueryResultsSelector",
+  key: "filteredQueryResults",
   get: ({ get }) => {
     const query = get(searchQueryAtom).trim().toLowerCase();
     if (!query) return icons;
@@ -36,7 +36,7 @@ type CategorizedIcons = Partial<Record<IconCategory, IconEntry[]>>;
 export const categorizedQueryResultsSelector = selector<
   Readonly<CategorizedIcons>
 >({
-  key: "categorizedQueryResultsSelector",
+  key: "categorizedQueryResults",
   get: ({ get }) => {
     const filteredResults = get(filteredQueryResultsSelector);
     return new Promise((resolve) =>
@@ -57,7 +57,7 @@ export const singleCategoryQueryResultsSelector = selectorFamily<
   ReadonlyArray<IconEntry>,
   IconCategory
 >({
-  key: "singleCategoryQueryResultsSelector",
+  key: "singleCategoryQueryResults",
   get:
     (category: IconCategory) =>
     ({ get }) => {
@@ -71,7 +71,7 @@ export const singleCategoryQueryResultsSelector = selectorFamily<
 });
 
 export const isDarkThemeSelector = selector<boolean>({
-  key: "isDarkThemeSelector",
+  key: "isDarkTheme",
   get: ({ get }) => TinyColor(get(iconColorAtom)).isLight(),
 });