feat(timeline): enhance timeline selector panel with close button and…

… conditional rendering Add close button to timeline selector panel and implement conditional rendering based on timeline column visibility. Improve panel header layout and interaction. Signed-off-by: Innei <tukon479@gmail.com>
RSSNext · Feb 17, 2025 · c3e2ea6 · c3e2ea6
1 parent befd15e
commit c3e2ea6
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 48 deletions.
diff --git a/apps/renderer/src/components/ui/markdown/components/TocItem.tsx b/apps/renderer/src/components/ui/markdown/components/TocItem.tsx
@@ -41,7 +41,9 @@ export const TocItem: FC<TocItemProps> = memo((props) => {
           ? {
               paddingLeft: `${(depth - rootDepth) * 12}px`,
             }
-          : undefined
+          : {
+              lineHeight: "24px",
+            }
       }
       data-depth={depth}
       onClick={useCallback(

diff --git a/apps/renderer/src/modules/timeline-column/TimelineSelector.tsx b/apps/renderer/src/modules/timeline-column/TimelineSelector.tsx
@@ -13,6 +13,7 @@ import { useTranslation } from "react-i18next"
 
 import { useShowContextMenu } from "~/atoms/context-menu"
 import { useUISettingKey } from "~/atoms/settings/ui"
+import { useTimelineColumnShow } from "~/atoms/sidebar"
 import {
   ROUTE_TIMELINE_OF_INBOX,
   ROUTE_TIMELINE_OF_LIST,
@@ -92,6 +93,7 @@ export const TimelineSelector = ({ timelineId }: { timelineId: string | undefine
       })
     }
   }, [animateControls, shouldOpen])
+  const timelineColumnShow = useTimelineColumnShow()
 
   return (
     <Fragment>
@@ -122,53 +124,72 @@ export const TimelineSelector = ({ timelineId }: { timelineId: string | undefine
         </div>
       </div>
 
-      <RootPortal to={rootContainer}>
-        <AnimatePresence>
-          <m.div
-            ref={setPanelRef}
-            className="fixed inset-y-0 z-[1] flex h-full w-64 flex-col border-x bg-native"
-            style={{ left: feedColWidth }}
-            initial={{ transform: "translateX(-100%)" }}
-            animate={animateControls}
-            // animate={{ transform: "translateX(0%)" }}
-            transition={{
-              damping: 50,
-              stiffness: 500,
-              type: "spring",
-            }}
-          >
-            <div className="border-b p-3 text-lg font-medium">Quick Selector</div>
-            <ScrollArea viewportClassName="pt-2 px-3" rootClassName="w-full">
-              <span className="mb-3 text-base font-bold">Views</span>
-              {timelineList.views.map((timelineId) => (
-                <TimelineListViewItem
-                  key={timelineId}
-                  timelineId={timelineId}
-                  isActive={activeTimelineId === timelineId}
-                />
-              ))}
-              <Divider className="mx-12 my-4" />
-              <span className="mb-3 text-base font-bold">Inboxes</span>
-              {timelineList.inboxes.map((timelineId) => (
-                <TimelineInboxListItem
-                  key={timelineId}
-                  timelineId={timelineId}
-                  isActive={activeTimelineId === timelineId}
-                />
-              ))}
-              <Divider className="mx-12 my-4" />
-              <span className="mb-3 text-base font-bold">Lists</span>
-              {timelineList.lists.map((timelineId) => (
-                <TimelineListListItem
-                  key={timelineId}
-                  timelineId={timelineId}
-                  isActive={activeTimelineId === timelineId}
-                />
-              ))}
-            </ScrollArea>
-          </m.div>
-        </AnimatePresence>
-      </RootPortal>
+      {timelineColumnShow && (
+        <RootPortal to={rootContainer}>
+          <AnimatePresence>
+            <m.div
+              ref={setPanelRef}
+              className="fixed inset-y-0 z-[1] flex h-full w-64 flex-col border-x bg-native"
+              style={{ left: feedColWidth }}
+              initial={{ transform: "translateX(-100%)" }}
+              animate={animateControls}
+              transition={{
+                damping: 50,
+                stiffness: 500,
+                type: "spring",
+              }}
+            >
+              {shouldOpen && (
+                <>
+                  <header className="flex items-center justify-between border-b p-3 text-lg font-medium">
+                    <span className="text-lg font-medium">Quick Selector</span>
+
+                    <button
+                      type="button"
+                      className="flex items-center justify-center rounded p-1 transition-colors duration-200 hover:bg-theme-item-hover"
+                      onClick={() => {
+                        animateControls.start({
+                          transform: "translateX(-100%)",
+                        })
+                      }}
+                    >
+                      <i className="i-mgc-close-cute-re" />
+                    </button>
+                  </header>
+                  <ScrollArea viewportClassName="pt-2 px-3" rootClassName="w-full">
+                    <div className="mb-1 text-base font-bold">Views</div>
+                    {timelineList.views.map((timelineId) => (
+                      <TimelineListViewItem
+                        key={timelineId}
+                        timelineId={timelineId}
+                        isActive={activeTimelineId === timelineId}
+                      />
+                    ))}
+                    <Divider className="mx-12 my-4" />
+                    <div className="mb-1 text-base font-bold">Inboxes</div>
+                    {timelineList.inboxes.map((timelineId) => (
+                      <TimelineInboxListItem
+                        key={timelineId}
+                        timelineId={timelineId}
+                        isActive={activeTimelineId === timelineId}
+                      />
+                    ))}
+                    <Divider className="mx-12 my-4" />
+                    <div className="mb-1 text-base font-bold">Lists</div>
+                    {timelineList.lists.map((timelineId) => (
+                      <TimelineListListItem
+                        key={timelineId}
+                        timelineId={timelineId}
+                        isActive={activeTimelineId === timelineId}
+                      />
+                    ))}
+                  </ScrollArea>
+                </>
+              )}
+            </m.div>
+          </AnimatePresence>
+        </RootPortal>
+      )}
     </Fragment>
   )
 }