reorg components

src/components/App.tsx

@@ -1,6 +1,6 @@
 import logo from '~/assets/icons/mutiny-logo.svg';
+import { SafeArea } from "~/components/layout";
 import BalanceBox from "~/components/BalanceBox";
-import SafeArea from "~/components/SafeArea";
 import NavBar from "~/components/NavBar";
 
 // TODO: use this reload prompt for real

src/components/BalanceBox.tsx

@@ -1,7 +1,7 @@
 import { Motion, Presence } from "@motionone/solid";
 import { createResource, Show, Suspense } from "solid-js";
 
-import { ButtonLink } from "~/components/Button";
+import { ButtonLink } from "~/components/layout";
 import { useMegaStore } from "~/state/megaStore";
 
 function prettyPrintAmount(n?: number | bigint): string {

src/components/Card.tsx

@@ -1,13 +0,0 @@
-import { ParentComponent } from "solid-js"
-
-const Card: ParentComponent<{ title?: string }> = (props) => {
-    return (
-        <div class='rounded-xl p-4 flex flex-col gap-2 bg-[rgba(0,0,0,0.5)]'>
-            {props.title && <header class='text-sm font-semibold uppercase'>{props.title}</header>}
-            {props.children}
-        </div>
-
-    )
-}
-
-export default Card

src/components/KitchenSink.tsx

@@ -1,7 +1,6 @@
 import { useMegaStore } from "~/state/megaStore";
-import { ButtonLink } from "./Button";
-import Card from "./Card";
-import PeerConnectModal from "./PeerConnectModal";
+import { ButtonLink, Card, SmallHeader } from "~/components/layout";
+import PeerConnectModal from "~/components/PeerConnectModal";
 import { createResource } from "solid-js";
 
 export default function KitchenSink() {
@@ -24,6 +23,12 @@ export default function KitchenSink() {
         <Card title="Kitchen Sink">
             <PeerConnectModal />
             <ButtonLink target="_blank" rel="noopener noreferrer" href={`https://faucet.mutinynet.com/?address=${address()}`}>Tap the Faucet</ButtonLink>
+            <SmallHeader>
+                Peers
+            </SmallHeader>
+
+
+
         </Card>
     )
 }

src/components/PeerConnectModal.tsx

@@ -1,7 +1,6 @@
 import { QRCodeSVG } from "solid-qr-code";
-import Card from "~/components/Card";
 import { As, Dialog } from "@kobalte/core";
-import { Button } from "~/components/Button";
+import { Button, Card } from "~/components/layout";
 import { useMegaStore } from "~/state/megaStore";
 import { Show, createResource } from "solid-js";
 import { getExistingSettings } from "~/logic/nodeManagerSetup";
@@ -12,7 +11,7 @@ const DIALOG_POSITIONER = "fixed inset-0 z-50 flex items-center justify-center"
 const DIALOG_CONTENT = "w-[80vw] max-w-[400px] p-4 bg-gray/50 backdrop-blur-md shadow-xl rounded-xl border border-white/10"
 const SMALL_HEADER = "text-sm font-semibold uppercase"
 
-export default function PeerConnectModalKobalte() {
+export default function PeerConnectModal() {
     const [state, _] = useMegaStore()
 
     const getPeerConnectString = async () => {

src/components/Reload.tsx

@@ -1,8 +1,7 @@
 import type { Component } from 'solid-js'
 import { Show } from 'solid-js'
 import { useRegisterSW } from 'virtual:pwa-register/solid'
-import Card from './Card'
-import { Button } from './Button'
+import { Button, Card } from '~/components/layout'
 
 const ReloadPrompt: Component = () => {
     const {

src/components/SafeArea.tsx

@@ -1,11 +0,0 @@
-import { JSX } from "solid-js";
-
-export default function SafeArea(props: { children: JSX.Element }) {
-    return (
-        <div class="safe-top safe-left safe-right safe-bottom">
-            <div class="disable-scrollbars max-h-screen h-full overflow-y-scroll md:pl-[8rem] md:pr-[6rem]">
-                {props.children}
-            </div>
-        </div >
-    )
-}

src/components/layout/index.tsx

@@ -1,4 +1,30 @@
-export default function LoadingSpinner() {
+import { ParentComponent } from "solid-js"
+import Linkify from "./Linkify"
+import { Button, ButtonLink } from "./Button"
+
+const SmallHeader: ParentComponent = (props) => <header class='text-sm font-semibold uppercase'>{props.children}</header>
+
+const Card: ParentComponent<{ title?: string }> = (props) => {
+    return (
+        <div class='rounded-xl p-4 flex flex-col gap-2 bg-[rgba(0,0,0,0.5)]'>
+            {props.title && <SmallHeader>{props.title}</SmallHeader>}
+            {props.children}
+        </div>
+
+    )
+}
+
+const SafeArea: ParentComponent = (props) => {
+    return (
+        <div class="safe-top safe-left safe-right safe-bottom">
+            <div class="disable-scrollbars max-h-screen h-full overflow-y-scroll md:pl-[8rem] md:pr-[6rem]">
+                {props.children}
+            </div>
+        </div >
+    )
+}
+
+const LoadingSpinner = () => {
     return (<div role="status" class="w-full h-full grid" >
         <svg aria-hidden="true" class="w-8 h-8 mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-m-red place-self-center" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor" />
@@ -7,3 +33,5 @@ export default function LoadingSpinner() {
         <span class="sr-only">Loading...</span>
     </div>);
 }
+
+export { SmallHeader, Card, SafeArea, LoadingSpinner, Button, ButtonLink, Linkify }

src/components/waitlist/Notes.tsx

@@ -1,7 +1,7 @@
 import { Component, For } from "solid-js";
 
 import { Event, nip19 } from "nostr-tools"
-import Linkify from "~/components/Linkify";
+import { Linkify } from "~/components/layout";
 
 type NostrEvent = {
     "content": string, "created_at": number, id?: string

src/components/waitlist/WaitlistAlreadyIn.tsx

@@ -10,7 +10,7 @@ const relayUrls = [
 ]
 
 import { SimplePool } from 'nostr-tools'
-import LoadingSpinner from "~/components/LoadingSpinner";
+import { LoadingSpinner } from "~/components/layout";
 import Notes from "~/components/waitlist/Notes";
 
 const pool = new SimplePool()

src/components/waitlist/WaitlistForm.tsx

@@ -1,6 +1,5 @@
 import { createSignal } from "solid-js";
-import { Button } from "~/components/Button";
-import LoadingSpinner from "../LoadingSpinner";
+import { Button, LoadingSpinner } from "~/components/layout";
 
 const INPUT = "w-full mb-4 p-2 rounded-lg text-black"
 

src/routes/Receive.tsx

@@ -1,8 +1,7 @@
 import { createResource, Show } from "solid-js";
 import { QRCodeSVG } from "solid-qr-code";
-import { Button } from "~/components/Button";
+import { Button, SafeArea } from "~/components/layout";
 import NavBar from "~/components/NavBar";
-import SafeArea from "~/components/SafeArea";
 import { useMegaStore } from "~/state/megaStore";
 import { useCopy } from "~/utils/useCopy";
 

src/routes/Scanner.tsx

@@ -1,7 +1,7 @@
 import Reader from "~/components/Reader";
 import { createSignal, Show } from "solid-js";
 import { useNavigate } from "solid-start";
-import { Button } from "~/components/Button";
+import { Button } from "~/components/layout";
 
 export default function Scanner() {
     const [scanResult, setScanResult] = createSignal<string | null>(null);

src/routes/Settings.tsx

@@ -1,7 +1,6 @@
 import { useNavigate } from "solid-start";
-import { Button } from "~/components/Button";
+import { Button, SafeArea } from "~/components/layout";
 import NavBar from "~/components/NavBar";
-import SafeArea from "~/components/SafeArea";
 import { useMegaStore } from "~/state/megaStore";
 
 export default function Settings() {

src/routes/index.tsx

@@ -4,7 +4,7 @@ import { Switch, Match } from "solid-js";
 import { WaitlistAlreadyIn } from "~/components/waitlist/WaitlistAlreadyIn";
 import WaitlistForm from "~/components/waitlist/WaitlistForm";
 import { useMegaStore } from "~/state/megaStore";
-import LoadingSpinner from "~/components/LoadingSpinner";
+import { LoadingSpinner } from "~/components/layout";
 
 function FullscreenLoader() {
   return (