Skip to content

visual improvements #222

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
ctate merged 6 commits into from
Jan 23, 2026
Merged

visual improvements #222

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8832a36
shared header
ctate Jan 23, 2026
496b892
move repo
ctate Jan 23, 2026
18a6f4d
remove "Preview"
ctate Jan 23, 2026
63effad
visual improvements
ctate Jan 23, 2026
237082f
address feedback
ctate Jan 23, 2026
e48503b
fix resizer
ctate Jan 23, 2026
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
42 changes: 3 additions & 39 deletions app/repos/new/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,13 @@
import { Textarea } from '@/components/ui/textarea'
import { Switch } from '@/components/ui/switch'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { RefreshCw } from 'lucide-react'
import { RefreshCw, File } from 'lucide-react'
import { useState, useEffect } from 'react'
import { toast } from 'sonner'
import { useRouter, useSearchParams } from 'next/navigation'
import { PageHeader } from '@/components/page-header'
import { useTasks } from '@/components/app-layout'
import { User } from '@/components/auth/user'
import { GitHubStarsButton } from '@/components/github-stars-button'
import { VERCEL_DEPLOY_URL } from '@/lib/constants'
import { SharedHeader } from '@/components/shared-header'
import { useAtomValue } from 'jotai'
import { sessionAtom } from '@/lib/atoms/session'
import { File } from 'lucide-react'

// Template configuration
const REPO_TEMPLATES = [
Expand Down Expand Up @@ -73,7 +68,6 @@
const router = useRouter()
const searchParams = useSearchParams()
const ownerParam = searchParams.get('owner') || ''
const { toggleSidebar } = useTasks()
const session = useAtomValue(sessionAtom)

const [isCreatingRepo, setIsCreatingRepo] = useState(false)
Expand Down Expand Up @@ -177,37 +171,7 @@
return (
<div className="flex-1 bg-background">
<div className="p-3">
<PageHeader
showMobileMenu={true}
onToggleMobileMenu={toggleSidebar}
actions={
<div className="flex items-center gap-2 h-8">
<GitHubStarsButton initialStars={1200} />
{/* Deploy to Vercel Button */}
<Button
asChild
variant="outline"
size="sm"
className="h-8 sm:px-3 px-0 sm:w-auto w-8 bg-black text-white border-black hover:bg-black/90 dark:bg-white dark:text-black dark:border-white dark:hover:bg-white/90"
>
<a
href={VERCEL_DEPLOY_URL}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-1.5"
>
<svg viewBox="0 0 76 65" className="h-3 w-3" fill="currentColor">
<path d="M37.5274 0L75.0548 65H0L37.5274 0Z" />
</svg>
<span className="hidden sm:inline">Deploy Your Own</span>
</a>
</Button>

{/* User Authentication */}
<User user={session.user} authProvider={session.authProvider} />
</div>
}
/>
<SharedHeader />
</div>

<div className="px-3 pb-3">
Expand Down Expand Up @@ -235,7 +199,7 @@
{session.user && (
<SelectItem value={session.user.username}>
<div className="flex items-center gap-2">
<img src={session.user.avatar} alt={session.user.username} className="w-5 h-5 rounded-full" />

Check warning on line 202 in app/repos/new/page.tsx

View workflow job for this annotation

GitHub Actions / checks 

Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
<span>{session.user.username}</span>
</div>
</SelectItem>
Expand All @@ -243,7 +207,7 @@
{organizations.map((org) => (
<SelectItem key={org.login} value={org.login}>
<div className="flex items-center gap-2">
<img src={org.avatar_url} alt={org.login} className="w-5 h-5 rounded-full" />

Check warning on line 210 in app/repos/new/page.tsx

View workflow job for this annotation

GitHub Actions / checks 

Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
<span>{org.login}</span>
</div>
</SelectItem>
Expand Down Expand Up @@ -308,12 +272,12 @@
<File className="w-7 h-7" strokeWidth={1} />
) : (
<>
<img

Check warning on line 275 in app/repos/new/page.tsx

View workflow job for this annotation

GitHub Actions / checks 

Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
src={template.imageLight}
alt={template.name}
className="max-w-[75%] max-h-[75%] w-auto h-auto object-contain dark:hidden"
/>
<img

Check warning on line 280 in app/repos/new/page.tsx

View workflow job for this annotation

GitHub Actions / checks 

Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
src={template.imageDark}
alt={template.name}
className="max-w-[75%] max-h-[75%] w-auto h-auto object-contain hidden dark:block"
Expand Down Expand Up @@ -353,12 +317,12 @@
<File className="w-12 h-12" strokeWidth={1} />
) : (
<>
<img

Check warning on line 320 in app/repos/new/page.tsx

View workflow job for this annotation

GitHub Actions / checks 

Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
src={template.imageLight}
alt={template.name}
className="max-w-[75%] max-h-[75%] w-auto h-auto object-contain dark:hidden"
/>
<img

Check warning on line 325 in app/repos/new/page.tsx

View workflow job for this annotation

GitHub Actions / checks 

Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
src={template.imageDark}
alt={template.name}
className="max-w-[75%] max-h-[75%] w-auto h-auto object-contain hidden dark:block"
Expand Down
33 changes: 2 additions & 31 deletions app/tasks/[taskId]/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,13 @@
'use client'

import { PageHeader } from '@/components/page-header'
import { useTasks } from '@/components/app-layout'
import { Button } from '@/components/ui/button'
import { SharedHeader } from '@/components/shared-header'
import { Loader2 } from 'lucide-react'
import { VERCEL_DEPLOY_URL } from '@/lib/constants'
import { GitHubStarsButton } from '@/components/github-stars-button'

export default function TaskLoading() {
const { toggleSidebar } = useTasks()

// Placeholder actions for loading state - no user avatar to prevent flash
const loadingActions = (
<div className="flex items-center gap-2 h-8">
<GitHubStarsButton />
{/* Deploy to Vercel Button */}
<Button
asChild
variant="outline"
size="sm"
className="h-8 sm:px-3 px-0 sm:w-auto w-8 bg-black text-white border-black hover:bg-black/90 dark:bg-white dark:text-black dark:border-white dark:hover:bg-white/90"
>
<a href={VERCEL_DEPLOY_URL} target="_blank" rel="noopener noreferrer" className="flex items-center gap-1.5">
<svg viewBox="0 0 76 65" className="h-3 w-3" fill="currentColor">
<path d="M37.5274 0L75.0548 65H0L37.5274 0Z" />
</svg>
<span className="hidden sm:inline">Deploy Your Own</span>
</a>
</Button>
{/* Empty spacer to reserve space for user avatar */}
<div className="w-8" />
</div>
)

return (
<div className="flex-1 bg-background flex flex-col">
<div className="p-3">
<PageHeader showMobileMenu={true} onToggleMobileMenu={toggleSidebar} actions={loadingActions} />
<SharedHeader />
</div>
<div className="flex-1 flex items-center justify-center">
<div className="text-center">
Expand Down
6 changes: 3 additions & 3 deletions components/file-browser.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@
}

type ViewModeKey = 'local' | 'remote' | 'all' | 'all-local'
const currentViewData = (state[viewMode as ViewModeKey] as ViewModeData | undefined) || {

Check warning on line 152 in components/file-browser.tsx

View workflow job for this annotation

GitHub Actions / checks 

The 'currentViewData' logical expression could make the dependencies of useCallback Hook (at line 621) change on every render. To fix this, wrap the initialization of 'currentViewData' in its own useMemo() Hook

Check warning on line 152 in components/file-browser.tsx

View workflow job for this annotation

GitHub Actions / checks 

The 'currentViewData' logical expression could make the dependencies of useCallback Hook (at line 542) change on every render. To fix this, wrap the initialization of 'currentViewData' in its own useMemo() Hook

Check warning on line 152 in components/file-browser.tsx

View workflow job for this annotation

GitHub Actions / checks 

The 'currentViewData' logical expression could make the dependencies of useCallback Hook (at line 424) change on every render. To fix this, wrap the initialization of 'currentViewData' in its own useMemo() Hook

Check warning on line 152 in components/file-browser.tsx

View workflow job for this annotation

GitHub Actions / checks 

The 'currentViewData' logical expression could make the dependencies of useCallback Hook (at line 366) change on every render. To fix this, wrap the initialization of 'currentViewData' in its own useMemo() Hook
files: [],
fileTree: {},
expandedFolders: new Set<string>(),
Expand Down Expand Up @@ -1347,9 +1347,9 @@
return (
<div className="flex flex-col h-full">
{!hideHeader && (
<div>
<div className="border-b">
{/* Main Navigation Row */}
<div className="py-2 flex items-center justify-between h-[46px]">
<div className="py-2 px-3 flex items-center justify-between h-[46px]">
{/* Changes / Files Navigation */}
<div className="flex items-center gap-1">
<button
Expand Down Expand Up @@ -1443,7 +1443,7 @@
onOpenChange={(open) => !open && setContextMenuFile(null)}
>
<div
className={`py-2 min-h-full outline-none rounded-sm ${dropTarget === '__root__' ? 'bg-blue-500/10' : ''}`}
className={`py-2 px-1 min-h-full outline-none ${dropTarget === '__root__' ? 'bg-blue-500/10' : ''}`}
onContextMenu={(e) => {
if ((viewMode === 'local' || viewMode === 'all-local') && e.target === e.currentTarget) {
handleContextMenu(e, '__root__')
Expand Down
Loading