From d9745e9aed89f21fd1a8ab4e42b6319532bfee98 Mon Sep 17 00:00:00 2001
From: Dmitriy Petrov <floplopru@gmail.com>
Date: Sun, 12 Jul 2026 14:13:42 +0300
Subject: [PATCH] Add simple server picker mode with version bump

---
 src/shared/versions.js              |  4 +--
 src/web/components/ServerPicker.jsx | 41 +++++++++++++++++++++++++++++
 src/web/styles.css                  | 23 ++++++++++++++++
 test/web/server-picker.test.js      |  8 ++++++
 4 files changed, 74 insertions(+), 2 deletions(-)

diff --git a/src/shared/versions.js b/src/shared/versions.js
index 364eb9b..8eedfd2 100644
--- a/src/shared/versions.js
+++ b/src/shared/versions.js
@@ -1,6 +1,6 @@
 export const HARBOR_VERSIONS = Object.freeze({
-  macClient: '0.7.12',
-  gatewayClient: '0.7.12',
+  macClient: '0.7.13',
+  gatewayClient: '0.7.13',
   gatewayBackend: '0.7.1',
 });
 
diff --git a/src/web/components/ServerPicker.jsx b/src/web/components/ServerPicker.jsx
index e63a340..0eda7b9 100644
--- a/src/web/components/ServerPicker.jsx
+++ b/src/web/components/ServerPicker.jsx
@@ -75,6 +75,7 @@ export function ServerPicker({
   onSelect,
 }) {
   const [query, setQuery] = useState('');
+  const [advanced, setAdvanced] = useState(false);
   const [view, setView] = useState('all');
   const [page, setPage] = useState(0);
   const [favorites, setFavorites] = useState(() => readList(FAVORITES_KEY));
@@ -180,8 +181,48 @@ export function ServerPicker({
     />
   ));
 
+  if (!advanced) {
+    const simpleServers = [
+      ...(selected ? [selected] : []),
+      ...servers.filter(({ id }) => id !== selectedServerId),
+    ].slice(0, SERVER_RESULT_WINDOW);
+
+    return <section className="client-servers is-scalable" aria-label="Выберите сервер">
+      {prompt && <span className="client-server-prompt">Выберите сервер</span>}
+      <button
+        className="client-server-mode-toggle"
+        type="button"
+        aria-expanded="false"
+        onClick={() => setAdvanced(true)}
+      >Поиск и фильтры</button>
+      <div className={`client-server-scroll${leaving ? ' is-leaving' : ''}`} key={`${serverKey}:${revealVersion}`}>
+        <div className="client-server-grid">
+          {simpleServers.map((server, index) => <ServerRow
+            key={server.id}
+            server={server}
+            selected={server.id === selectedServerId}
+            disabled={disabled}
+            index={index}
+            onSelect={select}
+          />)}
+        </div>
+        {servers.length > simpleServers.length && <button
+          className="client-server-mode-toggle"
+          type="button"
+          onClick={() => setAdvanced(true)}
+        >Ещё {servers.length - simpleServers.length} — открыть поиск</button>}
+      </div>
+    </section>;
+  }
+
   return <section className="client-servers is-scalable" aria-label="Выберите сервер">
     {prompt && <span className="client-server-prompt">Выберите сервер</span>}
+    <button
+      className="client-server-mode-toggle"
+      type="button"
+      aria-expanded="true"
+      onClick={() => setAdvanced(false)}
+    >Простой список</button>
     <div className="client-server-tools">
       <input
         type="search"
diff --git a/src/web/styles.css b/src/web/styles.css
index 9334205..2366390 100644
--- a/src/web/styles.css
+++ b/src/web/styles.css
@@ -2706,6 +2706,26 @@ p {
   margin-bottom: 14px;
 }
 
+.client-server-mode-toggle {
+  min-height: 32px;
+  display: block;
+  margin: 0 auto 8px;
+  padding: 5px 8px;
+  border: 0;
+  background: transparent;
+  color: var(--client-muted);
+  font: 700 9px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  cursor: pointer;
+}
+
+.client-server-mode-toggle:hover {
+  color: var(--client-accent);
+}
+
+.client-server-scroll > .client-server-mode-toggle {
+  margin-top: 8px;
+}
+
 .client-server-tools input {
   width: 100%;
   height: 36px;
@@ -2874,6 +2894,7 @@ p {
 }
 
 .client-server-filters button:focus-visible,
+.client-server-mode-toggle:focus-visible,
 .client-server-group-toggle:focus-visible,
 .client-server-more:focus-visible,
 .client-server-auto:focus-visible,
@@ -3280,6 +3301,7 @@ p {
   }
 
   .client-server-filters button,
+  .client-server-mode-toggle,
   .client-server-group-toggle,
   .client-server-more,
   .client-server-favorite {
@@ -3375,6 +3397,7 @@ p {
   .client-usage > strong,
   .client-server,
   .client-server-auto,
+  .client-server-mode-toggle,
   .client-server-favorite,
   .client-server-group-toggle,
   .client-server-more,
diff --git a/test/web/server-picker.test.js b/test/web/server-picker.test.js
index 1a31a36..4730b76 100644
--- a/test/web/server-picker.test.js
+++ b/test/web/server-picker.test.js
@@ -47,3 +47,11 @@ test('server picker keeps health manual and the rendered result window bounded',
   assert.match(picker, /harbor-server-recent/);
   assert.match(picker, /aria-expanded={!isCollapsed}/);
 });
+
+test('server picker starts simple and reveals advanced controls on demand', () => {
+  assert.match(picker, /const \[advanced, setAdvanced\] = useState\(false\)/);
+  assert.match(picker, /if \(!advanced\)/);
+  assert.match(picker, />Поиск и фильтры<\/button>/);
+  assert.match(picker, />Простой список<\/button>/);
+  assert.match(picker, /\.slice\(0, SERVER_RESULT_WINDOW\)/);
+});