apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-17 18:35:19 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: replace Tabs component with animated-tabs in InboxSidebar for improved UI transitions; adjust loading skeleton key props for consistency

Browse source
This commit is contained in:
Anish Sarkar 2026-03-21 22:42:17 +05:30
parent 856073b61b
commit 7d33a69e20
2 changed files with 17 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

36
surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx
View file

@ -43,7 +43,7 @@ import {
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { Spinner } from "@/components/ui/spinner"; import { Spinner } from "@/components/ui/spinner";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tabs, TabsList, TabsTrigger } from "@/components/ui/animated-tabs";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons"; import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
import { import {
@ -851,14 +851,11 @@ export function InboxSidebar({
setActiveFilter("all"); setActiveFilter("all");
} }
}} }}
className="shrink-0 mx-4" className="shrink-0 mx-4 mt-2"
> >
<TabsList className="w-full h-auto p-0 bg-transparent rounded-none border-b"> <TabsList stretch showBottomBorder size="sm">
<TabsTrigger <TabsTrigger value="comments">
value="comments" <span className="inline-flex items-center gap-1.5">
className="group flex-1 rounded-none border-b-2 border-transparent px-1 py-2 text-xs font-medium data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
>
<span className="w-full inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg hover:bg-muted group-data-[state=active]:bg-muted transition-colors">
<MessageSquare className="h-4 w-4" /> <MessageSquare className="h-4 w-4" />
<span>{t("comments") || "Comments"}</span> <span>{t("comments") || "Comments"}</span>
<span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-primary/20 text-muted-foreground text-xs font-medium"> <span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-primary/20 text-muted-foreground text-xs font-medium">
@ -866,11 +863,8 @@ export function InboxSidebar({
</span> </span>
</span> </span>
</TabsTrigger> </TabsTrigger>
<TabsTrigger <TabsTrigger value="status">
value="status" <span className="inline-flex items-center gap-1.5">
className="group flex-1 rounded-none border-b-2 border-transparent px-1 py-2 text-xs font-medium data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
>
<span className="w-full inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg hover:bg-muted group-data-[state=active]:bg-muted transition-colors">
<History className="h-4 w-4" /> <History className="h-4 w-4" />
<span>{t("status") || "Status"}</span> <span>{t("status") || "Status"}</span>
<span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-primary/20 text-muted-foreground text-xs font-medium"> <span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-primary/20 text-muted-foreground text-xs font-medium">
@ -885,9 +879,9 @@ export function InboxSidebar({
{isLoading ? ( {isLoading ? (
<div className="space-y-2"> <div className="space-y-2">
{activeTab === "comments" {activeTab === "comments"
? [85, 60, 90, 70, 50, 75].map((titleWidth, i) => ( ? [85, 60, 90, 70, 50, 75].map((titleWidth) => (
<div <div
key={`skeleton-comment-${i}`} key={`skeleton-comment-${titleWidth}`}
className="flex items-center gap-3 rounded-lg px-3 py-3 h-[80px]" className="flex items-center gap-3 rounded-lg px-3 py-3 h-[80px]"
> >
<Skeleton className="h-8 w-8 rounded-full shrink-0" /> <Skeleton className="h-8 w-8 rounded-full shrink-0" />
@ -898,9 +892,9 @@ export function InboxSidebar({
<Skeleton className="h-3 w-6 shrink-0 rounded" /> <Skeleton className="h-3 w-6 shrink-0 rounded" />
</div> </div>
)) ))
: [75, 90, 55, 80, 65, 85].map((titleWidth, i) => ( : [75, 90, 55, 80, 65, 85].map((titleWidth) => (
<div <div
key={`skeleton-status-${i}`} key={`skeleton-status-${titleWidth}`}
className="flex items-center gap-3 rounded-lg px-3 py-3 h-[80px]" className="flex items-center gap-3 rounded-lg px-3 py-3 h-[80px]"
> >
<Skeleton className="h-8 w-8 rounded-full shrink-0" /> <Skeleton className="h-8 w-8 rounded-full shrink-0" />
@ -1003,9 +997,9 @@ export function InboxSidebar({
)} )}
{activeSource.loadingMore && {activeSource.loadingMore &&
(activeTab === "comments" (activeTab === "comments"
? [80, 60, 90].map((titleWidth, i) => ( ? [80, 60, 90].map((titleWidth) => (
<div <div
key={`loading-more-comment-${i}`} key={`loading-more-comment-${titleWidth}`}
className="flex items-center gap-3 rounded-lg px-3 py-3 h-[80px]" className="flex items-center gap-3 rounded-lg px-3 py-3 h-[80px]"
> >
<Skeleton className="h-8 w-8 rounded-full shrink-0" /> <Skeleton className="h-8 w-8 rounded-full shrink-0" />
@ -1016,9 +1010,9 @@ export function InboxSidebar({
<Skeleton className="h-3 w-6 shrink-0 rounded" /> <Skeleton className="h-3 w-6 shrink-0 rounded" />
</div> </div>
)) ))
: [70, 85, 55].map((titleWidth, i) => ( : [70, 85, 55].map((titleWidth) => (
<div <div
key={`loading-more-status-${i}`} key={`loading-more-status-${titleWidth}`}
className="flex items-center gap-3 rounded-lg px-3 py-3 h-[80px]" className="flex items-center gap-3 rounded-lg px-3 py-3 h-[80px]"
> >
<Skeleton className="h-8 w-8 rounded-full shrink-0" /> <Skeleton className="h-8 w-8 rounded-full shrink-0" />

4
surfsense_web/components/ui/animated-tabs.tsx
View file

@ -49,9 +49,9 @@ const VARIANT_CLASSES = {
} as const; } as const;
const ACTIVE_INDICATOR_CLASSES = { const ACTIVE_INDICATOR_CLASSES = {
default: "h-[4px] bg-primary dark:bg-primary", default: "h-[2px] bg-primary dark:bg-primary",
pills: "hidden", pills: "hidden",
underlined: "h-[4px] bg-primary dark:bg-primary", underlined: "h-[2px] bg-primary dark:bg-primary",
} as const; } as const;
const HOVER_INDICATOR_CLASSES = { const HOVER_INDICATOR_CLASSES = {