experiments in a post-browser web
fix(cmd): restore two-tone inline suggestion styling (bold typed, dim completion)
+23
-16
+2
-1
extensions/cmd/panel.html
+2
-1
extensions/cmd/panel.html
···
84
84
line-height: 28px;
85
85
font-family: inherit;
86
86
font-size: 18px;
87
-
font-weight: 500;
87
+
font-weight: 300;
88
88
color: rgba(255, 255, 255, 0.5);
89
89
white-space: pre;
90
90
overflow: hidden;
···
96
96
97
97
#command-text .typed {
98
98
color: white;
99
+
font-weight: 500;
99
100
}
100
101
101
102
/* Styling for the matched part */
+21
-15
extensions/cmd/panel.js
+21
-15
extensions/cmd/panel.js
···
2357
2357
// For multi-word commands like "open groups", we need to check if typed text
2358
2358
// matches the full command name before splitting on spaces
2359
2359
let typedCommand, typedParams;
2360
-
const trimmedTyped = state.typed.trim();
2360
+
// Use originalTyped (what user actually typed) for highlight boundary,
2361
+
// so Tab-cycled suggestions show the original input bold and completion dim
2362
+
const userTyped = state.originalTyped || state.typed;
2363
+
const trimmedUserTyped = userTyped.trim();
2361
2364
2362
2365
// Check if typed text matches full command or command + params
2363
-
if (trimmedTyped.toLowerCase() === selectedMatch.toLowerCase()) {
2364
-
// Exact match - typed text IS the command (possibly with trailing space)
2365
-
typedCommand = trimmedTyped;
2366
-
typedParams = state.typed.substring(trimmedTyped.length); // Just the trailing space if any
2367
-
} else if (state.typed.toLowerCase().startsWith(selectedMatch.toLowerCase() + ' ')) {
2368
-
// Command with parameters - text after command name + space is params
2369
-
typedCommand = selectedMatch;
2366
+
if (state.typed.toLowerCase().startsWith(selectedMatch.toLowerCase() + ' ')) {
2367
+
// Command with parameters - highlight original typed command portion, show params
2368
+
// Use originalTyped for highlight length but state.typed for actual param text
2369
+
typedCommand = trimmedUserTyped.toLowerCase().startsWith(selectedMatch.toLowerCase())
2370
+
? trimmedUserTyped.substring(0, Math.min(trimmedUserTyped.length, selectedMatch.length))
2371
+
: trimmedUserTyped;
2370
2372
typedParams = state.typed.substring(selectedMatch.length);
2371
-
} else if (selectedMatch.toLowerCase().startsWith(trimmedTyped.toLowerCase())) {
2372
-
// Typed text is a prefix of the command (e.g., "list n" → "list notes")
2373
-
// Treat entire typed text as command part, no params
2374
-
typedCommand = trimmedTyped;
2373
+
} else if (selectedMatch.toLowerCase().startsWith(trimmedUserTyped.toLowerCase())) {
2374
+
// Typed text is a prefix of the command (e.g., "ta" → "tags", or "list n" → "list notes")
2375
+
// Bold the user-typed portion, dim the rest
2376
+
typedCommand = trimmedUserTyped;
2375
2377
typedParams = '';
2378
+
} else if (trimmedUserTyped.toLowerCase() === selectedMatch.toLowerCase()) {
2379
+
// Exact match - typed text IS the command
2380
+
typedCommand = trimmedUserTyped;
2381
+
typedParams = state.typed.substring(trimmedUserTyped.length);
2376
2382
} else {
2377
-
// Partial match - use first space as split point (original behavior)
2378
-
const hasParameters = state.typed.includes(' ');
2379
-
typedCommand = hasParameters ? state.typed.substring(0, state.typed.indexOf(' ')) : state.typed;
2383
+
// Partial match in middle or no clear match - use first space as split point
2384
+
const hasParameters = userTyped.includes(' ');
2385
+
typedCommand = hasParameters ? userTyped.substring(0, userTyped.indexOf(' ')) : userTyped;
2380
2386
typedParams = hasParameters ? state.typed.substring(state.typed.indexOf(' ')) : '';
2381
2387
}
2382
2388