commit d98cba03ef7bc1f1db2868721d69f021b76b21e7
parent 5e32bdbd7aa417b11c6008e73b6c7d8cf4639fd5
Author: triesap <137732411+triesap@users.noreply.github.com>
Date: Thu, 3 Oct 2024 08:43:02 +0000
Add `/models/nostr-relay/view` route, edit nostr relay routes, add styles
Diffstat:
4 files changed, 322 insertions(+), 2 deletions(-)
diff --git a/src/app.css b/src/app.css
@@ -1,4 +1,5 @@
@import "/static/stylesheets/tailwindcss-app-form.css";
+@import "/static/stylesheets/tailwindcss-app-styles.css";
@import "/static/stylesheets/tailwindcss-app.css";
@import "/static/stylesheets/tailwindcss-spinner.css";
diff --git a/src/routes/(app)/models/nostr-relay/+page.svelte b/src/routes/(app)/models/nostr-relay/+page.svelte
@@ -7,7 +7,9 @@
LayoutTrellis,
LayoutView,
Nav,
+ nav_prev,
nostr_relays_connected,
+ route,
t,
Trellis,
type ITrellisKindTouch,
@@ -72,7 +74,16 @@
},
callback: async () => {
if (show_edit) return;
- // @todo go to view
+ nav_prev.set([
+ ...$nav_prev,
+ {
+ route: `/models/nostr-relay`,
+ label: `Relays`,
+ },
+ ]);
+ await route(`/models/nostr-relay/view`, [
+ [`id`, nostr_relay.id],
+ ]);
},
},
offset: show_edit
diff --git a/src/routes/(app)/models/nostr-relay/view/+page.svelte b/src/routes/(app)/models/nostr-relay/view/+page.svelte
@@ -0,0 +1,305 @@
+<script lang="ts">
+ import { lc } from "$lib/client";
+ import type { NostrRelay } from "@radroots/models";
+ import {
+ app_blur,
+ app_notify,
+ EnvelopeButtons,
+ LayoutTrellis,
+ LayoutView,
+ Nav,
+ qp_id,
+ t,
+ Trellis,
+ } from "@radroots/svelte-lib";
+ import { onMount } from "svelte";
+
+ type LoadData = {
+ nostr_relay: NostrRelay;
+ };
+ let ld: LoadData | undefined = undefined;
+ let show_edit = false;
+
+ onMount(async () => {
+ try {
+ if (!$qp_id) app_notify.set(`Error loading page`);
+ ld = await load_data();
+ } catch (e) {
+ } finally {
+ }
+ });
+
+ const load_data = async (): Promise<LoadData | undefined> => {
+ try {
+ const nostr_relays = await lc.db.nostr_relay_get({
+ id: $qp_id,
+ });
+ if (typeof nostr_relays === `string`) {
+ app_notify.set(`Error loading relay`);
+ return;
+ }
+
+ const nostr_relay = nostr_relays[0];
+
+ const data: LoadData = {
+ nostr_relay,
+ };
+ return data;
+ } catch (e) {
+ console.log(`(error) load_data `, e);
+ }
+ };
+
+ $: {
+ app_blur.set(show_edit);
+ }
+</script>
+
+<LayoutView>
+ <LayoutTrellis>
+ {#if ld}
+ <Trellis
+ basis={{
+ args: {
+ layer: 1,
+ title: {
+ value: `${$t(`common.relay`)}`,
+ },
+ list: [
+ {
+ hide_active: true,
+ touch: {
+ label: {
+ left: [
+ {
+ classes: `text-layer-1-glyph`,
+ value: ld.nostr_relay.url,
+ },
+ ],
+ },
+ },
+ },
+ ],
+ },
+ }}
+ />
+ <Trellis
+ basis={{
+ args: {
+ layer: 1,
+ title: {
+ value: `${$t(`common.status`)}`,
+ },
+ list: [
+ {
+ hide_active: true,
+ touch: {
+ label: {
+ left: [
+ {
+ classes: `text-success`,
+ value: `${$t(`common.connected`)}`,
+ },
+ ],
+ },
+ },
+ },
+ ],
+ },
+ }}
+ />
+ <Trellis
+ basis={{
+ args: {
+ layer: 1,
+ title: {
+ value: `${$t(`model_fields.pubkey`)}`,
+ },
+ list: [
+ {
+ hide_active: true,
+ touch: {
+ label: {
+ left: [
+ {
+ classes: `text-layer-1-glyph`,
+ value: ld.nostr_relay.pubkey
+ ? lc.nostr.lib.npub(
+ ld.nostr_relay.pubkey,
+ true,
+ )
+ : `${$t(`icu.no_*_published`, { value: `${$t(`model_fields.pubkey`)}`.toLowerCase() })}`,
+ },
+ ],
+ },
+ },
+ },
+ ],
+ },
+ }}
+ />
+ <Trellis
+ basis={{
+ args: {
+ layer: 1,
+ title: {
+ value: `${$t(`model_fields.description`)}`,
+ },
+ list: [
+ {
+ hide_active: true,
+ touch: {
+ label: {
+ left: [
+ {
+ classes: `text-layer-1-glyph`,
+ value:
+ ld.nostr_relay
+ .description ||
+ `${$t(`icu.no_*_published`, { value: `${$t(`model_fields.description`)}`.toLowerCase() })}`,
+ },
+ ],
+ },
+ },
+ },
+ ],
+ },
+ }}
+ />
+ <Trellis
+ basis={{
+ args: {
+ layer: 1,
+ title: {
+ value: `${$t(`model_fields.software`)}`,
+ },
+ list: [
+ {
+ hide_active: true,
+ touch: {
+ label: {
+ left: [
+ {
+ classes: `text-layer-1-glyph`,
+ value:
+ ld.nostr_relay.software ||
+ `${$t(`icu.no_*_published`, { value: `${$t(`model_fields.software`)}`.toLowerCase() })}`,
+ },
+ ],
+ },
+ },
+ },
+ ],
+ },
+ }}
+ />
+ <Trellis
+ basis={{
+ args: {
+ layer: 1,
+ title: {
+ value: `${$t(`model_fields.version`)}`,
+ },
+ list: [
+ {
+ hide_active: true,
+ touch: {
+ label: {
+ left: [
+ {
+ classes: `text-layer-1-glyph`,
+ value:
+ ld.nostr_relay.version ||
+ `${$t(`icu.no_*_published`, { value: `${$t(`model_fields.version`)}`.toLowerCase() })}`,
+ },
+ ],
+ },
+ },
+ },
+ ],
+ },
+ }}
+ />
+ <Trellis
+ basis={{
+ args: {
+ layer: 1,
+ title: {
+ value: `${$t(`model_fields.supported_nips`)}`,
+ },
+ list: [
+ {
+ hide_active: true,
+ touch: {
+ label: {
+ left: [
+ {
+ classes: `text-layer-1-glyph`,
+ value:
+ ld.nostr_relay
+ .supported_nips ||
+ `${$t(`icu.no_*_published`, { value: `${$t(`model_fields.supported_nips`)}`.toLowerCase() })}`,
+ },
+ ],
+ },
+ },
+ },
+ ],
+ },
+ }}
+ />
+ {/if}
+ </LayoutTrellis>
+</LayoutView>
+<Nav
+ basis={{
+ prev: {
+ label: `${$t(`common.back`)}`,
+ route: `/models/nostr-relay`,
+ },
+ title: {
+ label: {
+ classes: `capitalize`,
+ value: `${$t(`common.relay`)}`,
+ },
+ },
+ option: {
+ label: {
+ swap: {
+ on: {
+ value: `${$t(`common.done`)}`,
+ },
+ off: {
+ value: `${$t(`common.edit`)}`,
+ },
+ toggle: show_edit,
+ },
+ },
+ callback: async (el) => {
+ if (el) show_edit = !el.classList.contains(`swap-active`);
+ },
+ },
+ }}
+/>
+<EnvelopeButtons
+ basis={{
+ visible: show_edit,
+ buttons: [
+ {
+ classes: `text-envelopeButtonCancel text-layer-1-glyph-hl`,
+ label: `${$t(`common.cancel`)}`,
+ callback: async () => {
+ show_edit = false;
+ },
+ },
+ {
+ classes: `text-envelopeButtonLabel text-red-400`,
+ label: `${$t(`common.disconnect`)}`,
+ callback: async () => {
+ alert(`@todo!`);
+ show_edit = false;
+ },
+ },
+ ],
+ }}
+/>
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -15,7 +15,8 @@ const heights = {
nav_base: `71px`,
nav_lg: `100px`,
envelope_top: "56px",
- toast_min: `56px`
+ toast_min: `56px`,
+ envelope_button: `50px`,
};
const widths = {
@@ -60,6 +61,8 @@ const config: Config = {
envelopeTitle: ["1.05rem", { lineHeight: "1.75rem", fontWeight: 600 }],
envelopeTitlePrevious: ["1.02rem", { lineHeight: "1.75rem", fontWeight: 400 }],
envelopeTitleAction: ["1.02rem", { lineHeight: "1.75rem", fontWeight: 500 }],
+ envelopeButtonCancel: ["1.02rem", { lineHeight: "1.75rem", fontWeight: 600 }],
+ envelopeButtonLabel: ["1.02rem", { lineHeight: "1.75rem", fontWeight: 500 }],
},
height: {
...heights,
