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,
+});