feat(ui): unified tab-switch animation - enter-only fade in TabPanel

One 0.2s enter-only fade (opacity + 6px rise) in the kit TabPanel covers every tab switch (M3 clean-fade pattern; CSS animation so the global reduced-motion kill switch applies). Orders and Invoices view switchers now render through TabPanel (also fixes their dangling aria-controls). Removed the inconsistent bespoke framer entrances inside tab content (CompanySettings cascade, ReceivedInvoices card). Filter-style status tabs (Projects/Offers/Invoices) deliberately keep the refetch dim only. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-06-12 18:04:32 +02:00
parent bf33d0a543
commit b9103c59f0
5 changed files with 878 additions and 919 deletions
--- a/src/admin/pages/CompanySettings.tsx
+++ b/src/admin/pages/CompanySettings.tsx
@@ -8,7 +8,6 @@ import {
  type CompanySettingsData,
 } from "../lib/queries/settings";
 import { bankAccountsOptions, type BankAccount } from "../lib/queries/common";
-import { motion } from "framer-motion";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import IconButton from "@mui/material/IconButton";
@@ -633,11 +632,6 @@ export default function CompanySettings({
  return (
    <Box>
      {!embedded && (
-        <motion.div
-          initial={{ opacity: 0, y: 12 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.25 }}
-        >
        <Box
          sx={{
            display: "flex",
@@ -650,11 +644,7 @@ export default function CompanySettings({
        >
          <Box>
            <Typography variant="h4">Nastavení firmy</Typography>
-              <Typography
-                variant="body2"
-                color="text.secondary"
-                sx={{ mt: 0.5 }}
-              >
+            <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
              Firemní údaje a bankovní účty
            </Typography>
          </Box>
@@ -662,7 +652,6 @@ export default function CompanySettings({
            {saving ? "Ukládání..." : "Uložit nastavení"}
          </Button>
        </Box>
-        </motion.div>
      )}

      <Box
@@ -674,11 +663,6 @@ export default function CompanySettings({
      >
        {/* Company Info */}
        {(canEditCompany || !embedded) && (
-          <motion.div
-            initial={{ opacity: 0, y: 12 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.25, delay: 0.06 }}
-          >
          <Card>
            <Typography variant="h6" sx={{ mb: 2 }}>
              Firemní údaje
@@ -834,10 +818,7 @@ export default function CompanySettings({
                  <Box sx={{ mt: 0.5 }}>
                    <CheckboxField
                      label={
-                          <Typography
-                            variant="body2"
-                            sx={{ fontSize: "0.8rem" }}
-                          >
+                        <Typography variant="body2" sx={{ fontSize: "0.8rem" }}>
                          Zobrazit název v PDF
                        </Typography>
                      }
@@ -876,16 +857,10 @@ export default function CompanySettings({
              </Button>
            </Box>
          </Card>
-          </motion.div>
        )}

        {/* Bank Accounts */}
        {(canManageBanking || !embedded) && (
-          <motion.div
-            initial={{ opacity: 0, y: 12 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.25, delay: 0.08 }}
-          >
          <Card>
            <Typography variant="h6" sx={{ mb: 2 }}>
              Bankovní účty
@@ -921,9 +896,7 @@ export default function CompanySettings({
                    color="text.secondary"
                    sx={{ mb: 1.5 }}
                  >
-                      {editingBank !== null
-                        ? "Upravit účet"
-                        : "Přidat nový účet"}
+                    {editingBank !== null ? "Upravit účet" : "Přidat nový účet"}
                  </Typography>
                  <Box
                    sx={{
@@ -1046,16 +1019,10 @@ export default function CompanySettings({
              </>
            )}
          </Card>
-          </motion.div>
        )}

        {/* PDF Field Order */}
        {(canEditCompany || !embedded) && (
-          <motion.div
-            initial={{ opacity: 0, y: 12 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.25, delay: 0.08 }}
-          >
          <Card>
            <Typography variant="h6" sx={{ mb: 2 }}>
              Pořadí polí dodavatele v PDF
@@ -1119,16 +1086,10 @@ export default function CompanySettings({
              ))}
            </Box>
          </Card>
-          </motion.div>
        )}

        {/* Document Numbering */}
        {(canEditCompany || !embedded) && (
-          <motion.div
-            initial={{ opacity: 0, y: 12 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.25, delay: 0.1 }}
-          >
          <Card>
            <Typography variant="h6" sx={{ mb: 2 }}>
              Číslování dokladů
@@ -1143,11 +1104,11 @@ export default function CompanySettings({
                mb: 2,
              }}
            >
-                <strong>Dostupné zástupné znaky:</strong>{" "}
-                <code>{"{YYYY}"}</code> rok, <code>{"{YY}"}</code> rok (2
-                číslice), <code>{"{PREFIX}"}</code> prefix (nabídky / sklad),{" "}
-                <code>{"{CODE}"}</code> typový kód, <code>{"{NNN}"}</code>{" "}
-                pořadí (3 číslice), <code>{"{NNNN}"}</code> pořadí (4 číslice),{" "}
+              <strong>Dostupné zástupné znaky:</strong> <code>{"{YYYY}"}</code>{" "}
+              rok, <code>{"{YY}"}</code> rok (2 číslice),{" "}
+              <code>{"{PREFIX}"}</code> prefix (nabídky / sklad),{" "}
+              <code>{"{CODE}"}</code> typový kód, <code>{"{NNN}"}</code> pořadí
+              (3 číslice), <code>{"{NNNN}"}</code> pořadí (4 číslice),{" "}
              <code>{"{NNNNN}"}</code> pořadí (5 číslic)
            </Box>
            {[
@@ -1310,16 +1271,10 @@ export default function CompanySettings({
              );
            })}
          </Card>
-          </motion.div>
        )}

        {/* Currency & VAT */}
        {(canEditCompany || !embedded) && (
-          <motion.div
-            initial={{ opacity: 0, y: 12 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.25, delay: 0.12 }}
-          >
          <Card>
            <Typography variant="h6" sx={{ mb: 2 }}>
              Měna a DPH
@@ -1383,16 +1338,10 @@ export default function CompanySettings({
              </Field>
            </Box>
          </Card>
-          </motion.div>
        )}

        {/* Logo */}
        {(canEditCompany || !embedded) && (
-          <motion.div
-            initial={{ opacity: 0, y: 12 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.25, delay: 0.14 }}
-          >
          <Card>
            <Typography variant="h6" sx={{ mb: 2 }}>
              Logo
@@ -1506,25 +1455,13 @@ export default function CompanySettings({
              </Box>
            </Box>
          </Card>
-          </motion.div>
        )}
      </Box>

      {embedded && canEditCompany && (
-        <motion.div
-          initial={{ opacity: 0, y: 12 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.25, delay: 0.2 }}
-        >
-          <Button
-            onClick={handleSave}
-            fullWidth
-            sx={{ mt: 2 }}
-            disabled={saving}
-          >
+        <Button onClick={handleSave} fullWidth sx={{ mt: 2 }} disabled={saving}>
          {saving ? "Ukládání..." : "Uložit nastavení firmy"}
        </Button>
-        </motion.div>
      )}

      <ConfirmDialog
--- a/src/admin/pages/Invoices.tsx
+++ b/src/admin/pages/Invoices.tsx
@@ -40,6 +40,7 @@ import {
  LoadingState,
  FilterBar,
  Tabs,
+  TabPanel,
  PageHeader,
  PageEnter,
  type DataColumn,
@@ -706,7 +707,7 @@ export default function Invoices() {
        </Box>
      </Box>

-      {activeTab === "received" ? (
+      <TabPanel value="received" current={activeTab} sx={{ pt: 0 }}>
        <Suspense fallback={<LoadingState />}>
          <ReceivedInvoices
            statsMonth={statsMonth}
@@ -715,7 +716,8 @@ export default function Invoices() {
            setUploadOpen={setReceivedUploadOpen}
          />
        </Suspense>
-      ) : (
+      </TabPanel>
+      <TabPanel value="issued" current={activeTab} sx={{ pt: 0 }}>
        <>
          {renderKpi()}

@@ -808,7 +810,7 @@ export default function Invoices() {
            loading={deleting}
          />
        </>
-      )}
+      </TabPanel>
    </PageEnter>
  );
 }
--- a/src/admin/pages/Orders.tsx
+++ b/src/admin/pages/Orders.tsx
@@ -5,7 +5,14 @@ import Typography from "@mui/material/Typography";
 import IconButton from "@mui/material/IconButton";
 import { useAuth } from "../context/AuthContext";
 import Forbidden from "../components/Forbidden";
-import { Button, Tabs, PageHeader, PageEnter, LoadingState } from "../ui";
+import {
+  Button,
+  Tabs,
+  TabPanel,
+  PageHeader,
+  PageEnter,
+  LoadingState,
+} from "../ui";
 import OrdersReceived from "./ReceivedOrders";

 const IssuedOrders = lazy(() => import("./IssuedOrders"));
@@ -170,18 +177,19 @@ export default function Orders() {
        </Box>
      </Box>

-      {activeTab === "vydane" ? (
+      <TabPanel value="vydane" current={activeTab} sx={{ pt: 0 }}>
        <Suspense fallback={<LoadingState />}>
          <IssuedOrders month={statsMonth} year={statsYear} />
        </Suspense>
-      ) : (
+      </TabPanel>
+      <TabPanel value="prijate" current={activeTab} sx={{ pt: 0 }}>
        <OrdersReceived
          month={statsMonth}
          year={statsYear}
          createOpen={createOpen}
          setCreateOpen={setCreateOpen}
        />
-      )}
+      </TabPanel>
    </PageEnter>
  );
 }
--- a/src/admin/pages/ReceivedInvoices.tsx
+++ b/src/admin/pages/ReceivedInvoices.tsx
@@ -1,6 +1,5 @@
 import { useState, useEffect, useRef } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { motion } from "framer-motion";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import IconButton from "@mui/material/IconButton";
@@ -810,11 +809,6 @@ export default function ReceivedInvoices({
    <>
      {renderKpi()}

-      <motion.div
-        initial={{ opacity: 0, y: 12 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.25, delay: 0.08 }}
-      >
      <Card>
        <FilterBar>
          <Box sx={{ flex: "1 1 320px" }}>
@@ -876,7 +870,6 @@ export default function ReceivedInvoices({
          </Box>
        )}
      </Card>
-      </motion.div>

      {/* Upload Modal */}
      <Modal
--- a/src/admin/ui/Tabs.tsx
+++ b/src/admin/ui/Tabs.tsx
@@ -2,6 +2,8 @@ import type { ReactNode } from "react";
 import MuiTabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
 import Box from "@mui/material/Box";
+import { keyframes } from "@mui/system";
+import type { SxProps, Theme } from "@mui/material/styles";

 export interface TabDef {
  value: string;
@@ -47,15 +49,26 @@ export function Tabs({
  );
 }

+// The ONE tab-switch animation, app-wide: enter-only fade of the incoming
+// panel (M3 "clean fade" — old content drops instantly, no exit/slide; tabs
+// are too high-frequency for anything longer). Kept as a CSS animation so the
+// global prefers-reduced-motion kill switch in GlobalStyles neutralizes it.
+const panelEnter = keyframes({
+  from: { opacity: 0, transform: "translateY(6px)" },
+  to: { opacity: 1, transform: "none" },
+});
+
 /** Renders children only when its value matches the current tab. */
 export function TabPanel({
  value,
  current,
  children,
+  sx,
 }: {
  value: string;
  current: string;
  children: ReactNode;
+  sx?: SxProps<Theme>;
 }) {
  if (value !== current) return null;
  return (
@@ -63,7 +76,13 @@ export function TabPanel({
      role="tabpanel"
      id={panelId(value)}
      aria-labelledby={tabId(value)}
-      sx={{ pt: 2.5 }}
+      sx={[
+        {
+          pt: 2.5,
+          animation: `${panelEnter} 0.2s cubic-bezier(0.16, 1, 0.3, 1)`,
+        },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
    >
      {children}
    </Box>