From acb1b3180abad519db7634fb21f8ad04ccae689b Mon Sep 17 00:00:00 2001
From: SnowCait <SnowCait@users.noreply.github.com>
Date: Fri, 13 Oct 2023 12:05:15 +0900
Subject: [PATCH 1/3] Upload profile image

---
 web/src/routes/editor/MediaPicker.svelte |  8 ++-
 web/src/routes/profile/+page.svelte      | 85 ++++++++++++++++++++----
 2 files changed, 77 insertions(+), 16 deletions(-)

diff --git a/web/src/routes/editor/MediaPicker.svelte b/web/src/routes/editor/MediaPicker.svelte
index 3d23255db..f2ce85878 100644
--- a/web/src/routes/editor/MediaPicker.svelte
+++ b/web/src/routes/editor/MediaPicker.svelte
@@ -1,12 +1,16 @@
 <script lang="ts">
+	import { createEventDispatcher } from 'svelte';
 	import IconPhoto from '@tabler/icons-svelte/dist/svelte/icons/IconPhoto.svelte';
 
-	export let mediaFiles: File[];
+	export let mediaFiles: File[] = [];
 
 	let input: HTMLInputElement | undefined;
 	let files: FileList;
 
+	const dispatch = createEventDispatcher();
+
 	function upload() {
+		dispatch('pick', files);
 		console.log('[media upload]', files);
 		for (const file of files) {
 			console.log('[media upload file]', file);
@@ -16,7 +20,7 @@
 	}
 </script>
 
-<button on:click={() => input?.click()} class="clear">
+<button on:click|preventDefault={() => input?.click()} class="clear">
 	<IconPhoto size="30" />
 </button>
 <input type="file" bind:this={input} bind:files on:change={upload} accept="image/*" hidden>
diff --git a/web/src/routes/profile/+page.svelte b/web/src/routes/profile/+page.svelte
index 28b82d2fe..6145b356a 100644
--- a/web/src/routes/profile/+page.svelte
+++ b/web/src/routes/profile/+page.svelte
@@ -1,11 +1,49 @@
 <script lang="ts">
 	import { Kind, nip19 } from 'nostr-tools';
 	import { Api } from '$lib/Api';
+	import { NostrcheckMe } from '$lib/media/NostrcheckMe';
 	import { pubkey, author, authorProfile, metadataEvent, writeRelays } from '../../stores/Author';
 	import { pool } from '../../stores/Pool';
 	import { goto } from '$app/navigation';
+	import MediaPicker from '../editor/MediaPicker.svelte';
 
-	async function save() {
+	async function picturePicked({detail: files}: {detail: FileList}): Promise<void> {
+		console.log('[profile picture]', files);
+		if (files.length !== 1) {
+			console.error('[profile picture error]', files);
+		}
+
+		const file = files[0];
+		try {
+			const media = new NostrcheckMe();
+			const { url } = await media.upload(file);
+			if (url) {
+				$authorProfile.picture = url;
+			}
+		} catch (error) {
+			console.error('[media upload error]', error);
+		}
+	}
+
+	async function bannerUploaded({detail: files}: {detail: FileList}): Promise<void> {
+		console.log('[profile banner]', files);
+		if (files.length !== 1) {
+			console.error('[profile banner error]', files);
+		}
+
+		const file = files[0];
+		try {
+			const media = new NostrcheckMe();
+			const { url } = await media.upload(file);
+			if (url) {
+				$authorProfile.banner = url;
+			}
+		} catch (error) {
+			console.error('[media upload error]', error);
+		}
+	}
+
+	async function save(): Promise<void> {
 		console.log('[save metadata]', $authorProfile);
 
 		if ($authorProfile === undefined) {
@@ -30,27 +68,34 @@
 
 <h1>Edit profile</h1>
 
-<form on:submit|preventDefault={save} on:keyup|stopPropagation={() => console.debug}>
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<form on:submit|preventDefault={save} on:keyup|stopPropagation={console.debug}>
 	<div class="picture">
 		<label for="picture">Picture</label>
-		<input
-			type="url"
-			id="picture"
-			placeholder="https://example.com/picture.png"
-			bind:value={$authorProfile.picture}
-		/>
+		<div>
+			<input
+				type="url"
+				id="picture"
+				placeholder="https://example.com/picture.png"
+				bind:value={$authorProfile.picture}
+			/>
+			<MediaPicker on:pick={picturePicked} />
+		</div>
 		{#if $authorProfile.picture}
 			<img src={$authorProfile.picture} alt="preview" />
 		{/if}
 	</div>
 	<div class="banner">
 		<label for="banner">Banner</label>
-		<input
-			type="url"
-			id="banner"
-			placeholder="https://example.com/banner.webp"
-			bind:value={$authorProfile.banner}
-		/>
+		<div>
+			<input
+				type="url"
+				id="banner"
+				placeholder="https://example.com/banner.webp"
+				bind:value={$authorProfile.banner}
+			/>
+			<MediaPicker on:pick={bannerUploaded} />
+		</div>
 		{#if $authorProfile.banner}
 			<img src={$authorProfile.banner} alt="preview" />
 		{/if}
@@ -118,6 +163,17 @@
 		width: 100%;
 	}
 
+	.picture div, .banner div {
+		display: flex;
+		margin-top: 0;
+		margin-bottom: 1rem;
+	}
+
+	.picture input, .banner input {
+		width: calc(100% - 50px);
+		margin-right: 10px;
+	}
+
 	textarea {
 		height: 10rem;
 	}
@@ -128,6 +184,7 @@
 	}
 
 	img {
+		max-width: 100%;
 		max-height: 10rem;
 	}
 </style>

From 6d88c738e92129ca24285d214a60b05d53896337 Mon Sep 17 00:00:00 2001
From: SnowCait <SnowCait@users.noreply.github.com>
Date: Fri, 13 Oct 2023 12:15:35 +0900
Subject: [PATCH 2/3] Title

---
 web/src/routes/profile/+page.svelte | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/web/src/routes/profile/+page.svelte b/web/src/routes/profile/+page.svelte
index 6145b356a..de1a796b6 100644
--- a/web/src/routes/profile/+page.svelte
+++ b/web/src/routes/profile/+page.svelte
@@ -25,7 +25,7 @@
 		}
 	}
 
-	async function bannerUploaded({detail: files}: {detail: FileList}): Promise<void> {
+	async function bannerPicked({detail: files}: {detail: FileList}): Promise<void> {
 		console.log('[profile banner]', files);
 		if (files.length !== 1) {
 			console.error('[profile banner error]', files);
@@ -66,6 +66,10 @@
 	}
 </script>
 
+<svelte:head>
+	<title>Edit profile - nostter</title>
+</svelte:head>
+
 <h1>Edit profile</h1>
 
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
@@ -94,7 +98,7 @@
 				placeholder="https://example.com/banner.webp"
 				bind:value={$authorProfile.banner}
 			/>
-			<MediaPicker on:pick={bannerUploaded} />
+			<MediaPicker on:pick={bannerPicked} />
 		</div>
 		{#if $authorProfile.banner}
 			<img src={$authorProfile.banner} alt="preview" />

From c1096492eb4d20c3bbad63647141d535e6981763 Mon Sep 17 00:00:00 2001
From: SnowCait <SnowCait@users.noreply.github.com>
Date: Fri, 13 Oct 2023 12:20:59 +0900
Subject: [PATCH 3/3] Refactor media picker

---
 web/src/routes/editor/MediaPicker.svelte | 14 +-------------
 web/src/routes/editor/NoteEditor.svelte  | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/web/src/routes/editor/MediaPicker.svelte b/web/src/routes/editor/MediaPicker.svelte
index f2ce85878..bcef97d2c 100644
--- a/web/src/routes/editor/MediaPicker.svelte
+++ b/web/src/routes/editor/MediaPicker.svelte
@@ -2,28 +2,16 @@
 	import { createEventDispatcher } from 'svelte';
 	import IconPhoto from '@tabler/icons-svelte/dist/svelte/icons/IconPhoto.svelte';
 
-	export let mediaFiles: File[] = [];
-
 	let input: HTMLInputElement | undefined;
 	let files: FileList;
 
 	const dispatch = createEventDispatcher();
-
-	function upload() {
-		dispatch('pick', files);
-		console.log('[media upload]', files);
-		for (const file of files) {
-			console.log('[media upload file]', file);
-			mediaFiles.push(file);
-			mediaFiles = mediaFiles;
-		}
-	}
 </script>
 
 <button on:click|preventDefault={() => input?.click()} class="clear">
 	<IconPhoto size="30" />
 </button>
-<input type="file" bind:this={input} bind:files on:change={upload} accept="image/*" hidden>
+<input type="file" bind:this={input} bind:files on:change={() => dispatch('pick', files)} accept="image/*" hidden>
 
 <style>
 	button {
diff --git a/web/src/routes/editor/NoteEditor.svelte b/web/src/routes/editor/NoteEditor.svelte
index 19e5cfbeb..181441ef6 100644
--- a/web/src/routes/editor/NoteEditor.svelte
+++ b/web/src/routes/editor/NoteEditor.svelte
@@ -66,6 +66,7 @@
 		}
 
 		const file = files[files.length - 1];
+		console.log('[media file]', file);
 		try {
 			const media = new NostrcheckMe();
 			const { url } = await media.upload(file);
@@ -374,6 +375,18 @@
 		$mediaFiles.push(file);
 		$mediaFiles = $mediaFiles;
 	}
+
+	async function mediaPicked({detail: files}: {detail: FileList}): Promise<void> {
+		console.log('[media picked]', files);
+		if (files.length === 0) {
+			return;
+		}
+
+		for (const file of files) {
+			$mediaFiles.push(file);
+			$mediaFiles = $mediaFiles;
+		}
+	}
 </script>
 
 <article bind:this={article} class="note-editor">
@@ -394,7 +407,7 @@
 	/>
 	<div class="actions">
 		<div class="options">
-			<MediaPicker bind:mediaFiles={$mediaFiles} />
+			<MediaPicker on:pick={mediaPicked} />
 			<EmojiPickerSlide bind:this={emojiPickerSlide} on:pick={onEmojiPick} />
 			<ContentWarning bind:reason={contentWarningReason} />
 		</div>