feat: per-site profile overrides with compact popup redesign

README.md

@@ -55,6 +55,19 @@ Example: type `callMe` and expand it to `Call me back once you're free`.
 4. Use arrow keys to choose a suggestion.
 5. Press `Tab` to accept, or `Esc` to dismiss.
 
+## Site Profiles and Precedence
+
+FluentTyper applies configuration in this order:
+
+1. Global enable switch (`Enable Extension`) must be on.
+2. Domain allow/block mode decides if FluentTyper runs on the current site.
+3. If a site profile exists for the current domain, it overrides config values:
+   - `language`: always overridden by the profile value.
+   - `inline_suggestion`: overridden only when set in the profile; otherwise inherited from global.
+   - `numSuggestions`: overridden only when set in the profile; otherwise inherited from global.
+
+Site profiles never bypass domain enable/disable logic. If a domain is blocked by allow/block mode, FluentTyper remains disabled there even if a profile exists.
+
 ## Compatibility
 
 FluentTyper works on most websites. Some rich text editors (for example Google Docs) can be partially or fully incompatible.

eslint.config.js

@@ -25,6 +25,7 @@ export default defineConfig([
       "**/public/third_party/",
       "**/src/third_party/",
       "**/scripts/",
+      "**/coverage/",
     ],
   },
   tseslint.configs.recommended,

platform/chrome/manifest.json

@@ -97,4 +97,4 @@
     "default_popup": "popup/popup.html",
     "default_title": "FluentTyper"
   }
-}
+}

public/css/fluenttyper-theme.css

@@ -19,14 +19,20 @@
   --warning-text-color: #1e293b;
 
   /* Light Mode Palette */
-  --background-color: #f8fafc; /* slate-50 */
-  --text-color: #0f172a; /* slate-900 */
-  --text-color-light: #64748b; /* slate-500 */
+  --background-color: #f8fafc;
+  /* slate-50 */
+  --text-color: #0f172a;
+  /* slate-900 */
+  --text-color-light: #64748b;
+  /* slate-500 */
   --box-background-color: #ffffff;
   --box-shadow-color: rgba(71, 85, 105, 0.1);
-  --input-bg-color: #f8fafc; /* slate-50 */
-  --input-border-color: #e2e8f0; /* slate-200 */
-  --divider-color: #f1f5f9; /* slate-100 */
+  --input-bg-color: #f8fafc;
+  /* slate-50 */
+  --input-border-color: #e2e8f0;
+  /* slate-200 */
+  --divider-color: #f1f5f9;
+  /* slate-100 */
   --feature-box-bg: #f8fafc;
   --footer-text-color: #7a7a7a;
   --link-color: #363636;
@@ -35,17 +41,26 @@
 @media (prefers-color-scheme: dark) {
   :root {
     /* Dark Mode Palette */
-    --background-color: #1e293b; /* slate-800 */
-    --text-color: #e2e8f0; /* slate-200 */
-    --text-color-light: #94a3b8; /* slate-400 */
-    --box-background-color: #334155; /* slate-700 */
+    --background-color: #1e293b;
+    /* slate-800 */
+    --text-color: #e2e8f0;
+    /* slate-200 */
+    --text-color-light: #94a3b8;
+    /* slate-400 */
+    --box-background-color: #334155;
+    /* slate-700 */
     --box-shadow-color: rgba(0, 0, 0, 0.25);
-    --input-bg-color: #475569; /* slate-600 */
-    --input-border-color: #64748b; /* slate-500 */
-    --divider-color: #475569; /* slate-600 */
+    --input-bg-color: #475569;
+    /* slate-600 */
+    --input-border-color: #64748b;
+    /* slate-500 */
+    --divider-color: #475569;
+    /* slate-600 */
     --feature-box-bg: #475569;
-    --footer-text-color: #94a3b8; /* slate-400 */
-    --link-color: #cbd5e1; /* slate-300 */
+    --footer-text-color: #94a3b8;
+    /* slate-400 */
+    --link-color: #cbd5e1;
+    /* slate-300 */
   }
 }
 
@@ -84,102 +99,164 @@
   --bulma-text-weak: var(--text-color-light);
 }
 
-/* 3. POPUP-SPECIFIC STYLES
+/* 3. MODERN CONTROL PANEL STYLES
 ----------------------------------------------------------------*/
 
 /* General Body */
 body.fluenttyper-popup {
   font-family: var(--bulma-body-font-family);
   background-color: var(--background-color);
   color: var(--text-color);
+  padding: 0;
+  margin: 0;
+  width: 320px;
+  overflow-x: hidden;
+}
+
+/* Control Panel Layout */
+.control-panel {
+  display: flex;
+  flex-direction: column;
   padding: 0.75rem;
-  width: 350px;
 }
 
-/* Header */
-.popup-header {
+/* Header Area */
+.panel-header {
+  margin-bottom: 0.5rem;
+}
+
+.header-content {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  margin-bottom: 1rem;
+  padding: 0.25rem 0.5rem;
 }
-.popup-header img {
-  width: 48px;
-  height: 48px;
-  border-radius: 0.75rem;
-  box-shadow: 0 4px 10px var(--box-shadow-color);
+
+/* Cards */
+.control-card {
+  background-color: var(--box-background-color);
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 3px var(--box-shadow-color);
+  overflow: hidden;
 }
-.popup-header .title {
+
+/* Card Rows */
+.card-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 0.75rem;
+  min-height: 40px;
+}
+
+.card-row.border-bottom {
+  border-bottom: 1px solid var(--divider-color);
+}
+
+.row-label {
+  font-size: 0.85rem;
+  font-weight: 500;
   color: var(--text-color);
-  margin-top: 0.5rem;
-  margin-bottom: 0;
 }
 
-/* Settings Box */
-.settings-box {
-  background-color: var(--box-background-color);
-  border-radius: 0.75rem;
-  box-shadow: var(--bulma-box-shadow);
-  padding: 0.25rem 1rem; /* Adjust padding to work with columns */
+/* Switches overrides for compactness */
+.field.mb-0 {
+  margin-bottom: 0 !important;
+}
+
+/* Profile Details (Clean List Layout) */
+.profile-details {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--input-bg-color);
+  border-top: 1px solid var(--divider-color);
 }
 
-/* Setting Item (using Bulma columns) */
-.setting-item {
+.profile-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.4rem 0.75rem;
+  min-height: 38px;
   border-bottom: 1px solid var(--divider-color);
 }
-.setting-item:last-child {
+
+.profile-row:last-child {
   border-bottom: none;
 }
-.setting-item .label-text {
-  font-size: 0.9rem;
+
+.profile-label {
+  font-size: 0.8rem;
   font-weight: 500;
-  color: var(--text-color);
-}
-.setting-item .label-text small {
-  display: block;
-  font-weight: 400;
   color: var(--text-color-light);
 }
 
-/* Select (Dropdown in popup) */
-.settings-box .select select {
-  background-color: var(--input-bg-color);
+/* Select Inputs Tweaks */
+.control-card .select select {
+  font-size: 0.8rem;
+  border-color: var(--input-border-color);
+  background-color: transparent;
   color: var(--text-color);
-  font-weight: 500;
+  padding-right: 2rem;
+  /* Make room for arrow */
 }
 
-/* Custom Buttons */
-.button.is-primary-custom {
-  background-color: var(--accent-color);
-  color: white;
+.control-card .select.is-borderless select {
   border: none;
+  background-color: transparent;
+  box-shadow: none;
 }
-.button.is-primary-custom:hover {
-  background-color: var(--accent-color-darker);
-}
-.button.is-warning-custom {
-  background-color: var(--warning-color);
-  color: var(--warning-text-color);
-  font-weight: bold;
+
+.control-card .select.is-borderless select:focus {
   border: none;
-  width: 100%;
+  box-shadow: none;
 }
-.button.is-warning-custom:hover {
-  background-color: #fde047; /* Lighter yellow for hover */
+
+/* Toolbar (Bottom Bar) */
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  background-color: var(--box-background-color);
+  border-top: 1px solid var(--divider-color);
 }
 
-/* Footer Links */
-.footer-links {
-  text-align: center;
-  margin-top: 1rem;
+.toolbar-actions {
+  display: flex;
+  gap: 0.25rem;
 }
-.footer-links a {
-  font-size: 0.8rem;
+
+.toolbar-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
   color: var(--text-color-light);
-  text-decoration: none;
+  transition: all 0.2s ease;
 }
-.footer-links a:hover {
+
+.toolbar-btn:hover {
+  background-color: var(--divider-color);
   color: var(--accent-color);
-  text-decoration: underline;
+}
+
+.toolbar-action-btn {
+  display: flex;
+  align-items: center;
+  padding: 0.25rem 0.75rem;
+  border-radius: 6px;
+  background-color: rgba(250, 204, 21, 0.15);
+  /* Light warning tint */
+  color: var(--text-color);
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition: all 0.2s ease;
+}
+
+.toolbar-action-btn:hover {
+  background-color: rgba(250, 204, 21, 0.25);
 }