aasdfdfas

package.json

@@ -46,11 +46,9 @@
 		"@auth/sveltekit": "^0.2.2",
 		"@ltd/j-toml": "^1.38.0",
 		"@rgossiaux/svelte-headlessui": "^1.0.2",
-		"@xmcl/modrinth": "^1.1.0",
 		"minio": "^7.0.32",
 		"nano": "^10.1.2",
 		"nanoid": "^4.0.1",
-		"octokit": "^2.0.14",
 		"svelte-feather-icons": "^4.0.0",
 		"zod": "^3.20.6"
 	}

src/lib/modrinth.ts

@@ -0,0 +1,76 @@
+import { z } from 'zod';
+
+export const searchProjectsHit = z.object({
+	slug: z.string().regex(/^[\w!@$()`.+,"\-']{3,64}$/),
+	title: z.string(),
+	description: z.string(),
+	categories: z.string().array().default([]),
+	client_side: z.enum(['required', 'optional', 'unsupported', 'unknown']),
+	server_side: z.enum(['required', 'optional', 'unsupported', 'unknown']),
+	project_type: z.enum(['mod', 'modpack', 'resourcepack', 'shader']),
+	downloads: z.number(),
+	icon_url: z.union([z.string().url(), z.literal('').transform(() => '/favicon.png')]),
+	color: z.number().nullable(),
+	project_id: z.string(),
+	author: z.string(),
+	display_categories: z.string().array().default([]),
+	versions: z.string().array(),
+	follows: z.number(),
+	date_created: z.string().datetime({ offset: true }),
+	date_modified: z.string().datetime({ offset: true }),
+	latest_version: z.string().optional(),
+	license: z.string(),
+	gallery: z.string().array().default([]),
+	featured_gallery: z.string().nullable()
+});
+
+export const searchProjectsResponse = z.object({
+	hits: searchProjectsHit.array(),
+	offset: z.number(),
+	limit: z.number(),
+	total_hits: z.number()
+});
+
+const searchProjectsRequest = z.object({
+	query: z.string().optional(),
+	facets: z
+		.string()
+		.regex(/^(categories|versions|license|project_type):(.+)$/)
+		.array()
+		.array()
+		.default([]),
+	index: z.enum(['relevance', 'downloads', 'follows', 'newest', 'updated']).default('relevance'),
+	offset: z.number().default(0),
+	limit: z.number().default(10),
+	filters: z.string().optional()
+});
+
+function searchProjectsRequestToUrlParams(
+	request: z.infer<typeof searchProjectsRequest>
+): URLSearchParams {
+	const params = new URLSearchParams();
+	if (typeof request.query != 'undefined') {
+		params.set('query', request.query);
+	}
+	params.set('facets', JSON.stringify(request.facets));
+	params.set('index', request.index);
+	params.set('offset', request.offset.toString());
+	params.set('limit', request.limit.toString());
+	if (typeof request.filters != 'undefined') {
+		params.set('filters', request.filters);
+	}
+	return params;
+}
+
+export async function searchProjects(
+	request: z.input<typeof searchProjectsRequest>
+): Promise<z.infer<typeof searchProjectsResponse>> {
+	const parsedRequest = searchProjectsRequest.parse(request);
+	const params = searchProjectsRequestToUrlParams(parsedRequest);
+	const response = await fetch('https://api.modrinth.com/v2/search?' + params.toString(), {
+		headers: {
+			'User-Agent': 'NotModdermore/noversion (+https://git.skye.vg/me/not-moddermore/)'
+		}
+	});
+	return searchProjectsResponse.parse(await response.json());
+}

src/routes/create/+page.server.ts

@@ -5,7 +5,7 @@ import { fileTreeSchema } from '$lib/types-zod';
 import { get_blobs } from '$lib/utils';
 import type { Modpack } from '$lib/types';
 import { nanoid } from 'nanoid';
-import { minioClient, nano } from '$lib/clients';
+import { minioClient, nano } from '$lib/server/clients';
 
 export const actions: Actions = {
 	default: async (event) => {

src/routes/create/+page.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import FlattenedFileList from './FlattenedFileList.svelte';
+	import FileTree from './FileTree.svelte';
 
-	import type { Folder } from '$lib/types';
+	import type { File, Folder } from '$lib/types';
 	import {
 		Tab,
 		TabGroup,
@@ -13,12 +14,21 @@
 		DialogTitle,
 		DialogDescription
 	} from '@rgossiaux/svelte-headlessui';
-	import { PlusIcon } from 'svelte-feather-icons';
+	import { FolderIcon, PlusIcon } from 'svelte-feather-icons';
+	import {
+		searchProjects,
+		type searchProjectsHit,
+		type searchProjectsResponse
+	} from '$lib/modrinth';
+	import type { z } from 'zod';
+	import toml from '@ltd/j-toml';
 	let fileTree: Folder = {
 		type: 'folder',
 		children: {
-			mods: { type: 'folder', children: {
-				"quark.pw.toml": {
+			mods: {
+				type: 'folder',
+				children: {
+					'quark.pw.toml': {
 						type: 'file',
 						inline: true,
 						metafile: true,
@@ -37,9 +47,10 @@ file-id = 4366541
 project-id = 243121
 `,
 						sha1: '478805ce54b082dadb1042ccfb46a68cfde3fc35',
-					sha512: '5d364049ff53af2154ccae58dd53d2111ef592b21bff03705314cd6d12378cfeb6376b8bc3065ac59e1c9452447bec0eb345ecc19f0de1a17c20ea374f802f05'
+						sha512:
+							'5d364049ff53af2154ccae58dd53d2111ef592b21bff03705314cd6d12378cfeb6376b8bc3065ac59e1c9452447bec0eb345ecc19f0de1a17c20ea374f802f05'
 					},
-				"waystones.pw.toml": {
+					'waystones.pw.toml': {
 						type: 'file',
 						inline: true,
 						metafile: true,
@@ -58,46 +69,238 @@ mod-id = "LOpKHB2A"
 version = "2sIhirkG"
 `,
 						sha1: '25f4b57fbd8a985b4872bb8fdadd14580b0f9f81',
-					sha512: '125fb6fc706363753c1c201192024415a23c1098c8e44d5deeaf5448215d83108b9a9a5aba0a029dd9015eff536dc1da63d16c3be0d7f9e39d6f482b8ce008c3'
+						sha512:
+							'125fb6fc706363753c1c201192024415a23c1098c8e44d5deeaf5448215d83108b9a9a5aba0a029dd9015eff536dc1da63d16c3be0d7f9e39d6f482b8ce008c3'
+					}
+				}
 			}
-			} }
 		}
 	};
 	let blobs: Blob[] = [];
 	let isOpen = false;
+	let modalStatus:
+		| 'none'
+		| 'search:mods'
+		| 'search:resourcepacks'
+		| 'search:shaderpacks'
+		| 'edit:simple'
+		| 'edit:advanced'
+		| 'select:modversion' = 'none';
+
+	let searchTerm = '';
+	let searchTermSaved = '';
+	let searchResult: z.infer<typeof searchProjectsResponse>;
+	let searchLoading = false;
+	let searchLoadingMore = false;
+	async function search() {
+		searchLoading = true;
+		searchTermSaved = searchTerm;
+		let facet: string = '';
+		switch (modalStatus) {
+			case 'search:mods':
+				facet = 'project_type:mod';
+				break;
+			case 'search:resourcepacks':
+				facet = 'project_type:resourcepack';
+				break;
+			case 'search:shaderpacks':
+				facet = 'project_type:shader';
+				break;
+		}
+		const result = await searchProjects({
+			query: searchTerm,
+			facets: [[facet]]
+		});
+		console.log(result);
+		searchResult = result;
+		searchLoading = false;
+	}
+	async function searchMore() {
+		searchLoadingMore = true;
+		const result = await searchProjects({
+			query: searchTermSaved,
+			facets: [['project_type:mod']],
+			offset: searchResult.hits.length
+		});
+		console.log(result);
+		searchResult.hits = searchResult.hits.concat(result.hits);
+		searchLoadingMore = false;
+	}
+
+	async function addMod(mod: z.infer<typeof searchProjectsHit>) {}
+
+	let editPath: string[] = [];
+	function getFileFromPath(path: string[], tree: Folder): File | undefined {
+		const segment = editPath.shift();
+		if (typeof segment == 'undefined') {
+			return undefined
+		}
+		const next = tree.children[segment];
+		if (!next) {
+			return undefined;
+		}
+		if (next.type == 'file' && editPath.length == 0) {
+			return next;
+		} else if (next.type == 'file') {
+			return undefined;
+		}
+		return getFileFromPath(editPath, next);
+	}
 </script>
 
+<div>
 	<TabGroup>
 		<TabList>
 			<Tab>Simple</Tab>
 			<Tab>Advanced</Tab>
 		</TabList>
 		<TabPanels>
-		<TabPanel>
-			<h1>Mods <button><PlusIcon /></button></h1>
-			<FlattenedFileList tree={fileTree.children.mods ?? { type: 'folder', children: {} }} />
-			<h1>Resource Packs <button><PlusIcon /></button></h1>
+			<TabPanel class="flex flex-col gap-2">
+				<div>
+					<div class="flex flex-row gap-2">
+						<h1 class="text-xl">Mods</h1>
+						<button
+							class="rounded w-6 h-6 bg-green outline-lavender flex justify-center items-center"
+							on:click={() => (modalStatus = 'search:mods')}
+						>
+							<PlusIcon class="w-4 h-4 text-black" />
+						</button>
+					</div>
 					<FlattenedFileList
-				tree={fileTree.children.resourcepacks ?? { type: 'folder', children: {} }}
+						editFile={(path) => {
+							modalStatus = 'edit:simple';
+							editPath = ['mods'].concat(path);
+						}}
+						tree={fileTree.children.mods?.type == 'folder'
+							? fileTree.children.mods
+							: { type: 'folder', children: {} }}
 					/>
-			<h1>Shader Packs <button><PlusIcon /></button></h1>
-			<FlattenedFileList tree={fileTree.children.shaderpacks ?? { type: 'folder', children: {} }} />
+				</div>
+				<div>
+					<div class="flex flex-row gap-2">
+						<h1 class="text-xl">Resource Packs</h1>
+						<button
+							class="rounded w-6 h-6 bg-green outline-lavender flex justify-center items-center"
+							on:click={() => (modalStatus = 'search:resourcepacks')}
+						>
+							<PlusIcon class="w-4 h-4 text-black" />
+						</button>
+					</div>
+					<FlattenedFileList
+						editFile={(path) => {
+							modalStatus = 'edit:simple';
+							editPath = ['resourcepacks'].concat(path);
+						}}
+						tree={fileTree.children.resourcepacks?.type == 'folder'
+							? fileTree.children.resourcepacks
+							: { type: 'folder', children: {} }}
+					/>
+				</div>
+				<div>
+					<div class="flex flex-row gap-2">
+						<h1 class="text-xl">Shader Packs</h1>
+						<button
+							class="rounded w-6 h-6 bg-green outline-lavender flex justify-center items-center"
+							on:click={() => (modalStatus = 'search:shaderpacks')}
+						>
+							<PlusIcon class="w-4 h-4 text-black" />
+						</button>
+					</div>
+					<FlattenedFileList
+						editFile={(path) => {
+							modalStatus = 'edit:simple';
+							editPath = ['shaderpacks'].concat(path);
+						}}
+						tree={fileTree.children.shaderpacks?.type == 'folder'
+							? fileTree.children.shaderpacks
+							: { type: 'folder', children: {} }}
+					/>
+				</div>
+			</TabPanel>
+			<TabPanel>
+				<FolderIcon class="inline" /> /
+				<FileTree tree={fileTree} />
 			</TabPanel>
-		<TabPanel>Content 2</TabPanel>
 		</TabPanels>
 	</TabGroup>
+</div>
 
-<Dialog open={isOpen} on:close={() => (isOpen = false)}>
-	<DialogOverlay />
-
-	<DialogTitle>Deactivate account</DialogTitle>
-	<DialogDescription>This will permanently deactivate your account</DialogDescription>
-
-	<p>
-		Are you sure you want to deactivate your account? All of your data will be permanently removed.
-		This action cannot be undone.
-	</p>
-
-	<button on:click={() => (isOpen = false)}>Deactivate</button>
-	<button on:click={() => (isOpen = false)}>Cancel</button>
+<Dialog
+	open={modalStatus != 'none'}
+	on:close={() => (modalStatus = 'none')}
+	class="fixed top-0 left-0 w-screen h-screen flex overflow-scroll"
+>
+	<DialogOverlay class="fixed top-0 left-0 bg-overlay0 opacity-50 w-screen h-screen" />
+	<div class="m-auto z-10">
+		<div class="bg-base rounded-xl shadow-xl p-5 m-2 flex flex-col gap-1">
+			{#if modalStatus == 'search:mods' || modalStatus == 'search:resourcepacks' || modalStatus == 'search:shaderpacks'}
+				{#if modalStatus == 'search:mods'}
+					<DialogTitle class="text-xl">Add Mod</DialogTitle>
+					<DialogDescription>Add a mod to your modpack</DialogDescription>
+				{:else if modalStatus == 'search:resourcepacks'}
+					<DialogTitle class="text-xl">Add Resource Pack</DialogTitle>
+					<DialogDescription>Add a resource pack to your modpack</DialogDescription>
+				{:else if modalStatus == 'search:shaderpacks'}
+					<DialogTitle class="text-xl">Add Shader</DialogTitle>
+					<DialogDescription>Add a shader to your modpack</DialogDescription>
+				{/if}
+				<div class="flex gap-1">
+					<input
+						type="text"
+						placeholder="Search"
+						bind:value={searchTerm}
+						on:change={search}
+						class="bg-surface0 rounded grow border-1 border-overlay0 outline-lavender focus:ring-lavender focus:border-lavender"
+					/>
+					<button
+						on:click={search}
+						class="rounded p-3 bg-surface0 hover:bg-surface1 outline-lavender">Search</button
+					>
+				</div>
+				{#if searchLoading}
+					Searching...
+				{:else if searchResult?.hits.length > 0}
+					<ul class="flex flex-col gap-2 mt-2">
+						{#each searchResult?.hits ?? [] as hit}
+							<li class="flex flex-row rounded bg-surface0 gap-2 p-1 w-md max-w-md min-w-md shadow">
+								<img
+									src={hit.icon_url}
+									alt="{hit.title} icon"
+									class="bg-surface1 h-16 w-16 rounded-lg"
+								/>
+								<div class="grow">
+									<h1 class="text-lg">{hit.title}</h1>
+									<p>{hit.description}</p>
+									<button
+										on:click={() => addMod(hit)}
+										class="float-right bg-green text-crust p-1 rounded m-1"
+									>
+										<PlusIcon class="inline" />
+									</button>
+								</div>
+							</li>
+						{/each}
+						{#if searchResult?.hits.length < searchResult?.total_hits}
+							<li>
+								<button
+									on:click={searchMore}
+									class="rounded w-full p-3 bg-surface0 hover:bg-surface1 outline-lavender"
+								>
+									Load More
+								</button>
+							</li>
+						{:else if searchLoadingMore}
+							Loading...
+						{/if}
+					</ul>
+				{/if}
+			{:else if modalStatus == 'edit:simple'}
+				{@const file = getFileFromPath(editPath, fileTree)}
+				{#if file && file.inline && file.metafile}
+				{@const parsed = toml.parse(file.content)}
+				{JSON.stringify(parsed)}
+				{/if}
+			{/if}
+		</div>
+	</div>
 </Dialog>

src/routes/create/FileTree.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { Folder } from '$lib/types';
+	import { DownloadIcon, FileIcon, FolderIcon } from 'svelte-feather-icons';
+	import FileTree from './FileTree.svelte';
+
+	export let tree: Folder;
+</script>
+
+<ul>
+	{#each Object.entries(tree.children) as item}
+		<li class="ml-4">
+			{#if item[1].type == 'file'}
+				{#if item[1].inline && item[1].metafile}
+					<DownloadIcon class="inline" />
+					{item[0]}
+				{:else}
+					<FileIcon class="inline" />
+					{item[0]}
+				{/if}
+			{:else}
+				<FolderIcon class="inline" />
+				{item[0]}
+				<FileTree tree={item[1]} />
+			{/if}
+		</li>
+	{/each}
+</ul>

src/routes/create/FlattenedFileList.svelte

@@ -1,8 +1,16 @@
 <script lang="ts">
-	import type { FileTree, File } from '$lib/types';
+	import type { FileTree, File, Folder } from '$lib/types';
 	import { metafileSchema } from '$lib/packwiz-types';
 	import toml from '@ltd/j-toml';
-	export let tree: FileTree;
+	import {
+		Edit3Icon,
+		ExternalLinkIcon,
+		MonitorIcon,
+		ServerIcon,
+		XIcon
+	} from 'svelte-feather-icons';
+	export let tree: Folder;
+	export let editFile: (path: string[]) => void;
 	function getFilesRecursively(tree: FileTree): [string[], File][] {
 		if (tree.type == 'file') {
 			return [[[], tree]];
@@ -18,23 +26,69 @@
 		}
 		return result;
 	}
+	function deletePath(path: string[], base: Folder) {
+		if (path.length <= 1) {
+			delete base.children[path[0]];
+		} else {
+			const newBase = base.children[path.shift() ?? ''];
+			if (newBase.type == 'file') {
+				return;
+			}
+			deletePath(path, newBase);
+		}
+	}
 </script>
 
-<ul>
+<ul class="flex flex-col gap-2 mt-2">
 	{#each getFilesRecursively(tree) as mod (mod[0])}
-		<li>
+		<li class="flex flex-col rounded bg-surface0 gap-2 p-1 max-w-md shadow">
 			{#if mod[1].inline && mod[1].metafile}
 				{@const parsed = metafileSchema.parse(toml.parse(mod[1].content))}
-				<h2>{parsed.name} ({mod[0].join('/')})</h2>
+				<div class="flex flex-row items-end gap-1">
+					<h2 class="text-lg">
+						{parsed.name}
+					</h2>
+					<h3 class="text-sm">
+						({mod[0].join('/')})
+					</h3>
+					<div class="grow" />
+					{#if parsed.side == 'both' || parsed.side == 'client'}
+						<MonitorIcon class="w-4 h-4 shrink-0" />
+					{/if}
+					{#if parsed.side == 'both' || parsed.side == 'server'}
+						<ServerIcon class="w-4 h-4 shrink-0" />
+					{/if}
+					<button
+						on:click={() => editFile(mod[0])}
+						class="rounded w-6 h-6 bg-green outline-lavender flex justify-center items-center shrink-0"
+					>
+						<Edit3Icon class="w-4 h-4 text-crust" />
+					</button>
+					<button
+						on:click={() => {
+							deletePath(mod[0], tree);
+							tree = tree;
+						}}
+						class="rounded w-6 h-6 bg-red outline-lavender flex justify-center items-center shrink-0"
+					>
+						<XIcon class="w-4 h-4 text-crust" />
+					</button>
+				</div>
 				{#if parsed.update.curseforge}
 					<a
 						href="https://minecraft.curseforge.com/projects/{parsed.update.curseforge[
 							'project-id'
-						]}">Curseforge</a
+						]}"
 					>
+						Curseforge
+						<ExternalLinkIcon class="inline" />
+					</a>
 				{/if}
 				{#if parsed.update.modrinth}
-					<a href="https://modrinth.com/project/{parsed.update.modrinth['mod-id']}">Modrinth</a>
+					<a href="https://modrinth.com/project/{parsed.update.modrinth['mod-id']}">
+						Modrinth
+						<ExternalLinkIcon class="inline" />
+					</a>
 				{/if}
 			{:else}
 				<h2>{mod[0].join('/')}</h2>