mleku/flotilla
1
1
Fork 0
mirror of https://github.com/coracle-social/flotilla.git synced 2025-12-10 10:57:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move routes around, tweak navigation, fix CardButton

Browse Source
This commit is contained in:
Jon Staab
2024-10-21 13:18:48 -07:00
parent b1a8ddf68c
commit dea34f96ec
20 changed files with 149 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app.css
View File

@@ -116,18 +116,6 @@
@apply m-auto w-full max-w-3xl p-4 sm:p-8 md:p-12;
}
.content-t {
@apply pt-4 sm:pt-8 md:pt-12;
}
.content-b {
@apply pb-4 sm:pb-8 md:pb-12;
}
.content-x {
@apply px-4 sm:px-8 md:px-12;
}
.heading {
@apply text-center text-2xl;
}

5
src/app/components/ChatItem.svelte
View File

@@ -10,6 +10,7 @@
import ProfileName from "@app/components/ProfileName.svelte"
import ProfileCircle from "@app/components/ProfileCircle.svelte"
import ProfileCircles from "@app/components/ProfileCircles.svelte"
import {makeChatPath} from '@app/routes'
export let id: string
export let pubkeys: string[]
@@ -28,9 +29,9 @@
</script>
<div
class="cursor-pointer border-t border-solid border-base-100 px-6 py-2 transition-colors hover:bg-base-100"
class="cursor-pointer border-t border-solid border-base-100 px-6 py-2 transition-colors hover:bg-base-100 {$$props.class}"
class:bg-base-100={active}>
<Link class="flex flex-col justify-start gap-1" href="/home/{id}">
<Link class="flex flex-col justify-start gap-1" href={makeChatPath(pubkeys)}>
<div class="flex justify-between gap-2">
<div class="flex min-w-0 items-center gap-2">
{#if others.length === 1}

12
src/app/components/MenuHome.svelte
View File

@@ -1,32 +1,36 @@
<script lang="ts">
import {pubkey} from "@welshman/app"
import Icon from "@lib/components/Icon.svelte"
import Link from "@lib/components/Link.svelte"
import CardButton from "@lib/components/CardButton.svelte"
import {makeChatPath} from "@app/routes"
$: notesPath = makeChatPath([$pubkey!])
</script>
<div class="column menu gap-2">
<Link href="/home/people">
<Link href="/people">
<CardButton>
<div slot="icon"><Icon icon="user-heart" size={7} /></div>
<div slot="title">People</div>
<div slot="info">Search for people on the network</div>
</CardButton>
</Link>
<Link href="/home/network">
<Link href="/network">
<CardButton>
<div slot="icon"><Icon icon="share-circle" size={7} /></div>
<div slot="title">Network</div>
<div slot="info">Browse posts from your network</div>
</CardButton>
</Link>
<Link href="/home/notes">
<Link href={notesPath}>
<CardButton>
<div slot="icon"><Icon icon="notes-minimalistic" size={7} /></div>
<div slot="title">Notes</div>
<div slot="info">Keep track of your notes</div>
</CardButton>
</Link>
<Link href="/home/chats">
<Link href="/chats">
<CardButton>
<div slot="icon"><Icon icon="chat-round" size={7} /></div>
<div slot="title">Chats</div>

39
src/app/components/MenuSpaces.svelte
View File

@@ -10,10 +10,11 @@
import SpaceAvatar from "@app/components/SpaceAvatar.svelte"
import RelayName from "@app/components/RelayName.svelte"
import RelayDescription from "@app/components/RelayDescription.svelte"
import SpaceAdd from "@app/components/SpaceAdd.svelte"
import SpaceExit from "@app/components/SpaceExit.svelte"
import SpaceJoin from "@app/components/SpaceJoin.svelte"
import RoomCreate from "@app/components/RoomCreate.svelte"
import SpaceCreateExternal from "@app/components/SpaceCreateExternal.svelte"
import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
import {
GENERAL,
userMembership,
@@ -30,6 +31,10 @@
const assertNotNil = <T,>(x: T) => x!
const startCreate = () => pushModal(SpaceCreateExternal)
const startJoin = () => pushModal(SpaceInviteAccept)
const resetSpace = () => {
space = ""
}
@@ -46,8 +51,6 @@
showSettings = false
}
const addSpace = () => pushModal(SpaceAdd)
const browseSpaces = () => goto("/discover")
const leaveSpace = () => pushModal(SpaceExit, {url: space})
@@ -82,10 +85,11 @@
Go Back
</Button>
{:else if space}
<p class="mb-4 text-center text-2xl">
Actions for <span class="text-primary">{displayRelayUrl(space)}</span>
<p class="mb-4 text-2xl center gap-2">
<Icon icon="remote-controller-minimalistic" size={7} />
<span class="text-primary">{displayRelayUrl(space)}</span>
</p>
<div class="grid grid-cols-3 gap-2">
<div class="grid sm:grid-cols-3 gap-2">
<Link href={makeSpacePath(space)} class="btn btn-neutral">
<Icon icon="chat-round" /> Chat
</Link>
@@ -108,7 +112,7 @@
</Link>
{/each}
</div>
<div class="grid grid-cols-2 gap-2">
<div class="grid sm:grid-cols-2 gap-2">
<Button on:click={addRoom} class="btn btn-primary">
<Icon icon="add-circle" />
Create Room
@@ -134,18 +138,25 @@
{#if getMembershipUrls($userMembership).length > 0}
<Divider />
{/if}
<Button on:click={addSpace}>
<Button on:click={startJoin}>
<CardButton>
<div slot="icon"><Icon icon="add-circle" size={7} /></div>
<div slot="title">Add a space</div>
<div slot="info">Invite all your friends, do life together.</div>
<div slot="icon"><Icon icon="login-2" size={7} /></div>
<div slot="title">Join a space</div>
<div slot="info">Enter an invite code or url to join an existing space.</div>
</CardButton>
</Button>
<Button on:click={browseSpaces}>
<Link href="/discover">
<CardButton>
<div slot="icon"><Icon icon="compass" size={7} /></div>
<div slot="title">Discover spaces</div>
<div slot="info">Find a community based on your hobbies or interests.</div>
<div slot="title">Find a space</div>
<div slot="info">Browse spaces on the discover page.</div>
</CardButton>
</Link>
<Button on:click={startCreate}>
<CardButton>
<div slot="icon"><Icon icon="add-circle" size={7} /></div>
<div slot="title">Create a space</div>
<div slot="info">Just a few questions and you'll be on your way.</div>
</CardButton>
</Button>
{/if}

8
src/app/components/PeopleItem.svelte
View File

@@ -28,8 +28,6 @@
const filters: Filter[] = [{kinds: [NOTE], authors: [pubkey], since: ago(WEEK)}]
const events = deriveEvents(repository, {filters})
const onClick = () => pushDrawer(ProfileDetail, {pubkey})
$: roots = $events.filter(e => getAncestorTags(e.tags).replies.length === 0)
onMount(async () => {
@@ -44,7 +42,7 @@
})
</script>
<Button class="card2 bg-alt flex flex-col shadow-xl" on:click={onClick}>
<div class="card2 bg-alt flex flex-col shadow-xl">
<Profile {pubkey} />
<ProfileInfo {pubkey} />
{#if roots.length > 0}
@@ -53,7 +51,7 @@
{@const nevent = nip19.neventEncode({id: event.id, relays})}
{@const following = getPubkeyTagValues(getListTags($userFollows)).includes(pubkey)}
<div class="divider" />
<button type="button" class="chat chat-start flex cursor-default" on:click|stopPropagation>
<button type="button" class="chat chat-start flex cursor-default max-w-full ml-2" on:click|stopPropagation>
<div class="bg-alt col-4 chat-bubble text-left">
<Content showEntire hideMedia={!following} {event} />
<Link external href={entityLink(nevent)} class="row-2 group justify-end whitespace-nowrap">
@@ -71,4 +69,4 @@
</div>
</div>
{/if}
</Button>
</div>

29
src/app/components/PrimaryNav.svelte
View File

@@ -21,12 +21,9 @@
const showSettingsMenu = () => pushModal(MenuSettings)
</script>
<div class="relative hidden w-14 flex-shrink-0 bg-base-100 pt-4 md:block">
<div class="relative hidden w-14 flex-shrink-0 bg-base-200 pt-4 md:block">
<div class="flex h-full flex-col justify-between">
<div>
<PrimaryNavItem href="/home/people" class="tooltip-right">
<Avatar icon="home-smile" class="!h-10 !w-10" />
</PrimaryNavItem>
{#if import.meta.env.VITE_PLATFORM_RELAY}
<PrimaryNavItem
title={displayRelayUrl(import.meta.env.VITE_PLATFORM_RELAY)}
@@ -52,11 +49,17 @@
{/if}
</div>
<div>
<PrimaryNavItem title="Profile" href="/settings/profile" class="tooltip-right">
<PrimaryNavItem title="Settings" href="/settings/profile" class="tooltip-right">
<Avatar src={$userProfile?.picture} class="!h-10 !w-10" />
</PrimaryNavItem>
<PrimaryNavItem title="Settings" href="/settings/relays" class="tooltip-right">
<Avatar icon="settings" class="!h-10 !w-10" />
<PrimaryNavItem title="People" href="/people" class="tooltip-right">
<Avatar icon="user-heart" class="!h-10 !w-10" />
</PrimaryNavItem>
<PrimaryNavItem title="Threads" href="/network" class="tooltip-right">
<Avatar icon="notes-minimalistic" class="!h-10 !w-10" />
</PrimaryNavItem>
<PrimaryNavItem title="Messages" href="/chat" class="tooltip-right">
<Avatar icon="letter" class="!h-10 !w-10" />
</PrimaryNavItem>
</div>
</div>
@@ -68,17 +71,17 @@
class="border-top fixed bottom-0 left-0 right-0 z-nav h-14 border border-base-200 bg-base-100 md:hidden">
<div class="m-auto flex max-w-md justify-between px-2">
<div class="flex gap-4 sm:gap-8">
<PrimaryNavItem title="Home" on:click={showHomeMenu}>
<Avatar icon="home-smile" class="!h-10 !w-10" />
</PrimaryNavItem>
<PrimaryNavItem title="Spaces" on:click={showSpacesMenu}>
<SpaceAvatar />
</PrimaryNavItem>
<PrimaryNavItem title="Settings" on:click={showSettingsMenu}>
<Avatar icon="settings" class="!h-10 !w-10" />
<PrimaryNavItem title="People" href="/people">
<Avatar icon="user-heart" class="!h-10 !w-10" />
</PrimaryNavItem>
<PrimaryNavItem title="Messages" href="/chat">
<Avatar icon="letter" class="!h-10 !w-10" />
</PrimaryNavItem>
</div>
<PrimaryNavItem noActive title="Settings" href="/settings/profile">
<PrimaryNavItem noActive title="Settings" on:click={showSettingsMenu}>
<Avatar src={$userProfile?.picture} class="!h-10 !w-10" />
</PrimaryNavItem>
</div>

2
src/app/routes.ts
View File

@@ -12,7 +12,7 @@ export const makeSpacePath = (url: string, extra = "") => {
return path
}
export const makeChatPath = (pubkeys: string[]) => `/home/${makeChatId(pubkeys)}`
export const makeChatPath = (pubkeys: string[]) => `/chat/${makeChatId(pubkeys)}`
export const getPrimaryNavItem = ($page: Page) => $page.route?.id?.split("/")[1]

4
src/assets/icons/Letter.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C22 6.34315 22 8.22876 22 12C22 15.7712 22 17.6569 20.8284 18.8284C19.6569 20 17.7712 20 14 20H10C6.22876 20 4.34315 20 3.17157 18.8284C2 17.6569 2 15.7712 2 12Z" stroke="#1C274C" stroke-width="1.5"/>
<path d="M6 8L8.1589 9.79908C9.99553 11.3296 10.9139 12.0949 12 12.0949C13.0861 12.0949 14.0045 11.3296 15.8411 9.79908L18 8" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 605 B

26
src/lib/components/CardButton.svelte
View File

@@ -2,19 +2,21 @@
import Icon from "@lib/components/Icon.svelte"
</script>
<div class="btn btn-neutral btn-lg h-24 w-full text-left">
<div class="flex w-full flex-row items-center justify-between gap-2 {$$props.class}">
<div class="flex items-center gap-6">
<div class="center w-12">
<slot name="icon" />
</div>
<div class="flex flex-grow flex-col gap-2">
<p class="text-bold"><slot name="title" /></p>
<p class="text-xs"><slot name="info" /></p>
</div>
<div class="btn btn-neutral h-[unset] flex flex-nowrap w-full text-left py-4 {$$props.class}">
<div class="flex flex-row items-start gap-1 flex-grow">
<div class="w-12 h-14 flex items-center flex-shrink-0">
<slot name="icon" />
</div>
<div class="center w-12">
<Icon size={7} icon="alt-arrow-right" />
<div class="flex flex-col gap-1">
<p class="text-lg text-bold pt-2">
<slot name="title" />
</p>
<p class="text-sm">
<slot name="info" />
</p>
</div>
</div>
<div class="w-14 h-14 flex items-center justify-end">
<Icon size={7} icon="alt-arrow-right" />
</div>
</div>

6
src/lib/components/Divider.svelte
View File

@@ -1,5 +1,7 @@
<div class="flex items-center gap-2 p-2 text-xs uppercase opacity-50">
<div class="h-px flex-grow bg-base-content opacity-25" />
<p><slot /></p>
<div class="h-px flex-grow bg-base-content opacity-25" />
{#if $$slots.default}
<p><slot /></p>
<div class="h-px flex-grow bg-base-content opacity-25" />
{/if}
</div>

2
src/lib/components/Icon.svelte
View File

@@ -48,6 +48,7 @@
import InfoSquare from "@assets/icons/Info Square.svg?dataurl"
import Key from "@assets/icons/Key.svg?dataurl"
import KeyMinimalisticSquare3 from "@assets/icons/Key Minimalistic Square 3.svg?dataurl"
import Letter from "@assets/icons/Letter.svg?dataurl"
import LinkRound from "@assets/icons/Link Round.svg?dataurl"
import Login from "@assets/icons/Login.svg?dataurl"
import Login2 from "@assets/icons/Login 2.svg?dataurl"
@@ -123,6 +124,7 @@
"info-square": InfoSquare,
key: Key,
"key-minimalistic-square-3": KeyMinimalisticSquare3,
letter: Letter,
"link-round": LinkRound,
login: Login,
"login-2": Login2,

2
src/lib/components/Page.svelte
View File

@@ -1,3 +1,3 @@
<div class="scroll-container max-h-screen flex-grow overflow-auto bg-base-200 pb-14 md:pb-0">
<div class="scroll-container max-h-screen flex-grow overflow-auto bg-base-200 pb-14 md:pb-0 {$$props.class}">
<slot />
</div>

4
src/lib/html.ts
View File

@@ -34,7 +34,9 @@ export const createScroller = ({
let done = false
const check = async () => {
const container = element.closest(".scroll-container")
const container = element.classList.contains('scroll-container')
? element
: element.closest(".scroll-container")
if (container) {
// While we have empty space, fill it

18
src/routes/home/+layout.svelte → src/routes/chat/+layout.svelte
View File

@@ -15,6 +15,7 @@
import ChatStart from "@app/components/ChatStart.svelte"
import ChatItem from "@app/components/ChatItem.svelte"
import {chatSearch, pullConservatively} from "@app/state"
import {makeChatPath} from "@app/routes"
import {pushModal} from "@app/modal"
const startChat = () => pushModal(ChatStart)
@@ -22,6 +23,7 @@
let term = ""
$: chats = $chatSearch.searchOptions(term).filter(c => c.pubkeys.length > 1)
$: notesPath = makeChatPath([$pubkey!])
onMount(() => {
const filter = {kinds: [WRAP], "#p": [$pubkey!]}
@@ -37,21 +39,11 @@
<SecondaryNav>
<SecondaryNavSection>
<div in:fly>
<SecondaryNavItem href="/home/people">
<Icon icon="user-heart" /> People
</SecondaryNavItem>
</div>
<div in:fly={{delay: 50}}>
<SecondaryNavItem href="/home/network">
<Icon icon="share-circle" /> Network
</SecondaryNavItem>
</div>
<div in:fly={{delay: 100}}>
<SecondaryNavItem href="/home/notes">
<SecondaryNavItem href={notesPath}>
<Icon icon="notes-minimalistic" /> Your Notes
</SecondaryNavItem>
</div>
<div in:fly={{delay: 150}}>
<div in:fly={{delay: 50}}>
<SecondaryNavHeader>
Chats
<Button on:click={startChat}>
@@ -62,7 +54,7 @@
</SecondaryNavSection>
<label
class="input input-sm input-bordered mx-6 -mt-4 mb-2 flex items-center gap-2"
in:fly={{delay: 200}}>
in:fly={{delay: 100}}>
<Icon icon="magnifer" />
<input bind:value={term} class="grow" type="text" />
</label>

42
src/routes/home/chats/+page.svelte → src/routes/chat/+page.svelte
View File

@@ -3,7 +3,6 @@
import {ctx, ago} from "@welshman/lib"
import {WRAP} from "@welshman/util"
import {pubkey, subscribe} from "@welshman/app"
import {fly} from "@lib/transition"
import Icon from "@lib/components/Icon.svelte"
import Button from "@lib/components/Button.svelte"
import ChatItem from "@app/components/ChatItem.svelte"
@@ -30,9 +29,20 @@
})
</script>
<div class="content column gap-2">
<div class="row-2 min-w-0 items-center">
<label class="input input-bordered flex flex-grow items-center gap-2" in:fly={{delay: 250}}>
<div class="min-h-screen hidden md:hero">
<div class="hero-content col-2 text-center">
<p class="row-2 text-lg">
<Icon icon="info-circle" />
No conversation selected.
</p>
<p>
Click on a conversation in the sidebar, or <Button class="link" on:click={startChat}>start a new one</Button>.
</p>
</div>
</div>
<div class="content col-2">
<div class="row-2 min-w-0 items-center flex-grow">
<label class="input input-bordered flex flex-grow items-center gap-2">
<Icon icon="magnifer" />
<input bind:value={term} class="grow" type="text" placeholder="Search for conversations..." />
</label>
@@ -40,17 +50,15 @@
<Icon icon="add-circle" />
</Button>
</div>
<div class="column gap-2 overflow-auto">
{#each chats as { id, pubkeys, messages } (id)}
<ChatItem {id} {pubkeys} {messages} />
{:else}
<div class="py-20 max-w-sm col-4 items-center m-auto text-center">
<p>No chats found! Try starting one up.</p>
<Button class="btn btn-primary" on:click={startChat}>
<Icon icon="add-circle" />
Start a Chat
</Button>
</div>
{/each}
</div>
{#each chats as { id, pubkeys, messages } (id)}
<ChatItem {id} {pubkeys} {messages} class="bg-alt card2" />
{:else}
<div class="py-20 max-w-sm col-4 items-center m-auto text-center">
<p>No chats found! Try starting one up.</p>
<Button class="btn btn-primary" on:click={startChat}>
<Icon icon="add-circle" />
Start a Chat
</Button>
</div>
{/each}
</div>

0
src/routes/home/[chat]/+page.svelte → src/routes/chat/[chat]/+page.svelte
View File

4
src/routes/home/+page.svelte
View File

@@ -12,7 +12,7 @@
const startChat = () => pushModal(ChatStart)
</script>
<div class="hero min-h-screen bg-base-200">
<div class="hero min-h-screen">
<div class="hero-content">
<div class="column content gap-4">
<h1 class="text-center text-5xl">Welcome to</h1>
@@ -32,7 +32,7 @@
<div slot="info">Find a community based on your hobbies or interests.</div>
</CardButton>
</Link>
<Link href="/home/people">
<Link href="/people">
<CardButton>
<div slot="icon"><Icon icon="plain" size={7} /></div>
<div slot="title">Browse the network</div>

53
src/routes/home/network/+page.svelte → src/routes/network/+page.svelte
View File

@@ -14,6 +14,7 @@
import {deriveEvents} from "@welshman/store"
import {repository, userFollows, load} from "@welshman/app"
import Link from "@lib/components/Link.svelte"
import Page from "@lib/components/Page.svelte"
import Icon from "@lib/components/Icon.svelte"
import Spinner from "@lib/components/Spinner.svelte"
import NoteCard from "@app/components/NoteCard.svelte"
@@ -59,7 +60,7 @@
const scroller = createScroller({
element,
onScroll: () => {
onScroll: async () => {
const seen = new Set(events.map(e => e.id))
const eligible = sortBy(
scoreEvent,
@@ -74,28 +75,30 @@
})
</script>
<div class="content column gap-4" bind:this={element}>
{#await loading}
<div class="center my-20">
<Spinner loading>Loading posts from people you follow...</Spinner>
</div>
{:then}
<div class="flex flex-col gap-2">
{#each events as event (event.id)}
<NoteCard {event} class="card2 bg-alt w-full">
<div class="ml-12">
<Content {event} />
<Page>
<div class="content column gap-4" bind:this={element}>
{#await loading}
<div class="center my-20">
<Spinner loading>Loading posts from people you follow...</Spinner>
</div>
{:then}
<div class="flex flex-col gap-2">
{#each events as event (event.id)}
<NoteCard {event} class="card2 bg-alt w-full">
<div class="ml-12">
<Content {event} />
</div>
</NoteCard>
{:else}
<div class="py-20 max-w-sm col-4 items-center m-auto text-center">
<p>No activity found! Try following a few more people.</p>
<Link class="btn btn-primary" href="/people">
<Icon icon="user-heart" />
Browse Profiles
</Link>
</div>
</NoteCard>
{:else}
<div class="py-20 max-w-sm col-4 items-center m-auto text-center">
<p>No activity found! Try following a few more people.</p>
<Link class="btn btn-primary" href="/home/people">
<Icon icon="user-heart" />
Browse Profiles
</Link>
</div>
{/each}
</div>
{/await}
</div>
{/each}
</div>
{/await}
</div>
</Page>

9
src/routes/home/people/+page.svelte → src/routes/people/+page.svelte
View File

@@ -3,6 +3,7 @@
import {createScroller} from "@lib/html"
import {profileSearch} from "@welshman/app"
import Icon from "@lib/components/Icon.svelte"
import Page from "@lib/components/Page.svelte"
import PeopleItem from "@app/components/PeopleItem.svelte"
import {getDefaultPubkeys} from "@app/state"
@@ -26,16 +27,14 @@
})
</script>
<div class="m-auto w-full max-w-3xl column content-t" bind:this={element}>
<div class="content-x flex-grow">
<Page>
<div class="content col-2" bind:this={element}>
<label class="input input-bordered flex w-full items-center gap-2">
<Icon icon="magnifer" />
<input bind:value={term} class="grow" type="text" placeholder="Search for people..." />
</label>
</div>
<div class="content-b content-x flex flex-col gap-2 overflow-auto pt-2">
{#each pubkeys.slice(0, limit) as pubkey (pubkey)}
<PeopleItem {pubkey} />
{/each}
</div>
</div>
</Page>

2
src/routes/settings/about/+page.svelte
View File

@@ -29,7 +29,7 @@
<p class="sm:h-16">Having problems? Let us know.</p>
<Link
class="btn btn-primary"
href="/home/97c70a44366a6535c145b333f973ea86dfdc2d7a99da618c40c64705ad98e322">
href="/chat/97c70a44366a6535c145b333f973ea86dfdc2d7a99da618c40c64705ad98e322">
Chat with the Developer
</Link>
</div>