From 070c210d856e5294c27b76f304f35af19e2eaadc Mon Sep 17 00:00:00 2001
From: NimBold <NimBold@users.noreply.github.com>
Date: Sat, 20 Jun 2026 19:57:19 +0330
Subject: [PATCH] feat(ui): modernize toasts, enhance button feedback, and
 restructure layouts

- Add global scale-down animation to button active states for tactile feedback
- Reposition toast notifications to bottom-center with updated modern styling
- Split 'Start Downloads' and 'Add to...' actions in AddDownloadsModal
- Overhaul Category Subfolders layout in SettingsView using flexbox for better alignment
---
 src/components/AddDownloadsModal.tsx | 109 +++++++++++++++------------
 src/components/SettingsView.tsx      |  83 +++++++++++---------
 src/contexts/ToastContext.tsx        |  11 +--
 src/index.css                        |   8 +-
 4 files changed, 118 insertions(+), 93 deletions(-)

diff --git a/src/components/AddDownloadsModal.tsx b/src/components/AddDownloadsModal.tsx
index 9454574..4278d16 100644
--- a/src/components/AddDownloadsModal.tsx
+++ b/src/components/AddDownloadsModal.tsx
@@ -1112,62 +1112,75 @@ export const AddDownloadsModal = () => {
             <button onClick={() => toggleAddModal(false)} className="add-download-button add-download-button-cancel px-4 text-xs">
               Cancel
             </button>
-            <div ref={actionMenuRef} className="relative flex">
+            <div ref={actionMenuRef} className="relative flex gap-2.5">
               <button
                 onClick={() => handleAction({ type: 'start-now' })}
                 disabled={parsedItems.length === 0}
-                className="add-download-button add-download-button-primary rounded-r-none px-5 text-xs"
+                className="add-download-button add-download-button-primary px-5 text-xs"
               >
                 <Play size={12} fill="currentColor" /> Start Downloads
               </button>
-              <button
-                type="button"
-                onClick={() => setIsActionMenuOpen(open => !open)}
-                disabled={parsedItems.length === 0}
-                className="add-download-button add-download-button-primary rounded-l-none border-l border-white/20 px-2 text-xs"
-                aria-label="More add actions"
-                aria-haspopup="menu"
-                aria-expanded={isActionMenuOpen}
-              >
-                <ChevronDown size={14} />
-              </button>
-              {isActionMenuOpen && (
-                <div
-                  role="menu"
-                  className="app-modal absolute bottom-full right-0 z-[70] mb-2 min-w-[230px] overflow-hidden py-1.5 text-xs"
+              <div className="relative">
+                <button
+                  type="button"
+                  onClick={() => setIsActionMenuOpen(open => !open)}
+                  disabled={parsedItems.length === 0}
+                  className="add-download-button add-download-button-secondary px-4 text-xs"
+                  aria-label="Add to..."
+                  aria-haspopup="menu"
+                  aria-expanded={isActionMenuOpen}
                 >
-                  <button
-                    type="button"
-                    role="menuitem"
-                    onClick={() => {
-                      setIsActionMenuOpen(false);
-                      void handleAction({ type: 'add-to-list' });
-                    }}
-                    className="flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-item-hover"
+                  Add to... <ChevronDown size={14} className="ml-1" />
+                </button>
+                {isActionMenuOpen && (
+                  <div
+                    role="menu"
+                    className="app-modal absolute bottom-full right-0 z-[70] mb-2 min-w-[200px] overflow-visible py-1.5 text-xs"
                   >
-                    <Rows3 size={14} />
-                    <span>Add to List</span>
-                  </button>
-                  <button
-                    type="button"
-                    role="menuitem"
-                    onClick={() => {
-                      setIsActionMenuOpen(false);
-                      const queueId = queues.length === 1 ? queues[0].id : selectedQueueId;
-                      void handleAction({ type: 'add-to-queue', queueId });
-                    }}
-                    className="flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-item-hover"
-                  >
-                    <ListPlus size={14} />
-                    <span className="min-w-0">
-                      <span className="block">Add to Queue</span>
-                      <span className="block truncate text-[10px] text-text-muted">
-                        {queues.find(queue => queue.id === (queues.length === 1 ? queues[0].id : selectedQueueId))?.name}
-                      </span>
-                    </span>
-                  </button>
-                </div>
-              )}
+                    <button
+                      type="button"
+                      role="menuitem"
+                      onClick={() => {
+                        setIsActionMenuOpen(false);
+                        void handleAction({ type: 'add-to-list' });
+                      }}
+                      className="flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-item-hover"
+                    >
+                      <Rows3 size={14} />
+                      <span>Add to List</span>
+                    </button>
+                    <div className="group relative">
+                      <button
+                        type="button"
+                        role="menuitem"
+                        className="flex w-full items-center justify-between gap-2 px-3 py-2 text-left hover:bg-item-hover"
+                      >
+                        <div className="flex items-center gap-2">
+                          <ListPlus size={14} />
+                          <span>Add to Queue</span>
+                        </div>
+                        <ChevronRight size={14} />
+                      </button>
+                      <div className="app-modal absolute bottom-0 right-[calc(100%+4px)] z-[80] hidden min-w-[160px] py-1.5 group-hover:block">
+                        {queues.map(queue => (
+                          <button
+                            key={queue.id}
+                            type="button"
+                            role="menuitem"
+                            onClick={() => {
+                              setIsActionMenuOpen(false);
+                              void handleAction({ type: 'add-to-queue', queueId: queue.id });
+                            }}
+                            className="flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-item-hover"
+                          >
+                            <span className="truncate">{queue.name}</span>
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/components/SettingsView.tsx b/src/components/SettingsView.tsx
index 93b6c52..845a68c 100644
--- a/src/components/SettingsView.tsx
+++ b/src/components/SettingsView.tsx
@@ -697,46 +697,55 @@ runEngineChecks(false);
                   <span className="text-[11px] text-text-muted">Relative to the base folder</span>
                 </div>
 
-                {DOWNLOAD_CATEGORIES.map((category) => (
-                  <div key={category} className="mac-settings-row">
-                    <span className="text-[13px] text-text-primary pl-4">{category}</span>
-                    <div className="flex items-center gap-2">
-                      <input
-                        type="text"
-                        value={settings.categorySubfolders[category] || ''}
-                        onChange={(e) => settings.setCategorySubfolder(category, e.target.value)}
-                        onBlur={(e) => settings.setCategorySubfolder(
-                          category,
-                          normalizeCategorySubfolder(
-                            e.target.value,
-                            DEFAULT_CATEGORY_SUBFOLDERS[category]
-                          )
-                        )}
-                        className="app-control w-64 text-[11px] px-2"
-                        aria-label={`${category} subfolder`}
-                      />
-                      <button
-                        onClick={() => handleBrowseCategory(category)}
-                        className="app-button px-3 text-xs text-text-secondary hover:bg-item-hover"
-                      >
-                        Custom folder
-                      </button>
+                <div className="flex flex-col divide-y divide-border-color/30">
+                  {DOWNLOAD_CATEGORIES.map((category) => (
+                    <div key={category} className="flex flex-col gap-2 px-4 py-3 hover:bg-item-hover/20 transition-colors">
+                      <div className="flex justify-between items-center">
+                        <span className="text-[13px] font-medium text-text-primary w-32 shrink-0">{category}</span>
+                        <div className="flex items-center gap-2 flex-1 justify-end">
+                          <input
+                            type="text"
+                            value={settings.categorySubfolders[category] || ''}
+                            onChange={(e) => settings.setCategorySubfolder(category, e.target.value)}
+                            onBlur={(e) => settings.setCategorySubfolder(
+                              category,
+                              normalizeCategorySubfolder(
+                                e.target.value,
+                                DEFAULT_CATEGORY_SUBFOLDERS[category]
+                              )
+                            )}
+                            className="app-control flex-1 max-w-[280px] text-[12px] px-3 py-1.5 bg-surface-overlay/50 border-border-color/50 focus:border-accent-color focus:bg-surface-overlay"
+                            aria-label={`${category} subfolder`}
+                          />
+                          <button
+                            onClick={() => handleBrowseCategory(category)}
+                            className="app-button px-3 py-1.5 text-xs text-text-secondary hover:text-text-primary hover:bg-surface-overlay"
+                          >
+                            Custom folder
+                          </button>
+                          {settings.categoryDirectoryOverrides[category] && (
+                            <button
+                              onClick={() => settings.setCategoryDirectoryOverride(category)}
+                              className="app-button px-3 py-1.5 text-xs text-text-secondary hover:text-red-400 hover:bg-red-500/10 hover:border-red-500/30"
+                            >
+                              Use automatic
+                            </button>
+                          )}
+                        </div>
+                      </div>
                       {settings.categoryDirectoryOverrides[category] && (
-                        <button
-                          onClick={() => settings.setCategoryDirectoryOverride(category)}
-                          className="app-button px-3 text-xs text-text-secondary hover:bg-item-hover"
-                        >
-                          Use automatic
-                        </button>
+                        <div className="flex pl-32">
+                          <div className="bg-surface-overlay/40 border border-border-color/30 rounded px-2 py-1 flex items-center gap-2">
+                            <span className="text-[10px] uppercase font-bold text-text-muted">Override</span>
+                            <span className="text-[11px] font-mono text-text-secondary truncate max-w-[400px]">
+                              {settings.categoryDirectoryOverrides[category]}
+                            </span>
+                          </div>
+                        </div>
                       )}
                     </div>
-                    {settings.categoryDirectoryOverrides[category] && (
-                      <p className="col-span-full pl-4 text-[10px] text-text-muted">
-                        Override: {settings.categoryDirectoryOverrides[category]}
-                      </p>
-                    )}
-                  </div>
-                ))}
+                  ))}
+                </div>
                 
                 <div className="mac-settings-row justify-end border-t-0">
                   <button
diff --git a/src/contexts/ToastContext.tsx b/src/contexts/ToastContext.tsx
index 9d91683..5fb8ef0 100644
--- a/src/contexts/ToastContext.tsx
+++ b/src/contexts/ToastContext.tsx
@@ -71,10 +71,10 @@ const ToastItem: React.FC<{ toast: ToastMessage; removeToast: (id: string) => vo
 
   // Variant styling
   const variantStyles = {
-    success: 'border-green-500/50 bg-green-500/10 text-green-700 dark:text-green-400',
+    success: 'border-[#10b981]/20 bg-[#064e3b]/95 text-[#34d399]',
     info: 'border-[hsl(var(--border-modal))] bg-[hsl(var(--surface-overlay))] text-[hsl(var(--text-primary))]',
-    warning: 'border-yellow-500/50 bg-yellow-500/10 text-yellow-700 dark:text-yellow-400',
-    error: 'border-red-500/50 bg-red-500/10 text-red-700 dark:text-red-400',
+    warning: 'border-[#eab308]/20 bg-[#713f12]/95 text-[#fde047]',
+    error: 'border-[#ef4444]/20 bg-[#7f1d1d]/95 text-[#f87171]',
   };
 
   const style = variantStyles[toast.variant || 'info'];
@@ -82,7 +82,8 @@ const ToastItem: React.FC<{ toast: ToastMessage; removeToast: (id: string) => vo
   return (
     <div
       role={role}
-      className={`app-toast-item pointer-events-auto flex items-center justify-between gap-4 rounded-lg border p-4 shadow-lg backdrop-blur-[20px] transition-all duration-300 motion-reduce:transition-none motion-reduce:animation-none text-[12px] ${style}`}
+      className={`app-toast-item pointer-events-auto flex items-center justify-between gap-4 rounded-xl border p-4 shadow-2xl backdrop-blur-[20px] transition-all duration-300 text-[13px] ${style}`}
+      style={{ animation: 'fade-in 200ms ease-out forwards' }}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
       onFocus={() => setIsHovered(true)}
@@ -105,7 +106,7 @@ const ToastItem: React.FC<{ toast: ToastMessage; removeToast: (id: string) => vo
 
 const ToastContainer: React.FC<{ toasts: ToastMessage[]; removeToast: (id: string) => void }> = ({ toasts, removeToast }) => {
   return (
-    <div className="fixed bottom-5 right-5 z-[100] flex max-w-[420px] flex-col gap-2 pointer-events-none">
+    <div className="fixed bottom-10 left-1/2 -translate-x-1/2 z-[100] flex w-full max-w-[420px] flex-col gap-3 pointer-events-none items-center">
       {toasts.map(toast => (
         <ToastItem key={toast.id} toast={toast} removeToast={removeToast} />
       ))}
diff --git a/src/index.css b/src/index.css
index 115b778..834831d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -352,7 +352,7 @@
     color: hsl(var(--text-primary));
     font-weight: 500;
     font-size: 13px;
-    transition: background-color 100ms ease;
+    transition: background-color 100ms ease, transform 100ms ease;
     box-shadow: 0 1px 1px hsl(var(--shadow-color));
   }
 
@@ -362,6 +362,7 @@
 
   .app-button:active:not(:disabled) {
     background: hsl(var(--border-color));
+    transform: scale(0.96);
   }
 
   .app-button-primary {
@@ -382,7 +383,7 @@
     justify-content: center;
     border-radius: 6px;
     color: hsl(var(--text-secondary));
-    transition: background-color 100ms ease;
+    transition: background-color 100ms ease, transform 100ms ease;
   }
 
   .app-icon-button:hover:not(:disabled) {
@@ -392,6 +393,7 @@
 
   .app-icon-button:active:not(:disabled) {
     background: hsl(var(--border-color));
+    transform: scale(0.94);
   }
 
   .app-modal-backdrop {
@@ -695,7 +697,7 @@
   }
 
   .add-download-button:active:not(:disabled) {
-    transform: translateY(1px);
+    transform: scale(0.96);
   }
 
   .add-download-button-secondary {