create-pixi-vn 2.1.2 → 2.1.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-pixi-vn",
   "description": "Create a new Pixi’VN project",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "type": "module",
   "license": "GPL-3.0",
   "author": "DRincs-Productions",

package/template-lib/package.json

@@ -41,7 +41,10 @@
     "vite-tsconfig-paths": "^6.1.1"
   },
   "peerDependencies": {
-    "@drincs/pixi-vn": ">=1.5.0"
+    "@drincs/pixi-vn": ">=1.5.13"
+  },
+  "dependencies": {
+    "vitest": "^4.1.4"
   },
   "keywords": [
     "game",
@@ -51,8 +54,5 @@
     "pixi-vn",
     "visual",
     "visual-novel"
-  ],
-  "dependencies": {
-    "vitest": "^4.1.4"
-  }
+  ]
 }

package/template-nqtr-react-vite-muijoy/src/components/menus/save-menu/index.tsx

@@ -10,42 +10,71 @@ import {
 } from "@/components/ui/pagination";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { SaveMenuPagination } from "@/lib/stores/save-menu-pagination-store";
+import { getQuickSaveIds } from "@/lib/utils/save-utility";
 import { useSelector } from "@tanstack/react-store";
 
-const TOTAL_PAGES = 999;
+const TOTAL_PAGES = 10;
+/** Number of save slots shown per page. */
+const SAVES_PER_PAGE = 6;
+const QUICK_SAVE_IDS = getQuickSaveIds();
 
-function getPageNumbers(current: number, total: number): (number | "ellipsis")[] {
+/** Number of consecutive page numbers shown around the current page on desktop. */
+const DESKTOP_WINDOW_SIZE = 4;
+
+type PageEntry = number | "ellipsis-start" | "ellipsis-end";
+
+function getPageNumbers(current: number, total: number): PageEntry[] {
     if (total <= 7) {
         return Array.from({ length: total }, (_, i) => i + 1);
     }
-    const pages: (number | "ellipsis")[] = [1];
-    if (current > 3) pages.push("ellipsis");
-    for (let i = Math.max(2, current - 1); i <= Math.min(total - 1, current + 1); i++) {
+    const start = Math.max(1, Math.min(current - 1, total - DESKTOP_WINDOW_SIZE));
+    const end = start + DESKTOP_WINDOW_SIZE - 1;
+
+    const pages: PageEntry[] = [];
+    if (start > 1) {
+        pages.push(1);
+        if (start > 2) pages.push("ellipsis-start");
+    }
+    for (let i = start; i <= end; i++) {
         pages.push(i);
     }
-    if (current < total - 2) pages.push("ellipsis");
-    pages.push(total);
+    if (end < total) {
+        if (end < total - 1) pages.push("ellipsis-end");
+        pages.push(total);
+    }
     return pages;
 }
 
-export function GameSaveMenu() {
+export function GameSaveMenu({ quickSaves }: { quickSaves: boolean }) {
     const page = useSelector(SaveMenuPagination.store, (state) => state.page);
 
     const currentPage = page + 1;
     const pageNumbers = getPageNumbers(currentPage, TOTAL_PAGES);
 
+    if (quickSaves) {
+        return (
+            <ScrollArea className="min-h-0 flex-1">
+                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3">
+                    {QUICK_SAVE_IDS.map((id) => (
+                        <SaveSlot key={`SaveFile${id}`} saveId={id} />
+                    ))}
+                </div>
+            </ScrollArea>
+        );
+    }
+
     return (
         <div className="flex flex-1 min-h-0 flex-col">
             <ScrollArea className="min-h-0 flex-1">
                 <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3">
-                    {Array.from({ length: 6 }).map((_, index) => {
-                        const id = page * 6 + index;
+                    {Array.from({ length: SAVES_PER_PAGE }).map((_, index) => {
+                        const id = page * SAVES_PER_PAGE + index;
                         return <SaveSlot key={`SaveFile${id}`} saveId={id} />;
                     })}
                 </div>
             </ScrollArea>
             <Pagination className="shrink-0 border-t py-1.5">
-                <PaginationContent>
+                <PaginationContent className="w-full justify-between px-2 sm:w-auto sm:justify-center sm:px-0">
                     <PaginationItem>
                         <PaginationPrevious
                             onClick={(e) => {
@@ -56,9 +85,14 @@ export function GameSaveMenu() {
                             className={currentPage === 1 ? "pointer-events-none opacity-50" : ""}
                         />
                     </PaginationItem>
+                    <PaginationItem className="sm:hidden">
+                        <span className="px-2 text-sm text-muted-foreground">
+                            {currentPage} / {TOTAL_PAGES}
+                        </span>
+                    </PaginationItem>
                     {pageNumbers.map((p) =>
-                        p === "ellipsis" ? (
-                            <PaginationItem key={`ellipsis-${currentPage}`}>
+                        p === "ellipsis-start" || p === "ellipsis-end" ? (
+                            <PaginationItem key={p} className="hidden sm:list-item">
                                 <PaginationEllipsis />
                             </PaginationItem>
                         ) : (

package/template-nqtr-react-vite-muijoy/src/components/menus/save-menu/save-slots.tsx

@@ -6,7 +6,7 @@ import { overlayTextShadowClass } from "@/constants";
 import { useSaveActions } from "@/lib/hooks/save-hooks";
 import { useQuerySaves } from "@/lib/query/save-query";
 import { cn } from "@/lib/utils";
-import { downloadGameSave } from "@/lib/utils/save-utility";
+import { downloadGameSave, getSaveSlotLabel } from "@/lib/utils/save-utility";
 import type { FileRouteTypes } from "@/routeTree.gen";
 import { useLocation } from "@tanstack/react-router";
 import { Download, Save, SquarePen, Trash2 } from "lucide-react";
@@ -54,7 +54,7 @@ export function SaveSlot({ saveId }: { saveId: number }) {
                 src={saveData.image}
                 layout="fullWidth"
                 alt={saveData.name}
-                className="absolute inset-0 size-full object-contain pointer-events-none select-none rounded-lg"
+                className="absolute inset-0 size-full object-contain pointer-events-none select-none rounded-md"
             />
             {/* top-left metadata */}
             <div className="absolute top-2.5 left-2.5 flex flex-col gap-0.5 pointer-events-none">
@@ -73,7 +73,7 @@ export function SaveSlot({ saveId }: { saveId: number }) {
                     {saveData.date.toLocaleTimeString()}
                 </span>
                 <span className={cn("text-sm text-neutral-300", overlayTextShadowClass)}>
-                    {`${t("save_slot")} ${String(saveId + 1).padStart(2, "0")}`}
+                    {getSaveSlotLabel(saveId, t)}
                 </span>
             </div>
             {/* top-right delete */}

package/template-nqtr-react-vite-muijoy/src/components/menus/settings/menus/save-load.tsx

@@ -5,7 +5,8 @@ import { useGameProps } from "@/lib/hooks/props-hooks";
 import { downloadGameSave, loadGameSaveFromFile } from "@/lib/utils/save-utility";
 import type { FileRouteTypes } from "@/routeTree.gen";
 import { useLocation } from "@tanstack/react-router";
-import { Download, FolderOpen } from "lucide-react";
+import { Download, FolderOpen, Zap } from "lucide-react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 
@@ -13,10 +14,25 @@ export function SaveLoadSettingsPage() {
     const { t } = useTranslation(["ui"]);
     const gameProps = useGameProps();
     const location = useLocation();
+    const [showQuickSaves, setShowQuickSaves] = useState(false);
 
     const toolbar = (
         <TooltipProvider>
             <div className="flex items-center gap-1">
+                <Tooltip>
+                    <TooltipTrigger render={<span />}>
+                        <Button
+                            variant={showQuickSaves ? "secondary" : "ghost"}
+                            size="icon-lg"
+                            onClick={() => setShowQuickSaves((v) => !v)}
+                            aria-pressed={showQuickSaves}
+                            aria-label={t("quick_saves")}
+                        >
+                            <Zap className="size-6" />
+                        </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>{t("quick_saves")}</TooltipContent>
+                </Tooltip>
                 <Tooltip>
                     <TooltipTrigger render={<span />}>
                         <Button
@@ -60,7 +76,7 @@ export function SaveLoadSettingsPage() {
     return (
         <div className="flex min-h-0 flex-1 flex-col">
             <div className="border-b p-4">{toolbar}</div>
-            <GameSaveMenu />
+            <GameSaveMenu quickSaves={showQuickSaves} />
         </div>
     );
 }

package/template-nqtr-react-vite-muijoy/src/components/quick-tools.tsx

@@ -15,7 +15,7 @@ import { AutoSettings } from "@/lib/stores/auto-settings-store";
 import { GameStatus } from "@/lib/stores/game-status-store";
 import { SkipSettings } from "@/lib/stores/skip-settings-store";
 import { cn } from "@/lib/utils";
-import { loadSave, saveGameToIndexDB } from "@/lib/utils/save-utility";
+import { getSaveSlotLabel, loadSave, quickSaveGameToIndexDB } from "@/lib/utils/save-utility";
 import { useQueryClient } from "@tanstack/react-query";
 import { useSelector } from "@tanstack/react-store";
 import { useTranslation } from "react-i18next";
@@ -39,11 +39,7 @@ export function QuickTools() {
     const setSettingsTab = useSetSearchParamState<string>("settings_tab");
 
     return (
-        <div
-            className={cn(
-                "flex flex-wrap items-center justify-end gap-0.5 sm:gap-1",
-            )}
-        >
+        <div className={cn("flex flex-wrap items-center justify-end gap-0.5 sm:gap-1")}>
             <Button
                 variant="ghost"
                 size="xs"
@@ -104,7 +100,7 @@ export function QuickTools() {
                 size="xs"
                 className="h-5 px-1 text-[10px] sm:h-6 sm:px-2 sm:text-xs"
                 onClick={() => {
-                    const savePromise = saveGameToIndexDB().then((save) => {
+                    const savePromise = quickSaveGameToIndexDB().then((save) => {
                         queryClient.setQueryData([SAVES_USE_QUERY_KEY, save.id], save);
                         queryClient.setQueryData([LAST_SAVE_USE_QUERY_KEY], save);
                     });
@@ -126,7 +122,7 @@ export function QuickTools() {
                     openAlertDialog({
                         head: t("load"),
                         content: t("you_sure_to_load_save", {
-                            name: lastSave.name || `${t("save_slot")} ${lastSave.id}`,
+                            name: lastSave.name || getSaveSlotLabel(lastSave.id, t),
                         }),
                         onConfirm: () =>
                             loadSave(lastSave)

package/template-nqtr-react-vite-muijoy/src/lib/hooks/hotkeys-hooks.ts

@@ -17,7 +17,7 @@ import { QuickActionsWheelState } from "@/lib/stores/quick-actions-wheel-store";
 import { SearchParams } from "@/lib/stores/search-param-store";
 import { SkipSettings } from "@/lib/stores/skip-settings-store";
 import { TextDisplaySettings } from "@/lib/stores/text-display-settings-store";
-import { loadSave, saveGameToIndexDB } from "@/lib/utils/save-utility";
+import { getSaveSlotLabel, loadSave, quickSaveGameToIndexDB } from "@/lib/utils/save-utility";
 import { navigator, type RoomIdType } from "@drincs/nqtr";
 import { narration } from "@drincs/pixi-vn";
 import type { RegisterableHotkey } from "@tanstack/hotkeys";
@@ -78,7 +78,7 @@ export function useSaveHotkeys(): null {
             console.log("Can't save on home page");
             return;
         }
-        const savePromise = saveGameToIndexDB().then((save) => {
+        const savePromise = quickSaveGameToIndexDB().then((save) => {
             queryClient.setQueryData([SAVES_USE_QUERY_KEY, save.id], save);
             queryClient.setQueryData([LAST_SAVE_USE_QUERY_KEY], save);
         });
@@ -97,7 +97,7 @@ export function useSaveHotkeys(): null {
         openAlertDialog({
             head: t("load"),
             content: t("you_sure_to_load_save", {
-                name: lastSave.name || `${t("save_slot")} ${lastSave.id}`,
+                name: lastSave.name || getSaveSlotLabel(lastSave.id, t),
             }),
             onConfirm: () =>
                 loadSave(lastSave)

package/template-nqtr-react-vite-muijoy/src/lib/hooks/save-hooks.tsx

@@ -6,6 +6,7 @@ import { LAST_SAVE_USE_QUERY_KEY, SAVES_USE_QUERY_KEY } from "@/lib/query/save-q
 import {
     addRefreshSave,
     deleteSaveFromIndexDB,
+    getSaveSlotLabel,
     loadSave,
     saveGameToIndexDB,
 } from "@/lib/utils/save-utility";
@@ -31,7 +32,7 @@ export function useSaveActions() {
             openAlertDialog({
                 head: t("load"),
                 content: t("you_sure_to_load_save", {
-                    name: data.name || `${t("save_slot")} ${String(data.id + 1).padStart(2, "0")}`,
+                    name: data.name || getSaveSlotLabel(data.id, t),
                 }),
                 onConfirm: () =>
                     loadSave(data)
@@ -57,7 +58,7 @@ export function useSaveActions() {
             openAlertDialog({
                 head: t("delete"),
                 content: t("you_sure_to_delete_save", {
-                    name: `${t("save_slot")} ${String(id + 1).padStart(2, "0")}`,
+                    name: getSaveSlotLabel(id, t),
                 }),
                 onConfirm: () =>
                     deleteSaveFromIndexDB(id)

package/template-nqtr-react-vite-muijoy/src/lib/utils/save-utility.ts

@@ -12,6 +12,40 @@ import { canvas, Game } from "@drincs/pixi-vn";
 const SAVE_FILE_EXTENSION = "json";
 const REFRESH_SAVE_LOCAL_STORAGE_KEY = "refresh_save";
 
+/**
+ * Quick saves live in a fixed, reserved range of negative ids (`-2`, `-3`, ...) so they
+ * never collide with the auto-incrementing ids used by manual saves (`0`, `1`, ...) or
+ * with the `-1` id reserved for the "refresh save" (see {@link getLastSaveFromIndexDB}).
+ */
+const QUICK_SAVE_ID_START = -2;
+/** Number of quick-save slots. */
+const QUICK_SAVE_SLOTS = 6;
+
+function getQuickSaveId(slotIndex: number): number {
+    return QUICK_SAVE_ID_START - slotIndex;
+}
+
+export function getQuickSaveIds(): number[] {
+    return Array.from({ length: QUICK_SAVE_SLOTS }, (_, index) => getQuickSaveId(index));
+}
+
+export function isQuickSaveId(id: number): boolean {
+    return id <= QUICK_SAVE_ID_START;
+}
+
+/** 1-based slot number for a quick-save id, for display purposes. */
+export function getQuickSaveSlotNumber(id: number): number {
+    return QUICK_SAVE_ID_START - id + 1;
+}
+
+/** Human-readable label for a save slot, e.g. "File 01" or "Quick Save 2". */
+export function getSaveSlotLabel(id: number, t: (key: string) => string): string {
+    if (isQuickSaveId(id)) {
+        return `${t("quick_save")} ${getQuickSaveSlotNumber(id)}`;
+    }
+    return `${t("save_slot")} ${String(id + 1).padStart(2, "0")}`;
+}
+
 export function createGameSave(options?: { image?: string; name?: string }): GameSaveData {
     const { image, name = "" } = options || {};
     return {
@@ -54,6 +88,29 @@ export async function saveGameToIndexDB(
     return (await getLastSaveFromIndexDB()) as GameSaveData & { id: number };
 }
 
+/**
+ * Saves into the dedicated quick-save slots (see {@link getQuickSaveIds}). Fills the first
+ * empty slot; once all slots are full, overwrites the least recently saved one.
+ */
+export async function quickSaveGameToIndexDB(): Promise<GameSaveData & { id: number }> {
+    const ids = getQuickSaveIds();
+    const slots = await Promise.all(ids.map((id) => getSaveFromIndexDB(id)));
+
+    let targetIndex = slots.findIndex((slot) => !slot);
+    if (targetIndex === -1) {
+        targetIndex = 0;
+        for (let index = 1; index < slots.length; index++) {
+            const slot = slots[index];
+            const oldest = slots[targetIndex];
+            if (slot && oldest && new Date(slot.date) < new Date(oldest.date)) {
+                targetIndex = index;
+            }
+        }
+    }
+
+    return saveGameToIndexDB({ id: ids[targetIndex] });
+}
+
 export async function getSaveFromIndexDB(
     id: number,
 ): Promise<(GameSaveData & { id: number }) | null> {

package/template-nqtr-react-vite-muijoy/src/locales/en.json

@@ -40,6 +40,7 @@
     "quick_save_hotkey_description": "Save the current progress immediately.",
     "quick_save_hotkey_alternative_description": "Save the current progress with Ctrl+S.",
     "quick_save_restricted": "Q.Save",
+    "quick_saves": "Quick Saves",
     "return_main_menu": "Return to Main Menu",
     "save": "Save",
     "saving": "Saving…",

package/template-nqtr-react-vite-muijoy-ink/package.json

@@ -21,7 +21,7 @@
     "@base-ui/react": "^1.6.0",
     "@drincs/nqtr": "^1.0.2",
     "@drincs/pixi-vn": "^1.8.21",
-    "@drincs/pixi-vn-ink": "^1.1.0",
+    "@drincs/pixi-vn-ink": "^1.1.4",
     "@tailwindcss/vite": "^4.3.0",
     "@tanstack/hotkeys": "^0.8.0",
     "@tanstack/react-hotkeys": "^0.10.0",

package/template-nqtr-react-vite-muijoy-ink/src/components/menus/save-menu/index.tsx

@@ -10,42 +10,71 @@ import {
 } from "@/components/ui/pagination";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { SaveMenuPagination } from "@/lib/stores/save-menu-pagination-store";
+import { getQuickSaveIds } from "@/lib/utils/save-utility";
 import { useSelector } from "@tanstack/react-store";
 
-const TOTAL_PAGES = 999;
+const TOTAL_PAGES = 10;
+/** Number of save slots shown per page. */
+const SAVES_PER_PAGE = 6;
+const QUICK_SAVE_IDS = getQuickSaveIds();
 
-function getPageNumbers(current: number, total: number): (number | "ellipsis")[] {
+/** Number of consecutive page numbers shown around the current page on desktop. */
+const DESKTOP_WINDOW_SIZE = 4;
+
+type PageEntry = number | "ellipsis-start" | "ellipsis-end";
+
+function getPageNumbers(current: number, total: number): PageEntry[] {
     if (total <= 7) {
         return Array.from({ length: total }, (_, i) => i + 1);
     }
-    const pages: (number | "ellipsis")[] = [1];
-    if (current > 3) pages.push("ellipsis");
-    for (let i = Math.max(2, current - 1); i <= Math.min(total - 1, current + 1); i++) {
+    const start = Math.max(1, Math.min(current - 1, total - DESKTOP_WINDOW_SIZE));
+    const end = start + DESKTOP_WINDOW_SIZE - 1;
+
+    const pages: PageEntry[] = [];
+    if (start > 1) {
+        pages.push(1);
+        if (start > 2) pages.push("ellipsis-start");
+    }
+    for (let i = start; i <= end; i++) {
         pages.push(i);
     }
-    if (current < total - 2) pages.push("ellipsis");
-    pages.push(total);
+    if (end < total) {
+        if (end < total - 1) pages.push("ellipsis-end");
+        pages.push(total);
+    }
     return pages;
 }
 
-export function GameSaveMenu() {
+export function GameSaveMenu({ quickSaves }: { quickSaves: boolean }) {
     const page = useSelector(SaveMenuPagination.store, (state) => state.page);
 
     const currentPage = page + 1;
     const pageNumbers = getPageNumbers(currentPage, TOTAL_PAGES);
 
+    if (quickSaves) {
+        return (
+            <ScrollArea className="min-h-0 flex-1">
+                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3">
+                    {QUICK_SAVE_IDS.map((id) => (
+                        <SaveSlot key={`SaveFile${id}`} saveId={id} />
+                    ))}
+                </div>
+            </ScrollArea>
+        );
+    }
+
     return (
         <div className="flex flex-1 min-h-0 flex-col">
             <ScrollArea className="min-h-0 flex-1">
                 <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3">
-                    {Array.from({ length: 6 }).map((_, index) => {
-                        const id = page * 6 + index;
+                    {Array.from({ length: SAVES_PER_PAGE }).map((_, index) => {
+                        const id = page * SAVES_PER_PAGE + index;
                         return <SaveSlot key={`SaveFile${id}`} saveId={id} />;
                     })}
                 </div>
             </ScrollArea>
             <Pagination className="shrink-0 border-t py-1.5">
-                <PaginationContent>
+                <PaginationContent className="w-full justify-between px-2 sm:w-auto sm:justify-center sm:px-0">
                     <PaginationItem>
                         <PaginationPrevious
                             onClick={(e) => {
@@ -56,9 +85,14 @@ export function GameSaveMenu() {
                             className={currentPage === 1 ? "pointer-events-none opacity-50" : ""}
                         />
                     </PaginationItem>
+                    <PaginationItem className="sm:hidden">
+                        <span className="px-2 text-sm text-muted-foreground">
+                            {currentPage} / {TOTAL_PAGES}
+                        </span>
+                    </PaginationItem>
                     {pageNumbers.map((p) =>
-                        p === "ellipsis" ? (
-                            <PaginationItem key={`ellipsis-${currentPage}`}>
+                        p === "ellipsis-start" || p === "ellipsis-end" ? (
+                            <PaginationItem key={p} className="hidden sm:list-item">
                                 <PaginationEllipsis />
                             </PaginationItem>
                         ) : (

package/template-nqtr-react-vite-muijoy-ink/src/components/menus/save-menu/save-slots.tsx

@@ -6,7 +6,7 @@ import { overlayTextShadowClass } from "@/constants";
 import { useSaveActions } from "@/lib/hooks/save-hooks";
 import { useQuerySaves } from "@/lib/query/save-query";
 import { cn } from "@/lib/utils";
-import { downloadGameSave } from "@/lib/utils/save-utility";
+import { downloadGameSave, getSaveSlotLabel } from "@/lib/utils/save-utility";
 import type { FileRouteTypes } from "@/routeTree.gen";
 import { useLocation } from "@tanstack/react-router";
 import { Download, Save, SquarePen, Trash2 } from "lucide-react";
@@ -54,7 +54,7 @@ export function SaveSlot({ saveId }: { saveId: number }) {
                 src={saveData.image}
                 layout="fullWidth"
                 alt={saveData.name}
-                className="absolute inset-0 size-full object-contain pointer-events-none select-none rounded-lg"
+                className="absolute inset-0 size-full object-contain pointer-events-none select-none rounded-md"
             />
             {/* top-left metadata */}
             <div className="absolute top-2.5 left-2.5 flex flex-col gap-0.5 pointer-events-none">
@@ -73,7 +73,7 @@ export function SaveSlot({ saveId }: { saveId: number }) {
                     {saveData.date.toLocaleTimeString()}
                 </span>
                 <span className={cn("text-sm text-neutral-300", overlayTextShadowClass)}>
-                    {`${t("save_slot")} ${String(saveId + 1).padStart(2, "0")}`}
+                    {getSaveSlotLabel(saveId, t)}
                 </span>
             </div>
             {/* top-right delete */}

package/template-nqtr-react-vite-muijoy-ink/src/components/menus/settings/menus/save-load.tsx

@@ -5,7 +5,8 @@ import { useGameProps } from "@/lib/hooks/props-hooks";
 import { downloadGameSave, loadGameSaveFromFile } from "@/lib/utils/save-utility";
 import type { FileRouteTypes } from "@/routeTree.gen";
 import { useLocation } from "@tanstack/react-router";
-import { Download, FolderOpen } from "lucide-react";
+import { Download, FolderOpen, Zap } from "lucide-react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 
@@ -13,10 +14,25 @@ export function SaveLoadSettingsPage() {
     const { t } = useTranslation(["ui"]);
     const gameProps = useGameProps();
     const location = useLocation();
+    const [showQuickSaves, setShowQuickSaves] = useState(false);
 
     const toolbar = (
         <TooltipProvider>
             <div className="flex items-center gap-1">
+                <Tooltip>
+                    <TooltipTrigger render={<span />}>
+                        <Button
+                            variant={showQuickSaves ? "secondary" : "ghost"}
+                            size="icon-lg"
+                            onClick={() => setShowQuickSaves((v) => !v)}
+                            aria-pressed={showQuickSaves}
+                            aria-label={t("quick_saves")}
+                        >
+                            <Zap className="size-6" />
+                        </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>{t("quick_saves")}</TooltipContent>
+                </Tooltip>
                 <Tooltip>
                     <TooltipTrigger render={<span />}>
                         <Button
@@ -60,7 +76,7 @@ export function SaveLoadSettingsPage() {
     return (
         <div className="flex min-h-0 flex-1 flex-col">
             <div className="border-b p-4">{toolbar}</div>
-            <GameSaveMenu />
+            <GameSaveMenu quickSaves={showQuickSaves} />
         </div>
     );
 }

package/template-nqtr-react-vite-muijoy-ink/src/components/quick-tools.tsx

@@ -15,7 +15,7 @@ import { AutoSettings } from "@/lib/stores/auto-settings-store";
 import { GameStatus } from "@/lib/stores/game-status-store";
 import { SkipSettings } from "@/lib/stores/skip-settings-store";
 import { cn } from "@/lib/utils";
-import { loadSave, saveGameToIndexDB } from "@/lib/utils/save-utility";
+import { getSaveSlotLabel, loadSave, quickSaveGameToIndexDB } from "@/lib/utils/save-utility";
 import { useQueryClient } from "@tanstack/react-query";
 import { useSelector } from "@tanstack/react-store";
 import { useTranslation } from "react-i18next";
@@ -39,11 +39,7 @@ export function QuickTools() {
     const setSettingsTab = useSetSearchParamState<string>("settings_tab");
 
     return (
-        <div
-            className={cn(
-                "flex flex-wrap items-center justify-end gap-0.5 sm:gap-1",
-            )}
-        >
+        <div className={cn("flex flex-wrap items-center justify-end gap-0.5 sm:gap-1")}>
             <Button
                 variant="ghost"
                 size="xs"
@@ -104,7 +100,7 @@ export function QuickTools() {
                 size="xs"
                 className="h-5 px-1 text-[10px] sm:h-6 sm:px-2 sm:text-xs"
                 onClick={() => {
-                    const savePromise = saveGameToIndexDB().then((save) => {
+                    const savePromise = quickSaveGameToIndexDB().then((save) => {
                         queryClient.setQueryData([SAVES_USE_QUERY_KEY, save.id], save);
                         queryClient.setQueryData([LAST_SAVE_USE_QUERY_KEY], save);
                     });
@@ -126,7 +122,7 @@ export function QuickTools() {
                     openAlertDialog({
                         head: t("load"),
                         content: t("you_sure_to_load_save", {
-                            name: lastSave.name || `${t("save_slot")} ${lastSave.id}`,
+                            name: lastSave.name || getSaveSlotLabel(lastSave.id, t),
                         }),
                         onConfirm: () =>
                             loadSave(lastSave)

package/template-nqtr-react-vite-muijoy-ink/src/lib/hooks/hotkeys-hooks.ts

@@ -17,7 +17,7 @@ import { QuickActionsWheelState } from "@/lib/stores/quick-actions-wheel-store";
 import { SearchParams } from "@/lib/stores/search-param-store";
 import { SkipSettings } from "@/lib/stores/skip-settings-store";
 import { TextDisplaySettings } from "@/lib/stores/text-display-settings-store";
-import { loadSave, saveGameToIndexDB } from "@/lib/utils/save-utility";
+import { getSaveSlotLabel, loadSave, quickSaveGameToIndexDB } from "@/lib/utils/save-utility";
 import { navigator, type RoomIdType } from "@drincs/nqtr";
 import { narration } from "@drincs/pixi-vn";
 import type { RegisterableHotkey } from "@tanstack/hotkeys";
@@ -78,7 +78,7 @@ export function useSaveHotkeys(): null {
             console.log("Can't save on home page");
             return;
         }
-        const savePromise = saveGameToIndexDB().then((save) => {
+        const savePromise = quickSaveGameToIndexDB().then((save) => {
             queryClient.setQueryData([SAVES_USE_QUERY_KEY, save.id], save);
             queryClient.setQueryData([LAST_SAVE_USE_QUERY_KEY], save);
         });
@@ -97,7 +97,7 @@ export function useSaveHotkeys(): null {
         openAlertDialog({
             head: t("load"),
             content: t("you_sure_to_load_save", {
-                name: lastSave.name || `${t("save_slot")} ${lastSave.id}`,
+                name: lastSave.name || getSaveSlotLabel(lastSave.id, t),
             }),
             onConfirm: () =>
                 loadSave(lastSave)