postmerge

src/components/Article/CommentsTree.tsx

@@ -153,7 +153,7 @@ export const CommentsTree = (props: Props) => {
         </Show>
       </div>
       <ul class={styles.comments}>
-        <For each={sortedComments().filter((r) => !r.replyTo)}>
+        <For each={sortedComments().filter((r) => !r.reply_to)}>
           {(reaction) => (
             <Comment
               sortedComments={sortedComments()}

src/components/Topic/TopicBadge/TopicBadge.tsx

@@ -1,20 +1,18 @@
 import { clsx } from 'clsx'
 import { createEffect, createMemo, createSignal, Show } from 'solid-js'
 
-import styles from './TopicBadge.module.scss'
-import { FollowingEntity, Topic } from '../../../graphql/schema/core.gen'
-import { createMemo, createSignal, Show } from 'solid-js'
-import { imageProxy } from '../../../utils/imageProxy'
-import { Button } from '../../_shared/Button'
-import { useSession } from '../../../context/session'
 import { useLocalize } from '../../../context/localize'
+import { useMediaQuery } from '../../../context/mediaQuery'
+import { useSession } from '../../../context/session'
+import { FollowingEntity, Topic } from '../../../graphql/schema/core.gen'
 import { follow, unfollow } from '../../../stores/zine/common'
-import { capitalize } from '../../../utils/capitalize'
 import { getImageUrl } from '../../../utils/getImageUrl'
 import { Button } from '../../_shared/Button'
 import { CheckButton } from '../../_shared/CheckButton'
 
 import styles from './TopicBadge.module.scss'
+import { title } from 'process'
+import { capitalize } from '../../../utils/capitalize'
 
 type Props = {
   topic: Topic
@@ -22,16 +20,16 @@ type Props = {
 }
 
 export const TopicBadge = (props: Props) => {
+  const { t, lang } = useLocalize()
+  const { mediaMatches } = useMediaQuery()
+  const [isMobileView, setIsMobileView] = createSignal(false)
   const [isSubscribing, setIsSubscribing] = createSignal(false)
   createEffect(() => {
     setIsMobileView(!mediaMatches.sm)
   })
-  const { t } = useLocalize()
   const {
     subscriptions,
-    actions: { loadSubscriptions, loadSession },
+    actions: { loadSubscriptions },
-    isAuthenticated,
-    session,
   } = useSession()
 
   const subscribed = createMemo(() =>
@@ -54,59 +52,63 @@ export const TopicBadge = (props: Props) => {
 
   return (
     <div class={styles.TopicBadge}>
-      <a
+      <div class={styles.basicInfo}>
-        href={`/topic/${props.topic.slug}`}
+        <a
-        class={clsx(styles.picture, { [styles.withImage]: props.topic.pic })}
+          href={`/topic/${props.topic.slug}`}
-        style={props.topic.pic && { 'background-image': `url('${imageProxy(props.topic.pic)}')` }}
+          class={clsx(styles.picture, {
-      />
+            [styles.withImage]: props.topic.pic,
-      <a href={`/topic/${props.topic.slug}`} class={styles.info}>
+            [styles.smallSize]: isMobileView(),
-        <span class={styles.title}>{title()}</span>
+          })}
+          style={
+            props.topic.pic && {
+              'background-image': `url('${getImageUrl(props.topic.pic, { width: 40, height: 40 })}')`,
+            }
+          }
+        />
+        <a href={`/topic/${props.topic.slug}`} class={styles.info}>
+          <span class={styles.title}>{title()}</span>
+          <Show
+            when={props.topic.body}
+            fallback={
+              <div class={styles.description}>
+                {t('PublicationsWithCount', { count: props.topic.stat.shouts ?? 0 })}
+              </div>
+            }
+          >
+            <div class={clsx('text-truncate', styles.description)}>{props.topic.body}</div>
+          </Show>
+        </a>
+      </div>
+
+      <div class={styles.actions}>
         <Show
-          when={props.topic.body}
+          when={!props.minimizeSubscribeButton}
           fallback={
-            <div class={styles.description}>
+            <CheckButton text={t('Follow')} checked={subscribed()} onClick={() => subscribe(!subscribed)} />
-              {t('PublicationsWithCount', { count: props.topic.stat.shouts ?? 0 })}
-            </div>
           }
         >
-          <div class={clsx('text-truncate', styles.description)}>{props.topic.body}</div>
-        </Show>
-      </a>
-      <Show when={isAuthenticated()}>
-        <div class={styles.actions}>
           <Show
-            when={!props.minimizeSubscribeButton}
+            when={subscribed()}
             fallback={
-              <CheckButton
+              <Button
-                text={t('Follow')}
+                variant="primary"
-                checked={subscribed()}
+                size="S"
-                onClick={() => subscribe(!subscribed)}
+                value={isSubscribing() ? t('subscribing...') : t('Subscribe')}
+                onClick={() => subscribe(true)}
+                class={styles.subscribeButton}
               />
             }
           >
-            <Show
+            <Button
-              when={subscribed()}
+              onClick={() => subscribe(false)}
-              fallback={
+              variant="bordered"
-                <Button
+              size="S"
-                  variant="primary"
+              value={t('Following')}
-                  size="S"
+              class={styles.subscribeButton}
-                  value={isSubscribing() ? t('...subscribing') : t('Subscribe')}
+            />
-                  onClick={() => subscribe(true)}
-                  class={styles.subscribeButton}
-                />
-              }
-            >
-              <Button
-                onClick={() => subscribe(false)}
-                variant="bordered"
-                size="S"
-                value={t('Following')}
-                class={styles.subscribeButton}
-              />
-            </Show>
           </Show>
-        </div>
+        </Show>
-      </Show>
+      </div>
     </div>
   )
 }