12-11-24

backend/api/cloudflare_turnstile.py

@@ -11,7 +11,7 @@ from ipware import get_client_ip
 env = environ.Env()
 
 @csrf_exempt
-@ratelimit(key='ip', rate='60/m')
+@ratelimit(key='ip', rate='10/m')
 def verify(request):
     if request.method != "POST": return HttpResponseBadRequest('Allowed POST request only!', status=400)
     client_ip, is_routable = get_client_ip(request)
@@ -29,7 +29,7 @@ def verify(request):
     result = req.json()
     status = result.get("success")
     if (status): 
-       
+        
         queryset = CloudflareTurnStileCache.objects.create(token=token)
         queryset.refresh_from_db()
         return JsonResponse(result)

backend/api/queue.py

@@ -18,7 +18,7 @@ env = environ.Env()
 
 
 @csrf_exempt
-@ratelimit(key='ip', rate='60/m')
+@ratelimit(key='ip', rate='10/m')
 def request_chapter(request):
     try:
         if request.method != "POST": return HttpResponseBadRequest('Allowed POST request only!', status=400)

backend/api/stream_file.py

@@ -8,7 +8,7 @@ from backend.models.model_cache import SocketRequestChapterQueueCache, ComicStor
 import os, json, sys
 
 @csrf_exempt
-@ratelimit(key='ip', rate='60/m')
+@ratelimit(key='ip', rate='30/m')
 def download_chapter(request):
     if request.method != "POST": return HttpResponseBadRequest('Allowed POST request only!', status=400)
     token = request.META.get('HTTP_X_CLOUDFLARE_TURNSTILE_TOKEN')

backend/api/web_scrap.py

@@ -18,7 +18,7 @@ env = environ.Env()
 
 
 @csrf_exempt
-@ratelimit(key='ip', rate='60/m')
+@ratelimit(key='ip', rate='20/m')
 def get_list(request):
     if request.method != "POST": return HttpResponseBadRequest('Allowed POST request only!', status=400)
     token = request.META.get('HTTP_X_CLOUDFLARE_TURNSTILE_TOKEN')
@@ -35,7 +35,7 @@ def get_list(request):
     return JsonResponse({"data":DATA}) 
 
 
-@ratelimit(key='ip', rate='60/m')
+@ratelimit(key='ip', rate='20/m')
 def search(request):
     # if request.method != "POST": return HttpResponseBadRequest('Allowed POST request only!', status=400)
     try:
@@ -47,7 +47,7 @@ def search(request):
 
 
 @csrf_exempt
-@ratelimit(key='ip', rate='60/m')
+@ratelimit(key='ip', rate='20/m')
 def get(request):
     if request.method != "POST": return HttpResponseBadRequest('Allowed POST request only!', status=400)
     token = request.META.get('HTTP_X_CLOUDFLARE_TURNSTILE_TOKEN')
@@ -79,33 +79,4 @@ def get_cover(request,source,id,cover_id):
     except Exception as e:
         return HttpResponseBadRequest(str(e), status=500)
 
-    
-def get_chapter(request):
-    try:
-        id = "manga-lo816008/1/410.html"
-        job = web_scrap.source_control["colamanga"].get_chapter.scrap(id=id,output_dir=os.path.join(BASE_DIR,"media"))
-        if job.get("status") == "success":
-            chapter_id = id.split("/")[-1].split(".")[0]
-            input_dir = os.path.join(BASE_DIR,"media",id.split("/")[0],chapter_id,"original")
-            merged_output_dir =  os.path.join(BASE_DIR,"media",id.split("/")[0],chapter_id,"merged")
-            os.makedirs(merged_output_dir,exist_ok=True)
-            
-            manage_image.merge_images_vertically(input_dir=input_dir,output_dir=merged_output_dir,max_size=10*1024*1024)
-
-            translated_merged_output_dir = os.path.join(BASE_DIR,"media",id.split("/")[0],chapter_id,"merged_translated")
-            os.makedirs(translated_merged_output_dir,exist_ok=True)
-        
-        
-            subprocess.run(
-                ["python", "-m", "manga_translator", "-v", "--manga2eng", "--translator=m2m100_big", "-l", "ENG", "-i", f"{merged_output_dir}", "-o", f"{translated_merged_output_dir}"],
-                cwd=os.path.join(BASE_DIR,"backend","module","utils","image_translator"), shell=True, check=True
-            )
-            
-            translated_splited_output_dir = os.path.join(BASE_DIR,"media",id.split("/")[0],chapter_id,"translated")
-            
-            os.makedirs(translated_splited_output_dir,exist_ok=True)
-            manage_image.split_image_vertically(input_dir=translated_merged_output_dir,output_dir=translated_splited_output_dir)
-    except Exception as e:
-        print(e)
-            
-    return JsonResponse({})
+    

backend/migrations/0002_remove_requestcache_room.py

@@ -0,0 +1,17 @@
+# Generated by Django 5.1.1 on 2024-11-08 17:33
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('backend', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='requestcache',
+            name='room',
+        ),
+    ]

backend/models/model_cache.py

@@ -5,11 +5,8 @@ import uuid
 def get_current_utc_time(): return date_utils.utc_time().get()
 
 class RequestCache(models.Model):
-    room = models.TextField()
     client = models.UUIDField(primary_key=True)
     datetime = models.DateTimeField(default=get_current_utc_time)
-    
-
 
 class CloudflareTurnStileCache(models.Model):
     token = models.TextField(primary_key=True)

backend/urls.py

@@ -18,7 +18,6 @@ urlpatterns = [
     path('web_scrap/search/', web_scrap.search),
     path('web_scrap/get/', web_scrap.get),
     path('web_scrap/get_cover/<str:source>/<str:id>/<str:cover_id>/', web_scrap.get_cover),
-    path('web_scrap/get_chapter/', web_scrap.get_chapter),
     
     
     

core/middleware.py

@@ -35,7 +35,7 @@ class SequentialRequestMiddleware:
     def __call__(self, request):
         request_type = request.scope.get("type")
         request_path = request.path
-
+        print(request_path)
         if request_type == "http":
             
             with TimeoutContext(30) as executor:

frontend/app/_layout.tsx

@@ -70,7 +70,7 @@ SplashScreen.preventAutoHideAsync();
 export default function RootLayout() {
 	const pathname = usePathname()
 	const Dimensions = useWindowDimensions();
-	const [showMenuContext,setShowMenuContext]:any = useState(true)
+	const [showMenuContext, setShowMenuContext]:any = useState(false)
 	const [themeTypeContext,setThemeTypeContext]:any = useState("")
 	const [apiBaseContext, setApiBaseContext]:any = useState("")
 	const [socketBaseContext, setSocketBaseContext]:any = useState("")
@@ -134,7 +134,7 @@ return (<>{loaded && themeTypeContext && apiBaseContext && socketBaseContext &&
 		widgetContext, setWidgetContext,
 		showCloudflareTurnstileContext, setShowCloudflareTurnstileContext,
 		}}>
-		<View style={{width:"100%",height:"100%",backgroundColor: Theme[themeTypeContext].background_color}}>
+		<View style={{width:Dimensions.width,height:Dimensions.height,backgroundColor: Theme[themeTypeContext].background_color}}>
 			{showCloudflareTurnstileContext
 				? <View style={{position:"absolute",width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center",backgroundColor:Theme[themeTypeContext].background_color}}>
 					<CloudflareTurnstile 
@@ -167,17 +167,17 @@ return (<>{loaded && themeTypeContext && apiBaseContext && socketBaseContext &&
 						height:"100%",
 						display: 'flex', 
 						flex: 1, 
-						flexDirection: Dimensions.width <= 720 ? 'column' : 'row-reverse',                 
+						flexDirection: 'row-reverse',                 
 						
 					}}>
 						
 						<Stack screenOptions={{ headerShown: false}}>
-						<Stack.Screen name="index"/>
-						
-						<Stack.Screen name="+not-found" />
+							<Stack.Screen name="index"/>
+							
+							<Stack.Screen name="+not-found" />
 						</Stack>
 						<AnimatePresence exitBeforeEnter>
-						{showMenuContext && <MemoMenu/>}
+							{showMenuContext !== null && <MemoMenu/>}
 						</AnimatePresence>
 				</View>
 				</>

frontend/app/explore/components/widgets.tsx

@@ -18,6 +18,7 @@ import ChapterStorage from '@/constants/module/storages/chapter_storage';
 
 export const PageNavigationWidget = ({setPage}:any) =>{
     const Dimensions = useWindowDimensions();
+    
 
     const {themeTypeContext, setThemeTypeContext}:any = useContext(CONTEXT)
     const {widgetContext, setWidgetContext}:any = useContext(CONTEXT)

frontend/app/explore/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useCallback, useContext, useRef } from 'react';
-import { Link, router } from 'expo-router';
+import { Link, router, useFocusEffect } from 'expo-router';
 import Image from '@/components/Image';
 import { StyleSheet, useWindowDimensions, ScrollView, Pressable, RefreshControl } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
@@ -45,9 +45,15 @@ const Index = ({}:any) => {
     const controller = new AbortController();
     const signal = controller.signal;
 
+    useFocusEffect(useCallback(() => {
+        setShowMenuContext(true)
+        return () => {
+            
+        };
+    }, []))
+    
     useEffect(() => { 
         (async ()=>{
-            
             setStyles(__styles(themeTypeContext,Dimensions))
 
             let __translate:any = await Storage.get("explore_translate")
@@ -69,7 +75,6 @@ const Index = ({}:any) => {
 
     const onRefresh = () => {
         if (!(styles && themeTypeContext && apiBaseContext)) return
-        setShowMenuContext(true)
         setIsLoading(true);
         SET_CONTENT([])
         get_list(setShowCloudflareTurnstileContext,setFeedBack,signal,setIsLoading,translate,SET_CONTENT,search,page)
@@ -81,29 +86,6 @@ const Index = ({}:any) => {
     },[page])
 
 
-    const onScroll = useCallback((event:any) => {
-        const nativeEvent = event.nativeEvent
-        const { layoutMeasurement, contentOffset, contentSize } = nativeEvent;
-        var currentOffset = event.nativeEvent.contentOffset.y;
-        var direction = currentOffset > scrollOffset.current ? 'down' : 'up';
-        scrollOffset.current = currentOffset;
-        if (direction === 'down') {
-            if (contentOffset.y <= contentSize.height*0.025) {
-                setShowMenuContext(true)
-            }else{
-                setShowMenuContext(false)
-            }
-        }
-        else {
-            
-            if (layoutMeasurement.height + contentOffset.y >= (contentSize.height - contentSize.height*0.025)) {
-                setShowMenuContext(false)
-            }else{
-                setShowMenuContext(true)
-            }
-        }
-        
-    },[])
 
     
 
@@ -114,8 +96,6 @@ const Index = ({}:any) => {
                     if (!isLoading) onRefresh()
                 }} />
             }
-            onScroll={(event) => {onScroll(event)}}
-            scrollEventThrottle={5}
         >
 
             <View style={styles.header_container}>
@@ -409,7 +389,7 @@ const Index = ({}:any) => {
                             {CONTENT.map((item:any,index:number)=>(
                                 <TouchableRipple 
                                     rippleColor={Theme[themeTypeContext].ripple_color_outlined}
-                                    onPress={()=>{router.push(`/view/${source}/${item.id}`)}} key={index}
+                                    onPress={()=>{router.navigate(`/view/${source}/${item.id}`)}} key={index}
                                     style={styles.item_box}
                                 >
                                     <>

frontend/app/explore/stylesheet/show_list_styles.tsx

@@ -92,13 +92,13 @@ export const __styles:any = (theme_type:string,Dimensions:any) => {
             alignItems:"center",
             gap:15,
             height:"auto",
-            width:Math.max(((Dimensions.width+Dimensions.height)/2)*0.25,100),
+            width:Math.max(((Dimensions.width+Dimensions.height)/2)*0.225,100),
             borderRadius:8,
             
         },
         item_cover:{
             width:"100%",
-            height:Math.max(((Dimensions.width+Dimensions.height)/2)*0.4,125),
+            height:Math.max(((Dimensions.width+Dimensions.height)/2)*0.325,125),
             borderRadius:8,
             shadowColor: "#000",
             shadowOffset: {

frontend/app/index.tsx

@@ -9,7 +9,7 @@ const Index = () => {
     const pathname = usePathname()
 
     if (pathname === "/" || pathname === "") return (
-        <Redirect href="/read/colamanga/manga-wp55334?idx=985" />
+        <Redirect href="/view/colamanga/manga-wp55334" />
     )
 
 }

frontend/app/read/[source]/[comic_id]/{index.tsx → [chapter_idx].tsx}

@@ -49,12 +49,14 @@ const Index = ({}:any) => {
     const [isAdding, setIsAdding]:any = useState(false)
     const [zoom, setZoom]:any = useState(0)
 
-    const CHAPTER_IDX = useRef(Number(useLocalSearchParams().idx as string));
+    const CHAPTER_IDX = useRef(Number(useLocalSearchParams().chapter_idx as string));
 
 
-    useEffect(()=>{
-        setShowMenuContext(false)
-    },[])
+    useFocusEffect(useCallback(() => {
+        setShowMenuContext(null)
+        return () => {
+        }
+    },[]))
 
     // First Load
     useEffect(()=>{(async () => {
@@ -91,36 +93,39 @@ const Index = ({}:any) => {
     },[]))
 
     const renderItem = useCallback(({item,index}:any) => {
-        return <ChapterImage key={index} item={item} zoom={zoom} showOptions={showOptions} setShowOptions={setShowOptions}/>
+        return <ChapterImage key={index} item={item} zoom={zoom} showOptions={showOptions} setShowOptions={setShowOptions} setIsLoading={setIsLoading} SET_DATA={SET_DATA}/>
     },[zoom,showOptions,setShowOptions])
 
     const onViewableItemsChanged = useCallback(async ({viewableItems, changed}:any) => {
-        const expect_chapter_idx = [CHAPTER_IDX.current + 1, CHAPTER_IDX.current - 1]
-        const current_count = viewableItems.filter((data:any) => data.item.chapter_idx === CHAPTER_IDX.current).length
-        const existed_count = viewableItems.filter((data:any) => expect_chapter_idx.includes(data.item.chapter_idx)).length
+        // const expect_chapter_idx = [CHAPTER_IDX.current + 1, CHAPTER_IDX.current - 1]
+        // const current_count = viewableItems.filter((data:any) => data.item.chapter_idx === CHAPTER_IDX.current).length
+        // const existed_count = viewableItems.filter((data:any) => expect_chapter_idx.includes(data.item.chapter_idx)).length
         
-        if (current_count || existed_count){
-            const choose_idx = current_count > existed_count ? CHAPTER_IDX.current : viewableItems.find((data:any) => expect_chapter_idx.includes(data.item.chapter_idx))?.item.idx
-            if (choose_idx === CHAPTER_IDX.current) return
-            const stored_chapter = await ChapterStorage.getByIdx(`${SOURCE}-${COMIC_ID}`,choose_idx, {exclude_fields:["data"]})   
-            setChapterInfo({
-                chapter_id: stored_chapter?.id,
-                chapter_idx: stored_chapter?.id,
-                title: stored_chapter?.title,
-            })
-            const stored_comic = await ComicStorage.getByID(SOURCE, COMIC_ID)
-            if (stored_comic.history.idx && choose_idx > stored_comic.history.idx) {
-                await ComicStorage.updateHistory(SOURCE, COMIC_ID, {idx:stored_chapter?.idx,id:stored_chapter?.id,title:stored_chapter?.title})
-            }
-            router.setParams({idx:choose_idx})
-            CHAPTER_IDX.current = choose_idx
-        }
+        // if (current_count || existed_count){
+        //     const choose_idx = current_count > existed_count ? CHAPTER_IDX.current : viewableItems.find((data:any) => expect_chapter_idx.includes(data.item.chapter_idx))?.item.chapter_idx
+        //     if (choose_idx === CHAPTER_IDX.current) return
+        //     const stored_chapter = await ChapterStorage.getByIdx(`${SOURCE}-${COMIC_ID}`,choose_idx, {exclude_fields:["data"]})   
+        //     setChapterInfo({
+        //         chapter_id: stored_chapter?.id,
+        //         chapter_idx: stored_chapter?.id,
+        //         title: stored_chapter?.title,
+        //     })
+        //     const stored_comic = await ComicStorage.getByID(SOURCE, COMIC_ID)
+        //     if (stored_comic.history.idx && choose_idx > stored_comic.history.idx) {
+        //         await ComicStorage.updateHistory(SOURCE, COMIC_ID, {idx:stored_chapter?.idx,id:stored_chapter?.id,title:stored_chapter?.title})
+        //     }
+        //     router.setParams({idx:choose_idx})
+        //     CHAPTER_IDX.current = choose_idx
+        // }
     },[])
 
     const onEndReached = useCallback(async () => {
-        const chapter_current_data = await get_chapter(SOURCE,COMIC_ID,CHAPTER_IDX.current+1)
+        console.log(DATA)
+        // const NEW_DATA = DATA.filter((data:any) => data.chapter_idx === CHAPTER_IDX.current-2)
+
+        // const chapter_current_data = await get_chapter(SOURCE,COMIC_ID,CHAPTER_IDX.current+1)
         
-        SET_DATA([...DATA,...chapter_current_data])
+        // SET_DATA([...NEW_DATA,...chapter_current_data])
     },[DATA])
 
     return (<>
@@ -218,26 +223,12 @@ const Index = ({}:any) => {
                         <FlatList 
                             data={DATA}
                             renderItem={renderItem}
-                            onEndReachedThreshold={0.5}
+                            // onEndReachedThreshold={0.5}
                             windowSize={21}
                             ItemSeparatorComponent={undefined}
                             onEndReached={onEndReached}
                             onViewableItemsChanged={onViewableItemsChanged}
                         />
-                        {isAdding && (
-                            <View
-                                style={{
-                                    display:"flex",
-                                    width:"100%",
-                                    height:"auto",
-                                    justifyContent:"center",
-                                    padding:16,
-                                }}
-                            >
-                                <ActivityIndicator animating={true}  size={(0.03 * ((Dimensions.width+Dimensions.height)/2)) * (1 - zoom/100)}/>
-                            </View>
-                        )}
-                        
                     </View>
                     <AnimatePresence exitBeforeEnter>
                         {showOptions.state && 

frontend/app/read/components/chapter_image.tsx

@@ -20,8 +20,9 @@ import Image from '@/components/Image';
 import {CONTEXT} from '@/constants/module/context';
 import {blobToBase64, base64ToBlob} from "@/constants/module/file_manager";
 import Theme from '@/constants/theme';
+import { get_chapter } from '../modules/get_chapter';
 
-const ChapterImage = ({item, zoom, showOptions,setShowOptions}:any)=>{
+const ChapterImage = ({item, zoom, showOptions,setShowOptions, setIsLoading, SET_DATA}:any)=>{
     const SOURCE = useLocalSearchParams().source;
     const COMIC_ID = useLocalSearchParams().comic_id;
     const CHAPTER_IDX = Number(useLocalSearchParams().chapter_idx as string);
@@ -140,7 +141,7 @@ const ChapterImage = ({item, zoom, showOptions,setShowOptions}:any)=>{
                                         fontFamily:"roboto-bold",
                                     }}
                                 >
-                                    No more available chapters on local.
+                                    No more chapters on local.
                                 </Text>
                                 <Text selectable={false}
                                     numberOfLines={1}
@@ -150,10 +151,135 @@ const ChapterImage = ({item, zoom, showOptions,setShowOptions}:any)=>{
                                         fontFamily:"roboto-bold",
                                     }}
                                 >
-                                    You can go back and download more.
+                                    You can go back and download more if available.
                                 </Text>
                             </View>
                         )}
+
+                        {item.type === "chapter-navigate" && (
+                            
+                            <View
+                                style={{
+                                    display:"flex",
+                                    flexDirection:"row",
+                                    justifyContent:"space-between",
+                                    alignItems:"center",
+                                    width:Dimensions.width > 720 
+                                        ? 0.8 * Dimensions.width * (1 - zoom / 100)
+                                        : `${100 - zoom}%`,
+                                    paddingHorizontal: 12,
+                                    paddingVertical: 18,
+                                }}
+                            >
+                                <TouchableRipple
+                                    rippleColor={Theme[themeTypeContext].ripple_color_outlined}
+                                    style={{
+                                        width:"auto",
+                                        display:"flex",
+                                        flexDirection:"column",
+                                        justifyContent:"center",
+                                        alignSelf:"center",
+                                        padding:8,
+                                        paddingHorizontal:18,
+                                        borderRadius:Dimensions.width*0.65/2,
+                                        backgroundColor:Theme[themeTypeContext].border_color,
+
+                                        shadowColor: Theme[themeTypeContext].shadow_color,
+                                        shadowOffset: { width: 0, height: 2 },
+                                        shadowOpacity: 0.25,
+                                        shadowRadius: 3.84,
+                                        elevation: 5,
+                                        
+                                    }}
+                                    onPress={async ()=>{
+                                        const stored_chapter_info = await ChapterStorage.getByIdx(`${SOURCE}-${COMIC_ID}`,item.chapter_idx-1)
+                                        if (stored_chapter_info?.data_state === "completed"){
+                                            router.replace(`/read/${SOURCE}/${COMIC_ID}/${stored_chapter_info.idx}/`)
+                                        }else{
+                                            Toast.show({
+                                                type: 'info',
+                                                text1: 'Chapter not download yet.',
+                                                text2: "You can go back and download more.",
+                                                
+                                                position: "bottom",
+                                                visibilityTime: 4000,
+                                                text1Style:{
+                                                    fontFamily:"roboto-bold",
+                                                    fontSize:((Dimensions.width+Dimensions.height)/2)*0.025
+                                                },
+                                                text2Style:{
+                                                    fontFamily:"roboto-medium",
+                                                    fontSize:((Dimensions.width+Dimensions.height)/2)*0.0185,
+                                                    
+                                                },
+                                            });
+                                        }
+                                    }}
+                                >
+                                    <Text selectable={false}
+                                        style={{
+                                            color:Theme[themeTypeContext].text_color,
+                                            fontFamily:"roboto-medium",
+                                            fontSize:(Dimensions.width+Dimensions.height)/2*0.03
+                                        }}
+                                    >Previous</Text>
+                                </TouchableRipple>
+
+                                <TouchableRipple
+                                    rippleColor={Theme[themeTypeContext].ripple_color_outlined}
+                                    style={{
+                                        width:"auto",
+                                        display:"flex",
+                                        flexDirection:"column",
+                                        justifyContent:"center",
+                                        alignSelf:"center",
+                                        padding:8,
+                                        paddingHorizontal:18,
+                                        borderRadius:Dimensions.width*0.65/2,
+                                        backgroundColor:Theme[themeTypeContext].border_color,
+
+                                        shadowColor: Theme[themeTypeContext].shadow_color,
+                                        shadowOffset: { width: 0, height: 2 },
+                                        shadowOpacity: 0.25,
+                                        shadowRadius: 3.84,
+                                        elevation: 5,
+                                    }}
+                                    onPress={async ()=>{
+                                        const stored_chapter_info = await ChapterStorage.getByIdx(`${SOURCE}-${COMIC_ID}`,item.chapter_idx+1)
+                                        if (stored_chapter_info?.data_state === "completed"){
+                                            router.replace(`/read/${SOURCE}/${COMIC_ID}/${stored_chapter_info.idx}/`)
+                                        }else{
+                                            Toast.show({
+                                                type: 'info',
+                                                text1: 'Chapter not download yet.',
+                                                text2: "You can go back and download more.",
+                                                
+                                                position: "bottom",
+                                                visibilityTime: 4000,
+                                                text1Style:{
+                                                    fontFamily:"roboto-bold",
+                                                    fontSize:((Dimensions.width+Dimensions.height)/2)*0.025
+                                                },
+                                                text2Style:{
+                                                    fontFamily:"roboto-medium",
+                                                    fontSize:((Dimensions.width+Dimensions.height)/2)*0.0185,
+                                                    
+                                                },
+                                            });
+                                        }
+                                    }}
+                                >
+                                    <Text selectable={false}
+                                        style={{
+                                            color:Theme[themeTypeContext].text_color,
+                                            fontFamily:"roboto-medium",
+                                            fontSize:(Dimensions.width+Dimensions.height)/2*0.03
+                                        }}
+                                    >Next</Text>
+                                </TouchableRipple>
+                            </View>
+                            
+                        )}
                     </>)
                     : (
                         <View

frontend/app/read/modules/get_chapter.tsx

@@ -22,10 +22,11 @@ export const get_chapter = async (
             DATA.push({type:"page",id:`${SOURCE}-${COMIC_ID}-${CHAPTER_IDX}-${i}`, chapter_idx: CHAPTER_IDX})
         }
         if (next_stored_chapter) {
-            DATA.push({type:"chapter-info-banner", value:{last:current_stored_chapter.title, next:next_stored_chapter.title}})
+            DATA.push({type:"chapter-info-banner", value:{last:current_stored_chapter.title, next:next_stored_chapter.title}, chapter_idx: CHAPTER_IDX})
         }else{
             DATA.push({type:"no-chapter-banner"})
         }
+        DATA.push({type:"chapter-navigate", chapter_idx: CHAPTER_IDX})
         return DATA
     }else{
         return []

frontend/app/view/[source]/[comic_id].tsx

@@ -22,7 +22,10 @@ import ChapterStorage from '@/constants/module/storages/chapter_storage';
 import ComicStorage from '@/constants/module/storages/comic_storage';
 import { CONTEXT } from '@/constants/module/context';
 import Dropdown from '@/components/dropdown';
-import { PageNavigationWidget, RequestChapterWidget, BookmarkWidget } from '../componenets/widgets';
+import PageNavigationWidget from '../componenets/widgets/page_navigation';
+import RequestChapterWidget from '../componenets/widgets/request_chapter';
+import BookmarkWidget from '../componenets/widgets/bookmark';
+
 import ChapterComponent from '../componenets/chapter';
 
 
@@ -81,6 +84,7 @@ const Index = ({}:any) => {
     // Test Section
     useEffect(() => {
         // console.log(CONTENT)
+        
     },[CONTENT])
 
 
@@ -153,8 +157,9 @@ const Index = ({}:any) => {
         }
     },[]))
 
-    // Clean up on unmount
+    // Clean up on mount/unmount
     useFocusEffect(useCallback(() => {
+        setShowMenuContext(null)
         return () => {
             controller.abort();
         }
@@ -226,14 +231,13 @@ const Index = ({}:any) => {
     // First load managing
     useEffect(() => { 
         (async ()=>{
-            setShowMenuContext(false)
             setStyles(__styles(themeTypeContext,Dimensions))
 
-            let __translate:any = await Storage.get("explore_show_translate")
+            let __translate:any = await Storage.get("view_show_translate")
             
             if (!__translate) {
                 __translate = {state:false,from:"auto",to:"en"}
-                await Storage.store("explore_show_translate",__translate)
+                await Storage.store("view_show_translate",__translate)
             }else __translate = __translate
 
             setTranslate(__translate)
@@ -438,7 +442,7 @@ const Index = ({}:any) => {
                                     value={translate.from}
                                     onChange={async (item:any) => {
                                         setTranslate({...translate,from:item.value})
-                                        await Storage.store("explore_show_translate",{...translate,from:item.value})
+                                        await Storage.store("view_show_translate",{...translate,from:item.value})
                                     }}
                                 />
                             </View>
@@ -456,7 +460,7 @@ const Index = ({}:any) => {
                                     value={translate.to}
                                     onChange={async (item:any) => {
                                         setTranslate({...translate,to:item.value})
-                                        await Storage.store("explore_show_translate",{...translate,to:item.value})
+                                        await Storage.store("view_show_translate",{...translate,to:item.value})
                                     }}
                                 />
                             </View>
@@ -477,10 +481,10 @@ const Index = ({}:any) => {
                                 onPress={async () => {
                                     if (translate.state){
                                         setTranslate({...translate,state:false})
-                                        await Storage.store("explore_show_translate",{...translate,state:false})
+                                        await Storage.store("view_show_translate",{...translate,state:false})
                                     }else{
                                         setTranslate({...translate,state:true})
-                                        await Storage.store("explore_show_translate",{...translate,state:true})
+                                        await Storage.store("view_show_translate",{...translate,state:true})
                                     }
                                     
                                 }}
@@ -641,7 +645,7 @@ const Index = ({}:any) => {
                                         
                                     }}
                                     onPress={()=>{
-                                        router.push(`/read/${SOURCE}/${ID}/?idx=${history.idx}`)
+                                        router.push(`/read/${SOURCE}/${ID}/${history.idx}/`)
                                     }}
                                 >
                                     <View
@@ -707,7 +711,7 @@ const Index = ({}:any) => {
                                         console.log(stored_chapter)
                                         if (stored_chapter.data_state === "completed"){
                                             await ComicStorage.updateHistory(SOURCE,ID,{idx:chapter.idx, id:chapter.id, title:chapter.title})
-                                            router.push(`/read/${SOURCE}/${ID}/?idx=${stored_chapter.idx}`)
+                                            router.push(`/read/${SOURCE}/${ID}/${stored_chapter.idx}/`)
                                         }else{
                                             Toast.show({
                                                 type: 'error',

frontend/app/view/componenets/chapter.tsx

@@ -22,7 +22,7 @@ import ChapterStorage from '@/constants/module/storages/chapter_storage';
 import ComicStorage from '@/constants/module/storages/comic_storage';
 import { CONTEXT } from '@/constants/module/context';
 import Dropdown from '@/components/dropdown';
-import { RequestChapterWidget, BookmarkWidget } from './widgets';
+import RequestChapterWidget from './widgets/request_chapter';
 
 
 import { get, store_comic_cover, get_requested_info } from '../modules/content'
@@ -134,7 +134,7 @@ const ChapterComponent = ({
                 if (stored_chapter?.data_state === "completed") {
                     const stored_comic = await ComicStorage.getByID(SOURCE,ID)
                     if (!stored_comic.history.idx || chapter.idx > stored_comic.history.idx) await ComicStorage.updateHistory(SOURCE,ID,{idx:chapter.idx, id:chapter.id, title:chapter.title})
-                    router.push(`/read/${SOURCE}/${ID}/?idx=${chapter.idx}`)
+                    router.push(`/read/${SOURCE}/${ID}/${chapter.idx}/`)
                 }else{
                     Toast.show({
                         type: 'error',

frontend/app/view/componenets/widgets/bookmark.tsx

@@ -0,0 +1,1116 @@
+
+import React, { useEffect, useState, useCallback, useContext, useRef, Fragment } from 'react';
+import { Platform, useWindowDimensions, ScrollView } from 'react-native';
+
+import { Icon, MD3Colors, Button, Text, TextInput, TouchableRipple, ActivityIndicator, Menu, Divider, PaperProvider, Portal } from 'react-native-paper';
+import { View, AnimatePresence } from 'moti';
+import Toast from 'react-native-toast-message';
+import * as FileSystem from 'expo-file-system';
+import axios from 'axios';
+
+
+import Theme from '@/constants/theme';
+import Dropdown from '@/components/dropdown';
+import { CONTEXT } from '@/constants/module/context';
+import { store_comic_cover } from '../../modules/content';
+import Storage from '@/constants/module/storages/storage';
+import ComicStorage from '@/constants/module/storages/comic_storage';
+import ImageCacheStorage from '@/constants/module/storages/image_cache_storage';
+import ChapterStorage from '@/constants/module/storages/chapter_storage';
+
+
+interface BookmarkWidgetProps {
+    onRefresh: any;
+    SOURCE: string | string[];
+    ID: string | string[];
+    CONTENT: any;
+}
+
+const BookmarkWidget: React.FC<BookmarkWidgetProps> = ({
+    onRefresh,
+    SOURCE,
+    ID,
+    CONTENT
+}) => {
+    const Dimensions = useWindowDimensions();
+
+    const {themeTypeContext, setThemeTypeContext}:any = useContext(CONTEXT)
+    const {widgetContext, setWidgetContext}:any = useContext(CONTEXT)
+    const {showCloudflareTurnstileContext, setShowCloudflareTurnstileContext}:any = useContext(CONTEXT)
+    const {apiBaseContext, setApiBaseContext}:any = useContext(CONTEXT)
+
+    const [BOOKMARK_DATA, SET_BOOKMARK_DATA]: any = useState([])
+    const [MIGRATE_BOOKMARK_DATA, SET_MIGRATE_BOOKMARK_DATA]:any = useState([])
+
+    
+    const [showMenuOption, setShowMenuOption]:any = useState({state:false,positions:[0,0,0,0],id:""})
+    const [searchTag, setSearchTag]:any = useState("")
+    
+    const [migrateTag,setMigrateTag]:any = useState("")
+
+    const [defaultTag, setDefaultTag]:any = useState("")
+    const [bookmark, setBookmark]:any = useState("")
+    const [manageBookmark, setManageBookmark]:any = useState({state:false,edit:"",delete:""})
+    const [createTag, setCreateTag]:any = useState({state:false,title:""})
+    const [removeTag, setRemoveTag]:any = useState({state:false, removing: false})
+
+
+    const controller = new AbortController();
+    const signal = controller.signal;
+
+    const RenderTag = ({item}:any) =>{
+        const [editTag, setEditTag]:any = useState(item.value)
+        return (<>
+            {item.value.includes(searchTag) &&
+                (
+                    <View
+                        style={{
+                            display:"flex",
+                            flexDirection:"row",
+                            alignItems:"center",
+                            justifyContent:"space-between",
+                            gap:8,
+                            zIndex:10,
+                        }}
+                    >
+                        <>{manageBookmark.edit !== item.value && manageBookmark.delete !== item.value && 
+                            (<View
+                                style={{
+                                    width:"100%",
+                                    display:"flex",
+                                    flexDirection:"row",
+                                    justifyContent:"space-between",
+                                    alignItems:"center",
+                                    height:"auto",
+                                    gap:18,
+                                }}
+                            >
+                                <Text
+                                    style={{
+                                        color:"white",
+                                        fontFamily:"roboto-medium",
+                                        fontSize:(Dimensions.width+Dimensions.height)/2*0.025
+                                    }}
+                                >{item.label}</Text>
+                                <View
+                                    style={{
+                                        width:"auto",
+                                        height:"auto",
+                                        
+                                    }}
+                                >
+                                    
+                                    <TouchableRipple
+                                        
+                                        rippleColor={Theme[themeTypeContext].ripple_color_outlined}
+                                        style={{
+                                            borderRadius:5,
+                                            borderWidth:0,
+                                            backgroundColor: "transparent",
+                                            padding:5,
+                                            
+                                        }}
+
+                                        onPress={(event)=>{
+                                            if (manageBookmark.edit){
+                                                setManageBookmark({...manageBookmark,edit:""})
+                                                setEditTag("")
+                                            }
+                                            
+
+                                            const x = event.nativeEvent.pageX
+                                            const y = event.nativeEvent.pageY
+                                            
+                                            setShowMenuOption({
+                                                ...showMenuOption,
+                                                state: showMenuOption.id === item.value ? false : true,
+                                                positions:[y+((Dimensions.width+Dimensions.height)/2)*0.0225,0,x-((Dimensions.width+Dimensions.height)/2)*0.18,0],
+                                                id:showMenuOption.id === item.value ? "" : item.value,
+                                            })
+
+                                            
+                                            
+                                        }}
+                                    >
+                                        
+                                        <Icon source={"dots-vertical"} size={((Dimensions.width+Dimensions.height)/2)*0.035} color={Theme[themeTypeContext].icon_color}/>
+                                    </TouchableRipple>
+                                </View>
+                            </View>)
+                        }</>
+                        <>{manageBookmark.edit &&
+                            (<View
+                                style={{
+                                    display:"flex",
+                                    flexDirection:"row",
+                                    justifyContent:"space-between",
+                                    alignItems:"center",
+                                    width:"100%",
+                                    height:"auto",
+                                    gap:12,
+                                    padding:12,
+                                }}
+                            >
+                                    <View 
+                                        style={{flex:1}}
+                                    >
+                                        <TextInput mode="outlined" label="Edit" textColor={Theme[themeTypeContext].text_color} maxLength={72}
+                                            right={<TextInput.Affix text={`| Max: 72`} />} 
+                                            style={{
+                                                width:"100%",
+                                                height:"100%",
+                                                backgroundColor:Theme[themeTypeContext].background_color,
+                                                borderColor:Theme[themeTypeContext].border_color,
+                                                
+                                            }}
+                                            outlineColor={Theme[themeTypeContext].text_input_border_color}
+                                            value={editTag}
+                                            onChange={(event)=>{
+                                                setEditTag(event.nativeEvent.text)
+                                            }}
+                                        />
+                                    </View>
+                                    <View
+                                        style={{
+                                            display:"flex",
+                                            flexDirection:"row",
+                                            gap:8,
+                                        }}
+                                    >
+                                        <TouchableRipple
+                                            rippleColor={Theme[themeTypeContext].ripple_color_outlined}
+                                            style={{
+                                                borderRadius:5,
+                                                borderWidth:0,
+                                                backgroundColor: "transparent",
+                                                padding:5,
+                                            }}
+
+                                            onPress={()=>{
+                                                setManageBookmark({...manageBookmark,edit:""})
+                                                setEditTag("")
+                                                setShowMenuOption({...showMenuOption,state:false,id:""})
+                                            }}
+                                        >
+                                            
+                                            <Icon source={"close"} size={((Dimensions.width+Dimensions.height)/2)*0.035} color={"red"}/>
+                                        </TouchableRipple>
+                                        <TouchableRipple
+                                            rippleColor={Theme[themeTypeContext].ripple_color_outlined}
+                                            style={{
+                                                borderRadius:5,
+                                                borderWidth:0,
+                                                backgroundColor: "transparent",
+                                                padding:5,
+                                            }}
+
+                                            onPress={async ()=>{
+                                                const stored_bookmark = await Storage.get("bookmark");
+                                                
+                                                const index = stored_bookmark.findIndex((item:string) => item === manageBookmark.edit);
+                                                
+                                                if (index !== -1){
+                                                    stored_bookmark[index] = editTag;
+                                                    await Storage.store("bookmark", stored_bookmark)
+
+                                                    const stored_comics:any = await ComicStorage.getByTag(manageBookmark.edit)
+                                                    for (const item of stored_comics){
+                                                        await ComicStorage.replaceTag(item.source, item.id, editTag)
+                                                    }
+                                                    if (manageBookmark.edit === defaultTag) {
+                                                        onRefresh();
+                                                        setWidgetContext({state:false,component:<></>});
+
+                                                    }else{
+                                                        
+                                                        const index = BOOKMARK_DATA.findIndex((item:any) => item.value === manageBookmark.edit);
+                                                        if (index !== -1){
+                                                            BOOKMARK_DATA[index].label = editTag
+                                                            BOOKMARK_DATA[index].value = editTag
+                                                        }
+                                                        SET_BOOKMARK_DATA(BOOKMARK_DATA)
+                                                        setManageBookmark({...manageBookmark,edit:""})
+                                                        setEditTag("")
+                                                    }
+                                                    
+                                                }
+                                                setShowMenuOption({...showMenuOption,state:false,id:""})
+                                            }}
+                                        >
+                                            
+                                            <Icon source={"check"} size={((Dimensions.width+Dimensions.height)/2)*0.035} color={"green"}/>
+                                        </TouchableRipple>
+                                    </View>
+                                
+                                        
+
+                            </View>)
+
+                        }</>
+
+                        
+                        
+                        
+                    </View>
+                    
+                )
+            }
+        </>)
+    }
+
+    
+
+    const load_bookmark = async ()=>{
+        const stored_comic = await ComicStorage.getByID(SOURCE,CONTENT.id)
+        
+        if (stored_comic) {
+            setDefaultTag(stored_comic.tag)
+            setBookmark(stored_comic.tag)
+        }
+
+        const stored_bookmark_data = await Storage.get("bookmark") || []
+        if (stored_bookmark_data.length) {
+            const bookmark_data:Array<Object> = []
+            for (const item of stored_bookmark_data) {
+                bookmark_data.push({
+                    label:item,
+                    value:item,
+                })
+            }
+            
+            SET_BOOKMARK_DATA(bookmark_data.sort())
+        }else SET_BOOKMARK_DATA([])
+    }
+
+    useEffect(()=>{
+        console.log(BOOKMARK_DATA)
+        SET_MIGRATE_BOOKMARK_DATA([{label:"None",value:""},...BOOKMARK_DATA])
+    },[BOOKMARK_DATA])
+
+    useEffect(()=>{
+        load_bookmark()
+        return () => controller.abort();
+    },[])
+
+    return (<>{BOOKMARK_DATA !== null && <>
+        
+        <View key={"BookmarkWidget"}
+            style={{
+                zIndex:10,
+                backgroundColor:Theme[themeTypeContext].background_color,
+                width:Dimensions.width*0.35,
+                minWidth:500,
+                
+                borderColor:Theme[themeTypeContext].border_color,
+                borderWidth:2,
+                borderRadius:8,
+                padding:12,
+                display:"flex",
+                justifyContent:"center",
+                
+                flexDirection:"column",
+                gap:12,
+            }}
+            from={{
+                opacity: 0,
+                scale: 0.9,
+            }}
+            animate={{
+                opacity: 1,
+                scale: 1,
+            }}
+            exit={{
+                opacity: 0,
+                scale: 0.5,
+            }}
+            transition={{
+                type: 'timing',
+                duration: 500,
+            }}
+            exitTransition={{
+                type: 'timing',
+                duration: 250,
+            }}
+        >
+            
+            <>{!manageBookmark.state && !createTag.state && !removeTag.state &&
+                <>
+                    <View
+                        style={{
+                            width:"100%",
+                            height:"auto",
+                            display:"flex",
+                            flexDirection:"row",
+                            alignItems:"flex-end",
+                            justifyContent:"space-between",
+                            gap:8,
+                        }}
+                    >
+                        <View style={{flex:1}}>
+                            <Dropdown
+                                theme_type={themeTypeContext}
+                                Dimensions={Dimensions}
+
+                                label='Add to bookmark' 
+                                data={BOOKMARK_DATA}
+                                value={bookmark}
+                                onChange={(async (item:any) => {
+                                    setBookmark(item.value)
+                                })}
+                            />
+                        </View>
+                        <>{bookmark &&
+                            <TouchableRipple
+                                rippleColor={Theme[themeTypeContext].ripple_color_outlined}
+                                style={{
+                                    padding:5,
+                                    borderRadius:5,
+                                    borderWidth:0,
+                                    backgroundColor: "transparent",
+                                }}
+                                onPress={(async ()=>{
+                                    const stored_comic = await ComicStorage.getByID(SOURCE,CONTENT.id)
+                                    if (stored_comic) setRemoveTag({...removeTag,state:true})
+                                    else setBookmark("")
+                                })}
+                            >
+                                <Icon source={"tag-remove-outline"} size={((Dimensions.width+Dimensions.height)/2)*0.035} color={"red"}/>
+                            </TouchableRipple>
+                        }</>
+                    </View>
+
+
+                    <View 
+                        style={{
+                            display:"flex",
+                            flexDirection:"row",
+                            width:"100%",
+                            justifyContent:"space-around",
+                            alignItems:"center",
+                        }}
+                    >  
+                        <Button mode='contained' 
+                            labelStyle={{
+                                color:Theme[themeTypeContext].text_color,
+                                fontFamily:"roboto-medium",
+                                fontSize:(Dimensions.width+Dimensions.height)/2*0.02,
+                                paddingVertical:4,
+                            }} 
+                            style={{backgroundColor:"blue",borderRadius:5}} 
+                            onPress={(()=>{
+                                setManageBookmark({...manageBookmark,state:true})
+                            })}
+                        >Manage Bookmark</Button>
+                        <Button mode='outlined' 
+                            labelStyle={{
+                                color:Theme[themeTypeContext].text_color,
+                                fontFamily:"roboto-medium",
+                                fontSize:(Dimensions.width+Dimensions.height)/2*0.02,
+                                
+
+                            }} 
+                            style={{
+                                
+                                borderRadius:5,
+                                borderWidth:2,
+                                borderColor:Theme[themeTypeContext].border_color
+                            }} 
+                            onPress={(async ()=>{
+                                if (defaultTag !== bookmark){
+                                    const stored_comic = await ComicStorage.getByID(SOURCE,CONTENT.id)
+                                    if (stored_comic) await ComicStorage.replaceTag(SOURCE, CONTENT.id, bookmark)
+                                    else {
+                                        const cover_result:any = await store_comic_cover(setShowCloudflareTurnstileContext,signal,SOURCE,ID,CONTENT)
+                                        
+                                        await ComicStorage.store(SOURCE,CONTENT.id, bookmark, {
+                                            cover:cover_result,
+                                            title:CONTENT.title,
+                                            author:CONTENT.author,
+                                            category:CONTENT.category,
+                                            status:CONTENT.status,
+                                            synopsis:CONTENT.synopsis,
+                                            updated:CONTENT.updated,
+                                        })
+                                    }
+                                    onRefresh()
+                                }
+                                setWidgetContext({state:false,component:<></>})
+                                
+                            })}
+                        >Done</Button>
+                    </View>
+                </>
+            }</>
+
+            <>{manageBookmark.state && !createTag.state && !removeTag.state && <>
+                <View
+                    
+                    style={{
+                        display:"flex",
+                        flexDirection:"column",
+                        gap:18,
+                    }}
+                >
+                    <>{BOOKMARK_DATA.length
+                        ? <>
+                            <View 
+                                style={{flex:1}}
+                            >
+                                <TextInput mode="outlined" label="Search" textColor={Theme[themeTypeContext].text_color} 
+                                    placeholder={""}
+                                    style={{
+                                        
+                                        backgroundColor:Theme[themeTypeContext].background_color,
+                                        borderColor:Theme[themeTypeContext].border_color,
+                                        
+                                    }}
+                                    outlineColor={Theme[themeTypeContext].text_input_border_color}
+                                    value={searchTag}
+                                    onChange={(event)=>{
+                                        setSearchTag(event.nativeEvent.text)
+                                    }}
+                                />
+                            </View>
+                            <View
+                                style={{
+                                    maxHeight:Dimensions.height*0.7
+                                }}
+                            >
+                                <ScrollView
+                                    contentContainerStyle={{
+                                        display:"flex",
+                                        flexDirection:"column",
+                                        justifyContent:"space-around",
+                                        gap:8,
+                                        
+                                        height:"auto",
+                                        paddingVertical:12,
+                                        paddingHorizontal:8,
+                                    }}
+                                    style={{
+                                        
+                                    }}
+                                >
+                                    <>{BOOKMARK_DATA.map((item:any) => <Fragment key={item.value}>
+                                        <RenderTag item={item}/>
+                                        <View style={{width:"100%",height:2,backgroundColor:Theme[themeTypeContext].border_color}}/>
+                                    </Fragment>)}</>
+                                </ScrollView>
+                            </View>
+                        </>
+                        : <>
+                            <Text style={{
+                                width:"100%",
+                                textAlign:"center",
+                                color:Theme[themeTypeContext].text_color,
+                                fontSize:(Dimensions.width+Dimensions.height)/2*0.045,
+                                fontFamily:"roboto-bold",
+                            }}>No bookmark found</Text>
+                        </>
+                        
+                    }</>
+
+                    <View 
+                        style={{
+                            display:"flex",
+                            flexDirection:"row",
+                            width:"100%",
+                            justifyContent:"space-around",
+                            alignItems:"center",
+                        }}
+                    >  
+                        <Button mode='contained' 
+                            labelStyle={{
+                                color:Theme[themeTypeContext].text_color,
+                                fontFamily:"roboto-medium",
+                                fontSize:(Dimensions.width+Dimensions.height)/2*0.02
+                            }} 
+                            style={{backgroundColor:"green",borderRadius:5}} 
+                            onPress={(()=>{
+                                setCreateTag({state:true,title:""})
+                                setShowMenuOption({...showMenuOption,state:false,id:""})
+                            })}
+                        >+ Create Bookmark</Button>
+                        <Button mode='outlined' 
+                            labelStyle={{
+                                color:Theme[themeTypeContext].text_color,
+                                fontFamily:"roboto-medium",
+                                fontSize:(Dimensions.width+Dimensions.height)/2*0.02,
+                                
+
+                            }} 
+                            style={{
+                                
+                                borderRadius:5,
+                                borderWidth:2,
+                                borderColor:Theme[themeTypeContext].border_color
+                            }} 
+                            onPress={(async ()=>{
+                                setManageBookmark({...manageBookmark,state:false,edit:"",delete:""})
+                                setShowMenuOption({...showMenuOption,state:false,id:""})
+                            })}
+                        >Back</Button>
+                    </View>
+                </View>
+            </>}</>
+            
+            <>{createTag.state &&
+                    <>
+                    <View 
+                        style={{
+                            height:"auto",
+                            display:"flex",
+                            flexDirection:"column",
+                            gap:12,
+                        }}
+                    >
+                        <TextInput mode="outlined" label="Create Bookmark"  textColor={Theme[themeTypeContext].text_color} maxLength={72}
+                            placeholder="Bookmark Tag"
+                            
+                            right={<TextInput.Affix text={`| Max: 72`} />}
+                            style={{
+                                
+                                backgroundColor:Theme[themeTypeContext].background_color,
+                                borderColor:Theme[themeTypeContext].border_color,
+                                
+                            }}
+                            outlineColor={Theme[themeTypeContext].text_input_border_color}
+                            value={createTag.title}
+                            onChange={(event)=>{
+                                setCreateTag({...createTag,title:event.nativeEvent.text})
+                            }}
+                        />
+                    </View>
+                    <View 
+                        style={{
+                            display:"flex",
+                            flexDirection:"row",
+                            width:"100%",
+                            justifyContent:"space-around",
+                            alignItems:"center",
+                        }}
+                    >   
+                        <Button mode='outlined' 
+                            labelStyle={{
+                                color:Theme[themeTypeContext].text_color,
+                                fontFamily:"roboto-medium",
+                                fontSize:(Dimensions.width+Dimensions.height)/2*0.02,
+                                
+
+                            }} 
+                            style={{
+                                
+                                borderRadius:5,
+                                borderWidth:2,
+                                borderColor:Theme[themeTypeContext].border_color
+                            }} 
+                            onPress={(()=>{
+                                
+                                setCreateTag({...createTag,state:false})
+                                
+                            })}
+                        >Cancel</Button>
+                        <Button mode='contained' 
+                            labelStyle={{
+                                color:Theme[themeTypeContext].text_color,
+                                fontFamily:"roboto-medium",
+                                fontSize:(Dimensions.width+Dimensions.height)/2*0.02
+                            }} 
+                            style={{backgroundColor:"green",borderRadius:5}} 
+                            onPress={(async()=>{
+                                
+                                const title = createTag.title
+                                if (!title) return
+
+                                const stored_bookmark_data = await Storage.get("bookmark") || []
+                                if (stored_bookmark_data.includes(title)){
+                                    Toast.show({
+                                        type: 'error',
+                                        text1: '🔖 Duplicate Bookmark',
+                                        text2: `Tag "${title}" already existed in your bookmark.`,
+                                        
+                                        position: "bottom",
+                                        visibilityTime: 5000,
+                                        text1Style:{
+                                            fontFamily:"roboto-bold",
+                                            fontSize:((Dimensions.width+Dimensions.height)/2)*0.025
+                                        },
+                                        text2Style:{
+                                            fontFamily:"roboto-medium",
+                                            fontSize:((Dimensions.width+Dimensions.height)/2)*0.0185,
+                                            
+                                        },
+                                    });
+                                }else{
+                                    await Storage.store("bookmark", [...stored_bookmark_data,title].sort())
+                                    SET_BOOKMARK_DATA([...BOOKMARK_DATA,
+                                        {label:title,value:title}
+                                    ].sort())
+                                    setCreateTag({state:false,title:""})
+                                    Toast.show({
+                                        type: 'info',
+                                        text1: '🔖 Create Bookmark',
+                                        text2: `Tag "${title}" added to your bookmark.`,
+                                        
+                                        position: "bottom",
+                                        visibilityTime: 3000,
+                                        text1Style:{
+                                            fontFamily:"roboto-bold",
+                                            fontSize:((Dimensions.width+Dimensions.height)/2)*0.025
+                                        },
+                                        text2Style:{
+                                            fontFamily:"roboto-medium",
+                                            fontSize:((Dimensions.width+Dimensions.height)/2)*0.0185,
+                                            
+                                        },
+                                    });
+                                }
+                            })}
+                        >Add</Button>
+                    </View>
+                </>
+            }</>
+            <>{removeTag.state &&
+                <>
+                    <View 
+                        style={{
+                            height:"auto",
+                            display:"flex",
+                            flexDirection:"column",
+                            gap:12,
+                        }}
+                    >
+                        <Text
+                            style={{
+                                color:Theme[themeTypeContext].text_color,
+                                fontFamily:"roboto-bold",
+                                fontSize:(Dimensions.width+Dimensions.height)/2*0.03,
+                                textAlign:"center",
+                            }}
+                        >Are you sure you want to remove this comic from bookmark?</Text>
+
+                        <Text
+                            style={{
+                                color:Theme[themeTypeContext].text_color,
+                                fontFamily:"roboto-medium",
+                                fontSize:(Dimensions.width+Dimensions.height)/2*0.025,
+                                textAlign:"center",
+                            }}
+                        >This will remove all local saved info and chapters.</Text>
+                    </View>
+
+                    <View 
+                        style={{
+                            display:"flex",
+                            flexDirection:"row",
+                            width:"100%",
+                            justifyContent:"space-around",
+                            alignItems:"center",
+                        }}
+                    >  
+                        <>{removeTag.removing 
+                            ? <ActivityIndicator animating={true}/>
+                            :<>
+                        
+                                <Button mode='outlined' disabled={removeTag.removing}
+                                    labelStyle={{
+                                        color:Theme[themeTypeContext].text_color,
+                                        fontFamily:"roboto-medium",
+                                        fontSize:(Dimensions.width+Dimensions.height)/2*0.02,
+                                        
+
+                                    }} 
+                                    style={{
+                                        
+                                        borderRadius:5,
+                                        borderWidth:2,
+                                        borderColor:Theme[themeTypeContext].border_color
+                                    }} 
+                                    onPress={(()=>{
+                                        setRemoveTag({...removeTag,state:false})
+                                    })}
+                                >No</Button>
+                                <Button mode='contained' disabled={removeTag.removing}
+                                    labelStyle={{
+                                        color:Theme[themeTypeContext].text_color,
+                                        fontFamily:"roboto-medium",
+                                        fontSize:(Dimensions.width+Dimensions.height)/2*0.02
+                                    }} 
+                                    style={{backgroundColor:"red",borderRadius:5}} 
+                                    onPress={(async ()=>{
+                                        setRemoveTag({...removeTag,removing:false})
+                                        if (Platform.OS !== "web"){
+                                            const comic_dir = FileSystem.documentDirectory + "ComicMTL/" + `${SOURCE}/` + `${ID}/`
+                                            await FileSystem.deleteAsync(comic_dir, { idempotent: true })
+                                        }
+                                        
+                                        await ChapterStorage.drop(`${SOURCE}-${CONTENT.id}`)
+                                        await ComicStorage.removeByID(SOURCE,CONTENT.id)
+                                        
+                                        onRefresh()
+                                        setWidgetContext({state:false,component:<></>})
+                                    })}
+                                >Yes</Button>
+                            </>
+                        }</>
+                        
+                    </View>
+                </>
+            }</>
+
+        </View>
+        <>{showMenuOption.state && manageBookmark.state &&
+            <View
+                style={{
+                    display:"flex",
+                    position:"absolute",
+                    zIndex:11,
+                    justifyContent:"space-around",
+                    flexDirection:"column",
+                    
+                    backgroundColor:Theme[themeTypeContext].border_color,
+                    top:showMenuOption.positions[0],
+                    bottom:showMenuOption.positions[1],
+                    left:showMenuOption.positions[2],
+                    right:showMenuOption.positions[3],
+                    
+                    width:(Dimensions.width+Dimensions.height)/2*0.2,
+                    height:(Dimensions.width+Dimensions.height)/2*0.1,
+                    
+                    borderRadius:5,
+                    borderWidth:2,
+                    borderColor:Theme[themeTypeContext].background_color
+                }}
+            >
+                <TouchableRipple
+                    
+                    rippleColor={Theme[themeTypeContext].ripple_color_outlined}
+                    style={{
+                        
+                        borderWidth:0,
+                        backgroundColor: "transparent",
+                        padding:5,
+                        width:"100%",
+                        
+                    }}
+
+                    onPress={(event)=>{
+                        setManageBookmark({...manageBookmark,edit:showMenuOption.id})
+                        setShowMenuOption({...showMenuOption,state:false})
+                    }}
+                >
+                    <View
+                        style={{
+                            display:"flex",
+                            flexDirection:"row",
+                            justifyContent:"center",
+                            alignItems:"center",
+                            paddingHorizontal:18,
+                            
+                        }}
+                    >
+                        <Icon source={"pencil"} size={((Dimensions.width+Dimensions.height)/2)*0.025} color={"blue"}/>
+                        <View>
+                            <Text selectable={false}
+                                style={{
+                                    textAlign:"center",
+                                    color:"blue",
+                                    fontFamily:"roboto-medium",
+                                    fontSize:(Dimensions.width+Dimensions.height)/2*0.02
+                                }}
+                            >Edit</Text>
+                        </View>
+                    </View>
+                </TouchableRipple>
+                <View style={{width:"100%",height:2,backgroundColor:Theme[themeTypeContext].background_color}}/>
+                <TouchableRipple
+                    
+                    rippleColor={Theme[themeTypeContext].ripple_color_outlined}
+                    style={{
+                        
+                        borderWidth:0,
+                        backgroundColor: "transparent",
+                        padding:5,
+                        width:"100%",
+                    }}
+
+                    onPress={(event)=>{
+                        setManageBookmark({...manageBookmark,edit:"",delete:showMenuOption.id})
+                        setShowMenuOption({...showMenuOption,state:false})
+                    }}
+                >
+                    <View
+                        style={{
+                            display:"flex",
+                            flexDirection:"row",
+                            justifyContent:"center",
+                            alignItems:"center",
+                            paddingHorizontal:18,
+                            
+                        }}
+                    >
+                        <Icon source={"trash-can"} size={((Dimensions.width+Dimensions.height)/2)*0.025} color={"red"}/>
+                        <View>
+                            <Text selectable={false}
+                                style={{
+                                    textAlign:"center",
+                                    color:"red",
+                                    fontFamily:"roboto-medium",
+                                    fontSize:(Dimensions.width+Dimensions.height)/2*0.02
+                                }}
+                            >Delete</Text>
+                        </View>
+                    </View>
+                </TouchableRipple>
+
+            </View>
+        
+        }</>
+        <>{manageBookmark.delete && (
+
+        
+            <View
+                style={{
+                    top:0,
+                    left:0,
+                    position:"absolute",
+                    width:Dimensions.width,
+                    height:Dimensions.height,
+                    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                    zIndex:11,
+                    display:"flex",
+                    justifyContent:"center",
+                    alignItems:"center",
+                }}
+            >
+                <View
+                    style={{
+                        backgroundColor:Theme[themeTypeContext].background_color,
+                        width:Dimensions.width*0.35,
+                        minWidth:500,
+                        height:"auto",
+                        
+                        borderColor:Theme[themeTypeContext].border_color,
+                        borderWidth:2,
+                        borderRadius:8,
+                        padding:12,
+                        display:"flex",
+                        justifyContent:"center",
+                        
+                        flexDirection:"column",
+                        gap:18,
+                    }}
+                >
+                    <View
+                        style={{
+                            borderBottomWidth:2,
+                            borderColor:Theme[themeTypeContext].border_color,
+                            padding:8,
+                            width:"100%",
+                        }}
+                    >
+                        <Text
+                            numberOfLines={1}
+                            style={{
+                                color:"red",
+                                fontFamily:"roboto-bold",
+                                fontSize:(Dimensions.width+Dimensions.height)/2*0.03,
+                                textAlign:"center",
+                            }}
+                        >Delete Tag: "{manageBookmark.delete}"</Text>
+                    </View>
+                    <View
+                        style={{
+                            width:"100%",
+                            display:"flex",
+                            flexDirection:"column",
+                            gap:12,
+                        }}
+                    >
+                        <View style={{flex:1}}>
+                            <Dropdown
+                                theme_type={themeTypeContext}
+                                Dimensions={Dimensions}
+
+                                label='Migrate comics to tag' 
+                                data={MIGRATE_BOOKMARK_DATA.filter((item:any) => item.value !== manageBookmark.delete)}
+                                value={migrateTag}
+                                onChange={(async (item:any) => {
+                                    setMigrateTag(item.value)
+                                })}
+                            />
+                        </View>
+                        <>{!migrateTag && (
+                            <Text
+                            style={{
+                                color:Theme[themeTypeContext].text_color,
+                                fontFamily:"roboto-bold",
+                                fontSize:(Dimensions.width+Dimensions.height)/2*0.02,
+                                textAlign:"center",
+                            }}
+                            >Setting migration to None will remove all comics and chapters for this bookmark tag.</Text>
+                        )}</>
+                        <View
+                            style={{
+                                display:"flex",
+                                flexDirection:"row",
+                                width:"100%",
+                                justifyContent:"space-around",
+                                alignItems:"center",
+                            }}
+                        >
+                            <>{migrateTag 
+                            
+                                ? <TouchableRipple
+                                    
+                                    rippleColor={Theme[themeTypeContext].ripple_color_outlined}
+                                    style={{
+                                        
+                                        borderWidth:0,
+                                        backgroundColor: "blue",
+                                        padding:5,
+                                        borderRadius:8,
+                                        paddingHorizontal:12,
+                                        paddingVertical:8,
+
+                                        
+                                    }}
+
+                                    onPress={async (event)=>{
+                                        const stored_bookmark = await Storage.get("bookmark")
+                                        const index = stored_bookmark.findIndex((item:any) => item === manageBookmark.delete)
+                                        if (index === -1) return
+
+                                        const stored_comics = await ComicStorage.getByTag(manageBookmark.delete)
+                                        for (const comic of stored_comics) {
+                                            const source = comic.source;
+                                            const comic_id = comic.id
+                                            await ComicStorage.replaceTag(source,comic_id,migrateTag)
+                                            
+                                        }
+
+                                        stored_bookmark.splice(index, 1);
+                                        await Storage.store("bookmark",stored_bookmark);
+
+                                        if (defaultTag === manageBookmark.delete) {
+                                            setWidgetContext({state:false,component:<></>});
+                                            onRefresh();
+                                        }else {
+                                            const index_2 = BOOKMARK_DATA.findIndex((item:any) => item.value === manageBookmark.delete);
+                                            if (index_2 !== -1){
+                                                BOOKMARK_DATA.splice(index_2, 1);
+                                            }
+                                            SET_BOOKMARK_DATA(BOOKMARK_DATA)
+                                            setManageBookmark({...manageBookmark,edit:"",delete:""})
+                                            setShowMenuOption({...showMenuOption,state:false,id:""})
+                                            setMigrateTag("")
+                                        }
+                                    
+                                    }}
+                                >
+                                    
+                                    <Text selectable={false}
+                                        style={{
+                                            textAlign:"center",
+                                            color:Theme[themeTypeContext].text_color,
+                                            fontFamily:"roboto-medium",
+                                            fontSize:(Dimensions.width+Dimensions.height)/2*0.02
+                                        }}
+                                    >Migrate</Text>
+                                        
+                                </TouchableRipple>
+                                : <TouchableRipple
+                                    
+                                rippleColor={Theme[themeTypeContext].ripple_color_outlined}
+                                style={{
+                                    
+                                    borderWidth:0,
+                                    backgroundColor: "red",
+                                    padding:5,
+                                    borderRadius:8,
+                                    paddingHorizontal:12,
+                                    paddingVertical:8,
+
+                                    
+                                }}
+
+                                onPress={async (event)=>{
+                                    const stored_bookmark = await Storage.get("bookmark");
+                                    const index = stored_bookmark.findIndex((item:any) => item === manageBookmark.delete)
+                                    if (index === -1) return
+                                    await ComicStorage.removeByTag(manageBookmark.delete);
+                                    stored_bookmark.splice(index, 1);
+                                    await Storage.store("bookmark",stored_bookmark);
+
+                                    if (defaultTag === manageBookmark.delete) {
+                                        setWidgetContext({state:false,component:<></>});
+                                        onRefresh();
+                                    }else {
+                                        const index_2 = BOOKMARK_DATA.findIndex((item:any) => item.value === manageBookmark.delete);
+                                        if (index_2 !== -1){
+                                            BOOKMARK_DATA.splice(index_2, 1);
+                                        }
+                                        SET_BOOKMARK_DATA(BOOKMARK_DATA)
+                                        setManageBookmark({...manageBookmark,edit:"",delete:""})
+                                        setShowMenuOption({...showMenuOption,state:false,id:""})
+                                        setMigrateTag("")
+                                    }
+                                    
+                                }}
+                            >
+                                
+                                <Text selectable={false}
+                                    style={{
+                                        textAlign:"center",
+                                        color:Theme[themeTypeContext].text_color,
+                                        fontFamily:"roboto-medium",
+                                        fontSize:(Dimensions.width+Dimensions.height)/2*0.02
+                                    }}
+                                >Delete</Text>
+                                    
+                            </TouchableRipple>
+                            }</>
+                            <TouchableRipple
+                                
+                                rippleColor={Theme[themeTypeContext].ripple_color_outlined}
+                                style={{
+                                    
+                                    borderWidth:2,
+                                    borderColor:Theme[themeTypeContext].border_color,
+                                    backgroundColor: "transparent",
+                                    padding:5,
+                                    borderRadius:8,
+                                    paddingHorizontal:12,
+                                    paddingVertical:8,
+
+                                    
+                                }}
+
+                                onPress={(event)=>{
+                                    setShowMenuOption({...showMenuOption,state:false,id:""})
+                                    setManageBookmark({...manageBookmark,edit:"",delete:""})
+                                }}
+                            >
+                                
+                                <Text selectable={false}
+                                    style={{
+                                        textAlign:"center",
+                                        color:Theme[themeTypeContext].text_color,
+                                        fontFamily:"roboto-medium",
+                                        fontSize:(Dimensions.width+Dimensions.height)/2*0.02
+                                    }}
+                                >Cancel</Text>
+                                    
+                            </TouchableRipple>
+                        </View>
+
+                    </View>
+                </View>
+
+            </View>
+        )}</>
+
+    </>}</>) 
+}
+
+export default BookmarkWidget;

frontend/app/view/componenets/widgets/page_navigation.tsx

@@ -0,0 +1,159 @@
+
+import React, { useEffect, useState, useCallback, useContext, useRef, Fragment } from 'react';
+import { Platform, useWindowDimensions, ScrollView } from 'react-native';
+
+import { Icon, MD3Colors, Button, Text, TextInput, TouchableRipple, ActivityIndicator, Menu, Divider, PaperProvider, Portal } from 'react-native-paper';
+import { View, AnimatePresence } from 'moti';
+import Toast from 'react-native-toast-message';
+import * as FileSystem from 'expo-file-system';
+import axios from 'axios';
+
+
+import Theme from '@/constants/theme';
+import Dropdown from '@/components/dropdown';
+import { CONTEXT } from '@/constants/module/context';
+import { store_comic_cover } from '../../modules/content';
+import Storage from '@/constants/module/storages/storage';
+import ComicStorage from '@/constants/module/storages/comic_storage';
+import ImageCacheStorage from '@/constants/module/storages/image_cache_storage';
+import ChapterStorage from '@/constants/module/storages/chapter_storage';
+
+
+
+const PageNavigationWidget = ({MAX_OFFSET,setPage,CONTENT}:any) =>{
+    const Dimensions = useWindowDimensions();
+
+    const {themeTypeContext, setThemeTypeContext}:any = useContext(CONTEXT)
+    const {widgetContext, setWidgetContext}:any = useContext(CONTEXT)
+
+    const [goToPage, setGoToPage] = useState("");
+    const [_feedBack, _setFeedBack] = useState("");
+    return (<View 
+        style={{
+            backgroundColor:Theme[themeTypeContext].background_color,
+            maxWidth:500,
+            width:"100%",
+            
+            borderColor:Theme[themeTypeContext].border_color,
+            borderWidth:2,
+            borderRadius:8,
+            padding:12,
+            display:"flex",
+            justifyContent:"center",
+            
+            flexDirection:"column",
+            gap:12,
+        }}
+        from={{
+            opacity: 0,
+            scale: 0.9,
+        }}
+        animate={{
+            opacity: 1,
+            scale: 1,
+        }}
+        exit={{
+            opacity: 0,
+            scale: 0.5,
+        }}
+        transition={{
+            type: 'timing',
+            duration: 500,
+        }}
+        exitTransition={{
+            type: 'timing',
+            duration: 250,
+        }}
+    >
+        <View style={{height:"auto"}}>
+            <TextInput mode="outlined" label="Go to page"  textColor={Theme[themeTypeContext].text_color} maxLength={1000000000}
+                placeholder="Go to page"
+                right={<TextInput.Affix text={`/${Math.ceil(CONTENT.chapters.length/MAX_OFFSET)}`} />}
+                style={{
+                    
+                    backgroundColor:Theme[themeTypeContext].background_color,
+                    borderColor:Theme[themeTypeContext].border_color,
+                    
+                }}
+                outlineColor={Theme[themeTypeContext].text_input_border_color}
+                value={goToPage}
+                onChange={(event)=>{
+                    
+                    const value = event.nativeEvent.text
+                    
+                    const isInt = /^-?\d+$/.test(value);
+                    if (isInt || value === "") {
+                        if (parseInt(value) > Math.ceil(CONTENT.chapters.length/MAX_OFFSET)){
+                            _setFeedBack("Page is out of index.")
+                        }else{
+                            _setFeedBack("")
+                            setGoToPage(value)
+                        }
+                        
+                    }
+                    else _setFeedBack("Input is not a valid number.")
+                    
+                }}
+            />
+            
+        </View>
+        {_feedBack 
+            ? <Text 
+                style={{
+                    color:Theme[themeTypeContext].text_color,
+                    fontFamily:"roboto-medium",
+                    fontSize:(Dimensions.width+Dimensions.height)/2*0.02,
+                    textAlign:"center",
+                }}
+                
+            >{_feedBack}</Text>
+            : <></>
+        }
+        <View 
+            style={{
+                display:"flex",
+                flexDirection:"row",
+                width:"100%",
+                justifyContent:"space-around",
+                alignItems:"center",
+            }}
+        >
+            <Button mode='contained' 
+                labelStyle={{
+                    color:Theme[themeTypeContext].text_color,
+                    fontFamily:"roboto-medium",
+                    fontSize:(Dimensions.width+Dimensions.height)/2*0.02
+                }} 
+                style={{backgroundColor:"red",borderRadius:5}} 
+                onPress={(()=>{
+                    
+                    setWidgetContext({state:false,component:<></>})
+                    
+                })}
+            >Cancel</Button>
+            <Button mode='contained' 
+            labelStyle={{
+                color:Theme[themeTypeContext].text_color,
+                fontFamily:"roboto-medium",
+                fontSize:(Dimensions.width+Dimensions.height)/2*0.02
+            }} 
+            style={{backgroundColor:"green",borderRadius:5}} 
+            onPress={(()=>{
+                const isInt = /^-?\d+$/.test(goToPage);
+                if (isInt) {
+                    if (parseInt(goToPage) > Math.ceil(CONTENT.chapters.length/MAX_OFFSET) || !parseInt(goToPage)){
+                        _setFeedBack("Page is out of index.")
+                    }else{
+                        setPage(parseInt(goToPage))
+                        setWidgetContext({state:false,component:<></>})
+                    }
+                    
+                }else _setFeedBack("Input is not a valid number.")
+            })}
+        >Go</Button>
+        </View>
+        
+    </View>)
+}
+
+export default PageNavigationWidget;

frontend/app/view/componenets/{widgets.tsx → widgets/request_chapter.tsx}

@@ -1,7 +1,8 @@
-import React, { useEffect, useState, useCallback, useContext, useRef } from 'react';
-import { Platform, useWindowDimensions } from 'react-native';
 
-import { Icon, MD3Colors, Button, Text, TextInput, TouchableRipple, ActivityIndicator } from 'react-native-paper';
+import React, { useEffect, useState, useCallback, useContext, useRef, Fragment } from 'react';
+import { Platform, useWindowDimensions, ScrollView } from 'react-native';
+
+import { Icon, MD3Colors, Button, Text, TextInput, TouchableRipple, ActivityIndicator, Menu, Divider, PaperProvider, Portal } from 'react-native-paper';
 import { View, AnimatePresence } from 'moti';
 import Toast from 'react-native-toast-message';
 import * as FileSystem from 'expo-file-system';
@@ -11,149 +12,13 @@ import axios from 'axios';
 import Theme from '@/constants/theme';
 import Dropdown from '@/components/dropdown';
 import { CONTEXT } from '@/constants/module/context';
-import { store_comic_cover } from '../modules/content';
+import { store_comic_cover } from '../../modules/content';
 import Storage from '@/constants/module/storages/storage';
 import ComicStorage from '@/constants/module/storages/comic_storage';
 import ImageCacheStorage from '@/constants/module/storages/image_cache_storage';
 import ChapterStorage from '@/constants/module/storages/chapter_storage';
 
 
-export const PageNavigationWidget = ({MAX_OFFSET,setPage,CONTENT}:any) =>{
-    const Dimensions = useWindowDimensions();
-
-    const {themeTypeContext, setThemeTypeContext}:any = useContext(CONTEXT)
-    const {widgetContext, setWidgetContext}:any = useContext(CONTEXT)
-
-    const [goToPage, setGoToPage] = useState("");
-    const [_feedBack, _setFeedBack] = useState("");
-    return (<View 
-        style={{
-            backgroundColor:Theme[themeTypeContext].background_color,
-            maxWidth:500,
-            width:"100%",
-            
-            borderColor:Theme[themeTypeContext].border_color,
-            borderWidth:2,
-            borderRadius:8,
-            padding:12,
-            display:"flex",
-            justifyContent:"center",
-            
-            flexDirection:"column",
-            gap:12,
-        }}
-        from={{
-            opacity: 0,
-            scale: 0.9,
-        }}
-        animate={{
-            opacity: 1,
-            scale: 1,
-        }}
-        exit={{
-            opacity: 0,
-            scale: 0.5,
-        }}
-        transition={{
-            type: 'timing',
-            duration: 500,
-        }}
-        exitTransition={{
-            type: 'timing',
-            duration: 250,
-        }}
-    >
-        <View style={{height:"auto"}}>
-            <TextInput mode="outlined" label="Go to page"  textColor={Theme[themeTypeContext].text_color} maxLength={1000000000}
-                placeholder="Go to page"
-                right={<TextInput.Affix text={`/${Math.ceil(CONTENT.chapters.length/MAX_OFFSET)}`} />}
-                style={{
-                    
-                    backgroundColor:Theme[themeTypeContext].background_color,
-                    borderColor:Theme[themeTypeContext].border_color,
-                    
-                }}
-                outlineColor={Theme[themeTypeContext].text_input_border_color}
-                value={goToPage}
-                onChange={(event)=>{
-                    
-                    const value = event.nativeEvent.text
-                    
-                    const isInt = /^-?\d+$/.test(value);
-                    if (isInt || value === "") {
-                        if (parseInt(value) > Math.ceil(CONTENT.chapters.length/MAX_OFFSET)){
-                            _setFeedBack("Page is out of index.")
-                        }else{
-                            _setFeedBack("")
-                            setGoToPage(value)
-                        }
-                        
-                    }
-                    else _setFeedBack("Input is not a valid number.")
-                    
-                }}
-            />
-            
-        </View>
-        {_feedBack 
-            ? <Text 
-                style={{
-                    color:Theme[themeTypeContext].text_color,
-                    fontFamily:"roboto-medium",
-                    fontSize:(Dimensions.width+Dimensions.height)/2*0.02,
-                    textAlign:"center",
-                }}
-                
-            >{_feedBack}</Text>
-            : <></>
-        }
-        <View 
-            style={{
-                display:"flex",
-                flexDirection:"row",
-                width:"100%",
-                justifyContent:"space-around",
-                alignItems:"center",
-            }}
-        >
-            <Button mode='contained' 
-                labelStyle={{
-                    color:Theme[themeTypeContext].text_color,
-                    fontFamily:"roboto-medium",
-                    fontSize:(Dimensions.width+Dimensions.height)/2*0.02
-                }} 
-                style={{backgroundColor:"red",borderRadius:5}} 
-                onPress={(()=>{
-                    
-                    setWidgetContext({state:false,component:<></>})
-                    
-                })}
-            >Cancel</Button>
-            <Button mode='contained' 
-            labelStyle={{
-                color:Theme[themeTypeContext].text_color,
-                fontFamily:"roboto-medium",
-                fontSize:(Dimensions.width+Dimensions.height)/2*0.02
-            }} 
-            style={{backgroundColor:"green",borderRadius:5}} 
-            onPress={(()=>{
-                const isInt = /^-?\d+$/.test(goToPage);
-                if (isInt) {
-                    if (parseInt(goToPage) > Math.ceil(CONTENT.chapters.length/MAX_OFFSET) || !parseInt(goToPage)){
-                        _setFeedBack("Page is out of index.")
-                    }else{
-                        setPage(parseInt(goToPage))
-                        setWidgetContext({state:false,component:<></>})
-                    }
-                    
-                }else _setFeedBack("Input is not a valid number.")
-            })}
-        >Go</Button>
-        </View>
-        
-    </View>)
-}
-
 interface RequestChapterWidgetProps {
     SOURCE: string | string[];
     ID: string | string[];
@@ -165,7 +30,7 @@ interface RequestChapterWidgetProps {
     get_requested_info: any;
   }
 
-export const RequestChapterWidget: React.FC<RequestChapterWidgetProps> = ({
+const RequestChapterWidget: React.FC<RequestChapterWidgetProps> = ({
     SOURCE,
     ID,
     CHAPTER,
@@ -453,413 +318,4 @@ export const RequestChapterWidget: React.FC<RequestChapterWidgetProps> = ({
     </View>) 
 }
 
-interface BookmarkWidgetProps {
-    onRefresh: any;
-    SOURCE: string | string[];
-    ID: string | string[];
-    CONTENT: any;
-  }
-
-export const BookmarkWidget: React.FC<BookmarkWidgetProps> = ({
-    onRefresh,
-    SOURCE,
-    ID,
-    CONTENT
-}) => {
-    const Dimensions = useWindowDimensions();
-
-    const {themeTypeContext, setThemeTypeContext}:any = useContext(CONTEXT)
-    const {widgetContext, setWidgetContext}:any = useContext(CONTEXT)
-    const {showCloudflareTurnstileContext, setShowCloudflareTurnstileContext}:any = useContext(CONTEXT)
-    const {apiBaseContext, setApiBaseContext}:any = useContext(CONTEXT)
-
-    const [BOOKMARK_DATA, SET_BOOKMARK_DATA]: any = useState(null)
-
-    const [defaultBookmark, setDefaultBookmark]:any = useState("")
-    const [bookmark, setBookmark]:any = useState("")
-    const [createBookmark, setCreateBookmark]:any = useState({state:false,title:""})
-    const [removeBookmark, setRemoveBookmark]:any = useState({state:false, removing: false})
-
-    const controller = new AbortController();
-    const signal = controller.signal;
-
-
-    useEffect(()=>{
-        (async ()=>{
-            const stored_comic = await ComicStorage.getByID(SOURCE,CONTENT.id)
-            
-            if (stored_comic) {
-                setDefaultBookmark(stored_comic.tag)
-                setBookmark(stored_comic.tag)
-            }
-
-            const stored_bookmark_data = await Storage.get("bookmark") || []
-            if (stored_bookmark_data.length) {
-                const bookmark_data:Array<Object> = []
-                for (const item of stored_bookmark_data) {
-                    bookmark_data.push({
-                        label:item,
-                        value:item,
-                    })
-                }
-                
-                SET_BOOKMARK_DATA(bookmark_data.sort())
-            }else SET_BOOKMARK_DATA([])
-        })()
-        return () => controller.abort();
-    },[])
-
-    return (<>{BOOKMARK_DATA !== null && 
-        
-        <View key={"BookmarkWidget"}
-            style={{
-                backgroundColor:Theme[themeTypeContext].background_color,
-                maxWidth:500,
-                width:"100%",
-                
-                borderColor:Theme[themeTypeContext].border_color,
-                borderWidth:2,
-                borderRadius:8,
-                padding:12,
-                display:"flex",
-                justifyContent:"center",
-                
-                flexDirection:"column",
-                gap:12,
-            }}
-            from={{
-                opacity: 0,
-                scale: 0.9,
-            }}
-            animate={{
-                opacity: 1,
-                scale: 1,
-            }}
-            exit={{
-                opacity: 0,
-                scale: 0.5,
-            }}
-            transition={{
-                type: 'timing',
-                duration: 500,
-            }}
-            exitTransition={{
-                type: 'timing',
-                duration: 250,
-            }}
-        >
-            
-            <>{!createBookmark.state && !removeBookmark.state &&
-                <>
-                    <View
-                        style={{
-                            width:"100%",
-                            height:"auto",
-                            display:"flex",
-                            flexDirection:"row",
-                            alignItems:"flex-end",
-                            justifyContent:"space-between",
-                            gap:8,
-                        }}
-                    >
-                        <View style={{flex:1}}>
-                            <Dropdown
-                                theme_type={themeTypeContext}
-                                Dimensions={Dimensions}
-
-                                label='Add to bookmark' 
-                                data={BOOKMARK_DATA}
-                                value={bookmark}
-                                onChange={(async (item:any) => {
-                                    setBookmark(item.value)
-                                })}
-                            />
-                        </View>
-                        <>{bookmark &&
-                            <TouchableRipple
-                                rippleColor={Theme[themeTypeContext].ripple_color_outlined}
-                                style={{
-                                    padding:5,
-                                    borderRadius:5,
-                                    borderWidth:0,
-                                    backgroundColor: "transparent",
-                                }}
-                                onPress={(async ()=>{
-                                    const stored_comic = await ComicStorage.getByID(SOURCE,CONTENT.id)
-                                    if (stored_comic) setRemoveBookmark({...removeBookmark,state:true})
-                                    else setBookmark("")
-                                })}
-                            >
-                                <Icon source={"tag-remove-outline"} size={((Dimensions.width+Dimensions.height)/2)*0.035} color={"red"}/>
-                            </TouchableRipple>
-                        }</>
-                    </View>
-                    <View 
-                        style={{
-                            display:"flex",
-                            flexDirection:"row",
-                            width:"100%",
-                            justifyContent:"space-around",
-                            alignItems:"center",
-                        }}
-                    >  
-                        <Button mode='contained' 
-                    labelStyle={{
-                        color:Theme[themeTypeContext].text_color,
-                        fontFamily:"roboto-medium",
-                        fontSize:(Dimensions.width+Dimensions.height)/2*0.02
-                    }} 
-                    style={{backgroundColor:"blue",borderRadius:5}} 
-                    onPress={(()=>{
-                        setCreateBookmark({state:true,title:""})
-                    })}
-                        >+ Create Bookmark</Button>
-                        <Button mode='outlined' 
-                            labelStyle={{
-                                color:Theme[themeTypeContext].text_color,
-                                fontFamily:"roboto-medium",
-                                fontSize:(Dimensions.width+Dimensions.height)/2*0.02,
-                                
-
-                            }} 
-                            style={{
-                                
-                                borderRadius:5,
-                                borderWidth:2,
-                                borderColor:Theme[themeTypeContext].border_color
-                            }} 
-                            onPress={(async ()=>{
-                                if (defaultBookmark !== bookmark){
-                                    const stored_comic = await ComicStorage.getByID(SOURCE,CONTENT.id)
-                                    if (stored_comic) await ComicStorage.replaceTag(SOURCE, CONTENT.id, bookmark)
-                                    else {
-                                        const cover_result:any = await store_comic_cover(setShowCloudflareTurnstileContext,signal,SOURCE,ID,CONTENT)
-                                        
-                                        await ComicStorage.store(SOURCE,CONTENT.id, bookmark, {
-                                            cover:cover_result,
-                                            title:CONTENT.title,
-                                            author:CONTENT.author,
-                                            category:CONTENT.category,
-                                            status:CONTENT.status,
-                                            synopsis:CONTENT.synopsis,
-                                            updated:CONTENT.updated,
-                                        })
-                                    }
-                                    onRefresh()
-                                }
-                                setWidgetContext({state:false,component:<></>})
-                                
-                            })}
-                        >Done</Button>
-                    </View>
-                </>
-            }</>
-            
-            <>{createBookmark.state &&
-                    <>
-                    <View 
-                        style={{
-                            height:"auto",
-                            display:"flex",
-                            flexDirection:"column",
-                            gap:12,
-                        }}
-                    >
-                        <TextInput mode="outlined" label="Create Bookmark"  textColor={Theme[themeTypeContext].text_color} maxLength={72}
-                            placeholder="Bookmark Tag"
-                            
-                            right={<TextInput.Affix text={`| Max: 72`} />}
-                            style={{
-                                
-                                backgroundColor:Theme[themeTypeContext].background_color,
-                                borderColor:Theme[themeTypeContext].border_color,
-                                
-                            }}
-                            outlineColor={Theme[themeTypeContext].text_input_border_color}
-                            value={createBookmark.title}
-                            onChange={(event)=>{
-                                setCreateBookmark({...createBookmark,title:event.nativeEvent.text})
-                            }}
-                        />
-                    </View>
-                    <View 
-                        style={{
-                            display:"flex",
-                            flexDirection:"row",
-                            width:"100%",
-                            justifyContent:"space-around",
-                            alignItems:"center",
-                        }}
-                    >   
-                        <Button mode='outlined' 
-                            labelStyle={{
-                                color:Theme[themeTypeContext].text_color,
-                                fontFamily:"roboto-medium",
-                                fontSize:(Dimensions.width+Dimensions.height)/2*0.02,
-                                
-
-                            }} 
-                            style={{
-                                
-                                borderRadius:5,
-                                borderWidth:2,
-                                borderColor:Theme[themeTypeContext].border_color
-                            }} 
-                            onPress={(()=>{
-                                
-                                setCreateBookmark({...createBookmark,state:false})
-                                
-                            })}
-                        >Cancel</Button>
-                        <Button mode='contained' 
-                            labelStyle={{
-                                color:Theme[themeTypeContext].text_color,
-                                fontFamily:"roboto-medium",
-                                fontSize:(Dimensions.width+Dimensions.height)/2*0.02
-                            }} 
-                            style={{backgroundColor:"green",borderRadius:5}} 
-                            onPress={(async()=>{
-                                
-                                const title = createBookmark.title
-                                if (!title) return
-
-                                const stored_bookmark_data = await Storage.get("bookmark") || []
-                                if (stored_bookmark_data.includes(title)){
-                                    Toast.show({
-                                        type: 'error',
-                                        text1: '🔖 Duplicate Bookmark',
-                                        text2: `Tag "${title}" already existed in your bookmark.`,
-                                        
-                                        position: "bottom",
-                                        visibilityTime: 5000,
-                                        text1Style:{
-                                            fontFamily:"roboto-bold",
-                                            fontSize:((Dimensions.width+Dimensions.height)/2)*0.025
-                                        },
-                                        text2Style:{
-                                            fontFamily:"roboto-medium",
-                                            fontSize:((Dimensions.width+Dimensions.height)/2)*0.0185,
-                                            
-                                        },
-                                    });
-                                }else{
-                                    await Storage.store("bookmark", [...stored_bookmark_data,title].sort())
-                                    SET_BOOKMARK_DATA([...BOOKMARK_DATA,
-                                        {label:title,value:title}
-                                    ].sort())
-                                    setCreateBookmark({state:false,title:""})
-                                    Toast.show({
-                                        type: 'info',
-                                        text1: '🔖 Create Bookmark',
-                                        text2: `Tag "${title}" added to your bookmark.`,
-                                        
-                                        position: "bottom",
-                                        visibilityTime: 3000,
-                                        text1Style:{
-                                            fontFamily:"roboto-bold",
-                                            fontSize:((Dimensions.width+Dimensions.height)/2)*0.025
-                                        },
-                                        text2Style:{
-                                            fontFamily:"roboto-medium",
-                                            fontSize:((Dimensions.width+Dimensions.height)/2)*0.0185,
-                                            
-                                        },
-                                    });
-                                }
-                            })}
-                        >Add</Button>
-                    </View>
-                </>
-            }</>
-            <>{removeBookmark.state &&
-                <>
-                    <View 
-                        style={{
-                            height:"auto",
-                            display:"flex",
-                            flexDirection:"column",
-                            gap:12,
-                        }}
-                    >
-                        <Text
-                            style={{
-                                color:Theme[themeTypeContext].text_color,
-                                fontFamily:"roboto-bold",
-                                fontSize:(Dimensions.width+Dimensions.height)/2*0.03,
-                                textAlign:"center",
-                            }}
-                        >Are you sure you want to remove this comic from bookmark?</Text>
-
-                        <Text
-                            style={{
-                                color:Theme[themeTypeContext].text_color,
-                                fontFamily:"roboto-medium",
-                                fontSize:(Dimensions.width+Dimensions.height)/2*0.025,
-                                textAlign:"center",
-                            }}
-                        >This will remove all local saved info and chapters.</Text>
-                    </View>
-
-                    <View 
-                        style={{
-                            display:"flex",
-                            flexDirection:"row",
-                            width:"100%",
-                            justifyContent:"space-around",
-                            alignItems:"center",
-                        }}
-                    >  
-                        <>{removeBookmark.removing 
-                            ? <ActivityIndicator animating={true}/>
-                            :<>
-                        
-                                <Button mode='outlined' disabled={removeBookmark.removing}
-                                    labelStyle={{
-                                        color:Theme[themeTypeContext].text_color,
-                                        fontFamily:"roboto-medium",
-                                        fontSize:(Dimensions.width+Dimensions.height)/2*0.02,
-                                        
-
-                                    }} 
-                                    style={{
-                                        
-                                        borderRadius:5,
-                                        borderWidth:2,
-                                        borderColor:Theme[themeTypeContext].border_color
-                                    }} 
-                                    onPress={(()=>{
-                                        setRemoveBookmark({...removeBookmark,state:false})
-                                    })}
-                                >No</Button>
-                                <Button mode='contained' disabled={removeBookmark.removing}
-                                    labelStyle={{
-                                        color:Theme[themeTypeContext].text_color,
-                                        fontFamily:"roboto-medium",
-                                        fontSize:(Dimensions.width+Dimensions.height)/2*0.02
-                                    }} 
-                                    style={{backgroundColor:"red",borderRadius:5}} 
-                                    onPress={(async ()=>{
-                                        setRemoveBookmark({...removeBookmark,removing:false})
-                                        if (Platform.OS !== "web"){
-                                            const comic_dir = FileSystem.documentDirectory + "ComicMTL/" + `${SOURCE}/` + `${ID}/`
-                                            await FileSystem.deleteAsync(comic_dir, { idempotent: true })
-                                        }
-                                        
-                                        await ChapterStorage.drop(`${SOURCE}-${CONTENT.id}`)
-                                        await ComicStorage.removeByID(SOURCE,CONTENT.id)
-                                        
-                                        onRefresh()
-                                        setWidgetContext({state:false,component:<></>})
-                                    })}
-                                >Yes</Button>
-                            </>
-                        }</>
-                        
-                    </View>
-                </>
-            }</>
-
-        </View>
-        
-    }</>) 
-}
+export default RequestChapterWidget;

frontend/components/Image.tsx

@@ -61,6 +61,7 @@ const Image = ({source, style, onError, contentFit, transition, onLoad, onLoadEn
 
     useFocusEffect(useCallback(() => {
         return () => {
+            imageData.current = null
             controller.abort();
         };
     },[]))
@@ -92,7 +93,10 @@ const Image = ({source, style, onError, contentFit, transition, onLoad, onLoadEn
                         style={style}
                         contentFit={contentFit}
                         transition={transition}
-                        onLoad={onLoad}
+                        onLoad={()=>{
+                            if (onLoad) onLoad()
+                            imageData.current = null
+                        }}
                         onLoadEnd={onLoadEnd}
                     />
                     : <View style={{...style,display:'flex',justifyContent:"center",alignItems:"center"}}>

frontend/components/dropdown.tsx

@@ -59,9 +59,11 @@ const __style = (Dimensions:any,theme_type:string) => StyleSheet.create({
         elevation: 5,
     },
     inputSearchStyle:{
+        borderWidth:0,
         borderRadius:8,
         color: Theme[theme_type].text_color,
         fontSize: ((Dimensions.width+Dimensions.height)/2)*0.0225,
+        padding:0,
     },
     itemContainerStyle: {
         borderColor: Theme[theme_type].border_color,

frontend/components/menu/components/menu_button.tsx

@@ -23,28 +23,7 @@ const MenuButton = ({pathname, label, icon}:any) => {
 
 
     return (<>{style && <>
-        <View style={style.menu_button_box} key={pathname}
-            from={{
-                opacity: 0,
-                scale: 0.9,
-            }}
-            animate={{
-                opacity: 1,
-                scale: 1,
-            }}
-            exit={{
-                opacity: 0,
-                scale: 0.5,
-            }}
-            transition={{
-                type: 'timing',
-                duration: 500,
-            }}
-            exitTransition={{
-                type: 'timing',
-                duration: 250,
-            }}
-        >
+        <View style={style.menu_button_box}>
             {current_pathname === pathname 
                 ? <TouchableRipple
                     rippleColor={Theme[themeTypeContext].ripple_color_outlined}
@@ -56,22 +35,36 @@ const MenuButton = ({pathname, label, icon}:any) => {
                     style={style.selected_menu_button}
                 >
 
-                    <Icon source={icon} size={((Dimensions.width+Dimensions.height)/2)*0.045} color={Theme[themeTypeContext].icon_color}/>
+                    <Icon source={icon} size={((Dimensions.width+Dimensions.height)/2)*0.035} color={Theme[themeTypeContext].icon_color}/>
                 
                 </TouchableRipple>
-                : <><TouchableRipple
-                    rippleColor={Theme[themeTypeContext].ripple_color_outlined}
-                    onPress={() => {
+                : <>
+                    <TouchableRipple
+                        rippleColor={Theme[themeTypeContext].ripple_color_outlined}
+                        onPress={() => {
+                            
+                            router.push(pathname)
+                        }}
                         
-                        router.push(pathname)
-                    }}
-                    
-                    style={style.menu_button}
-                    
-                >
-                    <Icon source={icon} size={((Dimensions.width+Dimensions.height)/2)*0.045} color={Theme[themeTypeContext].icon_color}/>
+                        style={style.menu_button}
+                        
+                    >
+                        <View
+                            style={{
+                                display:"flex",
+                                alignItems:"center",
+                                justifyContent:"center",
+                                gap:8,
+                                width:"100%",
+                                height:"100%",
+                            }}
+                        >
+                            <Icon source={icon} size={((Dimensions.width+Dimensions.height)/2)*0.035} color={Theme[themeTypeContext].icon_color}/>
+                            <Text selectable={false} style={style.menu_button_text}>{label}</Text>
+                        </View>
+                    </TouchableRipple>
                     
-                </TouchableRipple><Text style={style.menu_button_text}>{label}</Text></>
+                </>
             }
             
         </View>

frontend/components/menu/menu.tsx

@@ -1,40 +1,117 @@
-import React, { useEffect, useState } from 'react';
-import { Link, usePathname } from 'expo-router';
+import React, { useEffect, useState, useContext, useCallback } from 'react';
+import { Link, usePathname, useFocusEffect } from 'expo-router';
 import { StyleSheet, View} from 'react-native';
 import { __styles } from './stylesheet/styles';
 import storage from '@/constants/module/storages/storage';
-import { Icon, MD3Colors, Button } from 'react-native-paper';
+import { Icon, MD3Colors, Button, Text, TouchableRipple } from 'react-native-paper';
 import Theme from '@/constants/theme';
 import {useWindowDimensions} from 'react-native';
 import MenuButton from './components/menu_button';
 
+import { CONTEXT } from '@/constants/module/context';
+import Storage from '@/constants/module/storages/storage';
+
 const Menu = () => {
     const [style, setStyle]:any = useState("")
-    const [themeType, setThemeType]:any = useState("")
+    const {themeTypeContext, setThemeTypeContext}:any = useContext(CONTEXT)
+    const [showMenuContext,setShowMenuContext]:any = useState(true)
+
     const Dimensions = useWindowDimensions();
+
+    useFocusEffect(useCallback(() => {
+        (async ()=>{
+            const MENU_STATE = await Storage.get("MENU_STATE")
+            if (MENU_STATE === null || MENU_STATE === undefined) setShowMenuContext(true)
+            else setShowMenuContext(MENU_STATE)
+            
+        })()
+        return () => {
+                
+        }
+    },[]))
     
 
     useEffect(() => { 
         (async ()=>{
-            const theme_type = await storage.get("theme") || "DARK_GREEN"
-            setThemeType(theme_type)
-            setStyle(__styles(theme_type,Dimensions))
+            console.log(showMenuContext)
+            setStyle(__styles(themeTypeContext,Dimensions))
         })()
     },[])
     
 
-    return (<>{style && themeType && <>
-        {Dimensions.width <= 720
-            ? <View
-                style={style.menu_container}
+    return (<>{style && <>
+        <View
+            style={{
+                ...style.menu_container,
+                position: showMenuContext ? "relative" : "absolute",
+                height: showMenuContext ? "100%" : "auto",
+                backgroundColor: showMenuContext? Theme[themeTypeContext].background_color : "transparent",
+                marginBottom: showMenuContext ? 0 : Dimensions.height*0.015,
+                borderRightWidth: showMenuContext ? 0.5 : 0,
+                
+            }}
+        >
+            
+            <>{showMenuContext && 
+                <>
+                    <View
+                        style={{
+                            paddingVertical: showMenuContext ? 12 : 18,
+                            width:"100%",
+                            height:"auto",
+                            display:"flex",
+                            justifyContent:"center",
+                            alignItems:"center",
+                            borderBottomWidth: 0.5,
+                            borderColor: Theme[themeTypeContext].border_color,
+                        }}
+                    >
+                        
+                        <Icon source={"menu-open"} size={((Dimensions.width+Dimensions.height)/2)*0.04} color={Theme[themeTypeContext].icon_color}/>
+                    </View>
+                    <View
+                        style={style.menu_box}
+                    >
+                        <MenuButton pathname="/recent" label="Recent" icon="history"/>
+                        <MenuButton pathname="/bookmark" label="Bookmark" icon="bookmark"/>
+                        <MenuButton pathname="/explore" label="Explore" icon="compass"/>
+                        <MenuButton pathname="/setting" label="Setting" icon="cog"/>
+                    </View>
+                </>
+            }</>
+
+            <TouchableRipple
+                rippleColor={Theme[themeTypeContext].ripple_color_outlined}
+                onPress={async () => {
+                    await Storage.store("MENU_STATE", !showMenuContext)
+                    setShowMenuContext(!showMenuContext)
+                }}
+                
+                style={{
+                    backgroundColor: showMenuContext ? Theme[themeTypeContext].background_color : Theme[themeTypeContext].button_color,
+                    borderTopRightRadius: showMenuContext ? 0 : ((Dimensions.height+Dimensions.width)/2)*0.015,
+                    borderBottomRightRadius: showMenuContext ? 0 : ((Dimensions.height+Dimensions.width)/2)*0.015,
+                    padding:8,
+                    height:"auto",
+                    width:"auto",
+                    paddingVertical: showMenuContext ? 12 : 18,
+                    justifyContent:"center",
+                    alignItems:"center",
+
+                    borderRightWidth: showMenuContext ? 0 : 0.5,
+                    borderBottomWidth: showMenuContext ? 0 : 0.5,
+                    borderTopWidth: showMenuContext ? 0.5 : 0.5,
+                    
+                    borderColor: Theme[themeTypeContext].border_color,
+                }}
             >
-                <MenuButton pathname="/recent" label="Recent" icon="history"/>
-                <MenuButton pathname="/bookmark" label="Bookmark" icon="bookmark"/>
-                <MenuButton pathname="/explore" label="Explore" icon="compass"/>
-                <MenuButton pathname="/setting" label="Setting" icon="cog"/>
-            </View>
-            : <></>
-        }
+
+                <Icon source={showMenuContext ? "chevron-left" : "chevron-right"} size={((Dimensions.width+Dimensions.height)/2)*0.0375} color={Theme[themeTypeContext].icon_color}/>
+            
+            </TouchableRipple>
+            
+        </View>
+        
         
     </>}</>);
 }

frontend/components/menu/stylesheet/styles.tsx

@@ -4,18 +4,24 @@ import Theme from "@/constants/theme";
 export const __styles:any = (theme_type:string,Dimensions:any) => {
     return StyleSheet.create({
         menu_container: {
-            position: "absolute",
             bottom: 0,
+            left:0,
             display: "flex",
-            flexDirection: "row",
-            justifyContent: "space-around",
-            alignItems: "center",
-            width: "100%",
-            backgroundColor: Theme[theme_type].background_color,
-            padding: 8,
-            borderTopWidth: 0.5,
+            flexDirection: "column",
+            justifyContent: "space-between",
+            height:"auto",
+            
             borderColor: Theme[theme_type].border_color,
         },
+        menu_box:{
+            flex:1,
+            display:"flex",
+            flexDirection:"column",
+            gap: 18,
+            alignItems:"center",
+            paddingHorizontal: Dimensions.width*0.005,
+            paddingVertical: 12,
+        },
         menu_button_box:{
             display:"flex",
             alignItems:"center",
@@ -36,7 +42,8 @@ export const __styles:any = (theme_type:string,Dimensions:any) => {
         
         menu_button_text: {
             color: Theme[theme_type].text_color,
-            fontSize: ((Dimensions.width+Dimensions.height)/2)*0.028,
+            fontSize: ((Dimensions.width+Dimensions.height)/2)*0.02,
+            fontFamily: "roboto-light",
             height:"auto",
         }
     })}

frontend/components/navigation/TabBarIcon.tsx

@@ -1,9 +0,0 @@
-// You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
-
-import Ionicons from '@expo/vector-icons/Ionicons';
-import { type IconProps } from '@expo/vector-icons/build/createIconSet';
-import { type ComponentProps } from 'react';
-
-export function TabBarIcon({ style, ...rest }: IconProps<ComponentProps<typeof Ionicons>['name']>) {
-  return <Ionicons size={28} style={[{ marginBottom: -3 }, style]} {...rest} />;
-}

frontend/constants/module/storages/chapter_data_storage.tsx

@@ -9,10 +9,13 @@ class Chapter_Data_Storage_Web {
     private static getDB(): Promise<IDBDatabase> {
         if (!this.dbPromise) {
             this.dbPromise = new Promise((resolve, reject) => {
-                const request = indexedDB.open(DATABASE_NAME, 1);
+                const request = indexedDB.open(DATABASE_NAME, 3);
     
                 request.onupgradeneeded = (event) => {
                     const db = (event.target as IDBOpenDBRequest).result;
+
+                    if (db.objectStoreNames.contains('dataStore')) db.deleteObjectStore('dataStore'); 
+
                     const store = db.createObjectStore('dataStore', { keyPath: 'id' });
                     store.createIndex('comic_id', 'comic_id', { unique: false });
                     store.createIndex('chapter_idx', 'chapter_idx', { unique: false });
@@ -87,24 +90,24 @@ class Chapter_Data_Storage_Web {
         });
     }
     
-    static async removeByComicID(comic_id: string): Promise<void> {
+    public static async removeByComicID(comic_id:string): Promise<void> {
         const db = await this.getDB();
         return new Promise((resolve, reject) => {
             const transaction = db.transaction('dataStore', 'readwrite');
             const store = transaction.objectStore('dataStore');
             const index = store.index('comic_id');
-            const request = index.openCursor(comic_id);
-    
+            const request = index.openCursor(IDBKeyRange.only(comic_id));
+        
             request.onsuccess = (event) => {
                 const cursor = (event.target as IDBRequest<IDBCursorWithValue>).result;
                 if (cursor) {
-                    cursor.delete();
-                    cursor.continue();
+                store.delete(cursor.primaryKey);
+                cursor.continue();
                 } else {
-                    resolve();
+                resolve();
                 }
             };
-    
+        
             request.onerror = () => {
                 reject(request.error);
             };

frontend/constants/module/storages/chapter_storage.tsx

@@ -8,7 +8,7 @@ import { ensure_safe_table_name } from "../ensure_safe_table_name";
 const DATABASE_NAME = 'ChapterDB';
 
 class Chapter_Storage_Web  {
-  private static DATABASE_VERSION: number = 2;
+  private static DATABASE_VERSION: number = 3;
 
   private static async openDB(): Promise<IDBDatabase> {
     return new Promise((resolve, reject) => {
@@ -16,11 +16,13 @@ class Chapter_Storage_Web  {
 
       request.onupgradeneeded = (event) => {
         const db = (event.target as IDBOpenDBRequest).result;
-        if (!db.objectStoreNames.contains('dataStore')) {
-          const store = db.createObjectStore('dataStore', { keyPath: 'id' });
-          store.createIndex('item', 'item', { unique: false });
-          store.createIndex('idx', 'idx', { unique: false });
-        }
+
+        if (db.objectStoreNames.contains('dataStore')) db.deleteObjectStore('dataStore'); 
+        
+        const store = db.createObjectStore('dataStore', { keyPath: 'id' });
+        store.createIndex('item', 'item', { unique: false });
+        store.createIndex('idx', 'idx', { unique: false });
+        
       };
 
       request.onsuccess = () => {

frontend/constants/module/storages/comic_storage.tsx

@@ -1,5 +1,7 @@
 import { Platform } from "react-native";
 import * as SQLite from 'expo-sqlite';
+import ChapterStorage from "./chapter_storage";
+import ChapterDataStorage from "./chapter_data_storage";
 
 const DATABASE_NAME = 'ComicStorageDB'
 
@@ -9,10 +11,11 @@ class Comic_Storage_Web {
     private static getDB(): Promise<IDBDatabase> {
         if (!this.dbPromise) {
             this.dbPromise = new Promise((resolve, reject) => {
-                const request = indexedDB.open(DATABASE_NAME, 2);
+                const request = indexedDB.open(DATABASE_NAME, 3);
     
                 request.onupgradeneeded = (event) => {
                     const db = (event.target as IDBOpenDBRequest).result;
+                    if (db.objectStoreNames.contains('dataStore')) db.deleteObjectStore('dataStore'); 
                     const store = db.createObjectStore('dataStore', { keyPath: 'id' });
                     store.createIndex('tag', 'tag', { unique: false });
                     store.createIndex('source', 'source', { unique: false });
@@ -256,8 +259,17 @@ class Comic_Storage_Web {
             request.onsuccess = (event) => {
                 const cursor = (event.target as IDBRequest<IDBCursorWithValue>).result;
                 if (cursor) {
+
+                    const data = cursor.value;
+                    const source = data.source
+                    const comic_id = data.id;
+                    
+                    ChapterStorage.drop(`${source}-${comic_id}`),
+                    ChapterDataStorage.removeByComicID(comic_id)
+                    
                     cursor.delete();
                     cursor.continue();
+                    
                 } else {
                     resolve();
                 }

frontend/constants/module/storages/image_cache_storage.tsx

@@ -25,13 +25,13 @@ class ImageStorage_Web {
     // Initialize the database
     private static async initDB(): Promise<IDBDatabase> {
         return new Promise((resolve, reject) => {
-            const request = indexedDB.open(DATABASE_NAME, 1);
+            const request = indexedDB.open(DATABASE_NAME, 3);
 
             request.onupgradeneeded = (event: IDBVersionChangeEvent) => {
                 const db = (event.target as IDBOpenDBRequest).result;
-                if (!db.objectStoreNames.contains('images')) {
-                    db.createObjectStore('images', { keyPath: 'link' });
-                }
+                if (db.objectStoreNames.contains('images')) db.deleteObjectStore('images'); 
+                db.createObjectStore('images', { keyPath: 'link' });
+                
             };
 
             request.onsuccess = () => {

frontend/constants/module/storages/storage.tsx

@@ -9,10 +9,11 @@ class Storage_Web {
     private static getDB(): Promise<IDBDatabase> {
         if (!this.dbPromise) {
         this.dbPromise = new Promise((resolve, reject) => {
-            const request = indexedDB.open(DATABASE_NAME, 1);
+            const request = indexedDB.open(DATABASE_NAME, 2);
     
             request.onupgradeneeded = (event) => {
             const db = (event.target as IDBOpenDBRequest).result;
+            if (db.objectStoreNames.contains('dataStore')) db.deleteObjectStore('dataStore'); 
             db.createObjectStore('dataStore');
             };