fix: remove !important overrides, replace native selects, add entry animations to panels

Author: Swofty-Developments

crates/tauri-app/frontend/src/components/chat/ChatArea.tsx

@@ -512,14 +512,14 @@ if (!document.getElementById("chat-styles")) {
       color: var(--text-secondary);
       line-height: 1.4;
     }
-    .new-convo {
-      font-size: 18px !important;
+    .chat-empty .new-convo {
+      font-size: 18px;
       font-weight: 600;
-      color: var(--text) !important;
+      color: var(--text);
       letter-spacing: -0.3px;
     }
-    .provider-hint {
-      font-size: 12px !important;
+    .chat-empty .provider-hint {
+      font-size: 12px;
       color: var(--text-tertiary);
       margin-bottom: 8px;
     }
@@ -701,14 +701,14 @@ if (!document.getElementById("chat-styles")) {
       border-radius: var(--radius-sm);
       color: var(--text-tertiary);
       opacity: 0;
-      transition: all 0.12s ease;
+      transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
       cursor: pointer;
     }
     .msg:hover .msg-action-btn {
       opacity: 0.5;
     }
-    .msg-action-btn:hover {
-      opacity: 1 !important;
+    .msg:hover .msg-action-btn:hover {
+      opacity: 1;
       background: var(--bg-accent);
       color: var(--text-secondary);
     }

crates/tauri-app/frontend/src/components/git/GitPanel.tsx

@@ -366,13 +366,18 @@ export function GitPanel(props: { cwd: string }) {
 }
 
 const GIT_PANEL_STYLES = `
+  @keyframes gp-slide-in {
+    from { opacity: 0; max-height: 0; }
+    to { opacity: 1; max-height: 320px; }
+  }
   .gp-root {
     border-top: 1px solid var(--border);
     background: var(--bg-card);
     display: flex;
     flex-direction: column;
     max-height: 320px;
     overflow: hidden;
+    animation: gp-slide-in 0.25s ease both;
   }
 
   /* Tabs */

crates/tauri-app/frontend/src/components/github/PrReviewPanel.tsx

@@ -488,13 +488,18 @@ export function PrReviewPanel(props: Props) {
 }
 
 const PRR_STYLES = `
+  @keyframes prr-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
   .prr-pane {
     background: var(--bg-card);
     border-left: 1px solid var(--border);
     display: flex;
     flex-direction: column;
     overflow: hidden;
     height: 100%;
+    animation: prr-fade-in 0.2s ease both;
   }
 
   /* ── Header ── */

crates/tauri-app/frontend/src/components/settings/SettingsOverlay.tsx

@@ -61,24 +61,24 @@ export function SettingsOverlay() {
 
         <div class="settings-section">
           <label>Permission Mode</label>
-          <select
-            class="settings-select"
-            value={permissionMode()}
-            onChange={(e) => {
-              const val = e.currentTarget.value;
-              setPermissionMode(val);
-              ipc.setSetting("permission_mode", val);
-            }}
-          >
+          <div class="settings-perm-list">
             <For each={PERMISSION_MODES}>
               {(mode) => (
-                <option value={mode.value}>
-                  {mode.label} — {mode.description}
-                </option>
+                <button
+                  class="settings-perm-option"
+                  classList={{ "settings-perm-option--active": permissionMode() === mode.value }}
+                  onClick={() => {
+                    setPermissionMode(mode.value);
+                    ipc.setSetting("permission_mode", mode.value);
+                  }}
+                >
+                  <span class="settings-perm-label">{mode.label}</span>
+                  <span class="settings-perm-desc">{mode.description}</span>
+                </button>
               )}
             </For>
-          </select>
-          <span class="settings-hint">Controls how Claude Code handles tool approvals. Takes effect on next session.</span>
+          </div>
+          <span class="settings-hint">Takes effect on next session.</span>
         </div>
 
         <div class="settings-section">
@@ -143,24 +143,43 @@ export function SettingsOverlay() {
           text-transform: uppercase;
           letter-spacing: 0.06em;
         }
-        .settings-section input,
-        .settings-section .settings-select {
+        .settings-section input {
           width: 100%;
           font-family: var(--font-mono);
           font-size: 12px;
         }
-        .settings-select {
+        .settings-perm-list {
+          display: flex;
+          flex-direction: column;
+          gap: 3px;
           background: var(--bg-muted);
-          color: var(--text);
-          border: 1px solid var(--border);
+          border-radius: var(--radius-md);
+          padding: 3px;
+        }
+        .settings-perm-option {
+          display: flex;
+          flex-direction: column;
+          gap: 1px;
+          padding: 7px 10px;
           border-radius: var(--radius-sm);
-          padding: 6px 8px;
-          cursor: pointer;
-          outline: none;
-          transition: border-color 0.15s;
+          text-align: left;
+          transition: background 0.1s;
+        }
+        .settings-perm-option:hover { background: var(--bg-hover); }
+        .settings-perm-option--active {
+          background: var(--bg-accent);
+          box-shadow: 0 1px 3px rgba(0,0,0,0.15);
+        }
+        .settings-perm-label {
+          font-size: 12px;
+          font-weight: 600;
+          color: var(--text);
+        }
+        .settings-perm-option--active .settings-perm-label { color: var(--primary); }
+        .settings-perm-desc {
+          font-size: 10px;
+          color: var(--text-tertiary);
         }
-        .settings-select:hover { border-color: var(--border-strong); }
-        .settings-select:focus { border-color: var(--primary); }
         .settings-hint {
           display: block;
           font-size: 10px;