Merge remote-tracking branch 'upstream/master'

liamwhite · liamwhite · commit 421b7bfd91b7 · 2025-03-18T09:01:55.000-04:00
diff --git a/.typos.toml b/.typos.toml
@@ -5,6 +5,9 @@ extend-ignore-re = [
   ".*secret_key_base.*",
 
   # Key constraints with encoded names
-  "fk_rails_[a-f0-9]+"
-]
+  "fk_rails_[a-f0-9]+",
 
+  # Often used in tests as a partial match for `foo`
+  "fo",
+  "FO",
+]
diff --git a/assets/css/themes/base/dark.css b/assets/css/themes/base/dark.css
@@ -66,7 +66,9 @@
     --block-header-link-text-hover-color: hsl(from $block-header-link-text-color calc(h + 6) calc(s - 20) calc(l - 3));
 
     --block-header-light-hover-color: hsl(from $block-header-light-color calc(h - 4) calc(s + 10) calc(l - 4));
-    --block-header-light-link-text-hover-color: hsl(from $block-header-light-link-text-color calc(h + 8) calc(s - 10) calc(l - 2));
+    --block-header-light-link-text-hover-color: hsl(
+      from $block-header-light-link-text-color calc(h + 8) calc(s - 10) calc(l - 2)
+    );
 
     --media-box-hover-color: hsl(from $media-box-color h s calc(l - 4));
     --media-box-header-link-text-hover-color: hsl(from $link-color h calc(s - 18) calc(l - 3));
@@ -121,7 +123,9 @@
     --tag-category-error-border: hsl(from $tag-category-error-color h s calc(l - 22));
     --tag-category-character-background: hsl(from $tag-category-character-color h s calc(l - 33));
     --tag-category-character-border: hsl(from $tag-category-character-color h s calc(l - 20));
-    --tag-category-content-official-background: hsl(from $tag-category-content-official-color h calc(s - 2) calc(l - 29));
+    --tag-category-content-official-background: hsl(
+      from $tag-category-content-official-color h calc(s - 2) calc(l - 29)
+    );
     --tag-category-content-official-border: hsl(from $tag-category-content-official-color h s calc(l - 20));
     --tag-category-content-fanmade-background: hsl(from $tag-category-content-fanmade-color h s calc(l - 40));
     --tag-category-content-fanmade-border: hsl(from $tag-category-content-fanmade-color h calc(s - 10) calc(l - 20));
@@ -166,13 +170,16 @@
     --poll-form-label-background: hsl(from $border-color h s calc(l + 8));
     --tag-dropdown-hover-background: hsl(from $meta-color h s calc(l - 4));
 
-    --autocomplete-history-color: var(--block-header-link-text-color);
-    --autocomplete-history-match-color: hsl(from var(--block-header-link-text-color) h s calc(l + 20));
+    --autocomplete-background: var(--background-color);
 
-    --autocomplete-tag-color: hsl(from var(--foreground-color) h s calc(l - 5));
-    --autocomplete-tag-match-color: hsl(from var(--foreground-color) h s calc(l + 20));
+    --autocomplete-history-color: $autocomplete-history-color;
+    --autocomplete-history-match-color: hsl(from $autocomplete-history-color h s calc(l + 20));
+
+    --autocomplete-tag-color: hsl(from $foreground-color h s calc(l - 5));
+    --autocomplete-tag-match-color: hsl(from $foreground-color h s calc(l + 20));
     --autocomplete-tag-count-color: var(--foreground-half-color);
 
-    --autocomplete-match-selected-color: hsl(from var(--background-color) h s calc(l + 10));
+    --autocomplete-hover-background: hsl(from $page-background-color h s calc(l + 13));
+    --autocomplete-selected-background: hsl(from $page-background-color h s calc(l + 18));
   }
 }
diff --git a/assets/css/themes/base/light.css b/assets/css/themes/base/light.css
@@ -163,13 +163,16 @@
     --poll-form-label-background: hsl(from $base-color h calc(s - 16) calc(l + 36));
     --tag-dropdown-hover-background: hsl(from $foreground-color h s calc(l - 10));
 
-    --autocomplete-history-color: var(--block-header-link-text-color);
-    --autocomplete-history-match-color: hsl(from var(--block-header-link-text-color) h calc(s + 40) calc(l - 15));
+    --autocomplete-background: var(--background-color);
 
-    --autocomplete-tag-color: hsl(from var(--foreground-color) h s calc(l + 20));
-    --autocomplete-tag-match-color: hsl(from var(--foreground-color) h s calc(l - 20));
+    --autocomplete-history-color: $autocomplete-history-color;
+    --autocomplete-history-match-color: hsl(from $autocomplete-history-color h s calc(l - 13));
+
+    --autocomplete-tag-color: hsl(from $foreground-color h s calc(l + 20));
+    --autocomplete-tag-match-color: hsl(from $foreground-color h s calc(l - 20));
     --autocomplete-tag-count-color: var(--foreground-half-color);
 
-    --autocomplete-match-selected-color: hsl(from var(--background-color) h s calc(l + 10));
+    --autocomplete-hover-background: hsl(from $base-color h calc(s - 25) 93);
+    --autocomplete-selected-background: hsl(from $base-color h calc(s - 25) 87);
   }
 }
diff --git a/assets/css/themes/dark-blue.css b/assets/css/themes/dark-blue.css
@@ -61,6 +61,8 @@ $site-notice-color: #07070a;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #79afe4;
+
 @mixin dark-theme-mutations;
 
 /* Put any color variable overrides here.
diff --git a/assets/css/themes/dark-gray.css b/assets/css/themes/dark-gray.css
@@ -60,6 +60,8 @@ $site-notice-color: #38385a;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #9baab5;
+
 @mixin dark-theme-mutations;
 
 /* Put any color variable overrides here.
diff --git a/assets/css/themes/dark-green.css b/assets/css/themes/dark-green.css
@@ -60,6 +60,8 @@ $site-notice-color: #07070a;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #11cf69;
+
 @mixin dark-theme-mutations;
 
 /* Put any color variable overrides here.
diff --git a/assets/css/themes/dark-orange.css b/assets/css/themes/dark-orange.css
@@ -60,6 +60,8 @@ $site-notice-color: #07070a;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #eb6d2e;
+
 @mixin dark-theme-mutations;
 
 /* Put any color variable overrides here.
diff --git a/assets/css/themes/dark-pink.css b/assets/css/themes/dark-pink.css
@@ -60,6 +60,8 @@ $site-notice-color: #07070a;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #f0509b;
+
 @mixin dark-theme-mutations;
 
 /* Put any color variable overrides here.
diff --git a/assets/css/themes/dark-purple.css b/assets/css/themes/dark-purple.css
@@ -61,6 +61,8 @@ $site-notice-color: #07070a;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #b577eb;
+
 @mixin dark-theme-mutations;
 
 /* Put any color variable overrides here.
diff --git a/assets/css/themes/dark-red.css b/assets/css/themes/dark-red.css
@@ -62,6 +62,8 @@ $site-notice-color: $grey-color;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #d2d207;
+
 @mixin dark-theme-mutations;
 
 /* Put any color variable overrides here.
diff --git a/assets/css/themes/dark-teal.css b/assets/css/themes/dark-teal.css
@@ -60,6 +60,8 @@ $site-notice-color: #07070a;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #0ebcbf;
+
 @mixin dark-theme-mutations;
 
 /* Put any color variable overrides here.
diff --git a/assets/css/themes/dark-yellow.css b/assets/css/themes/dark-yellow.css
@@ -60,6 +60,8 @@ $site-notice-color: #07070a;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #e9c600;
+
 @mixin dark-theme-mutations;
 
 /* Put any color variable overrides here.
diff --git a/assets/css/themes/light-blue.css b/assets/css/themes/light-blue.css
@@ -44,6 +44,8 @@ $commission-category-color: #986f3d;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #419cd9;
+
 @mixin light-theme-mutations;
 
 /* Put any color variable overrides here.
diff --git a/assets/css/themes/light-gray.css b/assets/css/themes/light-gray.css
@@ -41,6 +41,8 @@ $commission-category-color: #986f3d;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #3e7da1;
+
 @mixin light-theme-mutations;
 
 /* Put any color variable overrides here.
diff --git a/assets/css/themes/light-green.css b/assets/css/themes/light-green.css
@@ -42,6 +42,8 @@ $commission-category-color: #986f3d;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #2ca052;
+
 @mixin light-theme-mutations;
 
 /* Put any color variable overrides here.
diff --git a/assets/css/themes/light-orange.css b/assets/css/themes/light-orange.css
@@ -41,6 +41,8 @@ $commission-category-color: #986f3d;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #d97441;
+
 @mixin light-theme-mutations;
 
 /* Put any color variable overrides here.
diff --git a/assets/css/themes/light-pink.css b/assets/css/themes/light-pink.css
@@ -41,6 +41,8 @@ $commission-category-color: #986f3d;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #d941c0;
+
 @mixin light-theme-mutations;
 
 /* Put any color variable overrides here.
diff --git a/assets/css/themes/light-purple.css b/assets/css/themes/light-purple.css
@@ -41,6 +41,8 @@ $commission-category-color: #986f3d;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #9241d9;
+
 @mixin light-theme-mutations;
 
 /* Put any color variable overrides here.
diff --git a/assets/css/themes/light-red.css b/assets/css/themes/light-red.css
@@ -41,6 +41,8 @@ $commission-category-color: #986f3d;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #d94141;
+
 @mixin light-theme-mutations;
 
 /* Put any color variable overrides here.
diff --git a/assets/css/themes/light-teal.css b/assets/css/themes/light-teal.css
@@ -41,6 +41,8 @@ $commission-category-color: #986f3d;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #1098a2;
+
 @mixin light-theme-mutations;
 
 /* Put any color variable overrides here.
diff --git a/assets/css/themes/light-yellow.css b/assets/css/themes/light-yellow.css
@@ -41,6 +41,8 @@ $commission-category-color: #986f3d;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #8e7e06;
+
 @mixin light-theme-mutations;
 
 /* Put any color variable overrides here.
diff --git a/assets/css/views/tags.css b/assets/css/views/tags.css
@@ -33,8 +33,15 @@
   user-select: none;
   white-space: nowrap;
   z-index: 999;
-  font-family: var(--font-family-monospace);
-  background: var(--background-color);
+
+  /*
+    'Courier New', which is the most widespread default monospace font is
+    less readable with the default font weight. So we make it bold.
+    Uncomment 'Courier New' below to test it.
+  */
+  font-weight: bold;
+  font-family: /* "Courier New", */ "Consolas", "Droid Sans Mono", "Noto Sans Mono", monospace;
+  background: var(--autocomplete-background);
 
   /* Borders */
   border-style: solid;
@@ -81,34 +88,31 @@
 }
 
 .autocomplete__item__history__match {
-  font-weight: bold;
-
-  /* Use a lighter color to highlight the matched part of the query */
   color: var(--autocomplete-history-match-color);
 }
 
 .autocomplete__item__tag__match {
-  font-weight: bold;
-}
-
-.autocomplete__item__tag__match:not(.autocomplete__item--selected) {
-  /* Use a lighter color to highlight the matched part of the query */
   color: var(--autocomplete-tag-match-color);
 }
 
 .autocomplete__item__tag__count {
   color: var(--autocomplete-tag-count-color);
+
+  /*
+    Reduce the space size between groups of 3 digits in big numbers like "1 000 000".
+    This way the number is more compact and easier to read.
+  */
+  word-spacing: -3px;
 }
 
 .autocomplete__item:hover:not(.autocomplete__item--selected) {
-  background: var(--autocomplete-match-selected-color);
+  background: var(--autocomplete-hover-background);
 }
 
 .autocomplete__item--selected,
 .autocomplete__item--selected .autocomplete__item__history__match,
 .autocomplete__item--selected .autocomplete__item__tag__match {
-  background: var(--foreground-color);
-  color: var(--background-color);
+  background: var(--autocomplete-selected-background);
 }
 
 /* Tags */
diff --git a/assets/js/autocomplete/history/index.ts b/assets/js/autocomplete/history/index.ts
@@ -1,4 +1,4 @@
-import { HistorySuggestion } from '../../utils/suggestions';
+import { HistorySuggestionComponent } from '../../utils/suggestions-view';
 import { InputHistory } from './history';
 import { HistoryStore } from './store';
 import { AutocompletableInput } from '../input';
@@ -60,7 +60,7 @@ export function listen() {
  * specified as an argument, it will return the maximum number of suggestions
  * allowed by the input.
  */
-export function listSuggestions(input: AutocompletableInput, limit?: number): HistorySuggestion[] {
+export function listSuggestions(input: AutocompletableInput, limit?: number): HistorySuggestionComponent[] {
   if (!input.hasHistory()) {
     return [];
   }
@@ -70,5 +70,5 @@ export function listSuggestions(input: AutocompletableInput, limit?: number): Hi
   return histories
     .load(input.historyId)
     .listSuggestions(value, limit ?? input.maxSuggestions)
-    .map(content => new HistorySuggestion(content, value.length));
+    .map(content => new HistorySuggestionComponent(content, value.length));
 }
diff --git a/assets/js/autocomplete/index.ts b/assets/js/autocomplete/index.ts
diff --git a/assets/js/utils/__tests__/local-autocompleter.spec.ts b/assets/js/utils/__tests__/local-autocompleter.spec.ts
diff --git a/assets/js/utils/__tests__/suggestion-model.spec.ts b/assets/js/utils/__tests__/suggestion-model.spec.ts
diff --git a/assets/js/utils/__tests__/suggestion-view.spec.ts b/assets/js/utils/__tests__/suggestion-view.spec.ts
diff --git a/assets/js/utils/dom.ts b/assets/js/utils/dom.ts
diff --git a/assets/js/utils/local-autocompleter.ts b/assets/js/utils/local-autocompleter.ts
diff --git a/assets/js/utils/suggestions-model.ts b/assets/js/utils/suggestions-model.ts
diff --git a/assets/js/utils/suggestions-view.ts b/assets/js/utils/suggestions-view.ts
diff --git a/lib/philomena/autocomplete/generator.ex b/lib/philomena/autocomplete/generator.ex
diff --git a/native/philomena/Cargo.lock b/native/philomena/Cargo.lock
diff --git a/native/philomena/Cargo.toml b/native/philomena/Cargo.toml
