🎨 style: Header UI Transitions & Image Detail Panel (#7653)

* feat: Enhance DialogImage component with image size retrieval and details panel

* feat: Improve UI transitions and responsiveness in Header, DialogImage, Nav, and SearchBar components

* fix: Correct button icon toggle in DialogImage component

client/src/components/Chat/Header.tsx

@@ -37,9 +37,24 @@ export default function Header() {
     <div className="sticky top-0 z-10 flex h-14 w-full items-center justify-between bg-white p-2 font-semibold text-text-primary dark:bg-gray-800">
       <div className="hide-scrollbar flex w-full items-center justify-between gap-2 overflow-x-auto">
         <div className="mx-1 flex items-center gap-2">
-          {!navVisible && <OpenSidebar setNavVisible={setNavVisible} />}
-          {!navVisible && <HeaderNewChat />}
-          {<ModelSelector startupConfig={startupConfig} />}
+          <div
+            className={`flex items-center gap-2 ${
+              !isSmallScreen ? 'transition-all duration-500 ease-in-out' : ''
+            } ${
+              !navVisible
+                ? 'translate-x-0 opacity-100'
+                : 'pointer-events-none translate-x-[-100px] opacity-0'
+            }`}
+          >
+            <OpenSidebar setNavVisible={setNavVisible} />
+            <HeaderNewChat />
+          </div>
+          <div
+            className={`flex items-center gap-2 ${
+              !isSmallScreen ? 'transition-all duration-500 ease-in-out' : ''
+            } ${!navVisible ? 'translate-x-0' : 'translate-x-[-100px]'}`}
+          >
+            <ModelSelector startupConfig={startupConfig} />
             {interfaceConfig.presets === true && interfaceConfig.modelSelect && <PresetsMenu />}
             {hasAccessToBookmarks === true && <BookmarkMenu />}
             {hasAccessToMultiConvo === true && <AddMultiConvo />}
@@ -52,6 +67,7 @@ export default function Header() {
               </>
             )}
           </div>
+        </div>
         {!isSmallScreen && (
           <div className="flex items-center gap-2">
             <ExportAndShareMenu

client/src/components/Chat/Messages/Content/DialogImage.tsx

@@ -1,7 +1,48 @@
-import { X, ArrowDownToLine } from 'lucide-react';
-import { Button, OGDialog, OGDialogContent } from '~/components';
+import { useState, useEffect } from 'react';
+import { X, ArrowDownToLine, PanelLeftOpen, PanelLeftClose } from 'lucide-react';
+import { Button, OGDialog, OGDialogContent, TooltipAnchor } from '~/components';
+import { useLocalize } from '~/hooks';
+
+export default function DialogImage({ isOpen, onOpenChange, src = '', downloadImage, args }) {
+  const localize = useLocalize();
+  const [isPromptOpen, setIsPromptOpen] = useState(false);
+  const [imageSize, setImageSize] = useState<string | null>(null);
+
+  const getImageSize = async (url: string) => {
+    try {
+      const response = await fetch(url, { method: 'HEAD' });
+      const contentLength = response.headers.get('Content-Length');
+
+      if (contentLength) {
+        const bytes = parseInt(contentLength, 10);
+        return formatFileSize(bytes);
+      }
+
+      const fullResponse = await fetch(url);
+      const blob = await fullResponse.blob();
+      return formatFileSize(blob.size);
+    } catch (error) {
+      console.error('Error getting image size:', error);
+      return null;
+    }
+  };
+
+  const formatFileSize = (bytes: number): string => {
+    if (bytes === 0) return '0 Bytes';
+
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
+  useEffect(() => {
+    if (isOpen && src) {
+      getImageSize(src).then(setImageSize);
+    }
+  }, [isOpen, src]);
 
-export default function DialogImage({ isOpen, onOpenChange, src = '', downloadImage }) {
   return (
     <OGDialog open={isOpen} onOpenChange={onOpenChange}>
       <OGDialogContent
@@ -10,7 +51,12 @@ export default function DialogImage({ isOpen, onOpenChange, src = '', downloadIm
         disableScroll={false}
         overlayClassName="bg-surface-primary opacity-95 z-50"
       >
-        <div className="absolute left-0 right-0 top-0 flex items-center justify-between p-4">
+        <div
+          className={`absolute left-0 top-0 z-10 flex items-center justify-between p-4 transition-all duration-500 ease-in-out ${isPromptOpen ? 'right-80' : 'right-0'}`}
+        >
+          <TooltipAnchor
+            description={localize('com_ui_close')}
+            render={
               <Button
                 onClick={() => onOpenChange(false)}
                 variant="ghost"
@@ -18,24 +64,125 @@ export default function DialogImage({ isOpen, onOpenChange, src = '', downloadIm
               >
                 <X className="size-6" />
               </Button>
+            }
+          />
+          <div className="flex items-center gap-2">
+            <TooltipAnchor
+              description={localize('com_ui_save')}
+              render={
                 <Button onClick={() => downloadImage()} variant="ghost" className="h-10 w-10 p-0">
                   <ArrowDownToLine className="size-6" />
                 </Button>
-        </div>
-        <OGDialog open={isOpen} onOpenChange={onOpenChange}>
-          <OGDialogContent
-            showCloseButton={false}
-            className="w-11/12 overflow-x-auto rounded-none bg-transparent p-4 shadow-none sm:w-auto"
-            disableScroll={false}
-            overlayClassName="bg-transparent"
+              }
+            />
+            <TooltipAnchor
+              description={
+                isPromptOpen
+                  ? localize('com_ui_hide_image_details')
+                  : localize('com_ui_show_image_details')
+              }
+              render={
+                <Button
+                  onClick={() => setIsPromptOpen(!isPromptOpen)}
+                  variant="ghost"
+                  className="h-10 w-10 p-0"
                 >
+                  {isPromptOpen ? (
+                    <PanelLeftOpen className="size-6" />
+                  ) : (
+                    <PanelLeftClose className="size-6" />
+                  )}
+                </Button>
+              }
+            />
+          </div>
+        </div>
+
+        {/* Main content area with image */}
+        <div
+          className={`flex h-full transition-all duration-500 ease-in-out ${isPromptOpen ? 'mr-80' : 'mr-0'}`}
+        >
+          <div className="flex flex-1 items-center justify-center px-4 pb-4 pt-20">
             <img
               src={src}
-              alt="Uploaded image"
-              className="max-w-screen h-full max-h-screen w-full object-contain"
+              alt="Image"
+              className="max-h-full max-w-full object-contain"
+              style={{
+                maxHeight: 'calc(100vh - 6rem)', // Account for header and padding
+                maxWidth: '100%',
+              }}
             />
-          </OGDialogContent>
-        </OGDialog>
+          </div>
+        </div>
+
+        {/* Side Panel */}
+        <div
+          className={`shadow-l-lg fixed right-0 top-0 z-20 h-full w-80 transform rounded-l-2xl border-l border-border-light bg-surface-secondary transition-transform duration-500 ease-in-out ${
+            isPromptOpen ? 'translate-x-0' : 'translate-x-full'
+          }`}
+        >
+          <div className="h-full overflow-y-auto p-6">
+            <div className="mb-4">
+              <h3 className="mb-2 text-lg font-semibold text-text-primary">
+                {localize('com_ui_image_details')}
+              </h3>
+              <div className="mb-4 h-px bg-border-medium"></div>
+            </div>
+
+            <div className="space-y-6">
+              {/* Prompt Section */}
+              <div>
+                <h4 className="mb-2 text-sm font-medium text-text-secondary">
+                  {localize('com_ui_prompt')}
+                </h4>
+                <div className="rounded-md bg-surface-tertiary p-3">
+                  <p className="text-sm leading-relaxed text-text-primary">
+                    {args?.prompt || 'No prompt available'}
+                  </p>
+                </div>
+              </div>
+
+              {/* Generation Settings */}
+              <div>
+                <h4 className="mb-3 text-sm font-medium text-text-secondary">
+                  {localize('com_ui_generation_settings')}
+                </h4>
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-text-secondary">{localize('com_ui_size')}:</span>
+                    <span className="text-sm font-medium text-text-primary">
+                      {args?.size || 'Unknown'}
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-text-secondary">
+                      {localize('com_ui_quality')}:
+                    </span>
+                    <span
+                      className={`rounded px-2 py-1 text-xs font-medium capitalize ${
+                        args?.quality === 'high'
+                          ? 'bg-green-100 text-green-800'
+                          : args?.quality === 'low'
+                            ? 'bg-orange-100 text-orange-800'
+                            : 'bg-gray-100 text-gray-800'
+                      }`}
+                    >
+                      {args?.quality || 'Standard'}
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-text-secondary">
+                      {localize('com_ui_file_size')}:
+                    </span>
+                    <span className="text-sm font-medium text-text-primary">
+                      {imageSize || 'Loading...'}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </OGDialogContent>
     </OGDialog>
   );

client/src/components/Chat/Messages/Content/Image.tsx

@@ -11,6 +11,7 @@ const Image = ({
   width,
   placeholderDimensions,
   className,
+  args,
 }: {
   imagePath: string;
   altText: string;
@@ -21,6 +22,13 @@ const Image = ({
     width?: string;
   };
   className?: string;
+  args?: {
+    prompt?: string;
+    quality?: 'low' | 'medium' | 'high';
+    size?: string;
+    style?: string;
+    [key: string]: unknown;
+  };
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [isLoaded, setIsLoaded] = useState(false);
@@ -91,6 +99,7 @@ const Image = ({
             onOpenChange={setIsOpen}
             src={imagePath}
             downloadImage={downloadImage}
+            args={args}
           />
         )}
       </div>

client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/OpenAIImageGen.tsx

@@ -32,8 +32,17 @@ export default function OpenAIImageGen({
   let height: number | undefined;
   let quality: 'low' | 'medium' | 'high' = 'high';
 
+  // Parse args if it's a string
+  let parsedArgs;
   try {
-    const argsObj = typeof _args === 'string' ? JSON.parse(_args) : _args;
+    parsedArgs = typeof _args === 'string' ? JSON.parse(_args) : _args;
+  } catch (error) {
+    console.error('Error parsing args:', error);
+    parsedArgs = {};
+  }
+
+  try {
+    const argsObj = parsedArgs;
 
     if (argsObj && typeof argsObj.size === 'string') {
       const [w, h] = argsObj.size.split('x').map((v: string) => parseInt(v, 10));
@@ -197,6 +206,7 @@ export default function OpenAIImageGen({
             width={Number(dimensions.width?.split('px')[0])}
             height={Number(dimensions.height?.split('px')[0])}
             placeholderDimensions={{ width: dimensions.width, height: dimensions.height }}
+            args={parsedArgs}
           />
         </div>
       </div>

client/src/components/Nav/Nav.tsx

@@ -30,7 +30,7 @@ const NavMask = memo(
       id="mobile-nav-mask-toggle"
       role="button"
       tabIndex={0}
-      className={`nav-mask ${navVisible ? 'active' : ''}`}
+      className={`nav-mask transition-opacity duration-500 ease-in-out ${navVisible ? 'active opacity-100' : 'opacity-0'}`}
       onClick={toggleNavVisible}
       onKeyDown={(e) => {
         if (e.key === 'Enter' || e.key === ' ') {
@@ -186,18 +186,19 @@ const Nav = memo(
         <div
           data-testid="nav"
           className={cn(
-            'nav active max-w-[320px] flex-shrink-0 overflow-x-hidden bg-surface-primary-alt',
+            'nav active max-w-[320px] flex-shrink-0 transform overflow-x-hidden bg-surface-primary-alt transition-all duration-500 ease-in-out',
             'md:max-w-[260px]',
           )}
           style={{
             width: navVisible ? navWidth : '0px',
-            visibility: navVisible ? 'visible' : 'hidden',
-            transition: 'width 0.2s, visibility 0.2s',
+            transform: navVisible ? 'translateX(0)' : 'translateX(-100%)',
           }}
         >
           <div className="h-full w-[320px] md:w-[260px]">
             <div className="flex h-full flex-col">
-              <div className="flex h-full flex-col transition-opacity">
+              <div
+                className={`flex h-full flex-col transition-opacity duration-500 ease-in-out ${navVisible ? 'opacity-100' : 'opacity-0'}`}
+              >
                 <div className="flex h-full flex-col">
                   <nav
                     id="chat-history-nav"

client/src/components/Nav/SearchBar.tsx

@@ -103,7 +103,7 @@ const SearchBar = forwardRef((props: SearchBarProps, ref: React.Ref<HTMLDivEleme
       ref={ref}
       className={cn(
         'group relative mt-1 flex h-10 cursor-pointer items-center gap-3 rounded-lg border-border-medium px-3 py-2 text-text-primary transition-colors duration-200 focus-within:bg-surface-hover hover:bg-surface-hover',
-        isSmallScreen === true ? 'mb-2 h-14 rounded-2xl' : '',
+        isSmallScreen === true ? 'mb-2 h-14 rounded-xl' : '',
       )}
     >
       <Search className="absolute left-3 h-4 w-4 text-text-secondary group-focus-within:text-text-primary group-hover:text-text-primary" />

client/src/locales/en/translation.json

@@ -869,6 +869,12 @@
   "com_ui_sign_in_to_domain": "Sign-in to {{0}}",
   "com_ui_simple": "Simple",
   "com_ui_size": "Size",
+  "com_ui_quality": "Quality",
+  "com_ui_generation_settings": "Generation Settings",
+  "com_ui_image_details": "Image Details",
+  "com_ui_show_image_details": "Show Image Details",
+  "com_ui_hide_image_details": "Hide Image Details",
+  "com_ui_file_size": "File Size",
   "com_ui_special_var_current_date": "Current Date",
   "com_ui_special_var_current_datetime": "Current Date & Time",
   "com_ui_special_var_current_user": "Current User",