mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-08-28 05:25:33 +00:00
fix responsiveness in settings (#1001)
Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com> Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Ishaan Gupta
GitHub
parent
f646f1a80f
commit
ed0584e9cb
4 changed files with 62 additions and 54 deletions
|
|
@ -4,7 +4,6 @@ import {
|
|||
Home,
|
||||
LayoutGrid,
|
||||
Plus,
|
||||
MessageCircleIcon,
|
||||
MoreHorizontal,
|
||||
SearchIcon,
|
||||
Sun,
|
||||
|
|
@ -25,6 +24,7 @@ import {
|
|||
} from "@ui/components/dropdown-menu"
|
||||
import { useViewMode, type ViewMode } from "@/lib/view-mode-context"
|
||||
import { feedbackParam } from "@/lib/search-params"
|
||||
import NovaOrb from "@/components/nova/nova-orb"
|
||||
|
||||
const INTEGRATION_VIEWS: ViewMode[] = [
|
||||
"integrations",
|
||||
|
|
@ -49,7 +49,6 @@ export function MobileBottomNav({ onAddMemory, onOpenSearch }: BottomNavProps) {
|
|||
|
||||
const isHome = viewMode === "dashboard"
|
||||
const isMemories = viewMode === "list" || viewMode === "graph"
|
||||
const isChat = viewMode === "chat"
|
||||
const isMore = INTEGRATION_VIEWS.includes(viewMode)
|
||||
|
||||
return (
|
||||
|
|
@ -75,17 +74,20 @@ export function MobileBottomNav({ onAddMemory, onOpenSearch }: BottomNavProps) {
|
|||
/>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Add memory"
|
||||
onClick={onAddMemory}
|
||||
className="flex size-11 shrink-0 items-center justify-center self-center rounded-full text-white outline-none transition-colors hover:bg-white/5"
|
||||
aria-label="Open chat"
|
||||
onClick={() => void setViewMode("chat")}
|
||||
className="group relative flex size-11 shrink-0 items-center justify-center self-center rounded-full outline-none transition-transform hover:scale-[1.03] focus-visible:ring-2 focus-visible:ring-[#4BA0FA]/50"
|
||||
>
|
||||
<Plus className="size-7" strokeWidth={2.25} />
|
||||
<NovaOrb
|
||||
size={42}
|
||||
className="pointer-events-none blur-[1px]! transition-transform group-hover:scale-105"
|
||||
/>
|
||||
</button>
|
||||
<NavTab
|
||||
label="Chat"
|
||||
icon={MessageCircleIcon}
|
||||
active={isChat}
|
||||
onClick={() => void setViewMode("chat")}
|
||||
label="Add"
|
||||
icon={Plus}
|
||||
active={false}
|
||||
onClick={() => onAddMemory?.()}
|
||||
/>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
|
|
|
|||
|
|
@ -338,8 +338,8 @@ export function ConnectAIModal({
|
|||
return (
|
||||
<Dialog onOpenChange={setIsOpen} open={isOpen}>
|
||||
<DialogTrigger asChild>{children}</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-4xl">
|
||||
<DialogHeader>
|
||||
<DialogContent className="max-h-[calc(100dvh-1rem)] w-[calc(100vw-1rem)] max-w-[calc(100vw-1rem)] overflow-y-auto overflow-x-hidden p-4 sm:max-w-4xl sm:p-6">
|
||||
<DialogHeader className="pr-7 sm:pr-0">
|
||||
<DialogTitle>Connect supermemory to Your AI</DialogTitle>
|
||||
<DialogDescription>
|
||||
Enable your AI assistant to create, search, and access your memories
|
||||
|
|
@ -347,9 +347,9 @@ export function ConnectAIModal({
|
|||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="min-w-0 space-y-6">
|
||||
{/* Step 1: Client Selection */}
|
||||
<div className="space-y-4">
|
||||
<div className="min-w-0 space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="size-8 rounded-full flex items-center justify-center text-sm font-semibold bg-accent text-accent-foreground">
|
||||
1
|
||||
|
|
@ -357,14 +357,15 @@ export function ConnectAIModal({
|
|||
<h3 className="text-sm font-medium">Select Your AI Client</h3>
|
||||
</div>
|
||||
|
||||
<div className="space-x-2 space-y-2">
|
||||
<div className="flex min-w-0 flex-wrap gap-2">
|
||||
{Object.entries(clients).map(([key, clientName]) => (
|
||||
<button
|
||||
className={`pr-3 pl-1 rounded-full border cursor-pointer transition-all ${
|
||||
className={cn(
|
||||
"max-w-full rounded-full border py-0.5 pr-3 pl-1 cursor-pointer transition-all",
|
||||
selectedClient === key
|
||||
? "border-primary bg-primary/10"
|
||||
: "border-border hover:border-border/60 hover:bg-muted/50"
|
||||
}`}
|
||||
: "border-border hover:border-border/60 hover:bg-muted/50",
|
||||
)}
|
||||
key={key}
|
||||
onClick={() => {
|
||||
setSelectedClient(key as keyof typeof clients)
|
||||
|
|
@ -372,8 +373,8 @@ export function ConnectAIModal({
|
|||
}}
|
||||
type="button"
|
||||
>
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="size-8 flex items-center justify-center">
|
||||
<div className="flex min-w-0 items-center gap-1">
|
||||
<div className="size-7 shrink-0 flex items-center justify-center sm:size-8">
|
||||
<Image
|
||||
alt={clientName}
|
||||
className="rounded object-contain"
|
||||
|
|
@ -403,7 +404,7 @@ export function ConnectAIModal({
|
|||
width={20}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm font-medium text-foreground/80">
|
||||
<span className="truncate text-sm font-medium text-foreground/80">
|
||||
{clientName}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -413,7 +414,7 @@ export function ConnectAIModal({
|
|||
</div>
|
||||
|
||||
{selectedClient && (
|
||||
<div className="space-y-4">
|
||||
<div className="min-w-0 space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex size-8 items-center justify-center rounded-full bg-accent text-sm font-semibold text-accent-foreground">
|
||||
2
|
||||
|
|
@ -424,13 +425,13 @@ export function ConnectAIModal({
|
|||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
|
||||
{clientSetup && mcpClientSetupShowsTabs(clientSetup) ? (
|
||||
<div
|
||||
className="flex w-full max-w-md flex-row gap-1 rounded-full border border-border bg-muted/50 p-1 sm:w-auto sm:min-w-[280px]"
|
||||
className="flex w-full min-w-0 max-w-full flex-row gap-1 rounded-full border border-border bg-muted/50 p-1 sm:w-auto sm:min-w-[280px]"
|
||||
role="tablist"
|
||||
aria-label="Setup method"
|
||||
>
|
||||
<button
|
||||
className={cn(
|
||||
"min-h-9 flex-1 rounded-full px-3 py-2 text-center text-xs font-medium transition-all",
|
||||
"min-h-9 flex-1 rounded-full px-2 py-2 text-center text-xs font-medium transition-all sm:px-3",
|
||||
effectiveSetupTab === "manual"
|
||||
? "border border-border bg-background text-foreground shadow-sm"
|
||||
: "text-muted-foreground hover:text-foreground",
|
||||
|
|
@ -444,7 +445,7 @@ export function ConnectAIModal({
|
|||
</button>
|
||||
<button
|
||||
className={cn(
|
||||
"min-h-9 flex-1 rounded-full px-3 py-2 text-center text-xs font-medium transition-all",
|
||||
"min-h-9 flex-1 rounded-full px-2 py-2 text-center text-xs font-medium transition-all sm:px-3",
|
||||
effectiveSetupTab === "oneClick"
|
||||
? "border border-border bg-background text-foreground shadow-sm"
|
||||
: "text-muted-foreground hover:text-foreground",
|
||||
|
|
@ -461,7 +462,7 @@ export function ConnectAIModal({
|
|||
{selectedClient !== "mcp-url" && (
|
||||
<div
|
||||
className={cn(
|
||||
"flex justify-end",
|
||||
"flex justify-start sm:justify-end",
|
||||
!(
|
||||
clientSetup && mcpClientSetupShowsTabs(clientSetup)
|
||||
) && "w-full sm:justify-start",
|
||||
|
|
@ -523,9 +524,9 @@ export function ConnectAIModal({
|
|||
Paste this URL into clients that support remote MCP
|
||||
over HTTPS (OAuth).
|
||||
</p>
|
||||
<div className="relative max-w-xl">
|
||||
<div className="relative max-w-full sm:max-w-xl">
|
||||
<Input
|
||||
className="w-full pr-10 font-mono text-xs"
|
||||
className="w-full min-w-0 pr-10 font-mono text-xs"
|
||||
readOnly
|
||||
value={CHATGPT_REMOTE_MCP_URL}
|
||||
/>
|
||||
|
|
@ -552,7 +553,7 @@ export function ConnectAIModal({
|
|||
Optional: scope installs to a project. Then copy and
|
||||
run the command in your terminal.
|
||||
</p>
|
||||
<div className="max-w-md">
|
||||
<div className="max-w-full sm:max-w-md">
|
||||
<Select
|
||||
disabled={isLoadingProjects}
|
||||
onValueChange={setSelectedProject}
|
||||
|
|
@ -586,7 +587,7 @@ export function ConnectAIModal({
|
|||
</div>
|
||||
<div className="relative max-w-full">
|
||||
<Input
|
||||
className="w-full pr-10 font-mono text-xs"
|
||||
className="w-full min-w-0 pr-10 font-mono text-xs"
|
||||
readOnly
|
||||
value={generateInstallCommand()}
|
||||
/>
|
||||
|
|
@ -622,9 +623,9 @@ export function ConnectAIModal({
|
|||
</li>
|
||||
<li>Complete OAuth in ChatGPT.</li>
|
||||
</ol>
|
||||
<div className="relative max-w-xl">
|
||||
<div className="relative max-w-full sm:max-w-xl">
|
||||
<Input
|
||||
className="w-full pr-10 font-mono text-xs"
|
||||
className="w-full min-w-0 pr-10 font-mono text-xs"
|
||||
readOnly
|
||||
value={CHATGPT_REMOTE_MCP_URL}
|
||||
/>
|
||||
|
|
@ -677,8 +678,8 @@ export function ConnectAIModal({
|
|||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="relative max-w-full">
|
||||
<pre className="max-h-80 overflow-x-auto overflow-y-auto rounded-lg border border-border bg-muted p-4 pr-12 text-xs">
|
||||
<div className="relative min-w-0 max-w-full">
|
||||
<pre className="max-h-80 max-w-full overflow-x-auto overflow-y-auto rounded-lg border border-border bg-muted p-3 pr-12 text-xs sm:p-4">
|
||||
<code className="block font-mono whitespace-pre-wrap break-all">
|
||||
{remoteSnippet}
|
||||
</code>
|
||||
|
|
@ -715,8 +716,8 @@ export function ConnectAIModal({
|
|||
Merge the snippet with your existing config. Restart
|
||||
the client and sign in with OAuth when prompted.
|
||||
</p>
|
||||
<div className="relative max-w-full">
|
||||
<pre className="max-h-80 overflow-x-auto overflow-y-auto rounded-lg border border-border bg-muted p-4 pr-12 text-xs">
|
||||
<div className="relative min-w-0 max-w-full">
|
||||
<pre className="max-h-80 max-w-full overflow-x-auto overflow-y-auto rounded-lg border border-border bg-muted p-3 pr-12 text-xs sm:p-4">
|
||||
<code className="block font-mono whitespace-pre-wrap break-all">
|
||||
{manual.snippet}
|
||||
</code>
|
||||
|
|
@ -782,8 +783,8 @@ export function ConnectAIModal({
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-muted/50 rounded-lg p-4 border border-border">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="rounded-lg border border-border bg-muted/50 p-4">
|
||||
<div className="mb-3 flex flex-wrap items-center justify-between gap-2">
|
||||
<h3 className="text-sm font-medium">Connection Status</h3>
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
{isCheckingConnection ? (
|
||||
|
|
@ -817,8 +818,8 @@ export function ConnectAIModal({
|
|||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center pt-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex flex-col gap-3 pt-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="flex flex-wrap items-center gap-2 sm:gap-4">
|
||||
<Button
|
||||
onClick={() =>
|
||||
window.open(
|
||||
|
|
@ -839,7 +840,12 @@ export function ConnectAIModal({
|
|||
Migrate from v1
|
||||
</Button>
|
||||
</div>
|
||||
<Button onClick={() => setIsOpen(false)}>Done</Button>
|
||||
<Button
|
||||
className="w-full sm:w-auto"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
Done
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
|
|
|
|||
|
|
@ -425,7 +425,7 @@ export default function Account() {
|
|||
<SettingsCard>
|
||||
<div className="flex flex-col gap-6">
|
||||
{/* Avatar + Name/Email */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex min-w-0 items-center gap-4">
|
||||
<div className="relative size-16 rounded-full bg-linear-to-b from-[#0D121A] to-black overflow-hidden shrink-0">
|
||||
<Avatar className="size-full">
|
||||
<AvatarImage
|
||||
|
|
@ -438,11 +438,11 @@ export default function Account() {
|
|||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex min-w-0 flex-col gap-1.5">
|
||||
<p
|
||||
className={cn(
|
||||
dmSans125ClassName(),
|
||||
"font-semibold text-[20px] tracking-[-0.2px] text-[#FAFAFA]",
|
||||
"truncate font-semibold text-[20px] tracking-[-0.2px] text-[#FAFAFA]",
|
||||
)}
|
||||
>
|
||||
{user?.name ?? "—"}
|
||||
|
|
@ -450,7 +450,7 @@ export default function Account() {
|
|||
<p
|
||||
className={cn(
|
||||
dmSans125ClassName(),
|
||||
"font-medium text-[16px] tracking-[-0.16px] text-[#FAFAFA]",
|
||||
"truncate font-medium text-[16px] tracking-[-0.16px] text-[#FAFAFA]",
|
||||
)}
|
||||
>
|
||||
{user?.email ?? "—"}
|
||||
|
|
@ -458,8 +458,8 @@ export default function Account() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<div className="flex-1 flex flex-col gap-2">
|
||||
<div className="flex flex-col gap-4 sm:flex-row">
|
||||
<div className="flex min-w-0 flex-1 flex-col gap-2">
|
||||
<p
|
||||
className={cn(
|
||||
dmSans125ClassName(),
|
||||
|
|
@ -477,7 +477,7 @@ export default function Account() {
|
|||
<PopoverTrigger
|
||||
disabled={!canSwitchOrg}
|
||||
className={cn(
|
||||
"flex items-center gap-2 transition-opacity",
|
||||
"flex min-w-0 max-w-full items-center gap-2 transition-opacity",
|
||||
canSwitchOrg
|
||||
? "cursor-pointer hover:opacity-90"
|
||||
: "cursor-default",
|
||||
|
|
@ -487,13 +487,13 @@ export default function Account() {
|
|||
<span
|
||||
className={cn(
|
||||
dmSans125ClassName(),
|
||||
"font-medium text-[16px] tracking-[-0.16px] text-[#FAFAFA]",
|
||||
"truncate font-medium text-[16px] tracking-[-0.16px] text-[#FAFAFA]",
|
||||
)}
|
||||
>
|
||||
{org?.name ?? "Personal"}
|
||||
</span>
|
||||
{canSwitchOrg && (
|
||||
<ChevronDown className="size-4 text-[#737373]" />
|
||||
<ChevronDown className="size-4 shrink-0 text-[#737373]" />
|
||||
)}
|
||||
</PopoverTrigger>
|
||||
{canSwitchOrg && (
|
||||
|
|
@ -549,7 +549,7 @@ export default function Account() {
|
|||
)}
|
||||
</Popover>
|
||||
</div>
|
||||
<div className="flex-1 flex flex-col gap-2">
|
||||
<div className="flex min-w-0 flex-1 flex-col gap-2">
|
||||
<p
|
||||
className={cn(
|
||||
dmSans125ClassName(),
|
||||
|
|
|
|||
|
|
@ -581,11 +581,11 @@ export default function ConnectionsMCP() {
|
|||
!hasProProduct && !isLoading && "opacity-30 pointer-events-none",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<span
|
||||
className={cn(
|
||||
dmSans125ClassName(),
|
||||
"font-semibold text-[16px] tracking-[-0.16px] text-[#FAFAFA]",
|
||||
"min-w-0 flex-1 truncate font-semibold text-[15px] tracking-[-0.16px] text-[#FAFAFA] sm:text-[16px]",
|
||||
)}
|
||||
>
|
||||
Connected to Supermemory
|
||||
|
|
@ -593,7 +593,7 @@ export default function ConnectionsMCP() {
|
|||
<span
|
||||
className={cn(
|
||||
dmSans125ClassName(),
|
||||
"font-semibold text-[16px] tracking-[-0.16px] text-[#737373]",
|
||||
"shrink-0 whitespace-nowrap text-right font-semibold text-[13px] tracking-[-0.16px] text-[#737373] sm:text-[16px]",
|
||||
)}
|
||||
>
|
||||
{connections.length}/{connectionsLimit} connections used
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue