74 lines
2.4 KiB
Svelte
74 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import cx from "classnames"
|
|
import {displayRelayUrl} from "@welshman/util"
|
|
import {fly} from "@lib/transition"
|
|
import AltArrowDown from "@assets/icons/alt-arrow-down.svg?dataurl"
|
|
import BellOff from "@assets/icons/bell-off.svg?dataurl"
|
|
import Icon from "@lib/components/Icon.svelte"
|
|
import Button from "@lib/components/Button.svelte"
|
|
import Popover from "@lib/components/Popover.svelte"
|
|
import SpaceMenuMobile from "@app/components/SpaceMenuMobile.svelte"
|
|
import SpaceMenuActions from "@app/components/SpaceMenuActions.svelte"
|
|
import RelayName from "@app/components/RelayName.svelte"
|
|
import {deriveUserIsSpaceAdmin} from "@app/management"
|
|
import {deriveSpaceActionItems} from "@app/actionItems"
|
|
import {notificationSettings, deriveShouldNotify} from "@app/settings"
|
|
import {pushModal} from "@app/modal"
|
|
|
|
type Props = {
|
|
url: string
|
|
mobile?: boolean
|
|
}
|
|
|
|
const {url, mobile = false}: Props = $props()
|
|
|
|
const userIsAdmin = deriveUserIsSpaceAdmin(url)
|
|
const actionItems = deriveSpaceActionItems(url)
|
|
const shouldNotify = deriveShouldNotify(url)
|
|
|
|
const openMenu = () => {
|
|
if (mobile) {
|
|
pushModal(SpaceMenuMobile, {url})
|
|
} else {
|
|
showMenu = true
|
|
}
|
|
}
|
|
|
|
const toggleMenu = () => {
|
|
showMenu = !showMenu
|
|
}
|
|
|
|
let showMenu = $state(false)
|
|
</script>
|
|
|
|
<Button
|
|
class={cx(
|
|
mobile
|
|
? "space-menu__header-button text-content"
|
|
: "relative flex w-full flex-col rounded-xl p-3 transition-all hover:bg-surface",
|
|
)}
|
|
onclick={openMenu}>
|
|
<div class="flex items-center justify-between">
|
|
<strong class="flex items-center gap-1 relative">
|
|
<RelayName {url} class="truncate min-w-0" />
|
|
<div
|
|
class={cx(
|
|
"absolute -right-3 top-0 h-2 w-2 rounded-full bg-primary text-primary-content transition-all",
|
|
$userIsAdmin && $actionItems.length > 0 ? "opacity-100" : "opacity-0",
|
|
)}>
|
|
</div>
|
|
{#if $notificationSettings.push && !$shouldNotify}
|
|
<Icon icon={BellOff} size={3} class="opacity-50" />
|
|
{/if}
|
|
</strong>
|
|
<Icon icon={AltArrowDown} />
|
|
</div>
|
|
<span class="text-xs text-primary">{displayRelayUrl(url)}</span>
|
|
</Button>
|
|
{#if showMenu && !mobile}
|
|
<Popover hideOnClick onClose={toggleMenu}>
|
|
<ul transition:fly class="menu absolute z-popover mt-2 w-full gap-1 rounded-2xl bg-surface p-2">
|
|
<SpaceMenuActions {url} />
|
|
</ul>
|
|
</Popover>
|
|
{/if}
|