Merge pull request #926 from SnowCait/developer-mode

Developer mode
SnowCait · Dec 18, 2023 · d6fa987 · d6fa987 · vercel · Dec 18, 2023
2 parents 93f0483 + 59db39d
commit d6fa987
Show file tree

Hide file tree

Showing 13 changed files with 62 additions and 71 deletions.
diff --git a/web/src/app.css b/web/src/app.css
@@ -307,6 +307,7 @@ progress {
 [aria-disabled='true'] {
 	cursor: default;
 }
+
 /* End reset css */
 
 :root {
@@ -494,3 +495,11 @@ dialog::backdrop {
 svg.logo {
 	fill: var(--accent);
 }
+
+code {
+	display: block;
+	white-space: pre;
+	background-color: var(--accent-surface-low);
+	overflow: auto;
+	padding: 0.8rem;
+}
diff --git a/web/src/lib/i18n/locales/en.json b/web/src/lib/i18n/locales/en.json
@@ -59,7 +59,8 @@
 	"or": "OR",
 	"preferences": {
 		"uri_scheme": "Open web+nostr: in nostter",
-		"enable_uri_scheme": "Enable"
+		"enable_uri_scheme": "Enable",
+		"developer_mode": "Developer mode"
 	},
 	"content": {
 		"show": "Show"

diff --git a/web/src/lib/i18n/locales/ja.json b/web/src/lib/i18n/locales/ja.json
@@ -58,7 +58,8 @@
 	"or": "または",
 	"preferences": {
 		"uri_scheme": "web+nostr: を nostter で開く",
-		"enable_uri_scheme": "有効化"
+		"enable_uri_scheme": "有効化",
+		"developer_mode": "開発者モード"
 	},
 	"content": {
 		"show": "表示"

diff --git a/web/src/routes/(app)/content/LongFormContent.svelte b/web/src/routes/(app)/content/LongFormContent.svelte
@@ -47,7 +47,7 @@
 			<h5>ID</h5>
 			<div>{naddr}</div>
 			<h5>Event JSON</h5>
-			<pre><code class="json">{JSON.stringify(event, null, 2)}</code></pre>
+			<code>{JSON.stringify(event, null, 2)}</code>
 			<div>
 				Open in <a
 					href="https://koteitan.github.io/nostr-post-checker/?eid={nip19.neventEncode({
@@ -111,14 +111,4 @@
 		color: lightgray;
 		height: 20px;
 	}
-
-	.develop pre {
-		background-color: #f6f8fa;
-		padding: 0.5em;
-		overflow: auto;
-	}
-
-	.develop .json {
-		font-size: 0.8em;
-	}
 </style>
diff --git a/web/src/routes/(app)/preferences/+page.svelte b/web/src/routes/(app)/preferences/+page.svelte
@@ -5,7 +5,7 @@
 	import ReactionEmoji from './ReactionEmoji.svelte';
 	import Logout from '../Logout.svelte';
 	import { author } from '../../../stores/Author';
-	import { debugMode } from '../../../stores/Preference';
+	import { debugMode, developerMode } from '../../../stores/Preference';
 	import WordMute from './WordMute.svelte';
 	import AutoRefresh from './AutoRefresh.svelte';
 	import MutedUsers from './MutedUsers.svelte';
@@ -15,6 +15,8 @@
 	import ZapButton from '$lib/components/ZapButton.svelte';
 	import UriScheme from './UriScheme.svelte';
 	import EnablePreview from './EnablePreview.svelte';
+	import DeveloperMode from './DeveloperMode.svelte';
+	import WebStorage from './WebStorage.svelte';
 
 	let debugCounter = 0;
 
@@ -40,6 +42,10 @@
 <div><Notification /></div>
 <div><UriScheme /></div>
 <div><AutoRefresh /></div>
+<div><DeveloperMode /></div>
+{#if $developerMode}
+	<div><WebStorage /></div>
+{/if}
 {#if $debugMode}
 	<div><ClearEmojiMartCache /></div>
 {/if}

diff --git a/web/src/routes/(app)/preferences/DeveloperMode.svelte b/web/src/routes/(app)/preferences/DeveloperMode.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { _ } from 'svelte-i18n';
+	import { developerMode } from '../../../stores/Preference';
+</script>
+
+<label>
+	<input type="checkbox" bind:value={$developerMode} />
+	<span>{$_('preferences.developer_mode')}</span>
+</label>
diff --git a/web/src/routes/(app)/preferences/WebStorage.svelte b/web/src/routes/(app)/preferences/WebStorage.svelte
@@ -0,0 +1,19 @@
+<section class="card">
+	<h3>Local storage</h3>
+	<code>{JSON.stringify(localStorage, null, 2)}</code>
+</section>
+
+<section class="card">
+	<h3>Session storage</h3>
+	<code>{JSON.stringify(sessionStorage, null, 2)}</code>
+</section>
+
+<style>
+	section + section {
+		margin-top: 1rem;
+	}
+
+	h3 {
+		margin: 0.5rem auto;
+	}
+</style>
diff --git a/web/src/routes/(app)/timeline/Channel.svelte b/web/src/routes/(app)/timeline/Channel.svelte
@@ -80,7 +80,7 @@
 			<h5>ID</h5>
 			<div>{nip19.neventEncode({ id: event.id })}</div>
 			<h5>Event JSON</h5>
-			<pre><code class="json">{JSON.stringify(event, null, 2)}</code></pre>
+			<code>{JSON.stringify(event, null, 2)}</code>
 			<div>
 				Open in <a
 					href="https://koteitan.github.io/nostr-post-checker/?eid={nip19.neventEncode({
@@ -142,14 +142,4 @@
 		color: lightgray;
 		height: 20px;
 	}
-
-	.develop pre {
-		background-color: #f6f8fa;
-		padding: 0.5em;
-		overflow: auto;
-	}
-
-	.develop .json {
-		font-size: 0.8em;
-	}
 </style>
diff --git a/web/src/routes/(app)/timeline/Note.svelte b/web/src/routes/(app)/timeline/Note.svelte
@@ -431,12 +431,11 @@
 						<br />
 						<div>{nip19.neventEncode({ id: item.event.id })}</div>
 						<h5>Event JSON</h5>
-						<pre><code class="json">{JSON.stringify(item.event, null, 2)}</code></pre>
+						<code>{JSON.stringify(item.event, null, 2)}</code>
 						<h5>User ID</h5>
 						<div>{nip19.npubEncode(item.event.pubkey)}</div>
 						<h5>User JSON</h5>
-						<pre><code class="json">{JSON.stringify(metadata?.content, null, 2)}</code
-							></pre>
+						<code>{JSON.stringify(metadata?.content, null, 2)}</code>
 						<h5>Code Points</h5>
 						<h6>display name</h6>
 						<p>
@@ -495,15 +494,6 @@
 		background-color: var(--surface);
 	}
 
-	.develop pre {
-		background-color: var(--accent-surface-low);
-		padding: 0.5em;
-		overflow: auto;
-	}
-	.develop .json {
-		font-size: 0.8em;
-	}
-
 	.channel,
 	.proxy {
 		margin-top: 0.4rem;

diff --git a/web/src/routes/(app)/timeline/Reaction.svelte b/web/src/routes/(app)/timeline/Reaction.svelte
@@ -68,11 +68,11 @@
 		<br />
 		<div>{nip19.neventEncode({ id: event.id })}</div>
 		<h5>Event JSON</h5>
-		<pre><code class="json">{JSON.stringify(event, null, 2)}</code></pre>
+		<code>{JSON.stringify(event, null, 2)}</code>
 		<h5>User ID</h5>
 		<div>{nip19.npubEncode(event.pubkey)}</div>
 		<h5>User JSON</h5>
-		<pre><code class="json">{JSON.stringify(metadata?.content, null, 2)}</code></pre>
+		<code>{JSON.stringify(metadata?.content, null, 2)}</code>
 		<div>
 			Open in <a
 				href="https://koteitan.github.io/nostr-post-checker/?eid={nip19.neventEncode({
@@ -115,13 +115,4 @@
 		color: lightgray;
 		height: 20px;
 	}
-
-	.develop pre {
-		background-color: #f6f8fa;
-		padding: 0.5em;
-		overflow: auto;
-	}
-	.develop .json {
-		font-size: 0.8em;
-	}
 </style>
diff --git a/web/src/routes/(app)/timeline/RepostedNote.svelte b/web/src/routes/(app)/timeline/RepostedNote.svelte
@@ -67,11 +67,11 @@
 		<br />
 		<div>{nip19.neventEncode({ id: item.event.id })}</div>
 		<h5>Event JSON</h5>
-		<pre><code class="json">{JSON.stringify(item.event, null, 2)}</code></pre>
+		<code>{JSON.stringify(item.event, null, 2)}</code>
 		<h5>User ID</h5>
 		<div>{nip19.npubEncode(item.event.pubkey)}</div>
 		<h5>User JSON</h5>
-		<pre><code class="json">{JSON.stringify(metadata?.content, null, 2)}</code></pre>
+		<code>{JSON.stringify(metadata?.content, null, 2)}</code>
 		<div>
 			Open in <a
 				href="https://koteitan.github.io/nostr-post-checker/?eid={nip19.neventEncode({
@@ -114,13 +114,4 @@
 		color: var(--accent-gray);
 		height: 20px;
 	}
-
-	.develop pre {
-		background-color: #f6f8fa;
-		padding: 0.5em;
-		overflow: auto;
-	}
-	.develop .json {
-		font-size: 0.8em;
-	}
 </style>
diff --git a/web/src/routes/(app)/timeline/Zap.svelte b/web/src/routes/(app)/timeline/Zap.svelte
@@ -89,13 +89,13 @@
 		<br />
 		<div>{nip19.neventEncode({ id: event.id })}</div>
 		<h5>Event JSON</h5>
-		<pre><code class="json">{JSON.stringify(event, null, 2)}</code></pre>
+		<code>{JSON.stringify(event, null, 2)}</code>
 		<h5>Zap Request Event JSON</h5>
-		<pre><code class="json">{JSON.stringify(zapRequestEvent, null, 2)}</code></pre>
+		<code>{JSON.stringify(zapRequestEvent, null, 2)}</code>
 		<h5>User ID</h5>
 		<div>{nip19.npubEncode(event.pubkey)}</div>
 		<h5>User JSON</h5>
-		<pre><code class="json">{JSON.stringify(metadata?.content, null, 2)}</code></pre>
+		<code>{JSON.stringify(metadata?.content, null, 2)}</code>
 		<div>
 			Open in <a
 				href="https://koteitan.github.io/nostr-post-checker/?eid={nip19.neventEncode({
@@ -142,13 +142,4 @@
 		color: var(--accent-gray);
 		height: 20px;
 	}
-
-	.develop pre {
-		background-color: #f6f8fa;
-		padding: 0.5em;
-		overflow: auto;
-	}
-	.develop .json {
-		font-size: 0.8em;
-	}
 </style>
diff --git a/web/src/stores/Preference.ts b/web/src/stores/Preference.ts
@@ -23,9 +23,12 @@ if (browser) {
 		storage.set('preference:auto-refresh', JSON.stringify(value));
 	});
 }
+
 export const enablePreview = writable(
 	browser ? new WebStorage(localStorage).get('preference:preview') !== 'false' : true
 );
 
+export const developerMode = writable(false);
+
 // Temporary
 export const debugMode = writable(false);