12-1-2024

backend/api/queue.py

@@ -9,7 +9,8 @@ from asgiref.sync import sync_to_async
 
 from backend.module import web_scrap
 from backend.module.utils import manage_image
-from backend.models.model_cache import SocketRequestChapterQueueCache, ComicStorageCache
+from backend.models.model_cache import SocketRequestChapterQueueCache
+from backend.models.model_1 import ComicStorageCache
 from core.settings import BASE_DIR
 from backend.module.utils import cloudflare_turnstile
 

backend/api/stream_file.py

@@ -3,7 +3,8 @@ from core.settings import BASE_DIR
 from django_ratelimit.decorators import ratelimit
 from django.views.decorators.csrf import csrf_exempt
 from backend.module.utils import cloudflare_turnstile
-from backend.models.model_cache import SocketRequestChapterQueueCache, ComicStorageCache
+from backend.models.model_cache import SocketRequestChapterQueueCache
+from backend.models.model_1 import ComicStorageCache
 
 import os, json, sys
 

backend/api/{web_scrap.py → web_scrape.py}

@@ -1,8 +1,8 @@
 
 import json, environ, requests, os, subprocess
-import asyncio, uuid
+import asyncio, uuid, shutil
 
-from django.http import HttpResponse, JsonResponse, HttpResponseBadRequest
+from django.http import HttpResponse, JsonResponse, HttpResponseBadRequest, StreamingHttpResponse
 from django_ratelimit.decorators import ratelimit
 from django.views.decorators.csrf import csrf_exempt
 from asgiref.sync import sync_to_async
@@ -12,10 +12,15 @@ from backend.module.utils import manage_image
 from backend.models.model_cache import RequestCache
 from core.settings import BASE_DIR
 from backend.module.utils import cloudflare_turnstile
+from backend.models.model_1 import WebscrapeGetCoverCache
+
+from backend.module.utils import directory_info, date_utils
 
 
 env = environ.Env()
 
+STORAGE_DIR = os.path.join(BASE_DIR,"storage")
+if not os.path.exists(STORAGE_DIR): os.makedirs(STORAGE_DIR)
 
 @csrf_exempt
 @ratelimit(key='ip', rate='20/m')
@@ -29,22 +34,17 @@ def get_list(request):
     page = payload.get("page")
     source = payload.get("source")
     
+    
+    
+    
+    
+    
     if search.get("text"): DATA = web_scrap.source_control[source].search.scrap(search=search,page=page)
     else: DATA = web_scrap.source_control["colamanga"].get_list.scrap(page=page)
 
     return JsonResponse({"data":DATA}) 
 
 
-@ratelimit(key='ip', rate='20/m')
-def search(request):
-    # if request.method != "POST": return HttpResponseBadRequest('Allowed POST request only!', status=400)
-    try:
-        DATA = web_scrap.source_control["colamanga"].search.scrap(search="妖")
-        return JsonResponse({"data":DATA}) 
-    except Exception as e:
-        return HttpResponseBadRequest(str(e), status=500)
-    
-
 
 @csrf_exempt
 @ratelimit(key='ip', rate='20/m')
@@ -70,11 +70,64 @@ def get_cover(request,source,id,cover_id):
     token = request.META.get('HTTP_X_CLOUDFLARE_TURNSTILE_TOKEN')
     if not cloudflare_turnstile.check(token): return HttpResponseBadRequest('Cloudflare turnstile token not existed or expired!', status=511)
     
+    file_path = ""
+    file_name = ""
+    chunk_size = 8192
+    MAX_COVER_STORAGE_SIZE = 10 * 1024 * 1024 * 1024
+
     try:
-        DATA = web_scrap.source_control[source].get_cover.scrap(id=id,cover_id=cover_id)
-        if not DATA: HttpResponseBadRequest('Image Not found!', status=404)
-        response = HttpResponse(DATA, content_type="image/png")
-        response['Content-Disposition'] = f'inline; filename="{id}-{cover_id}.png"'
+        query_result = WebscrapeGetCoverCache.objects.filter(source=source,comic_id=id,cover_id=cover_id).first()
+        if (
+            query_result 
+            and os.path.exists(query_result.file_path)
+            and query_result.datetime >= date_utils.utc_time().add(-5,'hour').get()
+        ): 
+            file_path = query_result.file_path
+            file_name = os.path.basename(file_path)
+
+        else:
+            if not os.path.exists(os.path.join(STORAGE_DIR,"covers")): os.makedirs(os.path.join(STORAGE_DIR,"covers"))
+            
+            while True:
+                storage_size = directory_info.GetDirectorySize(directory=os.path.join(STORAGE_DIR,"covers"),max_threads=5)
+                if (storage_size >= MAX_COVER_STORAGE_SIZE):
+                    query_result = WebscrapeGetCoverCache.objects.order_by("datetime").first()
+                    if (query_result):
+                        file_path = query_result.file_path
+                        if os.path.exists(file_path): shutil.rmtree(file_path)
+                        WebscrapeGetCoverCache.objects.filter(file_path=query_result.file_path).delete()
+                    else: 
+                        shutil.rmtree(os.path.join(STORAGE_DIR,"covers"))
+                        break
+                else: break
+                print(storage_size)
+            
+            DATA = web_scrap.source_control[source].get_cover.scrap(id=id,cover_id=cover_id)
+            if not DATA: HttpResponseBadRequest('Image Not found!', status=404)
+            
+            file_path = os.path.join(STORAGE_DIR,"covers",f'{source}-{id}-{cover_id}.png')
+            file_name = os.path.basename(file_path)
+            
+            with open(file_path, "wb") as f: f.write(DATA)
+            
+            WebscrapeGetCoverCache(
+                file_path=file_path,
+                source=source,
+                comic_id=id,
+                cover_id=cover_id,
+            ).save()
+            
+            
+        
+        def file_iterator():
+            with open(file_path, 'rb') as f:
+                while chunk := f.read(chunk_size):
+                    yield chunk
+
+        response = StreamingHttpResponse(file_iterator())
+        response['Content-Type'] = 'application/octet-stream'
+        response['Content-Length'] = os.path.getsize(file_path)
+        response['Content-Disposition'] = f'attachment; filename="{file_name}"'
         return response
     except Exception as e:
         return HttpResponseBadRequest(str(e), status=500)

backend/invoke_worker/chapter_queue.py

@@ -2,7 +2,8 @@ from django_thread import Thread
 from time import sleep
 from backend.module.utils import date_utils
 from django.db import connections
-from backend.models.model_cache import SocketRequestChapterQueueCache, ComicStorageCache
+from backend.models.model_cache import SocketRequestChapterQueueCache
+from backend.models.model_1 import ComicStorageCache
 from core.settings import BASE_DIR
 from backend.module import web_scrap
 from backend.module.utils import manage_image
@@ -22,6 +23,8 @@ env = environ.Env()
 
 STORAGE_DIR = os.path.join(BASE_DIR,"storage")
 if not os.path.exists(STORAGE_DIR): os.makedirs(STORAGE_DIR)
+COMIC_STORAGE_DIR = os.path.join(STORAGE_DIR,"comics")
+if not os.path.exists(COMIC_STORAGE_DIR): os.makedirs(COMIC_STORAGE_DIR)
 
 LOG_DIR = os.path.join(BASE_DIR, "log")
 if not os.path.exists(LOG_DIR): os.makedirs(LOG_DIR)
@@ -37,7 +40,7 @@ class Job(Thread):
                 
                 query_result = SocketRequestChapterQueueCache.objects.order_by("datetime").first()
                 while True:
-                    if (GetDirectorySize(STORAGE_DIR) >= MAX_STORAGE_SIZE):
+                    if (GetDirectorySize(COMIC_STORAGE_DIR) >= MAX_STORAGE_SIZE):
                         query_result_2 = ComicStorageCache.objects.order_by("datetime").first()
                         if (query_result_2):
                             file_path = query_result_2.file_path
@@ -73,33 +76,44 @@ class Job(Thread):
                     else:
                         connections['cache'].close()
                         
-                        script = []
-                        
-                        input_dir = os.path.join(STORAGE_DIR,source,comic_id,str(chapter_idx),"temp")
+                        if (options.get("colorize") or options.get("translate").get("state")):
+                            script = []
+                            input_dir = os.path.join(COMIC_STORAGE_DIR,source,comic_id,str(chapter_idx),"temp")
+                            merge_output_dir = os.path.join(COMIC_STORAGE_DIR,source,comic_id,str(chapter_idx),"merged")
                         
-                        if (options.get("translate").get("state") and options.get("colorize")):
-                            
-                            managed_output_dir = os.path.join(STORAGE_DIR,source,comic_id,str(chapter_idx),f"{options.get("translate").get("target")}_translated_colorized")
-                            script = ["python", "-m", "manga_translator", "-v", "--overwrite", "--attempts=3", "--ocr=mocr", "--no-text-lang-skip", "--det-auto-rotate", "--det-gamma-correct", "--colorize=mc2", "--translator=m2m100_big", "-l", f"{options.get("translate").get("target")}", "-i", f"{input_dir}", "-o", f"{managed_output_dir}"]
-                        elif (options.get("translate").get("state") and not options.get("colorize")):
-                            
-                            managed_output_dir = os.path.join(STORAGE_DIR,source,comic_id,str(chapter_idx),f"{options.get("translate").get("target")}_translated")
-                            script = ["python", "-m", "manga_translator", "-v", "--overwrite", "--attempts=3", "--ocr=mocr", "--no-text-lang-skip", "--det-auto-rotate", "--det-gamma-correct", "--translator=m2m100_big", "-l", f"{options.get("translate").get("target")}", "-i", f"{input_dir}", "-o", f"{managed_output_dir}"]
-                        elif (options.get("colorize") and not options.get("translate").get("state")):
-                            
-                            managed_output_dir = os.path.join(STORAGE_DIR,source,comic_id,str(chapter_idx),"colorized")
-                            script = ["python", "-m", "manga_translator", "-v", "--overwrite", "--attempts=3", "--detector=none", "--translator=original", "--colorize=mc2", "--colorization-size=-1", "-i", f"{input_dir}", "-o", f"{managed_output_dir}"]
+                            if (options.get("translate").get("state") and options.get("colorize")):
+                                managed_output_dir = os.path.join(COMIC_STORAGE_DIR,source,comic_id,str(chapter_idx),f"{options.get("translate").get("target")}_translated_colorized")
+                                script = [
+                                    "python", "-m", "manga_translator", "-v", "--overwrite", "--attempts=3", "--ocr=mocr", "--no-text-lang-skip", "--det-auto-rotate", "--det-gamma-correct", "--colorize=mc2", "--translator=m2m100_big", 
+                                    "-l", f"{options.get("translate").get("target")}", "-i", f"{merge_output_dir}", "-o", f"{managed_output_dir}"
+                                ]
+                            elif (options.get("translate").get("state") and not options.get("colorize")):
+                                managed_output_dir = os.path.join(COMIC_STORAGE_DIR,source,comic_id,str(chapter_idx),f"{options.get("translate").get("target")}_translated")
+                                script = [
+                                    "python", "-m", "manga_translator", "-v", "--overwrite", "--attempts=3", "--ocr=mocr", "--no-text-lang-skip", "--det-auto-rotate", "--det-gamma-correct", "--translator=m2m100_big", 
+                                    "-l", f"{options.get("translate").get("target")}", "-i", f"{merge_output_dir}", "-o", f"{managed_output_dir}"
+                                ]
+                            elif (options.get("colorize") and not options.get("translate").get("state")):
+                                
+                                managed_output_dir = os.path.join(COMIC_STORAGE_DIR,source,comic_id,str(chapter_idx),"colorized")
+                                script = [
+                                    "python", "-m", "manga_translator", "-v", "--overwrite", "--attempts=3", "--detector=none", "--translator=original", "--colorize=mc2", "--colorization-size=-1", 
+                                    "-i", f"{merge_output_dir}", "-o", f"{managed_output_dir}"
+                                ]
 
-                        if target_lang == "ENG": script.append("--manga2eng")
+                            if target_lang == "ENG": script.append("--manga2eng")
                             
                         
-                        
-                        if (options.get("colorize") or options.get("translate").get("state")):
                             if os.path.exists(input_dir): shutil.rmtree(input_dir)
+                            if os.path.exists(merge_output_dir): shutil.rmtree(merge_output_dir)
                             if os.path.exists(managed_output_dir): shutil.rmtree(managed_output_dir)
                             
                             job = web_scrap.source_control[source].get_chapter.scrap(comic_id=comic_id,chapter_id=chapter_id,output_dir=input_dir)
+
                             if job.get("status") == "success":
+                                manage_image.merge_images_vertically(input_dir, merge_output_dir, max_height=1800)
+                                shutil.rmtree(input_dir)
+                                
                                 
                                 with open(os.path.join(LOG_DIR,"image_translator_output.log"), "w") as file:
                                     result = subprocess.run(
@@ -113,7 +127,7 @@ class Job(Thread):
                                     )
                                 if result.returncode != 0: raise Exception("Image Translator Execution error!")
                                 os.makedirs(managed_output_dir,exist_ok=True)
-                                shutil.rmtree(input_dir)
+                                shutil.rmtree(merge_output_dir)
                                 
                                 with zipfile.ZipFile(managed_output_dir + '.zip', 'w') as zipf:
                                     for foldername, subfolders, filenames in os.walk(managed_output_dir):
@@ -139,63 +153,80 @@ class Job(Thread):
                                 
                                 query_result_3 = SocketRequestChapterQueueCache.objects.filter(id=query_result.id).first()
                                 channel_name = query_result_3.channel_name if query_result_3 else ""
-                                channel_layer = get_channel_layer()
-                                async_to_sync(channel_layer.send)(channel_name, {
-                                    'type': 'event_send',
-                                    'data': {
-                                        "type": "chapter_ready_to_download",
-                                        "data": {
-                                            "source": source,
-                                            "comic_id": comic_id,
-                                            "chapter_id": chapter_id,
-                                            "chapter_idx": chapter_idx
-                                        }
-                                    }
-                                })
                                 SocketRequestChapterQueueCache.objects.filter(id=query_result.id).delete()
-                            else: raise Exception("Dowload chapter error!")
+                                if channel_name:
+                                    channel_layer = get_channel_layer()
+                                    async_to_sync(channel_layer.send)(channel_name, {
+                                        'type': 'event_send',
+                                        'data': {
+                                            "type": "chapter_ready_to_download",
+                                            "data": {
+                                                "source": source,
+                                                "comic_id": comic_id,
+                                                "chapter_id": chapter_id,
+                                                "chapter_idx": chapter_idx
+                                            }
+                                        }
+                                    })
+                                connections['cache'].close()
+                                
+                            else: 
+                                connections['cache'].close()
+                                raise Exception("#1 Dowload chapter error!")
                         else:
-                            input_dir = os.path.join(STORAGE_DIR,source,comic_id,str(chapter_idx),"original")
+                            input_dir = os.path.join(COMIC_STORAGE_DIR,source,comic_id,str(chapter_idx),"original")
+                            merge_output_dir = os.path.join(COMIC_STORAGE_DIR,source,comic_id,str(chapter_idx),"origin-merged")
+                            
                             if os.path.exists(input_dir): shutil.rmtree(input_dir)
+                            if os.path.exists(merge_output_dir): shutil.rmtree(merge_output_dir)
                             
                             job = web_scrap.source_control["colamanga"].get_chapter.scrap(comic_id=comic_id,chapter_id=chapter_id,output_dir=input_dir)
-                        
-                            with zipfile.ZipFile(input_dir + '.zip', 'w') as zipf:
-                                for foldername, subfolders, filenames in os.walk(input_dir):
-                                    for filename in filenames:
-                                        if filename.endswith(('.png', '.jpg', '.jpeg')):
-                                            file_path = os.path.join(foldername, filename)
-                                            zipf.write(file_path, os.path.basename(file_path))
-                            shutil.rmtree(input_dir)
-                            
-                            ComicStorageCache(
-                                    source = source,
-                                    comic_id = comic_id,
-                                    chapter_id = chapter_id,
-                                    chapter_idx = chapter_idx,
-                                    file_path = input_dir + '.zip',
-                                    colorize = False,
-                                    translate = False,
-                                    target_lang = "",
-                                    
-                            ).save()
-                            query_result_3 = SocketRequestChapterQueueCache.objects.filter(id=query_result.id).first()
-                            channel_name = query_result_3.channel_name if query_result_3 else ""
-                            channel_layer = get_channel_layer()
-                            async_to_sync(channel_layer.send)(channel_name, {
-                                'type': 'event_send',
-                                'data': {
-                                    "type": "chapter_ready_to_download",
-                                    "data": {
-                                        "source": source,
-                                        "comic_id": comic_id,
-                                        "chapter_id": chapter_id,
-                                        "chapter_idx": chapter_idx
-                                    }
-                                }
-                            })
-                            SocketRequestChapterQueueCache.objects.filter(id=query_result.id).delete() 
-                        
+                            if job.get("status") == "success":
+                                manage_image.merge_images_vertically(input_dir, merge_output_dir, max_height=1800)
+                                if os.path.exists(input_dir): shutil.rmtree(input_dir)
+                                
+                                with zipfile.ZipFile(input_dir + '.zip', 'w') as zipf:
+                                    for foldername, subfolders, filenames in os.walk(merge_output_dir):
+                                        for filename in filenames:
+                                            if filename.endswith(('.png', '.jpg', '.jpeg')):
+                                                file_path = os.path.join(foldername, filename)
+                                                zipf.write(file_path, os.path.basename(file_path))
+                                shutil.rmtree(merge_output_dir)
+                                
+                                ComicStorageCache(
+                                        source = source,
+                                        comic_id = comic_id,
+                                        chapter_id = chapter_id,
+                                        chapter_idx = chapter_idx,
+                                        file_path = input_dir + '.zip',
+                                        colorize = False,
+                                        translate = False,
+                                        target_lang = "",
+                                        
+                                ).save()
+                                
+                                
+                                query_result_3 = SocketRequestChapterQueueCache.objects.filter(id=query_result.id).first()
+                                channel_name = query_result_3.channel_name if query_result_3 else ""
+                                SocketRequestChapterQueueCache.objects.filter(id=query_result.id).delete() 
+                                
+                                if channel_name:
+                                    channel_layer = get_channel_layer()
+                                    async_to_sync(channel_layer.send)(channel_name, {
+                                        'type': 'event_send',
+                                        'data': {
+                                            "type": "chapter_ready_to_download",
+                                            "data": {
+                                                "source": source,
+                                                "comic_id": comic_id,
+                                                "chapter_id": chapter_id,
+                                                "chapter_idx": chapter_idx
+                                            }
+                                        }
+                                    })
+                            else: 
+                                connections['cache'].close()
+                                raise Exception("#2 Dowload chapter error!")
                         connections['cache'].close()
                 else:
                     connections['cache'].close()
@@ -206,18 +237,24 @@ class Job(Thread):
                     if os.path.exists(input_dir): shutil.rmtree(input_dir) 
                 if (managed_output_dir):
                     if os.path.exists(managed_output_dir): shutil.rmtree(managed_output_dir)
+                
+                
                 query_result_3 = SocketRequestChapterQueueCache.objects.filter(id=query_result.id).first()
                 channel_name = query_result_3.channel_name if query_result_3 else ""
-                channel_layer = get_channel_layer()
-                async_to_sync(channel_layer.send)(channel_name, {
-                    'type': 'event_send',
-                    'data': {
-                        "type": "chapter_ready_to_download",
-                        "data": {"state":"error"}
-                    }
-                })
-                
                 SocketRequestChapterQueueCache.objects.filter(id=query_result.id).delete() 
+                
+                if (channel_name):
+                    channel_layer = get_channel_layer()
+                    async_to_sync(channel_layer.send)(channel_name, {
+                        'type': 'event_send',
+                        'data': {
+                            "type": "chapter_ready_to_download",
+                            "data": {"state":"error"}
+                        }
+                    })
+                
+                
+                
                 connections['cache'].close()
                 sleep(10)
 

backend/migrations/0001_initial.py

@@ -1,5 +1,6 @@
-# Generated by Django 5.1.1 on 2024-10-01 06:35
+# Generated by Django 5.1.1 on 2024-12-01 11:29
 
+import backend.models.model_1
 import backend.models.model_cache
 import uuid
 from django.db import migrations, models
@@ -32,13 +33,12 @@ class Migration(migrations.Migration):
                 ('colorize', models.BooleanField()),
                 ('translate', models.BooleanField()),
                 ('target_lang', models.TextField()),
-                ('datetime', models.DateTimeField(default=backend.models.model_cache.get_current_utc_time)),
+                ('datetime', models.DateTimeField(default=backend.models.model_1.get_current_utc_time)),
             ],
         ),
         migrations.CreateModel(
             name='RequestCache',
             fields=[
-                ('room', models.TextField()),
                 ('client', models.UUIDField(primary_key=True, serialize=False)),
                 ('datetime', models.DateTimeField(default=backend.models.model_cache.get_current_utc_time)),
             ],

backend/migrations/0002_remove_requestcache_room.py

@@ -1,17 +0,0 @@
-# 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/migrations/0002_webscrapegetcovercache.py

@@ -0,0 +1,24 @@
+# Generated by Django 5.1.1 on 2024-12-01 11:38
+
+import backend.models.model_1
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('backend', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='WebscrapeGetCoverCache',
+            fields=[
+                ('file_path', models.TextField(primary_key=True, serialize=False)),
+                ('source', models.TextField()),
+                ('comic_id', models.TextField()),
+                ('cover_id', models.TextField()),
+                ('datetime', models.DateTimeField(default=backend.models.model_1.get_current_utc_time)),
+            ],
+        ),
+    ]

backend/models/model_1.py

@@ -1,8 +1,28 @@
 from django.db import models
-# Create your models here.
+from backend.module.utils import date_utils
+from core.settings import BASE_DIR
 
+import uuid, os
 
-# class AdminAccount(models.Model):
-#     account = models.CharField(max_length=36,default="")
-#     password = models.CharField(max_length=36,default="")
+def get_current_utc_time(): return date_utils.utc_time().get()
+
+
+
+class ComicStorageCache(models.Model):
+    id = models.UUIDField(primary_key = True, default = uuid.uuid4, editable = False)
+    source = models.TextField()
+    comic_id = models.TextField()
+    chapter_id = models.TextField()
+    chapter_idx = models.IntegerField()
+    file_path = models.TextField()
+    colorize = models.BooleanField()
+    translate = models.BooleanField()
+    target_lang = models.TextField()
+    datetime = models.DateTimeField(default=get_current_utc_time)
     
+class WebscrapeGetCoverCache(models.Model):
+    file_path = models.TextField(primary_key=True)
+    source = models.TextField()
+    comic_id = models.TextField()
+    cover_id = models.TextField()
+    datetime = models.DateTimeField(default=get_current_utc_time)

backend/models/model_cache.py

@@ -12,18 +12,6 @@ class CloudflareTurnStileCache(models.Model):
     token = models.TextField(primary_key=True)
     datetime = models.DateTimeField(default=get_current_utc_time)
     
-class ComicStorageCache(models.Model):
-    id = models.UUIDField(primary_key = True, default = uuid.uuid4, editable = False)
-    source = models.TextField()
-    comic_id = models.TextField()
-    chapter_id = models.TextField()
-    chapter_idx = models.IntegerField()
-    file_path = models.TextField()
-    colorize = models.BooleanField()
-    translate = models.BooleanField()
-    target_lang = models.TextField()
-    datetime = models.DateTimeField(default=get_current_utc_time)
-
 
 class SocketRequestChapterQueueCache(models.Model):
     id = models.UUIDField(primary_key = True, default = uuid.uuid4, editable = False)

backend/module/utils/manage_image.py

@@ -1,7 +1,7 @@
 import os
 from PIL import Image
 
-def merge_images_vertically(input_dir, output_dir, max_size=10 * 1024 * 1024):
+def merge_images_vertically_old(input_dir, output_dir, max_size=1800):
     os.makedirs(output_dir,exist_ok=True)
     
     filenames = sorted(os.listdir(input_dir), key=lambda x: int(x.split(".")[0]))
@@ -58,6 +58,57 @@ def merge_images_vertically(input_dir, output_dir, max_size=10 * 1024 * 1024):
         merged_image.save(os.path.join(output_dir, f"{merged_file_index}.png"))
     
 
+def merge_images_vertically(input_dir, output_dir, max_height=1800):
+    os.makedirs(output_dir, exist_ok=True)
+    
+    filenames = sorted(os.listdir(input_dir), key=lambda x: int(x.split(".")[0]))
+    
+    merged_image = None
+    merged_file_index = 0
+    
+    index = 0
+    while True:
+        if index > (len(filenames) - 1): break
+        file = filenames[index]
+        if not merged_image:
+            image = Image.open(os.path.join(input_dir, file))
+            
+            width, height = image.size
+
+            new_image = Image.new("RGBA", (width, height))
+            
+            # Paste the image onto the new image
+            new_image.paste(image, (0, 0))
+            merged_image = new_image
+            index += 1
+        else:
+            merged_width, merged_height = merged_image.size
+            
+            if merged_height >= max_height:
+                output_path = os.path.join(output_dir, f"{merged_file_index}.png")
+                merged_image.save(output_path)
+                merged_image = None
+                merged_file_index += 1
+            else:
+                image = Image.open(os.path.join(input_dir, file))
+                width, height = image.size
+
+                # Create a new image with the combined width and the height of the tallest image
+                new_width = max(merged_width, width)
+                new_height = merged_height + height
+                new_image = Image.new("RGB", (new_width, new_height))
+
+                # Paste the two images onto the new image
+                new_image.paste(merged_image, (0, 0))
+                new_image.paste(image, (0, merged_height))
+                merged_image = new_image
+                index += 1
+    
+    if merged_image: 
+        output_path = os.path.join(output_dir, f"{merged_file_index}.png")
+        merged_image.save(output_path)
+
+
 def split_image_vertically(input_dir, output_dir):
     os.makedirs(output_dir,exist_ok=True)
     

backend/module/web_scrap/utils.py

@@ -17,7 +17,6 @@ class SeleniumScraper:
         options.add_argument('--no-sandbox')
         options.add_argument("--no-quit")
         options.add_argument('--disable-extensions')
-        options.add_argument('--disable-gpu')
         options.add_argument('--disable-dev-shm-usage')
         options.set_capability('goog:loggingPrefs', {'performance': 'ALL'})
         self.__driver = webdriver.Chrome(service=Service(ChromeDriverManager().install()), options=options)

backend/urls.py

@@ -1,7 +1,7 @@
 
 from django.contrib import admin
 from django.urls import path, include, re_path
-from backend.api import test, stream_file, web_scrap, cloudflare_turnstile, queue
+from backend.api import test, stream_file, cloudflare_turnstile, queue, web_scrape
 
 
 
@@ -14,10 +14,9 @@ urlpatterns = [
     # /api/queue/request_info/
     path("cloudflare_turnstile/verify/", cloudflare_turnstile.verify),
     
-    path('web_scrap/get_list/', web_scrap.get_list),
-    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_list/', web_scrape.get_list),
+    path('web_scrap/get/', web_scrape.get),
+    path('web_scrap/get_cover/<str:source>/<str:id>/<str:cover_id>/', web_scrape.get_cover),
     
     
     

core/settings.py

@@ -21,8 +21,7 @@ for key, value in os.environ.items():
 
 
 # SECURITY WARNING: don't run with debug turned on in production!
-DEBUG = True
-DEBUG_DB = True
+DEBUG = False
 
 # settings.py
 
@@ -117,37 +116,27 @@ WSGI_APPLICATION = 'core.wsgi.application'
 # https://docs.djangoproject.com/en/4.0/ref/settings/#databases
 DATABASE_ROUTERS = ['core.routers.Router']
 
-if DEBUG or DEBUG_DB:
-    DATABASES = {
-        'default': {
-            'ENGINE': 'django.db.backends.sqlite3',
-            'NAME': BASE_DIR / 'database.sqlite3',
-        },
-        'cache': {
-            'ENGINE': 'django.db.backends.sqlite3',
-            'NAME': BASE_DIR / 'cache.sqlite3',
-        },
-        'DB1': {
-            'ENGINE': 'django.db.backends.sqlite3',
-            'NAME': BASE_DIR / 'db1.sqlite3',
-        },
-        'DB2': {
-            'ENGINE': 'django.db.backends.sqlite3',
-            'NAME': BASE_DIR / 'db2.sqlite3',
-        },
 
-    }
-else:
-    DATABASES = {
-        'default': dj_database_url.config(default=env("DB")),
-        'cache': {
-            'ENGINE': 'django.db.backends.sqlite3',
-            'NAME': BASE_DIR / 'cache.sqlite3',
-        },
-        'DB1': dj_database_url.config(default=env("DB1")),
-        'DB2': dj_database_url.config(default=env("DB2")),
-        
-    }
+DATABASES = {
+    'default': {
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': BASE_DIR / 'database.sqlite3',
+    },
+    'cache': {
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': BASE_DIR / 'cache.sqlite3',
+    },
+    'DB1': {
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': BASE_DIR / 'db1.sqlite3',
+    },
+    'DB2': {
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': BASE_DIR / 'db2.sqlite3',
+    },
+
+}
+
 
 
 

frontend/app/_layout.tsx

@@ -3,7 +3,7 @@ import { useFonts } from 'expo-font';
 import { Stack, router, usePathname } from 'expo-router';
 import * as SplashScreen from 'expo-splash-screen';
 import { useEffect, useState, useContext, createContext, memo } from 'react';
-import { useWindowDimensions, View, Text, Pressable } from 'react-native';
+import { useWindowDimensions, View, Text, Pressable, KeyboardAvoidingView } from 'react-native';
 import 'react-native-reanimated';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import Menu from '@/components/menu/menu';
@@ -134,7 +134,15 @@ return (<>{loaded && themeTypeContext && apiBaseContext && socketBaseContext &&
 		widgetContext, setWidgetContext,
 		showCloudflareTurnstileContext, setShowCloudflareTurnstileContext,
 		}}>
-		<View style={{width:Dimensions.width,height:Dimensions.height,backgroundColor: Theme[themeTypeContext].background_color}}>
+		<KeyboardAvoidingView 
+			behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+			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 
@@ -184,7 +192,7 @@ return (<>{loaded && themeTypeContext && apiBaseContext && socketBaseContext &&
 			}
 			
 		
-		</View>
+		</KeyboardAvoidingView>
 		<Toast  config={toastConfig} />
 	</CONTEXT.Provider>
 	</SafeAreaView>

frontend/app/bookmark/_layout.tsx

@@ -0,0 +1,19 @@
+import { Tabs, Stack } from 'expo-router';
+import React from 'react';
+import {View, Text} from 'react-native';
+
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+import { SafeAreaView } from 'react-native-safe-area-context';
+export default function TabLayout() {
+  const colorScheme = useColorScheme();
+
+  return (
+      <Stack
+        screenOptions={{
+          headerShown: false,
+        }}>
+
+      </Stack>
+);
+}

frontend/app/bookmark/components/bookmark_component.tsx

@@ -0,0 +1,87 @@
+import React, { useEffect, useState, useCallback, useContext, useRef, useMemo } from 'react';
+import { Link, router, useLocalSearchParams, useFocusEffect } from 'expo-router';
+import { Image as RNImage, StyleSheet, useWindowDimensions, ScrollView, Pressable, RefreshControl, Platform, FlatList, TouchableOpacity } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Icon, MD3Colors, Button, Text, TextInput, TouchableRipple } from 'react-native-paper';
+import CircularProgress from 'react-native-circular-progress-indicator';
+import { ActivityIndicator } from 'react-native-paper';
+import { FlashList } from "@shopify/flash-list";
+
+
+import uuid from 'react-native-uuid';
+import Toast from 'react-native-toast-message';
+import { View, AnimatePresence } from 'moti';
+import * as Clipboard from 'expo-clipboard';
+import * as FileSystem from 'expo-file-system';
+import NetInfo from "@react-native-community/netinfo";
+import { Marquee } from '@animatereactnative/marquee';
+import { Slider } from '@rneui/themed-edge';
+
+import { __styles } from '../stylesheet/styles';
+import Storage from '@/constants/module/storages/storage';
+import ChapterStorage from '@/constants/module/storages/chapter_storage';
+import Image from '@/components/Image';
+import {CONTEXT} from '@/constants/module/context';
+import {blobToBase64, base64ToBlob, getImageLayout} from "@/constants/module/file_manager";
+import Theme from '@/constants/theme';
+import ComicStorage from '@/constants/module/storages/comic_storage';
+
+const BookmarkComponent = ({item, SELECTED_BOOKMARK, SET_SELECTED_BOOKMARK}:any) => {
+    const Dimensions = useWindowDimensions();
+    const controller = new AbortController();
+    const signal = controller.signal;
+
+    const {showMenuContext, setShowMenuContext}:any = useContext(CONTEXT)
+    const {themeTypeContext, setThemeTypeContext}:any = useContext(CONTEXT)
+    const {apiBaseContext, setApiBaseContext}:any = useContext(CONTEXT)
+    const {widgetContext, setWidgetContext}:any = useContext(CONTEXT)
+    const {showCloudflareTurnstileContext, setShowCloudflareTurnstileContext}:any = useContext(CONTEXT)
+    
+
+    useFocusEffect(useCallback(() => {
+
+
+        return () => {
+            controller.abort();
+        };
+    },[]))
+
+    return (<>
+        <TouchableRipple
+            rippleColor={Theme[themeTypeContext].ripple_color_outlined}
+            style={{
+                width:"auto",
+                height:"auto",
+                backgroundColor: SELECTED_BOOKMARK === item ? Theme[themeTypeContext].border_color : "transparent",
+                borderBottomWidth: SELECTED_BOOKMARK === item ? 3.5 : 0,
+                borderColor:Theme[themeTypeContext].button_color,
+                paddingHorizontal:18,
+                paddingVertical:14,
+                borderRadius:2,
+            }}
+            onPress={()=>{SET_SELECTED_BOOKMARK(item)}}
+        >
+            <View
+                style={{
+                    width:"auto",
+                    height:"auto",
+                }}
+            >
+                <Text selectable={false}
+                    style={{
+                        color:Theme[themeTypeContext].text_color,
+                        fontFamily:"roboto-bold",
+                        fontSize:((Dimensions.width+Dimensions.height)/2)*0.0185,
+                    }}
+                >
+                    {item}
+                </Text>
+            </View>
+        </TouchableRipple>
+    </>)
+    
+
+}
+
+export default BookmarkComponent;
+

frontend/app/bookmark/components/comic_component.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useState, useCallback, useContext, useRef, useMemo } from 'react';
+import { Link, router, useLocalSearchParams, useFocusEffect } from 'expo-router';
+import { Image as RNImage, StyleSheet, useWindowDimensions, ScrollView, Pressable, RefreshControl, Platform, FlatList, TouchableOpacity } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Icon, MD3Colors, Button, Text, TextInput, TouchableRipple } from 'react-native-paper';
+import CircularProgress from 'react-native-circular-progress-indicator';
+import { ActivityIndicator } from 'react-native-paper';
+import { FlashList } from "@shopify/flash-list";
+
+
+import uuid from 'react-native-uuid';
+import Toast from 'react-native-toast-message';
+import { View, AnimatePresence } from 'moti';
+import * as Clipboard from 'expo-clipboard';
+import * as FileSystem from 'expo-file-system';
+import NetInfo from "@react-native-community/netinfo";
+import { Marquee } from '@animatereactnative/marquee';
+import { Slider } from '@rneui/themed-edge';
+
+import { __styles } from '../stylesheet/styles';
+import Storage from '@/constants/module/storages/storage';
+import ChapterStorage from '@/constants/module/storages/chapter_storage';
+import CoverStorage from '@/constants/module/storages/cover_storage';
+
+import Image from '@/components/Image';
+import {CONTEXT} from '@/constants/module/context';
+import {blobToBase64, base64ToBlob, getImageLayout} from "@/constants/module/file_manager";
+import Theme from '@/constants/theme';
+import ComicStorage from '@/constants/module/storages/comic_storage';
+
+const ComicComponent = ({item, SELECTED_BOOKMARK, SET_SELECTED_BOOKMARK}:any) => {
+    const Dimensions = useWindowDimensions();
+    const controller = new AbortController();
+    const signal = controller.signal;
+
+    const {showMenuContext, setShowMenuContext}:any = useContext(CONTEXT)
+    const {themeTypeContext, setThemeTypeContext}:any = useContext(CONTEXT)
+    const {apiBaseContext, setApiBaseContext}:any = useContext(CONTEXT)
+    const {widgetContext, setWidgetContext}:any = useContext(CONTEXT)
+    const {showCloudflareTurnstileContext, setShowCloudflareTurnstileContext}:any = useContext(CONTEXT)
+
+    const [styles, setStyles]:any = useState(null)
+    const [isLoading, setIsLoading] = useState<boolean>(true)
+    
+    const cover:any = useRef("")
+
+    useFocusEffect(useCallback(() => {
+        (async ()=>{
+            setIsLoading(true)
+            setStyles(__styles(themeTypeContext,Dimensions))
+            const stored_bookmark = await Storage.get("bookmark") || []
+            console.log(stored_bookmark)
+            cover.current  = await CoverStorage.get(`${item.source}-${item.id}`) || ""
+            setIsLoading(false)
+        })()
+
+        return () => {
+            cover.current = ""
+            controller.abort();
+        };
+    },[]))
+
+    return (<>{styles && !isLoading && <>
+        <TouchableRipple 
+            rippleColor={Theme[themeTypeContext].ripple_color_outlined}
+            onPress={()=>{router.navigate(`/view/${item.source}/${item.id}/?mode=local`)}}
+            style={styles.item_box}
+        >
+            <>
+                <Image onError={(error:any)=>{console.log("load image error",error)}} source={cover.current} 
+                        style={styles.item_cover}
+                        contentFit="cover" transition={1000}
+                        onLoadEnd={()=>{cover.current = ""}}
+                    />
+                
+                <Text style={styles.item_title}>{item.info.title}</Text>
+            </>
+        </TouchableRipple>
+    </>}</>)
+    
+
+}
+
+export default ComicComponent;
+

frontend/app/bookmark/components/widgets/bookmark.tsx

@@ -0,0 +1,904 @@
+
+import React, { useEffect, useState, useCallback, useContext, useRef, Fragment, memo } 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 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';
+import ChapterDataStorage from '@/constants/module/storages/chapter_data_storage';
+
+interface BookmarkWidgetProps {
+    setIsLoading: any;
+    onRefresh: any;
+}
+
+const BookmarkWidget: React.FC<BookmarkWidgetProps> = ({
+    setIsLoading,
+    onRefresh,
+}) => {
+    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 [manageBookmark, setManageBookmark]:any = useState({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 =  useCallback(({item}:any) =>{
+            const [editTag, setEditTag]:any = useState(item.value)
+            useEffect(()=>{
+            },[manageBookmark])
+            
+            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 === item.value &&
+                                (<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}
+                                                autoFocus={true}
+                                                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={editTag}
+                                                onChangeText={(text)=>{
+                                                    setEditTag(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)
+                                                        }
+                                                        
+
+                                                        
+                                                    
+                                                        const index_2 = BOOKMARK_DATA.findIndex((item:any) => item.value === manageBookmark.edit);
+                                                        if (index_2 !== -1){
+                                                            BOOKMARK_DATA[index_2].label = editTag
+                                                            BOOKMARK_DATA[index_2].value = editTag
+                                                        }
+                                                        SET_BOOKMARK_DATA(BOOKMARK_DATA)
+                                                        setManageBookmark({...manageBookmark,edit:""})
+                                                        setEditTag("")
+                                                        
+                                                        onRefresh();
+                                                    }
+                                                    setShowMenuOption({...showMenuOption,state:false,id:""})
+                                                }}
+                                            >
+                                                
+                                                <Icon source={"check"} size={((Dimensions.width+Dimensions.height)/2)*0.035} color={"green"}/>
+                                            </TouchableRipple>
+                                        </View>
+                                    
+                                            
+
+                                </View>)
+
+                            }</>
+
+                            
+                            
+                            
+                        </View>
+                        
+                    )
+                }
+            </>)
+        }
+    ,[Theme,themeTypeContext,manageBookmark,searchTag,removeTag,createTag,showMenuOption,MIGRATE_BOOKMARK_DATA,BOOKMARK_DATA])
+    
+
+    const load_bookmark = async ()=>{
+        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(()=>{
+        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,
+                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,
+            }}
+        >
+            
+            <>{!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} 
+                                    
+                                    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) => 
+                                        (
+                                            <View key={item.value}>
+                                                <RenderTag item={item}/>
+                                                <View style={{width:"100%",height:2,backgroundColor:Theme[themeTypeContext].border_color}}/>
+                                            </View>
+                                        )
+                                    )}</>
+                                </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 tag 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</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 ()=>{
+                                setWidgetContext({state:false,component:<></>})
+                            })}
+                        >Done</Button>
+                    </View>
+                </View>
+            </>}</>
+            
+            <>{createTag.state &&
+                    <>
+                    <View 
+                        style={{
+                            height:"auto",
+                            display:"flex",
+                            flexDirection:"column",
+                            gap:12,
+                        }}
+                    >
+                        <TextInput mode="outlined" label="Create Tag"  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,
+                                            
+                                        },
+                                    });
+                                    onRefresh()
+                                }
+                            })}
+                        >Add</Button>
+                    </View>
+                </>
+            }</>
+
+        </View>
+        <>{showMenuOption.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={"cyan"}/>
+                        <View>
+                            <Text selectable={false}
+                                style={{
+                                    textAlign:"center",
+                                    color:"cyan",
+                                    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",
+                    padding:15,
+                }}
+            >
+                <View
+                    style={{
+                        backgroundColor:Theme[themeTypeContext].background_color,
+                        maxWidth:500,
+                        width:"100%",
+                        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);
+
+                                        
+                                        
+                                    
+                                        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("")
+                                        
+                                        onRefresh();
+                                    }}
+                                >
+                                    
+                                    <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);
+                                
+                                    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("")
+                                    onRefresh()
+                                    
+                                }}
+                            >
+                                
+                                <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/bookmark/index.tsx

@@ -0,0 +1,291 @@
+import React, { useEffect, useState, useCallback, useContext, useRef, useMemo } from 'react';
+import { Link, router, useLocalSearchParams, useFocusEffect } from 'expo-router';
+import { Image as RNImage, StyleSheet, useWindowDimensions, ScrollView, Pressable, RefreshControl, Platform, FlatList, TouchableOpacity } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Icon, MD3Colors, Button, Text, TextInput, TouchableRipple } from 'react-native-paper';
+import CircularProgress from 'react-native-circular-progress-indicator';
+import { ActivityIndicator } from 'react-native-paper';
+import { FlashList } from "@shopify/flash-list";
+
+
+import uuid from 'react-native-uuid';
+import Toast from 'react-native-toast-message';
+import { View, AnimatePresence } from 'moti';
+import * as Clipboard from 'expo-clipboard';
+import * as FileSystem from 'expo-file-system';
+import NetInfo from "@react-native-community/netinfo";
+import { Marquee } from '@animatereactnative/marquee';
+import { Slider } from '@rneui/themed-edge';
+
+import BookmarkComponent from './components/bookmark_component';
+import ComicComponent from './components/comic_component';
+import BookmarkWidget from './components/widgets/bookmark';
+
+import { __styles } from './stylesheet/styles';
+import Storage from '@/constants/module/storages/storage';
+import ChapterStorage from '@/constants/module/storages/chapter_storage';
+import Image from '@/components/Image';
+import {CONTEXT} from '@/constants/module/context';
+import {blobToBase64, base64ToBlob, getImageLayout} from "@/constants/module/file_manager";
+import Theme from '@/constants/theme';
+import ComicStorage from '@/constants/module/storages/comic_storage';
+
+const Index = ({}:any) => {
+    const Dimensions = useWindowDimensions();
+    const controller = new AbortController();
+    const signal = controller.signal;
+
+    const {showMenuContext, setShowMenuContext}:any = useContext(CONTEXT)
+    const {themeTypeContext, setThemeTypeContext}:any = useContext(CONTEXT)
+    const {apiBaseContext, setApiBaseContext}:any = useContext(CONTEXT)
+    const {widgetContext, setWidgetContext}:any = useContext(CONTEXT)
+    const {showCloudflareTurnstileContext, setShowCloudflareTurnstileContext}:any = useContext(CONTEXT)
+    
+    const [styles, setStyles]:any = useState("")
+    const [isLoading, setIsLoading] = useState<boolean>(true)
+    const [onRefresh, setOnRefresh] = useState(false)
+    const [search, setSearch] = useState<any>({state:false,text:""})
+
+    const [BOOKMARK_DATA, SET_BOOKMARK_DATA]:any = useState([])
+    const [SELECTED_BOOKMARK, SET_SELECTED_BOOKMARK] = useState<string>("")
+
+    const [COMIC_DATA, SET_COMIC_DATA] = useState<any>([])
+
+    useEffect(() => {
+        (async ()=>{
+            if (!SELECTED_BOOKMARK) return
+            const stored_comic = await ComicStorage.getByTag(SELECTED_BOOKMARK)
+            console.log(stored_comic)
+            SET_COMIC_DATA(stored_comic)
+        })()
+    },[SELECTED_BOOKMARK,onRefresh])
+
+    useFocusEffect(useCallback(() => {
+        (async ()=>{
+            setIsLoading(true)
+            const stored_bookmark = await Storage.get("bookmark") || []
+            console.log(stored_bookmark)
+            
+            SET_BOOKMARK_DATA(stored_bookmark)
+            console.log("AA",stored_bookmark.length )
+            if (stored_bookmark.length) {
+                SET_SELECTED_BOOKMARK(stored_bookmark[0])
+            }
+            setIsLoading(false)
+        })()
+    },[onRefresh]))
+
+    const renderBookmarkComponent = useCallback(({item,index}:any) => {
+        return <BookmarkComponent key={index.toString()} item={item} 
+                SELECTED_BOOKMARK={SELECTED_BOOKMARK} SET_SELECTED_BOOKMARK={SET_SELECTED_BOOKMARK}
+            />
+    },[SELECTED_BOOKMARK])
+
+    const renderComicComponent = useCallback(({item,index}:any) => {
+        return <ComicComponent key={index.toString()} item={item} 
+                
+            />
+    },[SELECTED_BOOKMARK])
+
+    useFocusEffect(useCallback(() => {
+        setIsLoading(true)
+        setShowMenuContext(true)
+        setStyles(__styles(themeTypeContext,Dimensions))
+
+        return () => {
+            controller.abort();
+        };
+    },[]))
+
+    return (<>{styles && ! isLoading
+        ? <>
+            <View style={styles.screen_container}
+                
+            >
+                <View style={styles.header_container}>
+                    <Text style={styles.header_text}>Bookmark</Text>
+
+                    <View style={styles.header_button_box}>
+
+                        <TouchableRipple
+                            rippleColor={Theme[themeTypeContext].ripple_color_outlined}
+                            style={{
+                                ...styles.header_search_button,
+                                backgroundColor: search.state ? Theme[themeTypeContext].button_selected_color : "transparent",   
+                            }}
+                            
+                            onPress={() => {
+                                setSearch({...search,state:!search.state})
+                            }}
+                        >
+                            <Icon source={"magnify"} size={((Dimensions.width+Dimensions.height)/2)*0.04} color={Theme[themeTypeContext].icon_color}/>
+                        </TouchableRipple>
+                    </View>
+                    
+
+                </View>
+                <>{search.state && (
+                    <View
+                        style={{
+                            width:"100%",
+                            height:"auto",
+                            paddingHorizontal:12,
+                            paddingVertical:18,
+                            borderBottomWidth:2,
+                            borderColor:Theme[themeTypeContext].border_color,
+                        }}
+                    >
+                        <TextInput mode="outlined" label="Search" textColor={Theme[themeTypeContext].text_color} 
+                            
+                            style={{
+                                
+                                backgroundColor:Theme[themeTypeContext].background_color,
+                                borderColor:Theme[themeTypeContext].border_color,
+                                
+                            }}
+                            outlineColor={Theme[themeTypeContext].text_input_border_color}
+                            value={search.text}
+                            onChange={(event)=>{
+                                setSearch({...search,text:event.nativeEvent.text})
+                            }}
+                        />
+
+                    </View>
+                )}</>
+                <View
+                    style={{
+                        display:"flex",
+                        flexDirection:"row",
+                        width:"100%",
+                        height:"auto",
+                        backgroundColor:"transparent",
+                        borderBottomWidth:2,
+                        borderColor:Theme[themeTypeContext].border_color,
+                    }}
+                >            
+                    <FlatList
+                        contentContainerStyle={{
+                            flex:1,
+                            flexGrow: 1,
+                            justifyContent: 'center',
+                        }}
+                        horizontal={true}
+                        data={BOOKMARK_DATA}
+                        renderItem={renderBookmarkComponent}
+                        ItemSeparatorComponent={undefined}
+                    />
+                    <TouchableRipple
+                        rippleColor={Theme[themeTypeContext].ripple_color_outlined}
+                        style={{
+                            borderRadius:5,
+                            borderWidth:0,
+                            backgroundColor: "transparent",
+                            padding:5,
+                            justifyContent:"center",
+                            alignItems:"center",
+                        }}
+                        onPress={() => {
+                            setWidgetContext({state:true,component:
+                                <BookmarkWidget
+                                    setIsLoading={setIsLoading}
+                                    onRefresh={()=>{setOnRefresh(!onRefresh)}}
+
+                                />
+                            })
+                        }}
+                    >
+                        <Icon source={require("@/assets/icons/tag-edit-outline.png")} size={((Dimensions.width+Dimensions.height)/2)*0.0325} color={Theme[themeTypeContext].icon_color}/>
+                    </TouchableRipple>
+                </View>
+                <FlatList
+                    contentContainerStyle={{
+                        flexGrow: 1,
+                        padding:12,
+                        flexDirection:"row",
+                        gap:Math.max((Dimensions.width+Dimensions.height)/2*0.015,8),
+                        flexWrap:"wrap",
+                    }}
+                    renderItem={renderComicComponent}
+                    ItemSeparatorComponent={undefined}
+                    data={COMIC_DATA.filter((item:any) => item.info.title.toLowerCase().includes(search.text.toLowerCase()))}
+                    ListEmptyComponent={
+                        <View
+                            style={{
+                                width:"100%",
+                                height:"100%",
+                                backgroundColor:"transparent",
+                                display:"flex",
+                                justifyContent:"center",
+                                alignItems:"center",
+                                flexDirection:"row",
+                                gap:12,
+                            }}
+                        >
+                            <>{BOOKMARK_DATA.length 
+                                ? <>
+                                    {search.text && COMIC_DATA.length
+                                        ? <>
+                                            <Icon source={"magnify-scan"} color={Theme[themeTypeContext].icon_color} size={((Dimensions.width+Dimensions.height)/2)*0.03}/>
+                                            <Text selectable={false}
+                                                style={{
+                                                    fontFamily:"roboto-bold",
+                                                    fontSize:((Dimensions.width+Dimensions.height)/2)*0.025,
+                                                    color:Theme[themeTypeContext].text_color,
+                                                }}
+                                            >Search no result</Text>
+                                        </>
+                                        : <>
+                                            <Icon source={require("@/assets/icons/tag-hidden.png")} color={Theme[themeTypeContext].icon_color} size={((Dimensions.width+Dimensions.height)/2)*0.03}/>
+                                            <Text selectable={false}
+                                                style={{
+                                                    fontFamily:"roboto-bold",
+                                                    fontSize:((Dimensions.width+Dimensions.height)/2)*0.025,
+                                                    color:Theme[themeTypeContext].text_color,
+                                                }}
+                                            >This tag is empty.</Text>
+                                        </>
+                                    }
+                                </>
+                                : <View style={{
+                                    display:"flex",
+                                    flexDirection:"column", 
+                                    justifyContent:"center",
+                                    alignItems:"center",
+                                    width:"100%",
+                                    height:"auto",
+                                }}>
+                                    
+                                    <Text selectable={false}
+                                        style={{
+                                            fontFamily:"roboto-bold",
+                                            fontSize:((Dimensions.width+Dimensions.height)/2)*0.025,
+                                            color:Theme[themeTypeContext].text_color,
+                                            textAlign:"center",
+                                        }}
+                                    >
+                                        No tag found. {"\n"}Press{"  "}
+                                        <Icon source={require("@/assets/icons/tag-edit-outline.png")} color={Theme[themeTypeContext].icon_color} size={((Dimensions.width+Dimensions.height)/2)*0.03}/>  
+                                        {"  "}to create bookmark tag.
+                                    </Text>
+                                </View>
+
+                            }
+                            </>
+                            
+                        </View>
+                        
+                    }
+                />
+            </View>
+
+        </>
+        : <View style={{zIndex:5,width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center",backgroundColor:Theme[themeTypeContext].background_color}}>
+            <Image setShowCloudflareTurnstile={setShowCloudflareTurnstileContext} source={require("@/assets/gif/cat-loading.gif")} style={{width:((Dimensions.width+Dimensions.height)/2)*0.15,height:((Dimensions.width+Dimensions.height)/2)*0.15}}/>
+        </View>
+    }</>)
+    
+
+}
+
+export default Index;
+

frontend/app/bookmark/stylesheet/styles.tsx

@@ -0,0 +1,68 @@
+import { StyleSheet } from "react-native";
+import Theme from "@/constants/theme";
+
+export const __styles:any = (theme_type:string,Dimensions:any) => {
+    return StyleSheet.create({
+        screen_container: {
+            display: "flex",
+            width: "100%",
+            height: "100%",
+            backgroundColor: Theme[theme_type].background_color,
+        },
+        header_container: {
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+            paddingHorizontal: 15,
+            paddingVertical:10,
+            backgroundColor: Theme[theme_type].background_color,
+            borderBottomWidth: 0.5,
+            borderColor: Theme[theme_type].border_color,
+        },
+        header_text:{
+            fontFamily: "roboto-medium",
+            fontSize: ((Dimensions.width+Dimensions.height)/2)*0.04,
+            color: Theme[theme_type].text_color,
+            
+        },
+        header_search_button:{
+            borderRadius:5,
+            borderWidth:0,
+            padding:5,
+        },
+
+        item_box:{
+            display:"flex",
+            flexDirection:"column",
+            alignItems:"center",
+            gap:15,
+            height:"auto",
+            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.325,125),
+            borderRadius:8,
+            shadowColor: "#000",
+            shadowOffset: {
+                width: 0,
+                height: 1,
+            },
+            shadowOpacity: 0.22,
+            shadowRadius: 2.22,
+
+            elevation: 3,
+        },
+        item_title:{
+            color: Theme[theme_type].text_color,
+            fontFamily: "roboto-medium",
+            fontSize: ((Dimensions.width+Dimensions.height)/2)*0.025,
+            width:"100%",
+            height:"auto",
+            textAlign:"center",
+            flexShrink:1,
+        }
+    })}

frontend/app/explore/index.tsx

@@ -9,7 +9,7 @@ import Dropdown from '@/components/dropdown';
 
 
 import Theme from '@/constants/theme';
-import { __styles } from './stylesheet/show_list_styles';
+import { __styles } from './stylesheet/styles';
 import Storage from '@/constants/module/storages/storage';
 import ImageStorage from '@/constants/module/storages/image_cache_storage';
 import { CONTEXT } from '@/constants/module/context';
@@ -52,7 +52,7 @@ const Index = ({}:any) => {
         };
     }, []))
     
-    useEffect(() => { 
+    useFocusEffect(useCallback(() => {
         (async ()=>{
             setStyles(__styles(themeTypeContext,Dimensions))
 
@@ -69,7 +69,7 @@ const Index = ({}:any) => {
         return () => {
             controller.abort();
         };
-    },[])
+    },[]))
 
 
 
@@ -397,7 +397,7 @@ const Index = ({}:any) => {
                                                 contentFit="cover" transition={1000}
                                             />
                                         
-                                        <Text style={styles.item_title}>{item.title}</Text>
+                                        <Text selectable={false} style={styles.item_title}>{item.title}</Text>
                                     </>
                                 </TouchableRipple>
                                 

frontend/app/index.tsx

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

frontend/app/read/[source]/[comic_id]/[chapter_idx].tsx

@@ -16,6 +16,7 @@ import * as FileSystem from 'expo-file-system';
 import NetInfo from "@react-native-community/netinfo";
 import { Marquee } from '@animatereactnative/marquee';
 import { Slider } from '@rneui/themed-edge';
+import dayjs from 'dayjs'; import utc from 'dayjs/plugin/utc'; dayjs.extend(utc);
 
 import Storage from '@/constants/module/storages/storage';
 import ChapterStorage from '@/constants/module/storages/chapter_storage';
@@ -28,12 +29,12 @@ import Menu from '../../components/menu/menu';
 import Disqus from '../../components/disqus';
 import { get_chapter } from '../../modules/get_chapter';
 import ComicStorage from '@/constants/module/storages/comic_storage';
+import { set } from 'lodash';
 
 const Index = ({}:any) => {
     const SOURCE = useLocalSearchParams().source;
     const COMIC_ID = useLocalSearchParams().comic_id;
     const Dimensions = useWindowDimensions();
-    const StaticDimensions = useMemo(() => Dimensions, [])
     
 
     const {showMenuContext, setShowMenuContext}:any = useContext(CONTEXT)
@@ -46,9 +47,11 @@ const Index = ({}:any) => {
     const [chapterInfo, setChapterInfo]:any = useState({})
     const [showOptions, setShowOptions]:any = useState({type:"general",state:false})
     const [DATA, SET_DATA]:any = useState([])
-    const [isAdding, setIsAdding]:any = useState(false)
+    
+
     const [zoom, setZoom]:any = useState(0)
 
+
     const CHAPTER_IDX = useRef(Number(useLocalSearchParams().chapter_idx as string));
 
 
@@ -60,6 +63,27 @@ const Index = ({}:any) => {
 
     // First Load
     useEffect(()=>{(async () => {
+        setIsLoading(true)
+
+        const stored_recent = await Storage.get("RECENT") || []
+        stored_recent.sort((a:any,b:any) => b.timestamp - a.timestamp)
+
+        let exist = false
+        for (const i of stored_recent) {
+            if (i.source === SOURCE && i.comic_id === COMIC_ID) {
+                i.timestamp = dayjs().utc().valueOf()
+                exist = true
+                break
+            }
+        }
+        if (!exist) {
+            if (stored_recent.length >= 25) stored_recent.pop()
+            stored_recent.push({source:SOURCE,comic_id:COMIC_ID,timestamp:dayjs().utc().valueOf()})
+        }
+
+        await Storage.store("RECENT",stored_recent)
+
+
         if (!SOURCE || !COMIC_ID || !CHAPTER_IDX.current){
             setIsError({state:true,text:"Invalid source, comic id or chapter idx!"})
             return
@@ -94,39 +118,8 @@ const Index = ({}:any) => {
 
     const renderItem = useCallback(({item,index}:any) => {
         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
-        
-        // 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 () => {
-        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([...NEW_DATA,...chapter_current_data])
-    },[DATA])
+    },[zoom,showOptions])
+
 
     return (<>
         {isError.state
@@ -167,7 +160,7 @@ const Index = ({}:any) => {
                         }}
                         
                         onPress={()=>{
-                            router.replace("/explore")
+                            router.replace(`/view/${SOURCE}/${COMIC_ID}/?mode=local`)
                         }}
                     >
                         <Icon source={"arrow-left-thin"} size={((Dimensions.width+Dimensions.height)/2)*0.05} color={Theme[themeTypeContext].icon_color}/>
@@ -220,18 +213,15 @@ const Index = ({}:any) => {
                             zIndex:0
                         }}
                     >   
-                        <FlatList 
+                        <FlatList
                             data={DATA}
                             renderItem={renderItem}
-                            // onEndReachedThreshold={0.5}
                             windowSize={21}
                             ItemSeparatorComponent={undefined}
-                            onEndReached={onEndReached}
-                            onViewableItemsChanged={onViewableItemsChanged}
                         />
                     </View>
                     <AnimatePresence exitBeforeEnter>
-                        {showOptions.state && 
+                        {showOptions.state &&
                             <View
                                 style={{
                                     position:"absolute",
@@ -304,7 +294,7 @@ const Index = ({}:any) => {
                                                         }}
                                                         
                                                         onPress={()=>{
-                                                            router.replace(`/view/${SOURCE}/${COMIC_ID}/`)
+                                                            router.replace(`/view/${SOURCE}/${COMIC_ID}/?mode=local`)
                                                         }}
                                                     >
                                                         <Icon source={"arrow-left-thin"} size={((Dimensions.width+Dimensions.height)/2)*0.05} color={Theme[themeTypeContext].icon_color}/>
@@ -325,21 +315,7 @@ const Index = ({}:any) => {
                                                             {chapterInfo.title}
                                                         </Text>
                                                     </View>
-                                                    <TouchableRipple
-                                                        rippleColor={Theme[themeTypeContext].ripple_color_outlined}
-                                                        style={{
-                                                            borderRadius:5,
-                                                            borderWidth:0,
-                                                            backgroundColor: "transparent",
-                                                            padding:5,
-                                                        }}
-                                                        
-                                                        onPress={()=>{
-                                                            console.log("HO2h2")
-                                                        }}
-                                                    >
-                                                        <Icon source={"cloud-refresh"} size={((Dimensions.width+Dimensions.height)/2)*0.05} color={Theme[themeTypeContext].icon_color}/>
-                                                    </TouchableRipple>
+                                                    
                                                 </View>
                                                 <View 
                                                     style={{

frontend/app/read/_layout.tsx

@@ -2,7 +2,6 @@ import { Tabs, Stack } from 'expo-router';
 import React from 'react';
 import {View, Text} from 'react-native';
 
-import { TabBarIcon } from '@/components/navigation/TabBarIcon';
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
 import { SafeAreaView } from 'react-native-safe-area-context';

frontend/app/read/components/chapter_image.tsx

@@ -14,6 +14,7 @@ import * as FileSystem from 'expo-file-system';
 import NetInfo from "@react-native-community/netinfo";
 import JSZip from 'jszip';
 
+import ComicStorage from '@/constants/module/storages/comic_storage';
 import ChapterStorage from '@/constants/module/storages/chapter_storage';
 import ChapterDataStorage from '@/constants/module/storages/chapter_data_storage';
 import Image from '@/components/Image';
@@ -22,7 +23,7 @@ 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, setIsLoading, SET_DATA}: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);
@@ -34,6 +35,7 @@ const ChapterImage = ({item, zoom, showOptions,setShowOptions, setIsLoading, SET
 
     const [isReady, setIsReady] = useState(false);
     const [isError, setIsError] = useState({state:false,text:""});
+    const [isNavigate, setIsNavigate] = useState(false);
 
     const image = useRef<any>(null);
     const image_layout = useRef<any>(null);
@@ -53,9 +55,17 @@ const ChapterImage = ({item, zoom, showOptions,setShowOptions, setIsLoading, SET
         
     })()},[])
 
+    useFocusEffect(useCallback(() => {
+        return () => {
+            image.current = null
+        };
+    },[]))
+
 
     return ( <Pressable
-                onPress={()=>{setShowOptions({type:"general",state:!showOptions.state})}}
+                onPress={()=>{
+                    setShowOptions({type:"general",state:!showOptions.state})
+                }}
                 style={{
                     display:"flex",
                     width:"100%",
@@ -76,6 +86,7 @@ const ChapterImage = ({item, zoom, showOptions,setShowOptions, setIsLoading, SET
                                     aspectRatio: image_layout.current.width / image_layout.current.height,
                                 }}
                                 onLoadEnd={()=>{
+                                    image.current = ""
                                 }}
                             />
                         )}
@@ -171,7 +182,7 @@ const ChapterImage = ({item, zoom, showOptions,setShowOptions, setIsLoading, SET
                                     paddingVertical: 18,
                                 }}
                             >
-                                <TouchableRipple
+                                <TouchableRipple disabled={isNavigate}
                                     rippleColor={Theme[themeTypeContext].ripple_color_outlined}
                                     style={{
                                         width:"auto",
@@ -192,8 +203,10 @@ const ChapterImage = ({item, zoom, showOptions,setShowOptions, setIsLoading, SET
                                         
                                     }}
                                     onPress={async ()=>{
+                                        setIsNavigate(true);
                                         const stored_chapter_info = await ChapterStorage.getByIdx(`${SOURCE}-${COMIC_ID}`,item.chapter_idx-1)
                                         if (stored_chapter_info?.data_state === "completed"){
+                                            setIsLoading(true);
                                             router.replace(`/read/${SOURCE}/${COMIC_ID}/${stored_chapter_info.idx}/`)
                                         }else{
                                             Toast.show({
@@ -214,18 +227,19 @@ const ChapterImage = ({item, zoom, showOptions,setShowOptions, setIsLoading, SET
                                                 },
                                             });
                                         }
+                                        setIsNavigate(false);
                                     }}
                                 >
                                     <Text selectable={false}
                                         style={{
                                             color:Theme[themeTypeContext].text_color,
                                             fontFamily:"roboto-medium",
-                                            fontSize:(Dimensions.width+Dimensions.height)/2*0.03
+                                            fontSize:(Dimensions.width+Dimensions.height)/2*0.03 * (1 - zoom / 100)
                                         }}
                                     >Previous</Text>
                                 </TouchableRipple>
 
-                                <TouchableRipple
+                                <TouchableRipple disabled={isNavigate}
                                     rippleColor={Theme[themeTypeContext].ripple_color_outlined}
                                     style={{
                                         width:"auto",
@@ -245,8 +259,16 @@ const ChapterImage = ({item, zoom, showOptions,setShowOptions, setIsLoading, SET
                                         elevation: 5,
                                     }}
                                     onPress={async ()=>{
+                                        setIsNavigate(true);
                                         const stored_chapter_info = await ChapterStorage.getByIdx(`${SOURCE}-${COMIC_ID}`,item.chapter_idx+1)
                                         if (stored_chapter_info?.data_state === "completed"){
+                                            setIsLoading(true)
+
+                                            const stored_comic = await ComicStorage.getByID(SOURCE, COMIC_ID)
+                                            if (stored_comic.history.idx && item.chapter_idx+1 > stored_comic.history.idx) {
+                                                await ComicStorage.updateHistory(SOURCE, COMIC_ID, {idx:stored_chapter_info?.idx, id:stored_chapter_info?.id, title:stored_chapter_info?.title})
+                                            }
+                                            
                                             router.replace(`/read/${SOURCE}/${COMIC_ID}/${stored_chapter_info.idx}/`)
                                         }else{
                                             Toast.show({
@@ -267,13 +289,14 @@ const ChapterImage = ({item, zoom, showOptions,setShowOptions, setIsLoading, SET
                                                 },
                                             });
                                         }
+                                        setIsNavigate(false);
                                     }}
                                 >
                                     <Text selectable={false}
                                         style={{
                                             color:Theme[themeTypeContext].text_color,
                                             fontFamily:"roboto-medium",
-                                            fontSize:(Dimensions.width+Dimensions.height)/2*0.03
+                                            fontSize:(Dimensions.width+Dimensions.height)/2*0.03 * (1 - zoom / 100)
                                         }}
                                     >Next</Text>
                                 </TouchableRipple>

frontend/app/read/components/disqus.tsx

@@ -17,15 +17,10 @@ const Disqus = ({url,identifier,title, paddingVertical=0, paddingHorizontal=0}:a
     const Dimensions = useWindowDimensions();
     const shortname = 'comicmtl';
     
-
-    const {showMenuContext, setShowMenuContext}:any = useContext(CONTEXT)
     const {themeTypeContext, setThemeTypeContext}:any = useContext(CONTEXT)
-    const {showCloudflareTurnstileContext, setShowCloudflareTurnstileContext}:any = useContext(CONTEXT)
-    const {apiBaseContext, setApiBaseContext}:any = useContext(CONTEXT)
+
 
     if (Platform.OS === "web") {
-        
-    
         return (
             <ScrollView 
                 style={{

frontend/app/recent/_layout.tsx

@@ -0,0 +1,19 @@
+import { Tabs, Stack } from 'expo-router';
+import React from 'react';
+import {View, Text} from 'react-native';
+
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+import { SafeAreaView } from 'react-native-safe-area-context';
+export default function TabLayout() {
+  const colorScheme = useColorScheme();
+
+  return (
+      <Stack
+        screenOptions={{
+          headerShown: false,
+        }}>
+
+      </Stack>
+);
+}

frontend/app/recent/components/comic_component.tsx

@@ -0,0 +1,194 @@
+import React, { useEffect, useState, useCallback, useContext, useRef, useMemo } from 'react';
+import { Link, router, useLocalSearchParams, useFocusEffect } from 'expo-router';
+import { Image as RNImage, StyleSheet, useWindowDimensions, ScrollView, Pressable, RefreshControl, Platform, FlatList, TouchableOpacity } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Icon, MD3Colors, Button, Text, TextInput, TouchableRipple } from 'react-native-paper';
+import CircularProgress from 'react-native-circular-progress-indicator';
+import { ActivityIndicator } from 'react-native-paper';
+import { FlashList } from "@shopify/flash-list";
+
+
+import uuid from 'react-native-uuid';
+import Toast from 'react-native-toast-message';
+import { View, AnimatePresence } from 'moti';
+import * as Clipboard from 'expo-clipboard';
+import * as FileSystem from 'expo-file-system';
+import NetInfo from "@react-native-community/netinfo";
+import { Marquee } from '@animatereactnative/marquee';
+import { Slider } from '@rneui/themed-edge';
+
+import { __styles } from '../stylesheet/styles';
+import Storage from '@/constants/module/storages/storage';
+import ChapterStorage from '@/constants/module/storages/chapter_storage';
+import CoverStorage from '@/constants/module/storages/cover_storage';
+
+import Image from '@/components/Image';
+import {CONTEXT} from '@/constants/module/context';
+import {blobToBase64, base64ToBlob, getImageLayout} from "@/constants/module/file_manager";
+import Theme from '@/constants/theme';
+import ComicStorage from '@/constants/module/storages/comic_storage';
+
+const ComicComponent = ({index, item, SELECTED_BOOKMARK, SET_SELECTED_BOOKMARK}:any) => {
+    const Dimensions = useWindowDimensions();
+    const controller = new AbortController();
+    const signal = controller.signal;
+
+    const {showMenuContext, setShowMenuContext}:any = useContext(CONTEXT)
+    const {themeTypeContext, setThemeTypeContext}:any = useContext(CONTEXT)
+    const {apiBaseContext, setApiBaseContext}:any = useContext(CONTEXT)
+    const {widgetContext, setWidgetContext}:any = useContext(CONTEXT)
+    const {showCloudflareTurnstileContext, setShowCloudflareTurnstileContext}:any = useContext(CONTEXT)
+
+    const [styles, setStyles]:any = useState(null)
+    const [isLoading, setIsLoading] = useState<boolean>(true)
+    
+    const cover:any = useRef("")
+
+    useFocusEffect(useCallback(() => {
+        (async ()=>{
+            setIsLoading(true)
+            setStyles(__styles(themeTypeContext,Dimensions))
+            const stored_bookmark = await Storage.get("bookmark") || []
+            console.log(stored_bookmark)
+            cover.current  = await CoverStorage.get(`${item.source}-${item.id}`) || ""
+            setIsLoading(false)
+        })()
+
+        return () => {
+            cover.current = ""
+            controller.abort();
+        };
+    },[]))
+
+    return (<>{styles && !isLoading && <>
+        <>{index === 0
+            ? <View
+                style={{
+                    width:"100%",
+                    height:"auto",
+                    paddingHorizontal:0,
+                    paddingVertical:18,
+                    borderBottomWidth:2,
+                    borderColor:Theme[themeTypeContext].border_color,
+                    display:"flex",
+                    flexDirection:Dimensions.width >= 700 ? "row" : "column",
+                    justifyContent:"space-around",
+                    alignItems:"center",
+                    gap:12,
+                }}
+            >
+                
+                <TouchableRipple 
+                    rippleColor={Theme[themeTypeContext].ripple_color_outlined}
+                    onPress={()=>{router.navigate(`/view/${item.source}/${item.id}/?mode=local`)}}
+                    style={{...styles.item_box, marginHorizontal:12,}}
+                >
+                    <>
+                        <Image onError={(error:any)=>{console.log("load image error",error)}} source={cover.current} 
+                                style={styles.item_cover}
+                                contentFit="cover" transition={1000}
+                                onLoadEnd={()=>{cover.current = ""}}
+                            />
+                    </>
+                </TouchableRipple>
+                <View
+                    style={{
+                        flex:1,
+                        width:"auto",
+                        height:Dimensions.width >= 700 ? "100%" : "auto",
+                        paddingVertical:12,
+                        alignItems:"center",
+                        justifyContent:"space-around",
+                        gap:12,
+                    }}
+                >
+                    <Text style={{
+                        color:Theme[themeTypeContext].text_color,
+                        fontSize:((Dimensions.width+Dimensions.height)/2)*0.035,
+                        fontFamily:"roboto-bold",
+                        textAlign:"center",
+                        width:"100%",
+                    }}>{item.info.title}</Text>
+
+                    <TouchableRipple
+                        rippleColor={Theme[themeTypeContext].ripple_color_outlined}
+                        style={{
+                            width:Dimensions.width*0.40,
+                            display:"flex",
+                            flexDirection:"column",
+                            justifyContent:"center",
+                            padding:8,
+                            borderRadius:Dimensions.width*0.60/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={()=>{
+                            router.replace(`/read/${item.source}/${item.id}/${item.history.idx}/`)
+                        }}
+                    >
+                        <View
+                            style={{
+                                display:"flex",
+                                flexDirection:"column",  
+                                gap:12,
+                                alignItems:"center",
+                            }}
+                        >
+                            <Text selectable={false}
+                                numberOfLines={1}
+                                style={{
+                                    color:Theme[themeTypeContext].text_color,
+                                    fontSize:((Dimensions.width+Dimensions.height)/2)*0.0225,
+                                    fontFamily:"roboto-bold",
+                                }}
+                            >
+                                Continue
+                            </Text>
+                            <Text selectable={false}
+                                numberOfLines={1}
+                                style={{
+                                    color:Theme[themeTypeContext].text_color,
+                                    fontSize:((Dimensions.width+Dimensions.height)/2)*0.02,
+                                    fontFamily:"roboto-bold",
+                                }}
+                            >
+                                {item.history.title}
+                            </Text>
+                        </View>
+                    </TouchableRipple>
+
+
+
+                </View>
+
+            </View>
+
+            : <TouchableRipple 
+                rippleColor={Theme[themeTypeContext].ripple_color_outlined}
+                onPress={()=>{router.navigate(`/view/${item.source}/${item.id}/?mode=local`)}}
+                style={styles.item_box}
+            >
+                <>
+                    <Image onError={(error:any)=>{console.log("load image error",error)}} source={cover.current} 
+                            style={styles.item_cover}
+                            contentFit="cover" transition={1000}
+                            onLoadEnd={()=>{cover.current = ""}}
+                        />
+                    
+                    <Text style={styles.item_title}>{item.info.title}</Text>
+                </>
+            </TouchableRipple>
+            }</>
+    </>}</>)
+    
+
+}
+
+export default ComicComponent;
+

frontend/app/recent/components/widgets/bookmark.tsx

@@ -0,0 +1,904 @@
+
+import React, { useEffect, useState, useCallback, useContext, useRef, Fragment, memo } 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 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';
+import ChapterDataStorage from '@/constants/module/storages/chapter_data_storage';
+
+interface BookmarkWidgetProps {
+    setIsLoading: any;
+    onRefresh: any;
+}
+
+const BookmarkWidget: React.FC<BookmarkWidgetProps> = ({
+    setIsLoading,
+    onRefresh,
+}) => {
+    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 [manageBookmark, setManageBookmark]:any = useState({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 =  useCallback(({item}:any) =>{
+            const [editTag, setEditTag]:any = useState(item.value)
+            useEffect(()=>{
+            },[manageBookmark])
+            
+            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 === item.value &&
+                                (<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}
+                                                autoFocus={true}
+                                                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={editTag}
+                                                onChangeText={(text)=>{
+                                                    setEditTag(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)
+                                                        }
+                                                        
+
+                                                        
+                                                    
+                                                        const index_2 = BOOKMARK_DATA.findIndex((item:any) => item.value === manageBookmark.edit);
+                                                        if (index_2 !== -1){
+                                                            BOOKMARK_DATA[index_2].label = editTag
+                                                            BOOKMARK_DATA[index_2].value = editTag
+                                                        }
+                                                        SET_BOOKMARK_DATA(BOOKMARK_DATA)
+                                                        setManageBookmark({...manageBookmark,edit:""})
+                                                        setEditTag("")
+                                                        
+                                                        onRefresh();
+                                                    }
+                                                    setShowMenuOption({...showMenuOption,state:false,id:""})
+                                                }}
+                                            >
+                                                
+                                                <Icon source={"check"} size={((Dimensions.width+Dimensions.height)/2)*0.035} color={"green"}/>
+                                            </TouchableRipple>
+                                        </View>
+                                    
+                                            
+
+                                </View>)
+
+                            }</>
+
+                            
+                            
+                            
+                        </View>
+                        
+                    )
+                }
+            </>)
+        }
+    ,[Theme,themeTypeContext,manageBookmark,searchTag,removeTag,createTag,showMenuOption,MIGRATE_BOOKMARK_DATA,BOOKMARK_DATA])
+    
+
+    const load_bookmark = async ()=>{
+        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(()=>{
+        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,
+                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,
+            }}
+        >
+            
+            <>{!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} 
+                                    
+                                    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) => 
+                                        (
+                                            <View key={item.value}>
+                                                <RenderTag item={item}/>
+                                                <View style={{width:"100%",height:2,backgroundColor:Theme[themeTypeContext].border_color}}/>
+                                            </View>
+                                        )
+                                    )}</>
+                                </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 tag 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</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 ()=>{
+                                setWidgetContext({state:false,component:<></>})
+                            })}
+                        >Done</Button>
+                    </View>
+                </View>
+            </>}</>
+            
+            <>{createTag.state &&
+                    <>
+                    <View 
+                        style={{
+                            height:"auto",
+                            display:"flex",
+                            flexDirection:"column",
+                            gap:12,
+                        }}
+                    >
+                        <TextInput mode="outlined" label="Create Tag"  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,
+                                            
+                                        },
+                                    });
+                                    onRefresh()
+                                }
+                            })}
+                        >Add</Button>
+                    </View>
+                </>
+            }</>
+
+        </View>
+        <>{showMenuOption.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={"cyan"}/>
+                        <View>
+                            <Text selectable={false}
+                                style={{
+                                    textAlign:"center",
+                                    color:"cyan",
+                                    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",
+                    padding:15,
+                }}
+            >
+                <View
+                    style={{
+                        backgroundColor:Theme[themeTypeContext].background_color,
+                        maxWidth:500,
+                        width:"100%",
+                        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);
+
+                                        
+                                        
+                                    
+                                        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("")
+                                        
+                                        onRefresh();
+                                    }}
+                                >
+                                    
+                                    <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);
+                                
+                                    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("")
+                                    onRefresh()
+                                    
+                                }}
+                            >
+                                
+                                <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/recent/index.tsx

@@ -0,0 +1,151 @@
+import React, { useEffect, useState, useCallback, useContext, useRef, useMemo } from 'react';
+import { Link, router, useLocalSearchParams, useFocusEffect } from 'expo-router';
+import { Image as RNImage, StyleSheet, useWindowDimensions, ScrollView, Pressable, RefreshControl, Platform, FlatList, TouchableOpacity } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Icon, MD3Colors, Button, Text, TextInput, TouchableRipple } from 'react-native-paper';
+import CircularProgress from 'react-native-circular-progress-indicator';
+import { ActivityIndicator } from 'react-native-paper';
+import { FlashList } from "@shopify/flash-list";
+
+
+import uuid from 'react-native-uuid';
+import Toast from 'react-native-toast-message';
+import { View, AnimatePresence } from 'moti';
+import * as Clipboard from 'expo-clipboard';
+import * as FileSystem from 'expo-file-system';
+import NetInfo from "@react-native-community/netinfo";
+import { Marquee } from '@animatereactnative/marquee';
+import { Slider } from '@rneui/themed-edge';
+
+
+import ComicComponent from './components/comic_component';
+import BookmarkWidget from './components/widgets/bookmark';
+
+import { __styles } from './stylesheet/styles';
+import Storage from '@/constants/module/storages/storage';
+import ChapterStorage from '@/constants/module/storages/chapter_storage';
+import Image from '@/components/Image';
+import {CONTEXT} from '@/constants/module/context';
+import {blobToBase64, base64ToBlob, getImageLayout} from "@/constants/module/file_manager";
+import Theme from '@/constants/theme';
+import ComicStorage from '@/constants/module/storages/comic_storage';
+
+const Index = ({}:any) => {
+    const Dimensions = useWindowDimensions();
+    const controller = new AbortController();
+    const signal = controller.signal;
+
+    const {showMenuContext, setShowMenuContext}:any = useContext(CONTEXT)
+    const {themeTypeContext, setThemeTypeContext}:any = useContext(CONTEXT)
+    const {apiBaseContext, setApiBaseContext}:any = useContext(CONTEXT)
+    const {widgetContext, setWidgetContext}:any = useContext(CONTEXT)
+    const {showCloudflareTurnstileContext, setShowCloudflareTurnstileContext}:any = useContext(CONTEXT)
+    
+    const [styles, setStyles]:any = useState("")
+    const [isLoading, setIsLoading] = useState<boolean>(true)
+    const [onRefresh, setOnRefresh] = useState(false)
+
+    
+    const [COMIC_DATA, SET_COMIC_DATA] = useState<any>([])
+
+
+    useFocusEffect(useCallback(() => {
+        (async ()=>{
+            setIsLoading(true)
+            const stored_recent = await Storage.get("RECENT") || []
+            stored_recent.sort((a:any,b:any) => b.timestamp - a.timestamp)
+            const stored_comic = []
+            for (const item of stored_recent) {
+                const comic = await ComicStorage.getByID(item.source,item.comic_id)
+                if (comic) stored_comic.push(comic)
+            }
+            SET_COMIC_DATA(stored_comic)
+            setIsLoading(false)
+        })()
+    },[onRefresh]))
+
+
+
+    const RenderComicComponent = useCallback(({item,index}:any) => {
+        console.log(item,index)
+        return <ComicComponent index={index} item={item} 
+            />
+    },[])
+
+    useFocusEffect(useCallback(() => {
+        setIsLoading(true)
+        setShowMenuContext(true)
+        setStyles(__styles(themeTypeContext,Dimensions))
+
+        return () => {
+            controller.abort();
+        };
+    },[]))
+
+    return (<>{styles && ! isLoading
+        ? <>
+            <View style={styles.screen_container}
+                
+            >
+                <View style={styles.header_container}>
+                    <Text style={styles.header_text}>Recent</Text>
+                </View>
+                <ScrollView
+                    contentContainerStyle={{
+                        width:"100%",
+                        height:COMIC_DATA.length ? "auto" : "100%",
+                        maxHeight:"auto",
+                        display:"flex",
+                        paddingHorizontal:12,
+                        paddingVertical:18,
+                        flexDirection:"row",
+                        justifyContent:"flex-start",
+                        gap:Math.max((Dimensions.width+Dimensions.height)/2*0.015,8),
+                        flexWrap:"wrap",
+                    }}
+                    
+                >
+                    <>{COMIC_DATA.length
+                        ? <>{COMIC_DATA.map((item:any,index:number) => (
+                                <RenderComicComponent key={index} item={item} index={index} />
+                            ))
+                        }</>
+                        : <View
+                            style={{
+                                width:"100%",
+                                height:"100%",
+                                backgroundColor:"transparent",
+                                display:"flex",
+                                justifyContent:"center",
+                                alignItems:"center",
+                                flexDirection:"row",
+                                gap:12,
+                            }}
+                        >   
+                            <>
+                                <Icon source={"dots-hexagon"} color={Theme[themeTypeContext].icon_color} size={((Dimensions.width+Dimensions.height)/2)*0.03}/>
+                                <Text selectable={false}
+                                    style={{
+                                        fontFamily:"roboto-bold",
+                                        fontSize:((Dimensions.width+Dimensions.height)/2)*0.025,
+                                        color:Theme[themeTypeContext].text_color,
+                                    }}
+                                >There no recent read.</Text>
+                            </>
+                        </View>
+                    }</>
+
+                </ScrollView>
+            </View>
+
+        </>
+        : <View style={{zIndex:5,width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center",backgroundColor:Theme[themeTypeContext].background_color}}>
+            <Image setShowCloudflareTurnstile={setShowCloudflareTurnstileContext} source={require("@/assets/gif/cat-loading.gif")} style={{width:((Dimensions.width+Dimensions.height)/2)*0.15,height:((Dimensions.width+Dimensions.height)/2)*0.15}}/>
+        </View>
+    }</>)
+    
+
+}
+
+export default Index;
+

frontend/app/recent/stylesheet/styles.tsx

@@ -0,0 +1,63 @@
+import { StyleSheet } from "react-native";
+import Theme from "@/constants/theme";
+
+export const __styles:any = (theme_type:string,Dimensions:any) => {
+    return StyleSheet.create({
+        screen_container: {
+            display: "flex",
+            width: "100%",
+            height: "100%",
+            backgroundColor: Theme[theme_type].background_color,
+        },
+        header_container: {
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+            paddingHorizontal: 15,
+            paddingVertical:10,
+            backgroundColor: Theme[theme_type].background_color,
+            borderBottomWidth: 0.5,
+            borderColor: Theme[theme_type].border_color,
+        },
+        header_text:{
+            fontFamily: "roboto-medium",
+            fontSize: ((Dimensions.width+Dimensions.height)/2)*0.04,
+            color: Theme[theme_type].text_color,
+            
+        },
+
+        item_box:{
+            display:"flex",
+            flexDirection:"column",
+            alignItems:"center",
+            gap:15,
+            height:"auto",
+            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.325,125),
+            borderRadius:8,
+            shadowColor: "#000",
+            shadowOffset: {
+                width: 0,
+                height: 1,
+            },
+            shadowOpacity: 0.22,
+            shadowRadius: 2.22,
+
+            elevation: 3,
+        },
+        item_title:{
+            color: Theme[theme_type].text_color,
+            fontFamily: "roboto-medium",
+            fontSize: ((Dimensions.width+Dimensions.height)/2)*0.025,
+            width:"100%",
+            height:"auto",
+            textAlign:"center",
+            flexShrink:1,
+        }
+    })}

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

@@ -12,6 +12,8 @@ import Toast from 'react-native-toast-message';
 import { View, AnimatePresence } from 'moti';
 import * as Clipboard from 'expo-clipboard';
 import NetInfo from "@react-native-community/netinfo";
+import _ from 'lodash'
+
 
 
 import Theme from '@/constants/theme';
@@ -20,6 +22,8 @@ import Storage from '@/constants/module/storages/storage';
 import ImageCacheStorage from '@/constants/module/storages/image_cache_storage';
 import ChapterStorage from '@/constants/module/storages/chapter_storage';
 import ComicStorage from '@/constants/module/storages/comic_storage';
+import CoverStorage from '@/constants/module/storages/cover_storage';
+
 import { CONTEXT } from '@/constants/module/context';
 import Dropdown from '@/components/dropdown';
 import PageNavigationWidget from '../componenets/widgets/page_navigation';
@@ -39,6 +43,8 @@ import { createSocket, setupSocketNetworkListener } from '../modules/socket';
 const Index = ({}:any) => {
     const SOURCE = useLocalSearchParams().source;
     const ID = useLocalSearchParams().comic_id;
+    const MODE = useLocalSearchParams().mode;
+    console.log(MODE)
 
     const {showMenuContext, setShowMenuContext}:any = useContext(CONTEXT)
     const {themeTypeContext, setThemeTypeContext}:any = useContext(CONTEXT)
@@ -61,10 +67,9 @@ const Index = ({}:any) => {
     
 
     const [CONTENT, SET_CONTENT]:any = useState({})
-    const [chapterRequested, setChapterRequested]:any = useState({})
-    const [chapterToDownload, setChapterToDownload]:any = useState({})
-    const [downloadProgress, setDownloadProgress]:any = useState(0)
-    const [chapterQueue, setChapterQueue]:any = useState({})
+    
+    
+    
     const [isLoading, setIsLoading]:any = useState(true);
     const [feedBack, setFeedBack]:any = useState("");
     const [showOption, setShowOption]:any = useState({type:null})
@@ -77,6 +82,11 @@ const Index = ({}:any) => {
     
     const socketNetWorkListener:any = useRef(null)
     const socket:any = useRef(null)
+
+    const download_progress:any = useRef({})
+    const chapter_queue:any = useRef({})
+    const chapter_requested:any = useRef({})
+    const chapter_to_download:any = useRef({})
     
     const controller = new AbortController();
     const signal = controller.signal;
@@ -87,30 +97,40 @@ const Index = ({}:any) => {
         
     },[CONTENT])
 
+    const RenderChapter = useCallback(({chapter}:any) => {
+        return <ChapterComponent 
+            SOURCE={SOURCE}
+            ID={ID}
+            page={page}
+            sort={sort}
+            chapter={chapter}
+            signal={signal}
+            isDownloading={isDownloading}
+            chapter_requested={chapter_requested}
+            chapter_to_download={chapter_to_download}
+            download_progress={download_progress}
+            chapter_queue={chapter_queue}
+    />
+    },[page,sort])
+
 
     // Worker for downloading chapter
     const download_chapter_interval:any = useRef(null)
     const isDownloading:any = useRef(false)
-    useEffect(() => {
+    useFocusEffect(useCallback(() => {
         clearInterval(download_chapter_interval.current)
-        
         download_chapter_interval.current = setInterval(() => {
-            if (!isDownloading.current && Object.keys(chapterToDownload).length){
+            if (!isDownloading.current && Object.keys(chapter_to_download.current).length){
                 isDownloading.current = true
-                console.log(isDownloading.current,chapterToDownload)
-                console.log("Downloading HERE")
                 download_chapter(
                     setShowCloudflareTurnstileContext, isDownloading, SOURCE, ID, 
-                    chapterRequested, setChapterRequested,
-                    chapterToDownload, setChapterToDownload,
-                    downloadProgress, setDownloadProgress,
-                    signal,
+                    chapter_requested, chapter_to_download, download_progress, signal,
                 )
             }
         },1000)
 
         return () => clearInterval(download_chapter_interval.current)
-    },[chapterToDownload])
+    },[]))
 
     // Setting up socket listener
     useFocusEffect(useCallback(() => {
@@ -130,10 +150,9 @@ const Index = ({}:any) => {
                 if (!stored_comic) return
                 const event = result.event
                 if (event.type === "chapter_queue_info"){
-                    console.log(event.chapter_queue)
-                    setChapterQueue(event.chapter_queue)
+                    chapter_queue.current = event.chapter_queue;
                 }else if (event.type === "chapter_ready_to_download"){
-                    get_requested_info(setShowCloudflareTurnstileContext, setChapterRequested, setChapterToDownload, signal, SOURCE, ID)
+                    get_requested_info(setShowCloudflareTurnstileContext, chapter_requested, chapter_to_download, signal, SOURCE, ID)
                 }
             }
         }
@@ -166,11 +185,11 @@ const Index = ({}:any) => {
     },[]))
 
 
-    const Load_Offline = async () => {
+    const Load_Local = async () => {
         Toast.show({
             type: 'info',
-            text1: '🌐 No internet connection available.',
-            text2: `Switching to offline mode.`,
+            text1: '💾 Local mode',
+            text2: `Press refresh button to fetch new updates.`,
             
             position: "bottom",
             visibilityTime: 6000,
@@ -191,6 +210,7 @@ const Index = ({}:any) => {
             if (stored_comic) {
                 const DATA:any = {}
                 DATA["id"] = ID
+                DATA["cover"] = await CoverStorage.get(`${SOURCE}-${ID}`)
                 
                 for (const [key, value] of Object.entries(stored_comic.info)) {
                     DATA[key] = value
@@ -244,18 +264,18 @@ const Index = ({}:any) => {
 
             const stored_comic = await ComicStorage.getByID(SOURCE,ID)
             if (stored_comic) {
-                await get_requested_info(setShowCloudflareTurnstileContext, setChapterRequested, setChapterToDownload, signal, SOURCE, ID)
-                
                 setBookmarked({state:true,tag:stored_comic.tag})
                 setHistory(stored_comic.history)
             }
             else setBookmarked({state:false,tag:""})
 
             const net_info = await NetInfo.fetch()
-            if (net_info.isConnected){
+            if (net_info.isConnected && MODE !== "local"){
+                if (stored_comic) await get_requested_info(setShowCloudflareTurnstileContext, chapter_requested, chapter_to_download, signal, SOURCE, ID)
                 get(setShowCloudflareTurnstileContext, setIsLoading, signal, __translate, setFeedBack, SOURCE, ID, SET_CONTENT)
             }else{
-                Load_Offline()
+                if (net_info.isConnected && stored_comic) await get_requested_info(setShowCloudflareTurnstileContext, chapter_requested, chapter_to_download, signal, SOURCE, ID)
+                Load_Local()
             }
             
         })()
@@ -280,11 +300,10 @@ const Index = ({}:any) => {
         if (net_info.isConnected){
             get(setShowCloudflareTurnstileContext, setIsLoading, signal, translate, setFeedBack, SOURCE, ID, SET_CONTENT)
             if (stored_comic) {
-                setHistory(stored_comic.history)
-                get_requested_info(setShowCloudflareTurnstileContext, setChapterRequested, setChapterToDownload, signal, SOURCE, ID)
+                get_requested_info(setShowCloudflareTurnstileContext, chapter_requested, chapter_to_download, signal, SOURCE, ID)
             }
         }else{
-            Load_Offline()
+            Load_Local()
         }
     }
 
@@ -312,7 +331,7 @@ const Index = ({}:any) => {
                         
                         onPress={()=>{
                             if (router.canGoBack()) router.back()
-                            else router.replace("/explore")
+                            else router.replace("/bookmark")
                         }}
                     >
                         <Icon source={"arrow-left-thin"} size={((Dimensions.width+Dimensions.height)/2)*0.045} color={Theme[themeTypeContext].icon_color}/>
@@ -354,7 +373,7 @@ const Index = ({}:any) => {
                             onRefresh()
                         }}
                     >
-                        <Icon source={"refresh"} size={((Dimensions.width+Dimensions.height)/2)*0.04} color={Theme[themeTypeContext].icon_color}/>
+                        <Icon source={"update"} size={((Dimensions.width+Dimensions.height)/2)*0.04} color={Theme[themeTypeContext].icon_color}/>
                     </TouchableRipple>
                     <TouchableRipple
                         rippleColor={Theme[themeTypeContext].ripple_color_outlined}
@@ -370,7 +389,7 @@ const Index = ({}:any) => {
                             Toast.show({
                                 type: 'info',
                                 text1: '📋 Copied to your clipboard.',
-                                text2: `${apiBaseContext}/view/${SOURCE}/${ID}/`,
+                                text2: `https://comicmtl.netlify.app/view/${SOURCE}/${ID}/`,
                                 
                                 position: "bottom",
                                 visibilityTime: 3000,
@@ -583,6 +602,7 @@ const Index = ({}:any) => {
                             onPress={()=>{
                                 setWidgetContext({state:true,component:
                                     <BookmarkWidget
+                                        setIsLoading={setIsLoading}
                                         onRefresh={onRefresh}
                                         SOURCE={SOURCE}
                                         ID={ID}
@@ -645,7 +665,7 @@ const Index = ({}:any) => {
                                         
                                     }}
                                     onPress={()=>{
-                                        router.push(`/read/${SOURCE}/${ID}/${history.idx}/`)
+                                        router.replace(`/read/${SOURCE}/${ID}/${history.idx}/`)
                                     }}
                                 >
                                     <View
@@ -679,44 +699,63 @@ const Index = ({}:any) => {
                                     </View>
                                 </TouchableRipple>
                                 : <TouchableRipple
-                                rippleColor={Theme[themeTypeContext].ripple_color_outlined}
-                                style={{
-                                    width:Dimensions.width*0.60,
-                                    display:"flex",
-                                    flexDirection:"column",
-                                    justifyContent:"center",
-                                    alignSelf:"center",
-                                    padding:8,
-                                    paddingVertical:12,
-                                    borderRadius:Dimensions.width*0.60/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 ()=>{
-                                    
-                                    if (bookmarked.state){
-                                        let chapter
-                                        if (sort === "descending"){
-                                            chapter = CONTENT?.chapters[CONTENT.chapters.length - 1]
-                                        }else{
-                                            chapter = CONTENT?.chapters[0]
-                                        }
-                                        const stored_chapter = await ChapterStorage.get(`${SOURCE}-${ID}`,chapter.id)
-                                        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}/${stored_chapter.idx}/`)
+                                    rippleColor={Theme[themeTypeContext].ripple_color_outlined}
+                                    style={{
+                                        width:Dimensions.width*0.60,
+                                        display:"flex",
+                                        flexDirection:"column",
+                                        justifyContent:"center",
+                                        alignSelf:"center",
+                                        padding:8,
+                                        paddingVertical:12,
+                                        borderRadius:Dimensions.width*0.60/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 ()=>{
+                                        
+                                        if (bookmarked.state){
+                                            let chapter
+                                            if (sort === "descending"){
+                                                chapter = CONTENT?.chapters[CONTENT.chapters.length - 1]
+                                            }else{
+                                                chapter = CONTENT?.chapters[0]
+                                            }
+                                            const stored_chapter = await ChapterStorage.get(`${SOURCE}-${ID}`,chapter.id)
+                                            if (stored_chapter.data_state === "completed"){
+                                                await ComicStorage.updateHistory(SOURCE,ID,{idx:chapter.idx, id:chapter.id, title:chapter.title})
+                                                router.replace(`/read/${SOURCE}/${ID}/${stored_chapter.idx}/`)
+                                                
+                                            }else{
+                                                Toast.show({
+                                                    type: 'error',
+                                                    text1: 'Chapter not download yet.',
+                                                    text2: "Press the button next to chapter title to download.",
+                                                    
+                                                    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,
+                                                        
+                                                    },
+                                                });
+                                            }
                                         }else{
                                             Toast.show({
                                                 type: 'error',
-                                                text1: 'Chapter not download yet.',
-                                                text2: "Press the button next to chapter title to download.",
+                                                text1: '🔖 Bookmark required.',
+                                                text2: `Add this comic to your bookmark to start reading.`,
                                                 
                                                 position: "bottom",
                                                 visibilityTime: 4000,
@@ -730,30 +769,11 @@ const Index = ({}:any) => {
                                                     
                                                 },
                                             });
-                                        }
-                                    }else{
-                                        Toast.show({
-                                            type: 'error',
-                                            text1: '🔖 Bookmark required.',
-                                            text2: `Add this comic to your bookmark to start reading.`,
-                                            
-                                            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,
-                                                
-                                            },
-                                        });
-                                    
                                         
-                                    }
-                                }}
-                            >
+                                            
+                                        }
+                                    }}
+                                >
                                 <View
                                     style={{
                                         display:"flex",
@@ -796,19 +816,31 @@ const Index = ({}:any) => {
                                 >Synopsis:</Text>
                             </View>
                             
-                            <Button mode='outlined'
+                            <TouchableRipple
+                                rippleColor={Theme[themeTypeContext].ripple_color_outlined}
                                 onPress={() => {
                                     if (showMoreSynopsis) setShowMoreSynopsis(false)
                                     else setShowMoreSynopsis(true)
                                 }}
-                                style={{borderWidth:0}}
-                                labelStyle={{
-                                    fontSize:((Dimensions.width+Dimensions.height)/2)*0.025,
-                                    fontFamily:"roboto-medium",
-                                    color:"cyan",
-
+                                style={{
+                                    borderWidth:0,
+                                    display:"flex",
+                                    justifyContent:"center",
+                                    borderRadius:((Dimensions.width+Dimensions.height)/2)*0.015,
+                                    paddingHorizontal:12,
+                                    backgroundColor:"transparent",
                                 }}
-                            >{showMoreSynopsis ? "Show Less" : "Show More"}</Button>
+                            >
+                                <Text selectable={false}
+                                    style={{
+                                        fontSize:((Dimensions.width+Dimensions.height)/2)*0.025,
+                                        fontFamily:"roboto-medium",
+                                        color:"cyan",
+                                        textAlign:"center",
+                                        textDecorationLine: showMoreSynopsis ? "underline" : "none",
+                                    }}
+                                >{showMoreSynopsis ? "Show Less" : "Show More"}</Text>
+                            </TouchableRipple>
 
                         </View>
                         
@@ -821,6 +853,7 @@ const Index = ({}:any) => {
                                 borderColor: Theme[themeTypeContext].border_color,
                                 borderBottomWidth:showMoreSynopsis ? 0 : 5,
                                 borderRadius:8,
+                                
                             }}
                             numberOfLines={showMoreSynopsis ? 0 : 2} 
                             ellipsizeMode='tail'
@@ -870,24 +903,7 @@ const Index = ({}:any) => {
                         <View style={styles.chapter_box}>
                             <>{CONTENT.chapters.length
                                 ? <>{CONTENT.chapters.slice((page-1)*MAX_OFFSET,((page-1)*MAX_OFFSET)+MAX_OFFSET).map((chapter:any,index:number) => 
-                                    <ChapterComponent 
-                                        key={index}
-                                        SOURCE={SOURCE}
-                                        ID={ID}
-                                        page={page}
-                                        sort={sort}
-                                        chapter={chapter}
-                                        signal={signal}
-                                        isDownloading={isDownloading}
-                                        chapterRequested={chapterRequested}
-                                        setChapterRequested={setChapterRequested}
-                                        chapterToDownload={chapterToDownload}
-                                        setChapterToDownload={setChapterToDownload}
-                                        downloadProgress={downloadProgress}
-                                        setDownloadProgress={setDownloadProgress}
-                                        setChapterQueue={setChapterQueue}
-                                        chapterQueue={chapterQueue}
-                                    />
+                                    <RenderChapter key={index} chapter={chapter}/>
                                 )}</>
                                 : <Text
                                     style={{

frontend/app/view/componenets/chapter.tsx

@@ -12,6 +12,7 @@ import Toast from 'react-native-toast-message';
 import { View, AnimatePresence } from 'moti';
 import * as Clipboard from 'expo-clipboard';
 import NetInfo from "@react-native-community/netinfo";
+import dayjs from 'dayjs'; import utc from 'dayjs/plugin/utc'; dayjs.extend(utc);
 
 
 import Theme from '@/constants/theme';
@@ -36,14 +37,10 @@ const ChapterComponent = ({
     chapter,
     signal,
     isDownloading,
-    chapterRequested,
-    setChapterRequested,
-    downloadProgress,
-    setDownloadProgress,
-    chapterToDownload,
-    setChapterToDownload,
-    setChapterQueue,
-    chapterQueue,
+    chapter_requested,
+    download_progress,
+    chapter_to_download,
+    chapter_queue,
 
 }:any) => {
     const {showMenuContext, setShowMenuContext}:any = useContext(CONTEXT)
@@ -57,9 +54,87 @@ const ChapterComponent = ({
 
     const [styles, setStyles]:any = useState("")
     const [is_saved, set_is_saved] = useState(false)
+    const [isLoading, setIsLoading] = useState(true);
     const [is_net_connected, set_is_net_connected]:any = useState(false)
 
+
+    const [chapterQueue, setChapterQueue]:any = useState({})
+    const [chapterRequested, setChapterRequested]:any = useState({})
+    const [chapterToDownload, setChapterToDownload]:any = useState({})
+    const [downloadProgress, setDownloadProgress]:any = useState({[chapter.id]:{progress:0,total:100}})
+
+
+    const chapter_status_interval = useRef<any>(null)
+    const is_running = useRef<boolean>(false)
+
+    useEffect(()=>{
+        // console.log("CTD", chapterToDownload)
+    },[chapterToDownload])
+
+    useEffect(()=>{
+        // console.log("CR", chapterRequested)
+    },[chapterRequested])
+
+    useFocusEffect(useCallback(() => {
+        clearInterval(chapter_status_interval.current)
+        chapter_status_interval.current = setInterval(() => {
+            if (is_running.current) return
+            is_running.current = true
+
+            // current -> Checking for chapter requested
+            if (chapter_requested.current.hasOwnProperty(chapter.id) && !chapterRequested.hasOwnProperty(chapter.id)) {
+                setChapterRequested({[chapter.id]:chapter_requested.current[chapter.id]})
+            }else if (
+                chapter_requested.current.hasOwnProperty(chapter.id) 
+                && chapter_requested.current[chapter.id]?.state !== chapterRequested[chapter.id]?.state
+            ) {
+                setChapterRequested({[chapter.id]:chapter_requested.current[chapter.id]})
+            }else if (!chapter_requested.current.hasOwnProperty(chapter.id) && chapterRequested.hasOwnProperty(chapter.id)){
+                setChapterRequested({})
+            }
+
+            // current -> Checking for chapter to download
+            if (chapter_to_download.current.hasOwnProperty(chapter.id) && !chapterToDownload.hasOwnProperty(chapter.id)) {
+                setChapterToDownload({[chapter.id]:chapter_to_download.current[chapter.id]})
+            }else if (
+                chapter_to_download.current.hasOwnProperty(chapter.id) 
+                && chapter_to_download.current[chapter.id]?.state !== chapterToDownload[chapter.id]?.state
+            ) {
+                setChapterToDownload({[chapter.id]:chapter_to_download.current[chapter.id]})
+            }else if (!chapter_to_download.current.hasOwnProperty(chapter.id) && chapterToDownload.hasOwnProperty(chapter.id)){
+                setChapterToDownload({})
+            }
+
+            // current -> Check download progress
+            if (download_progress.current.hasOwnProperty(chapter.id) && !downloadProgress.hasOwnProperty(chapter.id)) {
+                setDownloadProgress({[chapter.id]:download_progress.current[chapter.id]})
+            }else if (
+                download_progress.current.hasOwnProperty(chapter.id) 
+                && (
+                    download_progress.current[chapter.id]?.progress !== downloadProgress[chapter.id]?.progress 
+                    || download_progress.current[chapter.id]?.total !== downloadProgress[chapter.id]?.total
+                )
+            ) {
+                setDownloadProgress({[chapter.id]:download_progress.current[chapter.id]})
+            }else if (!download_progress.current.hasOwnProperty(chapter.id) && downloadProgress.hasOwnProperty(chapter.id)){
+                setDownloadProgress({})
+            }
+
+            // current -> Check chapter Queue
+            if (chapter_queue.current?.queue?.hasOwnProperty(`${SOURCE}-${ID}-${chapter.idx}`)) {
+                setChapterQueue(chapter_queue.current)
+            }else if (chapterQueue.queue?.hasOwnProperty(`${SOURCE}-${ID}-${chapter.idx}`)){
+                setChapterQueue({})
+            }
+
+            is_running.current = false
+        },3000)
+        return () => clearInterval(chapter_status_interval.current)
+    },[chapterQueue,chapterRequested,chapterToDownload, downloadProgress]))
+
+
     useEffect(() => {(async () => {
+        setIsLoading(true)
         const net_info = await NetInfo.fetch()
         set_is_net_connected(net_info.isConnected)
 
@@ -67,27 +142,26 @@ const ChapterComponent = ({
         const stored_chapter = await ChapterStorage.get(`${SOURCE}-${ID}`,chapter.id)
         if (stored_chapter?.data_state === "completed") set_is_saved(true)
         else set_is_saved(false)
+        setIsLoading(false)
     })()}, [])
 
     useEffect(()=>{(async () => {
+        setIsLoading(true)
         const stored_chapter = await ChapterStorage.get(`${SOURCE}-${ID}`,chapter.id)
         if (stored_chapter?.data_state === "completed") set_is_saved(true)
         else set_is_saved(false)
+        setIsLoading(false)
     })()},[page,sort])
 
     const Request_Download = async (CHAPTER:any) => {
-        
         const stored_comic = await ComicStorage.getByID(SOURCE,ID)
         if (stored_comic)  {
             setWidgetContext({state:true,component:<RequestChapterWidget
                 SOURCE={SOURCE}
                 ID={ID}
                 CHAPTER={CHAPTER}
-                chapterQueue={chapterQueue}
-                setChapterQueue={setChapterQueue}
-                chapterRequested={chapterRequested}
-                setChapterRequested={setChapterRequested}
-                get_requested_info={() => get_requested_info(setShowCloudflareTurnstileContext, setChapterRequested, setChapterToDownload, signal, SOURCE, ID)}
+                chapter_requested={chapter_requested}
+                get_requested_info={() => get_requested_info(setShowCloudflareTurnstileContext, chapter_requested, chapter_to_download, signal, SOURCE, ID)}
             />})
         }
         else{
@@ -134,7 +208,8 @@ 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}/${chapter.idx}/`)
+                    
+                    router.navigate(`/read/${SOURCE}/${ID}/${chapter.idx}/`)
                 }else{
                     Toast.show({
                         type: 'error',
@@ -158,142 +233,143 @@ const ChapterComponent = ({
         >
             {chapter.title}
         </Button>
-        {is_net_connected || is_saved
-            ? <>{is_saved 
-                ? <Icon source={"content-save-check"} size={((Dimensions.width+Dimensions.height)/2)*0.0425} color={Theme[themeTypeContext].icon_color}/>
-                : <>
-                    <>{chapterRequested[chapter.id]?.state === "queue" && !chapterQueue?.queue?.hasOwnProperty(`${SOURCE}-${ID}-${chapter.idx}`) 
-                        && <ActivityIndicator animating={true} color={Theme[themeTypeContext].icon_color} />
-                    }</>
-                    
+        {isLoading
+            ? (<ActivityIndicator animating={true} color={Theme[themeTypeContext].icon_color} />)
+            
+            : <>{is_net_connected || is_saved
+                ? <>{is_saved 
+                    ? <Icon source={"content-save-check"} size={((Dimensions.width+Dimensions.height)/2)*0.0425} color={Theme[themeTypeContext].icon_color}/>
+                    : <>
+                        <>{chapterRequested[chapter.id]?.state === "queue" && !chapterQueue?.queue?.hasOwnProperty(`${SOURCE}-${ID}-${chapter.idx}`) 
+                            && <ActivityIndicator animating={true} color={"#7df9ff"} />
+                        }</>
+                        
 
-                    <>{chapterRequested[chapter.id]?.state === "unkown" && !chapterQueue.queue?.hasOwnProperty(`${SOURCE}-${ID}-${chapter.idx}`) 
-                        && <TouchableRipple
-                            rippleColor={Theme[themeTypeContext].ripple_color_outlined}
-                            style={{
-                                borderRadius:5,
-                                borderWidth:0,
-                                padding:5,
-                            }}
-                            
-                            onPress={()=>{
-                                Toast.show({
-                                    type: 'error',
-                                    text1: '❓Request not found in server.',
-                                    text2: "You request this chapter but the server doesn't have this in queue.\nTry request again.",
-                                    
-                                    position: "bottom",
-                                    visibilityTime: 12000,
-                                    text1Style:{
-                                        fontFamily:"roboto-bold",
-                                        fontSize:((Dimensions.width+Dimensions.height)/2)*0.025
-                                    },
-                                    text2Style:{
-                                        fontFamily:"roboto-medium",
-                                        fontSize:((Dimensions.width+Dimensions.height)/2)*0.0185,
-                                        
-                                    },
-                                });
-                                Request_Download(chapter)
-                            }}
-                        >
-                            <Icon source={"alert-circle"} size={((Dimensions.width+Dimensions.height)/2)*0.04} color={"red"}/>
-
-                        </TouchableRipple>
-                    }</>
-
-                    <>{chapterRequested[chapter.id]?.state === "ready"
-                        && <>{chapterToDownload[chapter.id]?.state === "downloading"
-                            ? <CircularProgress 
-                                value={downloadProgress[chapter.id].progress} 
-                                maxValue={downloadProgress[chapter.id].total}
-                                radius={((Dimensions.width+Dimensions.height)/2)*0.0225}
-                                inActiveStrokeColor={Theme[themeTypeContext].border_color}
+                        <>{chapterRequested[chapter.id]?.state === "unkown" && !chapterQueue.queue?.hasOwnProperty(`${SOURCE}-${ID}-${chapter.idx}`) 
+                            && <TouchableRipple
+                                rippleColor={Theme[themeTypeContext].ripple_color_outlined}
+                                style={{
+                                    borderRadius:5,
+                                    borderWidth:0,
+                                    padding:5,
+                                }}
                                 
-                                showProgressValue={false}
-                                title={"📥"}
-                                titleStyle={{
-                                    pointerEvents:"none",
-                                    color:Theme[themeTypeContext].text_color,
-                                    fontSize:((Dimensions.width+Dimensions.height)/2)*0.025,
-                                    fontFamily:"roboto-medium",
-                                    textAlign:"center",
+                                onPress={()=>{
+                                    Toast.show({
+                                        type: 'error',
+                                        text1: '❓Request not found in server.',
+                                        text2: "You request this chapter but the server doesn't have this in queue.\nTry request again.",
+                                        
+                                        position: "bottom",
+                                        visibilityTime: 12000,
+                                        text1Style:{
+                                            fontFamily:"roboto-bold",
+                                            fontSize:((Dimensions.width+Dimensions.height)/2)*0.025
+                                        },
+                                        text2Style:{
+                                            fontFamily:"roboto-medium",
+                                            fontSize:((Dimensions.width+Dimensions.height)/2)*0.0185,
+                                            
+                                        },
+                                    });
+                                    Request_Download(chapter)
                                 }}
-                                onAnimationComplete={async ()=>{
-                                    if (downloadProgress[chapter.id].progress !== downloadProgress[chapter.id].total) return
+                            >
+                                <Icon source={"alert-circle"} size={((Dimensions.width+Dimensions.height)/2)*0.04} color={"red"}/>
+
+                            </TouchableRipple>
+                        }</>
+
+                        <>{chapterRequested[chapter.id]?.state === "ready"
+                            && <>{chapterToDownload[chapter.id]?.state === "downloading"
+                                ? <CircularProgress 
+                                    value={downloadProgress[chapter.id].progress} 
+                                    maxValue={downloadProgress[chapter.id].total}
+                                    radius={((Dimensions.width+Dimensions.height)/2)*0.0225}
+                                    inActiveStrokeColor={Theme[themeTypeContext].border_color}
                                     
-                                    const stored_chapter_requested = (await ComicStorage.getByID(SOURCE,ID)).chapter_requested
-                                    const new_chapter_requested = stored_chapter_requested.filter((item:any) => item.chapter_id !== chapter.id);
-                                    await ComicStorage.updateChapterQueue(SOURCE,ID,new_chapter_requested)
+                                    showProgressValue={false}
+                                    title={"📥"}
+                                    titleStyle={{
+                                        pointerEvents:"none",
+                                        color:Theme[themeTypeContext].text_color,
+                                        fontSize:((Dimensions.width+Dimensions.height)/2)*0.025,
+                                        fontFamily:"roboto-medium",
+                                        textAlign:"center",
+                                    }}
+                                    onAnimationComplete={async ()=>{
+                                        if (downloadProgress[chapter.id].progress !== downloadProgress[chapter.id].total) return
+                                        
+                                        const stored_chapter_requested = (await ComicStorage.getByID(SOURCE,ID)).chapter_requested
+                                        const new_chapter_requested = stored_chapter_requested.filter((item:any) => item.chapter_id !== chapter.id);
+                                        await ComicStorage.updateChapterQueue(SOURCE,ID,new_chapter_requested)
 
-                                    delete chapterRequested[chapter.id]
-                                    setChapterRequested(chapterRequested)
+                                        delete chapter_requested.current[chapter.id]
+                                        setChapterRequested({})
 
-                                    const chapter_to_download = chapterToDownload
-                                    delete chapter_to_download[chapter.id]
-                                    setChapterToDownload(chapter_to_download)
+                                        delete chapter_to_download.current[chapter.id]
+                                        setChapterToDownload({})
 
-                                    const download_progress = downloadProgress
-                                    delete download_progress[chapter.id]
-                                    setDownloadProgress(download_progress)
+                                        delete download_progress[chapter.id]
+                                        setDownloadProgress({})
 
-                                    set_is_saved(true)
-                                    isDownloading.current = false
-                                    console.log("DONE!",downloadProgress[chapter.id])
-                                }}
-                            />
-                            : <ActivityIndicator animating={true} color={"green"} />
+                                        set_is_saved(true)
+                                        isDownloading.current = false
+                                        console.log("DONE DOWNLOADING!")
+                                    }}
+                                />
+                                : <ActivityIndicator animating={true} color={"green"} />
+                            }</>
                         }</>
-                    }</>
-                    
-                    <>{chapterQueue.queue?.hasOwnProperty(`${SOURCE}-${ID}-${chapter.idx}`) && !(chapterRequested[chapter.id]?.state === "ready")
-                        && <>{chapterQueue.queue[`${SOURCE}-${ID}-${chapter.idx}`]
-                            ? <CircularProgress 
-                                value={100 - (((chapterQueue.queue[`${SOURCE}-${ID}-${chapter.idx}`])*100)/chapterQueue.max_queue)} 
-                                maxValue={100}
-                                radius={((Dimensions.width+Dimensions.height)/2)*0.0225}
-                                inActiveStrokeColor={Theme[themeTypeContext].border_color}
+                        
+                        <>{chapterQueue.queue?.hasOwnProperty(`${SOURCE}-${ID}-${chapter.idx}`) && !(chapterRequested[chapter.id]?.state === "ready")
+                            && <>{chapterQueue.queue[`${SOURCE}-${ID}-${chapter.idx}`]
+                                ? <CircularProgress 
+                                    value={100 - (((chapterQueue.queue[`${SOURCE}-${ID}-${chapter.idx}`])*100)/chapterQueue.max_queue)} 
+                                    maxValue={100}
+                                    radius={((Dimensions.width+Dimensions.height)/2)*0.0225}
+                                    inActiveStrokeColor={Theme[themeTypeContext].border_color}
+                                    
                                 
-                            
-                                showProgressValue={false}
-                                title={chapterQueue.queue[`${SOURCE}-${ID}-${chapter.idx}`]}
-                                titleStyle={{
-                                    pointerEvents:"none",
-                                    color:Theme[themeTypeContext].text_color,
-                                    fontSize:((Dimensions.width+Dimensions.height)/2)*0.025,
-                                    fontFamily:"roboto-medium",
-                                    textAlign:"center",
+                                    showProgressValue={false}
+                                    title={chapterQueue.queue[`${SOURCE}-${ID}-${chapter.idx}`]}
+                                    titleStyle={{
+                                        pointerEvents:"none",
+                                        color:Theme[themeTypeContext].text_color,
+                                        fontSize:((Dimensions.width+Dimensions.height)/2)*0.025,
+                                        fontFamily:"roboto-medium",
+                                        textAlign:"center",
+                                    }}
+                                    onAnimationComplete={()=>{
+                                        get_requested_info(setShowCloudflareTurnstileContext, setChapterRequested, chapter_to_download, signal, SOURCE, ID)
+                                    }}
+                                />
+                                : <ActivityIndicator animating={true} />
+                            }</>
+                        }</>
+
+                        <>{!chapterRequested.hasOwnProperty(chapter.id) && !chapterQueue.queue?.hasOwnProperty(`${SOURCE}-${ID}-${chapter.idx}`)
+                            ? <TouchableRipple
+                                rippleColor={Theme[themeTypeContext].ripple_color_outlined}
+                                style={{
+                                    borderRadius:5,
+                                    borderWidth:0,
+                                    padding:5,
                                 }}
-                                onAnimationComplete={()=>{
-                                    console.log("HAHA",chapterQueue)
-                                    get_requested_info(setShowCloudflareTurnstileContext, setChapterRequested, setChapterToDownload, signal, SOURCE, ID)
+                                
+                                onPress={()=>{
+                                    Request_Download(chapter)
                                 }}
-                            />
-                            : <ActivityIndicator animating={true} />
+                            >
+                                <Icon source={"cloud-download"} size={((Dimensions.width+Dimensions.height)/2)*0.04} color={Theme[themeTypeContext].icon_color}/>
+
+                            </TouchableRipple>
+                            :<></>
                         }</>
-                    }</>
-
-                    <>{!chapterRequested.hasOwnProperty(chapter.id) && !chapterQueue.queue?.hasOwnProperty(`${SOURCE}-${ID}-${chapter.idx}`)
-                        ? <TouchableRipple
-                            rippleColor={Theme[themeTypeContext].ripple_color_outlined}
-                            style={{
-                                borderRadius:5,
-                                borderWidth:0,
-                                padding:5,
-                            }}
-                            
-                            onPress={()=>{
-                                Request_Download(chapter)
-                            }}
-                        >
-                            <Icon source={"cloud-download"} size={((Dimensions.width+Dimensions.height)/2)*0.04} color={Theme[themeTypeContext].icon_color}/>
-
-                        </TouchableRipple>
-                        :<></>
-                    }</>
-                </>
+                    </>
+                }</>
+                : <Icon source={"wifi-off"} size={((Dimensions.width+Dimensions.height)/2)*0.0425} color={Theme[themeTypeContext].icon_color}/>
             }</>
-            : <Icon source={"wifi-off"} size={((Dimensions.width+Dimensions.height)/2)*0.0425} color={Theme[themeTypeContext].icon_color}/>
         }
     </View>}</>
 }

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

@@ -1,5 +1,5 @@
 
-import React, { useEffect, useState, useCallback, useContext, useRef, Fragment } from 'react';
+import React, { useEffect, useState, useCallback, useContext, useRef, Fragment, memo } 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';
@@ -17,9 +17,10 @@ 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';
-
+import ChapterDataStorage from '@/constants/module/storages/chapter_data_storage';
 
 interface BookmarkWidgetProps {
+    setIsLoading: any;
     onRefresh: any;
     SOURCE: string | string[];
     ID: string | string[];
@@ -27,10 +28,11 @@ interface BookmarkWidgetProps {
 }
 
 const BookmarkWidget: React.FC<BookmarkWidgetProps> = ({
+    setIsLoading,
     onRefresh,
     SOURCE,
     ID,
-    CONTENT
+    CONTENT,
 }) => {
     const Dimensions = useWindowDimensions();
 
@@ -58,206 +60,207 @@ const BookmarkWidget: React.FC<BookmarkWidgetProps> = ({
     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
+    const RenderTag =  useCallback(({item}:any) =>{
+            const [editTag, setEditTag]:any = useState(item.value)
+            useEffect(()=>{
+            },[manageBookmark])
+            
+            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:"auto",
+                                        width:"100%",
+                                        display:"flex",
+                                        flexDirection:"row",
+                                        justifyContent:"space-between",
+                                        alignItems:"center",
                                         height:"auto",
-                                        
+                                        gap:18,
                                     }}
                                 >
-                                    
-                                    <TouchableRipple
-                                        
-                                        rippleColor={Theme[themeTypeContext].ripple_color_outlined}
+                                    <Text
                                         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,
-                                            })
-
-                                            
-                                            
+                                            color:"white",
+                                            fontFamily:"roboto-medium",
+                                            fontSize:(Dimensions.width+Dimensions.height)/2*0.025
                                         }}
-                                    >
-                                        
-                                        <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>
+                                    >{item.label}</Text>
                                     <View
                                         style={{
-                                            display:"flex",
-                                            flexDirection:"row",
-                                            gap:8,
+                                            width:"auto",
+                                            height:"auto",
+                                            
                                         }}
                                     >
+                                        
                                         <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:""})
+                                            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={"close"} size={((Dimensions.width+Dimensions.height)/2)*0.035} color={"red"}/>
+                                            <Icon source={"dots-vertical"} size={((Dimensions.width+Dimensions.height)/2)*0.035} color={Theme[themeTypeContext].icon_color}/>
                                         </TouchableRipple>
-                                        <TouchableRipple
-                                            rippleColor={Theme[themeTypeContext].ripple_color_outlined}
+                                    </View>
+                                </View>)
+                            }</>
+                            <>{manageBookmark.edit === item.value &&
+                                (<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}
+                                                autoFocus={true}
+                                                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={editTag}
+                                                onChangeText={(text)=>{
+                                                    setEditTag(text)
+                                                }}
+                                            />
+                                        </View>
+                                        <View
                                             style={{
-                                                borderRadius:5,
-                                                borderWidth:0,
-                                                backgroundColor: "transparent",
-                                                padding:5,
+                                                display:"flex",
+                                                flexDirection:"row",
+                                                gap:8,
                                             }}
+                                        >
+                                            <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");
+                                                onPress={()=>{
+                                                    setManageBookmark({...manageBookmark,edit:""})
+                                                    setEditTag("")
+                                                    setShowMenuOption({...showMenuOption,state:false,id:""})
+                                                }}
+                                            >
                                                 
-                                                const index = stored_bookmark.findIndex((item:string) => item === manageBookmark.edit);
-                                                
-                                                if (index !== -1){
-                                                    stored_bookmark[index] = editTag;
-                                                    await Storage.store("bookmark", stored_bookmark)
+                                                <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,
+                                                }}
 
-                                                    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:<></>});
+                                                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)
 
-                                                    }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
+                                                        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) && (editTag !== 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("")
                                                         }
-                                                        SET_BOOKMARK_DATA(BOOKMARK_DATA)
-                                                        setManageBookmark({...manageBookmark,edit:""})
-                                                        setEditTag("")
+                                                        
                                                     }
-                                                    
-                                                }
-                                                setShowMenuOption({...showMenuOption,state:false,id:""})
-                                            }}
-                                        >
+                                                    setShowMenuOption({...showMenuOption,state:false,id:""})
+                                                }}
+                                            >
+                                                
+                                                <Icon source={"check"} size={((Dimensions.width+Dimensions.height)/2)*0.035} color={"green"}/>
+                                            </TouchableRipple>
+                                        </View>
+                                    
                                             
-                                            <Icon source={"check"} size={((Dimensions.width+Dimensions.height)/2)*0.035} color={"green"}/>
-                                        </TouchableRipple>
-                                    </View>
-                                
-                                        
 
-                            </View>)
+                                </View>)
 
-                        }</>
+                            }</>
 
+                            
+                            
+                            
+                        </View>
                         
-                        
-                        
-                    </View>
-                    
-                )
-            }
-        </>)
-    }
-
+                    )
+                }
+            </>)
+        }
+    ,[Theme,themeTypeContext,manageBookmark,searchTag,removeTag,createTag,defaultTag,bookmark,showMenuOption,MIGRATE_BOOKMARK_DATA,BOOKMARK_DATA])
     
 
     const load_bookmark = async ()=>{
@@ -283,7 +286,6 @@ const BookmarkWidget: React.FC<BookmarkWidgetProps> = ({
     }
 
     useEffect(()=>{
-        console.log(BOOKMARK_DATA)
         SET_MIGRATE_BOOKMARK_DATA([{label:"None",value:""},...BOOKMARK_DATA])
     },[BOOKMARK_DATA])
 
@@ -298,8 +300,8 @@ const BookmarkWidget: React.FC<BookmarkWidgetProps> = ({
             style={{
                 zIndex:10,
                 backgroundColor:Theme[themeTypeContext].background_color,
-                width:Dimensions.width*0.35,
-                minWidth:500,
+                maxWidth:500,
+                width:"100%",
                 
                 borderColor:Theme[themeTypeContext].border_color,
                 borderWidth:2,
@@ -351,7 +353,7 @@ const BookmarkWidget: React.FC<BookmarkWidgetProps> = ({
                                 theme_type={themeTypeContext}
                                 Dimensions={Dimensions}
 
-                                label='Add to bookmark' 
+                                label='Add to tag' 
                                 data={BOOKMARK_DATA}
                                 value={bookmark}
                                 onChange={(async (item:any) => {
@@ -420,10 +422,9 @@ const BookmarkWidget: React.FC<BookmarkWidgetProps> = ({
                                     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 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,
@@ -457,7 +458,7 @@ const BookmarkWidget: React.FC<BookmarkWidgetProps> = ({
                                 style={{flex:1}}
                             >
                                 <TextInput mode="outlined" label="Search" textColor={Theme[themeTypeContext].text_color} 
-                                    placeholder={""}
+                                    
                                     style={{
                                         
                                         backgroundColor:Theme[themeTypeContext].background_color,
@@ -491,10 +492,14 @@ const BookmarkWidget: React.FC<BookmarkWidgetProps> = ({
                                         
                                     }}
                                 >
-                                    <>{BOOKMARK_DATA.map((item:any) => <Fragment key={item.value}>
-                                        <RenderTag item={item}/>
-                                        <View style={{width:"100%",height:2,backgroundColor:Theme[themeTypeContext].border_color}}/>
-                                    </Fragment>)}</>
+                                    <>{BOOKMARK_DATA.map((item:any) => 
+                                        (
+                                            <View key={item.value}>
+                                                <RenderTag item={item}/>
+                                                <View style={{width:"100%",height:2,backgroundColor:Theme[themeTypeContext].border_color}}/>
+                                            </View>
+                                        )
+                                    )}</>
                                 </ScrollView>
                             </View>
                         </>
@@ -505,7 +510,7 @@ const BookmarkWidget: React.FC<BookmarkWidgetProps> = ({
                                 color:Theme[themeTypeContext].text_color,
                                 fontSize:(Dimensions.width+Dimensions.height)/2*0.045,
                                 fontFamily:"roboto-bold",
-                            }}>No bookmark found</Text>
+                            }}>No tag found</Text>
                         </>
                         
                     }</>
@@ -530,7 +535,7 @@ const BookmarkWidget: React.FC<BookmarkWidgetProps> = ({
                                 setCreateTag({state:true,title:""})
                                 setShowMenuOption({...showMenuOption,state:false,id:""})
                             })}
-                        >+ Create Bookmark</Button>
+                        >+ Create</Button>
                         <Button mode='outlined' 
                             labelStyle={{
                                 color:Theme[themeTypeContext].text_color,
@@ -564,7 +569,7 @@ const BookmarkWidget: React.FC<BookmarkWidgetProps> = ({
                             gap:12,
                         }}
                     >
-                        <TextInput mode="outlined" label="Create Bookmark"  textColor={Theme[themeTypeContext].text_color} maxLength={72}
+                        <TextInput mode="outlined" label="Create Tag"  textColor={Theme[themeTypeContext].text_color} maxLength={72}
                             placeholder="Bookmark Tag"
                             
                             right={<TextInput.Affix text={`| Max: 72`} />}
@@ -738,6 +743,8 @@ const BookmarkWidget: React.FC<BookmarkWidgetProps> = ({
                                     }} 
                                     style={{backgroundColor:"red",borderRadius:5}} 
                                     onPress={(async ()=>{
+                                        setWidgetContext({state:false,component:<></>})
+                                        setIsLoading(true)
                                         setRemoveTag({...removeTag,removing:false})
                                         if (Platform.OS !== "web"){
                                             const comic_dir = FileSystem.documentDirectory + "ComicMTL/" + `${SOURCE}/` + `${ID}/`
@@ -745,10 +752,10 @@ const BookmarkWidget: React.FC<BookmarkWidgetProps> = ({
                                         }
                                         
                                         await ChapterStorage.drop(`${SOURCE}-${CONTENT.id}`)
+                                        await ChapterDataStorage.removeByComicID(CONTENT.id)
                                         await ComicStorage.removeByID(SOURCE,CONTENT.id)
-                                        
+
                                         onRefresh()
-                                        setWidgetContext({state:false,component:<></>})
                                     })}
                                 >Yes</Button>
                             </>
@@ -809,12 +816,12 @@ const BookmarkWidget: React.FC<BookmarkWidgetProps> = ({
                             
                         }}
                     >
-                        <Icon source={"pencil"} size={((Dimensions.width+Dimensions.height)/2)*0.025} color={"blue"}/>
+                        <Icon source={"pencil"} size={((Dimensions.width+Dimensions.height)/2)*0.025} color={"cyan"}/>
                         <View>
                             <Text selectable={false}
                                 style={{
                                     textAlign:"center",
-                                    color:"blue",
+                                    color:"cyan",
                                     fontFamily:"roboto-medium",
                                     fontSize:(Dimensions.width+Dimensions.height)/2*0.02
                                 }}
@@ -881,13 +888,14 @@ const BookmarkWidget: React.FC<BookmarkWidgetProps> = ({
                     display:"flex",
                     justifyContent:"center",
                     alignItems:"center",
+                    padding:15,
                 }}
             >
                 <View
                     style={{
                         backgroundColor:Theme[themeTypeContext].background_color,
-                        width:Dimensions.width*0.35,
-                        minWidth:500,
+                        maxWidth:500,
+                        width:"100%",
                         height:"auto",
                         
                         borderColor:Theme[themeTypeContext].border_color,

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

@@ -23,21 +23,15 @@ interface RequestChapterWidgetProps {
     SOURCE: string | string[];
     ID: string | string[];
     CHAPTER: any;
-    chapterQueue: any;
-    setChapterQueue: any;
-    chapterRequested: any;
-    setChapterRequested: any;
+    chapter_requested: any;
     get_requested_info: any;
-  }
+}
 
 const RequestChapterWidget: React.FC<RequestChapterWidgetProps> = ({
     SOURCE,
     ID,
     CHAPTER,
-    chapterQueue,
-    setChapterQueue,
-    chapterRequested,
-    setChapterRequested,
+    chapter_requested,
     get_requested_info
 }) => {
     const Dimensions = useWindowDimensions();
@@ -102,7 +96,7 @@ const RequestChapterWidget: React.FC<RequestChapterWidgetProps> = ({
                 theme_type={themeTypeContext}
                 Dimensions={Dimensions}
 
-                label='Colorize' 
+                label='Colorization' 
                 data={[
                     { 
                         label: "Enable", 
@@ -122,7 +116,7 @@ const RequestChapterWidget: React.FC<RequestChapterWidgetProps> = ({
                 theme_type={themeTypeContext}
                 Dimensions={Dimensions}
 
-                label='Translation' 
+                label='Translation (Beta)' 
                 data={[
                     { 
                         label: "Enable", 
@@ -219,9 +213,7 @@ const RequestChapterWidget: React.FC<RequestChapterWidgetProps> = ({
                     style={{backgroundColor:"green",borderRadius:5}} 
                     onPress={(async ()=>{
                         setIsRequesting(true)
-                        const new_queue:any = {}
-                        new_queue[CHAPTER.id] = "queue"
-                        setChapterRequested({...chapterRequested,...new_queue})
+                        chapter_requested.current[CHAPTER.id] = {state: "queue"}
                         
                         const API_BASE = await Storage.get("IN_USE_API_BASE")
                         const stored_socket_info = await Storage.get("SOCKET_INFO")