Skip to content

webui: fix folder creation #4330

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
neooriginal wants to merge 2 commits into
base: main
Choose a base branch
from
+48 −54
Open

webui: fix folder creation #4330

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
83c8c46
Update FolderDialog.tsx
neooriginal Jan 21, 2026
698d0d0
gemini issues fixed
neooriginal Jan 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 48 additions & 54 deletions web/app/src/components/conversations/FolderDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
'use client';

import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import * as Dialog from '@radix-ui/react-dialog';
import { X, Loader2, FolderPlus, Pencil } from 'lucide-react';
import { cn } from '@/lib/utils';
import { FOLDER_EMOJIS, FOLDER_COLORS } from '@/types/folder';
Expand Down Expand Up @@ -61,31 +61,28 @@ export function FolderDialog({
const isValid = name.trim().length > 0;

return (
<AnimatePresence>
{isOpen && (
<>
{/* Backdrop */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
onClick={onClose}
className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm"
/>
<Dialog.Root open={isOpen} onOpenChange={(open) => !open && onClose()}>
<Dialog.Portal>
{/* Backdrop */}
<Dialog.Overlay
className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
/>

{/* Dialog */}
<motion.div
initial={{ opacity: 0, scale: 0.95, y: 20 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.95, y: 20 }}
transition={{ type: 'spring', damping: 25, stiffness: 300 }}
{/* Dialog Container - Centered with flexbox */}
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 text-center">
<Dialog.Content
className={cn(
'fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-50',
'w-full max-w-md p-6 rounded-2xl',
'bg-bg-secondary border border-bg-tertiary',
'shadow-[0_16px_64px_rgba(0,0,0,0.5)]'
'w-full max-w-md p-6 rounded-2xl text-left align-middle',
'bg-bg-secondary border border-bg-tertiary shadow-[0_16px_64px_rgba(0,0,0,0.5)]',
'max-h-[85vh] overflow-y-auto',
'duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
'outline-none focus:outline-none' // Remove default browser focus ring
)}
>
<Dialog.Title className="sr-only">
{isEditing ? 'Edit Folder' : 'Create Folder'}
</Dialog.Title>

{/* Close button */}
<button
onClick={onClose}
Expand All @@ -112,7 +109,7 @@ export function FolderDialog({
)}
</div>

{/* Title */}
{/* Visible Title */}
<h2 className="text-lg font-semibold text-text-primary mb-4">
{isEditing ? 'Edit Folder' : 'Create Folder'}
</h2>
Expand Down Expand Up @@ -263,10 +260,10 @@ export function FolderDialog({
</button>
</div>
</form>
</motion.div>
</>
)}
</AnimatePresence>
</Dialog.Content>
</div>
</Dialog.Portal>
</Dialog.Root>
);
}

Expand All @@ -289,31 +286,28 @@ export function DeleteFolderDialog({
if (!folder) return null;

return (
<AnimatePresence>
{isOpen && (
<>
{/* Backdrop */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
onClick={onClose}
className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm"
/>
<Dialog.Root open={isOpen} onOpenChange={(open) => !open && onClose()}>
<Dialog.Portal>
{/* Backdrop */}
<Dialog.Overlay
className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
/>

{/* Dialog */}
<motion.div
initial={{ opacity: 0, scale: 0.95, y: 20 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.95, y: 20 }}
transition={{ type: 'spring', damping: 25, stiffness: 300 }}
{/* Dialog Container */}
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 text-center">
<Dialog.Content
className={cn(
'fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-50',
'w-full max-w-sm p-6 rounded-2xl',
'bg-bg-secondary border border-bg-tertiary',
'shadow-[0_16px_64px_rgba(0,0,0,0.5)]'
'w-full max-w-sm p-6 rounded-2xl text-left align-middle',
'bg-bg-secondary border border-bg-tertiary shadow-[0_16px_64px_rgba(0,0,0,0.5)]',
'max-h-[85vh] overflow-y-auto',
'duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
'outline-none focus:outline-none'
)}
>
<Dialog.Title className="sr-only">
Delete Folder Confirmation
</Dialog.Title>

{/* Icon */}
<div className={cn(
'w-12 h-12 rounded-xl mb-4',
Expand All @@ -324,12 +318,12 @@ export function DeleteFolderDialog({

{/* Title */}
<h2 className="text-lg font-semibold text-text-primary mb-2">
Delete "{folder.name}"?
Delete &quot;{folder.name}&quot;?
</h2>

{/* Description */}
<p className="text-sm text-text-secondary mb-6">
Conversations in this folder will be moved back to "All".
Conversations in this folder will be moved back to &quot;All&quot;.
This action cannot be undone.
</p>

Expand Down Expand Up @@ -366,9 +360,9 @@ export function DeleteFolderDialog({
<span>Delete Folder</span>
</button>
</div>
</motion.div>
</>
)}
</AnimatePresence>
</Dialog.Content>
</div>
</Dialog.Portal>
</Dialog.Root>
);
}