fix: tighten import page layout — denser rows, inline metadata, smaller buttons

6060 </svelte:head>
6161 
6262 <section>
63-	<div class="mb-6">
64-		<h1 class="mb-1 text-lg font-semibold text-ink">Import from Tangled</h1>
65-		<p class="text-[13px] text-caption">
66-			Bring your Tangled repositories into Cospan for schema-aware version control.
67-		</p>
63+	<div class="mb-5 flex items-end justify-between">
64+		<div>
65+			<h1 class="mb-1 text-lg font-semibold text-ink">Import from Tangled</h1>
66+			<p class="text-[13px] text-caption">Bring repositories into Cospan for schema-aware version control.</p>
67+		</div>
68+		{#if !auth.authenticated}
69+			<span class="text-[12px] text-ghost">Sign in to import your repos</span>
70+		{/if}
6871 	</div>
6972 
70-	<!-- Your repos section -->
71-	{#if auth.authenticated}
72-		{#if myRepos().length > 0}
73-			<div class="mb-8">
74-				<h2 class="mb-3 text-[13px] font-semibold uppercase tracking-wide text-ink">Your Tangled repos</h2>
75-				<div class="divide-y divide-line/40 rounded-lg border border-line/60 bg-ground">
76-					{#each myRepos() as repo (repo.did + '/' + repo.name)}
77-						<div class="flex items-center justify-between gap-4 px-4 py-3">
78-							<div class="min-w-0 flex-1">
79-								<div class="flex items-center gap-2">
80-									<a href="/{repo.did}/{repo.name}" class="font-mono text-[13px] font-medium text-ink hover:text-focus-bright transition-colors">
81-										{repo.name}
82-									</a>
83-									{#if repo.description}
84-										<span class="truncate text-[12px] text-ghost">{repo.description}</span>
85-									{/if}
86-								</div>
87-							</div>
88-							<button class="shrink-0 rounded-md bg-focus/10 border border-focus/30 px-3 py-1.5 text-[12px] font-medium text-focus-bright transition-all hover:bg-focus/15 hover:border-focus">
89-								Import
90-							</button>
91-						</div>
92-					{/each}
73+	<!-- Your repos (if logged in and have any) -->
74+	{#if auth.authenticated && myRepos().length > 0}
75+		<div class="mb-6">
76+			<div class="mb-2 text-[11px] font-medium uppercase tracking-wider text-ghost">Your repos</div>
77+			{#each myRepos() as repo (repo.did + '/' + repo.name)}
78+				<div class="flex items-center justify-between gap-3 rounded-md border border-focus/20 bg-focus/[0.03] px-3 py-2 mb-1.5">
79+					<div class="flex items-center gap-2 min-w-0">
80+						<span class="font-mono text-[13px] font-medium text-ink">{repo.name}</span>
81+						{#if repo.description}
82+							<span class="truncate text-[12px] text-ghost">· {repo.description}</span>
83+						{/if}
84+					</div>
85+					<button class="shrink-0 rounded-md bg-focus px-3 py-1 text-[12px] font-medium text-white transition-all hover:bg-focus-bright">
86+						Import
87+					</button>
9388 				</div>
94-			</div>
95-		{:else}
96-			<div class="mb-8 rounded-lg border border-line/40 bg-ground px-4 py-6 text-center">
97-				<p class="text-[13px] text-caption">You don't have any Tangled repositories yet.</p>
98-				<p class="mt-1 text-[12px] text-ghost">Create a repo on <a href="https://tangled.sh" target="_blank" rel="noopener" class="text-focus-bright hover:underline">tangled.sh</a> to import it here.</p>
99-			</div>
100-		{/if}
101-	{:else}
102-		<div class="mb-8 rounded-lg border border-line/40 bg-ground px-4 py-6 text-center">
103-			<p class="text-[13px] text-caption">Sign in to import your Tangled repositories.</p>
89+			{/each}
10490 		</div>
10591 	{/if}
10692 
107-	<!-- All Tangled repos -->
108-	<div>
109-		<div class="mb-3 flex items-center justify-between gap-3">
110-			<h2 class="text-[13px] font-semibold uppercase tracking-wide text-ink">Browse all</h2>
111-			<span class="text-[11px] text-ghost">{otherRepos().length} repos</span>
112-		</div>
113-
114-		<div class="relative mb-4">
115-			<svg class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-ghost" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
93+	<!-- Search + count -->
94+	<div class="mb-3 flex items-center gap-3">
95+		<div class="relative flex-1">
96+			<svg class="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-ghost" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
11697 				<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
11798 			</svg>
11899 			<input
119100 				type="text"
120101 				bind:value={searchQuery}
121102 				placeholder="Search repos…"
122-				class="w-full rounded-md border border-line bg-surface py-2 pl-10 pr-3 text-[13px] text-ink placeholder:text-ghost focus:border-focus/50 focus:outline-none transition-colors"
103+				class="w-full rounded-md border border-line bg-surface py-1.5 pl-9 pr-3 text-[13px] text-ink placeholder:text-ghost focus:border-focus/50 focus:outline-none transition-colors"
123104 			/>
124105 		</div>
106+		<span class="text-[11px] text-ghost whitespace-nowrap">{otherRepos().length} repos</span>
107+	</div>
125108 
126-		{#if otherRepos().length === 0}
127-			<div class="flex flex-col items-center justify-center py-16 text-center">
128-				{#if searchQuery.trim()}
129-					<p class="text-sm text-caption">No repos matching "{searchQuery}"</p>
130-				{:else}
131-					<div class="mb-4 text-ghost">
132-						<svg class="mx-auto h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
133-							<path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
134-						</svg>
135-					</div>
136-					<p class="text-sm text-caption">No Tangled repositories found yet.</p>
137-					<p class="mt-1 text-xs text-ghost">Repositories are being backfilled from the network.</p>
138-				{/if}
139-			</div>
140-		{:else}
141-			<div class="divide-y divide-line/40">
142-				{#each otherRepos() as repo (repo.did + '/' + repo.name)}
143-					<div class="flex items-start justify-between gap-4 py-3">
144-						<div class="min-w-0 flex-1">
145-							<div class="flex items-center gap-2">
146-								<a href="/{repo.did}/{repo.name}" class="font-mono text-[13px] font-medium text-ink hover:text-focus-bright transition-colors">
147-									{getHandle(repo.did)}/{repo.name}
148-								</a>
149-								{#if repo.protocol}
150-									<span class="text-[11px] text-ghost">{repo.protocol}</span>
151-								{:else}
152-									<span class="text-[11px] text-ghost">git</span>
153-								{/if}
154-							</div>
155-							{#if repo.description}
156-								<p class="mt-0.5 line-clamp-1 text-[12px] text-caption">{repo.description}</p>
109+	<!-- Repo list -->
110+	{#if otherRepos().length === 0}
111+		<div class="py-16 text-center">
112+			{#if searchQuery.trim()}
113+				<p class="text-[13px] text-caption">No repos matching "{searchQuery}"</p>
114+			{:else}
115+				<p class="text-[13px] text-caption">No Tangled repositories found yet.</p>
116+				<p class="mt-1 text-[12px] text-ghost">Repositories are being backfilled from the network.</p>
117+			{/if}
118+		</div>
119+	{:else}
120+		<div class="divide-y divide-line/30">
121+			{#each otherRepos() as repo (repo.did + '/' + repo.name)}
122+				<div class="flex items-center justify-between gap-4 py-2.5">
123+					<div class="min-w-0 flex-1">
124+						<div class="flex items-center gap-2">
125+							<a href="/{repo.did}/{repo.name}" class="font-mono text-[13px] font-medium text-ink hover:text-focus-bright transition-colors">
126+								{getHandle(repo.did)}<span class="text-ghost">/</span>{repo.name}
127+							</a>
128+							<span class="text-[11px] text-ghost">{repo.protocol || 'git'}</span>
129+							{#if repo.starCount > 0}
130+								<span class="text-[11px] text-ghost">★ {repo.starCount}</span>
157131 							{/if}
158-							<div class="mt-1 flex items-center gap-3 text-[11px] text-ghost">
159-								{#if repo.starCount > 0}
160-									<span>★ {repo.starCount}</span>
161-								{/if}
162-								<a href={tangledUrl(repo)} target="_blank" rel="noopener" class="hover:text-caption transition-colors">
163-									View on Tangled ↗
164-								</a>
165-							</div>
132+							<a href={tangledUrl(repo)} target="_blank" rel="noopener" class="text-[11px] text-ghost hover:text-caption transition-colors">↗</a>
166133 						</div>
167-
168-						<button class="shrink-0 rounded-md border border-line px-3 py-1.5 text-[12px] font-medium text-caption transition-all hover:border-line-bright hover:text-ink">
169-							Fork to Cospan
170-						</button>
134+						{#if repo.description}
135+							<p class="mt-0.5 truncate text-[12px] text-ghost">{repo.description}</p>
136+						{/if}
171137 					</div>
172-				{/each}
173-			</div>
174-		{/if}
175-	</div>
138+					<button class="shrink-0 rounded-md border border-line px-2.5 py-1 text-[11px] font-medium text-caption transition-all hover:border-line-bright hover:text-ink">
139+						Fork
140+					</button>
141+				</div>
142+			{/each}
143+		</div>
144+	{/if}
176145 </section>