diff --git a/src/components/Editor/EditorBubbleMenu/EditorBubbleMenu.tsx b/src/components/Editor/EditorBubbleMenu/EditorBubbleMenu.tsx index d6f84659..1bcfde1f 100644 --- a/src/components/Editor/EditorBubbleMenu/EditorBubbleMenu.tsx +++ b/src/components/Editor/EditorBubbleMenu/EditorBubbleMenu.tsx @@ -57,7 +57,6 @@ export const EditorBubbleMenu = (props: BubbleMenuProps) => { } const handleLinkFormSubmit = (value: string) => { - console.log('!!! value:', value) props.editor.chain().focus().setLink({ href: value }).run() } diff --git a/src/components/Feed/Sidebar.module.scss b/src/components/Feed/Sidebar.module.scss deleted file mode 100644 index 718e56a2..00000000 --- a/src/components/Feed/Sidebar.module.scss +++ /dev/null @@ -1,83 +0,0 @@ -.sidebar { - max-height: calc(100vh - 120px); - overflow: auto; - position: sticky; - top: 120px; -} - -.sidebarItemName { - margin-right: 0.5em; - position: relative; - overflow: hidden; - text-overflow: ellipsis; -} - -.counter { - @include font-size(1.2rem); - align-items: center; - align-self: flex-start; - background: #f6f6f6; - border-radius: 0.8rem; - display: flex; - font-weight: bold; - justify-content: center; - min-width: 2em; - margin-left: 0.5em; - padding: 0.25em 0.5em 0.15em; - transition: background-color 0.2s; -} - -.unread { - position: relative; - - &::after { - background: #2638d9; - border-radius: 100%; - content: ''; - display: inline-block; - height: 0.5em; - left: 100%; - margin-left: 0.3em; - position: absolute; - top: 0.5em; - width: 0.5em; - } -} - -.settings { - display: flex; - justify-content: space-between; - margin-bottom: 2em; -} - -a { - img { - transition: filter 0.3s; - } - - &:hover { - img { - filter: invert(1); - } - - .counter { - background: #000; - } - } -} - -.icon { - display: inline-block; - line-height: 1; - height: 2rem; - margin-right: 0.5em; - vertical-align: middle; - width: 2.2rem; - - img { - height: 100%; - object-fit: contain; - object-position: center; - width: 100%; - } -} diff --git a/src/components/Feed/Sidebar.tsx b/src/components/Feed/Sidebar.tsx deleted file mode 100644 index 6c0d6771..00000000 --- a/src/components/Feed/Sidebar.tsx +++ /dev/null @@ -1,138 +0,0 @@ -import { For } from 'solid-js' -import type { Author } from '../../graphql/types.gen' -import { useAuthorsStore } from '../../stores/zine/authors' - -import { Icon } from '../_shared/Icon' -import { useTopicsStore } from '../../stores/zine/topics' -import { useArticlesStore } from '../../stores/zine/articles' -import { useSeenStore } from '../../stores/zine/seen' -import { useSession } from '../../context/session' -import styles from './Sidebar.module.scss' -import { useLocalize } from '../../context/localize' - -type FeedSidebarProps = { - authors: Author[] -} - -export const FeedSidebar = (props: FeedSidebarProps) => { - const { t } = useLocalize() - const { seen } = useSeenStore() - const { session } = useSession() - const { authorEntities } = useAuthorsStore({ authors: props.authors }) - const { articlesByTopic } = useArticlesStore() - const { topicEntities } = useTopicsStore() - - const checkTopicIsSeen = (topicSlug: string) => { - return articlesByTopic()[topicSlug]?.every((article) => Boolean(seen()[article.slug])) - } - - const checkAuthorIsSeen = (authorSlug: string) => { - return Boolean(seen()[authorSlug]) - } - - return ( -
- - - - -
- - - {t('Feed settings')} - -
-
- ) -} diff --git a/src/components/Feed/Sidebar/Sidebar.module.scss b/src/components/Feed/Sidebar/Sidebar.module.scss new file mode 100644 index 00000000..0cd74b44 --- /dev/null +++ b/src/components/Feed/Sidebar/Sidebar.module.scss @@ -0,0 +1,89 @@ +.sidebar { + max-height: calc(100vh - 120px); + overflow: auto; + position: sticky; + top: 120px; + + ul > li { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .sidebarItemName { + margin-right: 0.5em; + position: relative; + overflow: hidden; + text-overflow: ellipsis; + } + + .counter { + @include font-size(1.2rem); + align-items: center; + align-self: flex-start; + background: #f6f6f6; + border-radius: 0.8rem; + display: inline-flex; + font-weight: bold; + justify-content: center; + min-width: 2em; + margin-left: 0.5em; + padding: 0.25em 0.5em 0.15em; + transition: background-color 0.2s; + } + + .unread { + position: relative; + + &::after { + background: #2638d9; + border-radius: 100%; + content: ''; + display: inline-block; + height: 0.5em; + left: 100%; + margin-left: 0.3em; + position: absolute; + top: 0.5em; + width: 0.5em; + } + } + + .settings { + display: flex; + justify-content: space-between; + margin-bottom: 2em; + } + + a { + img { + transition: filter 0.3s; + } + + &:hover { + img { + filter: invert(1); + } + + .counter { + background: #000; + } + } + } + + .icon { + display: inline-block; + line-height: 1; + height: 2rem; + margin-right: 0.5em; + vertical-align: middle; + width: 2.2rem; + + img { + height: 100%; + object-fit: contain; + object-position: center; + width: 100%; + } + } +} diff --git a/src/components/Feed/Sidebar/Sidebar.tsx b/src/components/Feed/Sidebar/Sidebar.tsx new file mode 100644 index 00000000..5d279408 --- /dev/null +++ b/src/components/Feed/Sidebar/Sidebar.tsx @@ -0,0 +1,129 @@ +import { createSignal, For } from 'solid-js' +import type { Author } from '../../../graphql/types.gen' +import { useAuthorsStore } from '../../../stores/zine/authors' +import { Icon } from '../../_shared/Icon' +import { useTopicsStore } from '../../../stores/zine/topics' +import { useArticlesStore } from '../../../stores/zine/articles' +import { useSeenStore } from '../../../stores/zine/seen' +import { useSession } from '../../../context/session' +import { useLocalize } from '../../../context/localize' +import styles from './Sidebar.module.scss' + +type FeedSidebarProps = { + authors: Author[] +} + +type ListItem = { + title: string + icon?: string + counter?: number + href?: string + isBold?: boolean +} + +export const Sidebar = (props: FeedSidebarProps) => { + const { t } = useLocalize() + const { seen } = useSeenStore() + const { session } = useSession() + const { authorEntities } = useAuthorsStore({ authors: props.authors }) + const { articlesByTopic } = useArticlesStore() + const { topicEntities } = useTopicsStore() + + createSignal(() => { + console.log('!!! topicEntities:', topicEntities()) + }) + + const checkTopicIsSeen = (topicSlug: string) => { + return articlesByTopic()[topicSlug]?.every((article) => Boolean(seen()[article.slug])) + } + + const checkAuthorIsSeen = (authorSlug: string) => { + return Boolean(seen()[authorSlug]) + } + + const menuItems: ListItem[] = [ + { + icon: 'feed-all', + title: t('general feed') + }, + { + icon: 'feed-my', + title: t('my feed') + }, + { + icon: 'feed-collaborate', + title: t('accomplices') + }, + { + icon: 'feed-discussion', + title: t('discussions'), + counter: 4 + }, + { + icon: 'feed-drafts', + title: t('drafts'), + counter: 14 + }, + { + icon: 'bookmark', + title: t('bookmarks'), + counter: 6 + }, + { + icon: 'feed-notifications', + title: t('notifications') + }, + { + href: '/feed?by=subscribed', + title: t('My subscriptions'), + isBold: true + } + ] + + return ( +
+ +
+ + + {t('Feed settings')} + +
+
+ ) +} diff --git a/src/components/Feed/Sidebar/index.ts b/src/components/Feed/Sidebar/index.ts new file mode 100644 index 00000000..70fb43ef --- /dev/null +++ b/src/components/Feed/Sidebar/index.ts @@ -0,0 +1 @@ +export { Sidebar } from './Sidebar' diff --git a/src/components/Nav/Topics.tsx b/src/components/Nav/Topics.tsx index e54e7635..8f365c28 100644 --- a/src/components/Nav/Topics.tsx +++ b/src/components/Nav/Topics.tsx @@ -1,9 +1,8 @@ import { For, Show } from 'solid-js' import type { Topic } from '../../graphql/types.gen' import { Icon } from '../_shared/Icon' -import './Topics.scss' - import { useLocalize } from '../../context/localize' +import './Topics.scss' export const NavTopics = (props: { topics: Topic[] }) => { const { t, lang } = useLocalize() diff --git a/src/components/Views/Feed.tsx b/src/components/Views/Feed.tsx index 14413a0f..3bb92226 100644 --- a/src/components/Views/Feed.tsx +++ b/src/components/Views/Feed.tsx @@ -3,7 +3,7 @@ import '../../styles/Feed.scss' import { Icon } from '../_shared/Icon' import { ArticleCard } from '../Feed/Card' import { AuthorCard } from '../Author/Card' -import { FeedSidebar } from '../Feed/Sidebar' +import { Sidebar } from '../Feed/Sidebar' import { loadShouts, useArticlesStore } from '../../stores/zine/articles' import { useAuthorsStore } from '../../stores/zine/authors' import { useTopicsStore } from '../../stores/zine/topics' @@ -73,18 +73,18 @@ export const FeedView = () => { onMount(async () => { // load recent shouts not only published ( visibility = community ) - loadMore() + await loadMore() // load 5 recent comments overall const comments = await loadReactionsBy({ by: { comment: true }, limit: 5 }) setTopComments(comments) }) return ( - <> +
- +
@@ -198,6 +198,6 @@ export const FeedView = () => {
- +
) }