feat: add type selector and limit results based on set type

pyproject.toml

@@ -9,6 +9,7 @@ dependencies = [
     "httpx>=0.28.1",
     "jinja2>=3.1.6",
     "komgapi",
+    "limit>=0.2.3",
     "quart>=0.20.0",
 ]
 

src/app.py

@@ -36,12 +36,15 @@ async def fetch_data(
 ) -> List[Dict[str, Any]]:
     async with httpx.AsyncClient() as client:
         try:
-            variables: Dict[str, Any] = {"search": data["query"], "type": "MANGA"}
+            variables: Dict[str, Any] = {"search": data["query"]}
             if data.get("genres"):
                 variables["genres"] = data["genres"]
             if data.get("tags"):
                 variables["tags"] = data["tags"]
-            # print(data["query"], variables)
+            if data.get("type"):
+                if data["type"] in ["MANGA", "NOVEL"]:
+                    variables["format"] = data["type"]
+            print(data["query"], variables)
             response = await client.post(
                 "https://graphql.anilist.co",
                 json={

src/templates/index.html

@@ -14,6 +14,7 @@
         <input type="text" id="searchInput" placeholder="Search..." />
         <div class="selectors">
             <div class="autocomplete">
+
                 <input type="text" id="genreInput" placeholder="Select genres..." readonly
                     oninput="filterSuggestions('genre')" onclick="showDropdown('genre')">
                 <button onclick="resetGenres()" class="reset">Reset</button>
@@ -30,6 +31,14 @@
                     <!-- Tag suggestions will be dynamically populated here -->
                 </div>
             </div>
+            <div class="type-select">
+                <label for="typeSelect">Type:</label>
+                <select id="typeSelect">
+                    <option value="ALL">All</option>
+                    <option value="MANGA">Manga</option>
+                    <option value="NOVEL">Novel</option>
+                </select>
+            </div>
         </div>
         <button onclick="performSearch()">Search</button>
         <div style="margin-bottom: 1em;">
@@ -256,13 +265,14 @@
             const searchTerm = document.getElementById("searchInput").value.trim();
             const selectedGenres = document.getElementById("genreInput").value.split(',').map(v => v.trim()).filter(v => v);
             const selectedTags = document.getElementById("tagInput").value.split(',').map(v => v.trim()).filter(v => v);
-
-
+            const selectedType = document.getElementById("typeSelect").value;
 
             const query = {
                 query: searchTerm,
                 genres: selectedGenres,
-                tags: selectedTags
+                tags: selectedTags,
+                type: selectedType // Include the selected type in the query
+                
             };
 
             const loadingElement = document.getElementById("loading");