From 9dafbe81096cafadd2dca3fb3d123378460dc508 Mon Sep 17 00:00:00 2001
From: Kechicode <186776112+Kechicode@users.noreply.github.com>
Date: Tue, 7 Jan 2025 17:42:28 +0800
Subject: [PATCH 1/6] feat(Channel): Add SingleLine component to MainFeed with
 dynamic channel links

---
 src/views/Home/Channel/SingleLine/index.tsx   |  78 ++++++++++
 .../Home/Channel/SingleLine/styles.module.css |  32 ++++
 src/views/Home/Feed/MainFeed/index.tsx        | 147 ++++++++++++++++++
 3 files changed, 257 insertions(+)
 create mode 100644 src/views/Home/Channel/SingleLine/index.tsx
 create mode 100644 src/views/Home/Channel/SingleLine/styles.module.css

diff --git a/src/views/Home/Channel/SingleLine/index.tsx b/src/views/Home/Channel/SingleLine/index.tsx
new file mode 100644
index 0000000000..d3a4fcb1a3
--- /dev/null
+++ b/src/views/Home/Channel/SingleLine/index.tsx
@@ -0,0 +1,78 @@
+import classnames from 'classnames'
+import { useState } from 'react'
+import { useEffect } from 'react'
+
+import styles from './styles.module.css'
+
+type SingleLineProps = {
+  items: {
+    id: string
+    title: string
+    link: string
+  }[]
+}
+
+const SingleLine = ({ items }: SingleLineProps) => {
+  const [hash, setHash] = useState('')
+
+  useEffect(() => {
+    // Function to update the hash state
+    const updateHash = () => {
+      setHash(window.location.hash)
+    }
+
+    // Set the initial hash
+    updateHash()
+
+    // Add an event listener to update the hash when it changes
+    window.addEventListener('hashchange', updateHash)
+
+    // Clean up the event listener on component unmount
+    return () => {
+      window.removeEventListener('hashchange', updateHash)
+    }
+  }, [])
+
+  const [selectedChannel, setSelectedChannel] = useState(1)
+
+  useEffect(() => {
+    if (hash) {
+      const channel = parseInt(hash.split('=')[1], 10)
+      setSelectedChannel(channel)
+
+      // scroll to the selected channel
+      const selectedChannel = document.querySelector(
+        `.singleLine-item[data-channel-id="${channel}"]`
+      )
+      if (selectedChannel) {
+        selectedChannel.scrollIntoView({
+          behavior: 'smooth',
+          inline: 'center',
+          block: 'nearest',
+        })
+      }
+    }
+  }, [hash])
+
+  return (
+    <section className={styles.singleLine}>
+      {items.map((item) => (
+        <a
+          key={item.id}
+          href={item.link}
+          className={classnames({
+            ['singleLine-item']: true,
+            [styles.item]: true,
+            [styles.selectedChannel]:
+              selectedChannel === parseInt(item?.id || '1', 10),
+          })}
+          data-channel-id={item.id}
+        >
+          {item.title}
+        </a>
+      ))}
+    </section>
+  )
+}
+
+export default SingleLine
diff --git a/src/views/Home/Channel/SingleLine/styles.module.css b/src/views/Home/Channel/SingleLine/styles.module.css
new file mode 100644
index 0000000000..32383132e2
--- /dev/null
+++ b/src/views/Home/Channel/SingleLine/styles.module.css
@@ -0,0 +1,32 @@
+/* 频道行样式 */
+.singleLine {
+  @mixin border-bottom-grey;
+
+  position: relative;
+  display: flex;
+  gap: var(--sp12);
+  align-items: center;
+  margin: 0 calc(var(--sp16) * -1);
+  overflow-x: auto; /* horizontal scroll */
+  white-space: nowrap;
+  border-bottom-color: var(--color-grey-hover);
+  scrollbar-width: none; /* Firefox hide scrollbar */
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  & .item {
+    flex-shrink: 0; /* prevent shrink */
+    padding: 8px 10px;
+    color: var(--color-grey-darker);
+    white-space: nowrap;
+    cursor: pointer;
+
+    &.selectedChannel {
+      font-weight: 600;
+      color: var(--color-black);
+      border-bottom: 1px solid var(--color-black);
+    }
+  }
+}
diff --git a/src/views/Home/Feed/MainFeed/index.tsx b/src/views/Home/Feed/MainFeed/index.tsx
index 74a9aa0056..0a61aa99b1 100644
--- a/src/views/Home/Feed/MainFeed/index.tsx
+++ b/src/views/Home/Feed/MainFeed/index.tsx
@@ -22,6 +22,7 @@ import {
 
 import Announcements from '../../Announcements'
 import ChannelCarousel from '../../Channel/Page/Carousel'
+import SingleLine from '../../Channel/SingleLine'
 import Authors from '../Authors'
 import Billboard from '../Billboard'
 import { FEED_ARTICLES_PRIVATE, FEED_ARTICLES_PUBLIC } from '../gql'
@@ -89,6 +90,151 @@ const MainFeed = ({ feedSortType: sortBy }: MainFeedProps) => {
   const viewer = useContext(ViewerContext)
   const isHottestFeed = sortBy === 'hottest'
   const isIcymiFeed = sortBy === 'icymi'
+
+  const host = typeof window !== 'undefined' ? window.location.origin : ''
+
+  const items = [
+    {
+      id: '1',
+      title: 'Item 1',
+      link: `${host}/#channel=1`,
+    },
+    {
+      id: '2',
+      title: 'Item 2',
+      link: `${host}/#channel=2`,
+    },
+    {
+      id: '3',
+      title: 'Item 3',
+      link: `${host}/#channel=3`,
+    },
+    {
+      id: '4',
+      title: 'Item 4',
+      link: `${host}/#channel=4`,
+    },
+    {
+      id: '5',
+      title: 'Item 5',
+      link: `${host}/#channel=5`,
+    },
+    {
+      id: '6',
+      title: 'Item 6',
+      link: `${host}/#channel=6`,
+    },
+    {
+      id: '7',
+      title: 'Item 7',
+      link: `${host}/#channel=7`,
+    },
+    {
+      id: '8',
+      title: 'Item 8',
+      link: `${host}/#channel=8`,
+    },
+    {
+      id: '9',
+      title: 'Item 9',
+      link: `${host}/#channel=9`,
+    },
+    {
+      id: '10',
+      title: 'Item 10',
+      link: `${host}/#channel=10`,
+    },
+    {
+      id: '11',
+      title: 'Item 11',
+      link: `${host}/#channel=11`,
+    },
+    {
+      id: '12',
+      title: 'Item 12',
+      link: `${host}/#channel=12`,
+    },
+    {
+      id: '13',
+      title: 'Item 13',
+      link: `${host}/#channel=13`,
+    },
+    {
+      id: '14',
+      title: 'Item 14',
+      link: `${host}/#channel=14`,
+    },
+    {
+      id: '15',
+      title: 'Item 15',
+      link: `${host}/#channel=15`,
+    },
+    {
+      id: '16',
+      title: 'Item 16',
+      link: `${host}/#channel=16`,
+    },
+    {
+      id: '17',
+      title: 'Item 17',
+      link: `${host}/#channel=17`,
+    },
+    {
+      id: '18',
+      title: 'Item 18',
+      link: `${host}/#channel=18`,
+    },
+    {
+      id: '19',
+      title: 'Item 19',
+      link: `${host}/#channel=19`,
+    },
+    {
+      id: '20',
+      title: 'Item 20',
+      link: `${host}/#channel=20`,
+    },
+    {
+      id: '21',
+      title: 'Item 21',
+      link: `${host}/#channel=21`,
+    },
+    {
+      id: '22',
+      title: 'Item 22',
+      link: `${host}/#channel=22`,
+    },
+    {
+      id: '23',
+      title: 'Item 23',
+      link: `${host}/#channel=23`,
+    },
+    {
+      id: '24',
+      title: 'Item 24',
+      link: `${host}/#channel=24`,
+    },
+    {
+      id: '25',
+      title: 'Item 25',
+      link: `${host}/#channel=25`,
+    },
+    {
+      id: '26',
+      title: 'Item 26',
+      link: `${host}/#channel=26`,
+    },
+    {
+      id: '27',
+      title: 'Item 27',
+      link: `${host}/#channel=27`,
+    },
+    {
+      id: '28',
+      title: 'Item 28',
+      link: `${host}/#channel=28`,
+    },
+  ]
   /**
    * Data Fetching
    */
@@ -218,6 +364,7 @@ const MainFeed = ({ feedSortType: sortBy }: MainFeedProps) => {
         <List>
           <Media lessThan="lg">
             <ChannelCarousel />
+            <SingleLine items={items} />
           </Media>
           {isHottestFeed && <Announcements />}
           {mixFeed.map((edge, i) => {

From 8fe8233c417e0f59012084c17043dbca6ff0ccea Mon Sep 17 00:00:00 2001
From: Kechicode <186776112+Kechicode@users.noreply.github.com>
Date: Tue, 7 Jan 2025 17:45:50 +0800
Subject: [PATCH 2/6] feat(Channel): refactor ChannelCarousel to Accept Dynamic
 Items as Props

---
 .../Home/Channel/Page/Carousel/index.tsx      | 153 ++----------------
 src/views/Home/Feed/MainFeed/index.tsx        |   2 +-
 2 files changed, 10 insertions(+), 145 deletions(-)

diff --git a/src/views/Home/Channel/Page/Carousel/index.tsx b/src/views/Home/Channel/Page/Carousel/index.tsx
index 1df7611b24..470305e85c 100644
--- a/src/views/Home/Channel/Page/Carousel/index.tsx
+++ b/src/views/Home/Channel/Page/Carousel/index.tsx
@@ -16,150 +16,15 @@ import styles from './styles.module.css'
 
 type ColumnCount = '4' | '5' | '6' | '7'
 
-const ChannelCarousel = () => {
-  const host = typeof window !== 'undefined' ? window.location.origin : ''
-  const items = [
-    {
-      id: '1',
-      title: 'Item 1',
-      link: `${host}/#channel=1`,
-    },
-    {
-      id: '2',
-      title: 'Item 2',
-      link: `${host}/#channel=2`,
-    },
-    {
-      id: '3',
-      title: 'Item 3',
-      link: `${host}/#channel=3`,
-    },
-    {
-      id: '4',
-      title: 'Item 4',
-      link: `${host}/#channel=4`,
-    },
-    {
-      id: '5',
-      title: 'Item 5',
-      link: `${host}/#channel=5`,
-    },
-    {
-      id: '6',
-      title: 'Item 6',
-      link: `${host}/#channel=6`,
-    },
-    {
-      id: '7',
-      title: 'Item 7',
-      link: `${host}/#channel=7`,
-    },
-    {
-      id: '8',
-      title: 'Item 8',
-      link: `${host}/#channel=8`,
-    },
-    {
-      id: '9',
-      title: 'Item 9',
-      link: `${host}/#channel=9`,
-    },
-    {
-      id: '10',
-      title: 'Item 10',
-      link: `${host}/#channel=10`,
-    },
-    {
-      id: '11',
-      title: 'Item 11',
-      link: `${host}/#channel=11`,
-    },
-    {
-      id: '12',
-      title: 'Item 12',
-      link: `${host}/#channel=12`,
-    },
-    {
-      id: '13',
-      title: 'Item 13',
-      link: `${host}/#channel=13`,
-    },
-    {
-      id: '14',
-      title: 'Item 14',
-      link: `${host}/#channel=14`,
-    },
-    {
-      id: '15',
-      title: 'Item 15',
-      link: `${host}/#channel=15`,
-    },
-    {
-      id: '16',
-      title: 'Item 16',
-      link: `${host}/#channel=16`,
-    },
-    {
-      id: '17',
-      title: 'Item 17',
-      link: `${host}/#channel=17`,
-    },
-    {
-      id: '18',
-      title: 'Item 18',
-      link: `${host}/#channel=18`,
-    },
-    {
-      id: '19',
-      title: 'Item 19',
-      link: `${host}/#channel=19`,
-    },
-    {
-      id: '20',
-      title: 'Item 20',
-      link: `${host}/#channel=20`,
-    },
-    {
-      id: '21',
-      title: 'Item 21',
-      link: `${host}/#channel=21`,
-    },
-    {
-      id: '22',
-      title: 'Item 22',
-      link: `${host}/#channel=22`,
-    },
-    {
-      id: '23',
-      title: 'Item 23',
-      link: `${host}/#channel=23`,
-    },
-    {
-      id: '24',
-      title: 'Item 24',
-      link: `${host}/#channel=24`,
-    },
-    {
-      id: '25',
-      title: 'Item 25',
-      link: `${host}/#channel=25`,
-    },
-    {
-      id: '26',
-      title: 'Item 26',
-      link: `${host}/#channel=26`,
-    },
-    {
-      id: '27',
-      title: 'Item 27',
-      link: `${host}/#channel=27`,
-    },
-    {
-      id: '28',
-      title: 'Item 28',
-      link: `${host}/#channel=28`,
-    },
-  ]
+type ChannelCarouselProps = {
+  items: {
+    id: string
+    title: string
+    link: string
+  }[]
+}
+
+const ChannelCarousel = ({ items }: ChannelCarouselProps) => {
   const [dot, setDot] = useState(0)
   const [, setSnaps] = useState<any[]>([])
   const [carousel, carouselApi] = useEmblaCarousel({
diff --git a/src/views/Home/Feed/MainFeed/index.tsx b/src/views/Home/Feed/MainFeed/index.tsx
index 0a61aa99b1..66e1ccf267 100644
--- a/src/views/Home/Feed/MainFeed/index.tsx
+++ b/src/views/Home/Feed/MainFeed/index.tsx
@@ -363,7 +363,7 @@ const MainFeed = ({ feedSortType: sortBy }: MainFeedProps) => {
       >
         <List>
           <Media lessThan="lg">
-            <ChannelCarousel />
+            <ChannelCarousel items={items} />
             <SingleLine items={items} />
           </Media>
           {isHottestFeed && <Announcements />}

From 9c7b48b2418662a8526080adb142ea72617d0163 Mon Sep 17 00:00:00 2001
From: Kechicode <186776112+Kechicode@users.noreply.github.com>
Date: Tue, 7 Jan 2025 18:08:16 +0800
Subject: [PATCH 3/6] feat(MainFeed): Add dynamic single line display in
 MainFeed

---
 src/views/Home/Channel/Page/Carousel/index.tsx |  4 +++-
 src/views/Home/Feed/MainFeed/index.tsx         | 16 ++++++++++++++--
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/views/Home/Channel/Page/Carousel/index.tsx b/src/views/Home/Channel/Page/Carousel/index.tsx
index 470305e85c..a67b5cbe17 100644
--- a/src/views/Home/Channel/Page/Carousel/index.tsx
+++ b/src/views/Home/Channel/Page/Carousel/index.tsx
@@ -174,7 +174,9 @@ const ChannelCarousel = ({ items }: ChannelCarouselProps) => {
         </div>
       </section>
       <footer className={styles.footer}>
-        <section className={styles.dots}>
+        <section
+          className={classnames(['page-channel-carousel-dots', styles.dots])}
+        >
           {slicedItems?.map((_, index) => (
             <Dot
               key={index}
diff --git a/src/views/Home/Feed/MainFeed/index.tsx b/src/views/Home/Feed/MainFeed/index.tsx
index 66e1ccf267..646d83891c 100644
--- a/src/views/Home/Feed/MainFeed/index.tsx
+++ b/src/views/Home/Feed/MainFeed/index.tsx
@@ -1,5 +1,5 @@
 import { NetworkStatus } from 'apollo-client'
-import { useContext, useEffect, useRef } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
 
 import { analytics, mergeConnections } from '~/common/utils'
 import {
@@ -11,6 +11,7 @@ import {
   Media,
   QueryError,
   SpinnerBlock,
+  useNativeEventListener,
   usePublicQuery,
   ViewerContext,
 } from '~/components'
@@ -235,6 +236,17 @@ const MainFeed = ({ feedSortType: sortBy }: MainFeedProps) => {
       link: `${host}/#channel=28`,
     },
   ]
+
+  const [showSingleLine, setShowSingleLine] = useState(false)
+
+  useNativeEventListener('scroll', () => {
+    if (window.scrollY > 85) {
+      setShowSingleLine(true)
+    } else {
+      setShowSingleLine(false)
+    }
+  })
+
   /**
    * Data Fetching
    */
@@ -364,7 +376,7 @@ const MainFeed = ({ feedSortType: sortBy }: MainFeedProps) => {
         <List>
           <Media lessThan="lg">
             <ChannelCarousel items={items} />
-            <SingleLine items={items} />
+            {showSingleLine && <SingleLine items={items} />}
           </Media>
           {isHottestFeed && <Announcements />}
           {mixFeed.map((edge, i) => {

From 4afc764ce47f3645acb97b9d73404b8968c5894d Mon Sep 17 00:00:00 2001
From: Kechicode <186776112+Kechicode@users.noreply.github.com>
Date: Wed, 8 Jan 2025 11:46:19 +0800
Subject: [PATCH 4/6] feat(SingleLine): fixed SingleLine component

---
 src/views/Home/Channel/SingleLine/index.tsx   |  2 ++
 .../Home/Channel/SingleLine/styles.module.css | 21 ++++++++++++++-----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/views/Home/Channel/SingleLine/index.tsx b/src/views/Home/Channel/SingleLine/index.tsx
index d3a4fcb1a3..7038f31893 100644
--- a/src/views/Home/Channel/SingleLine/index.tsx
+++ b/src/views/Home/Channel/SingleLine/index.tsx
@@ -55,6 +55,7 @@ const SingleLine = ({ items }: SingleLineProps) => {
   }, [hash])
 
   return (
+    // <div className={styles.container}>
     <section className={styles.singleLine}>
       {items.map((item) => (
         <a
@@ -72,6 +73,7 @@ const SingleLine = ({ items }: SingleLineProps) => {
         </a>
       ))}
     </section>
+    // </div>
   )
 }
 
diff --git a/src/views/Home/Channel/SingleLine/styles.module.css b/src/views/Home/Channel/SingleLine/styles.module.css
index 32383132e2..d53e3afbc9 100644
--- a/src/views/Home/Channel/SingleLine/styles.module.css
+++ b/src/views/Home/Channel/SingleLine/styles.module.css
@@ -1,15 +1,26 @@
 /* 频道行样式 */
-.singleLine {
-  @mixin border-bottom-grey;
 
-  position: relative;
+.container {
+  position: fixed;
+  top: 65px;
+  z-index: var(--z-index-sticky-tabs);
+}
+
+.singleLine {
+  position: fixed;
+  top: 65px;
+  right: 0;
+  left: 0;
+  z-index: var(--z-index-sticky-tabs);
   display: flex;
   gap: var(--sp12);
   align-items: center;
-  margin: 0 calc(var(--sp16) * -1);
+
+  /* margin: 0 calc(var(--sp16) * -1); */
   overflow-x: auto; /* horizontal scroll */
   white-space: nowrap;
-  border-bottom-color: var(--color-grey-hover);
+  background-color: var(--color-white);
+  border-bottom: 2px solid var(--color-grey-hover);
   scrollbar-width: none; /* Firefox hide scrollbar */
 
   &::-webkit-scrollbar {

From 2652d822f5eba2d9bdb0050e5071c8897a6b4d12 Mon Sep 17 00:00:00 2001
From: Kechicode <186776112+Kechicode@users.noreply.github.com>
Date: Wed, 8 Jan 2025 11:59:41 +0800
Subject: [PATCH 5/6] Update styles.module.css

---
 src/views/Home/Channel/SingleLine/styles.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Home/Channel/SingleLine/styles.module.css b/src/views/Home/Channel/SingleLine/styles.module.css
index d53e3afbc9..a102c8a937 100644
--- a/src/views/Home/Channel/SingleLine/styles.module.css
+++ b/src/views/Home/Channel/SingleLine/styles.module.css
@@ -20,7 +20,7 @@
   overflow-x: auto; /* horizontal scroll */
   white-space: nowrap;
   background-color: var(--color-white);
-  border-bottom: 2px solid var(--color-grey-hover);
+  border-bottom: 1px solid var(--color-grey-hover);
   scrollbar-width: none; /* Firefox hide scrollbar */
 
   &::-webkit-scrollbar {

From f6e5ed413c023586f0761583488dcea27f2e403a Mon Sep 17 00:00:00 2001
From: Kechicode <186776112+Kechicode@users.noreply.github.com>
Date: Wed, 8 Jan 2025 12:25:13 +0800
Subject: [PATCH 6/6] feat(Carousel): Enhance carousel navigation by syncing
 with URL hash

---
 src/views/Home/Channel/Page/Carousel/index.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/views/Home/Channel/Page/Carousel/index.tsx b/src/views/Home/Channel/Page/Carousel/index.tsx
index a67b5cbe17..a0b48a8158 100644
--- a/src/views/Home/Channel/Page/Carousel/index.tsx
+++ b/src/views/Home/Channel/Page/Carousel/index.tsx
@@ -96,11 +96,14 @@ const ChannelCarousel = ({ items }: ChannelCarouselProps) => {
     if (!carouselApi) {
       return
     }
-
+    const channel = parseInt(hash.split('=')[1], 10)
+    const pageIndex = slicedItems.findIndex((item) =>
+      item.find((i: any) => i.id === channel.toString())
+    )
     carouselApi.reInit()
-    carouselApi.scrollTo(0)
+    carouselApi.scrollTo(pageIndex)
+    setDot(pageIndex)
 
-    setDot(0)
     setSnaps(carouselApi.scrollSnapList())
 
     carouselApi.on('select', onSelect)
@@ -132,8 +135,13 @@ const ChannelCarousel = ({ items }: ChannelCarouselProps) => {
     if (hash) {
       const channel = parseInt(hash.split('=')[1], 10)
       setSelectedChannel(channel)
+      // const pageIndex = Math.floor(channel / (Number(columnCount) * 2))
+      const pageIndex = slicedItems.findIndex((item) =>
+        item.find((i: any) => i.id === channel.toString())
+      )
+      carouselApi?.scrollTo(pageIndex)
     }
-  }, [hash])
+  }, [slicedItems, hash])
 
   return (
     <section className={styles.carousel}>