0.1.3

2025-01-18 19:05:23 -05:00
parent 3f282d6ecd
commit 14938f63df
23 changed files with 652 additions and 177 deletions
--- a/resources/js/Layouts/AppLayout.jsx
+++ b/resources/js/Layouts/AppLayout.jsx
@@ -1,43 +1,13 @@
-import { useEffect, useState } from 'react';
 import { Link } from '@inertiajs/react';
-import { Moon, Sun } from 'lucide-react';

 import { Separator } from '@radix-ui/react-separator';
-import { Tooltip, TooltipProvider, TooltipTrigger } from '@radix-ui/react-tooltip';

 import { AppSidebar } from '@/components/ui/app-sidebar';
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList } from '@/components/ui/breadcrumb';
-import { Button } from '@/components/ui/button';
 import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';
-import { TooltipContent } from '@/components/ui/tooltip';
 import { Toaster } from '@/components/ui/toaster';

 export default function AppLayout({ auth, header, children, toolbar }) {
-
-    const getTheme = () => {
-        if (localStorage.getItem('theme')) {
-            return localStorage.getItem('theme');
-        }
-
-        return 'light';
-    }
-
-    const themeButtonOnclickHandler = (theme) => {
-        // Set local storage
-        localStorage.setItem('theme', theme);
-        setTheme(theme);
-
-        const root = window.document.documentElement;
-        root.classList.remove("light", "dark");
-        root.classList.add(theme);
-    }
-
-    const [theme, setTheme] = useState(getTheme());
-
-    useEffect(() => {
-        setTheme(getTheme());
-    }, []);
-
    return (
        <SidebarProvider>
            <AppSidebar auth={ auth } />
@@ -56,20 +26,6 @@ export default function AppLayout({ auth, header, children, toolbar }) {
                        </BreadcrumbList>
                    </Breadcrumb>
                    <span className="flex gap-1 ml-auto justify-center content-center">
-                        <TooltipProvider>
-                            <Tooltip>
-                                <TooltipTrigger asChild>
-                                    { theme === 'dark' ? (<Button variant="link" size="icon" onClick={ () => themeButtonOnclickHandler('light') }>
-                                        <Sun />
-                                    </Button>) : (<Button variant="link" size="icon" onClick={ () => themeButtonOnclickHandler('dark') }>
-                                        <Moon />
-                                    </Button>) }
-                                </TooltipTrigger>
-                                <TooltipContent>
-                                    <p>Toggle day / night mode</p>
-                                </TooltipContent>
-                            </Tooltip>
-                        </TooltipProvider>
                        { toolbar }
                    </span>
                </header>
--- a/resources/js/Pages/Comic/Histories.jsx
+++ b/resources/js/Pages/Comic/Histories.jsx
@@ -79,6 +79,12 @@ export default function Histories({ auth, histories }) {
                    <Button size="sm" variant="destructive" onClick={ () => removeDuplicatedButtonOnClickHandler() }>
                        Remove duplicates
                    </Button>
+
+                    <Button size="sm" asChild>
+                        <Link href="?group=comic">
+                            Group by Comics
+                        </Link>
+                    </Button>
                </div>
                <Table>
                    <TableHeader>
@@ -135,5 +141,5 @@ export default function Histories({ auth, histories }) {
                </div>
            </div>
        </AppLayout>
-);
+    );
 }
--- a/resources/js/Pages/Comic/HistoriesByComic.jsx
+++ b/resources/js/Pages/Comic/HistoriesByComic.jsx
@@ -0,0 +1,92 @@
+import { useState } from 'react';
+import { Head, Link, router } from '@inertiajs/react';
+import AppLayout from '@/Layouts/AppLayout.jsx';
+
+import { DateTime } from "luxon";
+
+import { BreadcrumbItem, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb";
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Button } from "@/components/ui/button.jsx";
+
+export default function Histories({ auth, histories }) {
+
+    const deleteButtonOnClickHandler = () => {
+        router.visit(route('comics.patchHistories'), {
+            data: (ids.length > 0) ? { ids: ids } : { ids: 'all' },
+            method: "PATCH",
+            only: ['histories'],
+            onSuccess: data => {
+                toast({
+                    title: "All set",
+                    description: `The histories has been deleted.`,
+                });
+            }
+        });
+    }
+
+    const removeDuplicatedButtonOnClickHandler = () => {
+        router.visit(route('comics.destroyHistories'), {
+            data: (ids.length > 0) ? { ids: ids } : { ids: 'all' },
+            method: "DELETE",
+            only: ['histories'],
+            onSuccess: data => {
+                toast({
+                    title: "All set",
+                    description: `The duplicated records has been deleted.`,
+                });
+            }
+        });
+    }
+
+    return (
+        <AppLayout auth={ auth } header={
+            <>
+                <BreadcrumbSeparator className="hidden lg:block" />
+                <BreadcrumbItem>
+                    <BreadcrumbPage>Histories</BreadcrumbPage>
+                </BreadcrumbItem>
+            </>
+        }>
+            <Head>
+                <title>Histories</title>
+            </Head>
+            <div className="p-3 pt-1 w-[90%] mx-auto">
+                <div className="flex justify-end gap-2">
+                    <Button size="sm" asChild>
+                        <Link href="?group=">
+                            Group by Chapter
+                        </Link>
+                    </Button>
+                </div>
+                <Table>
+                    <TableHeader>
+                        <TableRow>
+                            <TableHead>Comic</TableHead>
+                            <TableHead>Chapter</TableHead>
+                            <TableHead>Read at</TableHead>
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                        { histories.map((comic, i) =>
+                             comic.histories.map((record, j) => (
+                                <TableRow key={ j }>
+                                    { (j === 0) ? <TableCell className="w-[40%]" rowspan={ comic.histories.length }>
+                                        <Link href={ route('comics.chapters', comic.comic.comic_pathword) }>
+                                            { comic.comic.comic_name }
+                                        </Link>
+                                    </TableCell> : null }
+                                    <TableCell>
+                                        <Link href={ route('comics.read', [comic.comic.comic_pathword, record.chapter_uuid]) }>
+                                            { record.chapter_name }
+                                        </Link>
+                                    </TableCell>
+                                    <TableCell>{ record.read_at }</TableCell>
+                                </TableRow>
+                            ) )
+                        ) }
+                    </TableBody>
+                </Table>
+            </div>
+        </AppLayout>
+    );
+}
--- a/resources/js/Pages/Comic/Index.jsx
+++ b/resources/js/Pages/Comic/Index.jsx
@@ -12,11 +12,17 @@ import { useToast } from '@/hooks/use-toast.js';

 export default function Index({ comics, offset, auth }) {

-    const url = new URL(window.location); //searchParams
+    const url = new URL(window.location); // searchParams

    const [favourites, setFavourites] = useState(auth.user?.favourites ?? []);
    const { toast } = useToast();

+    /**
+     * On click handler for the star
+     * Do posting and make a toast
+     *
+     * @param pathword
+     */
    const favouriteOnClickHandler = (pathword) => {
        axios.post(route('comics.postFavourite'), { pathword: pathword }).then(res => {
            setFavourites(res.data);
@@ -28,6 +34,12 @@ export default function Index({ comics, offset, auth }) {
        });
    }

+    /**
+     * Generate info card for comics
+     * @param props
+     * @returns {JSX.Element}
+     * @constructor
+     */
    const ComicCard = (props) => (
        <Card>
            <CardHeader>
@@ -41,7 +53,9 @@ export default function Index({ comics, offset, auth }) {
                </div>
            </CardHeader>
            <CardContent>
-                <CardTitle><Link href={ `/comic/${ props.path_word }` }>{ props.name }</Link></CardTitle>
+                <CardTitle>
+                    <Link href={ `/comic/${ props.path_word }` }>{ props.name }</Link>
+                </CardTitle>
                <CardDescription className="pt-2">
                    { props.author && props.author.map(a => (
                        <Badge className="m-1" key={ a.path_word } variant="outline">
@@ -53,6 +67,12 @@ export default function Index({ comics, offset, auth }) {
        </Card>
    );

+    /**
+     * Loop and return all info cards
+     * @param comics
+     * @returns {*}
+     * @constructor
+     */
    const ComicCards = (comics) => {
        return comics.list.map((comic, i) => <ComicCard key={ i } { ...comic } />);
    }
--- a/resources/js/Pages/Comic/Read.jsx
+++ b/resources/js/Pages/Comic/Read.jsx
@@ -1,6 +1,6 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { Head, Link, router } from '@inertiajs/react';
 import AppLayout from '@/Layouts/AppLayout.jsx';
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { ChevronFirst, ChevronLast, Rows3 } from 'lucide-react';
 import { Tooltip, TooltipProvider, TooltipTrigger } from '@radix-ui/react-tooltip';

@@ -19,6 +19,7 @@ export default function Read({ auth, comic, chapter, chapters }) {
    const validReadingModes = ['rtl', 'utd'];

    const [readingMode, setReadingMode] = useState('rtl'); // rtl, utd
+    const [isInvertClickingZone, setIsInvertClickingZone] = useState(false);
    const [isTwoPagesPerScreen, setIsTwoPagePerScreen] = useState(false); // TODO

    const [currentImage, setCurrentImage] = useState(1);
@@ -35,9 +36,17 @@ export default function Read({ auth, comic, chapter, chapters }) {
        return "rtl";
    }

+    const getLocalStorageIsInvertClickingZone = () => {
+        if (window.localStorage.getItem('invertClickingZone') !== null && window.localStorage.getItem('invertClickingZone')) {
+            return window.localStorage.getItem('invertClickingZone') === 'true';
+        }
+
+        return false;
+    }
+
    const getLocalStorageIsTwoPagePerScreen = () => {
-        if (window.localStorage.getItem('twoPagesPerScreen') !== null && validReadingModes.includes(window.localStorage.getItem('twoPagesPerScreen'))) {
-            return window.localStorage.getItem('twoPagesPerScreen');
+        if (window.localStorage.getItem('twoPagesPerScreen') !== null && window.localStorage.getItem('twoPagesPerScreen')) {
+            return window.localStorage.getItem('twoPagesPerScreen') === 'true';
        }

        return false;
@@ -68,6 +77,16 @@ export default function Read({ auth, comic, chapter, chapters }) {
        }
    }

+    const toggleInvertClickingZone = (e) => {
+        if (e) {
+            window.localStorage.setItem('invertClickingZone', true);
+            setIsInvertClickingZone(true);
+        } else {
+            window.localStorage.setItem('invertClickingZone', false);
+            setIsInvertClickingZone(false);
+        }
+    }
+
    const toggleTwoPagesPerScreen = (e) => {
        if (e) {
            window.localStorage.setItem('twoPagesPerScreen', true);
@@ -114,24 +133,32 @@ export default function Read({ auth, comic, chapter, chapters }) {
            const bounds = imgRef.current.getBoundingClientRect();
            const percentage = (e.pageX - bounds.left) / imgRef.current.offsetWidth;

-            if (percentage < 0.45) {
+            const prevHandler = () => {
                if (img.innerKey === 0 && chapter.chapter.prev) {
                    router.visit(route('comics.read', [comic.comic.path_word, chapter.chapter.prev]));
                } else {
                    document.getElementById(`image-${img.innerKey - 1}`)?.scrollIntoView();
                }
-            } else if (percentage > 0.55) {
+            }
+
+            const nextHandler = () => {
                if (img.innerKey >= chapter.sorted.length - 1 && chapter.chapter.next) {
                    router.visit(route('comics.read', [comic.comic.path_word, chapter.chapter.next]));
                } else {
                    document.getElementById(`image-${img.innerKey + 1}`)?.scrollIntoView();
                }
            }
+
+            // InvertClickingZone
+            if (percentage < 0.45 || percentage > 0.55) {
+                (percentage < 0.45) ^ isInvertClickingZone ? prevHandler() : nextHandler();
+            }
        };

        return (
            <div className="basis-full">
-                <img alt={ comic.comic.name } className={` m-auto comic-img `} id={ `image-${ img.innerKey }` } ref={ imgRef }
+                <img alt={ comic.comic.name } className={` m-auto comic-img `} id={ `image-${ img.innerKey }` }
+                     loading={ (img.innerKey < 5) ? "eager" : "lazy" } ref={ imgRef }
                     onClick={ handleImageClick } src={ `/image/${ btoa(img.url) }` } style={ imgStyles } />
            </div>
        );
@@ -166,7 +193,17 @@ export default function Read({ auth, comic, chapter, chapters }) {
                        <div className="space-y-4">
                            <div className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
                                <div className="space-y-0.5">
-                                    <label>Two images per screen</label>
+                                    <label>Flip clicking zone</label>
+                                    <p>Turn on for clicking image on right side to previous one</p>
+                                </div>
+                                <Switch defaultChecked={ (isInvertClickingZone) }
+                                        onCheckedChange={ (e) => toggleInvertClickingZone(!isInvertClickingZone) } />
+                            </div>
+                        </div>
+                        <div className="space-y-4">
+                            <div className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+                                <div className="space-y-0.5">
+                                    <label>Two images per screen TODO</label>
                                    <p>Only applicable to RTL mode</p>
                                </div>
                                <Switch defaultChecked={ (isTwoPagesPerScreen) }
@@ -277,6 +314,7 @@ export default function Read({ auth, comic, chapter, chapters }) {

    useEffect(() => {
        setReadingMode(getLocalStorageReadingMode());
+        setIsInvertClickingZone(getLocalStorageIsInvertClickingZone());
        setIsTwoPagePerScreen(getLocalStorageIsTwoPagePerScreen());

        if (!ref.current) return;
@@ -333,7 +371,7 @@ export default function Read({ auth, comic, chapter, chapters }) {
                <title>{ chapter.chapter.name.concat(" - ", comic.comic.name) }</title>
            </Head>
            <div className="p-3 pt-1 pb-1 flex flex-wrap justify-center" id="mvp" ref={ ref }
-                 style={ { overflowAnchor: "none", height: "calc(100dvh - 90px)", overflowY: "scroll" } }>
+                 style={{ overflowAnchor: "none", height: "calc(100dvh - 90px)", overflowY: "scroll" }}>
                { chapter.sorted.map((img, j) => <ImageForComic key={ j } innerKey={ j } { ...img } />) }
            </div>
        </AppLayout>
--- a/resources/js/Pages/Pages/Installation.jsx
+++ b/resources/js/Pages/Pages/Installation.jsx
@@ -38,6 +38,7 @@ export default function Installation({ auth }) {
                            <li>Generate Database tables <span className="rounded-md border m-1 p-1 font-mono text-sm shadow-sm">php artisan migrate</span></li>
                            <li>Install JS dependencies <span className="rounded-md border m-1 p-1 font-mono text-sm shadow-sm">bun install</span></li>
                            <li>Build frontend JS files <span className="rounded-md border m-1 p-1 font-mono text-sm shadow-sm">bun run build</span></li>
+                            <li>Run background queue process <span className="rounded-md border m-1 p-1 font-mono text-sm shadow-sm">php artisan queue:listen</span></li>
                            <li>Visit <span className="rounded-md border m-1 p-1 font-mono text-sm shadow-sm">http://[url]/tags</span> to fetch initial dataset</li>
                            <li>It should be running?</li>
                        </ol>
--- a/resources/js/Pages/Pages/Updates.jsx
+++ b/resources/js/Pages/Pages/Updates.jsx
@@ -11,6 +11,22 @@ export default function Updates({ auth }) {
                <title>Updates</title>
            </Head>
            <div className="p-3 pt-1">
+                <Card className="w-[90%] m-3 mx-auto">
+                    <CardHeader>
+                        <CardTitle>0.1.3</CardTitle>
+                        <CardDescription>Release: 18 Jan 2025</CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                        <ul>
+                            <li>Fixed: Theme initialization</li>
+                            <li>Toggle clicking spot invert in reading page</li>
+                            <li>Beta: Histories group by comics</li>
+                            <li>Beta: Prefetch first chapter if unread comic clicked</li>
+                            <li>Updated cache TTL</li>
+                            <li>Moved theme toggle to sidebar</li>
+                        </ul>
+                    </CardContent>
+                </Card>
                <Card className="w-[90%] m-3 mx-auto">
                    <CardHeader>
                        <CardTitle>0.1.2</CardTitle>
--- a/resources/js/components/ui/app-sidebar.jsx
+++ b/resources/js/components/ui/app-sidebar.jsx
@@ -1,7 +1,7 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Link, router, usePage } from '@inertiajs/react';

-import { BadgeCheck, ChevronsUpDown, Star, History, ChevronDown, LogOut, Search, Book, TableOfContents, House, HardDriveDownload } from 'lucide-react';
+import { BadgeCheck, ChevronsUpDown, Star, History, ChevronDown, LogOut, Search, Book, TableOfContents, House, HardDriveDownload, Moon, Sun, Layers, SquarePower } from 'lucide-react';

 import { Avatar, AvatarFallback  } from '@/components/ui/avatar';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
@@ -9,16 +9,15 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem,
 import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarMenu, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';

 export function AppSidebar({ auth }) {
-    const { tags } = usePage().props;

+    const { tags } = usePage().props;
    const [search, setSearch] = useState('');

    const searchOnSubmitHandler = (e) => {
        e.preventDefault();
-        // Visit the search page
-        router.get(route('comics.search', [search]), {}, {

-        });
+        // Visit the search page
+        router.get(route('comics.search', [search]));
    }

    const SidebarItem = (props) => {
@@ -44,6 +43,36 @@ export function AppSidebar({ auth }) {
        );
    };

+    const getTheme = () => {
+        if (localStorage.getItem('theme')) {
+            return localStorage.getItem('theme');
+        }
+
+        return 'light';
+    }
+
+    const themeButtonOnclickHandler = () => {
+        const t = (theme === 'light') ? 'dark' : 'light';
+
+        // Set local storage
+        localStorage.setItem('theme', t);
+        setTheme(t);
+        setThemeInHtml(t);
+    }
+
+    const setThemeInHtml = (theme) => {
+        const root = window.document.documentElement;
+        root.classList.remove("light", "dark");
+        root.classList.add(theme);
+    }
+
+    const [theme, setTheme] = useState(getTheme());
+
+    useEffect(() => {
+        setTheme(getTheme());
+        setThemeInHtml(getTheme());
+    }, []);
+
    return (
        <Sidebar>
            <SidebarContent>
@@ -57,7 +86,7 @@ export function AppSidebar({ auth }) {
                                    </div>
                                    <div className="flex flex-col gap-0.5 leading-none">
                                        <span className="font-semibold">Comic</span>
-                                        <span>0.1.2</span>
+                                        <span>0.1.3</span>
                                    </div>
                                </Link>
                            </SidebarMenuButton>
@@ -147,8 +176,7 @@ export function AppSidebar({ auth }) {
                    <SidebarMenuItem>
                        <DropdownMenu>
                            <DropdownMenuTrigger asChild>
-                                <SidebarMenuButton
-                                    size="lg"
+                                <SidebarMenuButton size="lg"
                                    className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
                                >
                                    <Avatar className="h-8 w-8 rounded-lg">
@@ -186,6 +214,13 @@ export function AppSidebar({ auth }) {
                                </DropdownMenuLabel>
                                <DropdownMenuSeparator />
                                <DropdownMenuGroup>
+                                    <DropdownMenuItem>
+                                        <SquarePower /> History On
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem onClick={ () => themeButtonOnclickHandler() }>
+                                        <>{ theme === 'dark' ? (<Sun />) : (<Moon />) } Toggle theme</>
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem asChild><a href="/queues" target="_blank"><Layers /> Queues</a></DropdownMenuItem>
                                    <DropdownMenuItem asChild><Link href={ route('profile.edit') }><BadgeCheck /> Profile</Link></DropdownMenuItem>
                                    <DropdownMenuItem asChild><Link href={ route('comics.favourites') }><Star /> Favourites</Link></DropdownMenuItem>
                                    <DropdownMenuItem asChild><Link href={ route('comics.histories') }><History /> History</Link></DropdownMenuItem>