Improve server picker scrolling and subscription input layout
Build and Deploy Gateway / build-and-push (push) Successful in 20s
Build and Deploy Gateway / deploy (push) Successful in 6s

This commit is contained in:
2026-08-11 08:10:15 +03:00
parent 444f26c401
commit 396c5d1917
9 changed files with 51 additions and 63 deletions
+2 -2
View File
@@ -1,6 +1,6 @@
export const HARBOR_VERSIONS = Object.freeze({
macClient: '0.23.6',
gatewayClient: '0.24.6',
macClient: '0.23.7',
gatewayClient: '0.24.7',
gatewayBackend: '0.24.0',
});
+3 -6
View File
@@ -22,7 +22,7 @@ type PickerServer = HarborServer & {
const FAVORITES_KEY = 'harbor-server-favorites';
const RECENT_KEY = 'harbor-server-recent';
const AUTO_KEY = 'harbor-server-auto';
const SIMPLE_SERVER_LIMIT = 5;
const INLINE_SERVER_ROWS = 8;
interface PingResult {
id?: string;
@@ -314,9 +314,9 @@ export function ServerPicker({
const simpleServers = [
...(selected && selected.id !== anchorServerId ? [selected] : []),
...servers.filter(({ id }) => id !== selectedServerId && id !== anchorServerId),
].slice(0, SIMPLE_SERVER_LIMIT);
];
return <section className={`client-servers is-scalable${servers.length <= SIMPLE_SERVER_LIMIT ? ' is-short' : ''}`} aria-label="Выберите сервер">
return <section className={`client-servers is-scalable${simpleServers.length <= INLINE_SERVER_ROWS ? ' is-short' : ''}`} aria-label="Выберите сервер">
{prompt && <span className="client-server-prompt">Выберите сервер</span>}
<div className="client-server-toolbar">
<span className="client-server-toolbar-title">Список серверов</span>
@@ -352,9 +352,6 @@ export function ServerPicker({
onSelect={select}
/>)}
</div>
{servers.length > simpleServers.length && <p className="client-server-overflow-note">
Ещё {servers.length - simpleServers.length} доступны через поиск
</p>}
</div>
</div>
</div>
@@ -338,18 +338,16 @@ function AddProfileForm({ feature }: { feature: SubscriptionFeatureController })
feature.addProfile();
}}
>
<label>
<span>Ссылка подписки</span>
<input
ref={feature.labelRef}
type="url"
inputMode="url"
value={feature.url}
placeholder="https://…"
aria-invalid={feature.validationStatus === 'invalid'}
onChange={(event) => feature.setUrl(event.target.value)}
/>
</label>
<input
ref={feature.labelRef}
type="url"
inputMode="url"
value={feature.url}
placeholder="https://…"
aria-label="Ссылка подписки"
aria-invalid={feature.validationStatus === 'invalid'}
onChange={(event) => feature.setUrl(event.target.value)}
/>
{message && <div className="client-profile-form-status" role="status">{message}</div>}
<div className="client-profile-form-actions">
{feature.profiles.length > 0 && <button type="button" onClick={feature.cancelAdd}>Отмена</button>}
+9 -10
View File
@@ -348,13 +348,6 @@
transition-delay: 210ms;
}
.client-server-overflow-note {
margin: 10px 0 0;
color: var(--client-muted);
font-size: 9px;
text-align: center;
}
.client-server-tools input {
width: 100%;
height: 36px;
@@ -450,9 +443,15 @@
}
.client-server-mode-panel.is-simple .client-server-scroll {
max-height: none;
overflow: visible;
padding-right: 0;
max-height: 352px;
overflow-y: auto;
padding-right: 4px;
scrollbar-width: thin;
}
.client-server-mode-panel.is-simple .client-server-scroll::-webkit-scrollbar {
display: block;
width: 4px;
}
.client-server-scroll.is-leaving {
+4 -14
View File
@@ -328,7 +328,7 @@
}
.client-subscription-sheet > .client-profile-add {
margin-top: 8px;
margin-top: 10px;
animation: client-profile-add-open 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@@ -389,23 +389,13 @@
.client-profile-add {
display: grid;
gap: 10px;
padding: 10px 0 4px;
}
.client-profile-add label {
display: grid;
gap: 6px;
color: var(--client-muted);
font-size: 8px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
gap: 8px;
padding: 0 0 4px;
}
.client-profile-add input {
min-width: 0;
height: 40px;
height: 36px;
padding: 0 2px;
border: 0;
border-bottom: 1px solid color-mix(in oklch, var(--client-border) 72%, transparent);