From 83c8c46f310a8b504b278ca46d665f4c52af0208 Mon Sep 17 00:00:00 2001
From: Neo <54811660+neooriginal@users.noreply.github.com>
Date: Wed, 21 Jan 2026 23:21:05 +0100
Subject: [PATCH 1/2] Update FolderDialog.tsx

---
 .../components/conversations/FolderDialog.tsx | 501 +++++++++---------
 1 file changed, 262 insertions(+), 239 deletions(-)

diff --git a/web/app/src/components/conversations/FolderDialog.tsx b/web/app/src/components/conversations/FolderDialog.tsx
index b906f36248..a40a0a2eac 100644
--- a/web/app/src/components/conversations/FolderDialog.tsx
+++ b/web/app/src/components/conversations/FolderDialog.tsx
@@ -1,6 +1,8 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+
 import { motion, AnimatePresence } from 'framer-motion';
 import { X, Loader2, FolderPlus, Pencil } from 'lucide-react';
 import { cn } from '@/lib/utils';
@@ -60,7 +62,15 @@ export function FolderDialog({
 
   const isValid = name.trim().length > 0;
 
-  return (
+  // Handle hydration
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
+  return createPortal(
     <AnimatePresence>
       {isOpen && (
         <>
@@ -73,200 +83,203 @@ export function FolderDialog({
             className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm"
           />
 
-          {/* 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 }}
-            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)]'
-            )}
-          >
-            {/* Close button */}
-            <button
-              onClick={onClose}
-              disabled={isLoading}
+          {/* Dialog Container */}
+          <div className="fixed inset-0 z-50 flex items-center justify-center p-4 pointer-events-none">
+            <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 }}
               className={cn(
-                'absolute top-4 right-4 p-2 rounded-lg',
-                'text-text-quaternary hover:text-text-primary',
-                'hover:bg-bg-tertiary transition-colors',
-                'disabled:opacity-50 disabled:cursor-not-allowed'
+                'w-full max-w-md p-6 rounded-2xl pointer-events-auto',
+                'bg-bg-secondary border border-bg-tertiary',
+                'shadow-[0_16px_64px_rgba(0,0,0,0.5)]',
+                'max-h-[85vh] overflow-y-auto'
               )}
             >
-              <X className="w-4 h-4" />
-            </button>
+              {/* Close button */}
+              <button
+                onClick={onClose}
+                disabled={isLoading}
+                className={cn(
+                  'absolute top-4 right-4 p-2 rounded-lg',
+                  'text-text-quaternary hover:text-text-primary',
+                  'hover:bg-bg-tertiary transition-colors',
+                  'disabled:opacity-50 disabled:cursor-not-allowed'
+                )}
+              >
+                <X className="w-4 h-4" />
+              </button>
 
-            {/* Icon */}
-            <div className={cn(
-              'w-12 h-12 rounded-xl mb-4',
-              'flex items-center justify-center'
-            )} style={{ backgroundColor: `${color}20` }}>
-              {isEditing ? (
-                <Pencil className="w-6 h-6" style={{ color }} />
-              ) : (
-                <FolderPlus className="w-6 h-6" style={{ color }} />
-              )}
-            </div>
+              {/* Icon */}
+              <div className={cn(
+                'w-12 h-12 rounded-xl mb-4',
+                'flex items-center justify-center'
+              )} style={{ backgroundColor: `${color}20` }}>
+                {isEditing ? (
+                  <Pencil className="w-6 h-6" style={{ color }} />
+                ) : (
+                  <FolderPlus className="w-6 h-6" style={{ color }} />
+                )}
+              </div>
 
-            {/* Title */}
-            <h2 className="text-lg font-semibold text-text-primary mb-4">
-              {isEditing ? 'Edit Folder' : 'Create Folder'}
-            </h2>
+              {/* Title */}
+              <h2 className="text-lg font-semibold text-text-primary mb-4">
+                {isEditing ? 'Edit Folder' : 'Create Folder'}
+              </h2>
 
-            <form onSubmit={handleSubmit}>
-              {/* Folder name input */}
-              <div className="mb-4">
-                <label className="block text-sm font-medium text-text-secondary mb-2">
-                  Folder name
-                </label>
-                <div className="flex items-center gap-2">
-                  <span className="text-2xl">{emoji}</span>
-                  <input
-                    type="text"
-                    value={name}
-                    onChange={(e) => setName(e.target.value)}
-                    placeholder="Enter folder name..."
+              <form onSubmit={handleSubmit}>
+                {/* Folder name input */}
+                <div className="mb-4">
+                  <label className="block text-sm font-medium text-text-secondary mb-2">
+                    Folder name
+                  </label>
+                  <div className="flex items-center gap-2">
+                    <span className="text-2xl">{emoji}</span>
+                    <input
+                      type="text"
+                      value={name}
+                      onChange={(e) => setName(e.target.value)}
+                      placeholder="Enter folder name..."
+                      disabled={isLoading}
+                      maxLength={100}
+                      className={cn(
+                        'flex-1 px-3 py-2 rounded-lg',
+                        'bg-bg-tertiary border border-bg-quaternary',
+                        'text-text-primary placeholder:text-text-quaternary',
+                        'focus:outline-none focus:ring-2 focus:ring-purple-primary/50',
+                        'disabled:opacity-50'
+                      )}
+                      autoFocus
+                    />
+                  </div>
+                </div>
+
+                {/* Description input */}
+                <div className="mb-4">
+                  <label className="block text-sm font-medium text-text-secondary mb-2">
+                    Description <span className="text-text-quaternary font-normal">(optional)</span>
+                  </label>
+                  <textarea
+                    value={description}
+                    onChange={(e) => setDescription(e.target.value)}
+                    placeholder="E.g., Work meetings and project discussions"
                     disabled={isLoading}
-                    maxLength={100}
+                    maxLength={500}
+                    rows={2}
                     className={cn(
-                      'flex-1 px-3 py-2 rounded-lg',
+                      'w-full px-3 py-2 rounded-lg resize-none',
                       'bg-bg-tertiary border border-bg-quaternary',
                       'text-text-primary placeholder:text-text-quaternary',
+                      'text-sm',
                       'focus:outline-none focus:ring-2 focus:ring-purple-primary/50',
                       'disabled:opacity-50'
                     )}
-                    autoFocus
                   />
+                  <p className="mt-1 text-xs text-text-quaternary">
+                    Helps AI auto-categorize conversations into this folder
+                  </p>
                 </div>
-              </div>
-
-              {/* Description input */}
-              <div className="mb-4">
-                <label className="block text-sm font-medium text-text-secondary mb-2">
-                  Description <span className="text-text-quaternary font-normal">(optional)</span>
-                </label>
-                <textarea
-                  value={description}
-                  onChange={(e) => setDescription(e.target.value)}
-                  placeholder="E.g., Work meetings and project discussions"
-                  disabled={isLoading}
-                  maxLength={500}
-                  rows={2}
-                  className={cn(
-                    'w-full px-3 py-2 rounded-lg resize-none',
-                    'bg-bg-tertiary border border-bg-quaternary',
-                    'text-text-primary placeholder:text-text-quaternary',
-                    'text-sm',
-                    'focus:outline-none focus:ring-2 focus:ring-purple-primary/50',
-                    'disabled:opacity-50'
-                  )}
-                />
-                <p className="mt-1 text-xs text-text-quaternary">
-                  Helps AI auto-categorize conversations into this folder
-                </p>
-              </div>
 
-              {/* Emoji picker */}
-              <div className="mb-4">
-                <label className="block text-sm font-medium text-text-secondary mb-2">
-                  Icon
-                </label>
-                <div className="flex flex-wrap gap-2">
-                  {FOLDER_EMOJIS.map((e) => (
-                    <button
-                      key={e}
-                      type="button"
-                      onClick={() => setEmoji(e)}
-                      disabled={isLoading}
-                      className={cn(
-                        'w-10 h-10 rounded-lg text-xl',
-                        'flex items-center justify-center',
-                        'transition-all duration-150',
-                        emoji === e
-                          ? 'bg-purple-primary/20 ring-2 ring-purple-primary'
-                          : 'bg-bg-tertiary hover:bg-bg-quaternary',
-                        'disabled:opacity-50 disabled:cursor-not-allowed'
-                      )}
-                    >
-                      {e}
-                    </button>
-                  ))}
+                {/* Emoji picker */}
+                <div className="mb-4">
+                  <label className="block text-sm font-medium text-text-secondary mb-2">
+                    Icon
+                  </label>
+                  <div className="flex flex-wrap gap-2">
+                    {FOLDER_EMOJIS.map((e) => (
+                      <button
+                        key={e}
+                        type="button"
+                        onClick={() => setEmoji(e)}
+                        disabled={isLoading}
+                        className={cn(
+                          'w-10 h-10 rounded-lg text-xl',
+                          'flex items-center justify-center',
+                          'transition-all duration-150',
+                          emoji === e
+                            ? 'bg-purple-primary/20 ring-2 ring-purple-primary'
+                            : 'bg-bg-tertiary hover:bg-bg-quaternary',
+                          'disabled:opacity-50 disabled:cursor-not-allowed'
+                        )}
+                      >
+                        {e}
+                      </button>
+                    ))}
+                  </div>
                 </div>
-              </div>
 
-              {/* Color picker */}
-              <div className="mb-6">
-                <label className="block text-sm font-medium text-text-secondary mb-2">
-                  Color
-                </label>
-                <div className="flex flex-wrap gap-2">
-                  {FOLDER_COLORS.map((c) => (
-                    <button
-                      key={c.id}
-                      type="button"
-                      onClick={() => setColor(c.value)}
-                      disabled={isLoading}
-                      className={cn(
-                        'w-8 h-8 rounded-full',
-                        'transition-all duration-150',
-                        color === c.value
-                          ? 'ring-2 ring-offset-2 ring-offset-bg-secondary'
-                          : 'hover:scale-110',
-                        'disabled:opacity-50 disabled:cursor-not-allowed'
-                      )}
-                      style={{
-                        backgroundColor: c.value,
-                        '--tw-ring-color': c.value,
-                      } as React.CSSProperties}
-                      title={c.label}
-                    />
-                  ))}
+                {/* Color picker */}
+                <div className="mb-6">
+                  <label className="block text-sm font-medium text-text-secondary mb-2">
+                    Color
+                  </label>
+                  <div className="flex flex-wrap gap-2">
+                    {FOLDER_COLORS.map((c) => (
+                      <button
+                        key={c.id}
+                        type="button"
+                        onClick={() => setColor(c.value)}
+                        disabled={isLoading}
+                        className={cn(
+                          'w-8 h-8 rounded-full',
+                          'transition-all duration-150',
+                          color === c.value
+                            ? 'ring-2 ring-offset-2 ring-offset-bg-secondary'
+                            : 'hover:scale-110',
+                          'disabled:opacity-50 disabled:cursor-not-allowed'
+                        )}
+                        style={{
+                          backgroundColor: c.value,
+                          '--tw-ring-color': c.value,
+                        } as React.CSSProperties}
+                        title={c.label}
+                      />
+                    ))}
+                  </div>
                 </div>
-              </div>
 
-              {/* Actions */}
-              <div className="flex gap-3">
-                <button
-                  type="button"
-                  onClick={onClose}
-                  disabled={isLoading}
-                  className={cn(
-                    'flex-1 px-4 py-2.5 rounded-xl',
-                    'text-sm font-medium text-text-secondary',
-                    'bg-bg-tertiary hover:bg-bg-quaternary',
-                    'transition-colors duration-150',
-                    'disabled:opacity-50 disabled:cursor-not-allowed'
-                  )}
-                >
-                  Cancel
-                </button>
-                <button
-                  type="submit"
-                  disabled={!isValid || isLoading}
-                  className={cn(
-                    'flex-1 flex items-center justify-center gap-2',
-                    'px-4 py-2.5 rounded-xl',
-                    'text-sm font-medium text-white',
-                    'transition-colors duration-150',
-                    'disabled:opacity-50 disabled:cursor-not-allowed'
-                  )}
-                  style={{ backgroundColor: isValid ? color : undefined }}
-                >
-                  {isLoading ? (
-                    <Loader2 className="w-4 h-4 animate-spin" />
-                  ) : null}
-                  <span>{isEditing ? 'Save Changes' : 'Create Folder'}</span>
-                </button>
-              </div>
-            </form>
-          </motion.div>
+                {/* Actions */}
+                <div className="flex gap-3">
+                  <button
+                    type="button"
+                    onClick={onClose}
+                    disabled={isLoading}
+                    className={cn(
+                      'flex-1 px-4 py-2.5 rounded-xl',
+                      'text-sm font-medium text-text-secondary',
+                      'bg-bg-tertiary hover:bg-bg-quaternary',
+                      'transition-colors duration-150',
+                      'disabled:opacity-50 disabled:cursor-not-allowed'
+                    )}
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    type="submit"
+                    disabled={!isValid || isLoading}
+                    className={cn(
+                      'flex-1 flex items-center justify-center gap-2',
+                      'px-4 py-2.5 rounded-xl',
+                      'text-sm font-medium text-white',
+                      'transition-colors duration-150',
+                      'disabled:opacity-50 disabled:cursor-not-allowed'
+                    )}
+                    style={{ backgroundColor: isValid ? color : undefined }}
+                  >
+                    {isLoading ? (
+                      <Loader2 className="w-4 h-4 animate-spin" />
+                    ) : null}
+                    <span>{isEditing ? 'Save Changes' : 'Create Folder'}</span>
+                  </button>
+                </div>
+              </form>
+            </motion.div>
+          </div>
         </>
       )}
-    </AnimatePresence>
+    </AnimatePresence>,
+    document.body
   );
 }
 
@@ -286,9 +299,15 @@ export function DeleteFolderDialog({
   onConfirm,
   isLoading = false,
 }: DeleteFolderDialogProps) {
-  if (!folder) return null;
+  // Handle hydration
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
-  return (
+  if (!folder || !mounted) return null;
+
+  return createPortal(
     <AnimatePresence>
       {isOpen && (
         <>
@@ -301,74 +320,78 @@ export function DeleteFolderDialog({
             className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm"
           />
 
-          {/* 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 }}
-            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)]'
-            )}
-          >
-            {/* Icon */}
-            <div className={cn(
-              'w-12 h-12 rounded-xl mb-4',
-              'bg-error/20 flex items-center justify-center'
-            )}>
-              <span className="text-2xl">{folder.emoji || '📁'}</span>
-            </div>
+          {/* Dialog Container */}
+          <div className="fixed inset-0 z-50 flex items-center justify-center p-4 pointer-events-none">
+            <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 }}
+              className={cn(
+                'w-full max-w-sm p-6 rounded-2xl pointer-events-auto',
+                'bg-bg-secondary border border-bg-tertiary',
+                'shadow-[0_16px_64px_rgba(0,0,0,0.5)]',
+                'max-h-[85vh] overflow-y-auto'
+              )}
+            >
+              {/* Icon */}
+              <div className={cn(
+                'w-12 h-12 rounded-xl mb-4',
+                'bg-error/20 flex items-center justify-center'
+              )}>
+                <span className="text-2xl">{folder.emoji || '📁'}</span>
+              </div>
 
-            {/* Title */}
-            <h2 className="text-lg font-semibold text-text-primary mb-2">
-              Delete "{folder.name}"?
-            </h2>
+              {/* Title */}
+              <h2 className="text-lg font-semibold text-text-primary mb-2">
+                Delete "{folder.name}"?
+              </h2>
 
-            {/* Description */}
-            <p className="text-sm text-text-secondary mb-6">
-              Conversations in this folder will be moved back to "All".
-              This action cannot be undone.
-            </p>
+              {/* Description */}
+              <p className="text-sm text-text-secondary mb-6">
+                Conversations in this folder will be moved back to "All".
+                This action cannot be undone.
+              </p>
 
-            {/* Actions */}
-            <div className="flex gap-3">
-              <button
-                onClick={onClose}
-                disabled={isLoading}
-                className={cn(
-                  'flex-1 px-4 py-2.5 rounded-xl',
-                  'text-sm font-medium text-text-secondary',
-                  'bg-bg-tertiary hover:bg-bg-quaternary',
-                  'transition-colors duration-150',
-                  'disabled:opacity-50 disabled:cursor-not-allowed'
-                )}
-              >
-                Cancel
-              </button>
-              <button
-                onClick={onConfirm}
-                disabled={isLoading}
-                className={cn(
-                  'flex-1 flex items-center justify-center gap-2',
-                  'px-4 py-2.5 rounded-xl',
-                  'text-sm font-medium text-white',
-                  'bg-error hover:bg-error/90',
-                  'transition-colors duration-150',
-                  'disabled:opacity-50 disabled:cursor-not-allowed'
-                )}
-              >
-                {isLoading ? (
-                  <Loader2 className="w-4 h-4 animate-spin" />
-                ) : null}
-                <span>Delete Folder</span>
-              </button>
-            </div>
-          </motion.div>
+              {/* Actions */}
+              <div className="flex gap-3">
+                <button
+                  onClick={onClose}
+                  disabled={isLoading}
+                  className={cn(
+                    'flex-1 px-4 py-2.5 rounded-xl',
+                    'text-sm font-medium text-text-secondary',
+                    'bg-bg-tertiary hover:bg-bg-quaternary',
+                    'transition-colors duration-150',
+                    'disabled:opacity-50 disabled:cursor-not-allowed'
+                  )}
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={onConfirm}
+                  disabled={isLoading}
+                  className={cn(
+                    'flex-1 flex items-center justify-center gap-2',
+                    'px-4 py-2.5 rounded-xl',
+                    'text-sm font-medium text-white',
+                    'bg-error hover:bg-error/90',
+                    'transition-colors duration-150',
+                    'disabled:opacity-50 disabled:cursor-not-allowed'
+                  )}
+                >
+                  {isLoading ? (
+                    <Loader2 className="w-4 h-4 animate-spin" />
+                  ) : null}
+                  <span>Delete Folder</span>
+                </button>
+              </div>
+            </motion.div>
+          </div>
         </>
       )}
-    </AnimatePresence>
+    </AnimatePresence>,
+    document.body
   );
+
 }

From 698d0d02467edcd769c172fc8cee5068b9e78520 Mon Sep 17 00:00:00 2001
From: Neo <54811660+neooriginal@users.noreply.github.com>
Date: Wed, 21 Jan 2026 23:29:54 +0100
Subject: [PATCH 2/2] gemini issues fixed

---
 .../components/conversations/FolderDialog.tsx | 531 +++++++++---------
 1 file changed, 251 insertions(+), 280 deletions(-)

diff --git a/web/app/src/components/conversations/FolderDialog.tsx b/web/app/src/components/conversations/FolderDialog.tsx
index a40a0a2eac..c361cabd69 100644
--- a/web/app/src/components/conversations/FolderDialog.tsx
+++ b/web/app/src/components/conversations/FolderDialog.tsx
@@ -1,9 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-
-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';
@@ -62,300 +60,175 @@ export function FolderDialog({
 
   const isValid = name.trim().length > 0;
 
-  // Handle hydration
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) return null;
+  return (
+    <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"
+        />
 
-  return createPortal(
-    <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 Container - Centered with flexbox */}
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 text-center">
+          <Dialog.Content
+            className={cn(
+              '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>
 
-          {/* Dialog Container */}
-          <div className="fixed inset-0 z-50 flex items-center justify-center p-4 pointer-events-none">
-            <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 }}
+            {/* Close button */}
+            <button
+              onClick={onClose}
+              disabled={isLoading}
               className={cn(
-                'w-full max-w-md p-6 rounded-2xl pointer-events-auto',
-                'bg-bg-secondary border border-bg-tertiary',
-                'shadow-[0_16px_64px_rgba(0,0,0,0.5)]',
-                'max-h-[85vh] overflow-y-auto'
+                'absolute top-4 right-4 p-2 rounded-lg',
+                'text-text-quaternary hover:text-text-primary',
+                'hover:bg-bg-tertiary transition-colors',
+                'disabled:opacity-50 disabled:cursor-not-allowed'
               )}
             >
-              {/* Close button */}
-              <button
-                onClick={onClose}
-                disabled={isLoading}
-                className={cn(
-                  'absolute top-4 right-4 p-2 rounded-lg',
-                  'text-text-quaternary hover:text-text-primary',
-                  'hover:bg-bg-tertiary transition-colors',
-                  'disabled:opacity-50 disabled:cursor-not-allowed'
-                )}
-              >
-                <X className="w-4 h-4" />
-              </button>
-
-              {/* Icon */}
-              <div className={cn(
-                'w-12 h-12 rounded-xl mb-4',
-                'flex items-center justify-center'
-              )} style={{ backgroundColor: `${color}20` }}>
-                {isEditing ? (
-                  <Pencil className="w-6 h-6" style={{ color }} />
-                ) : (
-                  <FolderPlus className="w-6 h-6" style={{ color }} />
-                )}
-              </div>
+              <X className="w-4 h-4" />
+            </button>
 
-              {/* Title */}
-              <h2 className="text-lg font-semibold text-text-primary mb-4">
-                {isEditing ? 'Edit Folder' : 'Create Folder'}
-              </h2>
+            {/* Icon */}
+            <div className={cn(
+              'w-12 h-12 rounded-xl mb-4',
+              'flex items-center justify-center'
+            )} style={{ backgroundColor: `${color}20` }}>
+              {isEditing ? (
+                <Pencil className="w-6 h-6" style={{ color }} />
+              ) : (
+                <FolderPlus className="w-6 h-6" style={{ color }} />
+              )}
+            </div>
 
-              <form onSubmit={handleSubmit}>
-                {/* Folder name input */}
-                <div className="mb-4">
-                  <label className="block text-sm font-medium text-text-secondary mb-2">
-                    Folder name
-                  </label>
-                  <div className="flex items-center gap-2">
-                    <span className="text-2xl">{emoji}</span>
-                    <input
-                      type="text"
-                      value={name}
-                      onChange={(e) => setName(e.target.value)}
-                      placeholder="Enter folder name..."
-                      disabled={isLoading}
-                      maxLength={100}
-                      className={cn(
-                        'flex-1 px-3 py-2 rounded-lg',
-                        'bg-bg-tertiary border border-bg-quaternary',
-                        'text-text-primary placeholder:text-text-quaternary',
-                        'focus:outline-none focus:ring-2 focus:ring-purple-primary/50',
-                        'disabled:opacity-50'
-                      )}
-                      autoFocus
-                    />
-                  </div>
-                </div>
+            {/* Visible Title */}
+            <h2 className="text-lg font-semibold text-text-primary mb-4">
+              {isEditing ? 'Edit Folder' : 'Create Folder'}
+            </h2>
 
-                {/* Description input */}
-                <div className="mb-4">
-                  <label className="block text-sm font-medium text-text-secondary mb-2">
-                    Description <span className="text-text-quaternary font-normal">(optional)</span>
-                  </label>
-                  <textarea
-                    value={description}
-                    onChange={(e) => setDescription(e.target.value)}
-                    placeholder="E.g., Work meetings and project discussions"
+            <form onSubmit={handleSubmit}>
+              {/* Folder name input */}
+              <div className="mb-4">
+                <label className="block text-sm font-medium text-text-secondary mb-2">
+                  Folder name
+                </label>
+                <div className="flex items-center gap-2">
+                  <span className="text-2xl">{emoji}</span>
+                  <input
+                    type="text"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    placeholder="Enter folder name..."
                     disabled={isLoading}
-                    maxLength={500}
-                    rows={2}
+                    maxLength={100}
                     className={cn(
-                      'w-full px-3 py-2 rounded-lg resize-none',
+                      'flex-1 px-3 py-2 rounded-lg',
                       'bg-bg-tertiary border border-bg-quaternary',
                       'text-text-primary placeholder:text-text-quaternary',
-                      'text-sm',
                       'focus:outline-none focus:ring-2 focus:ring-purple-primary/50',
                       'disabled:opacity-50'
                     )}
+                    autoFocus
                   />
-                  <p className="mt-1 text-xs text-text-quaternary">
-                    Helps AI auto-categorize conversations into this folder
-                  </p>
                 </div>
+              </div>
 
-                {/* Emoji picker */}
-                <div className="mb-4">
-                  <label className="block text-sm font-medium text-text-secondary mb-2">
-                    Icon
-                  </label>
-                  <div className="flex flex-wrap gap-2">
-                    {FOLDER_EMOJIS.map((e) => (
-                      <button
-                        key={e}
-                        type="button"
-                        onClick={() => setEmoji(e)}
-                        disabled={isLoading}
-                        className={cn(
-                          'w-10 h-10 rounded-lg text-xl',
-                          'flex items-center justify-center',
-                          'transition-all duration-150',
-                          emoji === e
-                            ? 'bg-purple-primary/20 ring-2 ring-purple-primary'
-                            : 'bg-bg-tertiary hover:bg-bg-quaternary',
-                          'disabled:opacity-50 disabled:cursor-not-allowed'
-                        )}
-                      >
-                        {e}
-                      </button>
-                    ))}
-                  </div>
-                </div>
+              {/* Description input */}
+              <div className="mb-4">
+                <label className="block text-sm font-medium text-text-secondary mb-2">
+                  Description <span className="text-text-quaternary font-normal">(optional)</span>
+                </label>
+                <textarea
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  placeholder="E.g., Work meetings and project discussions"
+                  disabled={isLoading}
+                  maxLength={500}
+                  rows={2}
+                  className={cn(
+                    'w-full px-3 py-2 rounded-lg resize-none',
+                    'bg-bg-tertiary border border-bg-quaternary',
+                    'text-text-primary placeholder:text-text-quaternary',
+                    'text-sm',
+                    'focus:outline-none focus:ring-2 focus:ring-purple-primary/50',
+                    'disabled:opacity-50'
+                  )}
+                />
+                <p className="mt-1 text-xs text-text-quaternary">
+                  Helps AI auto-categorize conversations into this folder
+                </p>
+              </div>
 
-                {/* Color picker */}
-                <div className="mb-6">
-                  <label className="block text-sm font-medium text-text-secondary mb-2">
-                    Color
-                  </label>
-                  <div className="flex flex-wrap gap-2">
-                    {FOLDER_COLORS.map((c) => (
-                      <button
-                        key={c.id}
-                        type="button"
-                        onClick={() => setColor(c.value)}
-                        disabled={isLoading}
-                        className={cn(
-                          'w-8 h-8 rounded-full',
-                          'transition-all duration-150',
-                          color === c.value
-                            ? 'ring-2 ring-offset-2 ring-offset-bg-secondary'
-                            : 'hover:scale-110',
-                          'disabled:opacity-50 disabled:cursor-not-allowed'
-                        )}
-                        style={{
-                          backgroundColor: c.value,
-                          '--tw-ring-color': c.value,
-                        } as React.CSSProperties}
-                        title={c.label}
-                      />
-                    ))}
-                  </div>
+              {/* Emoji picker */}
+              <div className="mb-4">
+                <label className="block text-sm font-medium text-text-secondary mb-2">
+                  Icon
+                </label>
+                <div className="flex flex-wrap gap-2">
+                  {FOLDER_EMOJIS.map((e) => (
+                    <button
+                      key={e}
+                      type="button"
+                      onClick={() => setEmoji(e)}
+                      disabled={isLoading}
+                      className={cn(
+                        'w-10 h-10 rounded-lg text-xl',
+                        'flex items-center justify-center',
+                        'transition-all duration-150',
+                        emoji === e
+                          ? 'bg-purple-primary/20 ring-2 ring-purple-primary'
+                          : 'bg-bg-tertiary hover:bg-bg-quaternary',
+                        'disabled:opacity-50 disabled:cursor-not-allowed'
+                      )}
+                    >
+                      {e}
+                    </button>
+                  ))}
                 </div>
+              </div>
 
-                {/* Actions */}
-                <div className="flex gap-3">
-                  <button
-                    type="button"
-                    onClick={onClose}
-                    disabled={isLoading}
-                    className={cn(
-                      'flex-1 px-4 py-2.5 rounded-xl',
-                      'text-sm font-medium text-text-secondary',
-                      'bg-bg-tertiary hover:bg-bg-quaternary',
-                      'transition-colors duration-150',
-                      'disabled:opacity-50 disabled:cursor-not-allowed'
-                    )}
-                  >
-                    Cancel
-                  </button>
-                  <button
-                    type="submit"
-                    disabled={!isValid || isLoading}
-                    className={cn(
-                      'flex-1 flex items-center justify-center gap-2',
-                      'px-4 py-2.5 rounded-xl',
-                      'text-sm font-medium text-white',
-                      'transition-colors duration-150',
-                      'disabled:opacity-50 disabled:cursor-not-allowed'
-                    )}
-                    style={{ backgroundColor: isValid ? color : undefined }}
-                  >
-                    {isLoading ? (
-                      <Loader2 className="w-4 h-4 animate-spin" />
-                    ) : null}
-                    <span>{isEditing ? 'Save Changes' : 'Create Folder'}</span>
-                  </button>
+              {/* Color picker */}
+              <div className="mb-6">
+                <label className="block text-sm font-medium text-text-secondary mb-2">
+                  Color
+                </label>
+                <div className="flex flex-wrap gap-2">
+                  {FOLDER_COLORS.map((c) => (
+                    <button
+                      key={c.id}
+                      type="button"
+                      onClick={() => setColor(c.value)}
+                      disabled={isLoading}
+                      className={cn(
+                        'w-8 h-8 rounded-full',
+                        'transition-all duration-150',
+                        color === c.value
+                          ? 'ring-2 ring-offset-2 ring-offset-bg-secondary'
+                          : 'hover:scale-110',
+                        'disabled:opacity-50 disabled:cursor-not-allowed'
+                      )}
+                      style={{
+                        backgroundColor: c.value,
+                        '--tw-ring-color': c.value,
+                      } as React.CSSProperties}
+                      title={c.label}
+                    />
+                  ))}
                 </div>
-              </form>
-            </motion.div>
-          </div>
-        </>
-      )}
-    </AnimatePresence>,
-    document.body
-  );
-}
-
-// Confirm delete folder dialog
-interface DeleteFolderDialogProps {
-  isOpen: boolean;
-  folder: Folder | null;
-  onClose: () => void;
-  onConfirm: () => Promise<void>;
-  isLoading?: boolean;
-}
-
-export function DeleteFolderDialog({
-  isOpen,
-  folder,
-  onClose,
-  onConfirm,
-  isLoading = false,
-}: DeleteFolderDialogProps) {
-  // Handle hydration
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!folder || !mounted) return null;
-
-  return createPortal(
-    <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 Container */}
-          <div className="fixed inset-0 z-50 flex items-center justify-center p-4 pointer-events-none">
-            <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 }}
-              className={cn(
-                'w-full max-w-sm p-6 rounded-2xl pointer-events-auto',
-                'bg-bg-secondary border border-bg-tertiary',
-                'shadow-[0_16px_64px_rgba(0,0,0,0.5)]',
-                'max-h-[85vh] overflow-y-auto'
-              )}
-            >
-              {/* Icon */}
-              <div className={cn(
-                'w-12 h-12 rounded-xl mb-4',
-                'bg-error/20 flex items-center justify-center'
-              )}>
-                <span className="text-2xl">{folder.emoji || '📁'}</span>
               </div>
 
-              {/* Title */}
-              <h2 className="text-lg font-semibold text-text-primary mb-2">
-                Delete "{folder.name}"?
-              </h2>
-
-              {/* Description */}
-              <p className="text-sm text-text-secondary mb-6">
-                Conversations in this folder will be moved back to "All".
-                This action cannot be undone.
-              </p>
-
               {/* Actions */}
               <div className="flex gap-3">
                 <button
+                  type="button"
                   onClick={onClose}
                   disabled={isLoading}
                   className={cn(
@@ -369,29 +242,127 @@ export function DeleteFolderDialog({
                   Cancel
                 </button>
                 <button
-                  onClick={onConfirm}
-                  disabled={isLoading}
+                  type="submit"
+                  disabled={!isValid || isLoading}
                   className={cn(
                     'flex-1 flex items-center justify-center gap-2',
                     'px-4 py-2.5 rounded-xl',
                     'text-sm font-medium text-white',
-                    'bg-error hover:bg-error/90',
                     'transition-colors duration-150',
                     'disabled:opacity-50 disabled:cursor-not-allowed'
                   )}
+                  style={{ backgroundColor: isValid ? color : undefined }}
                 >
                   {isLoading ? (
                     <Loader2 className="w-4 h-4 animate-spin" />
                   ) : null}
-                  <span>Delete Folder</span>
+                  <span>{isEditing ? 'Save Changes' : 'Create Folder'}</span>
                 </button>
               </div>
-            </motion.div>
-          </div>
-        </>
-      )}
-    </AnimatePresence>,
-    document.body
+            </form>
+          </Dialog.Content>
+        </div>
+      </Dialog.Portal>
+    </Dialog.Root>
   );
+}
 
+// Confirm delete folder dialog
+interface DeleteFolderDialogProps {
+  isOpen: boolean;
+  folder: Folder | null;
+  onClose: () => void;
+  onConfirm: () => Promise<void>;
+  isLoading?: boolean;
+}
+
+export function DeleteFolderDialog({
+  isOpen,
+  folder,
+  onClose,
+  onConfirm,
+  isLoading = false,
+}: DeleteFolderDialogProps) {
+  if (!folder) return null;
+
+  return (
+    <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 Container */}
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 text-center">
+          <Dialog.Content
+            className={cn(
+              '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',
+              'bg-error/20 flex items-center justify-center'
+            )}>
+              <span className="text-2xl">{folder.emoji || '📁'}</span>
+            </div>
+
+            {/* Title */}
+            <h2 className="text-lg font-semibold text-text-primary mb-2">
+              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 &quot;All&quot;.
+              This action cannot be undone.
+            </p>
+
+            {/* Actions */}
+            <div className="flex gap-3">
+              <button
+                onClick={onClose}
+                disabled={isLoading}
+                className={cn(
+                  'flex-1 px-4 py-2.5 rounded-xl',
+                  'text-sm font-medium text-text-secondary',
+                  'bg-bg-tertiary hover:bg-bg-quaternary',
+                  'transition-colors duration-150',
+                  'disabled:opacity-50 disabled:cursor-not-allowed'
+                )}
+              >
+                Cancel
+              </button>
+              <button
+                onClick={onConfirm}
+                disabled={isLoading}
+                className={cn(
+                  'flex-1 flex items-center justify-center gap-2',
+                  'px-4 py-2.5 rounded-xl',
+                  'text-sm font-medium text-white',
+                  'bg-error hover:bg-error/90',
+                  'transition-colors duration-150',
+                  'disabled:opacity-50 disabled:cursor-not-allowed'
+                )}
+              >
+                {isLoading ? (
+                  <Loader2 className="w-4 h-4 animate-spin" />
+                ) : null}
+                <span>Delete Folder</span>
+              </button>
+            </div>
+          </Dialog.Content>
+        </div>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
 }