Ethica/Termix
1
0
Fork 0
mirror of https://github.com/Termix-SSH/Termix.git synced 2026-08-29 18:31:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add semantic motion system (#1320)

Browse Source 
* feat: add semantic motion system

* feat: animate session workspace transitions

* feat: refine motion accessibility and transfer feedback
This commit is contained in:
ZacharyZcR
2026-08-24 19:36:10 +08:00
committed by GitHub
parent fafd428072
commit 69002e6416
15 changed files with 569 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ui/shell/TabBar.tsx
+22 -3
View File
@@ -1,5 +1,6 @@
import { useRef, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { motion, useReducedMotion } from "motion/react";
import { Button } from "@/components/button";
import { Separator } from "@/components/separator";
import {
@@ -77,6 +78,7 @@ export function TabBar({
onToggleRightDock?: () => void;
}) {
const { t } = useTranslation();
const reduceMotion = useReducedMotion();
const [open, setOpen] = useState(true);
const [dragTabId, setDragTabId] = useState<string | null>(null);
const [dragTargetIndex, setDragTargetIndex] = useState<number | null>(null);
@@ -214,7 +216,7 @@ export function TabBar({
return (
<div className="flex flex-col shrink-0 min-w-0">
<div
className={`flex items-end bg-sidebar min-w-0 transition-all duration-200 ${open ? "h-12.5 border-b border-border" : "h-0 overflow-hidden"}`}
className={`flex items-end bg-sidebar min-w-0 transition-[height,border-color] duration-200 ${open ? "h-12.5 border-b border-border" : "h-0 overflow-hidden"}`}
>
<div
ref={tabBarRef}
@@ -318,10 +320,27 @@ export function TabBar({
${index === 0 && tab.type !== "dashboard" ? "border-l border-border" : ""}
${
tab.type === "dashboard"
? `px-2.5 md:px-3.5 ${active ? "border-b-2 border-b-accent-brand bg-surface text-foreground" : "text-muted-foreground hover:text-foreground hover:bg-surface"}`
: `px-2.5 md:px-4 font-medium ${active ? "border-b-2 border-b-accent-brand bg-surface text-foreground" : "text-muted-foreground hover:text-foreground hover:bg-surface"}`
? `px-2.5 md:px-3.5 ${active ? "bg-surface text-foreground" : "text-muted-foreground hover:text-foreground hover:bg-surface"}`
: `px-2.5 md:px-4 font-medium ${active ? "bg-surface text-foreground" : "text-muted-foreground hover:text-foreground hover:bg-surface"}`
}`}
>
{active && (
<motion.span
layoutId="active-workspace-tab"
data-workspace-indicator={tab.id}
className="pointer-events-none absolute inset-x-0 bottom-0 h-0.5 bg-accent-brand z-10"
transition={
reduceMotion
? { duration: 0 }
: {
type: "spring",
stiffness: 520,
damping: 42,
mass: 0.55,
}
}
/>
)}
{/* Focused-pane indicator: brand accent bottom border overlay */}
{showFocusIndicator && (
<span className="absolute bottom-0 left-0 right-0 h-0.5 bg-accent-brand/70 z-10" />