Skip to content

Commit 7fa6dce

Browse files
jonathanlabjonathanlab
committed
styling fixes
1 parent 30df0dc commit 7fa6dce

File tree

5 files changed

+66
-62
lines changed

5 files changed

+66
-62
lines changed

‎apps/array/src/renderer/components/ThemeWrapper.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,24 @@
11
import { Theme } from "@radix-ui/themes";
22
import { useThemeStore } from "@stores/themeStore";
33
import type React from "react";
4+
import { useEffect, useRef } from "react";
5+
6+
let portalContainer: HTMLDivElement | null = null;
7+
8+
export function getPortalContainer(): HTMLElement {
9+
return portalContainer ?? document.body;
10+
}
411

512
export function ThemeWrapper({ children }: { children: React.ReactNode }) {
613
const isDarkMode = useThemeStore((state) => state.isDarkMode);
14+
const portalRef = useRef<HTMLDivElement>(null);
15+
16+
useEffect(() => {
17+
portalContainer = portalRef.current;
18+
return () => {
19+
portalContainer = null;
20+
};
21+
}, []);
722

823
return (
924
<Theme
@@ -15,6 +30,7 @@ export function ThemeWrapper({ children }: { children: React.ReactNode }) {
1530
scaling="100%"
1631
>
1732
{children}
33+
<div ref={portalRef} id="portal-container" />
1834
</Theme>
1935
);
2036
}

‎apps/array/src/renderer/features/message-editor/tiptap/CommandMention.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { getPortalContainer } from "@components/ThemeWrapper";
12
import Mention from "@tiptap/extension-mention";
23
import { ReactRenderer } from "@tiptap/react";
34
import type { SuggestionOptions } from "@tiptap/suggestion";
@@ -37,9 +38,10 @@ function createSuggestion(
3738

3839
if (!props.clientRect) return;
3940

40-
popup = tippy(document.body, {
41+
const container = getPortalContainer();
42+
popup = tippy(container, {
4143
getReferenceClientRect: props.clientRect as () => DOMRect,
42-
appendTo: () => document.body,
44+
appendTo: () => container,
4345
content: component.element,
4446
showOnCreate: true,
4547
interactive: true,

‎apps/array/src/renderer/features/message-editor/tiptap/FileMention.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { getPortalContainer } from "@components/ThemeWrapper";
12
import Mention from "@tiptap/extension-mention";
23
import { ReactRenderer } from "@tiptap/react";
34
import type { SuggestionOptions } from "@tiptap/suggestion";
@@ -40,9 +41,10 @@ function createSuggestion(
4041

4142
if (!props.clientRect) return;
4243

43-
popup = tippy(document.body, {
44+
const container = getPortalContainer();
45+
popup = tippy(container, {
4446
getReferenceClientRect: props.clientRect as () => DOMRect,
45-
appendTo: () => document.body,
47+
appendTo: () => container,
4648
content: component.element,
4749
showOnCreate: true,
4850
interactive: true,

‎apps/array/src/renderer/features/message-editor/tiptap/SuggestionList.tsx‎

Lines changed: 41 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import { Theme } from "@radix-ui/themes";
2-
import { useThemeStore } from "@stores/themeStore";
31
import {
42
forwardRef,
53
useEffect,
@@ -25,13 +23,12 @@ const Kbd = ({ children }: { children: string }) => (
2523
);
2624

2725
const CONTAINER_CLASS =
28-
"flex min-w-[300px] flex-col rounded border border-[var(--gray-a6)] bg-[var(--color-panel-solid)] font-mono text-xs shadow-lg";
26+
"flex min-w-[300px] max-w-[400px] flex-col rounded border border-[var(--gray-a6)] bg-[var(--color-panel-solid)] font-mono text-[12px] shadow-lg";
2927

3028
export const SuggestionList = forwardRef<
3129
SuggestionListRef,
3230
SuggestionListProps
3331
>(({ items, command }, ref) => {
34-
const isDarkMode = useThemeStore((state) => state.isDarkMode);
3532
const [selectedIndex, setSelectedIndex] = useState(0);
3633
const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);
3734
const [hasMouseMoved, setHasMouseMoved] = useState(false);
@@ -65,70 +62,57 @@ export const SuggestionList = forwardRef<
6562
},
6663
}));
6764

68-
const themeProps = {
69-
appearance: isDarkMode ? "dark" : "light",
70-
accentColor: isDarkMode ? "orange" : "yellow",
71-
grayColor: "slate",
72-
panelBackground: "solid",
73-
radius: "none",
74-
scaling: "100%",
75-
} as const;
76-
7765
if (items.length === 0) {
7866
return (
79-
<Theme {...themeProps}>
80-
<div className={CONTAINER_CLASS}>
81-
<div className="p-2 text-[var(--gray-11)]">No results found</div>
82-
</div>
83-
</Theme>
67+
<div className={CONTAINER_CLASS}>
68+
<div className="p-2 text-[var(--gray-11)]">No results found</div>
69+
</div>
8470
);
8571
}
8672

8773
return (
88-
<Theme {...themeProps}>
89-
<div className={CONTAINER_CLASS}>
90-
<div
91-
role="listbox"
92-
className="max-h-60 flex-1 overflow-y-auto pb-1 [&::-webkit-scrollbar]:hidden"
93-
onMouseMove={() => !hasMouseMoved && setHasMouseMoved(true)}
94-
>
95-
{items.map((item, index) => {
96-
const isSelected = index === selectedIndex;
97-
return (
98-
<button
99-
type="button"
100-
key={item.id}
101-
ref={(el) => {
102-
itemRefs.current[index] = el;
103-
}}
104-
onClick={() => command(item)}
105-
onMouseEnter={() => hasMouseMoved && setSelectedIndex(index)}
106-
className={`flex w-full flex-col gap-0.5 border-none px-2 text-left ${
107-
item.description ? "py-1.5" : "py-1"
108-
} ${isSelected ? "bg-[var(--accent-a4)]" : ""}`}
74+
<div className={CONTAINER_CLASS}>
75+
<div
76+
role="listbox"
77+
className="max-h-60 flex-1 overflow-y-auto pb-1 [&::-webkit-scrollbar]:hidden"
78+
onMouseMove={() => !hasMouseMoved && setHasMouseMoved(true)}
79+
>
80+
{items.map((item, index) => {
81+
const isSelected = index === selectedIndex;
82+
return (
83+
<button
84+
type="button"
85+
key={item.id}
86+
ref={(el) => {
87+
itemRefs.current[index] = el;
88+
}}
89+
onClick={() => command(item)}
90+
onMouseEnter={() => hasMouseMoved && setSelectedIndex(index)}
91+
className={`flex w-full flex-col gap-0.5 border-none px-2 text-left ${
92+
item.description ? "py-1.5" : "py-1"
93+
} ${isSelected ? "bg-[var(--accent-a4)]" : ""}`}
94+
>
95+
<span
96+
className={`truncate ${isSelected ? "text-[var(--accent-11)]" : "text-[var(--gray-11)]"}`}
10997
>
98+
{item.label}
99+
</span>
100+
{item.description && (
110101
<span
111-
className={`truncate ${isSelected ? "text-[var(--accent-11)]" : "text-[var(--gray-11)]"}`}
102+
className={`text-[11px] ${isSelected ? "text-[var(--accent-10)]" : "text-[var(--gray-10)]"}`}
112103
>
113-
{item.label}
104+
{item.description}
114105
</span>
115-
{item.description && (
116-
<span
117-
className={`text-[11px] ${isSelected ? "text-[var(--accent-10)]" : "text-[var(--gray-10)]"}`}
118-
>
119-
{item.description}
120-
</span>
121-
)}
122-
</button>
123-
);
124-
})}
125-
</div>
126-
<div className="border-[var(--gray-a4)] border-t bg-[var(--gray-a2)] px-2 py-1 text-[10px] text-[var(--gray-10)]">
127-
<Kbd>↑</Kbd>
128-
<Kbd>↓</Kbd> navigate · <Kbd>↵</Kbd> select · <Kbd>esc</Kbd> dismiss
129-
</div>
106+
)}
107+
</button>
108+
);
109+
})}
110+
</div>
111+
<div className="border-[var(--gray-a4)] border-t bg-[var(--gray-a2)] px-2 py-1 text-[10px] text-[var(--gray-10)]">
112+
<Kbd>↑</Kbd>
113+
<Kbd>↓</Kbd> navigate · <Kbd>↵</Kbd> select · <Kbd>esc</Kbd> dismiss
130114
</div>
131-
</Theme>
115+
</div>
132116
);
133117
});
134118

‎apps/array/src/renderer/features/sessions/components/session-update/UserMessage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ function parseFileMentions(content: string): ReactNode[] {
3434
verticalAlign: "middle",
3535
}}
3636
>
37-
<File size={12} weight="fill" />
37+
<File size={12} />
3838
{fileName}
3939
</Code>,
4040
);

0 commit comments

Comments
 (0)