Enhance attachment menu and toggle button in App.jsx

src/App.jsx

@@ -3376,23 +3376,57 @@ async function createNewChat() {
                     </div>
                   )}
                 </div>
-                  {selectedVisionModelSupportsVision && (
+                  <div className="footer-tool-group" ref={attachmentMenuRef}>
                     <button
                       type="button"
-                      className={"image-attach-toggle" + (composerAttachments.length > 0 ? " active" : "")}
+                      className={"attachment-toggle" + (composerAttachments.length > 0 ? " active" : "")}
-                      onClick={openImagePicker}
+                      onClick={() => setIsAttachmentMenuOpen(prev => !prev)}
-                      title="Attach images"
+                      title="Add attachments"
-                      aria-label="Attach images"
+                      aria-label="Add attachments"
+                      aria-haspopup="menu"
+                      aria-expanded={isAttachmentMenuOpen}
                     >
                       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
                            aria-hidden="true">
-                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+                        <path d="M12 5v14"/>
-                        <circle cx="8.5" cy="8.5" r="1.5"/>
+                        <path d="M5 12h14"/>
-                        <path d="M21 15l-5-5L5 21"/>
                       </svg>
                     </button>
-                  )}
+                    {isAttachmentMenuOpen && (
+                      <div className="attachment-menu" role="menu">
+                        <button
+                          type="button"
+                          className="attachment-menu-option"
+                          onClick={() => {
+                            setIsAttachmentMenuOpen(false)
+                            openImagePicker()
+                          }}
+                          disabled={!canAttachImages}
+                          title={canAttachImages ? 'Add one or more image files' : imageAttachmentUnavailableReason}
+                        >
+                          <span>Add Image(s)</span>
+                          {!canAttachImages && <span className="attachment-menu-status">Unavailable</span>}
+                        </button>
+                        <button
+                          type="button"
+                          className="attachment-menu-option"
+                          onClick={async () => {
+                            setIsAttachmentMenuOpen(false)
+                            await openFilePicker()
+                          }}
+                          title="Add supported document, text, audio, or video files"
+                        >
+                          <span>Add File(s)</span>
+                        </button>
+                        {!canAttachImages && (
+                          <div className="attachment-menu-hint">
+                            {imageAttachmentUnavailableReason}
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </div>
                   {audioInputEnabled && (
                     <button
                       type="button"