coracle/flotilla
1
3
Fork 9
Code Issues 31 Pull Requests 1 Actions Packages Projects 5 Releases Wiki Activity

Add remove group, format

Browse Source
This commit is contained in:
Jon Staab
2024-08-16 10:50:38 -07:00
parent 437cfa7bc4
commit bd8fcd3264
51 changed files with 800 additions and 435 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/+layout.svelte
+8 -8
View File
@@ -1,8 +1,8 @@
<script lang="ts">
import "@src/app.css"
import {onMount} from 'svelte'
import {onMount} from "svelte"
import {page} from "$app/stores"
import {createEventStore} from '@welshman/store'
import {createEventStore} from "@welshman/store"
import {fly} from "@lib/transition"
import ModalBox from "@lib/components/ModalBox.svelte"
import Toast from "@app/components/Toast.svelte"
@@ -38,20 +38,20 @@
onMount(() => {
ready = initStorage({
events: {
keyPath: 'id',
keyPath: "id",
store: createEventStore(repository),
},
relays: {
keyPath: 'url',
keyPath: "url",
store: relays,
},
handles: {
keyPath: 'nip05',
keyPath: "nip05",
store: handles,
},
})
dialog.addEventListener('close', () => {
dialog.addEventListener("close", () => {
if (modal) {
clearModal()
}
@@ -66,11 +66,11 @@
<div class="flex h-screen">
<PrimaryNav />
<SecondaryNav />
<div class="flex-grow bg-base-200 max-h-screen overflow-auto">
<div class="max-h-screen flex-grow overflow-auto bg-base-200">
<slot />
</div>
</div>
<dialog bind:this={dialog} class="modal modal-bottom sm:modal-middle !z-modal">
<dialog bind:this={dialog} class="modal modal-bottom !z-modal sm:modal-middle">
{#if prev}
{#key prev}
<ModalBox {...prev} />
src/routes/home/+page.svelte
+8 -8
View File
@@ -1,8 +1,8 @@
<script lang="ts">
import {goto} from '$app/navigation'
import {goto} from "$app/navigation"
import CardButton from "@lib/components/CardButton.svelte"
import SpaceCreate from '@app/components/SpaceCreate.svelte'
import {pushModal} from '@app/modal'
import SpaceCreate from "@app/components/SpaceCreate.svelte"
import {pushModal} from "@app/modal"
const createSpace = () => pushModal(SpaceCreate)
@@ -14,18 +14,18 @@
<div class="column content gap-4">
<h1 class="text-center text-5xl">Welcome to</h1>
<h1 class="mb-4 text-center text-5xl font-bold uppercase">Flotilla</h1>
<div class="grid lg:grid-cols-2 gap-3">
<div class="grid gap-3 lg:grid-cols-2">
<CardButton icon="add-circle" title="Create a space" class="h-24" on:click={createSpace}>
Invite all your friends, do life together.
Invite all your friends, do life together.
</CardButton>
<CardButton icon="compass" title="Discover spaces" class="h-24" on:click={browseSpaces}>
Find a community based on your hobbies or interests.
Find a community based on your hobbies or interests.
</CardButton>
<CardButton icon="plain" title="Leave feedback" class="h-24">
Let us know how we can improve by giving us feedback.
Let us know how we can improve by giving us feedback.
</CardButton>
<CardButton icon="hand-pills" title="Donate to Flotilla" class="h-24">
Support the project by donating to the developer.
Support the project by donating to the developer.
</CardButton>
</div>
</div>
src/routes/spaces/+page.svelte
+29 -17
View File
@@ -1,12 +1,12 @@
<script lang="ts">
import {onMount} from 'svelte'
import Masonry from 'svelte-bricks'
import {append, remove} from '@welshman/lib'
import {GROUP_META, displayRelayUrl} from '@welshman/util'
import Icon from '@lib/components/Icon.svelte'
import {makeSpacePath} from '@app/routes'
import {load, relays, groups, searchGroups, relayUrlsByNom, userMembership} from '@app/state'
import {updateGroupMemberships} from '@app/commands'
import {onMount} from "svelte"
import Masonry from "svelte-bricks"
import {append, remove} from "@welshman/lib"
import {GROUP_META, displayRelayUrl} from "@welshman/util"
import Icon from "@lib/components/Icon.svelte"
import {makeSpacePath} from "@app/routes"
import {load, relays, groups, searchGroups, relayUrlsByNom, userMembership} from "@app/state"
import {addGroupMemberships} from "@app/commands"
const getRelayUrls = (nom: string): string[] => $relayUrlsByNom.get(nom) || []
@@ -23,14 +23,24 @@
<div class="content column gap-4">
<h1 class="superheading mt-20">Discover Spaces</h1>
<p class="text-center">Find communities all across the nostr network</p>
<label class="input input-bordered w-full flex items-center gap-2">
<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 spaces..." />
</label>
<Masonry animate={false} items={$searchGroups.searchOptions(term)} minColWidth={250} maxColWidth={800} gap={16} idKey="nom" let:item={group}>
<a href={makeSpacePath(group.nom)} class="card bg-base-100 shadow-xl hover:shadow-2xl hover:brightness-[1.1] transition-all">
<div class="avatar center mt-8">
<div class="w-20 rounded-full bg-base-300 border-2 border-solid border-base-300 !flex center relative">
<Masonry
animate={false}
items={$searchGroups.searchOptions(term)}
minColWidth={250}
maxColWidth={800}
gap={16}
idKey="nom"
let:item={group}>
<a
href={makeSpacePath(group.nom)}
class="card bg-base-100 shadow-xl transition-all hover:shadow-2xl hover:brightness-[1.1]">
<div class="center avatar mt-8">
<div
class="center relative !flex w-20 rounded-full border-2 border-solid border-base-300 bg-base-300">
{#if group?.picture}
<img alt="" src={group.picture} />
{:else}
@@ -39,20 +49,22 @@
</div>
</div>
{#if $userMembership?.noms.has(group.nom)}
<div class="absolute flex center w-full">
<div class="bg-primary rounded-full relative top-[38px] left-8 tooltip" data-tip="You are already a member of this space.">
<div class="center absolute flex w-full">
<div
class="tooltip relative left-8 top-[38px] rounded-full bg-primary"
data-tip="You are already a member of this space.">
<Icon icon="check-circle" class="scale-110" />
</div>
</div>
{/if}
<div class="card-body">
<h2 class="card-title justify-center">{group.name}</h2>
<div class="text-sm text-center">
<div class="text-center text-sm">
{#each getRelayUrls(group.nom) as url}
<div class="badge badge-neutral">{displayRelayUrl(url)}</div>
{/each}
</div>
<p class="text-sm py-4">{group.about}</p>
<p class="py-4 text-sm">{group.about}</p>
</div>
</a>
</Masonry>
src/routes/spaces/[nom]/+page.svelte
+21 -24
View File
@@ -1,22 +1,22 @@
<script lang="ts">
import {sleep, sortBy} from '@welshman/lib'
import type {CustomEvent} from '@welshman/util'
import {page} from '$app/stores'
import {fly} from '@lib/transition'
import {formatTimestampAsDate} from '@lib/util'
import Spinner from '@lib/components/Spinner.svelte'
import Avatar from '@lib/components/Avatar.svelte'
import GroupNote from '@app/components/GroupNote.svelte'
import {deriveGroup, deriveGroupConversation} from '@app/state'
import {sleep, sortBy} from "@welshman/lib"
import type {CustomEvent} from "@welshman/util"
import {page} from "$app/stores"
import {fly} from "@lib/transition"
import {formatTimestampAsDate} from "@lib/util"
import Spinner from "@lib/components/Spinner.svelte"
import Avatar from "@lib/components/Avatar.svelte"
import GroupNote from "@app/components/GroupNote.svelte"
import {deriveGroup, deriveGroupConversation} from "@app/state"
const group = deriveGroup($page.params.nom)
const conversation = deriveGroupConversation($page.params.nom)
$: group = deriveGroup($page.params.nom)
$: conversation = deriveGroupConversation($page.params.nom)
const assertEvent = (e: any) => e as CustomEvent
type Element = {
id: string
type: 'date' | 'note',
type: "date" | "note"
value: string | CustomEvent
showPubkey: boolean
}
@@ -35,12 +35,12 @@
const date = formatTimestampAsDate(created_at)
if (date !== previousDate) {
elements.push({type: 'date', value: date, id: date, showPubkey: false})
elements.push({type: "date", value: date, id: date, showPubkey: false})
}
elements.push({
id,
type: 'note',
type: "note",
value: event,
showPubkey: date !== previousDate || previousPubkey !== pubkey,
})
@@ -57,13 +57,12 @@
}, 3000)
</script>
<div class="h-screen flex flex-col">
<div class="min-h-24 bg-base-100 shadow-xl">
</div>
<div class="flex-grow overflow-auto flex flex-col-reverse gap-2 p-2">
{#each elements as {type, id, value, showPubkey} (id)}
<div class="flex h-screen flex-col">
<div class="min-h-24 bg-base-100 shadow-xl"></div>
<div class="flex flex-grow flex-col-reverse overflow-auto">
{#each elements as { type, id, value, showPubkey } (id)}
{#if type === "date"}
<div class="flex gap-2 items-center text-xs opacity-50">
<div class="flex items-center gap-2 py-2 text-xs opacity-50">
<div class="h-px flex-grow bg-base-content" />
<p>{value}</p>
<div class="h-px flex-grow bg-base-content" />
@@ -72,7 +71,7 @@
<GroupNote event={assertEvent(value)} {showPubkey} />
{/if}
{/each}
<p class="flex justify-center items-center py-20 h-10">
<p class="flex h-10 items-center justify-center py-20">
<Spinner {loading}>
{#if loading}
Looking for messages...
@@ -82,7 +81,5 @@
</Spinner>
</p>
</div>
<div class="min-h-32 bg-base-100 shadow-top-xl">
</div>
<div class="shadow-top-xl min-h-32 bg-base-100"></div>
</div>
src/routes/themes/+page.svelte
+8 -7
View File
@@ -1,9 +1,9 @@
<script lang="ts">
import themes from "daisyui/src/theming/themes"
import {identity} from '@welshman/lib'
import {createSearch} from '@lib/util'
import {identity} from "@welshman/lib"
import {createSearch} from "@lib/util"
import Icon from "@lib/components/Icon.svelte"
import {theme} from '@app/theme'
import {theme} from "@app/theme"
let term = ""
@@ -13,17 +13,18 @@
<div class="content column gap-4">
<h1 class="superheading mt-20">Discover Themes</h1>
<p class="text-center">Make your community feel like home</p>
<label class="input input-bordered w-full flex items-center gap-2">
<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 themes..." />
</label>
<div class="grid grid-cols-2 md:grid-cols-2 gap-4">
<div class="grid grid-cols-2 gap-4 md:grid-cols-2">
{#each searchThemes.searchValues(term) as name}
<div class="card bg-base-100 shadow-xl" data-theme={name}>
<div class="card-body">
<h2 class="card-title justify-center capitalize card2">{name}</h2>
<h2 class="card2 card-title justify-center capitalize">{name}</h2>
<div class="card-actions">
<button class="btn btn-primary w-full" on:click={() => theme.set(name)}>Use Theme</button>
<button class="btn btn-primary w-full" on:click={() => theme.set(name)}
>Use Theme</button>
</div>
</div>
</div>