apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-19 18:45:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: enhance layout and styling in settings components for improved UI consistency

Browse source
This commit is contained in:
Anish Sarkar 2026-04-14 01:10:35 +05:30
parent ae3d254a2c
commit f22d7434ce
4 changed files with 123 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

6
surfsense_web/components/settings/general-settings-manager.tsx
View file

@ -189,18 +189,20 @@ export function GeneralSettingsManager({ searchSpaceId }: GeneralSettingsManager
</div> </div>
</form> </form>
<div className="border-t pt-6 space-y-2"> <div className="border-t pt-6 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
<div className="space-y-1">
<Label>Export knowledge base</Label> <Label>Export knowledge base</Label>
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
Download all documents in this search space as a ZIP of markdown files. Download all documents in this search space as a ZIP of markdown files.
</p> </p>
</div>
<Button <Button
type="button" type="button"
variant="secondary" variant="secondary"
size="sm" size="sm"
disabled={isExporting} disabled={isExporting}
onClick={handleExportKB} onClick={handleExportKB}
className="relative" className="relative w-fit shrink-0"
> >
<span className={isExporting ? "opacity-0" : ""}> <span className={isExporting ? "opacity-0" : ""}>
<FolderArchive className="h-3 w-3 opacity-60" /> <FolderArchive className="h-3 w-3 opacity-60" />

49
surfsense_web/components/settings/image-model-manager.tsx
View file

@ -1,7 +1,7 @@
"use client"; "use client";
import { useAtomValue } from "jotai"; import { useAtomValue } from "jotai";
import { AlertCircle, Dot, Edit3, Info, RefreshCw, Trash2, Wand2 } from "lucide-react"; import { AlertCircle, Dot, Edit3, Info, RefreshCw, Trash2 } from "lucide-react";
import { useMemo, useState } from "react"; import { useMemo, useState } from "react";
import { deleteImageGenConfigMutationAtom } from "@/atoms/image-gen-config/image-gen-config-mutation.atoms"; import { deleteImageGenConfigMutationAtom } from "@/atoms/image-gen-config/image-gen-config-mutation.atoms";
import { import {
@ -209,21 +209,21 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
{["skeleton-a", "skeleton-b", "skeleton-c"].map((key) => ( {["skeleton-a", "skeleton-b", "skeleton-c"].map((key) => (
<Card key={key} className="border-border/60"> <Card key={key} className="border-border/60">
<CardContent className="p-4 flex flex-col gap-3"> <CardContent className="p-4 flex flex-col gap-3">
<div className="flex items-start justify-between gap-2"> <div className="flex items-center gap-2.5">
<Skeleton className="size-4 rounded-full shrink-0" />
<div className="space-y-1.5 flex-1 min-w-0"> <div className="space-y-1.5 flex-1 min-w-0">
<Skeleton className="h-4 w-28 md:w-32" /> <Skeleton className="h-4 w-28 md:w-32" />
<Skeleton className="h-3 w-40 md:w-48" /> <Skeleton className="h-3 w-40 md:w-48" />
</div> </div>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center pt-2 border-t border-border/40">
<Skeleton className="h-5 w-16 rounded-full" /> <Skeleton className="h-3 w-20 flex-1" />
<Skeleton className="h-5 w-24 rounded-md" /> <Skeleton className="h-3 w-3 rounded-full shrink-0 mx-1" />
</div> <div className="flex-1 flex items-center justify-end gap-1.5">
<div className="flex items-center gap-2 pt-2 border-t border-border/40">
<Skeleton className="h-3 w-20" />
<Skeleton className="h-4 w-4 rounded-full" /> <Skeleton className="h-4 w-4 rounded-full" />
<Skeleton className="h-3 w-16" /> <Skeleton className="h-3 w-16" />
</div> </div>
</div>
</CardContent> </CardContent>
</Card> </Card>
))} ))}
@ -255,8 +255,12 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
<div key={config.id}> <div key={config.id}>
<Card className="group relative overflow-hidden transition-all duration-200 border-border/60 hover:shadow-md h-full"> <Card className="group relative overflow-hidden transition-all duration-200 border-border/60 hover:shadow-md h-full">
<CardContent className="p-4 flex flex-col gap-3 h-full"> <CardContent className="p-4 flex flex-col gap-3 h-full">
{/* Header: Name + Actions */} {/* Header: Icon + Name + Actions */}
<div className="flex items-start justify-between gap-2"> <div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2.5 min-w-0 flex-1">
<div className="shrink-0">
{getProviderIcon(config.provider, { className: "size-4" })}
</div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<h4 className="text-sm font-semibold tracking-tight truncate"> <h4 className="text-sm font-semibold tracking-tight truncate">
{config.name} {config.name}
@ -267,8 +271,9 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
</p> </p>
)} )}
</div> </div>
</div>
{(canUpdate || canDelete) && ( {(canUpdate || canDelete) && (
<div className="flex items-center gap-0.5 shrink-0 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity duration-150"> <div className="flex items-center gap-0 shrink-0 sm:w-0 sm:overflow-hidden sm:group-hover:w-auto sm:opacity-0 sm:group-hover:opacity-100 transition-all duration-150">
{canUpdate && ( {canUpdate && (
<TooltipProvider> <TooltipProvider>
<Tooltip open={isDesktop ? undefined : false}> <Tooltip open={isDesktop ? undefined : false}>
@ -277,7 +282,7 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={() => openEditDialog(config)} onClick={() => openEditDialog(config)}
className="h-7 w-7 text-muted-foreground hover:text-foreground" className="h-6 w-6 text-muted-foreground hover:text-foreground"
> >
<Edit3 className="h-3 w-3" /> <Edit3 className="h-3 w-3" />
</Button> </Button>
@ -294,7 +299,7 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={() => setConfigToDelete(config)} onClick={() => setConfigToDelete(config)}
className="h-7 w-7 text-muted-foreground hover:text-destructive" className="h-6 w-6 text-muted-foreground hover:text-destructive"
> >
<Trash2 className="h-3 w-3" /> <Trash2 className="h-3 w-3" />
</Button> </Button>
@ -307,17 +312,9 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
)} )}
</div> </div>
{/* Provider + Model */}
<div className="flex items-center gap-2 flex-wrap">
{getProviderIcon(config.provider, { className: "size-3.5 shrink-0" })}
<code className="text-[11px] font-mono text-muted-foreground bg-muted/60 px-2 py-0.5 rounded-md truncate max-w-[160px]">
{config.model_name}
</code>
</div>
{/* Footer: Date + Creator */} {/* Footer: Date + Creator */}
<div className="flex items-center gap-2 pt-2 border-t border-border/40 mt-auto"> <div className="flex items-center pt-2 border-t border-border/40 mt-auto">
<span className="text-[11px] text-muted-foreground/60"> <span className="flex-1 min-w-0 text-[11px] text-muted-foreground/60 truncate">
{new Date(config.created_at).toLocaleDateString(undefined, { {new Date(config.created_at).toLocaleDateString(undefined, {
year: "numeric", year: "numeric",
month: "short", month: "short",
@ -326,11 +323,11 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
</span> </span>
{member && ( {member && (
<> <>
<Dot className="h-4 w-4 text-muted-foreground/30" /> <Dot className="h-4 w-4 text-muted-foreground/30 shrink-0" />
<TooltipProvider> <TooltipProvider>
<Tooltip open={isDesktop ? undefined : false}> <Tooltip open={isDesktop ? undefined : false}>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<div className="flex items-center gap-1.5 cursor-default"> <div className="flex-1 min-w-0 flex items-center justify-end gap-1.5 cursor-default">
<Avatar className="size-4.5 shrink-0"> <Avatar className="size-4.5 shrink-0">
{member.avatarUrl && ( {member.avatarUrl && (
<AvatarImage src={member.avatarUrl} alt={member.name} /> <AvatarImage src={member.avatarUrl} alt={member.name} />
@ -339,7 +336,7 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
{getInitials(member.name)} {getInitials(member.name)}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
<span className="text-[11px] text-muted-foreground/60 truncate max-w-[120px]"> <span className="text-[11px] text-muted-foreground/60 truncate">
{member.name} {member.name}
</span> </span>
</div> </div>

60
surfsense_web/components/settings/model-config-manager.tsx
View file

@ -10,7 +10,6 @@ import {
MessageSquareQuote, MessageSquareQuote,
RefreshCw, RefreshCw,
Trash2, Trash2,
Wand2,
} from "lucide-react"; } from "lucide-react";
import { useMemo, useState } from "react"; import { useMemo, useState } from "react";
import { membersAtom, myAccessAtom } from "@/atoms/members/members-query.atoms"; import { membersAtom, myAccessAtom } from "@/atoms/members/members-query.atoms";
@ -208,29 +207,27 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
{["skeleton-a", "skeleton-b", "skeleton-c"].map((key) => ( {["skeleton-a", "skeleton-b", "skeleton-c"].map((key) => (
<Card key={key} className="border-border/60"> <Card key={key} className="border-border/60">
<CardContent className="p-4 flex flex-col gap-3"> <CardContent className="p-4 flex flex-col gap-3">
{/* Header */} {/* Header: Icon + Name */}
<div className="flex items-start justify-between gap-2"> <div className="flex items-start gap-2.5">
<Skeleton className="size-4 rounded-full shrink-0 mt-0.5" />
<div className="space-y-1.5 flex-1 min-w-0"> <div className="space-y-1.5 flex-1 min-w-0">
<Skeleton className="h-4 w-28 md:w-32" /> <Skeleton className="h-4 w-28 md:w-32" />
<Skeleton className="h-3 w-40 md:w-48" /> <Skeleton className="h-3 w-40 md:w-48" />
</div> </div>
</div> </div>
{/* Provider + Model */}
<div className="flex items-center gap-2">
<Skeleton className="h-5 w-16 rounded-full" />
<Skeleton className="h-5 w-24 rounded-md" />
</div>
{/* Feature badges */} {/* Feature badges */}
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
<Skeleton className="h-5 w-20 rounded-full" /> <Skeleton className="h-5 w-20 rounded-full" />
<Skeleton className="h-5 w-16 rounded-full" />
</div> </div>
{/* Footer */} {/* Footer */}
<div className="flex items-center gap-2 pt-2 border-t border-border/40"> <div className="flex items-center pt-2 border-t border-border/40">
<Skeleton className="h-3 w-20" /> <Skeleton className="h-3 w-20 flex-1" />
<Skeleton className="h-3 w-3 rounded-full shrink-0 mx-1" />
<div className="flex-1 flex items-center justify-end gap-1.5">
<Skeleton className="h-4 w-4 rounded-full" /> <Skeleton className="h-4 w-4 rounded-full" />
<Skeleton className="h-3 w-16" /> <Skeleton className="h-3 w-16" />
</div> </div>
</div>
</CardContent> </CardContent>
</Card> </Card>
))} ))}
@ -262,8 +259,12 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
<div key={config.id}> <div key={config.id}>
<Card className="group relative overflow-hidden transition-all duration-200 border-border/60 hover:shadow-md h-full"> <Card className="group relative overflow-hidden transition-all duration-200 border-border/60 hover:shadow-md h-full">
<CardContent className="p-4 flex flex-col gap-3 h-full"> <CardContent className="p-4 flex flex-col gap-3 h-full">
{/* Header: Name + Actions */} {/* Header: Icon + Name + Actions */}
<div className="flex items-start justify-between gap-2"> <div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2.5 min-w-0 flex-1">
<div className="shrink-0">
{getProviderIcon(config.provider, { className: "size-4" })}
</div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<h4 className="text-sm font-semibold tracking-tight truncate"> <h4 className="text-sm font-semibold tracking-tight truncate">
{config.name} {config.name}
@ -274,8 +275,9 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
</p> </p>
)} )}
</div> </div>
</div>
{(canUpdate || canDelete) && ( {(canUpdate || canDelete) && (
<div className="flex items-center gap-0.5 shrink-0 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity duration-150"> <div className="flex items-center gap-0 shrink-0 sm:w-0 sm:overflow-hidden sm:group-hover:w-auto sm:opacity-0 sm:group-hover:opacity-100 transition-all duration-150">
{canUpdate && ( {canUpdate && (
<TooltipProvider> <TooltipProvider>
<Tooltip open={isDesktop ? undefined : false}> <Tooltip open={isDesktop ? undefined : false}>
@ -284,7 +286,7 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={() => openEditDialog(config)} onClick={() => openEditDialog(config)}
className="h-7 w-7 text-muted-foreground hover:text-foreground" className="h-6 w-6 text-muted-foreground hover:text-foreground"
> >
<Edit3 className="h-3 w-3" /> <Edit3 className="h-3 w-3" />
</Button> </Button>
@ -301,7 +303,7 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={() => setConfigToDelete(config)} onClick={() => setConfigToDelete(config)}
className="h-7 w-7 text-muted-foreground hover:text-destructive" className="h-6 w-6 text-muted-foreground hover:text-destructive"
> >
<Trash2 className="h-3 w-3" /> <Trash2 className="h-3 w-3" />
</Button> </Button>
@ -314,20 +316,12 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
)} )}
</div> </div>
{/* Provider + Model */}
<div className="flex items-center gap-2 flex-wrap">
{getProviderIcon(config.provider, { className: "size-3.5 shrink-0" })}
<code className="text-[11px] font-mono text-muted-foreground bg-muted/60 px-2 py-0.5 rounded-md truncate max-w-[160px]">
{config.model_name}
</code>
</div>
{/* Feature badges */} {/* Feature badges */}
<div className="flex items-center gap-1.5 flex-wrap"> <div className="flex items-center gap-1.5 flex-wrap">
{config.citations_enabled && ( {config.citations_enabled && (
<Badge <Badge
variant="outline" variant="secondary"
className="text-[10px] px-1.5 py-0.5 border-emerald-500/30 text-emerald-700 dark:text-emerald-300 bg-emerald-500/5" className="text-[10px] px-1.5 py-0.5 border-0 text-muted-foreground bg-muted"
> >
<MessageSquareQuote className="h-2.5 w-2.5 mr-1" /> <MessageSquareQuote className="h-2.5 w-2.5 mr-1" />
Citations Citations
@ -336,8 +330,8 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
{!config.use_default_system_instructions && {!config.use_default_system_instructions &&
config.system_instructions && ( config.system_instructions && (
<Badge <Badge
variant="outline" variant="secondary"
className="text-[10px] px-1.5 py-0.5 border-blue-500/30 text-blue-700 dark:text-blue-300 bg-blue-500/5" className="text-[10px] px-1.5 py-0.5 border-0 text-muted-foreground bg-muted"
> >
<FileText className="h-2.5 w-2.5 mr-1" /> <FileText className="h-2.5 w-2.5 mr-1" />
Custom Custom
@ -346,8 +340,8 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
</div> </div>
{/* Footer: Date + Creator */} {/* Footer: Date + Creator */}
<div className="flex items-center gap-2 pt-2 border-t border-border/40 mt-auto"> <div className="flex items-center pt-2 border-t border-border/40 mt-auto">
<span className="text-[11px] text-muted-foreground/60"> <span className="flex-1 min-w-0 text-[11px] text-muted-foreground/60 truncate">
{new Date(config.created_at).toLocaleDateString(undefined, { {new Date(config.created_at).toLocaleDateString(undefined, {
year: "numeric", year: "numeric",
month: "short", month: "short",
@ -356,11 +350,11 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
</span> </span>
{member && ( {member && (
<> <>
<Dot className="h-4 w-4 text-muted-foreground/30" /> <Dot className="h-4 w-4 text-muted-foreground/30 shrink-0" />
<TooltipProvider> <TooltipProvider>
<Tooltip open={isDesktop ? undefined : false}> <Tooltip open={isDesktop ? undefined : false}>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<div className="flex items-center gap-1.5 cursor-default"> <div className="flex-1 min-w-0 flex items-center justify-end gap-1.5 cursor-default">
<Avatar className="size-4.5 shrink-0"> <Avatar className="size-4.5 shrink-0">
{member.avatarUrl && ( {member.avatarUrl && (
<AvatarImage src={member.avatarUrl} alt={member.name} /> <AvatarImage src={member.avatarUrl} alt={member.name} />
@ -369,7 +363,7 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
{getInitials(member.name)} {getInitials(member.name)}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
<span className="text-[11px] text-muted-foreground/60 truncate max-w-[120px]"> <span className="text-[11px] text-muted-foreground/60 truncate">
{member.name} {member.name}
</span> </span>
</div> </div>

48
surfsense_web/components/settings/vision-model-manager.tsx
View file

@ -208,21 +208,21 @@ export function VisionModelManager({ searchSpaceId }: VisionModelManagerProps) {
{["skeleton-a", "skeleton-b", "skeleton-c"].map((key) => ( {["skeleton-a", "skeleton-b", "skeleton-c"].map((key) => (
<Card key={key} className="border-border/60"> <Card key={key} className="border-border/60">
<CardContent className="p-4 flex flex-col gap-3"> <CardContent className="p-4 flex flex-col gap-3">
<div className="flex items-start justify-between gap-2"> <div className="flex items-center gap-2.5">
<Skeleton className="size-4 rounded-full shrink-0" />
<div className="space-y-1.5 flex-1 min-w-0"> <div className="space-y-1.5 flex-1 min-w-0">
<Skeleton className="h-4 w-28 md:w-32" /> <Skeleton className="h-4 w-28 md:w-32" />
<Skeleton className="h-3 w-40 md:w-48" /> <Skeleton className="h-3 w-40 md:w-48" />
</div> </div>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center pt-2 border-t border-border/40">
<Skeleton className="h-5 w-16 rounded-full" /> <Skeleton className="h-3 w-20 flex-1" />
<Skeleton className="h-5 w-24 rounded-md" /> <Skeleton className="h-3 w-3 rounded-full shrink-0 mx-1" />
</div> <div className="flex-1 flex items-center justify-end gap-1.5">
<div className="flex items-center gap-2 pt-2 border-t border-border/40">
<Skeleton className="h-3 w-20" />
<Skeleton className="h-4 w-4 rounded-full" /> <Skeleton className="h-4 w-4 rounded-full" />
<Skeleton className="h-3 w-16" /> <Skeleton className="h-3 w-16" />
</div> </div>
</div>
</CardContent> </CardContent>
</Card> </Card>
))} ))}
@ -253,7 +253,12 @@ export function VisionModelManager({ searchSpaceId }: VisionModelManagerProps) {
<div key={config.id}> <div key={config.id}>
<Card className="group relative overflow-hidden transition-all duration-200 border-border/60 hover:shadow-md h-full"> <Card className="group relative overflow-hidden transition-all duration-200 border-border/60 hover:shadow-md h-full">
<CardContent className="p-4 flex flex-col gap-3 h-full"> <CardContent className="p-4 flex flex-col gap-3 h-full">
<div className="flex items-start justify-between gap-2"> {/* Header: Icon + Name + Actions */}
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2.5 min-w-0 flex-1">
<div className="shrink-0">
{getProviderIcon(config.provider, { className: "size-4" })}
</div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<h4 className="text-sm font-semibold tracking-tight truncate"> <h4 className="text-sm font-semibold tracking-tight truncate">
{config.name} {config.name}
@ -264,8 +269,9 @@ export function VisionModelManager({ searchSpaceId }: VisionModelManagerProps) {
</p> </p>
)} )}
</div> </div>
</div>
{(canUpdate || canDelete) && ( {(canUpdate || canDelete) && (
<div className="flex items-center gap-0.5 shrink-0 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity duration-150"> <div className="flex items-center gap-0 shrink-0 sm:w-0 sm:overflow-hidden sm:group-hover:w-auto sm:opacity-0 sm:group-hover:opacity-100 transition-all duration-150">
{canUpdate && ( {canUpdate && (
<TooltipProvider> <TooltipProvider>
<Tooltip open={isDesktop ? undefined : false}> <Tooltip open={isDesktop ? undefined : false}>
@ -274,7 +280,7 @@ export function VisionModelManager({ searchSpaceId }: VisionModelManagerProps) {
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={() => openEditDialog(config)} onClick={() => openEditDialog(config)}
className="h-7 w-7 text-muted-foreground hover:text-foreground" className="h-6 w-6 text-muted-foreground hover:text-foreground"
> >
<Edit3 className="h-3 w-3" /> <Edit3 className="h-3 w-3" />
</Button> </Button>
@ -291,7 +297,7 @@ export function VisionModelManager({ searchSpaceId }: VisionModelManagerProps) {
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={() => setConfigToDelete(config)} onClick={() => setConfigToDelete(config)}
className="h-7 w-7 text-muted-foreground hover:text-destructive" className="h-6 w-6 text-muted-foreground hover:text-destructive"
> >
<Trash2 className="h-3 w-3" /> <Trash2 className="h-3 w-3" />
</Button> </Button>
@ -304,17 +310,9 @@ export function VisionModelManager({ searchSpaceId }: VisionModelManagerProps) {
)} )}
</div> </div>
<div className="flex items-center gap-2 flex-wrap"> {/* Footer: Date + Creator */}
{getProviderIcon(config.provider, { <div className="flex items-center pt-2 border-t border-border/40 mt-auto">
className: "size-3.5 shrink-0", <span className="flex-1 min-w-0 text-[11px] text-muted-foreground/60 truncate">
})}
<code className="text-[11px] font-mono text-muted-foreground bg-muted/60 px-2 py-0.5 rounded-md truncate max-w-[160px]">
{config.model_name}
</code>
</div>
<div className="flex items-center gap-2 pt-2 border-t border-border/40 mt-auto">
<span className="text-[11px] text-muted-foreground/60">
{new Date(config.created_at).toLocaleDateString(undefined, { {new Date(config.created_at).toLocaleDateString(undefined, {
year: "numeric", year: "numeric",
month: "short", month: "short",
@ -323,11 +321,11 @@ export function VisionModelManager({ searchSpaceId }: VisionModelManagerProps) {
</span> </span>
{member && ( {member && (
<> <>
<Dot className="h-4 w-4 text-muted-foreground/30" /> <Dot className="h-4 w-4 text-muted-foreground/30 shrink-0" />
<TooltipProvider> <TooltipProvider>
<Tooltip open={isDesktop ? undefined : false}> <Tooltip open={isDesktop ? undefined : false}>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<div className="flex items-center gap-1.5 cursor-default"> <div className="flex-1 min-w-0 flex items-center justify-end gap-1.5 cursor-default">
<Avatar className="size-4.5 shrink-0"> <Avatar className="size-4.5 shrink-0">
{member.avatarUrl && ( {member.avatarUrl && (
<AvatarImage src={member.avatarUrl} alt={member.name} /> <AvatarImage src={member.avatarUrl} alt={member.name} />
@ -336,7 +334,7 @@ export function VisionModelManager({ searchSpaceId }: VisionModelManagerProps) {
{getInitials(member.name)} {getInitials(member.name)}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
<span className="text-[11px] text-muted-foreground/60 truncate max-w-[120px]"> <span className="text-[11px] text-muted-foreground/60 truncate">
{member.name} {member.name}
</span> </span>
</div> </div>