gui work

web/maplefile-frontend/src/components/UIX/IconPicker/IconPicker.jsx

@@ -212,7 +212,7 @@ const IconPicker = ({ value, onChange, onClose, isOpen }) => {
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
-      <div className="bg-white rounded-xl shadow-xl max-w-2xl w-full max-h-[85vh] flex flex-col">
+      <div className="bg-white rounded-xl shadow-xl max-w-2xl lg:max-w-3xl w-full max-h-[85vh] flex flex-col">
         {/* Header */}
         <div className="flex items-center justify-between p-4 border-b border-gray-200">
           <h3 className="text-lg font-semibold text-gray-900">Choose Icon</h3>

web/maplefile-frontend/src/pages/User/FileManager/Collections/CollectionCreate.jsx

@@ -31,7 +31,6 @@ import {
   Button,
   Alert,
   Card,
-  Radio,
   useUIXTheme,
   IconPicker,
   CollectionIconPreview,
@@ -491,23 +490,25 @@ const CollectionCreate = () => {
                         : "Add a custom emoji or icon to personalize your folder"}
                     </p>
                     <div className="flex space-x-2">
-                      <button
+                      <Button
                         type="button"
                         onClick={handleOpenIconPicker}
                         disabled={isLoading}
-                        className={`px-3 py-1.5 text-sm font-medium rounded-lg border ${getThemeClasses("border-secondary")} ${getThemeClasses("text-primary")} ${getThemeClasses("hover:bg-muted")} transition-colors disabled:opacity-50`}
+                        variant="secondary"
+                        size="sm"
                       >
                         {customIcon ? "Change Icon" : "Choose Icon"}
-                      </button>
+                      </Button>
                       {customIcon && (
-                        <button
+                        <Button
                           type="button"
                           onClick={() => setCustomIcon("")}
                           disabled={isLoading}
-                          className={`px-3 py-1.5 text-sm font-medium rounded-lg ${getThemeClasses("text-secondary")} ${getThemeClasses("hover:text-primary")} transition-colors disabled:opacity-50`}
+                          variant="ghost"
+                          size="sm"
                         >
                           Reset
-                        </button>
+                        </Button>
                       )}
                     </div>
                   </div>

web/maplefile-frontend/src/pages/User/FileManager/Files/FileUpload.jsx

@@ -773,6 +773,28 @@ const FileUpload = () => {
 
           {/* Content */}
           <div className="px-6 pb-6 pt-5">
+            {/* No Folders - Show create folder prompt instead of upload UI */}
+            {!preSelectedCollectionId && isCollectionsInitialized && !isLoadingCollections && availableCollections.length === 0 ? (
+              <div className="text-center py-12">
+                <div className={`h-20 w-20 ${getThemeClasses("bg-muted")} rounded-2xl flex items-center justify-center mx-auto mb-4`}>
+                  <FolderIcon className="h-10 w-10 text-gray-400" />
+                </div>
+                <h3 className={`text-xl font-semibold mb-2 ${getThemeClasses("text-primary")}`}>
+                  No folders yet
+                </h3>
+                <p className={`mb-6 max-w-md mx-auto ${getThemeClasses("text-secondary")}`}>
+                  You need to create a folder before you can upload files. Folders help you organize your encrypted files.
+                </p>
+                <Button
+                  onClick={() => navigate("/file-manager/collections/create")}
+                  variant="primary"
+                  icon={FolderIcon}
+                >
+                  Create Your First Folder
+                </Button>
+              </div>
+            ) : (
+            <>
             <div className={`grid grid-cols-1 gap-8 ${preSelectedCollectionId ? "lg:grid-cols-3" : ""}`}>
               {/* Upload Area */}
               <div className={`space-y-6 ${preSelectedCollectionId ? "lg:col-span-2" : ""}`}>
@@ -1339,6 +1361,8 @@ const FileUpload = () => {
                 )}
               </div>
             )}
+            </>
+            )}
           </div>
         </Card>
       </div>