yusufipek/OpenFrame
1
0
Fork 0
mirror of https://github.com/yusufipk/OpenFrame.git synced 2026-09-11 09:36:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Enhance dashboard responsiveness across various pages and update project visibility icons for improved clarity.

Browse Source
This commit is contained in:
Yusuf İpek
2026-02-20 14:28:43 +03:00
parent fe496b7fa5
commit 1bb1c8e574
12 changed files with 525 additions and 512 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(dashboard)/dashboard/project-filter.tsx
+3 -3
View File
@@ -82,8 +82,8 @@ export function ProjectFilter({ projects, workspaces }: ProjectFilterProps) {
return (
<>
{/* Header */}
<div className="flex items-center justify-between mb-8">
<div className="flex items-center gap-4">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
<div className="flex flex-col sm:flex-row sm:items-center gap-4">
<h1 className="text-3xl font-bold tracking-tight">Projects</h1>
{workspaces.length > 0 && (
<Select value={selectedWorkspace} onValueChange={setSelectedWorkspace}>
@@ -101,7 +101,7 @@ export function ProjectFilter({ projects, workspaces }: ProjectFilterProps) {
</Select>
)}
</div>
<div className="flex items-center gap-3">
<div className="flex flex-wrap items-center gap-3">
<Button
variant="outline"
size="sm"
app/(dashboard)/projects/[projectId]/members/page.tsx
+8 -8
View File
@@ -195,8 +195,8 @@ export default function ProjectMembersPage() {
</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={handleInvite} className="flex gap-3 items-end">
<div className="flex-1">
<form onSubmit={handleInvite} className="flex flex-col sm:flex-row gap-3 sm:items-end">
<div className="w-full sm:flex-1">
<Label htmlFor="email" className="mb-2 block">Email Address</Label>
<Input
id="email"
@@ -208,7 +208,7 @@ export default function ProjectMembersPage() {
disabled={isInviting}
/>
</div>
<div className="w-40">
<div className="w-full sm:w-40">
<Label className="mb-2 block">Role</Label>
<Select value={inviteRole} onValueChange={(v) => setInviteRole(v as 'ADMIN' | 'COMMENTATOR')}>
<SelectTrigger className="w-full">
@@ -220,7 +220,7 @@ export default function ProjectMembersPage() {
</SelectContent>
</Select>
</div>
<Button type="submit" disabled={isInviting}>
<Button type="submit" disabled={isInviting} className="w-full sm:w-auto">
{isInviting ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
@@ -257,7 +257,7 @@ export default function ProjectMembersPage() {
<CardContent className="space-y-3">
{/* Owner */}
{owner && (
<div className="flex items-center justify-between p-3 rounded-lg bg-accent/30">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 sm:gap-0 p-3 rounded-lg bg-accent/30">
<div className="flex items-center gap-3">
<Avatar className="h-9 w-9">
<AvatarImage src={owner.image ?? undefined} />
@@ -277,7 +277,7 @@ export default function ProjectMembersPage() {
{/* Members */}
{members.map((member) => (
<div key={member.id} className="flex items-center justify-between p-3 rounded-lg border">
<div key={member.id} className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 sm:gap-0 p-3 rounded-lg border">
<div className="flex items-center gap-3">
<Avatar className="h-9 w-9">
<AvatarImage src={member.user.image ?? undefined} />
@@ -288,12 +288,12 @@ export default function ProjectMembersPage() {
<p className="text-xs text-muted-foreground">{member.user.email}</p>
</div>
</div>
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 w-full sm:w-auto">
<Select
value={member.role}
onValueChange={(v) => handleRoleChange(member.id, v)}
>
<SelectTrigger className="w-36 h-8">
<SelectTrigger className="w-full sm:w-36 h-8">
<SelectValue />
</SelectTrigger>
<SelectContent>
app/(dashboard)/projects/[projectId]/project-content-client.tsx
+7 -4
View File
@@ -11,6 +11,9 @@ import {
Building2,
ArrowUp,
ArrowDown,
Globe,
UserPlus,
Lock,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
@@ -71,9 +74,9 @@ export function ProjectContentClient({
<div className="flex items-center gap-2 mb-1">
<h1 className="text-3xl font-bold tracking-tight">{project.name}</h1>
<Badge variant="outline" className="flex items-center gap-1">
{project.visibility === 'PUBLIC' && <span className="text-xs">🌐</span>}
{project.visibility === 'INVITE' && <span className="text-xs">📧</span>}
{project.visibility === 'PRIVATE' && <span className="text-xs">🔒</span>}
{project.visibility === 'PUBLIC' && <Globe className="h-3 w-3" />}
{project.visibility === 'INVITE' && <UserPlus className="h-3 w-3" />}
{project.visibility === 'PRIVATE' && <Lock className="h-3 w-3" />}
{project.visibility.toLowerCase()}
</Badge>
</div>
@@ -92,7 +95,7 @@ export function ProjectContentClient({
</div>
</div>
<div className="flex items-center gap-2">
<div className="flex flex-wrap items-center gap-2 mt-4 sm:mt-0">
{/* Sort Button - Left of Share */}
<Button
variant="outline"
app/(dashboard)/projects/[projectId]/settings/page.tsx
+2 -2
View File
@@ -362,7 +362,7 @@ export default function ProjectSettingsPage({ params }: ProjectSettingsPageProps
{/* Existing tags */}
<div className="space-y-2">
{tags.map((tag) => (
<div key={tag.id} className="flex items-center gap-2 p-2 rounded-lg border bg-card">
<div key={tag.id} className="flex flex-wrap items-center gap-2 p-2 rounded-lg border bg-card">
{editingTagId === tag.id ? (
<>
<input
@@ -417,7 +417,7 @@ export default function ProjectSettingsPage({ params }: ProjectSettingsPageProps
</div>
{/* Add new tag */}
<div className="flex items-center gap-2 pt-2 border-t">
<div className="flex flex-wrap items-center gap-2 pt-2 border-t">
<input
type="color"
value={newTagColor}
app/(dashboard)/projects/[projectId]/videos/new/page.tsx
+1 -1
View File
@@ -224,7 +224,7 @@ export default function NewVideoPage() {
</p>
)}
<div className="flex gap-3">
<div className="flex flex-wrap gap-3">
<Button type="submit" disabled={isLoading || !videoSource}>
{isLoading && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
Add Video
app/(dashboard)/settings/page.tsx
+2 -2
View File
@@ -54,7 +54,7 @@ function ToggleButton({
: 'border-border hover:bg-accent/50'
)}
>
<div>
<div className="flex-1 min-w-0 pr-4">
<span className="text-sm font-medium">{label}</span>
{description && (
<p className="text-xs text-muted-foreground mt-0.5">{description}</p>
@@ -62,7 +62,7 @@ function ToggleButton({
</div>
<div
className={cn(
'w-10 h-6 rounded-full relative transition-colors',
'w-10 h-6 shrink-0 rounded-full relative transition-colors',
enabled ? 'bg-primary' : 'bg-muted'
)}
>
app/(dashboard)/workspaces/[workspaceId]/members/page.tsx
+8 -8
View File
@@ -194,8 +194,8 @@ export default function WorkspaceMembersPage() {
</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={handleInvite} className="flex gap-3 items-end">
<div className="flex-1">
<form onSubmit={handleInvite} className="flex flex-col sm:flex-row gap-3 sm:items-end">
<div className="w-full sm:flex-1">
<Label htmlFor="email" className="mb-2 block">Email Address</Label>
<Input
id="email"
@@ -207,7 +207,7 @@ export default function WorkspaceMembersPage() {
disabled={isInviting}
/>
</div>
<div className="w-40">
<div className="w-full sm:w-40">
<Label className="mb-2 block">Role</Label>
<Select value={inviteRole} onValueChange={(v) => setInviteRole(v as 'ADMIN' | 'COMMENTATOR')}>
<SelectTrigger className="w-full">
@@ -219,7 +219,7 @@ export default function WorkspaceMembersPage() {
</SelectContent>
</Select>
</div>
<Button type="submit" disabled={isInviting}>
<Button type="submit" disabled={isInviting} className="w-full sm:w-auto">
{isInviting ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
@@ -255,7 +255,7 @@ export default function WorkspaceMembersPage() {
<CardContent className="space-y-3">
{/* Owner */}
{owner && (
<div className="flex items-center justify-between p-3 rounded-lg bg-accent/30">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 sm:gap-0 p-3 rounded-lg bg-accent/30">
<div className="flex items-center gap-3">
<Avatar className="h-9 w-9">
<AvatarImage src={owner.image ?? undefined} />
@@ -275,7 +275,7 @@ export default function WorkspaceMembersPage() {
{/* Members */}
{members.map((member) => (
<div key={member.id} className="flex items-center justify-between p-3 rounded-lg border">
<div key={member.id} className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 sm:gap-0 p-3 rounded-lg border">
<div className="flex items-center gap-3">
<Avatar className="h-9 w-9">
<AvatarImage src={member.user.image ?? undefined} />
@@ -286,12 +286,12 @@ export default function WorkspaceMembersPage() {
<p className="text-xs text-muted-foreground">{member.user.email}</p>
</div>
</div>
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 w-full sm:w-auto">
<Select
value={member.role}
onValueChange={(v) => handleRoleChange(member.id, v)}
>
<SelectTrigger className="w-36 h-8">
<SelectTrigger className="w-full sm:w-36 h-8">
<SelectValue />
</SelectTrigger>
<SelectContent>
app/(dashboard)/workspaces/[workspaceId]/page.tsx
+6 -6
View File
@@ -98,13 +98,13 @@ export default async function WorkspacePage({ params }: WorkspacePageProps) {
</Link>
</div>
<div className="flex items-center justify-between mb-8">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
<div>
<h1 className="text-3xl font-bold tracking-tight">{workspace.name}</h1>
{workspace.description && (
<p className="text-muted-foreground mt-1">{workspace.description}</p>
)}
<div className="flex items-center gap-4 mt-2 text-sm text-muted-foreground">
<div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 mt-2 text-sm text-muted-foreground">
<span className="flex items-center gap-1">
<FolderOpen className="h-3.5 w-3.5" />
{workspace._count.projects} projects
@@ -115,22 +115,22 @@ export default async function WorkspacePage({ params }: WorkspacePageProps) {
</span>
</div>
</div>
<div className="flex items-center gap-2">
<div className="flex flex-wrap items-center gap-2 w-full sm:w-auto mt-2 sm:mt-0">
{isAdmin && (
<>
<Button asChild variant="outline" size="sm">
<Button asChild variant="outline" size="sm" className="flex-1 sm:flex-none">
<Link href={`/workspaces/${workspaceId}/members`}>
<Users className="h-4 w-4 mr-2" />
Members
</Link>
</Button>
<Button asChild variant="outline" size="sm">
<Button asChild variant="outline" size="sm" className="flex-1 sm:flex-none">
<Link href={`/workspaces/${workspaceId}/settings`}>
<Settings className="h-4 w-4 mr-2" />
Settings
</Link>
</Button>
<Button asChild size="sm">
<Button asChild size="sm" className="w-full sm:w-auto">
<Link href={`/workspaces/${workspaceId}/projects/new`}>
<Plus className="h-4 w-4 mr-2" />
New Project
app/(dashboard)/workspaces/page.tsx
+2 -2
View File
@@ -48,14 +48,14 @@ export default async function WorkspacesPage() {
return (
<div className="px-6 lg:px-8 py-8 w-full">
{/* Header */}
<div className="flex items-center justify-between mb-8">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
<div>
<h1 className="text-3xl font-bold tracking-tight">Workspaces</h1>
<p className="text-muted-foreground mt-1">
Manage your workspaces and their projects
</p>
</div>
<Button asChild>
<Button asChild className="w-full sm:w-auto">
<Link href="/workspaces/new">
<Plus className="h-4 w-4 mr-2" />
New Workspace
app/page.tsx
-3
View File
@@ -22,9 +22,6 @@ export default async function HomePage() {
<Button asChild variant="ghost">
<Link href="/dashboard">Dashboard</Link>
</Button>
<Button asChild>
<Link href="/projects/new">New Project</Link>
</Button>
</>
) : (
<>
components/layout/header.tsx
+6 -4
View File
@@ -24,7 +24,7 @@ import {
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
import { Sheet, SheetContent, SheetTrigger, SheetTitle, SheetDescription } from '@/components/ui/sheet';
import { ThemeToggle } from '@/components/theme-toggle';
import { cn } from '@/lib/utils';
@@ -62,7 +62,7 @@ export function Header({ user }: HeaderProps) {
return (
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
<div className="px-6 lg:px-8 flex h-14 items-center w-full">
<div className="px-4 md:px-6 lg:px-8 flex h-14 items-center w-full">
{/* Mobile menu */}
<Sheet>
<SheetTrigger asChild>
@@ -72,7 +72,9 @@ export function Header({ user }: HeaderProps) {
</Button>
</SheetTrigger>
<SheetContent side="left" className="w-64">
<nav className="flex flex-col gap-2 mt-4">
<SheetTitle className="sr-only">Navigation Menu</SheetTitle>
<SheetDescription className="sr-only">Access your projects and workspaces</SheetDescription>
<nav className="flex flex-col gap-2 mt-10">
{navItems.map((item) => (
<Link
key={item.href}
@@ -124,7 +126,7 @@ export function Header({ user }: HeaderProps) {
<ThemeToggle />
{user ? (
<DropdownMenu>
<DropdownMenu modal={false}>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="relative h-8 w-8 rounded-full">
<Avatar className="h-8 w-8">
components/video-page-content.tsx
+466 -455
View File
File diff suppressed because it is too large Load Diff