Merge pull request #475 from Mikethebot44/feature/add-memory-dialog-ux

improve Add Memory dialog UX and dark/light mode consistency
This commit is contained in:
Dhravya Shah 2025-10-10 20:40:52 -07:00 committed by GitHub
commit 177b5e3419
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 16 additions and 17 deletions

View file

@ -634,12 +634,9 @@ export function AddMemoryView({
>
{({ state, handleChange, handleBlur }) => (
<>
<div
className={`bg-black/5 border border-black/10 rounded-md ${
addContentMutation.isPending ? "opacity-50" : ""
}`}
>
<TextEditor
<div className={addContentMutation.isPending ? "opacity-50" : ""}>
<TextEditor
containerClassName="bg-white/5 border-white/10 rounded-md"
disabled={addContentMutation.isPending}
onBlur={handleBlur}
onChange={handleChange}
@ -842,13 +839,14 @@ export function AddMemoryView({
</TabsContent>
<TabsContent value="file" className="space-y-4">
<form
<form
onSubmit={(e) => {
e.preventDefault()
e.stopPropagation()
fileUploadForm.handleSubmit()
}}
>
className="h-full flex flex-col"
>
<div className="grid gap-4">
<motion.div
animate={{ opacity: 1, y: 0 }}
@ -936,7 +934,7 @@ export function AddMemoryView({
</fileUploadForm.Field>
</motion.div>
</div>
<div className="mt-6 flex flex-col sm:flex-row sm:justify-between sm:items-end w-full gap-4">
<div className="mt-6 flex flex-col sm:flex-row sm:justify-between sm:items-end w-full gap-4 mt-auto">
<div className="flex items-end gap-4">
{/* Left side - Project Selection */}
<motion.div

View file

@ -55,11 +55,7 @@ export function ProjectSelection({
>
<SelectValue placeholder="Select a project" />
</SelectTrigger>
<SelectContent
className="bg-black/90 backdrop-blur-xl border-foreground/10 z-[90]"
position="popper"
sideOffset={5}
>
<SelectContent position="popper" sideOffset={5} className="z-[90]">
<SelectItem
className="hover:bg-foreground/10"
key="default"

View file

@ -91,6 +91,7 @@ interface TextEditorProps {
placeholder?: string;
disabled?: boolean;
className?: string;
containerClassName?: string;
}
const initialValue: Descendant[] = [
@ -243,6 +244,7 @@ export function TextEditor({
placeholder = "Start writing...",
disabled = false,
className,
containerClassName,
}: TextEditorProps) {
const editor = useMemo(() => withReact(createEditor()) as CustomEditor, []);
const [editorValue, setEditorValue] = useState<Descendant[]>(() =>
@ -421,7 +423,8 @@ export function TextEditor({
);
return (
<div className={cn("flex flex-col", className)}>
<div className={cn("bg-foreground/5 border border-foreground/10 rounded-md", containerClassName)}>
<div className={cn("flex flex-col", className)}>
<div className="flex-1 min-h-48 max-h-64 overflow-y-auto">
<Slate
editor={editor}
@ -451,6 +454,7 @@ export function TextEditor({
minHeight: "11rem",
maxHeight: "15rem",
padding: "12px",
overflowX: "hidden",
}}
/>
</Slate>
@ -540,6 +544,7 @@ export function TextEditor({
/>
</div>
</div>
</div>
</div>
);
}

View file

@ -205,7 +205,7 @@ export function ConnectionsTabContent() {
className="p-4 bg-yellow-500/10 border border-yellow-500/20 rounded-lg"
initial={{ opacity: 0, y: -10 }}
>
<p className="text-sm text-yellow-400 mb-2">
<p className="text-sm text-black-400 dark:text-yellow-400 mb-2">
🔌 Connections are a Pro feature
</p>
<p className="text-xs text-foreground/60 mb-3">
@ -213,7 +213,7 @@ export function ConnectionsTabContent() {
sync your documents.
</p>
<Button
className="bg-yellow-500/20 hover:bg-yellow-500/30 text-yellow-400 border-yellow-500/30"
className="bg-yellow-500/20 text-black-400 hover:bg-yellow-500/30 dark:text-yellow-400 border-yellow-500/30"
onClick={handleUpgrade}
size="sm"
variant="secondary"