Add initial settings modal

Added a modal for settings. For now just the 18+ rated content can be
changed, and it is off by default (previously results were retrieved
without this filter).

Settings are saved using the web extension storage api which requires
new storage permissions.

Author: 4ndrs

bun.lockb

@@ -3,7 +3,7 @@
   "name": "Dokodemo AniList (Unofficial)",
   "description": "Bring AniList's search box anywhere",
   "version": "0.1.1",
-  "permissions": ["activeTab", "contextMenus", "scripting"],
+  "permissions": ["activeTab", "contextMenus", "scripting", "storage"],
   "background": {
     "scripts": ["background.js"]
   },

manifest.json

@@ -38,8 +38,10 @@
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-switch": "^1.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "zod": "^3.22.4"
+    "zod": "^3.22.4",
+    "zustand": "^4.4.6"
   }
 }

package.json

@@ -5,6 +5,7 @@ import MangaList from "./manga-list";
 import StaffList from "./staff-list";
 import StudioList from "./studio-list";
 import CharacterList from "./character-list";
+import SettingsModal from "./settings-modal";
 
 import { useSearch } from "../hooks/search";
 import { useEffect, useState } from "react";
@@ -23,8 +24,9 @@ let runningTabId: number | undefined;
 const initialValue = document.getSelection()?.toString() ?? "";
 
 const App = () => {
-  const [isOpen, setIsOpen] = useState(true);
   const [searchBarText, setSearchBarText] = useState(initialValue);
+  const [dokodemoModalisOpen, setDokodemoModalIsOpen] = useState(true);
+  const [settingsModalIsOpen, setSettingsModalIsOpen] = useState(false);
 
   const { data, isLoading } = useSearch(searchBarText);
 
@@ -43,11 +45,11 @@ const App = () => {
       }
 
       if (result.data.action === "close") {
-        setIsOpen(false);
+        setDokodemoModalIsOpen(false);
         return;
       }
 
-      setIsOpen(true);
+      setDokodemoModalIsOpen(true);
 
       // set to the selected text if any
       setSearchBarText(result.data.text ?? "");
@@ -58,49 +60,57 @@ const App = () => {
   }, []);
 
   return (
-    <Modal
-      open={isOpen}
-      onOpenChange={(open) => setIsOpen(open)}
-      onCloseAnimationEnd={() => setSearchBarText("")}
-    >
-      <SearchBar
-        placeholder="Search AniList"
-        value={searchBarText}
-        isLoading={isLoading}
-        onClose={() => setIsOpen(false)}
-        onChange={({ target: { value } }) => setSearchBarText(value)}
+    <>
+      <Modal
+        open={dokodemoModalisOpen}
+        onOpenChange={setDokodemoModalIsOpen}
+        onCloseAnimationEnd={() => setSearchBarText("")}
+      >
+        <SearchBar
+          placeholder="Search AniList"
+          value={searchBarText}
+          isLoading={isLoading}
+          onClose={() => setDokodemoModalIsOpen(false)}
+          onOpenSettings={() => setSettingsModalIsOpen(true)}
+          onChange={({ target: { value } }) => setSearchBarText(value)}
+        />
+
+        <AnimeList
+          anime={data.anime.results}
+          searchText={searchBarText}
+          thereIsMore={data.anime.pageInfo.hasNextPage}
+        />
+
+        <MangaList
+          manga={data.manga.results}
+          searchText={searchBarText}
+          thereIsMore={data.manga.pageInfo.hasNextPage}
+        />
+
+        <CharacterList
+          characters={data.characters.results}
+          searchText={searchBarText}
+          thereIsMore={data.characters.pageInfo.hasNextPage}
+        />
+
+        <StaffList
+          staff={data.staff.results}
+          searchText={searchBarText}
+          thereIsMore={data.staff.pageInfo.hasNextPage}
+        />
+
+        <StudioList
+          studios={data.studios.results}
+          searchText={searchBarText}
+          thereIsMore={data.studios.pageInfo.hasNextPage}
+        />
+      </Modal>
+
+      <SettingsModal
+        open={settingsModalIsOpen}
+        onOpenChange={setSettingsModalIsOpen}
       />
-
-      <AnimeList
-        anime={data.anime.results}
-        searchText={searchBarText}
-        thereIsMore={data.anime.pageInfo.hasNextPage}
-      />
-
-      <MangaList
-        manga={data.manga.results}
-        searchText={searchBarText}
-        thereIsMore={data.manga.pageInfo.hasNextPage}
-      />
-
-      <CharacterList
-        characters={data.characters.results}
-        searchText={searchBarText}
-        thereIsMore={data.characters.pageInfo.hasNextPage}
-      />
-
-      <StaffList
-        staff={data.staff.results}
-        searchText={searchBarText}
-        thereIsMore={data.staff.pageInfo.hasNextPage}
-      />
-
-      <StudioList
-        studios={data.studios.results}
-        searchText={searchBarText}
-        thereIsMore={data.studios.pageInfo.hasNextPage}
-      />
-    </Modal>
+    </>
   );
 };
 

src/content/components/app.tsx

@@ -7,6 +7,7 @@ import {
 interface Props extends React.ComponentProps<"input"> {
   isLoading: boolean;
   onClose: () => void;
+  onOpenSettings: () => void;
 }
 
 const SearchBar = (props: Props) => (
@@ -23,7 +24,7 @@ const SearchBar = (props: Props) => (
     />
     <button
       aria-label="Settings"
-      onClick={() => console.log("goooooooooooooooooood morning miyakejimaaaa")}
+      onClick={props.onOpenSettings}
       className="dokodemo-group dokodemo-mx-1 dokodemo-flex dokodemo-cursor-pointer dokodemo-rounded-full dokodemo-border-none dokodemo-bg-transparent"
     >
       <GearIcon className="dokodemo-h-[20px] dokodemo-w-[20px] dokodemo-text-slate-700 dokodemo-transition-colors dokodemo-duration-300 group-hover:dokodemo-text-sky-600 group-focus-visible:dokodemo-text-sky-600" />

src/content/components/search-bar.tsx

@@ -0,0 +1,54 @@
+import * as Dialog from "@radix-ui/react-dialog";
+import * as Switch from "@radix-ui/react-switch";
+
+import { useSettingsStore } from "../store";
+
+const SettingsModal = ({
+  open,
+  onOpenChange,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) => {
+  const { isAdult, toggleIsAdult } = useSettingsStore();
+
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="dokodemo-modal dokodemo-fixed dokodemo-inset-0 dokodemo-z-[2147483647] dokodemo-flex dokodemo-overflow-y-auto dokodemo-bg-black/20 dokodemo-font-sans">
+          <Dialog.Content className="settings-content dokodemo-absolute dokodemo-left-1/2 dokodemo-top-1/2 dokodemo-mx-[24px] dokodemo-flex dokodemo-h-full dokodemo-max-h-[300px] dokodemo-w-full dokodemo-max-w-[555px] -dokodemo-translate-x-1/2 -dokodemo-translate-y-1/2 dokodemo-flex-col dokodemo-rounded-[6px] dokodemo-bg-white dokodemo-p-[20px] dokodemo-leading-[20px]">
+            <h1 className="dokodemo-mb-[20px] dokodemo-text-[24px] dokodemo-font-bold">
+              Settings
+            </h1>
+
+            <div className="dokodemo-flex dokodemo-justify-between">
+              <label
+                htmlFor="18-content"
+                className="dokodemo-text-[15px] dokodemo-font-normal"
+              >
+                Allow 18+ content in search results
+              </label>
+              <Switch.Root
+                id="18-content"
+                checked={isAdult}
+                onCheckedChange={toggleIsAdult}
+                className="dokodemo-flex dokodemo-h-[25px] dokodemo-w-[42px] dokodemo-cursor-default dokodemo-items-center dokodemo-rounded-full dokodemo-outline-none focus-visible:dokodemo-outline focus-visible:dokodemo-outline-sky-400 data-[state=checked]:dokodemo-bg-sky-500"
+              >
+                <Switch.Thumb className="dokodemo-block dokodemo-h-[21px] dokodemo-w-[21px] dokodemo-translate-x-0.5 dokodemo-rounded-full dokodemo-bg-white dokodemo-shadow-[0_2px_2px] dokodemo-shadow-black dokodemo-transition-transform dokodemo-duration-100 dokodemo-will-change-transform data-[state=checked]:dokodemo-translate-x-[19px]" />
+              </Switch.Root>
+            </div>
+
+            <button
+              onClick={() => onOpenChange(false)}
+              className="dokodemo-mb-0 dokodemo-mt-auto dokodemo-cursor-pointer dokodemo-self-end dokodemo-rounded-[4px] dokodemo-bg-sky-500 dokodemo-px-[15px] dokodemo-py-[10px] dokodemo-text-[15px] dokodemo-font-medium dokodemo-text-white dokodemo-transition-shadow dokodemo-duration-200 hover:dokodemo-shadow-[0_1px_10px_0_rgba(49,54,68,.15)]"
+            >
+              Close
+            </button>
+          </Dialog.Content>
+        </Dialog.Overlay>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};
+
+export default SettingsModal;

src/content/components/settings-modal.tsx

@@ -5,6 +5,7 @@
   line-height: inherit !important;
   box-shadow: none !important;
   border-radius: unset !important;
+  border: none !important;
 }
 
 .dokodemo-modal input:focus,
@@ -14,11 +15,12 @@
 }
 
 .dokodemo-modal a {
-  color: unset !important;
-  text-decoration: unset !important;
+  color: unset;
+  text-decoration: unset;
 }
 
-.dokodemo-content {
+.dokodemo-content,
+.settings-content {
   --testing: 1;
 }
 
@@ -30,8 +32,7 @@
   animation: dokodemo-fade-in 300ms ease-out;
 }
 
-.dokodemo-modal[data-state="closed"],
-.dokodemo-content[data-state="closed"] {
+.dokodemo-modal[data-state="closed"] {
   animation: dokodemo-fade-out 200ms ease-in;
 }
 
@@ -43,6 +44,14 @@
   animation: dokodemo-slide-out 150ms ease-in-out;
 }
 
+.dokodemo-content[data-state="open"] {
+  animation: dokodemo-slide-in 150ms ease-in-out;
+}
+
+.dokodemo-content[data-state="closed"] {
+  animation: dokodemo-slide-out 150ms ease-in-out;
+}
+
 @keyframes dokodemo-fade-in {
   from {
     opacity: 0;

src/content/dokodemo-anilist.css

@@ -1,3 +1,4 @@
+import { useSettingsStore } from "../store";
 import { useEffect, useState } from "react";
 
 import { FetchMessageSchema } from "../schemas/message";
@@ -18,6 +19,8 @@ export const useSearch = (text: string) => {
   const [isLoading, setIsLoading] = useState(false);
   const [textToSearch, setTextToSearch] = useState("");
 
+  const { isAdult } = useSettingsStore();
+
   useEffect(() => {
     if (!text) {
       setTextToSearch("");
@@ -49,7 +52,7 @@ export const useSearch = (text: string) => {
           pageInfo {
             hasNextPage
           }
-          results: media(type: ANIME, search: "${textToSearch}") {
+          results: media(type: ANIME, search: "${textToSearch}", isAdult: ${isAdult}) {
             id
             title {
               romaji
@@ -67,7 +70,7 @@ export const useSearch = (text: string) => {
           pageInfo {
             hasNextPage
           }
-          results: media(type: MANGA, search: "${textToSearch}") {
+          results: media(type: MANGA, search: "${textToSearch}", isAdult: ${isAdult}) {
             id
             title {
               romaji
@@ -120,7 +123,6 @@ export const useSearch = (text: string) => {
           }
         }
       }
-
     `;
 
     const cheerioooooooooo = async () => {
@@ -152,7 +154,7 @@ export const useSearch = (text: string) => {
     };
 
     cheerioooooooooo();
-  }, [textToSearch]);
+  }, [textToSearch, isAdult]);
 
   return { data, isLoading };
 };

src/content/hooks/search.ts

@@ -74,9 +74,19 @@ export const SearchResponseSchema = z.union([
   ErrorQuerySchema,
 ]);
 
+export const SettingsSchema = z.object({
+  isAdult: z.boolean(),
+});
+
+export const LocalStorageSchema = z.object({
+  settings: SettingsSchema,
+});
+
 export type Anime = z.infer<typeof MediaSchema>;
 export type Manga = z.infer<typeof MediaSchema>;
 export type Staff = z.infer<typeof StaffSchema>;
 export type Studio = z.infer<typeof StudioSchema>;
 export type Character = z.infer<typeof CharacterSchema>;
+export type SettingsSchema = z.infer<typeof SettingsSchema>;
+export type LocalStorageSchema = z.infer<typeof LocalStorageSchema>;
 export type SearchResponseSchema = z.infer<typeof SearchResponseSchema>;

src/content/schemas/index.ts

@@ -0,0 +1,50 @@
+import { create } from "zustand";
+import { LocalStorageSchema, type SettingsSchema } from "../schemas";
+
+interface SettingsStore extends SettingsSchema {
+  toggleIsAdult: () => void;
+}
+
+export const useSettingsStore = create<SettingsStore>()((set, get) => ({
+  isAdult: false,
+  toggleIsAdult: async () => {
+    const isAdult = !get().isAdult;
+
+    await browser.storage.local.set({
+      settings: { isAdult },
+    } satisfies LocalStorageSchema);
+
+    set({ isAdult });
+  },
+}));
+
+// set the initial state saved in the store if it exists
+(async () => {
+  const localStorage = await browser.storage.local.get();
+
+  const result = LocalStorageSchema.safeParse(localStorage);
+
+  if (!result.success) {
+    console.log(
+      "no settings found in the storage, assuming first time running",
+    );
+
+    await browser.storage.local.set({
+      settings: { isAdult: false },
+    } satisfies LocalStorageSchema);
+
+    return;
+  }
+
+  const {
+    settings: { isAdult },
+  } = result.data;
+
+  useSettingsStore.setState({ isAdult });
+})();
+
+// listen for changes made by other tabs
+// currently not working, TODO: fix this
+browser.storage.local.onChanged.addListener((changes) =>
+  console.log("changes", changes),
+);