Merge Horizon 2.5.0-beta.0

.git-blame-ignore-revs

@@ -32,6 +32,8 @@ cf39d8dedd98848ab3078a6a3abebd1e3a7eaaec
 ffc9425c81cabdda2233c29032d0fe5bba0ac4eb
 f0f8b63f87893b291e2c7a1f66b19d3d5fa7e06e
 
+# Auto-format 2026-02-18
+1fb5ab33d5b9d94da098f3858e7784d4f9158b0f
 # Auto-format 2026-02-16
 eedc252286e272734f95b3ba49f87bfac9c0ae1a
 
@@ -52,3 +54,9 @@ fbda6ec72a7aca61f1b28496935a3cd1f8866b6d
 
 # Auto-format 2026-07-06
 72143d617dedda52e16963cbace35da35d457413
+
+# Auto-format 2026-10-04
+00a8662195ac491c1b0943f6c214f1f41fb11013
+
+# Auto-format 2026-10-30
+17416583673e6321d912eff090ed8d69f56528b1

.github/workflows/check.yml

@@ -0,0 +1,32 @@
+name: Check
+
+permissions:
+  contents: read
+
+on:
+  pull_request:
+    branches:
+      - main
+      - development
+
+concurrency:
+  group: check-${{ github.event.pull_request.number }}
+  cancel-in-progress: true
+
+jobs:
+  typecheck:
+    name: Typecheck
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+
+      - uses: pnpm/action-setup@v6
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version-file: '.nvmrc'
+          cache: pnpm
+
+      - run: pnpm install --frozen-lockfile
+
+      - run: pnpm typecheck

.nvmrc

@@ -1 +1 @@
-v24.15.0
+v24.22.1

CONTRIBUTING.md

@@ -38,6 +38,8 @@ Solstice is written primarily in _Vue_, _Typescript_, and _Javascript_, wrapped
 
 For Android builds you'll additionally need **JDK 17+** and the **Android SDK** (API 35 platform). [Android Studio](https://developer.android.com/studio) is the easiest way to get the SDK.
 
+You should use Node.js **v24.22.1** (see [.nvmrc](./.nvmrc)).
+
 ### Setting up your development enviroment
 
 In short, you can run the following commands:

bbcode/EIconSelector.vue

@@ -20,72 +20,56 @@
         ></div>
       </div>
       <div v-else>
-        <div>
-          <div class="search-bar">
-            <input
-              type="text"
-              class="form-control search"
-              id="search"
-              v-model="search"
-              ref="search"
-              :placeholder="l('eicon.searchPlaceholder')"
-              autocomplete="off"
-              autocapitalize="off"
-              autocorrect="off"
-              spellcheck="false"
-              @input="searchUpdateDebounce()"
+        <div class="search-bar">
+          <input
+            type="text"
+            class="form-control search"
+            id="search"
+            v-model="search"
+            ref="search"
+            :placeholder="l('eicon.searchPlaceholder')"
+            autocomplete="off"
+            autocapitalize="off"
+            autocorrect="off"
+            spellcheck="false"
+            @input="searchUpdateDebounce()"
+            tabindex="0"
+            @click.prevent.stop="setFocus()"
+            @mousedown.prevent.stop
+            @mouseup.prevent.stop
+          />
+          <div class="btn-group search-buttons">
+            <div
+              class="btn btn-light favorites"
+              @click.prevent.stop="searchWithString('category:favorites')"
+              :class="{ active: search === 'category:favorites' }"
+              :title="l('eicon.category.favorites')"
+              role="button"
               tabindex="0"
-              @click.prevent.stop="setFocus()"
-              @mousedown.prevent.stop
-              @mouseup.prevent.stop
-            />
-            <div class="btn-group search-buttons">
-              <div
-                class="btn btn-light favorites"
-                @click.prevent.stop="searchWithString('category:favorites')"
-                :class="{ active: search === 'category:favorites' }"
-                :title="l('eicon.category.favorites')"
-                role="button"
-                tabindex="0"
-              >
-                <i class="fas fa-thumbtack"></i>
-              </div>
-
-              <div
-                class="btn btn-light recent"
-                @click.prevent.stop="searchWithString('category:recent')"
-                :class="{ active: search === 'category:recent' }"
-                :title="l('eicon.category.recent')"
-                role="button"
-                tabindex="0"
-              >
-                <i class="fas fa-history"></i>
-              </div>
-
-              <div
-                class="btn btn-light refresh"
-                @click.prevent.stop="refreshIcons()"
-                :title="l('eicon.refresh')"
-                role="button"
-                tabindex="0"
-              >
-                <i class="fas fa-sync"></i>
-              </div>
+            >
+              <i class="fas fa-thumbtack"></i>
             </div>
-          </div>
 
-          <div class="courtesy">
-            <localized-text k="eicon.credit">
-              <template #xariah>
-                <a href="https://xariah.net/eicons">xariah.net</a>
-              </template>
-            </localized-text>
-          </div>
+            <div
+              class="btn btn-light recent"
+              @click.prevent.stop="searchWithString('category:recent')"
+              :class="{ active: search === 'category:recent' }"
+              :title="l('eicon.category.recent')"
+              role="button"
+              tabindex="0"
+            >
+              <i class="fas fa-history"></i>
+            </div>
 
-          <div class="upload">
-            <a href="https://www.f-list.net/icons.php">{{
-              l('eicon.upload')
-            }}</a>
+            <div
+              class="btn btn-light refresh"
+              @click.prevent.stop="refreshIcons()"
+              :title="l('eicon.refresh')"
+              role="button"
+              tabindex="0"
+            >
+              <i class="fas fa-sync"></i>
+            </div>
           </div>
         </div>
 
@@ -186,6 +170,22 @@
             </div>
           </div>
         </div>
+
+        <div class="eicon-footer">
+          <div class="upload">
+            <a href="https://www.f-list.net/icons.php">{{
+              l('eicon.upload')
+            }}</a>
+          </div>
+
+          <div class="courtesy">
+            <localized-text k="eicon.credit">
+              <template #xariah>
+                <a href="https://xariah.net/eicons">xariah.net</a>
+              </template>
+            </localized-text>
+          </div>
+        </div>
       </div>
     </div>
   </modal>
@@ -493,13 +493,32 @@
     line-height: 1;
     z-index: 1000;
 
-    &.big {
-      min-height: 530px;
+    .modal-body {
+      display: flex;
+      min-height: 0;
+
+      &,
+      &:hover {
+        overflow-y: hidden;
+      }
     }
 
     .eicon-selector-ui {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      min-height: 0;
+
+      > div:not(.loading) {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-height: 0;
+      }
+
       .search-bar {
         display: flex;
+        flex-shrink: 0;
 
         .search {
           flex: 1;
@@ -521,19 +540,17 @@
         }
       }
 
-      .courtesy {
-        position: absolute;
-        bottom: 7px;
+      .eicon-footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-shrink: 0;
         font-size: 9px;
-        right: 1rem;
-        opacity: 50%;
-      }
+        padding-top: 6px;
 
-      .upload {
-        position: absolute;
-        bottom: 7px;
-        font-size: 9px;
-        left: 1rem;
+        .courtesy {
+          opacity: 50%;
+        }
       }
 
       .results {
@@ -630,24 +647,37 @@
     }
 
     &.big {
-      min-height: 530px;
       width: 590px;
       max-width: 590px;
 
       .eicon-selector-ui {
         .carousel.results {
-          max-height: unset;
-          height: 535px;
-          margin-bottom: 0.75rem;
+          // no fixed height so that it can shrink with the window.
+          // max-height keeps the usual size on a tall one.
+          flex: 0 1 535px;
+          min-height: 0;
+          max-height: 535px;
 
           .carousel-inner {
             overflow-x: hidden;
             overflow-y: scroll;
             height: 100%;
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(77px, 1fr));
+            // auto rows shrink to fit the height because of the global min-height: 0
+            grid-auto-rows: max-content;
+            align-content: start;
+
+            &::after {
+              display: none;
+            }
           }
 
           .carousel-item {
-            display: inline-block;
+            display: block;
+            width: auto;
+            margin: 0;
+            justify-self: center;
           }
         }
       }