From 4c0dfd1a32680b501c47a021d0127283b788e764 Mon Sep 17 00:00:00 2001 From: Ishaan Gupta Date: Fri, 8 May 2026 19:46:26 +0530 Subject: [PATCH 1/2] fix responsiveness for graph layout --- apps/web/app/(app)/page.tsx | 22 ++++------------------ apps/web/components/graph-layout-view.tsx | 13 +++++++++---- apps/web/components/mobile-banner.tsx | 23 +---------------------- 3 files changed, 14 insertions(+), 44 deletions(-) diff --git a/apps/web/app/(app)/page.tsx b/apps/web/app/(app)/page.tsx index e7d7caff6..4c54f5826 100644 --- a/apps/web/app/(app)/page.tsx +++ b/apps/web/app/(app)/page.tsx @@ -515,12 +515,11 @@ export default function NewPage() { const gradientTopPosition = gradientTopPositionForWidth(viewportWidth) const isChatView = viewMode === "chat" - const isGraphMode = viewMode === "graph" && !isMobile + const isGraphMode = viewMode === "graph" const isMemoriesDesktop = viewMode === "list" && !isMobile const isHomeDesktop = viewMode === "dashboard" && !isMobile const showNovaBackdrop = isGraphMode || isMemoriesDesktop || isHomeDesktop - const isDashboardShell = - viewMode === "dashboard" || (viewMode === "graph" && isMobile) + const isDashboardShell = viewMode === "dashboard" return ( @@ -629,7 +628,7 @@ export default function NewPage() { void setViewMode("integrations")} /> - ) : viewMode === "graph" && !isMobile ? ( + ) : viewMode === "graph" ? (
@@ -674,20 +673,7 @@ export default function NewPage() { ) : ( - - Graph view is available on desktop. - {" "} - Use a larger screen for the full graph, or keep - working from this home view. - - ) : undefined - } + headerNotice={undefined} highlights={highlightsData?.highlights ?? []} isLoadingHighlights={isLoadingHighlights} onAddMemory={handleAddMemory} diff --git a/apps/web/components/graph-layout-view.tsx b/apps/web/components/graph-layout-view.tsx index 0a21c357d..97e6a1abd 100644 --- a/apps/web/components/graph-layout-view.tsx +++ b/apps/web/components/graph-layout-view.tsx @@ -3,6 +3,7 @@ import { memo, useCallback, useRef } from "react" import { useQueryState } from "nuqs" import Image from "next/image" +import { Share2 } from "lucide-react" import { MemoryGraph } from "./memory-graph" import { useProject } from "@/stores" import { useGraphHighlights } from "@/stores/highlights" @@ -30,7 +31,7 @@ export const GraphLayoutView = memo(function GraphLayoutView() { }, [setIsShareModalOpen]) return ( -
+
{/* Full-width graph */}
{/* Share graph button - top left */} -
+
diff --git a/apps/web/components/mobile-banner.tsx b/apps/web/components/mobile-banner.tsx index 245b69523..0f3153b3a 100644 --- a/apps/web/components/mobile-banner.tsx +++ b/apps/web/components/mobile-banner.tsx @@ -1,24 +1,3 @@ -"use client" - -import { useIsMobile } from "@hooks/use-mobile" -import { cn } from "@lib/utils" - export function MobileBanner() { - const isMobile = useIsMobile() - - if (!isMobile) { - return null - } - - return ( -
- 🚧 Mobile responsive in development. Desktop recommended. -
- ) + return null } From 46555bb8463fecd50c62450877a0981549bf3d08 Mon Sep 17 00:00:00 2001 From: Ishaan Gupta Date: Fri, 8 May 2026 21:05:01 +0530 Subject: [PATCH 2/2] fix responsiveness for add memory modal --- apps/web/components/add-document/index.tsx | 157 ++++++++++++++++++--- apps/web/components/add-document/note.tsx | 3 +- apps/web/components/mobile-banner.tsx | 23 ++- apps/web/components/text-editor/index.tsx | 13 +- 4 files changed, 169 insertions(+), 27 deletions(-) diff --git a/apps/web/components/add-document/index.tsx b/apps/web/components/add-document/index.tsx index 4c441ce18..95b683651 100644 --- a/apps/web/components/add-document/index.tsx +++ b/apps/web/components/add-document/index.tsx @@ -5,7 +5,7 @@ import { useQueryState } from "nuqs" import { Dialog, DialogContent, DialogTitle } from "@repo/ui/components/dialog" import { cn } from "@lib/utils" import { dmSansClassName } from "@/lib/fonts" -import { FileTextIcon, GlobeIcon, ZapIcon, Loader2 } from "lucide-react" +import { FileTextIcon, GlobeIcon, ZapIcon, Loader2, XIcon } from "lucide-react" import { Button } from "@ui/components/button" import { ConnectContent } from "./connections" import { NoteContent } from "./note" @@ -35,10 +35,10 @@ export function AddDocumentModal({ isOpen, onClose }: AddDocumentModalProps) { !open && onClose()}> Add Document -
+
@@ -259,19 +259,44 @@ export function AddDocument({ activeTab === "file" && (!fileTabHasPending || isSubmitting) return ( -
+
+ {isMobile && ( +
+
+

+ Add memory +

+

+ Save something to recall later +

+
+ +
+ )}
{tabs.map((tab) => ( @@ -288,6 +313,31 @@ export function AddDocument({ ))}
+ {isMobile && ( +
+ + +
+ )} + {!isMobile && (
@@ -414,11 +464,11 @@ export function AddDocument({
-
+
{activeTab === "note" && (
{!isMobile && ( @@ -467,13 +519,19 @@ export function AddDocument({ /> )}
@@ -484,6 +542,7 @@ export function AddDocument({ disabled={ activeTab === "file" ? fileTabSubmitDisabled : isSubmitting } + className={cn(isMobile && "h-11 min-w-[8rem] px-5")} > {isSubmitting ? ( <> @@ -514,6 +573,53 @@ export function AddDocument({ ) } +function UsageMeter({ + label, + value, + percent, + active, +}: { + label: string + value: string + percent: number + active: boolean +}) { + const safePercent = Math.max(0, Math.min(100, percent)) + + return ( +
+
+ + {label} + + + {value} + +
+
+
80 + ? "#ef4444" + : active + ? "linear-gradient(to right, #4BA0FA 80%, #002757 100%)" + : "#0054AD", + }} + /> +
+
+ ) +} + function TabButton({ active, onClick, @@ -537,19 +643,24 @@ function TabButton({ type="button" onClick={onClick} className={cn( - "flex items-center gap-2 px-3 py-2 rounded-full text-left transition-colors whitespace-nowrap focus:outline-none focus:ring-0 shrink-0", - active ? "bg-[#14161A] shadow-inside-out" : "hover:bg-[#14161A]/50", + "relative flex h-14 min-w-0 flex-col items-center justify-center gap-1 rounded-xl px-1 text-center transition-colors focus:outline-none focus:ring-0", + active + ? "bg-[#0F141B] text-white shadow-inside-out ring-1 ring-[#2261CA33]" + : "text-[#8B8B8B] hover:bg-[#14161A]/50", dmSansClassName(), )} > - + {title.split(" ")[0]} {isPro && ( - + PRO )} diff --git a/apps/web/components/add-document/note.tsx b/apps/web/components/add-document/note.tsx index 4f833ca2b..aa0fac971 100644 --- a/apps/web/components/add-document/note.tsx +++ b/apps/web/components/add-document/note.tsx @@ -40,11 +40,12 @@ export function NoteContent({ }, [isOpen, onContentChange]) return ( -
+
) diff --git a/apps/web/components/mobile-banner.tsx b/apps/web/components/mobile-banner.tsx index 0f3153b3a..245b69523 100644 --- a/apps/web/components/mobile-banner.tsx +++ b/apps/web/components/mobile-banner.tsx @@ -1,3 +1,24 @@ +"use client" + +import { useIsMobile } from "@hooks/use-mobile" +import { cn } from "@lib/utils" + export function MobileBanner() { - return null + const isMobile = useIsMobile() + + if (!isMobile) { + return null + } + + return ( +
+ 🚧 Mobile responsive in development. Desktop recommended. +
+ ) } diff --git a/apps/web/components/text-editor/index.tsx b/apps/web/components/text-editor/index.tsx index 18de5893f..71771e49a 100644 --- a/apps/web/components/text-editor/index.tsx +++ b/apps/web/components/text-editor/index.tsx @@ -17,10 +17,12 @@ export function TextEditor({ content: initialContent, onContentChange, onSubmit, + debounceMs = 500, }: { content: string | undefined onContentChange: (content: string) => void onSubmit: () => void + debounceMs?: number }) { const containerRef = useRef(null) const editorRef = useRef(null) @@ -36,7 +38,7 @@ export function TextEditor({ const json = editor.getJSON() const markdown = editor.storage.markdown?.manager?.serialize(json) ?? "" onContentChange?.(markdown) - }, 500) + }, debounceMs) const editor = useEditor({ extensions, @@ -48,6 +50,13 @@ export function TextEditor({ }, onUpdate: ({ editor }) => { editorRef.current = editor + if (!hasUserEditedRef.current) return + if (debounceMs === 0) { + const json = editor.getJSON() + const markdown = editor.storage.markdown?.manager?.serialize(json) ?? "" + onContentChange?.(markdown) + return + } debouncedUpdates(editor) }, editorProps: { @@ -120,7 +129,7 @@ export function TextEditor({ tabIndex={0} ref={containerRef} onClick={handleClick} - className="w-full h-full outline-none prose prose-invert max-w-none [&_.ProseMirror]:outline-none [&_.ProseMirror]:focus:outline-none [&_.ProseMirror-focused]:outline-none text-editor-prose cursor-text" + className="h-full w-full cursor-text outline-none prose prose-invert max-w-none text-editor-prose [&_.ProseMirror]:min-h-full [&_.ProseMirror]:outline-none [&_.ProseMirror]:text-[15px] [&_.ProseMirror]:leading-6 [&_.ProseMirror]:text-[#D7DEE8] [&_.ProseMirror-focused]:outline-none [&_.ProseMirror]:focus:outline-none" >