commit c3110f7ab2801b363e74d47f01207eb7c48677d3
parent 11867df0bc467240c1cccf2abd867929be6256da
Author: triesap <137732411+triesap@users.noreply.github.com>
Date: Fri, 27 Sep 2024 19:24:23 +0000
Edit `/models/nostr-relay/`, update routes using nav option swap labels, add css, edit routes, styles
Diffstat:
6 files changed, 171 insertions(+), 24 deletions(-)
diff --git a/src/app.css b/src/app.css
@@ -14,4 +14,10 @@
.tap-rise-1 {
@apply active:scale-[101%] group-active:scale-[101%] delay-75 duration-700 ease-in-out transition-all;
}
+
+
+ .tap-scale {
+ @apply active:scale-[97%] group-active:scale-[97%] delay-75 duration-700 ease-in-out transition-all;
+ }
+
}
\ No newline at end of file
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
@@ -63,6 +63,12 @@
]);
},
},
+ {
+ route: `/models/nostr-relay`,
+ label: `Relays`,
+ key: `network`,
+ weight: `fill`,
+ },
];
</script>
diff --git a/src/routes/(app)/models/nostr-profile/view/+page.svelte b/src/routes/(app)/models/nostr-profile/view/+page.svelte
@@ -26,7 +26,6 @@
};
let ld: LoadData | undefined = undefined;
- let el_edit: HTMLLabelElement | null;
let show_public_key_hex = false;
let show_secret_key_hex = false;
let vl_secret_key_unlock = false;
@@ -34,13 +33,13 @@
onMount(async () => {
try {
if (!$qp_nostr_pk) app_notify.set(`Error loading page`);
- ld = await load_page();
+ ld = await load_data();
} catch (e) {
} finally {
}
});
- const load_page = async (): Promise<LoadData | undefined> => {
+ const load_data = async (): Promise<LoadData | undefined> => {
try {
const nostr_profiles = await lc.db.nostr_profile_get({
public_key: $qp_nostr_pk,
@@ -66,7 +65,7 @@
};
return data;
} catch (e) {
- console.log(`(error) load_page `, e);
+ console.log(`(error) load_data `, e);
}
};
@@ -409,10 +408,12 @@
toggle: vl_secret_key_unlock,
},
},
- callback: async ([visible, el]) => {
- vl_secret_key_unlock = visible;
- //show_secret_key_hex = visible;
- el_edit = el;
+ callback: async (el) => {
+ if (el) {
+ vl_secret_key_unlock =
+ !el.classList.contains(`swap-active`);
+ }
+ if (vl_secret_key_unlock) show_secret_key_hex = false;
},
},
}}
diff --git a/src/routes/(app)/models/nostr-relay/+page.svelte b/src/routes/(app)/models/nostr-relay/+page.svelte
@@ -1,39 +1,172 @@
<script lang="ts">
import { lc } from "$lib/client";
+ import { app_nostr_key } from "$lib/stores";
import type { NostrRelay } from "@radroots/models";
- import { LayoutTrellis, LayoutView } from "@radroots/svelte-lib";
+ import {
+ LayoutTrellis,
+ LayoutView,
+ Nav,
+ sleep,
+ t,
+ Trellis,
+ type ITrellisKindTouch,
+ } from "@radroots/svelte-lib";
import { onMount } from "svelte";
- let models_list: NostrRelay[] = [];
+ type LoadData = {
+ nostr_relays: NostrRelay[];
+ nostr_relays_other: NostrRelay[];
+ };
+ let ld: LoadData | undefined = undefined;
+
+ let loading_edit_id = ``;
+ let show_edit = false;
onMount(async () => {
try {
- await load_models();
+ ld = await load_data();
} catch (e) {
} finally {
}
});
- const load_models = async (): Promise<void> => {
+ const load_data = async (): Promise<LoadData | undefined> => {
try {
- //loading_models = true;
- const res = await lc.db.nostr_relay_get({
- list: [`all`],
+ const nostr_relays = await lc.db.nostr_relay_get({
+ list: [`on_key`, { public_key: $app_nostr_key }],
+ sort: `oldest`,
+ });
+
+ const nostr_relays_other = await lc.db.nostr_relay_get({
+ list: [`off_key`, { public_key: $app_nostr_key }],
+ sort: `oldest`,
});
- console.log(JSON.stringify(res, null, 4), `res`);
- if (typeof res !== `string`) models_list = res;
+
+ const data: LoadData = {
+ nostr_relays:
+ typeof nostr_relays !== `string` ? nostr_relays : [],
+ nostr_relays_other:
+ typeof nostr_relays_other !== `string`
+ ? nostr_relays_other
+ : [],
+ };
+ return data;
+ } catch (e) {
+ console.log(`(error) load_data `, e);
+ }
+ };
+
+ let tr_list_1: ITrellisKindTouch[] = [];
+ $: tr_list_1 = ld
+ ? ld.nostr_relays.map((nostr_relay) => ({
+ layer: 1,
+ hide_active: show_edit,
+ touch: {
+ label: {
+ left: [
+ {
+ value: nostr_relay.url,
+ },
+ ],
+ },
+ callback: async () => {
+ if (show_edit) return;
+ // @todo go to view
+ },
+ },
+ offset: show_edit
+ ? {
+ mod: {
+ classes: `text-layer-2-glyph opacity-40 fade-in tap-scale`,
+ key: `minus-circle`,
+ weight: `fill`,
+ dim: `sm`,
+ loading: loading_edit_id === nostr_relay.id,
+ },
+ callback: async () => {
+ await handle_disconnect_relay(nostr_relay);
+ },
+ }
+ : {
+ mod: {
+ classes: `text-layer-2-glyph-hl group-active:opacity-60 fade-in`,
+ key: `check-circle`,
+ weight: `fill`,
+ dim: `sm`,
+ },
+ callback: async (ev) => {
+ ev.stopPropagation();
+ },
+ },
+ }))
+ : [];
+
+ const handle_disconnect_relay = async (
+ nostr_relay: NostrRelay,
+ ): Promise<void> => {
+ try {
+ loading_edit_id = nostr_relay.id;
+ const confirm = await lc.dialog.confirm(
+ `This action will disconnect relay ${nostr_relay.url}`,
+ );
+ if (confirm === false) return;
+
+ console.log(`unset the relay`);
+ console.log(`relay_id `, nostr_relay.id);
+ await sleep(500);
} catch (e) {
- console.log(`(error) load_models `, e);
+ console.log(`(error) handle_disconnect_relay `, e);
} finally {
- //loading_models = false;
+ loading_edit_id = ``;
+ show_edit = false;
}
};
</script>
<LayoutView>
<LayoutTrellis>
- <pre class="text-layer-0-glyph">
- {JSON.stringify(models_list, null, 4)}
- </pre>
+ {#if ld}
+ <Trellis
+ basis={{
+ args: {
+ layer: 1,
+ title: {
+ value: `${$t(`icu.connected_*`, { value: `${$t(`common.relays`)}` })}`,
+ },
+ list: [...tr_list_1],
+ },
+ }}
+ />
+ {/if}
</LayoutTrellis>
</LayoutView>
+<Nav
+ basis={{
+ prev: {
+ label: `${$t(`common.back`)}`,
+ route: `/models/nostr-profile`,
+ },
+ title: {
+ label: {
+ classes: `capitalize`,
+ value: `${$t(`common.relays`)}`,
+ },
+ },
+ 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`);
+ },
+ },
+ }}
+/>
diff --git a/src/routes/(app)/nostr/keys/+page.svelte b/src/routes/(app)/nostr/keys/+page.svelte
@@ -132,7 +132,7 @@
<LayoutView basis={{ fade: true }}>
<LayoutTrellis>
- <div class={`flex flex-col w-full gap-1 justify-start items-center`}>
+ <div class={`flex flex-col w-full justify-start items-center`}>
<TrellisTitle
layer={0}
basis={{
@@ -142,7 +142,7 @@
{#if ls_nostr_keys.length}
{#each ls_nostr_keys as ks_key (ks_key.public_key)}
<div
- class={`relative flex flex-col pt-3 pb-4 px-[9px] bg-layer-1-surface rounded-xl overflow-hidden active:ring-4 active:ring-layer-2-surface/80 transition-all tap-rise-1 active:opacity-60`}
+ class={`relative flex flex-col pt-4 pb-5 px-[9px] bg-layer-1-surface rounded-xl overflow-hidden active:ring-4 active:ring-layer-2-surface/80 transition-all tap-rise-1 active:opacity-60`}
>
<button
class={`flex flex-col h-full w-full pt-[2px] pl-1 gap-1 items-start`}
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -15,6 +15,7 @@ const heights = {
nav_base: `71px`,
nav_lg: `100px`,
envelope_top: "56px",
+ toast_min: `56px`
};
const widths = {
