From b894cba2d16bfda07025e5f7ae1413cc5c522cf4 Mon Sep 17 00:00:00 2001
From: Seongmin Lee <git@boltless.me>
Date: Mon, 15 Jun 2026 09:35:32 +0900
Subject: [PATCH] appview/pages/templates: restyle

Signed-off-by: Seongmin Lee <git@boltless.me>
---
 appview/accountmigration/accountmigration.go  |  26 +++-
 appview/pages/pages.go                        |   1 +
 .../account/migrate/fragments/repoList.html   | 123 ++++++++++--------
 .../templates/account/migrate/fromGitHub.html | 108 +++++++++++----
 input.css                                     |  10 ++
 5 files changed, 191 insertions(+), 77 deletions(-)

diff --git a/appview/accountmigration/accountmigration.go b/appview/accountmigration/accountmigration.go
index d18d4260..71b2edc1 100644
--- a/appview/accountmigration/accountmigration.go
+++ b/appview/accountmigration/accountmigration.go
@@ -67,10 +67,32 @@ func (s *AccountMigration) migratePage(w http.ResponseWriter, r *http.Request) {
 			s.logger.Error("knots lookup failed", "did", user.Did, "err", err)
 			knots = nil
 		}
-		s.pages.AccountMigrateFromGitHub(w, pages.AccountMigrateFromGitHubParams{
+		if err := s.pages.AccountMigrateFromGitHub(w, pages.AccountMigrateFromGitHubParams{
 			BaseParams: pages.BaseParamsFromContext(r.Context()),
 			Knots:      knots,
-		})
+			Repos: []pages.RepoImportParams{
+				{
+					SourceKind:  pages.RepoImportSourceGitHub,
+					CloneUrl:    "https://github.com/boltlessengineer/rest.nvim",
+					Name:        "rest.nvim",
+					Description: "A very fast, powerful, extensible and asynchronous Neovim HTTP client written in Lua.",
+					Website:     "https://tangled.org",
+					Topics:      []string{"lua", "neovim", "curl", "http-client", "nvim", "neovim-plugin", "rest-client"},
+					Selected:    true,
+				},
+				{
+					SourceKind:  pages.RepoImportSourceGitHub,
+					CloneUrl:    "https://github.com/boltlessengineer/dot",
+					Name:        "super-long-repo-name-fddasfsafdsfasdfaasdfasdfasfasdfasfdasdfasdfsadfsadfasdfaasdfasfasdfdsafd00000s",
+					Description: "dotfiles",
+					Website:     "https://tangled.org",
+					Topics:      []string{},
+					Selected:    true,
+				},
+			},
+		}); err != nil {
+			s.logger.Error("failed to render", "err", err)
+		}
 	default:
 		s.pages.AccountMigrate(w, pages.AccountMigrateParams{
 			BaseParams: pages.BaseParamsFromContext(r.Context()),
diff --git a/appview/pages/pages.go b/appview/pages/pages.go
index 1bf555b4..1bf235d0 100644
--- a/appview/pages/pages.go
+++ b/appview/pages/pages.go
@@ -2058,6 +2058,7 @@ func (p *Pages) AccountMigrate(w io.Writer, params AccountMigrateParams) error {
 type AccountMigrateFromGitHubParams struct {
 	BaseParams
 	Knots []string
+	Repos []RepoImportParams
 }
 
 type RepoImportSource string
diff --git a/appview/pages/templates/account/migrate/fragments/repoList.html b/appview/pages/templates/account/migrate/fragments/repoList.html
index 8d1e1ed6..ec8d0987 100644
--- a/appview/pages/templates/account/migrate/fragments/repoList.html
+++ b/appview/pages/templates/account/migrate/fragments/repoList.html
@@ -1,67 +1,86 @@
 {{ define "account/migrate/fragments/repoList" }}
 {{ if not .Repos }}
-  <p class="text-gray-500 dark:text-gray-400">No importable repositories found.</p>
+  <p class="text-gray-500 dark:text-gray-400 mb-4">No importable repositories found.</p>
 {{ else }}
   <form action="/account/migrate/start" method="post" class="flex flex-col gap-3">
     <input type="hidden" name="count" value="{{ len .Repos }}" />
 
-    <div class="flex items-center gap-2 pb-2 border-b border-gray-200 dark:border-gray-700">
-      <button type="button"
-              onclick="document.querySelectorAll('input[name^=selected_]').forEach(c => c.checked = true)"
-              class="btn-flat">
-        select all
-      </button>
-      <button type="button"
-              onclick="document.querySelectorAll('input[name^=selected_]').forEach(c => c.checked = false)"
-              class="btn-flat">
-        clear
-      </button>
-    </div>
+    <div class="w-full border border-gray-200 dark:border-gray-700 rounded rouded-sm divide-y divide-gray-200 dark:divide-gray-700">
+      {{ range $i, $repo := .Repos }}
+        <details class="group">
+          <summary class="p-2 pl-3 flex items-center justify-between gap-2 cursor-pointer">
+            <div class="flex gap-2 min-w-0">
+              <label class="text-base py-0 min-w-0 flex items-center gap-2">
+                <input type="checkbox" id="selected_{{ $i }}" name="selected_{{ $i }}" value="1" {{ if $repo.Selected }}checked{{ end }} class="shrink-0" />
+                <span class="min-w-0 truncate">{{ $repo.Name }}</span>
+              </label>
+            </div>
 
-    {{ range $i, $repo := .Repos }}
-      <details class="border border-gray-200 dark:border-gray-700 rounded">
-        <summary class="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3 px-3 py-2 cursor-pointer list-none">
-          <div class="flex items-center gap-3 flex-1 min-w-0">
-            <input type="checkbox" name="selected_{{ $i }}" value="1" id="selected_{{ $i }}"
-                   onclick="event.stopPropagation()"
-                   {{ if $repo.Selected }}checked{{ end }} />
-            <div class="flex-1 min-w-0">
-              <div class="font-medium truncate">{{ $repo.Name }}</div>
-              <div class="text-xs text-gray-500 dark:text-gray-400 truncate">{{ $repo.CloneUrl }}</div>
+            <div class="flex items-center gap-2 shrink-0">
+              <!--
+              <span class="hidden sm:block text-gray-600 dark:text-gray-400">
+                Updated 2 days ago
+              </span>
+              -->
+              <div class="p-1">
+                {{ i "chevron-right" "size-4 group-open:hidden" }}
+                {{ i "chevron-down" "size-4 hidden group-open:block" }}
+              </div>
             </div>
-          </div>
-          <select name="knot_{{ $i }}"
-                  onclick="event.stopPropagation()"
-                  class="w-full sm:w-auto rounded border border-gray-300 bg-white dark:bg-gray-800 dark:text-white dark:border-gray-600">
-            {{ range $.Knots }}
-              <option value="{{ . }}">{{ . }}</option>
-            {{ end }}
-          </select>
-          <span class="hidden sm:inline text-gray-400 text-xs select-none">edit</span>
-        </summary>
+          </summary>
+          <div class="border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 pt-2 pb-4 px-3 flex flex-col gap-4">
+            <input type="hidden" name="website_{{ $i }}" value="{{ $repo.Website }}" />
+            <input type="hidden" name="topics_{{ $i }}" value="{{ join $repo.Topics "," }}" />
 
-        <div class="border-t border-gray-200 dark:border-gray-700 p-3 flex flex-col gap-2">
-          <input type="hidden" name="clone_url_{{ $i }}" value="{{ $repo.CloneUrl }}" />
-          <input type="hidden" name="website_{{ $i }}" value="{{ $repo.Website }}" />
-          <input type="hidden" name="topics_{{ $i }}" value="{{ join $repo.Topics "," }}" />
+            <label class="text-base py-0 space-y-1.5">
+              <span>Clone URL</span>
+              <input type="text" name="clone_url_{{ $i }}" value="{{ $repo.CloneUrl }}" disabled class="w-full px-2 py-1" />
+            </label>
 
-          <label class="flex flex-col gap-1 text-sm">
-            <span class="text-xs uppercase text-gray-500">Repository name</span>
-            <input type="text" name="name_{{ $i }}" value="{{ $repo.Name }}" required
-                   class="border border-gray-300 dark:border-gray-700 rounded px-2 py-1 bg-transparent" />
-          </label>
+            <label class="text-base py-0 space-y-1.5">
+              <span>Name</span>
+              <input type="text" name="name_{{ $i }}" value="{{ $repo.Name }}" required placeholder="repository-name" class="bg-white dark:bg-gray-900 w-full px-2 py-1" />
+            </label>
 
-          <label class="flex flex-col gap-1 text-sm">
-            <span class="text-xs uppercase text-gray-500">Description</span>
-            <input type="text" name="description_{{ $i }}" value="{{ $repo.Description }}" maxlength="140"
-                   class="border border-gray-300 dark:border-gray-700 rounded px-2 py-1 bg-transparent" />
-          </label>
-        </div>
-      </details>
-    {{ end }}
+            <label class="text-base py-0 space-y-1.5">
+              <span>Description</span>
+              <textarea
+                name="description_{{ $i }}"
+                placeholder="repository description"
+                class="bg-white dark:bg-gray-900 w-full px-2 py-1"
+              >{{ $repo.Description }}</textarea>
+            </label>
 
-    <div class="pt-3">
-      <button type="submit" class="btn">Start migration</button>
+            <fieldset class="space-y-1">
+              <legend class="text-base">Select a knot to migrate into</legend>
+              <div class="w-full space-y-2">
+                {{ range $.Knots }}
+                  <label class="py-0 block flex items-center gap-2">
+                    <input type="radio" name="knot_{{ $i }}" value="{{ . }}" required {{if eq (len $.Knots) 1}}checked{{end}} />
+                    <span class="lowercase py-0.5">{{ . }}</span>
+                  </label>
+                {{ else }}
+                  <p class="dark:text-white">No knots available.</p>
+                {{ end }}
+              </div>
+            </fieldset>
+          </div>
+        </details>
+      {{ end }}
+    </div>
+
+    <div class="pt-3 flex justify-end">
+      <button type="submit" class="btn-create flex items-center gap-2" {{ if (not .Repos) }}disabled{{ end }}>
+        {{ i "import" "size-4" }}
+        {{ if gt (len .Repos) 1 }}
+          Migrate {{ len .Repos }} Repositories
+        {{ else }}
+          Migrate Repository
+        {{ end }}
+        <span id="spinner" class="group">
+          {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
+        </span>
+      </button>
     </div>
   </form>
 {{ end }}
diff --git a/appview/pages/templates/account/migrate/fromGitHub.html b/appview/pages/templates/account/migrate/fromGitHub.html
index 0eebb48f..93815b17 100644
--- a/appview/pages/templates/account/migrate/fromGitHub.html
+++ b/appview/pages/templates/account/migrate/fromGitHub.html
@@ -1,28 +1,21 @@
-{{ define "title" }}Migrate from GitHub{{ end }}
+{{ define "title" }}Migrate repositories from GitHub{{ end }}
 
 {{ define "content" }}
-  <div class="p-6">
-    <p class="text-xl font-bold dark:text-white">Migrate from GitHub</p>
-    <p class="text-gray-500 dark:text-gray-400 pb-2">
-      Enter a GitHub username to list their public repositories.
-    </p>
+  <div class="mt-6 mb-4">
+    <h1 class="font-medium">
+      {{ i "import" "size-5 inline m-0.5" }}
+      Migrate repositories
+    </h1>
   </div>
-  <div class="bg-white dark:bg-gray-800 p-6 rounded w-full mx-auto drop-shadow-sm dark:text-white flex flex-col gap-4">
-    <form
-      hx-post="/account/migrate/listGitHubRepos"
-      hx-target="#source-repos"
-      hx-swap="innerHTML"
-      class="flex flex-wrap gap-2 items-center"
-    >
-      <input
-        type="text"
-        name="username"
-        required
-        placeholder="GitHub username"
-        class="border border-gray-300 dark:border-gray-700 rounded px-2 py-1 bg-transparent flex-1 min-w-0"
-      />
-      <button type="submit" class="btn">Load repos</button>
-    </form>
+  <div class="flex gap-3 p-3 my-4 rounded-md bg-yellow-50 dark:bg-yellow-900/50">
+    <div class="flex items-center px-1 text-yellow-700 dark:text-yellow-400">
+      {{ i "badge-info" "size-6" }}
+    </div>
+    <p>Migration covers your repos and commit history.<br>Issues and PRs aren't part of the import yet.</p>
+  </div>
+  <div class="bg-white dark:bg-gray-800 p-8 pb-0 rounded w-full mx-auto drop-shadow-sm dark:text-white">
+    {{ template "step-1" . }}
+    {{ template "step-2" . }}
 
     <span id="migrate-error" class="error"></span>
 
@@ -32,6 +25,75 @@
       </p>
     {{ end }}
 
-    <div id="source-repos"></div>
+  </div>
+{{ end }}
+
+{{ define "step-1" }}
+  <div class="flex relative border-l border-gray-200 dark:border-gray-700 ml-3 pl-7">
+    <div class="absolute -left-3 -top-0">
+      {{ template "numberCircle" 1 }}
+    </div>
+
+    <!-- Content column -->
+    <form
+      hx-post="/account/migrate/listGitHubRepos"
+      hx-target="#source-repos"
+      hx-swap="innerHTML"
+      class="flex-1 min-w-0 pb-12 space-y-3"
+    >
+
+      <h2 class="text-lg font-semibold uppercase dark:text-white">Connect Your Account</h2>
+      <div class="flex gap-3 w-full">
+        <input
+          id="username"
+          type="text"
+          name="username"
+          required
+          placeholder="github-username"
+          class="flex-1 py-2"
+        />
+        <button type="submit" class="btn">
+          Load repos
+          {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
+        </button>
+      </div>
+    </form>
+  </div>
+{{ end }}
+
+{{ define "step-2" }}
+  <div class="flex relative border-l border-gray-200 dark:border-gray-700 ml-3 pl-7">
+    <div class="absolute -left-3 -top-0">
+      {{ template "numberCircle" 2 }}
+    </div>
+
+    <!-- Content column -->
+    <div class="flex-1 min-w-0 pb-12 space-y-3">
+      <div class="flex flex-wrap items-center justify-between gap-3">
+        <h2 class="text-lg font-semibold uppercase">Choose &amp; Configure Repositories</h2>
+        <div class="ml-auto h-7 flex items-center">
+          <button
+            class="btn-flat flex items-center gap-2"
+            onclick="document.querySelectorAll('input[name^=selected_]').forEach(c => c.checked = !c.checked)"
+          >
+            {{ i "check-check" "size-4" }}
+            Select all repositories
+          </button>
+        </div>
+      </div>
+      <div id="source-repos">
+        <!--
+        <p class="text-gray-500 dark:text-gray-400 mb-4">No repositories yet, connect your account first</p>
+        -->
+
+        {{ template "account/migrate/fragments/repoList" . }}
+      </div>
+    </div>
+  </div>
+{{ end }}
+
+{{ define "numberCircle" }}
+  <div class="size-7 bg-gray-200 dark:bg-gray-600 rounded-full flex items-center justify-center font-medium">
+    {{.}}
   </div>
 {{ end }}
diff --git a/input.css b/input.css
index c0ebd482..aea6883c 100644
--- a/input.css
+++ b/input.css
@@ -109,6 +109,16 @@
             focus:outline-none focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-500;
         }
 
+        input:disabled,
+        input:readonly,
+        textarea:disabled,
+        textarea:readonly {
+            @apply bg-gray-100 dark:bg-gray-900
+            text-gray-500 dark:text-gray-500
+            border-gray-200 dark:border-gray-700
+            cursor-not-allowed;
+        }
+
         input[type="checkbox"] {
             @apply appearance-none size-4 p-0 rounded
             bg-transparent border border-gray-200
-- 
2.51.2