scriptoriumadmin/supermemory
1
0
Fork 0
mirror of https://github.com/supermemoryai/supermemory.git synced 2026-08-28 05:25:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: mobile layout on empty projects (#479)

Browse source 
Issue:
On mobile, connect to ai modal is overlapping and hard to use the app when project is empty

Fix:
\- Disabling the Connect to ai modal on mobile

**Reason for this fix**, as MCP modal is hardly needed for mobile users

[Report issue link from Discord](https://discord.com/channels/1114913976422256742/1378895805741793350/1425912333556777082)
This commit is contained in:
MaheshtheDev 2025-10-09 23:54:06 +00:00
parent 1d56e4ba94
commit 20c41706e1
2 changed files with 55 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/web/components/header.tsx
View file

@ -275,7 +275,7 @@ export function Header({ onAddMemory }: { onAddMemory?: () => void }) {
<Button
variant="ghost"
size="sm"
className="gap-1.5"
className="gap-1.5 hidden md:block"
onClick={() => setMcpModalOpen(true)}
>
<MCPIcon className="h-4 w-4" />

68
apps/web/components/memories.tsx
View file

@ -13,6 +13,7 @@ import { MasonryMemoryList } from "@/components/masonry-memory-list"
import { AddMemoryView } from "@/components/views/add-memory"
import { useChatOpen, useProject, useGraphModal } from "@/stores"
import { useGraphHighlights } from "@/stores/highlights"
import { useIsMobile } from "@hooks/use-mobile"
type DocumentsResponse = z.infer<typeof DocumentsWithMemoriesResponseSchema>
type DocumentWithMemories = DocumentsResponse["documents"][0]
@ -27,6 +28,7 @@ export function Memories() {
const [injectedDocs, setInjectedDocs] = useState<DocumentWithMemories[]>([])
const [showAddMemoryView, setShowAddMemoryView] = useState(false)
const [showConnectAIModal, setShowConnectAIModal] = useState(false)
const isMobile = useIsMobile()
const IS_DEV = process.env.NODE_ENV === "development"
const PAGE_SIZE = IS_DEV ? 100 : 100
@ -162,10 +164,10 @@ export function Memories() {
// Show connect AI modal if no documents
useEffect(() => {
if (allDocuments.length === 0) {
if (allDocuments.length === 0 && !isMobile) {
setShowConnectAIModal(true)
}
}, [allDocuments.length])
}, [allDocuments.length, isMobile])
if (!user) {
return (
@ -190,10 +192,30 @@ export function Memories() {
totalLoaded={totalLoaded}
>
<div className="absolute inset-0 flex items-center justify-center">
<ConnectAIModal
onOpenChange={setShowConnectAIModal}
open={showConnectAIModal}
>
{!isMobile ? (
<ConnectAIModal
onOpenChange={setShowConnectAIModal}
open={showConnectAIModal}
>
<div className="rounded-xl overflow-hidden cursor-pointer hover:bg-white/5 transition-colors p-6">
<div className="relative z-10 text-slate-200 text-center">
<div className="flex flex-col gap-3">
<button
className="text-sm text-blue-400 hover:text-blue-300 transition-colors underline"
onClick={(e) => {
e.stopPropagation()
setShowAddMemoryView(true)
setShowConnectAIModal(false)
}}
type="button"
>
Add your first memory
</button>
</div>
</div>
</div>
</ConnectAIModal>
) : (
<div className="rounded-xl overflow-hidden cursor-pointer hover:bg-white/5 transition-colors p-6">
<div className="relative z-10 text-slate-200 text-center">
<div className="flex flex-col gap-3">
@ -202,7 +224,6 @@ export function Memories() {
onClick={(e) => {
e.stopPropagation()
setShowAddMemoryView(true)
setShowConnectAIModal(false)
}}
type="button"
>
@ -211,7 +232,7 @@ export function Memories() {
</div>
</div>
</div>
</ConnectAIModal>
)}
</div>
</MasonryMemoryList>
@ -244,10 +265,30 @@ export function Memories() {
highlightsVisible={isOpen}
>
<div className="absolute inset-0 flex items-center justify-center">
<ConnectAIModal
onOpenChange={setShowConnectAIModal}
open={showConnectAIModal}
>
{!isMobile ? (
<ConnectAIModal
onOpenChange={setShowConnectAIModal}
open={showConnectAIModal}
>
<div className="rounded-xl overflow-hidden cursor-pointer hover:bg-white/5 transition-colors p-6">
<div className="relative z-10 text-slate-200 text-center">
<div className="flex flex-col gap-3">
<button
className="text-sm text-blue-400 hover:text-blue-300 transition-colors underline"
onClick={(e) => {
e.stopPropagation()
setShowAddMemoryView(true)
setShowConnectAIModal(false)
}}
type="button"
>
Add your first memory
</button>
</div>
</div>
</div>
</ConnectAIModal>
) : (
<div className="rounded-xl overflow-hidden cursor-pointer hover:bg-white/5 transition-colors p-6">
<div className="relative z-10 text-slate-200 text-center">
<div className="flex flex-col gap-3">
@ -256,7 +297,6 @@ export function Memories() {
onClick={(e) => {
e.stopPropagation()
setShowAddMemoryView(true)
setShowConnectAIModal(false)
}}
type="button"
>
@ -265,7 +305,7 @@ export function Memories() {
</div>
</div>
</div>
</ConnectAIModal>
)}
</div>
</MemoryGraph>
</div>