diff --git a/src/app/components/InfoNip29.svelte b/src/app/components/InfoNip29.svelte new file mode 100644 index 0000000..b1d5655 --- /dev/null +++ b/src/app/components/InfoNip29.svelte @@ -0,0 +1,29 @@ + + +
+

What is a relay?

+

+ Flotilla hosts spaces on the Nostr protocol. + Nostr uses "relays" to host data, which are special-purpose servers that speak nostr's language. + This means that anyone can host their own data, making the web more decentralized and resilient. +

+

+ Only some relays support spaces. You can find a list of suggested relays below, + or you can host your own. + If you do decide to join someone else's, make sure to follow their directions for registering + as a user. +

+
+ relay.whatever.com + +
+ +
diff --git a/src/app/components/SpaceCreate.svelte b/src/app/components/SpaceCreate.svelte index 9b8e125..4e4a67b 100644 --- a/src/app/components/SpaceCreate.svelte +++ b/src/app/components/SpaceCreate.svelte @@ -1,25 +1,55 @@

Customize your Space

- Give people a few details to go. You can always change this later. + Give people a few details to go on. You can always change this later.

+
+ +
-

Give your space a name:

- +

Space Name

+ + + +

Relay

+ +

+ This should be a NIP-29 compatible nostr relay where you'd like to host your space. + +

- diff --git a/src/app/components/Toast.svelte b/src/app/components/Toast.svelte new file mode 100644 index 0000000..6892820 --- /dev/null +++ b/src/app/components/Toast.svelte @@ -0,0 +1,14 @@ + + +{#if $toast} + {#key $toast.id} +
+ +
+ {/key} +{/if} diff --git a/src/app/toast.ts b/src/app/toast.ts index 4d555f8..50fea98 100644 --- a/src/app/toast.ts +++ b/src/app/toast.ts @@ -1,5 +1,6 @@ import {writable} from "svelte/store" import {randomId} from "@welshman/lib" +import {copyToClipboard} from '@lib/html' export type Toast = { id: string @@ -15,7 +16,7 @@ export const toast = writable(null) export const pushToast = ( {message = "", id = randomId()}: Partial, - options: ToastOptions, + options: ToastOptions = {}, ) => { toast.set({id, message, options}) @@ -25,3 +26,8 @@ export const pushToast = ( } export const popToast = (id: string) => toast.update($t => ($t?.id === id ? null : $t)) + +export const clip = (value: string) => { + copyToClipboard(value) + pushToast({message: "Copied to clipboard!"}) +} diff --git a/src/assets/icons/Close Circle.svg b/src/assets/icons/Close Circle.svg new file mode 100644 index 0000000..7d6b3bc --- /dev/null +++ b/src/assets/icons/Close Circle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/Copy.svg b/src/assets/icons/Copy.svg new file mode 100644 index 0000000..74456e7 --- /dev/null +++ b/src/assets/icons/Copy.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/Fire Minimalistic.png b/src/assets/icons/Fire Minimalistic.png new file mode 100644 index 0000000..2f186b7 Binary files /dev/null and b/src/assets/icons/Fire Minimalistic.png differ diff --git a/src/assets/icons/Fire Minimalistic.svg b/src/assets/icons/Fire Minimalistic.svg new file mode 100644 index 0000000..b34eb4a --- /dev/null +++ b/src/assets/icons/Fire Minimalistic.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/Gallery Send.svg b/src/assets/icons/Gallery Send.svg new file mode 100644 index 0000000..d675646 --- /dev/null +++ b/src/assets/icons/Gallery Send.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/Info Circle.svg b/src/assets/icons/Info Circle.svg new file mode 100644 index 0000000..0530d05 --- /dev/null +++ b/src/assets/icons/Info Circle.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/Remote Controller Minimalistic.svg b/src/assets/icons/Remote Controller Minimalistic.svg new file mode 100644 index 0000000..2ebb4fc --- /dev/null +++ b/src/assets/icons/Remote Controller Minimalistic.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/icons/Wi-Fi Router Round.svg b/src/assets/icons/Wi-Fi Router Round.svg new file mode 100644 index 0000000..a4a568a --- /dev/null +++ b/src/assets/icons/Wi-Fi Router Round.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/lib/components/Icon.svelte b/src/lib/components/Icon.svelte index d78930d..53a964b 100644 --- a/src/lib/components/Icon.svelte +++ b/src/lib/components/Icon.svelte @@ -13,14 +13,21 @@ import AltArrowRight from "@assets/icons/Alt Arrow Right.svg?dataurl" import AltArrowLeft from "@assets/icons/Alt Arrow Left.svg?dataurl" import ClipboardText from "@assets/icons/Clipboard Text.svg?dataurl" + import CloseCircle from "@assets/icons/Close Circle.svg?dataurl" + import Copy from "@assets/icons/Copy.svg?dataurl" import Compass from "@assets/icons/Compass.svg?dataurl" import CompassBig from "@assets/icons/Compass Big.svg?dataurl" + import FireMinimalistic from "@assets/icons/Fire Minimalistic.svg?dataurl" + import GallerySend from "@assets/icons/Gallery Send.svg?dataurl" import HandPills from "@assets/icons/Hand Pills.svg?dataurl" import HomeSmile from "@assets/icons/Home Smile.svg?dataurl" + import InfoCircle from "@assets/icons/Info Circle.svg?dataurl" import Plain from "@assets/icons/Plain.svg?dataurl" + import RemoteControllerMinimalistic from "@assets/icons/Remote Controller Minimalistic.svg?dataurl" import Settings from "@assets/icons/Settings.svg?dataurl" import UFO3 from "@assets/icons/UFO 3.svg?dataurl" import UserHeart from "@assets/icons/User Heart.svg?dataurl" + import WiFiRouterRound from "@assets/icons/Wi-Fi Router Round.svg?dataurl" export let icon export let size = 5 @@ -33,14 +40,21 @@ "alt-arrow-right": AltArrowRight, "alt-arrow-left": AltArrowLeft, "clipboard-text": ClipboardText, + "close-circle": CloseCircle, + copy: Copy, compass: Compass, "compass-big": CompassBig, + "fire-minimalistic": FireMinimalistic, + "gallery-send": GallerySend, "hand-pills": HandPills, "home-smile": HomeSmile, + "info-circle": InfoCircle, plain: Plain, + 'remote-controller-minimalistic': RemoteControllerMinimalistic, settings: Settings, "ufo-3": UFO3, "user-heart": UserHeart, + "wifi-router-round": WiFiRouterRound, }) if (!data) { diff --git a/src/lib/components/InputProfilePicture.svelte b/src/lib/components/InputProfilePicture.svelte new file mode 100644 index 0000000..9bc2320 --- /dev/null +++ b/src/lib/components/InputProfilePicture.svelte @@ -0,0 +1,86 @@ + + +
+ + +
diff --git a/src/lib/components/Link.svelte b/src/lib/components/Link.svelte new file mode 100644 index 0000000..dcf61e0 --- /dev/null +++ b/src/lib/components/Link.svelte @@ -0,0 +1,15 @@ + + + + + diff --git a/src/lib/html.ts b/src/lib/html.ts new file mode 100644 index 0000000..4ecee40 --- /dev/null +++ b/src/lib/html.ts @@ -0,0 +1,15 @@ +export const copyToClipboard = (text: string) => { + const {activeElement} = document + const input = document.createElement("textarea") + + input.innerHTML = text + document.body.appendChild(input) + input.select() + + const result = document.execCommand("copy") + + document.body.removeChild(input) + ;(activeElement as HTMLElement).focus() + + return result +} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 3778db8..a79f544 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -2,11 +2,11 @@ import "@src/app.css" import {page} from "$app/stores" import {fly} from "@lib/transition" - import {toast} from "@app/toast" - import {modals} from "@app/modal" import ModalBox from "@lib/components/ModalBox.svelte" + import Toast from "@app/components/Toast.svelte" import PrimaryNav from "@app/components/PrimaryNav.svelte" import SecondaryNav from "@app/components/SecondaryNav.svelte" + import {modals} from "@app/modal" const login = async () => { const nl = await import("nostr-login") @@ -43,23 +43,16 @@
- + {#if $page.state.modal} {#key $page.state.modal} {/key} + {/if}
- {#if $toast} - {#key $toast.id} -
-
- {$toast.message} -
-
- {/key} - {/if} + diff --git a/tailwind.config.js b/tailwind.config.js index bc948d5..c8c8ab1 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -9,6 +9,8 @@ export default { none: 0, "nav-active": 1, "nav-item": 2, + "modal": 3, + "toast": 4, }, }, plugins: [daisyui],