aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2026-08-05 23:22:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: refactor sheet components

Browse Source
This commit is contained in:
Johnny
2025-12-22 09:19:12 +08:00
parent e62eebf906
commit ac4336b6c3
4 changed files with 380 additions and 383 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/web/src/components/CreateCollectionDrawer.tsx
+6 -5
View File
@@ -7,7 +7,7 @@ import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator"; 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 useLoading from "@/hooks/useLoading";
import { useCollectionStore, useShortcutStore, useWorkspaceStore } from "@/stores"; import { useCollectionStore, useShortcutStore, useWorkspaceStore } from "@/stores";
import { Collection } from "@/types/proto/api/v1/collection_service"; import { Collection } from "@/types/proto/api/v1/collection_service";
@@ -163,12 +163,12 @@ const CreateCollectionDrawer: React.FC<Props> = (props: Props) => {
return ( return (
<Sheet open={true} onOpenChange={onClose}> <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> <SheetHeader>
<SheetTitle>{isCreating ? "Create Collection" : "Edit Collection"}</SheetTitle> <SheetTitle>{isCreating ? "Create Collection" : "Edit Collection"}</SheetTitle>
<SheetDescription>{isCreating ? "Create a new collection of shortcuts" : "Edit your collection details"}</SheetDescription>
</SheetHeader> </SheetHeader>
<div className="mt-6 space-y-4"> <SheetBody>
<div className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="name"> <Label htmlFor="name">
Name <span className="text-destructive">*</span> Name <span className="text-destructive">*</span>
@@ -263,7 +263,8 @@ const CreateCollectionDrawer: React.FC<Props> = (props: Props) => {
</div> </div>
</div> </div>
</div> </div>
<SheetFooter className="mt-6"> </SheetBody>
<SheetFooter>
<Button variant="outline" disabled={requestState.isLoading} onClick={onClose}> <Button variant="outline" disabled={requestState.isLoading} onClick={onClose}>
{t("common.cancel")} {t("common.cancel")}
</Button> </Button>
frontend/web/src/components/CreateIdentityProviderDrawer.tsx
+6 -20
View File
@@ -7,7 +7,7 @@ import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator"; 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 { workspaceServiceClient } from "@/grpcweb";
import { absolutifyLink } from "@/helpers/utils"; import { absolutifyLink } from "@/helpers/utils";
import useLoading from "@/hooks/useLoading"; import useLoading from "@/hooks/useLoading";
@@ -137,14 +137,12 @@ const CreateIdentityProviderDrawer: React.FC<Props> = (props: Props) => {
return ( return (
<Sheet open={true} onOpenChange={onClose}> <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> <SheetHeader>
<SheetTitle>{isCreating ? "Create Identity Provider" : "Edit Identity Provider"}</SheetTitle> <SheetTitle>{isCreating ? "Create Identity Provider" : "Edit Identity Provider"}</SheetTitle>
<SheetDescription>
{isCreating ? "Configure a new OAuth2 identity provider" : "Edit your identity provider settings"}
</SheetDescription>
</SheetHeader> </SheetHeader>
<div className="mt-6 space-y-4"> <SheetBody>
<div className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="title"> <Label htmlFor="title">
Title <span className="text-destructive">*</span> Title <span className="text-destructive">*</span>
@@ -157,9 +155,7 @@ const CreateIdentityProviderDrawer: React.FC<Props> = (props: Props) => {
onChange={handleTitleInputChange} onChange={handleTitleInputChange}
/> />
</div> </div>
<Separator /> <Separator />
<div className="space-y-2"> <div className="space-y-2">
<p className="text-sm font-medium">Identity provider information</p> <p className="text-sm font-medium">Identity provider information</p>
{isCreating && ( {isCreating && (
@@ -170,7 +166,6 @@ const CreateIdentityProviderDrawer: React.FC<Props> = (props: Props) => {
</div> </div>
)} )}
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="client-id"> <Label htmlFor="client-id">
Client ID <span className="text-destructive">*</span> Client ID <span className="text-destructive">*</span>
@@ -183,7 +178,6 @@ const CreateIdentityProviderDrawer: React.FC<Props> = (props: Props) => {
onChange={(e) => handleOAuth2ConfigChange(e, "clientId")} onChange={(e) => handleOAuth2ConfigChange(e, "clientId")}
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="client-secret"> <Label htmlFor="client-secret">
Client Secret <span className="text-destructive">*</span> Client Secret <span className="text-destructive">*</span>
@@ -196,7 +190,6 @@ const CreateIdentityProviderDrawer: React.FC<Props> = (props: Props) => {
onChange={(e) => handleOAuth2ConfigChange(e, "clientSecret")} onChange={(e) => handleOAuth2ConfigChange(e, "clientSecret")}
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="auth-url"> <Label htmlFor="auth-url">
Authorization endpoint <span className="text-destructive">*</span> Authorization endpoint <span className="text-destructive">*</span>
@@ -209,7 +202,6 @@ const CreateIdentityProviderDrawer: React.FC<Props> = (props: Props) => {
onChange={(e) => handleOAuth2ConfigChange(e, "authUrl")} onChange={(e) => handleOAuth2ConfigChange(e, "authUrl")}
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="token-url"> <Label htmlFor="token-url">
Token endpoint <span className="text-destructive">*</span> Token endpoint <span className="text-destructive">*</span>
@@ -222,7 +214,6 @@ const CreateIdentityProviderDrawer: React.FC<Props> = (props: Props) => {
onChange={(e) => handleOAuth2ConfigChange(e, "tokenUrl")} onChange={(e) => handleOAuth2ConfigChange(e, "tokenUrl")}
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="user-info-url"> <Label htmlFor="user-info-url">
User endpoint <span className="text-destructive">*</span> User endpoint <span className="text-destructive">*</span>
@@ -235,7 +226,6 @@ const CreateIdentityProviderDrawer: React.FC<Props> = (props: Props) => {
onChange={(e) => handleOAuth2ConfigChange(e, "userInfoUrl")} onChange={(e) => handleOAuth2ConfigChange(e, "userInfoUrl")}
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="scopes"> <Label htmlFor="scopes">
Scopes <span className="text-destructive">*</span> Scopes <span className="text-destructive">*</span>
@@ -248,13 +238,10 @@ const CreateIdentityProviderDrawer: React.FC<Props> = (props: Props) => {
onChange={(e) => handleOAuth2ConfigChange(e, "scopes")} onChange={(e) => handleOAuth2ConfigChange(e, "scopes")}
/> />
</div> </div>
<Separator /> <Separator />
<div className="space-y-2"> <div className="space-y-2">
<p className="text-sm font-medium">Field mapping</p> <p className="text-sm font-medium">Field mapping</p>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="identifier"> <Label htmlFor="identifier">
Identifier <span className="text-destructive">*</span> Identifier <span className="text-destructive">*</span>
@@ -267,7 +254,6 @@ const CreateIdentityProviderDrawer: React.FC<Props> = (props: Props) => {
onChange={(e) => handleFieldMappingChange(e, "identifier")} onChange={(e) => handleFieldMappingChange(e, "identifier")}
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="display-name">Display name</Label> <Label htmlFor="display-name">Display name</Label>
<Input <Input
@@ -279,8 +265,8 @@ const CreateIdentityProviderDrawer: React.FC<Props> = (props: Props) => {
/> />
</div> </div>
</div> </div>
</SheetBody>
<SheetFooter className="mt-6"> <SheetFooter>
<Button variant="outline" disabled={requestState.isLoading} onClick={onClose}> <Button variant="outline" disabled={requestState.isLoading} onClick={onClose}>
{t("common.cancel")} {t("common.cancel")}
</Button> </Button>
frontend/web/src/components/CreateShortcutDrawer.tsx
+6 -13
View File
@@ -8,7 +8,7 @@ import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator"; 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 { Textarea } from "@/components/ui/textarea";
import useLoading from "@/hooks/useLoading"; import useLoading from "@/hooks/useLoading";
import { useShortcutStore, useWorkspaceStore } from "@/stores"; import { useShortcutStore, useWorkspaceStore } from "@/stores";
@@ -211,12 +211,12 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
return ( return (
<Sheet open={true} onOpenChange={onClose}> <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> <SheetHeader>
<SheetTitle>{isCreating ? "Create Shortcut" : "Edit Shortcut"}</SheetTitle> <SheetTitle>{isCreating ? "Create Shortcut" : "Edit Shortcut"}</SheetTitle>
<SheetDescription>{isCreating ? "Create a new shortcut" : "Edit your shortcut details"}</SheetDescription>
</SheetHeader> </SheetHeader>
<div className="mt-6 space-y-4"> <SheetBody>
<div className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="name"> <Label htmlFor="name">
Name <span className="text-destructive">*</span> Name <span className="text-destructive">*</span>
@@ -232,7 +232,6 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
/> />
</div> </div>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="link"> <Label htmlFor="link">
Link <span className="text-destructive">*</span> Link <span className="text-destructive">*</span>
@@ -245,7 +244,6 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
onChange={handleLinkInputChange} onChange={handleLinkInputChange}
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="title">Title</Label> <Label htmlFor="title">Title</Label>
<Input <Input
@@ -256,7 +254,6 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
onChange={handleTitleInputChange} onChange={handleTitleInputChange}
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="description">Description</Label> <Label htmlFor="description">Description</Label>
<Input <Input
@@ -267,7 +264,6 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
onChange={handleDescriptionInputChange} onChange={handleDescriptionInputChange}
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="tags">Tags</Label> <Label htmlFor="tags">Tags</Label>
<Input id="tags" type="text" placeholder="The tags of shortcut" value={tag} onChange={handleTagsInputChange} /> <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> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Checkbox <Checkbox
id="public" id="public"
@@ -305,9 +300,7 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
{t(`shortcut.visibility.public.description`)} {t(`shortcut.visibility.public.description`)}
</Label> </Label>
</div> </div>
<Separator className="my-4" /> <Separator className="my-4" />
<div className="border rounded-lg overflow-hidden"> <div className="border rounded-lg overflow-hidden">
<div <div
className={classnames( className={classnames(
@@ -366,8 +359,8 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
)} )}
</div> </div>
</div> </div>
</SheetBody>
<SheetFooter className="mt-6"> <SheetFooter>
<Button variant="outline" onClick={onClose} disabled={requestState.isLoading}> <Button variant="outline" onClick={onClose} disabled={requestState.isLoading}>
{t("common.cancel")} {t("common.cancel")}
</Button> </Button>
frontend/web/src/components/ui/sheet.tsx
+21 -4
View File
@@ -28,7 +28,7 @@ const SheetOverlay = React.forwardRef<
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName; SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
const sheetVariants = cva( 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: { variants: {
side: { side: {
@@ -64,12 +64,17 @@ const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Con
SheetContent.displayName = SheetPrimitive.Content.displayName; SheetContent.displayName = SheetPrimitive.Content.displayName;
const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => ( 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"; 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>) => ( 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"; SheetFooter.displayName = "SheetFooter";
@@ -89,4 +94,16 @@ const SheetDescription = React.forwardRef<
)); ));
SheetDescription.displayName = SheetPrimitive.Description.displayName; 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,
};