Skip to content

Refactor: Standardize Config Layout & UI Refinements #106

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
norberia merged 2 commits into from
Dec 1, 2025
Merged

Refactor: Standardize Config Layout & UI Refinements #106

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e6a739c
refactor: standardize configuration page layout using `ConfigLayout` …
norberia Dec 1, 2025
5a5e173
fix lint issue
norberia Dec 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@
--sidebar-project-background: #1e1e1e;
--sidebar-primary: #007acc;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #264f78;
--sidebar-accent: #2d2d30;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #1e1e1e;
--sidebar-ring: #007fd4;
Expand Down
6 changes: 3 additions & 3 deletions app/projects/[id]/auth/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,11 +88,11 @@ function AuthPageContent() {

return (
<ConfigLayout
title="Authentication Configuration"
description="Configure OAuth providers and other authentication settings"
title="Auth Configuration"
description="Configure auth configuration settings for this project."
loading={envLoading || projectLoading}
>
<div className="space-y-8">
<div>
{/* GitHub OAuth Section */}
<div>
<div className="flex items-center justify-between mb-4">
Expand Down
135 changes: 65 additions & 70 deletions app/projects/[id]/database/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
import { Info } from 'lucide-react';
import { notFound, redirect } from 'next/navigation';

import { ConfigLayout } from '@/components/config/config-layout';
import { auth } from '@/lib/auth';
import { prisma } from '@/lib/db';

Expand Down Expand Up @@ -48,91 +49,85 @@ export default async function DatabasePage({ params }: { params: Promise<{ id: s
}

return (
<div className="flex-1 flex flex-col overflow-hidden bg-[#1e1e1e]">
{/* Header */}
<div className="shrink-0 border-b border-[#3e3e42] bg-[#1e1e1e] px-6 py-4">
<div>
<h1 className="text-base font-medium text-[#cccccc]">Database Information</h1>
<p className="text-xs text-[#858585] mt-0.5">View database connection details</p>
</div>
</div>

{/* Content */}
<div className="flex-1 overflow-y-auto">
<div className="max-w-4xl mx-auto p-6 space-y-6">
{connectionString ? (
<>
{/* Connection Details */}
<div className="space-y-3">
<h2 className="text-sm font-medium text-[#cccccc] mb-3">PostgreSQL Connection</h2>

{/* Host */}
<div>
<label className="text-xs text-[#858585] mb-1 block">Host</label>
<div className="p-2.5 bg-[#3c3c3c] border border-[#3e3e42] rounded font-mono text-sm text-[#cccccc]">
{host}
<ConfigLayout title="Database Information" description="View database connection details">
<div className="flex-1 flex flex-col overflow-hidden bg-[#1e1e1e]">
{/* Content */}
<div className="flex-1 overflow-y-auto">
<div>
{connectionString ? (
<>
{/* Connection Details */}
<div className="space-y-3">
<h2 className="text-sm font-medium text-[#cccccc] mb-3">PostgreSQL Connection</h2>

{/* Host */}
<div>
<label className="text-xs text-[#858585] mb-1 block">Host</label>
<div className="p-2.5 bg-[#3c3c3c] border border-[#3e3e42] rounded font-mono text-sm text-[#cccccc]">
{host}
</div>
</div>
</div>

{/* Port */}
<div>
<label className="text-xs text-[#858585] mb-1 block">Port</label>
<div className="p-2.5 bg-[#3c3c3c] border border-[#3e3e42] rounded font-mono text-sm text-[#cccccc]">
{port}
{/* Port */}
<div>
<label className="text-xs text-[#858585] mb-1 block">Port</label>
<div className="p-2.5 bg-[#3c3c3c] border border-[#3e3e42] rounded font-mono text-sm text-[#cccccc]">
{port}
</div>
</div>
</div>

{/* Database Name */}
<div>
<label className="text-xs text-[#858585] mb-1 block">Database</label>
<div className="p-2.5 bg-[#3c3c3c] border border-[#3e3e42] rounded font-mono text-sm text-[#cccccc]">
{dbName}
{/* Database Name */}
<div>
<label className="text-xs text-[#858585] mb-1 block">Database</label>
<div className="p-2.5 bg-[#3c3c3c] border border-[#3e3e42] rounded font-mono text-sm text-[#cccccc]">
{dbName}
</div>
</div>
</div>

{/* Username */}
<div>
<label className="text-xs text-[#858585] mb-1 block">Username</label>
<div className="p-2.5 bg-[#3c3c3c] border border-[#3e3e42] rounded font-mono text-sm text-[#cccccc]">
{username}
{/* Username */}
<div>
<label className="text-xs text-[#858585] mb-1 block">Username</label>
<div className="p-2.5 bg-[#3c3c3c] border border-[#3e3e42] rounded font-mono text-sm text-[#cccccc]">
{username}
</div>
</div>
</div>

{/* Password */}
<div>
<label className="text-xs text-[#858585] mb-1 block">Password</label>
<div className="p-2.5 bg-[#3c3c3c] border border-[#3e3e42] rounded font-mono text-sm text-[#cccccc]">
{'•'.repeat(Math.min(password.length, 20))}
{/* Password */}
<div>
<label className="text-xs text-[#858585] mb-1 block">Password</label>
<div className="p-2.5 bg-[#3c3c3c] border border-[#3e3e42] rounded font-mono text-sm text-[#cccccc]">
{'•'.repeat(Math.min(password.length, 20))}
</div>
</div>
</div>

{/* Full Connection String */}
<ConnectionString connectionString={connectionString} />
</div>
{/* Full Connection String */}
<ConnectionString connectionString={connectionString} />
</div>

{/* Info Panel */}
<div className="p-4 bg-[#252526] border border-[#3e3e42] rounded">
<div className="flex items-start gap-2">
<Info className="h-4 w-4 text-[#3794ff] mt-0.5 shrink-0" />
<div className="space-y-1 text-xs text-[#858585]">
<p>• Database is automatically provisioned with your sandbox</p>
<p>• Managed by KubeBlocks with high availability</p>
<p>• SSL encryption enabled by default</p>
<p>• Connection string available via DATABASE_URL environment variable</p>
{/* Info Panel */}
<div className="p-4 bg-[#252526] border border-[#3e3e42] rounded">
<div className="flex items-start gap-2">
<Info className="h-4 w-4 text-[#3794ff] mt-0.5 shrink-0" />
<div className="space-y-1 text-xs text-[#858585]">
<p>• Database is automatically provisioned with your sandbox</p>
<p>• Managed by KubeBlocks with high availability</p>
<p>• SSL encryption enabled by default</p>
<p>• Connection string available via DATABASE_URL environment variable</p>
</div>
</div>
</div>
</>
) : (
<div className="py-12 text-center">
<p className="text-sm text-[#858585]">No database configured</p>
<p className="text-xs text-[#858585] mt-1">
Database will be automatically provisioned when sandbox is created
</p>
</div>
</>
) : (
<div className="py-12 text-center">
<p className="text-sm text-[#858585]">No database configured</p>
<p className="text-xs text-[#858585] mt-1">
Database will be automatically provisioned when sandbox is created
</p>
</div>
)}
)}
</div>
</div>
</div>
</div>
</ConfigLayout>
);
}
30 changes: 17 additions & 13 deletions components/config/config-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import type { ReactNode } from 'react';

import { Spinner } from '@/components/ui/spinner';


interface ConfigLayoutProps {
/** Page title */
title: string;
Expand All @@ -26,29 +27,32 @@ interface ConfigLayoutProps {
export function ConfigLayout({ title, description, children, loading }: ConfigLayoutProps) {
if (loading) {
return (
<div className="flex-1 flex items-center justify-center bg-[#1e1e1e]">
<div className="flex-1 flex items-center justify-center bg-background">
<div className="flex items-center gap-3">
<Spinner className="h-5 w-5 text-[#3794ff]" />
<span className="text-sm text-[#cccccc]">Loading configuration...</span>
<Spinner className="h-5 w-5 text-primary" />
<span className="text-sm text-muted-foreground">Loading configuration...</span>
</div>
</div>
);
}

return (
<div className="flex-1 flex flex-col overflow-hidden bg-[#1e1e1e]">
{/* Header - Clean VSCode style */}
<div className="shrink-0 border-b border-[#3e3e42] bg-[#1e1e1e] px-6 py-4">
<div>
<h1 className="text-base font-medium text-[#cccccc]">{title}</h1>
<p className="text-xs text-[#858585] mt-0.5">{description}</p>
<div className="flex-1 p-8 sm:p-12 overflow-y-auto">
<div className="max-w-4xl mx-auto w-full animate-fade-in-up">
{/* Header - Clean VSCode style */}
<div className="flex items-center gap-4 mb-8">
<div>
<h1 className="text-3xl font-bold text-vscode-heading">{title}</h1>
<p className="text-vscode-fg/60 mt-1">{description}</p>
</div>
</div>
</div>

{/* Content - Scrollable area */}
<div className="flex-1 overflow-y-auto">
<div className="max-w-4xl mx-auto p-6">{children}</div>
{/* Content - Scrollable area */}
<div className="flex-1 overflow-y-auto">
{children}
</div>
</div>
</div>

);
}
2 changes: 1 addition & 1 deletion components/sidebars/primary-sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export default function PrimarySidebar({ currentProjectId }: PrimarySidebarProps
{/* Home Link */}
<Link
href="/projects"
className="group flex items-center h-8 px-3 hover:bg-sidebar-accent transition-colors"
className="group flex items-center h-8 px-3 hover:bg-sidebar-accent/10 transition-colors"
>
<Home className="h-4 w-4 text-muted-foreground group-hover:text-sidebar-foreground shrink-0 transition-colors" />
{isExpanded && (
Expand Down
Loading