Skip to content

Commit b899f45

Browse files
DolceTriadeDolceTriade
committed
Slightly more minimal code intel panel
1 parent bca3ee2 commit b899f45

4 files changed

Lines changed: 139 additions & 79 deletions

File tree

‎public/output.css‎

Lines changed: 78 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
--color-amber-900: oklch(41.4% 0.112 45.904);
2222
--color-yellow-500: oklch(79.5% 0.184 86.047);
2323
--color-green-200: oklch(92.5% 0.084 155.995);
24+
--color-green-500: oklch(72.3% 0.219 149.579);
2425
--color-green-900: oklch(39.3% 0.095 152.535);
2526
--color-emerald-100: oklch(95% 0.052 163.051);
2627
--color-emerald-200: oklch(90.5% 0.093 164.15);
@@ -1010,6 +1011,21 @@
10101011
}
10111012
}
10121013
}
1014+
.indicator {
1015+
position: relative;
1016+
display: inline-flex;
1017+
width: max-content;
1018+
:where(.indicator-item) {
1019+
z-index: 1;
1020+
position: absolute;
1021+
white-space: nowrap;
1022+
top: var(--indicator-t, 0);
1023+
bottom: var(--indicator-b, auto);
1024+
left: var(--indicator-s, auto);
1025+
right: var(--indicator-e, 0);
1026+
translate: var(--indicator-x, 50%) var(--indicator-y, -50%);
1027+
}
1028+
}
10131029
.range {
10141030
appearance: none;
10151031
webkit-appearance: none;
@@ -1427,12 +1443,18 @@
14271443
.top-0 {
14281444
top: calc(var(--spacing) * 0);
14291445
}
1446+
.top-1\/2 {
1447+
top: calc(1/2 * 100%);
1448+
}
14301449
.top-20 {
14311450
top: calc(var(--spacing) * 20);
14321451
}
14331452
.right-0 {
14341453
right: calc(var(--spacing) * 0);
14351454
}
1455+
.right-12 {
1456+
right: calc(var(--spacing) * 12);
1457+
}
14361458
.left-0 {
14371459
left: calc(var(--spacing) * 0);
14381460
}
@@ -2379,6 +2401,9 @@
23792401
.min-w-full {
23802402
min-width: 100%;
23812403
}
2404+
.min-w-max {
2405+
min-width: max-content;
2406+
}
23822407
.flex-1 {
23832408
flex: 1;
23842409
}
@@ -2391,12 +2416,19 @@
23912416
.flex-grow {
23922417
flex-grow: 1;
23932418
}
2419+
.-translate-y-1\/2 {
2420+
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
2421+
translate: var(--tw-translate-x) var(--tw-translate-y);
2422+
}
23942423
.scale-95 {
23952424
--tw-scale-x: 95%;
23962425
--tw-scale-y: 95%;
23972426
--tw-scale-z: 95%;
23982427
scale: var(--tw-scale-x) var(--tw-scale-y);
23992428
}
2429+
.transform {
2430+
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
2431+
}
24002432
.skeleton {
24012433
border-radius: var(--radius-box);
24022434
background-color: var(--color-base-300);
@@ -2911,6 +2943,9 @@
29112943
.text-gray-900 {
29122944
color: var(--color-gray-900);
29132945
}
2946+
.text-green-500 {
2947+
color: var(--color-green-500);
2948+
}
29142949
.text-inherit {
29152950
color: inherit;
29162951
}
@@ -4113,6 +4148,21 @@
41134148
--noise: 1;
41144149
}
41154150
}
4151+
@property --tw-translate-x {
4152+
syntax: "*";
4153+
inherits: false;
4154+
initial-value: 0;
4155+
}
4156+
@property --tw-translate-y {
4157+
syntax: "*";
4158+
inherits: false;
4159+
initial-value: 0;
4160+
}
4161+
@property --tw-translate-z {
4162+
syntax: "*";
4163+
inherits: false;
4164+
initial-value: 0;
4165+
}
41164166
@property --tw-scale-x {
41174167
syntax: "*";
41184168
inherits: false;
@@ -4128,6 +4178,26 @@
41284178
inherits: false;
41294179
initial-value: 1;
41304180
}
4181+
@property --tw-rotate-x {
4182+
syntax: "*";
4183+
inherits: false;
4184+
}
4185+
@property --tw-rotate-y {
4186+
syntax: "*";
4187+
inherits: false;
4188+
}
4189+
@property --tw-rotate-z {
4190+
syntax: "*";
4191+
inherits: false;
4192+
}
4193+
@property --tw-skew-x {
4194+
syntax: "*";
4195+
inherits: false;
4196+
}
4197+
@property --tw-skew-y {
4198+
syntax: "*";
4199+
inherits: false;
4200+
}
41314201
@property --tw-space-y-reverse {
41324202
syntax: "*";
41334203
inherits: false;
@@ -4309,21 +4379,6 @@
43094379
syntax: "*";
43104380
inherits: false;
43114381
}
4312-
@property --tw-translate-x {
4313-
syntax: "*";
4314-
inherits: false;
4315-
initial-value: 0;
4316-
}
4317-
@property --tw-translate-y {
4318-
syntax: "*";
4319-
inherits: false;
4320-
initial-value: 0;
4321-
}
4322-
@property --tw-translate-z {
4323-
syntax: "*";
4324-
inherits: false;
4325-
initial-value: 0;
4326-
}
43274382
@property --tw-outline-style {
43284383
syntax: "*";
43294384
inherits: false;
@@ -4337,9 +4392,17 @@
43374392
@layer properties {
43384393
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
43394394
*, ::before, ::after, ::backdrop {
4395+
--tw-translate-x: 0;
4396+
--tw-translate-y: 0;
4397+
--tw-translate-z: 0;
43404398
--tw-scale-x: 1;
43414399
--tw-scale-y: 1;
43424400
--tw-scale-z: 1;
4401+
--tw-rotate-x: initial;
4402+
--tw-rotate-y: initial;
4403+
--tw-rotate-z: initial;
4404+
--tw-skew-x: initial;
4405+
--tw-skew-y: initial;
43434406
--tw-space-y-reverse: 0;
43444407
--tw-divide-y-reverse: 0;
43454408
--tw-border-style: solid;
@@ -4382,9 +4445,6 @@
43824445
--tw-backdrop-saturate: initial;
43834446
--tw-backdrop-sepia: initial;
43844447
--tw-duration: initial;
4385-
--tw-translate-x: 0;
4386-
--tw-translate-y: 0;
4387-
--tw-translate-z: 0;
43884448
--tw-outline-style: solid;
43894449
}
43904450
}

‎src/components/code_intel_panel.rs‎

Lines changed: 26 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ pub fn CodeIntelPanel(
111111
let insights_scroll_container = NodeRef::<Div>::new();
112112

113113
view! {
114-
<aside class="w-80 flex-shrink-0 bg-white/95 dark:bg-slate-950/70 text-slate-900 dark:text-slate-100 rounded-lg shadow border border-slate-200 dark:border-slate-800 p-4 sticky top-20 max-h-[calc(100vh-6rem)] overflow-x-auto overflow-y-auto backdrop-blur">
114+
<aside class="w-80 flex-shrink-0 bg-white/95 dark:bg-slate-950/70 text-slate-900 dark:text-slate-100 rounded-lg shadow border border-slate-200 dark:border-slate-800 p-4 sticky top-20 backdrop-blur">
115115
<h2 class="text-xl font-semibold mb-4 text-slate-900 dark:text-white">
116116
"Code Intelligence"
117117
</h2>
@@ -139,11 +139,7 @@ pub fn CodeIntelPanel(
139139
})
140140
}}
141141
</div>
142-
<div
143-
class="overflow-y-auto pr-1"
144-
node_ref=insights_scroll_container
145-
style="max-height: calc(100vh - 12rem);"
146-
>
142+
<div class="pr-1" node_ref=insights_scroll_container>
147143
<div class="space-y-4">
148144
<div class="flex flex-col gap-1">
149145
<label class="text-xs uppercase tracking-wide text-slate-600 dark:text-slate-300">
@@ -544,23 +540,20 @@ pub fn CodeIntelPanel(
544540
view! {
545541
<div class="rounded border border-slate-200 dark:border-slate-800 bg-white/90 dark:bg-slate-900/60 p-3 shadow-sm">
546542
<div class="flex items-center justify-between gap-2">
547-
<span class="font-mono text-sm text-blue-600 dark:text-blue-400">
548-
{definition.symbol.clone()}
549-
</span>
543+
{definition
544+
.namespace
545+
.as_ref()
546+
.map(|ns| {
547+
view! {
548+
<div class="text-xs text-slate-500 dark:text-slate-300">
549+
{ns.clone()}
550+
</div>
551+
}
552+
})}
550553
<span class="text-xs text-slate-500 dark:text-slate-300 uppercase">
551554
{definition_language}
552555
</span>
553556
</div>
554-
{definition
555-
.namespace
556-
.as_ref()
557-
.map(|ns| {
558-
view! {
559-
<div class="text-xs text-slate-500 dark:text-slate-300 mt-1">
560-
{ns.clone()}
561-
</div>
562-
}
563-
})}
564557
<div class="mt-2 flex items-center gap-2 min-w-0">
565558
<A
566559
href=definition_link
@@ -659,28 +652,24 @@ pub fn CodeIntelPanel(
659652
line_number,
660653
);
661654
let reference_file_path = reference.file_path.clone();
662-
let reference_label = reference_file_path.clone();
663-
let reference_title = reference_label.clone();
655+
let reference_title = reference_file_path.clone();
664656
view! {
665657
<div class="rounded border border-slate-200 dark:border-slate-800 bg-white/90 dark:bg-slate-950/40 transition-colors overflow-hidden">
666658
<div class="flex items-center justify-between gap-2 px-3 py-2">
667659
<div class="min-w-0">
668660
<A
669661
href=reference_link.clone()
670-
attr:class="text-sm text-blue-600 dark:text-blue-400 hover:underline block"
662+
attr:class="text-xs text-slate-500 dark:text-slate-300 hover:underline block"
671663
attr:title=reference_title.clone()
672664
>
673665
<span class="block text-ellipsis overflow-hidden whitespace-nowrap flex-1 min-w-0">
674-
{reference_label.clone()}
666+
{format!(
667+
"Line {} • Column {}",
668+
line_number,
669+
reference.column,
670+
)}
675671
</span>
676672
</A>
677-
<p class="text-xs text-slate-500 dark:text-slate-300">
678-
{format!(
679-
"Line {} • Column {}",
680-
line_number,
681-
reference.column,
682-
)}
683-
</p>
684673
</div>
685674
<PathFilterActions
686675
path=reference_file_path.clone()
@@ -702,6 +691,7 @@ pub fn CodeIntelPanel(
702691
.map(|(idx, text)| {
703692
let current_line = start_line + idx as u32;
704693
let is_highlight = current_line == highlight_line;
694+
let display_text = collapse_snippet_whitespace(&text);
705695
let row_class = if is_highlight {
706696
"flex gap-3 bg-blue-100/80 dark:bg-blue-900/40 rounded px-2 py-1"
707697
} else {
@@ -712,8 +702,8 @@ pub fn CodeIntelPanel(
712702
<span class="w-12 text-right text-[10px] text-slate-500 dark:text-slate-300">
713703
{current_line}
714704
</span>
715-
<span class="flex-1 overflow-x-auto overflow-hidden whitespace-pre flex-shrink-0 min-w-0">
716-
{text}
705+
<span class="flex-1 whitespace-nowrap min-w-max">
706+
{display_text}
717707
</span>
718708
</div>
719709
}
@@ -786,3 +776,7 @@ pub fn snippet_matches_filter(reference: &SymbolReferenceWithSnippet, needle: &s
786776
})
787777
.unwrap_or(false)
788778
}
779+
780+
fn collapse_snippet_whitespace(value: &str) -> String {
781+
value.split_whitespace().collect::<Vec<&str>>().join(" ")
782+
}

0 commit comments

Comments
 (0)