feat(accounts): pin default account on top + drag-to-reorder switcher
The account switcher now always renders the default (starred) account first and lets you drag the remaining accounts into any order. Default stays pinned; only non-default rows are draggable (shown via a grip handle on hover). Wraps each row in a draggable container and persists the new order through the existing reorderAccounts store action. Ordering logic extracted to pure helpers (sortDefaultFirst, reorderNonDefaultIds) in account-utils with unit tests.
This commit is contained in:
@@ -0,0 +1,45 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { sortDefaultFirst, reorderNonDefaultIds, type OrderableAccount } from '../account-utils';
|
||||
|
||||
const acct = (id: string, isDefault = false): OrderableAccount => ({ id, isDefault });
|
||||
|
||||
describe('sortDefaultFirst', () => {
|
||||
it('pins the default account to the front, preserving the rest order', () => {
|
||||
const accounts = [acct('a'), acct('b', true), acct('c')];
|
||||
expect(sortDefaultFirst(accounts).map((a) => a.id)).toEqual(['b', 'a', 'c']);
|
||||
});
|
||||
|
||||
it('is a no-op shape when the default is already first', () => {
|
||||
const accounts = [acct('b', true), acct('a'), acct('c')];
|
||||
expect(sortDefaultFirst(accounts).map((a) => a.id)).toEqual(['b', 'a', 'c']);
|
||||
});
|
||||
|
||||
it('does not mutate the input array', () => {
|
||||
const accounts = [acct('a'), acct('b', true)];
|
||||
const snapshot = accounts.map((a) => a.id);
|
||||
sortDefaultFirst(accounts);
|
||||
expect(accounts.map((a) => a.id)).toEqual(snapshot);
|
||||
});
|
||||
});
|
||||
|
||||
describe('reorderNonDefaultIds', () => {
|
||||
// default 'd' stays index 0; non-defaults are a, b, c
|
||||
const accounts = [acct('d', true), acct('a'), acct('b'), acct('c')];
|
||||
|
||||
it('moves a non-default onto a later position, keeping default pinned', () => {
|
||||
expect(reorderNonDefaultIds(accounts, 'a', 'c')).toEqual(['d', 'b', 'c', 'a']);
|
||||
});
|
||||
|
||||
it('moves a non-default earlier', () => {
|
||||
expect(reorderNonDefaultIds(accounts, 'c', 'a')).toEqual(['d', 'c', 'a', 'b']);
|
||||
});
|
||||
|
||||
it('returns null for a no-op (same id)', () => {
|
||||
expect(reorderNonDefaultIds(accounts, 'a', 'a')).toBeNull();
|
||||
});
|
||||
|
||||
it('returns null when the default is dragged or targeted', () => {
|
||||
expect(reorderNonDefaultIds(accounts, 'd', 'a')).toBeNull();
|
||||
expect(reorderNonDefaultIds(accounts, 'a', 'd')).toBeNull();
|
||||
});
|
||||
});
|
||||
@@ -102,3 +102,41 @@ export function isHttp2Available(): boolean {
|
||||
export function getMaxAccounts(): number {
|
||||
return isHttp2Available() ? MAX_ACCOUNT_SLOTS : MAX_ACCOUNTS_HTTP1;
|
||||
}
|
||||
|
||||
/** Minimal shape needed to order accounts (structural — avoids importing AccountEntry). */
|
||||
export interface OrderableAccount {
|
||||
id: string;
|
||||
isDefault: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Display order for the account switcher: the default account first, then the
|
||||
* remaining accounts in their stored order. Pure — does not mutate the input.
|
||||
*/
|
||||
export function sortDefaultFirst<T extends OrderableAccount>(accounts: T[]): T[] {
|
||||
const defaults = accounts.filter((a) => a.isDefault);
|
||||
const rest = accounts.filter((a) => !a.isDefault);
|
||||
return [...defaults, ...rest];
|
||||
}
|
||||
|
||||
/**
|
||||
* Compute the new full account-id order after dragging `dragId` onto `overId`.
|
||||
* Default account(s) stay pinned to the front; only non-default accounts are
|
||||
* reordered (`dragId` is inserted at `overId`'s position among them).
|
||||
* Returns null when the move is a no-op or invalid (e.g. a default is involved).
|
||||
*/
|
||||
export function reorderNonDefaultIds(
|
||||
accounts: OrderableAccount[],
|
||||
dragId: string,
|
||||
overId: string,
|
||||
): string[] | null {
|
||||
if (dragId === overId) return null;
|
||||
const defaults = accounts.filter((a) => a.isDefault).map((a) => a.id);
|
||||
const nonDefault = accounts.filter((a) => !a.isDefault).map((a) => a.id);
|
||||
const from = nonDefault.indexOf(dragId);
|
||||
const to = nonDefault.indexOf(overId);
|
||||
if (from < 0 || to < 0) return null;
|
||||
const [moved] = nonDefault.splice(from, 1);
|
||||
nonDefault.splice(to, 0, moved);
|
||||
return [...defaults, ...nonDefault];
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user