From d4593085b3764b63779bdf19a36463ecf21ca84f Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Fri, 16 Jun 2023 23:26:45 +0800
Subject: [PATCH] feat: toc item smooth indicator

Signed-off-by: Innei <tukon479@gmail.com>
---
 src/app/notes/[id]/layout.tsx      |  3 +++
 src/components/widgets/toc/Toc.tsx | 12 ++++++++++--
 src/lib/attach-ua.ts               | 16 ++++++++++++++++
 src/lib/define-metadata.ts         |  9 +++------
 4 files changed, 32 insertions(+), 8 deletions(-)
 create mode 100644 src/lib/attach-ua.ts

diff --git a/src/app/notes/[id]/layout.tsx b/src/app/notes/[id]/layout.tsx
index 61a5439d48..c95e2c7e61 100644
--- a/src/app/notes/[id]/layout.tsx
+++ b/src/app/notes/[id]/layout.tsx
@@ -2,6 +2,7 @@ import RemoveMarkdown from 'remove-markdown'
 import type { Metadata } from 'next'
 
 import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView'
+import { attachUA } from '~/lib/attach-ua'
 import { queries } from '~/queries/definition'
 import { getQueryClient } from '~/utils/query-client.server'
 
@@ -15,6 +16,7 @@ export const generateMetadata = async ({
   }
 }): Promise<Metadata> => {
   try {
+    attachUA()
     const { data } = await getQueryClient().fetchQuery(
       queries.note.byNid(params.id),
     )
@@ -52,6 +54,7 @@ export default async (
     id: string
   }>,
 ) => {
+  attachUA()
   await getQueryClient().prefetchQuery(queries.note.byNid(props.params.id))
   return (
     <BottomToUpTransitionView>
diff --git a/src/components/widgets/toc/Toc.tsx b/src/components/widgets/toc/Toc.tsx
index b0649e74a1..948ecbfc8f 100644
--- a/src/components/widgets/toc/Toc.tsx
+++ b/src/components/widgets/toc/Toc.tsx
@@ -1,4 +1,5 @@
 import { memo, useEffect, useMemo, useRef, useState } from 'react'
+import { motion } from 'framer-motion'
 import type { ITocItem } from './TocItem'
 
 import { RightToLeftTransitionView } from '~/components/ui/transition/RightToLeftTransitionView'
@@ -80,7 +81,7 @@ export const Toc: Component<TocProps> = ({ useAsWeight, className }) => {
   return (
     <aside className={clsxm('st-toc z-[3]', 'relative font-sans', className)}>
       <ul
-        className="absolute max-h-[75vh] overflow-y-auto font-medium scrollbar-none"
+        className="absolute max-h-[75vh] overflow-y-auto px-2 font-medium scrollbar-none"
         key={`${toc.map((i) => i.title).join('')}`}
         ref={containerRef}
       >
@@ -124,8 +125,15 @@ const MemoedItem = memo<{
       }
       key={heading.title}
       as="li"
-      className="leading-none"
+      className="relative leading-none"
     >
+      {isActive && (
+        <motion.span
+          layoutId="active-toc-item"
+          layout
+          className="absolute -left-2 bottom-[3px] top-[3px] w-[2px] rounded-sm bg-accent"
+        />
+      )}
       <TocItem
         anchorId={heading.anchorId}
         // containerRef={containerRef}
diff --git a/src/lib/attach-ua.ts b/src/lib/attach-ua.ts
new file mode 100644
index 0000000000..e4c9224222
--- /dev/null
+++ b/src/lib/attach-ua.ts
@@ -0,0 +1,16 @@
+import { isServer } from '@tanstack/react-query'
+import { headers } from 'next/dist/client/components/headers'
+
+import { $axios } from '~/utils/request'
+
+import PKG from '../../package.json'
+
+export const attachUA = () => {
+  if (!isServer) return
+  const { get } = headers()
+
+  const ua = get('user-agent')
+  $axios.defaults.headers.common[
+    'User-Agent'
+  ] = `${ua} NextJS/v${PKG.dependencies.next} ${PKG.name}/${PKG.version}`
+}
diff --git a/src/lib/define-metadata.ts b/src/lib/define-metadata.ts
index bfca58a858..7e2449903f 100644
--- a/src/lib/define-metadata.ts
+++ b/src/lib/define-metadata.ts
@@ -1,4 +1,3 @@
-import { headers } from 'next/dist/client/components/headers'
 import type { AggregateRoot } from '@mx-space/api-client'
 import type { Metadata } from 'next'
 
@@ -6,7 +5,8 @@ import { captureException } from '@sentry/nextjs'
 
 import { queries } from '~/queries/definition'
 import { getQueryClient } from '~/utils/query-client.server'
-import { $axios } from '~/utils/request'
+
+import { attachUA } from './attach-ua'
 
 export const defineMetadata = <T extends Record<string, string>>(
   fn: (
@@ -16,11 +16,8 @@ export const defineMetadata = <T extends Record<string, string>>(
 ) => {
   const handler = async ({ params }: { params: T }): Promise<Metadata> => {
     const getData = async () => {
-      const { get } = headers()
       const queryClient = getQueryClient()
-      const ua = get('user-agent')
-      $axios.defaults.headers.common['User-Agent'] = ua
-
+      attachUA()
       return await queryClient.fetchQuery({
         ...queries.aggregation.root(),
       })