mirror of
https://github.com/moku-project/Moku.git
synced 2026-06-13 09:19:56 -05:00
Chore: Restructure Repository for SvelteKit
This commit is contained in:
Youwes09
@@ -0,0 +1,430 @@
|
||||
<script lang="ts">
|
||||
import { FolderSimple, Plus, Trash, Star, Eye, EyeSlash, ArrowsClockwise, ArrowsCounterClockwise, DownloadSimple, DotsSixVertical, BookmarkSimple, Lock, CheckSquare } from "phosphor-svelte";
|
||||
import { gql } from "@api/client";
|
||||
import { GET_CATEGORIES } from "@api/queries/manga";
|
||||
import { CREATE_CATEGORY, UPDATE_CATEGORY, UPDATE_CATEGORIES, DELETE_CATEGORY, UPDATE_CATEGORY_ORDER } from "@api/mutations/manga";
|
||||
import type { Category } from "@types";
|
||||
import { store, updateSettings, setCategories } from "@store/state.svelte";
|
||||
|
||||
const completedCat = $derived(store.categories.find(c => c.name === "Completed" && c.id !== 0) ?? null);
|
||||
const completedId = $derived(completedCat ? String(completedCat.id) : null);
|
||||
const sortedCatIds = $derived(store.categories.filter(c => c.id !== 0).map(c => String(c.id)));
|
||||
|
||||
const orderedAllIds = $derived.by(() => {
|
||||
const order = store.settings.libraryPinnedTabOrder ?? [];
|
||||
const allIds = ["library", "downloaded", ...sortedCatIds];
|
||||
const known = new Set(allIds);
|
||||
return [...new Set([...order.filter(id => known.has(id)), ...allIds])];
|
||||
});
|
||||
|
||||
let catsLoading = $state(false);
|
||||
let catsError = $state<string | null>(null);
|
||||
let newFolderName = $state("");
|
||||
let editingId = $state<number | null>(null);
|
||||
let editingName = $state("");
|
||||
|
||||
let dragStrId = $state<string | null>(null);
|
||||
let dragOverStrId = $state<string | null>(null);
|
||||
let dropPosition = $state<"above" | "below" | null>(null);
|
||||
|
||||
function isHidden(id: string) {
|
||||
return (store.settings.hiddenLibraryTabs ?? []).includes(id);
|
||||
}
|
||||
|
||||
function toggleHidden(id: string) {
|
||||
const current = store.settings.hiddenLibraryTabs ?? [];
|
||||
updateSettings({ hiddenLibraryTabs: current.includes(id) ? current.filter(x => x !== id) : [...current, id] });
|
||||
}
|
||||
|
||||
async function loadCategories() {
|
||||
catsLoading = true; catsError = null;
|
||||
try {
|
||||
const res = await gql<{ categories: { nodes: Category[] } }>(GET_CATEGORIES);
|
||||
const zeroCat = store.categories.filter(c => c.id === 0);
|
||||
const fresh = res.categories.nodes.filter(c => c.id !== 0);
|
||||
const merged = fresh.map(f => {
|
||||
const existing = store.categories.find(c => c.id === f.id);
|
||||
return existing ? { ...existing, ...f } : f;
|
||||
});
|
||||
setCategories([...zeroCat, ...merged]);
|
||||
} catch (e: any) {
|
||||
catsError = e?.message ?? "Failed to load folders";
|
||||
} finally { catsLoading = false; }
|
||||
}
|
||||
|
||||
async function createFolder() {
|
||||
const name = newFolderName.trim();
|
||||
if (!name) return;
|
||||
try {
|
||||
const res = await gql<{ createCategory: { category: Category } }>(CREATE_CATEGORY, { name });
|
||||
setCategories([...store.categories, res.createCategory.category]);
|
||||
newFolderName = "";
|
||||
} catch (e: any) { catsError = e?.message ?? "Failed to create folder"; }
|
||||
}
|
||||
|
||||
function startEdit(id: number, name: string) { editingId = id; editingName = name; }
|
||||
|
||||
async function commitEdit() {
|
||||
if (editingId !== null && editingName.trim()) {
|
||||
try {
|
||||
await gql(UPDATE_CATEGORY, { id: editingId, name: editingName.trim() });
|
||||
setCategories(store.categories.map(c => c.id === editingId ? { ...c, name: editingName.trim() } : c));
|
||||
} catch (e: any) { catsError = e?.message ?? "Failed to rename"; }
|
||||
}
|
||||
editingId = null; editingName = "";
|
||||
}
|
||||
|
||||
async function deleteFolder(id: number) {
|
||||
try {
|
||||
await gql(DELETE_CATEGORY, { id });
|
||||
setCategories(store.categories.filter(c => c.id !== id));
|
||||
} catch (e: any) { catsError = e?.message ?? "Failed to delete folder"; }
|
||||
}
|
||||
|
||||
async function toggleCategoryFlag(id: number, flag: "includeInUpdate" | "includeInDownload") {
|
||||
const cat = store.categories.find(c => c.id === id);
|
||||
if (!cat) return;
|
||||
const next = !cat[flag];
|
||||
setCategories(store.categories.map(c => c.id === id ? { ...c, [flag]: next } : c));
|
||||
try {
|
||||
await gql(UPDATE_CATEGORIES, { ids: [id], patch: { [flag]: next ? "INCLUDE" : "EXCLUDE" } });
|
||||
} catch (e: any) {
|
||||
setCategories(store.categories.map(c => c.id === id ? { ...c, [flag]: !next } : c));
|
||||
catsError = e?.message ?? "Failed to update folder";
|
||||
}
|
||||
}
|
||||
|
||||
function applyReorder(fromStrId: string, toStrId: string) {
|
||||
const catIds = store.categories.filter(c => c.id !== 0).map(c => String(c.id));
|
||||
const allIds = ["library", "downloaded", ...catIds];
|
||||
const current = store.settings.libraryPinnedTabOrder ?? [];
|
||||
const base = [...new Set([...current.filter(id => allIds.includes(id)), ...allIds])];
|
||||
const fromIdx = base.indexOf(fromStrId);
|
||||
const toIdx = base.indexOf(toStrId);
|
||||
if (fromIdx < 0 || toIdx < 0 || fromIdx === toIdx) return;
|
||||
base.splice(fromIdx, 1);
|
||||
base.splice(toIdx, 0, fromStrId);
|
||||
updateSettings({ libraryPinnedTabOrder: base });
|
||||
|
||||
const fromNumId = Number(fromStrId);
|
||||
if (!isNaN(fromNumId) && fromStrId !== "library" && fromStrId !== "downloaded") {
|
||||
const zeroCat = store.categories.filter(c => c.id === 0);
|
||||
const sortable = store.categories.filter(c => c.id !== 0).sort((a, b) => a.order - b.order);
|
||||
const sFromIdx = sortable.findIndex(c => c.id === fromNumId);
|
||||
const sToIdx = sortable.findIndex(c => String(c.id) === toStrId);
|
||||
if (sFromIdx >= 0 && sToIdx >= 0 && sFromIdx !== sToIdx) {
|
||||
const reordered = [...sortable];
|
||||
const [moved] = reordered.splice(sFromIdx, 1);
|
||||
reordered.splice(sToIdx, 0, moved);
|
||||
setCategories([...zeroCat, ...reordered.map((c, i) => ({ ...c, order: i + 1 }))]);
|
||||
gql<{ updateCategoryOrder: { categories: Category[] } }>(UPDATE_CATEGORY_ORDER, { id: fromNumId, position: sToIdx + 1 })
|
||||
.then(res => {
|
||||
const updated = res.updateCategoryOrder.categories.filter(c => c.id !== 0);
|
||||
setCategories([
|
||||
...zeroCat,
|
||||
...updated.sort((a, b) => a.order - b.order).map(fresh => {
|
||||
const existing = store.categories.find(c => c.id === fresh.id);
|
||||
return existing ? { ...existing, ...fresh } : fresh;
|
||||
}),
|
||||
]);
|
||||
})
|
||||
.catch(async (e: any) => {
|
||||
catsError = e?.message ?? "Failed to reorder";
|
||||
await loadCategories();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onDragStart(e: DragEvent, id: string) {
|
||||
dragStrId = id;
|
||||
if (e.dataTransfer) { e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData("text/plain", id); }
|
||||
}
|
||||
|
||||
function onDragOver(e: DragEvent, id: string) {
|
||||
e.preventDefault();
|
||||
if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
|
||||
if (dragStrId === id) return;
|
||||
dragOverStrId = id;
|
||||
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
|
||||
dropPosition = e.clientY < rect.top + rect.height / 2 ? "above" : "below";
|
||||
}
|
||||
|
||||
function onDrop(e: DragEvent, id: string) {
|
||||
e.preventDefault();
|
||||
if (dragStrId !== null && dragStrId !== id) applyReorder(dragStrId, id);
|
||||
dragStrId = null; dragOverStrId = null; dropPosition = null;
|
||||
}
|
||||
|
||||
function onDragEnd() { dragStrId = null; dragOverStrId = null; dropPosition = null; }
|
||||
|
||||
function focusInput(node: HTMLElement) { node.focus(); }
|
||||
|
||||
$effect(() => {
|
||||
if (!store.categories.length && !catsLoading) loadCategories();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="s-panel">
|
||||
<div class="s-section">
|
||||
<p class="s-section-title">Manage Folders</p>
|
||||
<div class="s-section-body">
|
||||
<div class="s-row">
|
||||
<span class="s-desc">Folders are stored as Suwayomi categories. Changes sync across all clients.</span>
|
||||
</div>
|
||||
|
||||
{#if catsError}
|
||||
<div class="s-banner s-banner-error">{catsError}</div>
|
||||
{/if}
|
||||
|
||||
{#if catsLoading}
|
||||
<p class="s-empty">Loading folders…</p>
|
||||
{:else}
|
||||
<div class="s-folder-list" class:is-dragging={dragStrId !== null}>
|
||||
{#each orderedAllIds as id}
|
||||
{@const isBuiltin = id === "library" || id === "downloaded"}
|
||||
{@const isCompleted = id === completedId}
|
||||
{@const cat = isBuiltin ? null : (store.categories.find(c => String(c.id) === id) ?? null)}
|
||||
{@const hidden = isHidden(id)}
|
||||
|
||||
|
||||
{#if isBuiltin || cat}
|
||||
<div
|
||||
class="s-folder-row"
|
||||
class:dragging={dragStrId === id}
|
||||
class:drop-above={dragOverStrId === id && dragStrId !== id && dropPosition === "above"}
|
||||
class:drop-below={dragOverStrId === id && dragStrId !== id && dropPosition === "below"}
|
||||
draggable="true"
|
||||
ondragstart={(e) => onDragStart(e, id)}
|
||||
ondragover={(e) => onDragOver(e, id)}
|
||||
ondragleave={() => { if (dragOverStrId === id) { dragOverStrId = null; dropPosition = null; } }}
|
||||
ondrop={(e) => onDrop(e, id)}
|
||||
ondragend={onDragEnd}
|
||||
>
|
||||
{#if isCompleted}
|
||||
|
||||
<span class="s-folder-icon">
|
||||
<CheckSquare size={14} weight="light" />
|
||||
<DotsSixVertical size={14} weight="bold" />
|
||||
</span>
|
||||
<span class="s-folder-name">{cat?.name ?? "Completed"}</span>
|
||||
<span class="s-folder-count">{cat?.mangas?.nodes.length ?? 0} manga</span>
|
||||
<span class="s-folder-badge">built-in</span>
|
||||
<div class="s-folder-actions">
|
||||
<button class="s-btn-icon" class:muted={hidden} onclick={() => toggleHidden(id)} title={hidden ? "Show tab in library" : "Hide tab from library"}>
|
||||
{#if hidden}<EyeSlash size={13} weight="light" />{:else}<Eye size={13} weight="light" />{/if}
|
||||
</button>
|
||||
<button class="s-btn-icon s-btn-icon-lock" disabled title="Built-in tab — cannot be deleted"><Lock size={12} weight="light" /></button>
|
||||
</div>
|
||||
|
||||
{:else if isBuiltin}
|
||||
<span class="s-folder-icon">
|
||||
{#if id === "library"}<BookmarkSimple size={14} weight="light" />{:else}<DownloadSimple size={14} weight="light" />{/if}
|
||||
<DotsSixVertical size={14} weight="bold" />
|
||||
</span>
|
||||
<span class="s-folder-name">{id === "library" ? "Saved" : "Downloaded"}</span>
|
||||
<span class="s-folder-badge">built-in</span>
|
||||
<div class="s-folder-actions">
|
||||
<button class="s-btn-icon" class:muted={hidden} onclick={() => toggleHidden(id)} title={hidden ? "Show tab in library" : "Hide tab from library"}>
|
||||
{#if hidden}<EyeSlash size={13} weight="light" />{:else}<Eye size={13} weight="light" />{/if}
|
||||
</button>
|
||||
<button class="s-btn-icon s-btn-icon-lock" disabled title="Built-in tab — cannot be deleted"><Lock size={12} weight="light" /></button>
|
||||
</div>
|
||||
|
||||
{:else if cat}
|
||||
{#if editingId === cat.id}
|
||||
<input class="s-input full" bind:value={editingName}
|
||||
onkeydown={(e) => { if (e.key === "Enter") commitEdit(); if (e.key === "Escape") { editingId = null; } }}
|
||||
onblur={commitEdit} use:focusInput />
|
||||
<button class="s-btn-icon" onclick={commitEdit} title="Save">✓</button>
|
||||
{:else}
|
||||
<div class="s-folder-identity" draggable="true"
|
||||
ondragstart={(e) => onDragStart(e, id)}
|
||||
ondragend={onDragEnd}>
|
||||
<span class="s-folder-icon">
|
||||
<FolderSimple size={14} weight="light" />
|
||||
<DotsSixVertical size={14} weight="bold" />
|
||||
</span>
|
||||
<span class="s-folder-name" onclick={(e) => { e.stopPropagation(); startEdit(cat.id, cat.name); }} title="Click to rename">{cat.name}</span>
|
||||
</div>
|
||||
|
||||
<span class="s-folder-count">{cat.mangas?.nodes.length ?? 0} manga</span>
|
||||
|
||||
<div class="s-folder-actions">
|
||||
<button class="s-btn-icon" class:active={(store.settings.defaultLibraryCategoryId ?? null) === cat.id} onclick={() => updateSettings({ defaultLibraryCategoryId: (store.settings.defaultLibraryCategoryId ?? null) === cat.id ? null : cat.id })} title={(store.settings.defaultLibraryCategoryId ?? null) === cat.id ? "Remove as default folder" : "Set as default folder"}>
|
||||
<Star size={13} weight={(store.settings.defaultLibraryCategoryId ?? null) === cat.id ? "fill" : "light"} />
|
||||
</button>
|
||||
<button class="s-btn-icon" class:muted={hidden} onclick={() => toggleHidden(id)} title={hidden ? "Show in library" : "Hide from library"}>
|
||||
{#if hidden}<EyeSlash size={13} weight="light" />{:else}<Eye size={13} weight="light" />{/if}
|
||||
</button>
|
||||
<button class="s-btn-icon" class:active={cat.includeInUpdate !== false} class:inactive={cat.includeInUpdate === false} onclick={() => toggleCategoryFlag(cat.id, "includeInUpdate")} title={cat.includeInUpdate !== false ? "Included in updates — click to exclude" : "Excluded from updates — click to include"}>
|
||||
{#if cat.includeInUpdate !== false}<ArrowsClockwise size={13} weight="bold" />{:else}<ArrowsCounterClockwise size={13} weight="light" />{/if}
|
||||
</button>
|
||||
<button class="s-btn-icon" class:active={cat.includeInDownload !== false} class:inactive={cat.includeInDownload === false} onclick={() => toggleCategoryFlag(cat.id, "includeInDownload")} title={cat.includeInDownload !== false ? "Included in auto-downloads — click to exclude" : "Excluded from auto-downloads — click to include"}>
|
||||
<DownloadSimple size={13} weight={cat.includeInDownload !== false ? "bold" : "light"} />
|
||||
</button>
|
||||
<button class="s-btn-icon danger" onclick={() => deleteFolder(cat.id)} title="Delete folder">
|
||||
<Trash size={12} weight="light" />
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if store.categories.filter(c => c.id !== 0 && c.name !== "Completed").length === 0}
|
||||
<p class="s-empty">No custom folders yet. Create one below.</p>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<div class="s-folder-create">
|
||||
<input class="s-input full" placeholder="New folder name…" bind:value={newFolderName}
|
||||
onkeydown={(e) => e.key === "Enter" && createFolder()} />
|
||||
<button class="s-btn s-btn-accent" onclick={createFolder} disabled={!newFolderName.trim()}>
|
||||
<Plus size={13} weight="bold" /> Create
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.s-folder-list {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.s-folder-list.is-dragging,
|
||||
.s-folder-list.is-dragging * {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.s-folder-row {
|
||||
transition: opacity 0.15s, background 0.1s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.s-folder-row.dragging {
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.s-folder-row.drop-above::before,
|
||||
.s-folder-row.drop-below::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
height: 2px;
|
||||
background: var(--color-success, #4ade80);
|
||||
border-radius: 2px;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.s-folder-row.drop-above::before { top: -1px; }
|
||||
.s-folder-row.drop-below::after { bottom: -1px; }
|
||||
|
||||
.s-folder-icon-static {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
color: var(--text-primary);
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.s-folder-identity {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: var(--text-primary);
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.s-folder-icon {
|
||||
display: grid;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.s-folder-icon > :global(*) {
|
||||
grid-area: 1 / 1;
|
||||
transition: opacity 0.12s;
|
||||
}
|
||||
|
||||
.s-folder-icon > :global(*:last-child) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.s-folder-row:hover .s-folder-icon > :global(*:first-child) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.s-folder-row:hover .s-folder-icon > :global(*:last-child) {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.s-folder-name {
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.s-folder-name:hover {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
|
||||
.s-folder-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
margin-left: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.s-folder-badge {
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--text-faint);
|
||||
background: var(--bg-subtle);
|
||||
border: 1px solid var(--border-dim);
|
||||
border-radius: 3px;
|
||||
padding: 1px 5px;
|
||||
flex-shrink: 0;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.s-btn-icon.active {
|
||||
color: var(--accent, #6c8ef5);
|
||||
}
|
||||
|
||||
.s-btn-icon.inactive {
|
||||
color: var(--color-error, #f87171);
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.s-btn-icon.inactive:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.s-btn-icon.muted {
|
||||
color: var(--text-faint);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.s-btn-icon-lock {
|
||||
opacity: 0.25;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.s-btn-icon-lock:hover {
|
||||
opacity: 0.25;
|
||||
color: inherit;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user