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

Switch space cards to links without buttons

Browse Source
This commit is contained in:
Jon Staab
2024-08-15 12:25:22 -07:00
parent ae0450d408
commit 184634c6e8
1 changed files with 11 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/routes/spaces/+page.svelte
View File

@@ -4,26 +4,13 @@
import {append, remove} from '@welshman/lib' import {append, remove} from '@welshman/lib'
import {GROUP_META, displayRelayUrl} from '@welshman/util' import {GROUP_META, displayRelayUrl} from '@welshman/util'
import Icon from '@lib/components/Icon.svelte' import Icon from '@lib/components/Icon.svelte'
import Button from '@lib/components/Button.svelte'
import Spinner from '@lib/components/Spinner.svelte'
import {makeSpacePath} from '@app/routes' import {makeSpacePath} from '@app/routes'
import {load, relays, groups, searchGroups, relayUrlsByNom, userMembership} from '@app/state' import {load, relays, groups, searchGroups, relayUrlsByNom, userMembership} from '@app/state'
import {updateGroupMemberships} from '@app/commands' import {updateGroupMemberships} from '@app/commands'
const getRelayUrls = (nom: string): string[] => $relayUrlsByNom.get(nom) || [] const getRelayUrls = (nom: string): string[] => $relayUrlsByNom.get(nom) || []
const join = async (nom: string) => {
loading = append(nom, loading)
try {
await updateGroupMemberships(getRelayUrls(nom).map(url => ["group", nom, url]))
} finally {
loading = remove(nom, loading)
}
}
let term = "" let term = ""
let loading: string[] = []
onMount(() => { onMount(() => {
load({ load({
@@ -41,9 +28,9 @@
<input bind:value={term} class="grow" type="text" placeholder="Search for spaces..." /> <input bind:value={term} class="grow" type="text" placeholder="Search for spaces..." />
</label> </label>
<Masonry animate={false} items={$searchGroups.searchOptions(term)} minColWidth={250} maxColWidth={800} gap={16} idKey="nom" let:item={group}> <Masonry animate={false} items={$searchGroups.searchOptions(term)} minColWidth={250} maxColWidth={800} gap={16} idKey="nom" let:item={group}>
<div class="card bg-base-100 shadow-xl"> <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="avatar center mt-8">
<div class="w-20 rounded-full bg-base-300 border-2 border-solid border-base-300 !flex center"> <div class="w-20 rounded-full bg-base-300 border-2 border-solid border-base-300 !flex center relative">
{#if group?.picture} {#if group?.picture}
<img alt="" src={group.picture} /> <img alt="" src={group.picture} />
{:else} {:else}
@@ -51,31 +38,22 @@
{/if} {/if}
</div> </div>
</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.">
<Icon icon="check-circle" class="scale-110" />
</div>
</div>
{/if}
<div class="card-body"> <div class="card-body">
<a href={makeSpacePath(group.nom)}> <h2 class="card-title justify-center">{group.name}</h2>
<h2 class="card-title justify-center">{group.name}</h2>
</a>
<div class="text-sm text-center"> <div class="text-sm text-center">
{#each getRelayUrls(group.nom) as url} {#each getRelayUrls(group.nom) as url}
<div class="badge badge-neutral">{displayRelayUrl(url)}</div> <div class="badge badge-neutral">{displayRelayUrl(url)}</div>
{/each} {/each}
</div> </div>
<p class="text-sm py-4">{group.about}</p> <p class="text-sm py-4">{group.about}</p>
<div class="card-actions">
<Button
class="btn btn-primary w-full"
disabled={loading.includes(group.nom) || $userMembership?.noms.has(group.nom)}
on:click={() => join(group.nom)}>
{#if $userMembership?.noms.has(group.nom)}
<Icon icon="check-circle" />
Joined
{:else}
<Spinner loading={loading.includes(group.nom)} />
Join Space
{/if}
</Button>
</div>
</div> </div>
</div> </a>
</Masonry> </Masonry>
</div> </div>