chore: refactor sheet components

2026-09-23 14:26:49 +00:00 · 2025-12-22 09:19:12 +08:00
parent e62eebf906
commit ac4336b6c3
4 changed files with 380 additions and 383 deletions
@@ -7,7 +7,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
-import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "@/components/ui/sheet";
+import { Sheet, SheetBody, SheetContent, SheetFooter, SheetHeader, SheetTitle } from "@/components/ui/sheet";
 import useLoading from "@/hooks/useLoading";
 import { useCollectionStore, useShortcutStore, useWorkspaceStore } from "@/stores";
 import { Collection } from "@/types/proto/api/v1/collection_service";
@@ -163,12 +163,12 @@ const CreateCollectionDrawer: React.FC<Props> = (props: Props) => {

  return (
    <Sheet open={true} onOpenChange={onClose}>
-      <SheetContent className="w-full sm:max-w-md overflow-y-auto">
+      <SheetContent className="w-full sm:max-w-md">
        <SheetHeader>
          <SheetTitle>{isCreating ? "Create Collection" : "Edit Collection"}</SheetTitle>
-          <SheetDescription>{isCreating ? "Create a new collection of shortcuts" : "Edit your collection details"}</SheetDescription>
        </SheetHeader>
-        <div className="mt-6 space-y-4">
+        <SheetBody>
+          <div className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="name">
                Name <span className="text-destructive">*</span>
@@ -263,7 +263,8 @@ const CreateCollectionDrawer: React.FC<Props> = (props: Props) => {
              </div>
            </div>
          </div>
-        <SheetFooter className="mt-6">
+        </SheetBody>
+        <SheetFooter>
          <Button variant="outline" disabled={requestState.isLoading} onClick={onClose}>
            {t("common.cancel")}
          </Button>
@@ -7,7 +7,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
-import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "@/components/ui/sheet";
+import { Sheet, SheetBody, SheetContent, SheetFooter, SheetHeader, SheetTitle } from "@/components/ui/sheet";
 import { workspaceServiceClient } from "@/grpcweb";
 import { absolutifyLink } from "@/helpers/utils";
 import useLoading from "@/hooks/useLoading";
@@ -137,14 +137,12 @@ const CreateIdentityProviderDrawer: React.FC<Props> = (props: Props) => {

  return (
    <Sheet open={true} onOpenChange={onClose}>
-      <SheetContent className="w-full sm:max-w-md overflow-y-auto">
+      <SheetContent className="w-full sm:max-w-md">
        <SheetHeader>
          <SheetTitle>{isCreating ? "Create Identity Provider" : "Edit Identity Provider"}</SheetTitle>
-          <SheetDescription>
-            {isCreating ? "Configure a new OAuth2 identity provider" : "Edit your identity provider settings"}
-          </SheetDescription>
        </SheetHeader>
-        <div className="mt-6 space-y-4">
+        <SheetBody>
+          <div className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="title">
                Title <span className="text-destructive">*</span>
@@ -157,9 +155,7 @@ const CreateIdentityProviderDrawer: React.FC<Props> = (props: Props) => {
                onChange={handleTitleInputChange}
              />
            </div>
-
            <Separator />
-
            <div className="space-y-2">
              <p className="text-sm font-medium">Identity provider information</p>
              {isCreating && (
@@ -170,7 +166,6 @@ const CreateIdentityProviderDrawer: React.FC<Props> = (props: Props) => {
                </div>
              )}
            </div>
-
            <div className="space-y-2">
              <Label htmlFor="client-id">
                Client ID <span className="text-destructive">*</span>
@@ -183,7 +178,6 @@ const CreateIdentityProviderDrawer: React.FC<Props> = (props: Props) => {
                onChange={(e) => handleOAuth2ConfigChange(e, "clientId")}
              />
            </div>
-
            <div className="space-y-2">
              <Label htmlFor="client-secret">
                Client Secret <span className="text-destructive">*</span>
@@ -196,7 +190,6 @@ const CreateIdentityProviderDrawer: React.FC<Props> = (props: Props) => {
                onChange={(e) => handleOAuth2ConfigChange(e, "clientSecret")}
              />
            </div>
-
            <div className="space-y-2">
              <Label htmlFor="auth-url">
                Authorization endpoint <span className="text-destructive">*</span>
@@ -209,7 +202,6 @@ const CreateIdentityProviderDrawer: React.FC<Props> = (props: Props) => {
                onChange={(e) => handleOAuth2ConfigChange(e, "authUrl")}
              />
            </div>
-
            <div className="space-y-2">
              <Label htmlFor="token-url">
                Token endpoint <span className="text-destructive">*</span>
@@ -222,7 +214,6 @@ const CreateIdentityProviderDrawer: React.FC<Props> = (props: Props) => {
                onChange={(e) => handleOAuth2ConfigChange(e, "tokenUrl")}
              />
            </div>
-
            <div className="space-y-2">
              <Label htmlFor="user-info-url">
                User endpoint <span className="text-destructive">*</span>
@@ -235,7 +226,6 @@ const CreateIdentityProviderDrawer: React.FC<Props> = (props: Props) => {
                onChange={(e) => handleOAuth2ConfigChange(e, "userInfoUrl")}
              />
            </div>
-
            <div className="space-y-2">
              <Label htmlFor="scopes">
                Scopes <span className="text-destructive">*</span>
@@ -248,13 +238,10 @@ const CreateIdentityProviderDrawer: React.FC<Props> = (props: Props) => {
                onChange={(e) => handleOAuth2ConfigChange(e, "scopes")}
              />
            </div>
-
            <Separator />
-
            <div className="space-y-2">
              <p className="text-sm font-medium">Field mapping</p>
            </div>
-
            <div className="space-y-2">
              <Label htmlFor="identifier">
                Identifier <span className="text-destructive">*</span>
@@ -267,7 +254,6 @@ const CreateIdentityProviderDrawer: React.FC<Props> = (props: Props) => {
                onChange={(e) => handleFieldMappingChange(e, "identifier")}
              />
            </div>
-
            <div className="space-y-2">
              <Label htmlFor="display-name">Display name</Label>
              <Input
@@ -279,8 +265,8 @@ const CreateIdentityProviderDrawer: React.FC<Props> = (props: Props) => {
              />
            </div>
          </div>
-
-        <SheetFooter className="mt-6">
+        </SheetBody>
+        <SheetFooter>
          <Button variant="outline" disabled={requestState.isLoading} onClick={onClose}>
            {t("common.cancel")}
          </Button>
@@ -8,7 +8,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
-import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "@/components/ui/sheet";
+import { Sheet, SheetBody, SheetContent, SheetFooter, SheetHeader, SheetTitle } from "@/components/ui/sheet";
 import { Textarea } from "@/components/ui/textarea";
 import useLoading from "@/hooks/useLoading";
 import { useShortcutStore, useWorkspaceStore } from "@/stores";
@@ -211,12 +211,12 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {

  return (
    <Sheet open={true} onOpenChange={onClose}>
-      <SheetContent className="w-full sm:max-w-md overflow-y-auto">
+      <SheetContent className="w-full sm:max-w-md">
        <SheetHeader>
          <SheetTitle>{isCreating ? "Create Shortcut" : "Edit Shortcut"}</SheetTitle>
-          <SheetDescription>{isCreating ? "Create a new shortcut" : "Edit your shortcut details"}</SheetDescription>
        </SheetHeader>
-        <div className="mt-6 space-y-4">
+        <SheetBody>
+          <div className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="name">
                Name <span className="text-destructive">*</span>
@@ -232,7 +232,6 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
                />
              </div>
            </div>
-
            <div className="space-y-2">
              <Label htmlFor="link">
                Link <span className="text-destructive">*</span>
@@ -245,7 +244,6 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
                onChange={handleLinkInputChange}
              />
            </div>
-
            <div className="space-y-2">
              <Label htmlFor="title">Title</Label>
              <Input
@@ -256,7 +254,6 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
                onChange={handleTitleInputChange}
              />
            </div>
-
            <div className="space-y-2">
              <Label htmlFor="description">Description</Label>
              <Input
@@ -267,7 +264,6 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
                onChange={handleDescriptionInputChange}
              />
            </div>
-
            <div className="space-y-2">
              <Label htmlFor="tags">Tags</Label>
              <Input id="tags" type="text" placeholder="The tags of shortcut" value={tag} onChange={handleTagsInputChange} />
@@ -288,7 +284,6 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
                </div>
              )}
            </div>
-
            <div className="flex items-center space-x-2">
              <Checkbox
                id="public"
@@ -305,9 +300,7 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
                {t(`shortcut.visibility.public.description`)}
              </Label>
            </div>
-
            <Separator className="my-4" />
-
            <div className="border rounded-lg overflow-hidden">
              <div
                className={classnames(
@@ -366,8 +359,8 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
              )}
            </div>
          </div>
-
-        <SheetFooter className="mt-6">
+        </SheetBody>
+        <SheetFooter>
          <Button variant="outline" onClick={onClose} disabled={requestState.isLoading}>
            {t("common.cancel")}
          </Button>
@@ -28,7 +28,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;

 const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 flex flex-col overflow-hidden",
  {
    variants: {
      side: {
@@ -64,12 +64,17 @@ const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Con
 SheetContent.displayName = SheetPrimitive.Content.displayName;

 const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+  <div className={cn("flex flex-col space-y-2 text-center sm:text-left flex-shrink-0", className)} {...props} />
 );
 SheetHeader.displayName = "SheetHeader";

+const SheetBody = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex-1 overflow-y-auto min-h-0", className)} {...props} />
+);
+SheetBody.displayName = "SheetBody";
+
 const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
+  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 pt-4 flex-shrink-0", className)} {...props} />
 );
 SheetFooter.displayName = "SheetFooter";

@@ -89,4 +94,16 @@ const SheetDescription = React.forwardRef<
 ));
 SheetDescription.displayName = SheetPrimitive.Description.displayName;

-export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription };
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetBody,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};