feat: timeline button width

RSSNext · Feb 13, 2025 · c475ecd · c475ecd
1 parent 4303da2
commit c475ecd
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 6 deletions.
diff --git a/apps/renderer/src/modules/timeline-column/TimelineSwitchButton.tsx b/apps/renderer/src/modules/timeline-column/TimelineSwitchButton.tsx
@@ -84,6 +84,7 @@ const ViewSwitchButton: FC<{
         ELECTRON ? "hover:!bg-theme-item-hover" : "",
         isOver && "border-theme-accent-400 bg-theme-accent-400/60",
       )}
+      size="lg"
       onClick={(e) => {
         startTransition(() => {
           setActive()
@@ -151,6 +152,7 @@ const ListSwitchButton: FC<{
         "hover:!bg-theme-item-hover",
         isActive && "!bg-theme-item-active grayscale-0",
       )}
+      size="lg"
       onClick={handleNavigate}
       {...contextMenuProps}
     >
@@ -201,6 +203,7 @@ const InboxSwitchButton: FC<{
         ELECTRON ? "hover:!bg-theme-item-hover" : "",
         isActive && "text-black dark:text-white",
       )}
+      size="lg"
       onClick={handleNavigate}
     >
       <FeedIcon fallback feed={inbox} size={22} noMargin />

diff --git a/apps/renderer/src/modules/timeline-column/index.module.css b/apps/renderer/src/modules/timeline-column/index.module.css
@@ -15,7 +15,7 @@
     mask:
       linear-gradient(to right, white, transparent) 0 50% / 0.8rem 100% no-repeat,
       linear-gradient(white, white) 50% 50% / 100% 100% no-repeat,
-      linear-gradient(to right, transparent, white) 100% 50% / 0.8rem 100% no-repeat;
+      linear-gradient(to right, transparent, white) 100% 50% / 1.6rem 100% no-repeat;
     mask-composite: exclude;
     animation:
       mask-left both linear,

diff --git a/apps/renderer/src/modules/timeline-column/index.tsx b/apps/renderer/src/modules/timeline-column/index.tsx
@@ -215,18 +215,18 @@ const TimelineSelector = ({ timelineId }: { timelineId: string | undefined }) =>
         ref={scrollRef}
         className={clsx(
           styles["mask-scroller"],
-          "flex h-11 justify-between gap-2 overflow-auto px-3 text-xl text-theme-vibrancyFg scrollbar-none",
+          "flex h-11 justify-between gap-0.5 overflow-auto px-2 text-xl text-theme-vibrancyFg scrollbar-none",
         )}
       >
         {timelineList.views.map((timelineId) => (
           <TimelineSwitchButton key={timelineId} timelineId={timelineId} />
         ))}
 
-        {timelineList.inboxes.length > 0 && <DividerVertical className="mx-2 my-auto h-8" />}
+        {timelineList.inboxes.length > 0 && <DividerVertical className="mx-1 my-auto h-8" />}
         {timelineList.inboxes.map((timelineId) => (
           <TimelineSwitchButton key={timelineId} timelineId={timelineId} />
         ))}
-        {timelineList.lists.length > 0 && <DividerVertical className="mx-2 my-auto h-8" />}
+        {timelineList.lists.length > 0 && <DividerVertical className="mx-1 my-auto h-8" />}
         {timelineList.lists.map((timelineId) => (
           <TimelineSwitchButton key={timelineId} timelineId={timelineId} />
         ))}

diff --git a/apps/renderer/src/store/subscription/hooks.ts b/apps/renderer/src/store/subscription/hooks.ts
@@ -35,7 +35,12 @@ export const useViewWithSubscription = () =>
   useSubscriptionStore(
     useCallback((state) => {
       return viewList.filter((view) => {
-        if (view === FeedViewType.Articles) {
+        if (
+          view === FeedViewType.Articles ||
+          view === FeedViewType.SocialMedia ||
+          view === FeedViewType.Pictures ||
+          view === FeedViewType.Videos
+        ) {
           return true
         } else {
           return state.feedIdByView[view].length > 0

diff --git a/packages/components/src/ui/button/action-button.tsx b/packages/components/src/ui/button/action-button.tsx
@@ -19,7 +19,7 @@ export interface ActionButtonProps {
   shortcut?: string
   disableTriggerShortcut?: boolean
   enableHoverableContent?: boolean
-  size?: "sm" | "base"
+  size?: "sm" | "base" | "lg"
 
   /**
    * @description only trigger shortcut when focus with in `<Focusable />`
@@ -30,6 +30,7 @@ export interface ActionButtonProps {
 
 const actionButtonStyleVariant = {
   size: {
+    lg: tw`text-xl size-10`,
     base: tw`text-xl size-8`,
     sm: tw`text-sm size-6`,
   },