beautiful scroll to top

src/components/Views/Edit.module.scss

@@ -101,12 +101,20 @@
 }
 
 .scrollTopButton {
+  pointer-events: none;
   cursor: pointer;
   left: 2rem;
   position: sticky;
   top: calc(100vh - 40px);
   width: 2.8rem;
   z-index: 2;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+
+  &.visible {
+    opacity: 1;
+    pointer-events: all;
+  }
 
   @include media-breakpoint-down(md) {
     display: none;

src/components/Views/Edit.tsx

@@ -1,4 +1,4 @@
-import { createSignal, onMount, Show } from 'solid-js'
+import { createSignal, onCleanup, onMount, Show } from 'solid-js'
 import { useLocalize } from '../../context/localize'
 import { clsx } from 'clsx'
 import styles from './Edit.module.scss'
@@ -19,6 +19,7 @@ type EditViewProps = {
 export const EditView = (props: EditViewProps) => {
   const { t } = useLocalize()
 
+  const [isScrolled, setIsScrolled] = createSignal(false)
   const [topics, setTopics] = createSignal<Topic[]>(null)
   const { page } = useRouter()
 
@@ -46,6 +47,17 @@ export const EditView = (props: EditViewProps) => {
     setTopics(allTopics)
   })
 
+  onMount(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 0)
+    }
+
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    onCleanup(() => {
+      window.removeEventListener('scroll', handleScroll)
+    })
+  })
+
   const handleTitleInputChange = (e) => {
     const title = e.currentTarget.value
     setForm('title', title)
@@ -78,7 +90,12 @@ export const EditView = (props: EditViewProps) => {
 
   return (
     <>
-      <button class={styles.scrollTopButton} onClick={scrollTop}>
+      <button
+        class={clsx(styles.scrollTopButton, {
+          [styles.visible]: isScrolled()
+        })}
+        onClick={scrollTop}
+      >
         <Icon name="up-button" class={styles.icon} />
         <span class={styles.scrollTopButtonLabel}>{t('Scroll up')}</span>
       </button>

src/context/editor.tsx

@@ -79,7 +79,8 @@ export const EditorProvider = (props: { children: JSX.Element }) => {
           mainTopic: form.selectedTopics[0]?.slug || 'society',
           slug: form.slug,
           subtitle: form.subtitle,
-          title: form.title
+          title: form.title,
+          cover: form.coverImageUrl
         }
       })
       return true

src/graphql/types.gen.ts

@@ -585,14 +585,12 @@ export type ShoutInput = {
   authors?: InputMaybe<Array<InputMaybe<Scalars['String']>>>
   body?: InputMaybe<Scalars['String']>
   community?: InputMaybe<Scalars['Int']>
+  cover?: InputMaybe<Scalars['String']>
   mainTopic?: InputMaybe<Scalars['String']>
   slug?: InputMaybe<Scalars['String']>
   subtitle?: InputMaybe<Scalars['String']>
   title?: InputMaybe<Scalars['String']>
   topics?: InputMaybe<Array<InputMaybe<Scalars['String']>>>
-  versionOf?: InputMaybe<Scalars['String']>
-  visibleForRoles?: InputMaybe<Array<InputMaybe<Scalars['String']>>>
-  visibleForUsers?: InputMaybe<Array<InputMaybe<Scalars['String']>>>
 }
 
 export type ShoutsFilterBy = {