mirror of
https://github.com/coracle-social/coracle.git
synced 2024-09-29 08:21:20 +00:00
Add feed sidebar
This commit is contained in:
parent
54663d8062
commit
b0107bf89b
@ -1,4 +1,7 @@
|
||||
<script lang="ts">
|
||||
import cx from 'classnames'
|
||||
import {equals} from 'ramda'
|
||||
import {fly} from 'src/util/transition'
|
||||
import {toggleTheme, theme} from "src/partials/state"
|
||||
import MenuItem from "src/partials/MenuItem.svelte"
|
||||
import FlexColumn from "src/partials/FlexColumn.svelte"
|
||||
@ -7,8 +10,9 @@
|
||||
import PersonHandle from "src/app/shared/PersonHandle.svelte"
|
||||
import MenuDesktopItem from "src/app/MenuDesktopItem.svelte"
|
||||
import MenuDesktopSecondary from "src/app/MenuDesktopSecondary.svelte"
|
||||
import {slowConnections} from "src/app/state"
|
||||
import {feed, slowConnections} from "src/app/state"
|
||||
import {router} from "src/app/util/router"
|
||||
import {feedFromEvent} from 'src/domain'
|
||||
import {
|
||||
env,
|
||||
user,
|
||||
@ -19,8 +23,11 @@
|
||||
sessions,
|
||||
displayPerson,
|
||||
displayPubkey,
|
||||
userFeeds,
|
||||
} from "src/engine"
|
||||
|
||||
const {page} = router
|
||||
|
||||
const closeSubMenu = () => {
|
||||
subMenu = null
|
||||
}
|
||||
@ -35,9 +42,27 @@
|
||||
}
|
||||
|
||||
let subMenu
|
||||
|
||||
$: isFeedPage = $page.path === "/notes"
|
||||
</script>
|
||||
|
||||
<div class="fixed bottom-0 left-0 top-0 z-nav w-72 bg-tinted-700 transition-colors">
|
||||
{#if isFeedPage && $userFeeds.length > 0}
|
||||
<div in:fly={{x: -100, duration: 200}} class="fixed bottom-0 left-72 top-0 w-60 bg-tinted-700 transition-colors text-lg pt-[5.75rem]">
|
||||
{#each $userFeeds as event}
|
||||
{@const thisFeed = feedFromEvent(event)}
|
||||
<MenuDesktopItem isActive={equals(thisFeed.data, $feed)} on:click={() => feed.set(thisFeed.data)}>
|
||||
{thisFeed.name}
|
||||
</MenuDesktopItem>
|
||||
{/each}
|
||||
<div class="absolute bottom-0 w-full px-7 py-4 h-20 staatliches">
|
||||
<Anchor href="/feeds">Manage Feeds</Anchor>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div
|
||||
class="fixed bottom-0 left-0 top-0 z-nav w-72 bg-tinted-700 transition-colors"
|
||||
class:bg-tinted-800={isFeedPage}>
|
||||
<Anchor external class="mb-4 mt-4 flex items-center gap-2 px-6" href="https://coracle.tools">
|
||||
<img
|
||||
alt="App Logo"
|
||||
@ -45,9 +70,9 @@
|
||||
? import.meta.env.VITE_APP_WORDMARK_DARK
|
||||
: import.meta.env.VITE_APP_WORDMARK_LIGHT} />
|
||||
</Anchor>
|
||||
<MenuDesktopItem path="/notes">Feed</MenuDesktopItem>
|
||||
<MenuDesktopItem path="/notes" isActive={$page.path.startsWith("/notes")} isAlt={isFeedPage}>Feed</MenuDesktopItem>
|
||||
{#if !$env.FORCE_GROUP && $env.PLATFORM_RELAYS.length === 0}
|
||||
<MenuDesktopItem path="/settings/relays">
|
||||
<MenuDesktopItem path="/settings/relays" isActive={$page.path.startsWith("/settings/relays")} isAlt={isFeedPage}>
|
||||
<div class="relative inline-block">
|
||||
Relays
|
||||
{#if $slowConnections.length > 0}
|
||||
@ -56,7 +81,7 @@
|
||||
</div>
|
||||
</MenuDesktopItem>
|
||||
{/if}
|
||||
<MenuDesktopItem path="/notifications" disabled={!$canSign}>
|
||||
<MenuDesktopItem path="/notifications" disabled={!$canSign} isActive={$page.path.startsWith("/notifications")} isAlt={isFeedPage}>
|
||||
<div class="relative inline-block">
|
||||
Notifications
|
||||
{#if $hasNewNotifications}
|
||||
@ -64,7 +89,7 @@
|
||||
{/if}
|
||||
</div>
|
||||
</MenuDesktopItem>
|
||||
<MenuDesktopItem path="/channels" disabled={!$canSign}>
|
||||
<MenuDesktopItem path="/channels" disabled={!$canSign} isActive={$page.path.startsWith("/channels")} isAlt={isFeedPage}>
|
||||
<div class="relative inline-block">
|
||||
Messages
|
||||
{#if $hasNewMessages}
|
||||
@ -72,12 +97,12 @@
|
||||
{/if}
|
||||
</div>
|
||||
</MenuDesktopItem>
|
||||
<MenuDesktopItem path="/events">Calendar</MenuDesktopItem>
|
||||
<MenuDesktopItem path="/events" isActive={$page.path.startsWith("/events")} isAlt={isFeedPage}>Calendar</MenuDesktopItem>
|
||||
{#if $env.ENABLE_MARKET}
|
||||
<MenuDesktopItem path="/listings">Market</MenuDesktopItem>
|
||||
<MenuDesktopItem path="/listings" isActive={$page.path.startsWith("/listings")} isAlt={isFeedPage}>Market</MenuDesktopItem>
|
||||
{/if}
|
||||
{#if !$env.FORCE_GROUP}
|
||||
<MenuDesktopItem path="/groups">Groups</MenuDesktopItem>
|
||||
<MenuDesktopItem path="/groups" isActive={$page.path.startsWith("/groups")} isAlt={isFeedPage}>Groups</MenuDesktopItem>
|
||||
{/if}
|
||||
<FlexColumn small class="absolute bottom-0 w-72">
|
||||
<Anchor
|
||||
@ -160,7 +185,7 @@
|
||||
</MenuItem>
|
||||
</MenuDesktopSecondary>
|
||||
{/if}
|
||||
<div class="cursor-pointer border-t border-solid border-neutral-600 px-7 pb-4 pt-3">
|
||||
<div class="cursor-pointer border-t border-solid border-neutral-600 px-7 py-4 h-20">
|
||||
{#if $pubkey}
|
||||
<Anchor class="flex items-center gap-2" on:click={() => setSubMenu("account")}>
|
||||
<PersonCircle class="h-10 w-10" pubkey={$pubkey} />
|
||||
|
@ -3,28 +3,26 @@
|
||||
import {elasticOut} from "svelte/easing"
|
||||
import {fly} from "src/util/transition"
|
||||
import Anchor from "src/partials/Anchor.svelte"
|
||||
import {router} from "src/app/util/router"
|
||||
|
||||
export let path = null
|
||||
export let isAlt = false
|
||||
export let isActive = false
|
||||
|
||||
const {page} = router
|
||||
|
||||
$: isActive = path && $page?.path.startsWith(path)
|
||||
|
||||
$: className = cx("relative staatliches h-12 block transition-all", {
|
||||
$: className = cx("relative staatliches h-12 block transition-all", $$props.class, {
|
||||
"text-3xl text-accent": isActive,
|
||||
"text-2xl text-tinted-400 hover:text-tinted-100 hover:bg-tinted-800":
|
||||
!isActive,
|
||||
"text-2xl text-tinted-400 hover:text-tinted-100": !isActive,
|
||||
"hover:bg-tinted-800": !isActive && !isAlt,
|
||||
"hover:bg-tinted-700": !isActive && isAlt,
|
||||
})
|
||||
</script>
|
||||
|
||||
<Anchor {...$$props} randomizeKey class={className} href={path} on:click>
|
||||
<div class="absolute left-8 flex gap-5 whitespace-nowrap pt-2" class:-right-6={isActive}>
|
||||
<div class="absolute left-6 flex gap-5 whitespace-nowrap pt-2" class:-right-6={isActive}>
|
||||
<slot />
|
||||
{#if isActive}
|
||||
<div
|
||||
in:fly|local={{x: 50, duration: 1000, easing: elasticOut}}
|
||||
class="relative top-4 h-px w-full bg-accent" />
|
||||
class="relative top-4 h-px w-full bg-accent mr-3" />
|
||||
{/if}
|
||||
</div>
|
||||
</Anchor>
|
||||
|
@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import cx from 'classnames'
|
||||
import {reverse} from "ramda"
|
||||
import logger from "src/util/logger"
|
||||
import Modal from "src/partials/Modal.svelte"
|
||||
@ -57,8 +58,11 @@
|
||||
{#key $stateKey}
|
||||
<div
|
||||
id="page"
|
||||
class="relative pb-32 text-neutral-100 lg:ml-60 lg:pt-16"
|
||||
class:pointer-events-none={$menuIsOpen}>
|
||||
class={cx("relative pb-32 text-neutral-100 lg:pt-16", {
|
||||
'lg:ml-60': $page?.path !== "/notes",
|
||||
'lg:ml-[33rem]': $page?.path === "/notes",
|
||||
'pointer-events-none': $menuIsOpen,
|
||||
})}>
|
||||
{#if $page}
|
||||
{@const promise = router.getMatch($page.path).route.component}
|
||||
{#key router.getKey($page)}
|
||||
|
@ -53,6 +53,7 @@
|
||||
|
||||
const update = async opts => {
|
||||
limit = 0
|
||||
feed = opts.feed
|
||||
start(opts)
|
||||
|
||||
if (feedLoader.compiler.canCompile(opts.feed)) {
|
||||
|
@ -3,6 +3,7 @@ import {uniq} from "ramda"
|
||||
import {hash} from "hurdak"
|
||||
import {writable} from "@welshman/lib"
|
||||
import {ConnectionStatus, NetworkContext} from "@welshman/net"
|
||||
import type {Feed} from "@welshman/feeds"
|
||||
import {warn} from "src/util/logger"
|
||||
import {userKinds} from "src/util/nostr"
|
||||
import {router} from "src/app/util/router"
|
||||
@ -29,6 +30,8 @@ export const menuIsOpen = writable(false)
|
||||
|
||||
export const searchTerm = writable("")
|
||||
|
||||
export const feed = writable<Feed>(null)
|
||||
|
||||
// Redact long strings, especially hex and bech32 keys which are 64 and 63
|
||||
// characters long, respectively. Put the threshold a little lower in case
|
||||
// someone accidentally enters a key with the last few digits missing
|
||||
|
@ -1,17 +1,18 @@
|
||||
<script lang="ts">
|
||||
import {Scope, makeScopeFeed, makeRelayFeed, makeIntersectionFeed} from "@welshman/feeds"
|
||||
import type {Feed as TFeed} from "@welshman/feeds"
|
||||
import Anchor from "src/partials/Anchor.svelte"
|
||||
import Feed from "src/app/shared/Feed.svelte"
|
||||
import {router} from "src/app/util/router"
|
||||
import {feed} from 'src/app/state'
|
||||
import {session} from "src/engine"
|
||||
|
||||
export let relays = []
|
||||
export let feed: TFeed = makeScopeFeed(Scope.Follows)
|
||||
|
||||
if (relays.length > 0) {
|
||||
feed = makeIntersectionFeed(makeRelayFeed(...relays), feed)
|
||||
}
|
||||
feed.set(
|
||||
relays.length > 0
|
||||
? makeIntersectionFeed(makeRelayFeed(...relays), makeScopeFeed(Scope.Follows))
|
||||
: makeScopeFeed(Scope.Follows)
|
||||
)
|
||||
|
||||
const showLogin = () => router.at("login").open()
|
||||
|
||||
@ -27,4 +28,4 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<Feed skipCache showControls showGroup {feed} />
|
||||
<Feed skipCache showControls showGroup bind:feed={$feed} />
|
||||
|
Loading…
Reference in New Issue
Block a user