phase 3 bug fixing

frontend/src/pages/ReposPage.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { useRepos, useCreateRepo } from '../api/queries/repos'
 import { RepoCard } from '../components/repos/RepoCard'
 import { RepoListSkeleton } from '../ui/Skeleton'
+import { Link } from 'react-router-dom'
 
 export default function ReposPage() {
   const { data: repos, isLoading, isError } = useRepos()
@@ -32,9 +33,12 @@ export default function ReposPage() {
       {isLoading ? (
         <RepoListSkeleton />
       ) : isError ? (
-        <p className="text-sm text-[#DE350B]">Failed to load repositories.</p>
+        <NotSignedIn />
       ) : !repos?.length ? (
-        <p className="text-sm text-[#5E6C84] py-8 text-center">No repositories yet.</p>
+        <div className="py-12 text-center text-sm text-[#5E6C84]">
+          No repositories yet.{' '}
+          <button onClick={() => setShowCreate(true)} className="text-[#0052CC] hover:underline">Create your first one.</button>
+        </div>
       ) : (
         <div className="flex flex-col gap-2">
           {repos.map(r => <RepoCard key={r.id} repo={r} />)}
@@ -44,6 +48,23 @@ export default function ReposPage() {
   )
 }
 
+function NotSignedIn() {
+  return (
+    <div className="flex flex-col items-center justify-center py-12 border border-dashed border-[#DFE1E6] rounded text-center gap-3">
+      <svg width="36" height="36" fill="none" stroke="#97A0AF" strokeWidth="1.5" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+      </svg>
+      <div>
+        <p className="text-sm font-medium text-[#172B4D]">Sign in to see your repositories</p>
+        <p className="text-xs text-[#5E6C84] mt-1">You need to be signed in to view and create repositories.</p>
+      </div>
+      <Link to="/login" className="px-4 py-2 rounded bg-[#0052CC] text-white text-sm font-medium hover:bg-[#0065FF] min-h-[44px] flex items-center">
+        Sign in
+      </Link>
+    </div>
+  )
+}
+
 function CreateRepoForm({ onClose }: { onClose: () => void }) {
   const createRepo = useCreateRepo()
   const [name, setName] = useState('')