chore: use src relative imports

src/Const.ts

@@ -1,4 +1,4 @@
-import { RelaySettings } from "./nostr/Connection";
+import { RelaySettings } from "Nostr/Connection";
 
 /**
  * Websocket re-connect timeout

src/Util.ts

@@ -1,7 +1,7 @@
 import * as secp from "@noble/secp256k1";
 import { bech32 } from "bech32";
-import { HexKey, RawEvent, TaggedRawEvent, u256 } from "./nostr";
-import EventKind from "./nostr/EventKind";
+import { HexKey, RawEvent, TaggedRawEvent, u256 } from "Nostr";
+import EventKind from "Nostr/EventKind";
 
 export async function openFile(): Promise<File | undefined> {
     return new Promise((resolve, reject) => {

src/db/User.ts

@@ -1,4 +1,4 @@
-import { HexKey, TaggedRawEvent, UserMetadata } from "../nostr";
+import { HexKey, TaggedRawEvent, UserMetadata } from "Nostr";
 import { hexToBech32 } from "../Util";
 
 export interface MetadataCache extends UserMetadata {

src/db/index.ts

@@ -1,6 +1,6 @@
 import Dexie, { Table } from "dexie";
-import { MetadataCache } from "./User";
-import { hexToBech32 } from "../Util";
+import { MetadataCache } from "Db/User";
+import { hexToBech32 } from "Util";
 
 
 export class SnortDB extends Dexie {

src/element/Avatar.tsx

@@ -1,9 +1,7 @@
 import "./Avatar.css";
 import Nostrich from "../nostrich.jpg";
-
 import { CSSProperties } from "react";
-
-import type { UserMetadata } from "../nostr";
+import type { UserMetadata } from "Nostr";
 
 
 const Avatar = ({ user, ...rest }: { user?: UserMetadata, onClick?: () => void}) => {

src/element/Copy.tsx

@@ -1,7 +1,7 @@
 import "./Copy.css";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCopy, faCheck } from "@fortawesome/free-solid-svg-icons";
-import { useCopy } from "../useCopy";
+import { useCopy } from "useCopy";
 
 export interface CopyProps {
     text: string,

src/element/DM.tsx

@@ -3,14 +3,14 @@ import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useInView } from 'react-intersection-observer';
 
-import useEventPublisher from "../feed/EventPublisher";
-import Event from "../nostr/Event";
-import NoteTime from "./NoteTime";
-import Text from "./Text";
-import { setLastReadDm } from "../pages/MessagesPage";
-import { RootState } from "../state/Store";
-import { HexKey, TaggedRawEvent } from "../nostr";
-import { incDmInteraction } from "../state/Login";
+import useEventPublisher from "Feed/EventPublisher";
+import Event from "Nostr/Event";
+import NoteTime from "Element/NoteTime";
+import Text from "Element/Text";
+import { setLastReadDm } from "Pages/MessagesPage";
+import { RootState } from "State/Store";
+import { HexKey, TaggedRawEvent } from "Nostr";
+import { incDmInteraction } from "State/Login";
 
 export type DMProps = {
     data: TaggedRawEvent

src/element/FollowButton.tsx

@@ -1,9 +1,9 @@
 import { useSelector } from "react-redux";
-import useEventPublisher from "../feed/EventPublisher";
+import useEventPublisher from "Feed/EventPublisher";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faUserMinus, faUserPlus } from "@fortawesome/free-solid-svg-icons";
-import { HexKey } from "../nostr";
-import { RootState } from "../state/Store";
+import { HexKey } from "Nostr";
+import { RootState } from "State/Store";
 
 export interface FollowButtonProps {
     pubkey: HexKey,

src/element/FollowListBase.tsx

@@ -1,6 +1,6 @@
-import useEventPublisher from "../feed/EventPublisher";
-import { HexKey } from "../nostr";
-import ProfilePreview from "./ProfilePreview";
+import useEventPublisher from "Feed/EventPublisher";
+import { HexKey } from "Nostr";
+import ProfilePreview from "Element/ProfilePreview";
 
 export interface FollowListBaseProps {
     pubkeys: HexKey[],

src/element/FollowersList.tsx

@@ -1,8 +1,8 @@
 import { useMemo } from "react";
-import useFollowersFeed from "../feed/FollowersFeed";
-import { HexKey } from "../nostr";
-import EventKind from "../nostr/EventKind";
-import FollowListBase from "./FollowListBase";
+import useFollowersFeed from "Feed/FollowersFeed";
+import { HexKey } from "Nostr";
+import EventKind from "Nostr/EventKind";
+import FollowListBase from "Element/FollowListBase";
 
 export interface FollowersListProps {
     pubkey: HexKey

src/element/FollowsList.tsx

@@ -1,8 +1,8 @@
 import { useMemo } from "react";
-import useFollowsFeed from "../feed/FollowsFeed";
-import { HexKey } from "../nostr";
-import FollowListBase from "./FollowListBase";
-import { getFollowers} from "../feed/FollowsFeed";
+import useFollowsFeed from "Feed/FollowsFeed";
+import { HexKey } from "Nostr";
+import FollowListBase from "Element/FollowListBase";
+import { getFollowers} from "Feed/FollowsFeed";
 
 export interface FollowsListProps {
     pubkey: HexKey

src/element/FollowsYou.tsx

@@ -1,10 +1,10 @@
 import "./FollowsYou.css";
 import { useMemo } from "react";
 import { useSelector } from "react-redux";
-import { HexKey } from "../nostr";
-import { RootState } from "../state/Store";
-import  useFollowsFeed from "../feed/FollowsFeed";
-import { getFollowers } from "../feed/FollowsFeed";
+import { HexKey } from "Nostr";
+import { RootState } from "State/Store";
+import  useFollowsFeed from "Feed/FollowsFeed";
+import { getFollowers } from "Feed/FollowsFeed";
 
 export interface FollowsYouProps {
     pubkey: HexKey

src/element/Invoice.tsx

@@ -3,8 +3,8 @@ import { useState } from "react";
 // @ts-expect-error
 import { decode as invoiceDecode } from "light-bolt11-decoder";
 import { useMemo } from "react";
-import NoteTime from "./NoteTime";
-import LNURLTip from "./LNURLTip";
+import NoteTime from "Element/NoteTime";
+import LNURLTip from "Element/LNURLTip";
 
 export interface InvoiceProps {
     invoice: string

src/element/LNURLTip.tsx

@@ -1,9 +1,9 @@
 import "./LNURLTip.css";
 import { useEffect, useMemo, useState } from "react";
-import { bech32ToText } from "../Util";
-import Modal from "./Modal";
-import QrCode from "./QrCode";
-import Copy from "./Copy";
+import { bech32ToText } from "Util";
+import Modal from "Element/Modal";
+import QrCode from "Element/QrCode";
+import Copy from "Element/Copy";
 
 declare global {
     interface Window {

src/element/Mention.tsx

@@ -1,8 +1,8 @@
 import { useMemo } from "react";
 import { Link } from "react-router-dom";
-import useProfile from "../feed/ProfileFeed";
-import { HexKey } from "../nostr";
-import { hexToBech32, profileLink } from "../Util";
+import useProfile from "Feed/ProfileFeed";
+import { HexKey } from "Nostr";
+import { hexToBech32, profileLink } from "Util";
 
 export default function Mention({ pubkey }: { pubkey: HexKey }) {
     const user = useProfile(pubkey)?.get(pubkey);

src/element/Nip05.tsx

@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSpinner, faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
 
 import './Nip05.css'
-import { HexKey } from "../nostr";
+import { HexKey } from "Nostr";
 
 interface NostrJson {
   names: Record<string, string>

src/element/Nip5Service.tsx

@@ -9,14 +9,14 @@ import {
     ServiceErrorCode,
     HandleRegisterResponse,
     CheckRegisterResponse
-} from "../nip05/ServiceProvider";
-import AsyncButton from "./AsyncButton";
-import LNURLTip from "./LNURLTip";
-import Copy from "./Copy";
-import useProfile from "../feed/ProfileFeed";
-import useEventPublisher from "../feed/EventPublisher";
-import { hexToBech32 } from "../Util";
-import { UserMetadata } from "../nostr";
+} from "Nip05/ServiceProvider";
+import AsyncButton from "Element/AsyncButton";
+import LNURLTip from "Element/LNURLTip";
+import Copy from "Element/Copy";
+import useProfile from "Feed/ProfileFeed";
+import useEventPublisher from "Feed/EventPublisher";
+import { hexToBech32 } from "Util";
+import { UserMetadata } from "Nostr";
 
 type Nip05ServiceProps = {
     name: string,

src/element/Note.tsx

@@ -2,15 +2,15 @@ import "./Note.css";
 import { useCallback, useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 
-import { default as NEvent } from "../nostr/Event";
-import ProfileImage from "./ProfileImage";
-import Text from "./Text";
-import { eventLink, getReactions, hexToBech32 } from "../Util";
-import NoteFooter from "./NoteFooter";
-import NoteTime from "./NoteTime";
-import EventKind from "../nostr/EventKind";
-import useProfile from "../feed/ProfileFeed";
-import { TaggedRawEvent, u256 } from "../nostr";
+import { default as NEvent } from "Nostr/Event";
+import ProfileImage from "Element/ProfileImage";
+import Text from "Element/Text";
+import { eventLink, getReactions, hexToBech32 } from "Util";
+import NoteFooter from "Element/NoteFooter";
+import NoteTime from "Element/NoteTime";
+import EventKind from "Nostr/EventKind";
+import useProfile from "Feed/ProfileFeed";
+import { TaggedRawEvent, u256 } from "Nostr";
 import { useInView } from "react-intersection-observer";
 
 export interface NoteProps {

src/element/NoteCreator.tsx

@@ -4,12 +4,12 @@ import { faPaperclip } from "@fortawesome/free-solid-svg-icons";
 
 import "./NoteCreator.css";
 
-import useEventPublisher from "../feed/EventPublisher";
-import { openFile } from "../Util";
-import VoidUpload from "../feed/VoidUpload";
-import { FileExtensionRegex } from "../Const";
-import Textarea from "../element/Textarea";
-import Event, { default as NEvent } from "../nostr/Event";
+import useEventPublisher from "Feed/EventPublisher";
+import { openFile } from "Util";
+import VoidUpload from "Feed/VoidUpload";
+import { FileExtensionRegex } from "Const";
+import Textarea from "Element/Textarea";
+import Event, { default as NEvent } from "Nostr/Event";
 
 export interface NoteCreatorProps {
     replyTo?: NEvent,

src/element/NoteFooter.tsx

@@ -3,16 +3,16 @@ import { useSelector } from "react-redux";
 import { faHeart, faReply, faThumbsDown, faTrash, faBolt, faRepeat } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { formatShort } from "../Number";
-import useEventPublisher from "../feed/EventPublisher";
-import { getReactions, normalizeReaction, Reaction } from "../Util";
-import { NoteCreator } from "./NoteCreator";
-import LNURLTip from "./LNURLTip";
-import useProfile from "../feed/ProfileFeed";
-import { default as NEvent } from "../nostr/Event";
-import { RootState } from "../state/Store";
-import { HexKey, TaggedRawEvent } from "../nostr";
-import EventKind from "../nostr/EventKind";
+import { formatShort } from "Number";
+import useEventPublisher from "Feed/EventPublisher";
+import { getReactions, normalizeReaction, Reaction } from "Util";
+import { NoteCreator } from "Element/NoteCreator";
+import LNURLTip from "Element/LNURLTip";
+import useProfile from "Feed/ProfileFeed";
+import { default as NEvent } from "Nostr/Event";
+import { RootState } from "State/Store";
+import { HexKey, TaggedRawEvent } from "Nostr";
+import EventKind from "Nostr/EventKind";
 
 export interface NoteFooterProps {
     related: TaggedRawEvent[],

src/element/NoteGhost.tsx

@@ -1,5 +1,5 @@
 import "./Note.css";
-import ProfileImage from "./ProfileImage";
+import ProfileImage from "Element/ProfileImage";
 
 export default function NoteGhost(props: any) {
     return (

src/element/NoteReaction.tsx

@@ -1,13 +1,14 @@
 import "./NoteReaction.css";
-import EventKind from "../nostr/EventKind";
-import Note from "./Note";
-import ProfileImage from "./ProfileImage";
-import { default as NEvent } from "../nostr/Event";
-import { eventLink, hexToBech32 } from "../Util";
 import { Link } from "react-router-dom";
 import { useMemo } from "react";
-import NoteTime from "./NoteTime";
-import { RawEvent, TaggedRawEvent } from "../nostr";
+
+import EventKind from "Nostr/EventKind";
+import Note from "Element/Note";
+import ProfileImage from "Element/ProfileImage";
+import { default as NEvent } from "Nostr/Event";
+import { eventLink, hexToBech32 } from "Util";
+import NoteTime from "Element/NoteTime";
+import { RawEvent, TaggedRawEvent } from "Nostr";
 
 export interface NoteReactionProps {
     data?: TaggedRawEvent,

src/element/NoteToSelf.tsx

@@ -3,9 +3,9 @@ import "./NoteToSelf.css";
 import { Link, useNavigate } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBook, faCertificate } from "@fortawesome/free-solid-svg-icons"
-import useProfile from "../feed/ProfileFeed";
-import Nip05 from "./Nip05";
-import { profileLink } from "../Util";
+import useProfile from "Feed/ProfileFeed";
+import Nip05 from "Element/Nip05";
+import { profileLink } from "Util";
 
 export interface NoteToSelfProps {
     pubkey: string,

src/element/ProfileImage.tsx

@@ -2,12 +2,12 @@ import "./ProfileImage.css";
 
 import { useMemo } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import useProfile from "../feed/ProfileFeed";
-import { hexToBech32, profileLink } from "../Util";
-import Avatar from "./Avatar"
-import Nip05 from "./Nip05";
-import { HexKey } from "../nostr";
-import { MetadataCache } from "../db/User";
+import useProfile from "Feed/ProfileFeed";
+import { hexToBech32, profileLink } from "Util";
+import Avatar from "Element/Avatar"
+import Nip05 from "Element/Nip05";
+import { HexKey } from "Nostr";
+import { MetadataCache } from "Db/User";
 
 export interface ProfileImageProps {
     pubkey: HexKey,

src/element/ProfilePreview.tsx

@@ -1,10 +1,10 @@
 import "./ProfilePreview.css";
 import { ReactNode } from "react";
 
-import ProfileImage from "./ProfileImage";
-import FollowButton from "./FollowButton";
-import useProfile from "../feed/ProfileFeed";
-import { HexKey } from "../nostr";
+import ProfileImage from "Element/ProfileImage";
+import FollowButton from "Element/FollowButton";
+import useProfile from "Feed/ProfileFeed";
+import { HexKey } from "Nostr";
 import { useInView } from "react-intersection-observer";
 
 export interface ProfilePreviewProps {

src/element/Relay.tsx

@@ -1,13 +1,13 @@
 import "./Relay.css"
 
 import { faPlug, faTrash, faSquareCheck, faSquareXmark, faWifi, faUpload, faDownload, faPlugCircleXmark, faEllipsisVertical } from "@fortawesome/free-solid-svg-icons";
-import useRelayState from "../feed/RelayState";
+import useRelayState from "Feed/RelayState";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { removeRelay, setRelays } from "../state/Login";
-import { RootState } from "../state/Store";
-import { RelaySettings } from "../nostr/Connection";
+import { removeRelay, setRelays } from "State/Login";
+import { RootState } from "State/Store";
+import { RelaySettings } from "Nostr/Connection";
 
 export interface RelayProps {
     addr: string

src/element/Text.tsx

@@ -1,17 +1,17 @@
+import './Text.css'
+import { useMemo } from "react";
 import { Link } from "react-router-dom";
 import ReactMarkdown from "react-markdown";
 import { TwitterTweetEmbed } from "react-twitter-embed";
 
-import { UrlRegex, FileExtensionRegex, MentionRegex, InvoiceRegex, YoutubeUrlRegex, TweetUrlRegex, HashtagRegex } from "../Const";
-import { eventLink, hexToBech32 } from "../Util";
-import Invoice from "./Invoice";
-import Hashtag from "./Hashtag";
+import { UrlRegex, FileExtensionRegex, MentionRegex, InvoiceRegex, YoutubeUrlRegex, TweetUrlRegex, HashtagRegex } from "Const";
+import { eventLink, hexToBech32 } from "Util";
+import Invoice from "Element/Invoice";
+import Hashtag from "Element/Hashtag";
 
-import './Text.css'
-import { useMemo } from "react";
-import Tag from "../nostr/Tag";
-import { MetadataCache } from "../db/User";
-import Mention from "./Mention";
+import Tag from "Nostr/Tag";
+import { MetadataCache } from "Db/User";
+import Mention from "Element/Mention";
 
 function transformHttpLink(a: string) {
     try {

src/element/Textarea.tsx

@@ -7,11 +7,11 @@ import ReactTextareaAutocomplete from "@webscopeio/react-textarea-autocomplete";
 import emoji from "@jukben/emoji-search";
 import TextareaAutosize from "react-textarea-autosize";
 
-import Avatar from "./Avatar";
-import Nip05 from "./Nip05";
-import { hexToBech32 } from "../Util";
-import { db } from "../db";
-import { MetadataCache } from "../db/User";
+import Avatar from "Element/Avatar";
+import Nip05 from "Element/Nip05";
+import { hexToBech32 } from "Util";
+import { db } from "Db";
+import { MetadataCache } from "Db/User";
 
 interface EmojiItemProps {
   name: string

src/element/Thread.tsx

@@ -1,11 +1,11 @@
 import { useMemo } from "react";
 import { Link } from "react-router-dom";
-import { TaggedRawEvent, u256 } from "../nostr";
-import { default as NEvent } from "../nostr/Event";
-import EventKind from "../nostr/EventKind";
-import { eventLink } from "../Util";
-import Note from "./Note";
-import NoteGhost from "./NoteGhost";
+import { TaggedRawEvent, u256 } from "Nostr";
+import { default as NEvent } from "Nostr/Event";
+import EventKind from "Nostr/EventKind";
+import { eventLink } from "Util";
+import Note from "Element/Note";
+import NoteGhost from "Element/NoteGhost";
 
 export interface ThreadProps {
     this?: u256,

src/element/Timeline.tsx

@@ -1,10 +1,10 @@
 import { useMemo } from "react";
-import useTimelineFeed, { TimelineSubject } from "../feed/TimelineFeed";
-import { TaggedRawEvent } from "../nostr";
-import EventKind from "../nostr/EventKind";
-import LoadMore from "./LoadMore";
-import Note from "./Note";
-import NoteReaction from "./NoteReaction";
+import useTimelineFeed, { TimelineSubject } from "Feed/TimelineFeed";
+import { TaggedRawEvent } from "Nostr";
+import EventKind from "Nostr/EventKind";
+import LoadMore from "Element/LoadMore";
+import Note from "Element/Note";
+import NoteReaction from "Element/NoteReaction";
 
 export interface TimelineProps {
     postsOnly: boolean,

src/element/ZapButton.tsx

@@ -2,9 +2,9 @@ import "./ZapButton.css";
 import { faBolt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useState } from "react";
-import useProfile from "../feed/ProfileFeed";
-import { HexKey } from "../nostr";
-import LNURLTip from "./LNURLTip";
+import useProfile from "Feed/ProfileFeed";
+import { HexKey } from "Nostr";
+import LNURLTip from "Element/LNURLTip";
 
 const ZapButton = ({ pubkey }: { pubkey: HexKey }) => {
     const profile = useProfile(pubkey)?.get(pubkey);

src/feed/EventPublisher.ts

@@ -1,12 +1,12 @@
 import { useSelector } from "react-redux";
-import { System } from "../nostr/System";
-import { default as NEvent } from "../nostr/Event";
-import EventKind from "../nostr/EventKind";
-import Tag from "../nostr/Tag";
-import { RootState } from "../state/Store";
-import { HexKey, RawEvent, u256, UserMetadata } from "../nostr";
-import { bech32ToHex } from "../Util"
-import { HashtagRegex } from "../Const";
+import { System } from "Nostr/System";
+import { default as NEvent } from "Nostr/Event";
+import EventKind from "Nostr/EventKind";
+import Tag from "Nostr/Tag";
+import { RootState } from "State/Store";
+import { HexKey, RawEvent, u256, UserMetadata } from "Nostr";
+import { bech32ToHex } from "Util"
+import { HashtagRegex } from "Const";
 
 declare global {
     interface Window {

src/feed/FollowersFeed.ts

@@ -1,8 +1,8 @@
 import { useMemo } from "react";
-import { HexKey } from "../nostr";
-import EventKind from "../nostr/EventKind";
-import { Subscriptions } from "../nostr/Subscriptions";
-import useSubscription from "./Subscription";
+import { HexKey } from "Nostr";
+import EventKind from "Nostr/EventKind";
+import { Subscriptions } from "Nostr/Subscriptions";
+import useSubscription from "Feed/Subscription";
 
 export default function useFollowersFeed(pubkey: HexKey) {
     const sub = useMemo(() => {

src/feed/FollowsFeed.ts

@@ -1,9 +1,8 @@
 import { useMemo } from "react";
-import { HexKey } from "../nostr";
-import EventKind from "../nostr/EventKind";
-import { Subscriptions} from "../nostr/Subscriptions";
-import useSubscription from "./Subscription";
-import { NoteStore } from "./Subscription"
+import { HexKey } from "Nostr";
+import EventKind from "Nostr/EventKind";
+import { Subscriptions} from "Nostr/Subscriptions";
+import useSubscription, { NoteStore } from "Feed/Subscription";
 
 export default function useFollowsFeed(pubkey: HexKey) {
     const sub = useMemo(() => {

src/feed/LoginFeed.ts

@@ -1,16 +1,17 @@
-import Nostrich from "../nostrich.jpg";
+import Nostrich from "nostrich.jpg";
 import { useEffect, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { HexKey, TaggedRawEvent } from "../nostr";
-import EventKind from "../nostr/EventKind";
-import { Subscriptions } from "../nostr/Subscriptions";
-import { addDirectMessage, addNotifications, setFollows, setRelays } from "../state/Login";
-import { RootState } from "../state/Store";
-import { db } from "../db";
-import useSubscription from "./Subscription";
-import { mapEventToProfile, MetadataCache } from "../db/User";
-import { getDisplayName } from "../element/ProfileImage";
-import { MentionRegex } from "../Const";
+
+import { HexKey, TaggedRawEvent } from "Nostr";
+import EventKind from "Nostr/EventKind";
+import { Subscriptions } from "Nostr/Subscriptions";
+import { addDirectMessage, addNotifications, setFollows, setRelays } from "State/Login";
+import { RootState } from "State/Store";
+import { db } from "Db";
+import useSubscription from "Feed/Subscription";
+import { mapEventToProfile, MetadataCache } from "Db/User";
+import { getDisplayName } from "Element/ProfileImage";
+import { MentionRegex } from "Const";
 
 /**
  * Managed loading data for the current logged in user

src/feed/ProfileFeed.ts

@@ -1,9 +1,9 @@
 import { useLiveQuery } from "dexie-react-hooks";
 import { useEffect, useMemo } from "react";
-import { db } from "../db";
-import { MetadataCache } from "../db/User";
-import { HexKey } from "../nostr";
-import { System } from "../nostr/System";
+import { db } from "Db";
+import { MetadataCache } from "Db/User";
+import { HexKey } from "Nostr";
+import { System } from "Nostr/System";
 
 export default function useProfile(pubKey: HexKey | Array<HexKey> | undefined): Map<HexKey, MetadataCache> | undefined {
     const user = useLiveQuery(async () => {

src/feed/RelayState.ts

@@ -1,6 +1,6 @@
 import { useSyncExternalStore } from "react";
-import { System } from "../nostr/System";
-import { CustomHook, StateSnapshot } from "../nostr/Connection";
+import { System } from "Nostr/System";
+import { CustomHook, StateSnapshot } from "Nostr/Connection";
 
 const noop = (f: CustomHook) => { return () => { }; };
 const noopState = (): StateSnapshot | undefined => {

src/feed/Subscription.ts

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useReducer, useState } from "react";
-import { System } from "../nostr/System";
-import { TaggedRawEvent } from "../nostr";
-import { Subscriptions } from "../nostr/Subscriptions";
+import { System } from "Nostr/System";
+import { TaggedRawEvent } from "Nostr";
+import { Subscriptions } from "Nostr/Subscriptions";
 
 export type NoteStore = {
     notes: Array<TaggedRawEvent>,

src/feed/ThreadFeed.ts

@@ -1,8 +1,8 @@
 import { useEffect, useMemo, useState } from "react";
-import { u256 } from "../nostr";
-import EventKind from "../nostr/EventKind";
-import { Subscriptions } from "../nostr/Subscriptions";
-import useSubscription from "./Subscription";
+import { u256 } from "Nostr";
+import EventKind from "Nostr/EventKind";
+import { Subscriptions } from "Nostr/Subscriptions";
+import useSubscription from "Feed/Subscription";
 
 export default function useThreadFeed(id: u256) {
     const [trackingEvents, setTrackingEvent] = useState<u256[]>([id]);

src/feed/TimelineFeed.ts

@@ -1,9 +1,9 @@
 import { useEffect, useMemo, useState } from "react";
-import { u256 } from "../nostr";
-import EventKind from "../nostr/EventKind";
-import { Subscriptions } from "../nostr/Subscriptions";
-import { unixNow } from "../Util";
-import useSubscription from "./Subscription";
+import { u256 } from "Nostr";
+import EventKind from "Nostr/EventKind";
+import { Subscriptions } from "Nostr/Subscriptions";
+import { unixNow } from "Util";
+import useSubscription from "Feed/Subscription";
 
 export interface TimelineFeedOptions {
     method: "TIME_RANGE" | "LIMIT_UNTIL"

src/index.tsx

@@ -10,22 +10,22 @@ import {
 } from "react-router-dom";
 
 // @ts-expect-error
-import * as serviceWorkerRegistration from './serviceWorkerRegistration';
-import EventPage from './pages/EventPage';
-import Layout from './pages/Layout';
-import LoginPage from './pages/Login';
-import ProfilePage from './pages/ProfilePage';
-import RootPage from './pages/Root';
-import Store from "./state/Store";
-import NotificationsPage from './pages/Notifications';
-import NewUserPage from './pages/NewUserPage';
-import SettingsPage from './pages/SettingsPage';
-import ErrorPage from './pages/ErrorPage';
-import VerificationPage from './pages/Verification';
-import MessagesPage from './pages/MessagesPage';
-import ChatPage from './pages/ChatPage';
-import DonatePage from './pages/DonatePage';
-import HashTagsPage from './pages/HashTagsPage';
+import * as serviceWorkerRegistration from 'serviceWorkerRegistration';
+import Store from "State/Store";
+import EventPage from 'Pages/EventPage';
+import Layout from 'Pages/Layout';
+import LoginPage from 'Pages/Login';
+import ProfilePage from 'Pages/ProfilePage';
+import RootPage from 'Pages/Root';
+import NotificationsPage from 'Pages/Notifications';
+import NewUserPage from 'Pages/NewUserPage';
+import SettingsPage from 'Pages/SettingsPage';
+import ErrorPage from 'Pages/ErrorPage';
+import VerificationPage from 'Pages/Verification';
+import MessagesPage from 'Pages/MessagesPage';
+import ChatPage from 'Pages/ChatPage';
+import DonatePage from 'Pages/DonatePage';
+import HashTagsPage from 'Pages/HashTagsPage';
 
 /**
  * HTTP query provider

src/nostr/Connection.ts

@@ -1,11 +1,11 @@
 import * as secp from "@noble/secp256k1";
 import { v4 as uuid } from "uuid";
 
-import { Subscriptions } from "./Subscriptions";
-import { default as NEvent } from "./Event";
-import { DefaultConnectTimeout } from "../Const";
-import { ConnectionStats } from "./ConnectionStats";
-import { RawEvent, TaggedRawEvent } from ".";
+import { Subscriptions } from "Nostr/Subscriptions";
+import { default as NEvent } from "Nostr/Event";
+import { DefaultConnectTimeout } from "Const";
+import { ConnectionStats } from "Nostr/ConnectionStats";
+import { RawEvent, TaggedRawEvent } from "Nostr";
 
 export type CustomHook = (state: Readonly<StateSnapshot>) => void;
 

src/nostr/Event.ts

@@ -1,9 +1,9 @@
 import * as secp from '@noble/secp256k1';
 import * as base64 from "@protobufjs/base64"
-import { HexKey, RawEvent, TaggedRawEvent } from '.';
-import EventKind from "./EventKind";
-import Tag from './Tag';
-import Thread from './Thread';
+import { HexKey, RawEvent, TaggedRawEvent } from 'Nostr';
+import EventKind from "Nostr/EventKind";
+import Tag from 'Nostr/Tag';
+import Thread from 'Nostr/Thread';
 
 export default class Event {
     /**

src/nostr/Subscriptions.ts

@@ -1,7 +1,7 @@
 import { v4 as uuid } from "uuid";
-import { TaggedRawEvent, RawReqFilter, u256 } from ".";
-import Connection from "./Connection";
-import EventKind from "./EventKind";
+import { TaggedRawEvent, RawReqFilter, u256 } from "Nostr";
+import Connection from "Nostr/Connection";
+import EventKind from "Nostr/EventKind";
 
 export type NEventHandler = (e: TaggedRawEvent) => void;
 export type OnEndHandler = (c: Connection) => void;

src/nostr/System.ts

@@ -1,11 +1,11 @@
-import { HexKey, TaggedRawEvent } from ".";
-import { ProfileCacheExpire } from "../Const";
-import { db } from "../db";
-import { mapEventToProfile, MetadataCache } from "../db/User";
-import Connection, { RelaySettings } from "./Connection";
-import Event from "./Event";
-import EventKind from "./EventKind";
-import { Subscriptions } from "./Subscriptions";
+import { HexKey, TaggedRawEvent } from "Nostr";
+import { ProfileCacheExpire } from "Const";
+import { db } from "Db";
+import { mapEventToProfile, MetadataCache } from "Db/User";
+import Connection, { RelaySettings } from "Nostr/Connection";
+import Event from "Nostr/Event";
+import EventKind from "Nostr/EventKind";
+import { Subscriptions } from "Nostr/Subscriptions";
 
 /**
  * Manages nostr content retrival system

src/nostr/Tag.ts

@@ -1,4 +1,4 @@
-import { HexKey, RawReqFilter, u256 } from ".";
+import { HexKey, u256 } from "Nostr";
 
 export default class Tag {
     Original: string[];

src/nostr/Thread.ts

@@ -1,7 +1,7 @@
-import { u256 } from ".";
-import { default as NEvent } from "./Event";
-import EventKind from "./EventKind";
-import Tag from "./Tag";
+import { u256 } from "Nostr";
+import { default as NEvent } from "Nostr/Event";
+import EventKind from "Nostr/EventKind";
+import Tag from "Nostr/Tag";
 
 export default class Thread {
     Root?: Tag;

src/pages/ChatPage.tsx

@@ -4,14 +4,14 @@ import { useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
 import { useInView } from 'react-intersection-observer';
 
-import ProfileImage from "../element/ProfileImage";
-import { bech32ToHex } from "../Util";
-import useEventPublisher from "../feed/EventPublisher";
+import ProfileImage from "Element/ProfileImage";
+import { bech32ToHex } from "Util";
+import useEventPublisher from "Feed/EventPublisher";
 
-import DM from "../element/DM";
-import { RawEvent } from "../nostr";
-import { dmsInChat, isToSelf } from "./MessagesPage";
-import NoteToSelf from "../element/NoteToSelf";
+import DM from "Element/DM";
+import { RawEvent } from "Nostr";
+import { dmsInChat, isToSelf } from "Pages/MessagesPage";
+import NoteToSelf from "Element/NoteToSelf";
 
 type RouterParams = {
     id: string

src/pages/DonatePage.tsx

@@ -1,6 +1,5 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import ProfilePreview from "../element/ProfilePreview";
-import ZapButton from "../element/ZapButton";
+import ProfilePreview from "Element/ProfilePreview";
+import ZapButton from "Element/ZapButton";
 
 const Developers = [
     "63fe6318dc58583cfe16810f86dd09e18bfd76aabc24a0081ce2856f330504ed", // kieran

src/pages/EventPage.tsx

@@ -1,7 +1,7 @@
 import { useParams } from "react-router-dom";
-import Thread from "../element/Thread";
-import useThreadFeed from "../feed/ThreadFeed";
-import { parseId } from "../Util";
+import Thread from "Element/Thread";
+import useThreadFeed from "Feed/ThreadFeed";
+import { parseId } from "Util";
 
 export default function EventPage() {
     const params = useParams();

src/pages/HashTagsPage.tsx

@@ -1,5 +1,5 @@
 import { useParams } from "react-router-dom";
-import Timeline from "../element/Timeline";
+import Timeline from "Element/Timeline";
 
 const HashTagsPage = () => {
     const params = useParams();

src/pages/Layout.tsx

@@ -5,14 +5,14 @@ import { Outlet, useNavigate } from "react-router-dom";
 import { faBell, faMessage } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { System } from "../nostr/System"
-import ProfileImage from "../element/ProfileImage";
-import { init } from "../state/Login";
-import useLoginFeed from "../feed/LoginFeed";
-import { RootState } from "../state/Store";
-import { HexKey, RawEvent, TaggedRawEvent } from "../nostr";
-import { RelaySettings } from "../nostr/Connection";
-import { totalUnread } from "./MessagesPage";
+import { RootState } from "State/Store";
+import { init } from "State/Login";
+import { HexKey, RawEvent, TaggedRawEvent } from "Nostr";
+import { RelaySettings } from "Nostr/Connection";
+import { System } from "Nostr/System"
+import ProfileImage from "Element/ProfileImage";
+import useLoginFeed from "Feed/LoginFeed";
+import { totalUnread } from "Pages/MessagesPage";
 
 export default function Layout() {
     const dispatch = useDispatch();

src/pages/Login.tsx

@@ -3,11 +3,11 @@ import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import * as secp from '@noble/secp256k1';
 
-import { setPrivateKey, setPublicKey } from "../state/Login";
-import { EmailRegex } from "../Const";
-import { bech32ToHex } from "../Util";
-import { RootState } from "../state/Store";
-import { HexKey } from "../nostr";
+import { RootState } from "State/Store";
+import { setPrivateKey, setPublicKey } from "State/Login";
+import { EmailRegex } from "Const";
+import { bech32ToHex } from "Util";
+import { HexKey } from "Nostr";
 
 export default function LoginPage() {
     const dispatch = useDispatch();

src/pages/MessagesPage.tsx

@@ -1,13 +1,13 @@
 import { useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux"
 
-import { HexKey, RawEvent } from "../nostr";
-import UnreadCount from "../element/UnreadCount";
-import ProfileImage from "../element/ProfileImage";
+import { HexKey, RawEvent } from "Nostr";
+import UnreadCount from "Element/UnreadCount";
+import ProfileImage from "Element/ProfileImage";
 import { hexToBech32 } from "../Util";
-import { incDmInteraction } from "../state/Login";
-import { RootState } from "../state/Store";
-import NoteToSelf from "../element/NoteToSelf";
+import { incDmInteraction } from "State/Login";
+import { RootState } from "State/Store";
+import NoteToSelf from "Element/NoteToSelf";
 
 type DmChat = {
     pubkey: HexKey,

src/pages/NewUserPage.tsx

@@ -1,5 +1,5 @@
-import { RecommendedFollows } from "../Const";
-import ProfilePreview from "../element/ProfilePreview";
+import { RecommendedFollows } from "Const";
+import ProfilePreview from "Element/ProfilePreview";
 
 export default function NewUserPage() {
 

src/pages/Notifications.tsx

@@ -1,14 +1,14 @@
 import { useEffect, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux"
-import Note from "../element/Note";
-import NoteReaction from "../element/NoteReaction";
-import useSubscription from "../feed/Subscription";
-import { TaggedRawEvent } from "../nostr";
-import Event from "../nostr/Event";
-import EventKind from "../nostr/EventKind";
-import { Subscriptions } from "../nostr/Subscriptions";
-import { markNotificationsRead } from "../state/Login";
-import { RootState } from "../state/Store";
+import Note from "Element/Note";
+import NoteReaction from "Element/NoteReaction";
+import useSubscription from "Feed/Subscription";
+import { TaggedRawEvent } from "Nostr";
+import Event from "Nostr/Event";
+import EventKind from "Nostr/EventKind";
+import { Subscriptions } from "Nostr/Subscriptions";
+import { markNotificationsRead } from "State/Login";
+import { RootState } from "State/Store";
 
 export default function NotificationsPage() {
     const dispatch = useDispatch();

src/pages/ProfilePage.tsx

@@ -6,21 +6,21 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faGear, faEnvelope } from "@fortawesome/free-solid-svg-icons";
 import { useNavigate, useParams } from "react-router-dom";
 
-import useProfile from "../feed/ProfileFeed";
-import FollowButton from "../element/FollowButton";
-import { extractLnAddress, parseId, hexToBech32 } from "../Util";
-import Avatar from "../element/Avatar";
-import Timeline from "../element/Timeline";
-import Text from '../element/Text'
-import LNURLTip from "../element/LNURLTip";
-import Nip05 from "../element/Nip05";
-import Copy from "../element/Copy";
-import ProfilePreview from "../element/ProfilePreview";
-import FollowersList from "../element/FollowersList";
-import FollowsList from "../element/FollowsList";
-import { RootState } from "../state/Store";
-import { HexKey } from "../nostr";
-import FollowsYou from "../element/FollowsYou"
+import useProfile from "Feed/ProfileFeed";
+import FollowButton from "Element/FollowButton";
+import { extractLnAddress, parseId, hexToBech32 } from "Util";
+import Avatar from "Element/Avatar";
+import Timeline from "Element/Timeline";
+import Text from 'Element/Text'
+import LNURLTip from "Element/LNURLTip";
+import Nip05 from "Element/Nip05";
+import Copy from "Element/Copy";
+import ProfilePreview from "Element/ProfilePreview";
+import FollowersList from "Element/FollowersList";
+import FollowsList from "Element/FollowsList";
+import { RootState } from "State/Store";
+import { HexKey } from "Nostr";
+import FollowsYou from "Element/FollowsYou"
 
 enum ProfileTab {
     Notes = "Notes",

src/pages/Root.tsx

@@ -1,12 +1,13 @@
 import "./Root.css";
+import { useState } from "react";
 import { useSelector } from "react-redux";
 import { Link } from "react-router-dom";
-import { NoteCreator } from "../element/NoteCreator";
-import Timeline from "../element/Timeline";
-import { useState } from "react";
-import { RootState } from "../state/Store";
-import { HexKey } from "../nostr";
-import { TimelineSubject } from "../feed/TimelineFeed";
+
+import { RootState } from "State/Store";
+import { NoteCreator } from "Element/NoteCreator";
+import Timeline from "Element/Timeline";
+import { HexKey } from "Nostr";
+import { TimelineSubject } from "Feed/TimelineFeed";
 
 const RootTab = {
     Posts: 0,

src/pages/SettingsPage.tsx

@@ -1,5 +1,5 @@
 import "./SettingsPage.css";
-import Nostrich from "../nostrich.jpg";
+import Nostrich from "nostrich.jpg";
 
 import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
@@ -7,17 +7,17 @@ import { useNavigate } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faShop } from "@fortawesome/free-solid-svg-icons";
 
-import useEventPublisher from "../feed/EventPublisher";
-import useProfile from "../feed/ProfileFeed";
-import VoidUpload from "../feed/VoidUpload";
-import { logout, setRelays } from "../state/Login";
-import { hexToBech32, openFile } from "../Util";
-import Relay from "../element/Relay";
-import Copy from "../element/Copy";
-import { RootState } from "../state/Store";
-import { HexKey, UserMetadata } from "../nostr";
-import { RelaySettings } from "../nostr/Connection";
-import { MetadataCache } from "../db/User";
+import { RootState } from "State/Store";
+import { logout, setRelays } from "State/Login";
+import useEventPublisher from "Feed/EventPublisher";
+import useProfile from "Feed/ProfileFeed";
+import VoidUpload from "Feed/VoidUpload";
+import { hexToBech32, openFile } from "Util";
+import Relay from "Element/Relay";
+import Copy from "Element/Copy";
+import { HexKey, UserMetadata } from "Nostr";
+import { RelaySettings } from "Nostr/Connection";
+import { MetadataCache } from "Db/User";
 
 export default function SettingsPage() {
     const navigate = useNavigate();

src/pages/Verification.tsx

@@ -1,4 +1,4 @@
-import Nip5Service from "../element/Nip5Service";
+import Nip5Service from "Element/Nip5Service";
 
 import './Verification.css'
 

src/pages/settings/ProfileSettings.tsx

@@ -0,0 +1,240 @@
+import "./SettingsPage.css";
+import Nostrich from "nostrich.jpg";
+
+import { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faShop } from "@fortawesome/free-solid-svg-icons";
+
+import useEventPublisher from "Feed/EventPublisher";
+import useProfile from "Feed/ProfileFeed";
+import VoidUpload from "Feed/VoidUpload";
+import { logout, setRelays } from "State/Login";
+import { hexToBech32, openFile } from "Util";
+import Relay from "Element/Relay";
+import Copy from "Element/Copy";
+import { RootState } from "State/Store";
+import { HexKey, UserMetadata } from "Nostr";
+import { RelaySettings } from "Nostr/Connection";
+import { MetadataCache } from "Db/User";
+
+export default function SettingsPage() {
+    const navigate = useNavigate();
+    const id = useSelector<RootState, HexKey | undefined>(s => s.login.publicKey);
+    const privKey = useSelector<RootState, HexKey | undefined>(s => s.login.privateKey);
+    const relays = useSelector<RootState, Record<string, RelaySettings>>(s => s.login.relays);
+    const dispatch = useDispatch();
+    const user = useProfile(id)?.get(id || "");
+    const publisher = useEventPublisher();
+
+    const [name, setName] = useState<string>();
+    const [displayName, setDisplayName] = useState<string>();
+    const [picture, setPicture] = useState<string>();
+    const [banner, setBanner] = useState<string>();
+    const [about, setAbout] = useState<string>();
+    const [website, setWebsite] = useState<string>();
+    const [nip05, setNip05] = useState<string>();
+    const [lud06, setLud06] = useState<string>();
+    const [lud16, setLud16] = useState<string>();
+    const [newRelay, setNewRelay] = useState<string>();
+
+    const avatarPicture = (picture?.length ?? 0) === 0 ? Nostrich : picture
+
+    useEffect(() => {
+        if (user) {
+            setName(user.name);
+            setDisplayName(user.display_name)
+            setPicture(user.picture);
+            setBanner(user.banner);
+            setAbout(user.about);
+            setWebsite(user.website);
+            setNip05(user.nip05);
+            setLud06(user.lud06);
+            setLud16(user.lud16);
+        }
+    }, [user]);
+
+    async function saveProfile() {
+        // copy user object and delete internal fields
+        let userCopy = {
+            ...user,
+            name,
+            display_name: displayName,
+            about,
+            picture,
+            banner,
+            website,
+            nip05,
+            lud16
+        };
+        delete userCopy["loaded"];
+        delete userCopy["created"];
+        delete userCopy["pubkey"];
+        console.debug(userCopy);
+
+        let ev = await publisher.metadata(userCopy);
+        console.debug(ev);
+        publisher.broadcast(ev);
+    }
+
+    async function uploadFile() {
+        let file = await openFile();
+        if (file) {
+            console.log(file);
+            let rsp = await VoidUpload(file, file.name);
+            if (!rsp?.ok) {
+                throw "Upload failed, please try again later";
+            }
+            return rsp.file;
+        }
+    }
+
+    async function setNewAvatar() {
+        const rsp = await uploadFile();
+        if (rsp) {
+            setPicture(rsp.meta?.url ?? `https://void.cat/d/${rsp.id}`);
+        }
+    }
+
+    async function setNewBanner() {
+        const rsp = await uploadFile();
+        if (rsp) {
+            setBanner(rsp.meta?.url ?? `https://void.cat/d/${rsp.id}`);
+        }
+    }
+
+    async function saveRelays() {
+        let ev = await publisher.saveRelays();
+        publisher.broadcast(ev);
+    }
+
+    function editor() {
+        return (
+            <div className="editor">
+                <div className="form-group">
+                    <div>Name:</div>
+                    <div>
+                        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
+                    </div>
+                </div>
+                <div className="form-group">
+                    <div>Display name:</div>
+                    <div>
+                        <input type="text" value={displayName} onChange={(e) => setDisplayName(e.target.value)} />
+                    </div>
+                </div>
+                <div className="form-group f-col">
+                    <div>About:</div>
+                    <div className="w-max">
+                        <textarea className="w-max" onChange={(e) => setAbout(e.target.value)} value={about}></textarea>
+                    </div>
+                </div>
+                <div className="form-group">
+                    <div>Website:</div>
+                    <div>
+                        <input type="text" value={website} onChange={(e) => setWebsite(e.target.value)} />
+                    </div>
+                </div>
+                <div className="form-group">
+                    <div>NIP-05:</div>
+                    <div>
+                        <input type="text" className="mr10" value={nip05} onChange={(e) => setNip05(e.target.value)} />
+                        <div className="btn" onClick={() => navigate("/verification")}>
+                            <FontAwesomeIcon icon={faShop} />
+                            &nbsp;
+                            Buy
+                        </div>
+                    </div>
+                </div>
+                <div className="form-group">
+                    <div>LN Address:</div>
+                    <div>
+                        <input type="text" value={lud16} onChange={(e) => setLud16(e.target.value)} />
+                    </div>
+                </div>
+                <div className="form-group">
+                    <div>
+                        <div className="btn" onClick={() => { dispatch(logout()); navigate("/"); }}>Logout</div>
+                    </div>
+                    <div>
+                        <div className="btn" onClick={() => saveProfile()}>Save</div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+
+    function addNewRelay() {
+        if ((newRelay?.length ?? 0) > 0) {
+            const parsed = new URL(newRelay!);
+            const payload = {
+                relays: {
+                    ...relays,
+                    [parsed.toString()]: { read: false, write: false }
+                },
+                createdAt: Math.floor(new Date().getTime() / 1000)
+            };
+            dispatch(setRelays(payload))
+        }
+    }
+
+    function addRelay() {
+        return (
+            <>
+                <h4>Add Relays</h4>
+                <div className="flex mb10">
+                    <input type="text" className="f-grow" placeholder="wss://my-relay.com" value={newRelay} onChange={(e) => setNewRelay(e.target.value)} />
+                </div>
+                <div className="btn mb10" onClick={() => addNewRelay()}>Add</div>
+            </>
+        )
+    }
+
+    function settings() {
+        if (!id) return null;
+        return (
+            <>
+                <h1>Settings</h1>
+                <div className="flex f-center image-settings">
+                    <div>
+                        <h2>Avatar</h2>
+                        <div style={{ backgroundImage: `url(${avatarPicture})` }} className="avatar">
+                            <div className="edit" onClick={() => setNewAvatar()}>Edit</div>
+                        </div>
+                    </div>
+                    <div>
+                        <h2>Header</h2>
+                        <div style={{ backgroundImage: `url(${(banner?.length ?? 0) === 0 ? Nostrich : banner})` }} className="banner">
+                            <div className="edit" onClick={() => setNewBanner()}>Edit</div>
+                        </div>
+                    </div>
+                </div>
+                {editor()}
+            </>
+        )
+    }
+
+    return (
+        <div className="settings">
+            {settings()}
+            {privKey && (<div className="flex f-col bg-grey">
+                <div>
+                    <h4>Private Key:</h4>
+                </div>
+                <div>
+                    <Copy text={hexToBech32("nsec", privKey)} />
+                </div>
+            </div>)}
+            <h4>Relays</h4>
+            <div className="flex f-col">
+                {Object.keys(relays || {}).map(a => <Relay addr={a} key={a} />)}
+            </div>
+            <div className="flex actions">
+                <div className="f-grow"></div>
+                <div className="btn" onClick={() => saveRelays()}>Save</div>
+            </div>
+            {addRelay()}
+        </div>
+    );
+}

src/state/Login.ts

@@ -1,8 +1,8 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 import * as secp from '@noble/secp256k1';
-import { DefaultRelays } from '../Const';
-import { HexKey, RawEvent, TaggedRawEvent } from '../nostr';
-import { RelaySettings } from '../nostr/Connection';
+import { DefaultRelays } from 'Const';
+import { HexKey, RawEvent, TaggedRawEvent } from 'Nostr';
+import { RelaySettings } from 'Nostr/Connection';
 
 const PrivateKeyItem = "secret";
 const PublicKeyItem = "pubkey";

src/state/Store.ts

@@ -1,5 +1,5 @@
 import { configureStore } from "@reduxjs/toolkit";
-import { reducer as LoginReducer } from "./Login";
+import { reducer as LoginReducer } from "State/Login";
 
 const store = configureStore({
     reducer: {

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "baseUrl": "src",
     "target": "es6",
     "jsx": "react-jsx",
     "moduleResolution": "node",