From b7bbaab784832e494e959f36958f4fc6a0d46019 Mon Sep 17 00:00:00 2001
From: Mat Manna <matmanna@outlook.com>
Date: Sat, 4 Apr 2026 20:37:44 -0400
Subject: [PATCH 01/10] feat: overhaul projects page ux

---
 app/javascript/pages/Projects/Index.svelte | 683 +++++++++++++++------
 1 file changed, 507 insertions(+), 176 deletions(-)

diff --git a/app/javascript/pages/Projects/Index.svelte b/app/javascript/pages/Projects/Index.svelte
index 62eefa3c1..498124897 100644
--- a/app/javascript/pages/Projects/Index.svelte
+++ b/app/javascript/pages/Projects/Index.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { Link, router } from "@inertiajs/svelte";
+  import { router } from "@inertiajs/svelte";
   import { onMount } from "svelte";
   import Button from "../../components/Button.svelte";
   import Modal from "../../components/Modal.svelte";
+  import Select from "../../components/Select.svelte";
   import IntervalSelect from "../Home/signedIn/IntervalSelect.svelte";
 
   type RepositorySummary = {
@@ -78,12 +79,57 @@
     description: string;
     confirmLabel: string;
   } | null>(null);
+  let viewMode = $state<"grid" | "list">("grid");
+  let searchQuery = $state("");
+  let sortBy = $state<"most_time" | "least_time" | "name_az" | "name_za">(
+    "most_time",
+  );
+  let archivalStatus = $state("active");
 
   const skeletonCount = $derived.by(() => {
     const safeCount = Number.isFinite(total_projects) ? total_projects : 0;
     return Math.min(Math.max(safeCount, 4), 10);
   });
 
+  const filteredAndSortedProjects = $derived.by(() => {
+    if (!projects_data?.projects) return [];
+
+    let filtered = projects_data.projects.filter((project) => {
+      const searchLower = searchQuery.toLowerCase();
+      return (
+        project.name.toLowerCase().includes(searchLower) ||
+        (project.repo_url?.toLowerCase().includes(searchLower) ?? false)
+      );
+    });
+
+    return filtered.sort((a, b) => {
+      switch (sortBy) {
+        case "name_az":
+          return a.name.localeCompare(b.name);
+        case "name_za":
+          return b.name.localeCompare(a.name);
+        case "least_time":
+          return a.duration_seconds - b.duration_seconds;
+        case "most_time":
+          return b.duration_seconds - a.duration_seconds;
+
+        default:
+          return b.duration_seconds - a.duration_seconds;
+      }
+    });
+  });
+
+  $effect(() => {
+    archivalStatus = show_archived ? "archived" : "active";
+  });
+
+  $effect(() => {
+    const expectedValue = show_archived ? "archived" : "active";
+    if (archivalStatus !== expectedValue) {
+      changeArchivedStatus(archivalStatus);
+    }
+  });
+
   onMount(() => {
     csrfToken =
       document
@@ -126,6 +172,12 @@
     });
   };
 
+  const changeArchivedStatus = (nextValue: string) => {
+    window.location.href = buildProjectsPath({
+      nextShowArchived: nextValue === "archived",
+    });
+  };
+
   const openMappingEditor = (project: ProjectCard) => {
     editingProjectKey = project.project_key || null;
     repoUrlDraft = project.repo_url || "";
@@ -182,26 +234,8 @@
 </svelte:head>
 
 <div class="mx-auto max-w-7xl">
-  <div class="mb-4 flex flex-wrap items-center justify-between gap-4">
-    <div class="flex items-center gap-4">
-      <h1 class="text-3xl font-bold text-surface-content">My Projects</h1>
-      {#if archived_count > 0}
-        <div class="project-toggle-group">
-          <Link
-            href={buildProjectsPath({ nextShowArchived: false })}
-            class={`project-toggle-btn ${!show_archived ? "active" : "inactive"}`}
-          >
-            Active
-          </Link>
-          <Link
-            href={buildProjectsPath({ nextShowArchived: true })}
-            class={`project-toggle-btn ${show_archived ? "active" : "inactive"}`}
-          >
-            Archived
-          </Link>
-        </div>
-      {/if}
-    </div>
+  <div class="mb-4 flex flex-wrap items-center gap-4">
+    <h1 class="text-3xl font-bold text-surface-content">My Projects</h1>
   </div>
 
   {#if !github_connected}
@@ -221,16 +255,130 @@
     </div>
   {/if}
 
-  <div class="sm:max-w-3xs">
-    <IntervalSelect
-      from={from || ""}
-      selected={interval || ""}
-      to={to || ""}
-      onchange={changeInterval}
-    />
-  </div>
-
   {#if projects_data}
+    <div class="mt-6 flex flex-wrap items-end gap-3">
+      <div class="min-w-0 flex-[0_1_16rem]">
+        <span
+          class="mb-1.5 block text-xs font-medium uppercase tracking-wider text-secondary/80"
+        >
+          Search Projects
+        </span>
+        <input
+          id="project-search"
+          type="text"
+          placeholder="Search by name or URL..."
+          bind:value={searchQuery}
+          class="w-full rounded-md border border-surface-200 bg-darker px-3 py-2 text-left text-sm text-surface-content transition-all duration-200 hover:border-surface-300 focus-visible:border-primary/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/45 focus-visible:ring-offset-2 focus-visible:ring-offset-surface placeholder-surface-content/60"
+        />
+      </div>
+
+      <div class="min-w-0 flex-[0_1_12rem]">
+        <IntervalSelect
+          from={from || ""}
+          selected={interval || ""}
+          to={to || ""}
+          onchange={changeInterval}
+        />
+      </div>
+
+      <div class="min-w-0 flex-[0_1_12rem]">
+        <span
+          class="mb-1.5 block text-xs font-medium uppercase tracking-wider text-secondary/80"
+        >
+          Archival Status
+        </span>
+        <Select
+          id="archival-status"
+          bind:value={archivalStatus}
+          items={[
+            { value: "active", label: "Active" },
+            { value: "archived", label: "Archived" },
+          ]}
+          class="bg-surface-100"
+        />
+      </div>
+
+      {#if projects_data.projects && projects_data.projects.length > 0}
+        <div class="min-w-0 flex-[0_1_18rem]">
+          <div class="flex min-w-0 items-end gap-3">
+            <div class="min-w-0 flex-[0_1_12rem]">
+              <div class="mb-1.5 flex items-end gap-3">
+                <span
+                  class="block text-xs font-medium uppercase tracking-wider text-secondary/80"
+                >
+                  Sort
+                </span>
+              </div>
+              <Select
+                id="project-sort"
+                bind:value={sortBy}
+                items={[
+                  { value: "most_time", label: "Most time" },
+                  { value: "least_time", label: "Least time" },
+                  { value: "name_az", label: "Name (A-Z)" },
+                  { value: "name_za", label: "Name (Z-A)" },
+                ]}
+                class="bg-surface-100"
+              />
+            </div>
+            <div class="shrink-0 flex flex-col items-start">
+              <span
+                class="mb-1.5 block text-xs font-medium uppercase tracking-wider text-secondary/80"
+              >
+                View
+              </span>
+              <div
+                class="inline-flex shrink-0 gap-1 rounded-lg border border-surface-200 bg-surface-content/5 p-1"
+              >
+                <Button
+                  type="button"
+                  unstyled
+                  class={`inline-flex h-8 w-8 items-center justify-center rounded transition-colors ${
+                    viewMode === "grid"
+                      ? "bg-primary text-on-primary"
+                      : "text-surface-content/70 hover:bg-surface-content/10"
+                  }`}
+                  title="Grid view"
+                  onclick={() => (viewMode = "grid")}
+                >
+                  <svg
+                    class="h-4 w-4"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                    aria-hidden="true"
+                  >
+                    <path
+                      d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"
+                    />
+                  </svg>
+                </Button>
+                <Button
+                  type="button"
+                  unstyled
+                  class={`inline-flex h-8 w-8 items-center justify-center rounded transition-colors ${
+                    viewMode === "list"
+                      ? "bg-primary text-on-primary"
+                      : "text-surface-content/70 hover:bg-surface-content/10"
+                  }`}
+                  title="List view"
+                  onclick={() => (viewMode = "list")}
+                >
+                  <svg
+                    class="h-4 w-4"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                    aria-hidden="true"
+                  >
+                    <path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z" />
+                  </svg>
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      {/if}
+    </div>
+
     <section class="mt-6">
       <p class="text-lg text-surface-content">
         {#if projects_data.has_activity}
@@ -238,7 +386,10 @@
           <span class="font-semibold text-primary"
             >{projects_data.total_time_label}</span
           >
-          coding across {show_archived ? "archived" : "active"} projects.
+          coding across
+          <span class="font-semibold text-primary">{total_projects}</span>
+          {show_archived ? "archived" : "active"}
+          {total_projects === 1 ? "project" : "projects"}.
         {:else}
           You haven't logged any time for this interval yet.
         {/if}
@@ -254,15 +405,29 @@
               : "No active projects match this filter."}
           </p>
         </div>
+      {:else if filteredAndSortedProjects.length == 0}
+        <div
+          class="mt-4 rounded-xl border border-surface-200 bg-dark p-8 text-center"
+        >
+          <p class="text-muted">No projects match your search query.</p>
+        </div>
       {:else}
         <div
-          class="mt-6 grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-6"
+          class={viewMode === "grid"
+            ? "mt-6 grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-6"
+            : "mt-6 space-y-4"}
         >
-          {#each projects_data.projects as project (project.id)}
+          {#each filteredAndSortedProjects as project (project.id)}
             <article
-              class="flex h-full flex-col gap-4 rounded-xl border border-primary bg-dark p-6 shadow-xs backdrop-blur-sm transition-all duration-300"
+              class={viewMode === "grid"
+                ? "flex h-full flex-col gap-4 rounded-xl border border-primary bg-dark p-6 shadow-xs backdrop-blur-sm transition-all duration-300"
+                : "flex flex-col gap-4 rounded-xl border border-primary bg-dark p-6 shadow-xs backdrop-blur-sm transition-all duration-300 sm:flex-row sm:items-center sm:justify-between"}
             >
-              <div class="flex items-start justify-between gap-3">
+              <div
+                class={viewMode === "grid"
+                  ? "flex items-start justify-between gap-3"
+                  : "flex flex-1 items-center gap-3"}
+              >
                 <div class="min-w-0 flex-1">
                   <h3
                     class="truncate text-lg font-semibold text-surface-content"
@@ -270,13 +435,17 @@
                   >
                     {project.name}
                   </h3>
+
                   {#if project.repository?.stars}
                     <p
-                      class="mt-2 inline-flex items-center gap-1 text-sm text-yellow"
+                      class={viewMode === "grid"
+                        ? "mt-2 inline-flex items-center gap-1 text-sm text-yellow"
+                        : "mt-1 inline-flex items-center gap-1 text-sm text-yellow"}
                     >
                       <svg
                         class="h-4 w-4 fill-current"
                         viewBox="0 0 20 20"
+                        fill="currentColor"
                         aria-hidden="true"
                       >
                         <path
@@ -288,153 +457,315 @@
                   {/if}
                 </div>
 
-                <div class="flex shrink-0 items-center gap-2">
-                  {#if project.repository?.homepage}
-                    <a
-                      href={project.repository.homepage}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      title="View project website"
-                      class={cardActionClass}
-                    >
-                      <svg
-                        class="h-5 w-5"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
+                {#if viewMode === "grid"}
+                  <div class="flex shrink-0 items-center gap-2">
+                    {#if project.repository?.homepage}
+                      <a
+                        href={project.repository.homepage}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        title="View project website"
+                        class={cardActionClass}
                       >
-                        <path
+                        <svg
+                          class="h-5 w-5"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            fill="currentColor"
+                            d="M16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2m-5.15 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56M14.34 14H9.66c-.1-.66-.16-1.32-.16-2s.06-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2M12 19.96c-.83-1.2-1.5-2.53-1.91-3.96h3.82c-.41 1.43-1.08 2.76-1.91 3.96M8 8H5.08A7.92 7.92 0 0 1 9.4 4.44C8.8 5.55 8.35 6.75 8 8m-2.92 8H8c.35 1.25.8 2.45 1.4 3.56A8 8 0 0 1 5.08 16m-.82-2C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2M12 4.03c.83 1.2 1.5 2.54 1.91 3.97h-3.82c.41-1.43 1.08-2.77 1.91-3.97M18.92 8h-2.95a15.7 15.7 0 0 0-1.38-3.56c1.84.63 3.37 1.9 4.33 3.56M12 2C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2"
+                          />
+                        </svg>
+                      </a>
+                    {/if}
+
+                    {#if project.repo_url}
+                      <a
+                        href={project.repo_url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        title="View repository"
+                        class={cardActionClass}
+                      >
+                        <svg
+                          class="h-5 w-5"
                           fill="currentColor"
-                          d="M16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2m-5.15 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56M14.34 14H9.66c-.1-.66-.16-1.32-.16-2s.06-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2M12 19.96c-.83-1.2-1.5-2.53-1.91-3.96h3.82c-.41 1.43-1.08 2.76-1.91 3.96M8 8H5.08A7.92 7.92 0 0 1 9.4 4.44C8.8 5.55 8.35 6.75 8 8m-2.92 8H8c.35 1.25.8 2.45 1.4 3.56A8 8 0 0 1 5.08 16m-.82-2C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2M12 4.03c.83 1.2 1.5 2.54 1.91 3.97h-3.82c.41-1.43 1.08-2.77 1.91-3.97M18.92 8h-2.95a15.7 15.7 0 0 0-1.38-3.56c1.84.63 3.37 1.9 4.33 3.56M12 2C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2"
-                        />
-                      </svg>
-                    </a>
-                  {/if}
-                  {#if project.repo_url}
-                    <a
-                      href={project.repo_url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      title="View repository"
-                      class={cardActionClass}
-                    >
-                      <svg
-                        class="h-5 w-5"
-                        fill="currentColor"
-                        viewBox="0 0 24 24"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            fill="currentColor"
+                            d="M2.6 10.59L8.38 4.8l1.69 1.7c-.24.85.15 1.78.93 2.23v5.54c-.6.34-1 .99-1 1.73a2 2 0 0 0 2 2a2 2 0 0 0 2-2c0-.74-.4-1.39-1-1.73V9.41l2.07 2.09c-.07.15-.07.32-.07.5a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2c-.18 0-.35 0-.5.07L13.93 7.5a1.98 1.98 0 0 0-1.15-2.34c-.43-.16-.88-.2-1.28-.09L9.8 3.38l.79-.78c.78-.79 2.04-.79 2.82 0l7.99 7.99c.79.78.79 2.04 0 2.82l-7.99 7.99c-.78.79-2.04.79-2.82 0L2.6 13.41c-.79-.78-.79-2.04 0-2.82"
+                          />
+                        </svg>
+                      </a>
+                    {/if}
+
+                    {#if project.manage_enabled}
+                      <Button
+                        type="button"
+                        unstyled
+                        class={cardActionClass}
+                        title={project.repo_url
+                          ? "Edit mapping"
+                          : "Link repository"}
+                        onclick={() => openMappingEditor(project)}
                       >
-                        <path
+                        <svg
+                          class="h-5 w-5"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                          aria-hidden="true"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M16.862 3.487a2.1 2.1 0 0 1 2.97 2.97L9.75 16.54 6 17.25l.71-3.75z"
+                          />
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M14.5 5.85l3.65 3.65"
+                          />
+                        </svg>
+                      </Button>
+                    {/if}
+
+                    {#if show_archived && project.unarchive_path}
+                      <Button
+                        type="button"
+                        unstyled
+                        class={cardActionClass}
+                        title="Restore project"
+                        onclick={() => openStatusChangeModal(project, true)}
+                      >
+                        <svg
+                          class="h-5 w-5"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                          aria-hidden="true"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M10 14l-3-3 3-3"
+                          />
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M7 11h9a4 4 0 0 1 0 8h-2"
+                          />
+                        </svg>
+                      </Button>
+                    {:else if !show_archived && project.archive_path}
+                      <Button
+                        type="button"
+                        unstyled
+                        class={cardActionClass}
+                        title="Archive project"
+                        onclick={() => openStatusChangeModal(project, false)}
+                      >
+                        <svg
+                          class="h-5 w-5"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                          aria-hidden="true"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M3 7h18l-2 11H5z"
+                          />
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M8 7V4h8v3"
+                          />
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M10 11h4"
+                          />
+                        </svg>
+                      </Button>
+                    {/if}
+                  </div>
+                {/if}
+              </div>
+
+              {#if viewMode === "list"}
+                <div class="flex shrink-0 items-center gap-3 text-sm">
+                  <p
+                    class="text-lg font-bold leading-none text-primary sm:text-xl"
+                  >
+                    {project.duration_label}
+                  </p>
+                  <div class="flex shrink-0 items-center gap-2">
+                    {#if project.repository?.homepage}
+                      <a
+                        href={project.repository.homepage}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        title="View project website"
+                        class={cardActionClass}
+                      >
+                        <svg
+                          class="h-5 w-5"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            fill="currentColor"
+                            d="M16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2m-5.15 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56M14.34 14H9.66c-.1-.66-.16-1.32-.16-2s.06-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2M12 19.96c-.83-1.2-1.5-2.53-1.91-3.96h3.82c-.41 1.43-1.08 2.76-1.91 3.96M8 8H5.08A7.92 7.92 0 0 1 9.4 4.44C8.8 5.55 8.35 6.75 8 8m-2.92 8H8c.35 1.25.8 2.45 1.4 3.56A8 8 0 0 1 5.08 16m-.82-2C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2M12 4.03c.83 1.2 1.5 2.54 1.91 3.97h-3.82c.41-1.43 1.08-2.77 1.91-3.97M18.92 8h-2.95a15.7 15.7 0 0 0-1.38-3.56c1.84.63 3.37 1.9 4.33 3.56M12 2C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2"
+                          />
+                        </svg>
+                      </a>
+                    {/if}
+
+                    {#if project.repo_url}
+                      <a
+                        href={project.repo_url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        title="View repository"
+                        class={cardActionClass}
+                      >
+                        <svg
+                          class="h-5 w-5"
                           fill="currentColor"
-                          d="M2.6 10.59L8.38 4.8l1.69 1.7c-.24.85.15 1.78.93 2.23v5.54c-.6.34-1 .99-1 1.73a2 2 0 0 0 2 2a2 2 0 0 0 2-2c0-.74-.4-1.39-1-1.73V9.41l2.07 2.09c-.07.15-.07.32-.07.5a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2c-.18 0-.35 0-.5.07L13.93 7.5a1.98 1.98 0 0 0-1.15-2.34c-.43-.16-.88-.2-1.28-.09L9.8 3.38l.79-.78c.78-.79 2.04-.79 2.82 0l7.99 7.99c.79.78.79 2.04 0 2.82l-7.99 7.99c-.78.79-2.04.79-2.82 0L2.6 13.41c-.79-.78-.79-2.04 0-2.82"
-                        />
-                      </svg>
-                    </a>
-                  {/if}
-                  {#if project.manage_enabled}
-                    <Button
-                      type="button"
-                      unstyled
-                      class={cardActionClass}
-                      title={project.repo_url
-                        ? "Edit mapping"
-                        : "Link repository"}
-                      onclick={() => openMappingEditor(project)}
-                    >
-                      <svg
-                        class="h-5 w-5"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                        aria-hidden="true"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            fill="currentColor"
+                            d="M2.6 10.59L8.38 4.8l1.69 1.7c-.24.85.15 1.78.93 2.23v5.54c-.6.34-1 .99-1 1.73a2 2 0 0 0 2 2a2 2 0 0 0 2-2c0-.74-.4-1.39-1-1.73V9.41l2.07 2.09c-.07.15-.07.32-.07.5a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2c-.18 0-.35 0-.5.07L13.93 7.5a1.98 1.98 0 0 0-1.15-2.34c-.43-.16-.88-.2-1.28-.09L9.8 3.38l.79-.78c.78-.79 2.04-.79 2.82 0l7.99 7.99c.79.78.79 2.04 0 2.82l-7.99 7.99c-.78.79-2.04.79-2.82 0L2.6 13.41c-.79-.78-.79-2.04 0-2.82"
+                          />
+                        </svg>
+                      </a>
+                    {/if}
+
+                    {#if project.manage_enabled}
+                      <Button
+                        type="button"
+                        unstyled
+                        class={cardActionClass}
+                        title={project.repo_url
+                          ? "Edit mapping"
+                          : "Link repository"}
+                        onclick={() => openMappingEditor(project)}
                       >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M16.862 3.487a2.1 2.1 0 0 1 2.97 2.97L9.75 16.54 6 17.25l.71-3.75z"
-                        />
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M14.5 5.85l3.65 3.65"
-                        />
-                      </svg>
-                    </Button>
-                  {/if}
-                  {#if show_archived && project.unarchive_path}
-                    <Button
-                      type="button"
-                      unstyled
-                      class={cardActionClass}
-                      title="Restore project"
-                      onclick={() => openStatusChangeModal(project, true)}
-                    >
-                      <svg
-                        class="h-5 w-5"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                        aria-hidden="true"
+                        <svg
+                          class="h-5 w-5"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                          aria-hidden="true"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M16.862 3.487a2.1 2.1 0 0 1 2.97 2.97L9.75 16.54 6 17.25l.71-3.75z"
+                          />
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M14.5 5.85l3.65 3.65"
+                          />
+                        </svg>
+                      </Button>
+                    {/if}
+
+                    {#if show_archived && project.unarchive_path}
+                      <Button
+                        type="button"
+                        unstyled
+                        class={cardActionClass}
+                        title="Restore project"
+                        onclick={() => openStatusChangeModal(project, true)}
                       >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M10 14l-3-3 3-3"
-                        />
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M7 11h9a4 4 0 0 1 0 8h-2"
-                        />
-                      </svg>
-                    </Button>
-                  {:else if !show_archived && project.archive_path}
-                    <Button
-                      type="button"
-                      unstyled
-                      class={cardActionClass}
-                      title="Archive project"
-                      onclick={() => openStatusChangeModal(project, false)}
-                    >
-                      <svg
-                        class="h-5 w-5"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                        aria-hidden="true"
+                        <svg
+                          class="h-5 w-5"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                          aria-hidden="true"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M10 14l-3-3 3-3"
+                          />
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M7 11h9a4 4 0 0 1 0 8h-2"
+                          />
+                        </svg>
+                      </Button>
+                    {:else if !show_archived && project.archive_path}
+                      <Button
+                        type="button"
+                        unstyled
+                        class={cardActionClass}
+                        title="Archive project"
+                        onclick={() => openStatusChangeModal(project, false)}
                       >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M3 7h18l-2 11H5z"
-                        />
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M8 7V4h8v3"
-                        />
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M10 11h4"
-                        />
-                      </svg>
-                    </Button>
-                  {/if}
+                        <svg
+                          class="h-5 w-5"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                          aria-hidden="true"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M3 7h18l-2 11H5z"
+                          />
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M8 7V4h8v3"
+                          />
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M10 11h4"
+                          />
+                        </svg>
+                      </Button>
+                    {/if}
+                  </div>
                 </div>
-              </div>
+              {/if}
 
-              <p class="text-2xl font-bold text-primary">
-                {project.duration_label}
-              </p>
+              {#if viewMode === "grid"}
+                <div class="space-y-0.5">
+                  <p class="text-2xl font-bold text-primary">
+                    {project.duration_label}
+                  </p>
+                </div>
+              {/if}
 
-              {#if project.repository?.description}
+              {#if project.repository?.description && viewMode === "grid"}
                 <p
                   class="line-clamp-2 text-sm leading-relaxed text-surface-content/70"
                 >
@@ -442,7 +773,7 @@
                 </p>
               {/if}
 
-              {#if project.repository?.formatted_languages}
+              {#if project.repository?.formatted_languages && viewMode === "grid"}
                 <p class="flex items-center gap-1 text-sm">
                   <svg
                     class="h-4 w-4 text-surface-content/50"
@@ -462,7 +793,7 @@
                 </p>
               {/if}
 
-              {#if project.repository?.last_commit_ago}
+              {#if project.repository?.last_commit_ago && viewMode === "grid"}
                 <p class="flex items-center gap-1 text-sm">
                   <svg
                     class="h-4 w-4 text-surface-content/50"
@@ -482,7 +813,7 @@
                 </p>
               {/if}
 
-              {#if project.broken_name}
+              {#if project.broken_name && viewMode === "grid"}
                 <div
                   class="rounded-lg border border-yellow/30 bg-yellow/10 p-3"
                 >

From bd08ba881c294d760550c071165bdad3aef465e4 Mon Sep 17 00:00:00 2001
From: Mat Manna <matmanna@outlook.com>
Date: Wed, 20 May 2026 07:22:13 -0400
Subject: [PATCH 02/10] fix: better, maybe

---
 app/javascript/pages/Projects/Index.svelte | 732 ++++++++++-----------
 1 file changed, 332 insertions(+), 400 deletions(-)

diff --git a/app/javascript/pages/Projects/Index.svelte b/app/javascript/pages/Projects/Index.svelte
index bf492e1a9..a3f125882 100644
--- a/app/javascript/pages/Projects/Index.svelte
+++ b/app/javascript/pages/Projects/Index.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
-  import { Link, router } from "@inertiajs/svelte";
-  import { onMount } from "svelte";
+  import { Deferred, Form, Link, router } from "@inertiajs/svelte";
+  import Archive from "hcicons-svelte/archive";
+  import Edit from "hcicons-svelte/edit";
+  import GithubFill from "hcicons-svelte/github-fill";
+  import Reply from "hcicons-svelte/reply";
+  import Web from "hcicons-svelte/web";
   import Button from "../../components/Button.svelte";
   import Modal from "../../components/Modal.svelte";
-  import Select from "../../components/Select.svelte";
   import IntervalSelect from "../Home/signedIn/IntervalSelect.svelte";
 
   type RepositorySummary = {
@@ -70,7 +73,6 @@
     projects_data,
   }: PageProps = $props();
 
-  let csrfToken = $state("");
   let editingProjectKey = $state<string | null>(null);
   let repoUrlDraft = $state("");
   let statusChangeModalOpen = $state(false);
@@ -85,40 +87,13 @@
   let sortBy = $state<"most_time" | "least_time" | "name_az" | "name_za">(
     "most_time",
   );
-  let archivalStatus = $state("active");
+  let archivalStatus = $state(show_archived ? "archived" : "active");
 
   const skeletonCount = $derived.by(() => {
     const safeCount = Number.isFinite(total_projects) ? total_projects : 0;
     return Math.min(Math.max(safeCount, 4), 10);
   });
 
-  const filteredAndSortedProjects = $derived.by(() => {
-    if (!projects_data?.projects) return [];
-
-    const searchLower = searchQuery.toLowerCase();
-    const filtered = projects_data.projects.filter((project) => {
-      return (
-        project.name.toLowerCase().includes(searchLower) ||
-        (project.repo_url?.toLowerCase().includes(searchLower) ?? false)
-      );
-    });
-
-    return filtered.sort((a, b) => {
-      switch (sortBy) {
-        case "name_az":
-          return a.name.localeCompare(b.name);
-        case "name_za":
-          return b.name.localeCompare(a.name);
-        case "least_time":
-          return a.duration_seconds - b.duration_seconds;
-        case "most_time":
-          return b.duration_seconds - a.duration_seconds;
-        default:
-          return b.duration_seconds - a.duration_seconds;
-      }
-    });
-  });
-
   const buildIntervalQuery = ({
     nextInterval = interval || "",
     nextFrom = from || "",
@@ -137,36 +112,6 @@
     return query;
   };
 
-  const intervalQueryString = $derived.by(() => {
-    const queryString = buildIntervalQuery().toString();
-    return queryString ? `?${queryString}` : "";
-  });
-
-  const withIntervalParams = (path: string) => {
-    if (!intervalQueryString) return path;
-
-    const separator = path.includes("?") ? "&" : "?";
-    return `${path}${separator}${intervalQueryString.slice(1)}`;
-  };
-
-  $effect(() => {
-    archivalStatus = show_archived ? "archived" : "active";
-  });
-
-  $effect(() => {
-    const expectedValue = show_archived ? "archived" : "active";
-    if (archivalStatus !== expectedValue) {
-      changeArchivedStatus(archivalStatus);
-    }
-  });
-
-  onMount(() => {
-    csrfToken =
-      document
-        .querySelector("meta[name='csrf-token']")
-        ?.getAttribute("content") || "";
-  });
-
   const buildProjectsPath = ({
     nextShowArchived = show_archived,
     nextInterval = interval || "",
@@ -186,6 +131,18 @@
     return queryString ? `${index_path}?${queryString}` : index_path;
   };
 
+  const intervalQueryString = $derived.by(() => {
+    const queryString = buildIntervalQuery().toString();
+    return queryString ? `?${queryString}` : "";
+  });
+
+  const withIntervalParams = (path: string) => {
+    if (!intervalQueryString) return path;
+
+    const separator = path.includes("?") ? "&" : "?";
+    return `${path}${separator}${intervalQueryString.slice(1)}`;
+  };
+
   const changeInterval = (
     nextInterval: string,
     nextFrom: string,
@@ -197,9 +154,15 @@
       nextFrom: isCustom ? nextFrom : "",
       nextTo: isCustom ? nextTo : "",
     });
-
     router.visit(nextPath, {
-      only: ["projects_data", "interval", "from", "to", "interval_label", "total_projects"],
+      only: [
+        "projects_data",
+        "interval",
+        "from",
+        "to",
+        "interval_label",
+        "total_projects",
+      ],
       preserveState: true,
       preserveScroll: true,
       replace: true,
@@ -207,12 +170,6 @@
     });
   };
 
-  const changeArchivedStatus = (nextValue: string) => {
-    window.location.href = buildProjectsPath({
-      nextShowArchived: nextValue === "archived",
-    });
-  };
-
   const openMappingEditor = (project: ProjectCard) => {
     editingProjectKey = project.project_key || null;
     repoUrlDraft = project.repo_url || "";
@@ -269,8 +226,26 @@
 </svelte:head>
 
 <div class="mx-auto max-w-7xl">
-  <div class="mb-4 flex flex-wrap items-center gap-4">
-    <h1 class="text-3xl font-bold text-surface-content">My Projects</h1>
+  <div class="mb-4 flex flex-wrap items-center justify-between gap-4">
+    <div class="flex items-center gap-4">
+      <h1 class="text-3xl font-bold text-surface-content">My Projects</h1>
+      {#if archived_count > 0}
+        <div class="project-toggle-group">
+          <Link
+            href={buildProjectsPath({ nextShowArchived: false })}
+            class={`project-toggle-btn ${!show_archived ? "active" : "inactive"}`}
+          >
+            Active
+          </Link>
+          <Link
+            href={buildProjectsPath({ nextShowArchived: true })}
+            class={`project-toggle-btn ${show_archived ? "active" : "inactive"}`}
+          >
+            Archived
+          </Link>
+        </div>
+      {/if}
+    </div>
   </div>
 
   {#if !github_connected}
@@ -290,347 +265,304 @@
     </div>
   {/if}
 
-  {#if projects_data}
-    <div class="mt-6 flex flex-wrap items-end gap-3">
-      <div class="min-w-0 flex-[0_1_16rem]">
-        <span class="mb-1.5 block text-xs font-medium uppercase tracking-wider text-secondary/80">
-          Search Projects
-        </span>
-        <input
-          id="project-search"
-          type="text"
-          placeholder="Search by name or URL..."
-          bind:value={searchQuery}
-          class="w-full rounded-md border border-surface-200 bg-darker px-3 py-2 text-left text-sm text-surface-content transition-all duration-200 hover:border-surface-300 focus-visible:border-primary/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/45 focus-visible:ring-offset-2 focus-visible:ring-offset-surface placeholder-surface-content/60"
-        />
-      </div>
-
-      <div class="min-w-0 flex-[0_1_12rem]">
-        <IntervalSelect
-          from={from || ""}
-          selected={interval || ""}
-          to={to || ""}
-          onchange={changeInterval}
-        />
-      </div>
-
-      <div class="min-w-0 flex-[0_1_12rem]">
-        <span class="mb-1.5 block text-xs font-medium uppercase tracking-wider text-secondary/80">
-          Archival Status
-        </span>
-        <Select
-          id="archival-status"
-          bind:value={archivalStatus}
-          items={[
-            { value: "active", label: "Active" },
-            { value: "archived", label: "Archived" },
-          ]}
-          class="bg-surface-100"
-        />
-      </div>
-
-      {#if projects_data.projects && projects_data.projects.length > 0}
-        <div class="min-w-0 flex-[0_1_18rem]">
-          <div class="flex min-w-0 items-end gap-3">
-            <div class="min-w-0 flex-[0_1_12rem]">
-              <div class="mb-1.5 flex items-end gap-3">
-                <span class="block text-xs font-medium uppercase tracking-wider text-secondary/80">
-                  Sort
-                </span>
-              </div>
-              <Select
-                id="project-sort"
-                bind:value={sortBy}
-                items={[
-                  { value: "most_time", label: "Most time" },
-                  { value: "least_time", label: "Least time" },
-                  { value: "name_az", label: "Name (A-Z)" },
-                  { value: "name_za", label: "Name (Z-A)" },
-                ]}
-                class="bg-surface-100"
-              />
-            </div>
-            <div class="shrink-0 flex flex-col items-start">
-              <span class="mb-1.5 block text-xs font-medium uppercase tracking-wider text-secondary/80">
-                View
-              </span>
-              <div class="inline-flex shrink-0 gap-1 rounded-lg border border-surface-200 bg-surface-content/5 p-1">
-                <Button
-                  type="button"
-                  unstyled
-                  class={`inline-flex h-8 w-8 items-center justify-center rounded transition-colors ${
-                    viewMode === "grid"
-                      ? "bg-primary text-on-primary"
-                      : "text-surface-content/70 hover:bg-surface-content/10"
-                  }`}
-                  title="Grid view"
-                  onclick={() => (viewMode = "grid")}
-                >
-                  <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                    <path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z" />
-                  </svg>
-                </Button>
-                <Button
-                  type="button"
-                  unstyled
-                  class={`inline-flex h-8 w-8 items-center justify-center rounded transition-colors ${
-                    viewMode === "list"
-                      ? "bg-primary text-on-primary"
-                      : "text-surface-content/70 hover:bg-surface-content/10"
-                  }`}
-                  title="List view"
-                  onclick={() => (viewMode = "list")}
-                >
-                  <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                    <path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z" />
-                  </svg>
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      {/if}
-    </div>
-
-    <section class="mt-6">
-      <p class="text-lg text-surface-content">
-        {#if projects_data.has_activity}
-          You've spent
-          <span class="font-semibold text-primary">{projects_data.total_time_label}</span>
-          coding across
-          <span class="font-semibold text-primary">{total_projects}</span>
-          {show_archived ? "archived" : "active"}
-          {total_projects === 1 ? "project" : "projects"}.
-        {:else}
-          You haven't logged any time for this interval yet.
-        {/if}
-      </p>
+  <div class="sm:max-w-3xs">
+    <IntervalSelect
+      from={from || ""}
+      selected={interval || ""}
+      to={to || ""}
+      onchange={changeInterval}
+    />
+  </div>
 
-      {#if projects_data.projects.length == 0}
-        <div class="mt-4 rounded-xl border border-surface-200 bg-dark p-8 text-center">
-          <p class="text-muted">
-            {show_archived
-              ? "No archived projects match this filter."
-              : "No active projects match this filter."}
-          </p>
-        </div>
-      {:else if filteredAndSortedProjects.length == 0}
-        <div class="mt-4 rounded-xl border border-surface-200 bg-dark p-8 text-center">
-          <p class="text-muted">No projects match your search query.</p>
-        </div>
-      {:else}
+  <Deferred data="projects_data">
+    {#snippet fallback()}
+      <section class="mt-6 animate-pulse">
+        <div class="h-7 w-80 rounded bg-darkless"></div>
         <div
-          class={viewMode === "grid"
-            ? "mt-6 grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-6"
-            : "mt-6 space-y-4"}
+          class="mt-6 grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-5"
         >
-          {#each filteredAndSortedProjects as project (project.id)}
-            {@const projectHref = project.show_path ? withIntervalParams(project.show_path) : null}
-            <article
-              class={viewMode === "grid"
-                ? "relative flex h-full flex-col gap-4 overflow-hidden rounded-xl border border-primary bg-dark p-6 shadow-xs backdrop-blur-sm transition-all duration-300"
-                : "relative flex flex-col gap-4 overflow-hidden rounded-xl border border-primary bg-dark p-6 shadow-xs backdrop-blur-sm transition-all duration-300 sm:flex-row sm:items-center sm:justify-between"}
+          {#each Array.from( { length: skeletonCount }, ) as _unused, index (index)}
+            <div
+              class="min-h-36 rounded-2xl border border-surface-200 bg-dark p-5"
             >
-              {#if projectHref}
-                <Link
-                  href={projectHref}
-                  aria-label={`View ${project.name}`}
-                  class="absolute inset-0 z-10 rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
-                ></Link>
-              {/if}
-
-              <div
-                class={viewMode === "grid"
-                  ? "relative z-20 flex items-start justify-between gap-3"
-                  : "relative z-20 flex flex-1 items-center gap-3"}
+              <div class="h-6 w-28 rounded bg-darkless"></div>
+              <div class="mt-3 h-7 w-20 rounded bg-darkless"></div>
+              <div class="mt-4 h-4 w-full rounded bg-darkless"></div>
+              <div class="mt-2 h-4 w-3/4 rounded bg-darkless"></div>
+              <div class="mt-4 h-8 w-full rounded bg-darkless"></div>
+            </div>
+          {/each}
+        </div>
+      </section>
+    {/snippet}
+
+    {#snippet children({ reloading })}
+      {#if projects_data}
+        <section
+          class="mt-6 transition-opacity duration-200 ease-out"
+          class:opacity-60={reloading}
+        >
+          <p class="text-lg text-surface-content">
+            {#if projects_data.has_activity}
+              You've spent
+              <span class="font-semibold text-primary"
+                >{projects_data.total_time_label}</span
               >
-                <div class="min-w-0 flex-1">
-                  <h3
-                    class="truncate text-lg font-semibold text-surface-content"
-                    title={project.name}
+              coding across {show_archived ? "archived" : "active"} projects.
+            {:else}
+              You haven't logged any time for this interval yet.
+            {/if}
+          </p>
+
+          {#if projects_data.projects.length == 0}
+            <div
+              class="mt-4 rounded-xl border border-surface-200 bg-dark p-8 text-center"
+            >
+              <p class="text-muted">
+                {show_archived
+                  ? "No archived projects match this filter."
+                  : "No active projects match this filter."}
+              </p>
+            </div>
+          {:else}
+            <div
+              class="mt-6 grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-5"
+            >
+              {#each projects_data.projects as project (project.id)}
+                {@const projectHref = project.show_path
+                  ? withIntervalParams(project.show_path)
+                  : null}
+                <article
+                  class="group relative flex min-h-36 overflow-hidden rounded-2xl {projectHref
+                    ? 'cursor-pointer'
+                    : ''}"
+                >
+                  {#if projectHref}
+                    <Link
+                      href={projectHref}
+                      aria-label={`View ${project.name}`}
+                      class="absolute inset-0 z-10 rounded-2xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
+                    ></Link>
+                  {/if}
+                  <div
+                    class="relative flex min-w-0 flex-1 flex-col rounded-2xl border border-surface-200 bg-dark p-5 transition-colors duration-300 ease-out group-hover:border-surface-300"
                   >
-                    {project.name}
-                  </h3>
+                    <div class="grid gap-3">
+                      <div
+                        class="flex min-w-0 items-start justify-between gap-3"
+                      >
+                        <div class="min-w-0 flex-1">
+                          <h3
+                            class="truncate text-xl font-bold tracking-tight text-surface-content"
+                            title={project.name}
+                          >
+                            {project.name}
+                          </h3>
+                        </div>
+                        <p
+                          class="shrink-0 text-lg font-semibold tabular-nums text-primary/80"
+                        >
+                          {project.duration_label}
+                        </p>
+                      </div>
+
+                      {#if project.repository?.description}
+                        <p
+                          class="line-clamp-2 text-sm leading-relaxed text-surface-content/70 text-pretty"
+                        >
+                          {project.repository.description}
+                        </p>
+                      {/if}
+
+                      <div
+                        class="relative z-20 flex flex-wrap items-center gap-2"
+                      >
+                        {#if project.repository?.homepage}
+                          <a
+                            href={project.repository.homepage}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            title="View project website"
+                            class={cardActionClass}
+                          >
+                            <Web size={20} />
+                          </a>
+                        {/if}
+                        {#if project.repo_url}
+                          <a
+                            href={project.repo_url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            title="View repository"
+                            class={cardActionClass}
+                          >
+                            <GithubFill size={20} />
+                          </a>
+                        {/if}
+                        {#if project.manage_enabled}
+                          <Button
+                            type="button"
+                            unstyled
+                            class={cardActionClass}
+                            title={project.repo_url
+                              ? "Edit mapping"
+                              : "Link repository"}
+                            onclick={() => openMappingEditor(project)}
+                          >
+                            <Edit size={20} />
+                          </Button>
+                        {/if}
+                        {#if show_archived && project.unarchive_path}
+                          <Button
+                            type="button"
+                            unstyled
+                            class={cardActionClass}
+                            title="Restore project"
+                            onclick={() => openStatusChangeModal(project, true)}
+                          >
+                            <Reply size={20} />
+                          </Button>
+                        {:else if !show_archived && project.archive_path}
+                          <Button
+                            type="button"
+                            unstyled
+                            class={cardActionClass}
+                            title="Archive project"
+                            onclick={() =>
+                              openStatusChangeModal(project, false)}
+                          >
+                            <Archive size={20} />
+                          </Button>
+                        {/if}
+                      </div>
+                    </div>
 
-                  {#if project.repository?.stars}
+                    <div
+                      class="mt-auto flex flex-wrap items-center gap-2 pt-5 text-sm text-surface-content/55"
+                    >
+                      <!-- {#if project.repository?.stars}
                     <p
-                      class={viewMode === "grid"
-                        ? "mt-2 inline-flex items-center gap-1 text-sm text-yellow"
-                        : "mt-1 inline-flex items-center gap-1 text-sm text-yellow"}
+                      class="inline-flex items-center gap-1.5 rounded-full bg-yellow/10 px-3 py-1.5 font-semibold tabular-nums text-yellow"
                     >
-                      <svg class="h-4 w-4 fill-current" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                      <svg
+                        class="h-4 w-4 fill-current"
+                        viewBox="0 0 20 20"
+                        aria-hidden="true"
+                      >
+                        <path
+                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
                       </svg>
                       {project.repository.stars}
                     </p>
-                  {/if}
-                </div>
-
-                {#if viewMode === "grid"}
-                  <p class="shrink-0 text-2xl font-bold text-primary">{project.duration_label}</p>
-                {/if}
-              </div>
-
-              {#if viewMode === "grid"}
-                {#if project.repository?.description}
-                  <p class="relative z-20 line-clamp-2 text-sm leading-relaxed text-surface-content/70 text-pretty">
-                    {project.repository.description}
-                  </p>
-                {/if}
-
-                {#if project.repository?.formatted_languages}
-                  <p class="relative z-20 flex items-center gap-1 text-sm">
-                    <svg class="h-4 w-4 text-surface-content/50" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                      <path fill="currentColor" d="M5.59 3.41L7 4.82L3.82 8L7 11.18L5.59 12.6L1 8zm5.82 0L16 8l-4.59 4.6L10 11.18L13.18 8L10 4.82zM22 6v12c0 1.11-.89 2-2 2H4a2 2 0 0 1-2-2v-4h2v4h16V6h-2.97V4H20c1.11 0 2 .89 2 2" />
-                    </svg>
-                    <span class="truncate text-surface-content/50">{project.repository.formatted_languages}</span>
-                  </p>
-                {/if}
-
-                {#if project.repository?.last_commit_ago}
-                  <p class="relative z-20 flex items-center gap-1 text-sm">
-                    <svg class="h-4 w-4 text-surface-content/50" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                      <path fill="currentColor" d="M12 20c4.4 0 8-3.6 8-8s-3.6-8-8-8s-8 3.6-8 8s3.6 8 8 8m0-18c5.5 0 10 4.5 10 10s-4.5 10-10 10S2 17.5 2 12S6.5 2 12 2m.5 10.8l-4.8 2.8l-.7-1.4l4-2.3V7h1.5z" />
-                    </svg>
-                    <span class="text-surface-content/50">Last commit {project.repository.last_commit_ago}</span>
-                  </p>
-                {/if}
-
-                {#if project.broken_name}
-                  <div class="relative z-20 rounded-lg border border-yellow/30 bg-yellow/10 p-3">
-                    <p class="text-sm leading-relaxed text-yellow/80">
-                      Your editor may be sending invalid project names. Time is shown here but can't be submitted to Hack Club programs.
-                    </p>
-                  </div>
-                {/if}
-              {/if}
-
-              <div class="relative z-20 flex flex-wrap items-center gap-2 text-sm text-surface-content/55">
-                {#if project.repository?.homepage}
-                  <a
-                    href={project.repository.homepage}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    title="View project website"
-                    class={cardActionClass}
-                  >
-                    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path fill="currentColor" d="M16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2m-5.15 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56M14.34 14H9.66c-.1-.66-.16-1.32-.16-2s.06-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2M12 19.96c-.83-1.2-1.5-2.53-1.91-3.96h3.82c-.41 1.43-1.08 2.76-1.91 3.96M8 8H5.08A7.92 7.92 0 0 1 9.4 4.44C8.8 5.55 8.35 6.75 8 8m-2.92 8H8c.35 1.25.8 2.45 1.4 3.56A8 8 0 0 1 5.08 16m-.82-2C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2M12 4.03c.83 1.2 1.5 2.54 1.91 3.97h-3.82c.41-1.43 1.08-2.77 1.91-3.97M18.92 8h-2.95a15.7 15.7 0 0 0-1.38-3.56c1.84.63 3.37 1.9 4.33 3.56M12 2C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2" />
-                    </svg>
-                  </a>
-                {/if}
-
-                {#if project.repo_url}
-                  <a
-                    href={project.repo_url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    title="View repository"
-                    class={cardActionClass}
-                  >
-                    <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
-                      <path fill="currentColor" d="M2.6 10.59L8.38 4.8l1.69 1.7c-.24.85.15 1.78.93 2.23v5.54c-.6.34-1 .99-1 1.73a2 2 0 0 0 2 2a2 2 0 0 0 2-2c0-.74-.4-1.39-1-1.73V9.41l2.07 2.09c-.07.15-.07.32-.07.5a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2c-.18 0-.35 0-.5.07L13.93 7.5a1.98 1.98 0 0 0-1.15-2.34c-.43-.16-.88-.2-1.28-.09L9.8 3.38l.79-.78c.78-.79 2.04-.79 2.82 0l7.99 7.99c.79.78.79 2.04 0 2.82l-7.99 7.99c-.78.79-2.04.79-2.82 0L2.6 13.41c-.79-.78-.79-2.04 0-2.82" />
-                    </svg>
-                  </a>
-                {/if}
-
-                {#if project.manage_enabled}
-                  <Button
-                    type="button"
-                    unstyled
-                    class={cardActionClass}
-                    title={project.repo_url ? "Edit mapping" : "Link repository"}
-                    onclick={() => openMappingEditor(project)}
-                  >
-                    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16.862 3.487a2.1 2.1 0 0 1 2.97 2.97L9.75 16.54 6 17.25l.71-3.75z" />
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.5 5.85l3.65 3.65" />
-                    </svg>
-                  </Button>
-                {/if}
-
-                {#if show_archived && project.unarchive_path}
-                  <Button
-                    type="button"
-                    unstyled
-                    class={cardActionClass}
-                    title="Restore project"
-                    onclick={() => openStatusChangeModal(project, true)}
-                  >
-                    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l-3-3 3-3" />
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11h9a4 4 0 0 1 0 8h-2" />
-                    </svg>
-                  </Button>
-                {:else if !show_archived && project.archive_path}
-                  <Button
-                    type="button"
-                    unstyled
-                    class={cardActionClass}
-                    title="Archive project"
-                    onclick={() => openStatusChangeModal(project, false)}
-                  >
-                    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7h18l-2 11H5z" />
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V4h8v3" />
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h4" />
-                    </svg>
-                  </Button>
-                {/if}
-              </div>
-
-              {#if viewMode === "list"}
-                <div class="relative z-20 flex shrink-0 items-center gap-3 text-sm">
-                  <p class="text-lg font-bold leading-none text-primary sm:text-xl">
-                    {project.duration_label}
-                  </p>
-                </div>
-              {/if}
-
-              {#if project.manage_enabled && editingProjectKey === project.project_key && project.update_path}
-                <div class="relative z-20 mt-1 border-t border-surface-200/40 pt-4">
-                  <form method="post" action={project.update_path} class="space-y-3">
-                    <input type="hidden" name="_method" value="patch" />
-                    <input type="hidden" name="authenticity_token" value={csrfToken} />
-
-                    <input
-                      type="url"
-                      name="project_repo_mapping[repo_url]"
-                      bind:value={repoUrlDraft}
-                      placeholder="https://github.com/owner/repo"
-                      class="w-full rounded-lg border border-surface-200 bg-darker px-3 py-2 text-sm text-surface-content focus:border-primary focus:outline-none"
-                    />
-
-                    <div class="flex gap-2">
-                      <Button type="submit" variant="primary" size="sm" class="flex-1">Save</Button>
-                      <Button type="button" variant="dark" size="sm" class="flex-1" onclick={closeMappingEditor}>
-                        Cancel
-                      </Button>
+                  {/if} -->
+
+                      {#if project.repository?.formatted_languages}
+                        <p
+                          class="flex min-w-0 items-center gap-1.5 rounded-full bg-surface-content/5 px-3 py-1.5"
+                        >
+                          <svg
+                            class="h-4 w-4 text-surface-content/50"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                            aria-hidden="true"
+                          >
+                            <path
+                              fill="currentColor"
+                              d="M5.59 3.41L7 4.82L3.82 8L7 11.18L5.59 12.6L1 8zm5.82 0L16 8l-4.59 4.6L10 11.18L13.18 8L10 4.82zM22 6v12c0 1.11-.89 2-2 2H4a2 2 0 0 1-2-2v-4h2v4h16V6h-2.97V4H20c1.11 0 2 .89 2 2"
+                            />
+                          </svg>
+                          <span class="truncate text-surface-content/60"
+                            >{project.repository.formatted_languages}</span
+                          >
+                        </p>
+                      {/if}
+
+                      {#if project.repository?.last_commit_ago}
+                        <p
+                          class="flex items-center gap-1.5 rounded-full bg-surface-content/5 px-3 py-1.5"
+                        >
+                          <svg
+                            class="h-4 w-4 text-surface-content/50"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                            aria-hidden="true"
+                          >
+                            <path
+                              fill="currentColor"
+                              d="M12 20c4.4 0 8-3.6 8-8s-3.6-8-8-8s-8 3.6-8 8s3.6 8 8 8m0-18c5.5 0 10 4.5 10 10s-4.5 10-10 10S2 17.5 2 12S6.5 2 12 2m.5 10.8l-4.8 2.8l-.7-1.4l4-2.3V7h1.5z"
+                            />
+                          </svg>
+                          <span class="text-surface-content/50"
+                            >Last commit {project.repository
+                              .last_commit_ago}</span
+                          >
+                        </p>
+                      {/if}
                     </div>
-                  </form>
-                </div>
-              {/if}
-            </article>
-          {/each}
-        </div>
+
+                    {#if project.broken_name}
+                      <div
+                        class="mt-4 rounded-2xl border border-yellow/30 bg-yellow/10 p-3"
+                      >
+                        <p
+                          class="text-sm leading-relaxed text-yellow/80 text-pretty"
+                        >
+                          Your editor may be sending invalid project names. Time
+                          is shown here but can't be submitted to Hack Club
+                          programs.
+                        </p>
+                      </div>
+                    {/if}
+
+                    {#if project.manage_enabled && editingProjectKey === project.project_key && project.update_path}
+                      <div
+                        class="relative z-20 mt-4 border-t border-surface-200/40 pt-4"
+                      >
+                        <Form
+                          action={project.update_path}
+                          method="patch"
+                          class="space-y-3"
+                        >
+                          <input
+                            type="url"
+                            name="project_repo_mapping[repo_url]"
+                            bind:value={repoUrlDraft}
+                            placeholder="https://github.com/owner/repo"
+                            class="w-full rounded-lg border border-surface-200 bg-input px-3 py-2 text-sm text-surface-content focus:border-primary focus:outline-none"
+                          />
+
+                          <div class="flex gap-2">
+                            <Button
+                              type="submit"
+                              variant="primary"
+                              size="sm"
+                              class="flex-1">Save</Button
+                            >
+                            <Button
+                              type="button"
+                              variant="dark"
+                              size="sm"
+                              class="flex-1"
+                              onclick={closeMappingEditor}
+                            >
+                              Cancel
+                            </Button>
+                          </div>
+                        </Form>
+                      </div>
+                    {/if}
+                  </div>
+                </article>
+              {/each}
+            </div>
+          {/if}
+        </section>
       {/if}
-    </section>
-  {:else}
-    <section class="mt-6 animate-pulse">
-      <div class="h-7 w-80 rounded bg-darkless"></div>
-      <div class="mt-6 grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-6">
-        {#each Array.from({ length: skeletonCount }) as _unused, index (index)}
-          <div class="rounded-xl border border-primary bg-dark p-6">
-            <div class="h-6 w-28 rounded bg-darkless"></div>
-            <div class="mt-3 h-7 w-20 rounded bg-darkless"></div>
-            <div class="mt-4 h-4 w-full rounded bg-darkless"></div>
-            <div class="mt-2 h-4 w-3/4 rounded bg-darkless"></div>
-            <div class="mt-4 h-8 w-full rounded bg-darkless"></div>
-          </div>
-        {/each}
-      </div>
-    </section>
-  {/if}
+    {/snippet}
+  </Deferred>
 </div>
 
 <Modal
@@ -666,4 +598,4 @@
       </div>
     {/if}
   {/snippet}
-</Modal>
\ No newline at end of file
+</Modal>

From 99684ee66275f1238f3f7d6f2c9ad6c774a76ff0 Mon Sep 17 00:00:00 2001
From: Mat Manna <matmanna@outlook.com>
Date: Wed, 20 May 2026 07:22:22 -0400
Subject: [PATCH 03/10] testing, probably

---
 app/javascript/pages/Projects/Index.svelte | 35 ++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/app/javascript/pages/Projects/Index.svelte b/app/javascript/pages/Projects/Index.svelte
index a3f125882..ba5d09fce 100644
--- a/app/javascript/pages/Projects/Index.svelte
+++ b/app/javascript/pages/Projects/Index.svelte
@@ -7,6 +7,7 @@
   import Web from "hcicons-svelte/web";
   import Button from "../../components/Button.svelte";
   import Modal from "../../components/Modal.svelte";
+  import Select from "../../components/Select.svelte";
   import IntervalSelect from "../Home/signedIn/IntervalSelect.svelte";
 
   type RepositorySummary = {
@@ -143,6 +144,40 @@
     return `${path}${separator}${intervalQueryString.slice(1)}`;
   };
 
+  const filteredAndSortedProjects = $derived.by(() => {
+    if (!projects_data?.projects) return [];
+
+    const searchLower = searchQuery.toLowerCase();
+    const filtered = projects_data.projects.filter((project) => {
+      return (
+        project.name.toLowerCase().includes(searchLower) ||
+        (project.repo_url?.toLowerCase().includes(searchLower) ?? false)
+      );
+    });
+
+    return filtered.sort((a, b) => {
+      switch (sortBy) {
+        case "name_az":
+          return a.name.localeCompare(b.name);
+        case "name_za":
+          return b.name.localeCompare(a.name);
+        case "least_time":
+          return a.duration_seconds - b.duration_seconds;
+        case "most_time":
+          return b.duration_seconds - a.duration_seconds;
+        default:
+          return b.duration_seconds - a.duration_seconds;
+      }
+    });
+  });
+
+  $effect(() => {
+    const expectedValue = show_archived ? "archived" : "active";
+    if (archivalStatus !== expectedValue) {
+      changeArchivedStatus(archivalStatus);
+    }
+  });
+
   const changeInterval = (
     nextInterval: string,
     nextFrom: string,

From b44e2fef3de3d836b74bad6ec089305d744a107d Mon Sep 17 00:00:00 2001
From: Mat Manna <matmanna@outlook.com>
Date: Wed, 20 May 2026 07:22:42 -0400
Subject: [PATCH 04/10] fix: debugging, likely

---
 app/javascript/pages/Projects/Index.svelte | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/app/javascript/pages/Projects/Index.svelte b/app/javascript/pages/Projects/Index.svelte
index ba5d09fce..f6df54b30 100644
--- a/app/javascript/pages/Projects/Index.svelte
+++ b/app/javascript/pages/Projects/Index.svelte
@@ -205,6 +205,12 @@
     });
   };
 
+  const changeArchivedStatus = (nextValue: string) => {
+    window.location.href = buildProjectsPath({
+      nextShowArchived: nextValue === "archived",
+    });
+  };
+
   const openMappingEditor = (project: ProjectCard) => {
     editingProjectKey = project.project_key || null;
     repoUrlDraft = project.repo_url || "";

From 5a644f4d469884bdf59544ad46437b8129110e56 Mon Sep 17 00:00:00 2001
From: Mat Manna <matmanna@outlook.com>
Date: Wed, 20 May 2026 07:28:15 -0400
Subject: [PATCH 05/10] break: stuff again

---
 app/javascript/pages/Projects/Index.svelte | 181 ++++++++++++++++-----
 1 file changed, 139 insertions(+), 42 deletions(-)

diff --git a/app/javascript/pages/Projects/Index.svelte b/app/javascript/pages/Projects/Index.svelte
index f6df54b30..26eb7350f 100644
--- a/app/javascript/pages/Projects/Index.svelte
+++ b/app/javascript/pages/Projects/Index.svelte
@@ -306,13 +306,111 @@
     </div>
   {/if}
 
-  <div class="sm:max-w-3xs">
-    <IntervalSelect
-      from={from || ""}
-      selected={interval || ""}
-      to={to || ""}
-      onchange={changeInterval}
-    />
+  <div class="mt-6 flex flex-wrap items-end gap-3">
+    <div class="sm:max-w-3xs">
+      <IntervalSelect
+        from={from || ""}
+        selected={interval || ""}
+        to={to || ""}
+        onchange={changeInterval}
+      />
+    </div>
+
+    {#if projects_data}
+      <div class="min-w-0 flex-1">
+        <div class="flex flex-wrap items-end gap-3">
+          <div class="min-w-0 flex-[0_1_16rem]">
+            <span class="mb-1.5 block text-xs font-medium uppercase tracking-wider text-secondary/80">
+              Search Projects
+            </span>
+            <input
+              id="project-search"
+              type="text"
+              placeholder="Search by name or URL..."
+              bind:value={searchQuery}
+              class="w-full rounded-md border border-surface-200 bg-darker px-3 py-2 text-left text-sm text-surface-content transition-all duration-200 hover:border-surface-300 focus-visible:border-primary/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/45 focus-visible:ring-offset-2 focus-visible:ring-offset-surface placeholder-surface-content/60"
+            />
+          </div>
+
+          <div class="min-w-0 flex-[0_1_12rem]">
+            <span class="mb-1.5 block text-xs font-medium uppercase tracking-wider text-secondary/80">
+              Archival Status
+            </span>
+            <Select
+              id="archival-status"
+              bind:value={archivalStatus}
+              items={[
+                { value: "active", label: "Active" },
+                { value: "archived", label: "Archived" },
+              ]}
+              class="bg-surface-100"
+            />
+          </div>
+
+          {#if projects_data.projects && projects_data.projects.length > 0}
+            <div class="min-w-0 flex-[0_1_18rem]">
+              <div class="flex min-w-0 items-end gap-3">
+                <div class="min-w-0 flex-[0_1_12rem]">
+                  <div class="mb-1.5 flex items-end gap-3">
+                    <span class="block text-xs font-medium uppercase tracking-wider text-secondary/80">
+                      Sort
+                    </span>
+                  </div>
+                  <Select
+                    id="project-sort"
+                    bind:value={sortBy}
+                    items={[
+                      { value: "most_time", label: "Most time" },
+                      { value: "least_time", label: "Least time" },
+                      { value: "name_az", label: "Name (A-Z)" },
+                      { value: "name_za", label: "Name (Z-A)" },
+                    ]}
+                    class="bg-surface-100"
+                  />
+                </div>
+                <div class="shrink-0 flex flex-col items-start">
+                  <span class="mb-1.5 block text-xs font-medium uppercase tracking-wider text-secondary/80">
+                    View
+                  </span>
+                  <div class="inline-flex shrink-0 gap-1 rounded-lg border border-surface-200 bg-surface-content/5 p-1">
+                    <Button
+                      type="button"
+                      unstyled
+                      class={`inline-flex h-8 w-8 items-center justify-center rounded transition-colors ${
+                        viewMode === "grid"
+                          ? "bg-primary text-on-primary"
+                          : "text-surface-content/70 hover:bg-surface-content/10"
+                      }`}
+                      title="Grid view"
+                      onclick={() => (viewMode = "grid")}
+                    >
+                      <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                        <path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z" />
+                      </svg>
+                    </Button>
+                    <Button
+                      type="button"
+                      unstyled
+                      class={`inline-flex h-8 w-8 items-center justify-center rounded transition-colors ${
+                        viewMode === "list"
+                          ? "bg-primary text-on-primary"
+                          : "text-surface-content/70 hover:bg-surface-content/10"
+                      }`}
+                      title="List view"
+                      onclick={() => (viewMode = "list")}
+                    >
+                      <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                        <path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z" />
+                      </svg>
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          {/if}
+        </div>
+      </div>
+    {/if}
   </div>
 
   <Deferred data="projects_data">
@@ -320,7 +418,7 @@
       <section class="mt-6 animate-pulse">
         <div class="h-7 w-80 rounded bg-darkless"></div>
         <div
-          class="mt-6 grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-5"
+          class="mt-6 grid grid-cols-[repeat(auto-fill,minmax(320px,1fr))] gap-6"
         >
           {#each Array.from( { length: skeletonCount }, ) as _unused, index (index)}
             <div
@@ -365,16 +463,24 @@
                   : "No active projects match this filter."}
               </p>
             </div>
+          {:else if filteredAndSortedProjects.length == 0}
+            <div
+              class="mt-4 rounded-xl border border-surface-200 bg-dark p-8 text-center"
+            >
+              <p class="text-muted">No projects match your search query.</p>
+            </div>
           {:else}
             <div
-              class="mt-6 grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-5"
+              class={viewMode === "grid"
+                ? "mt-6 grid grid-cols-[repeat(auto-fill,minmax(320px,1fr))] gap-6"
+                : "mt-6 space-y-4"}
             >
-              {#each projects_data.projects as project (project.id)}
+              {#each filteredAndSortedProjects as project (project.id)}
                 {@const projectHref = project.show_path
                   ? withIntervalParams(project.show_path)
                   : null}
                 <article
-                  class="group relative flex min-h-36 overflow-hidden rounded-2xl {projectHref
+                  class="group relative flex {viewMode === 'list' ? 'flex-row items-start sm:items-center sm:justify-between' : ''} min-h-36 overflow-hidden rounded-2xl {projectHref
                     ? 'cursor-pointer'
                     : ''}"
                 >
@@ -386,11 +492,11 @@
                     ></Link>
                   {/if}
                   <div
-                    class="relative flex min-w-0 flex-1 flex-col rounded-2xl border border-surface-200 bg-dark p-5 transition-colors duration-300 ease-out group-hover:border-surface-300"
+                    class="relative flex min-w-0 {viewMode === 'list' ? 'flex-1' : ''} flex-col rounded-2xl border border-surface-200 bg-dark p-5 transition-colors duration-300 ease-out group-hover:border-surface-300"
                   >
                     <div class="grid gap-3">
                       <div
-                        class="flex min-w-0 items-start justify-between gap-3"
+                        class="flex min-w-0 {viewMode === 'list' ? 'flex-1' : ''} items-start justify-between gap-3"
                       >
                         <div class="min-w-0 flex-1">
                           <h3
@@ -400,14 +506,16 @@
                             {project.name}
                           </h3>
                         </div>
-                        <p
-                          class="shrink-0 text-lg font-semibold tabular-nums text-primary/80"
-                        >
-                          {project.duration_label}
-                        </p>
+                        {#if viewMode === "grid"}
+                          <p
+                            class="shrink-0 text-lg font-semibold tabular-nums text-primary/80"
+                          >
+                            {project.duration_label}
+                          </p>
+                        {/if}
                       </div>
 
-                      {#if project.repository?.description}
+                      {#if project.repository?.description && viewMode === "grid"}
                         <p
                           class="line-clamp-2 text-sm leading-relaxed text-surface-content/70 text-pretty"
                         >
@@ -479,26 +587,9 @@
                     </div>
 
                     <div
-                      class="mt-auto flex flex-wrap items-center gap-2 pt-5 text-sm text-surface-content/55"
-                    >
-                      <!-- {#if project.repository?.stars}
-                    <p
-                      class="inline-flex items-center gap-1.5 rounded-full bg-yellow/10 px-3 py-1.5 font-semibold tabular-nums text-yellow"
+                      class="mt-auto flex flex-wrap items-center gap-2 {viewMode === 'grid' ? 'pt-5' : viewMode === 'list' ? 'pt-0' : ''} text-sm text-surface-content/55"
                     >
-                      <svg
-                        class="h-4 w-4 fill-current"
-                        viewBox="0 0 20 20"
-                        aria-hidden="true"
-                      >
-                        <path
-                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
-                        />
-                      </svg>
-                      {project.repository.stars}
-                    </p>
-                  {/if} -->
-
-                      {#if project.repository?.formatted_languages}
+                      {#if project.repository?.formatted_languages && viewMode === "grid"}
                         <p
                           class="flex min-w-0 items-center gap-1.5 rounded-full bg-surface-content/5 px-3 py-1.5"
                         >
@@ -520,7 +611,7 @@
                         </p>
                       {/if}
 
-                      {#if project.repository?.last_commit_ago}
+                      {#if project.repository?.last_commit_ago && viewMode === "grid"}
                         <p
                           class="flex items-center gap-1.5 rounded-full bg-surface-content/5 px-3 py-1.5"
                         >
@@ -537,14 +628,13 @@
                             />
                           </svg>
                           <span class="text-surface-content/50"
-                            >Last commit {project.repository
-                              .last_commit_ago}</span
+                            >Last commit {project.repository.last_commit_ago}</span
                           >
                         </p>
                       {/if}
                     </div>
 
-                    {#if project.broken_name}
+                    {#if project.broken_name && viewMode === "grid"}
                       <div
                         class="mt-4 rounded-2xl border border-yellow/30 bg-yellow/10 p-3"
                       >
@@ -596,6 +686,13 @@
                       </div>
                     {/if}
                   </div>
+                  {#if viewMode === "list"}
+                    <div
+                      class="shrink-0 sm:ml-4 text-lg font-semibold tabular-nums text-primary/80"
+                    >
+                      {project.duration_label}
+                    </div>
+                  {/if}
                 </article>
               {/each}
             </div>

From 3ae570a8db1fa97e19b07bc617e30250f780c705 Mon Sep 17 00:00:00 2001
From: Mat Manna <matmanna@outlook.com>
Date: Wed, 20 May 2026 22:27:14 -0400
Subject: [PATCH 06/10] fix: way less broken

---
 app/javascript/pages/Projects/Index.svelte | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/app/javascript/pages/Projects/Index.svelte b/app/javascript/pages/Projects/Index.svelte
index 26eb7350f..493b4354f 100644
--- a/app/javascript/pages/Projects/Index.svelte
+++ b/app/javascript/pages/Projects/Index.svelte
@@ -418,7 +418,7 @@
       <section class="mt-6 animate-pulse">
         <div class="h-7 w-80 rounded bg-darkless"></div>
         <div
-          class="mt-6 grid grid-cols-[repeat(auto-fill,minmax(320px,1fr))] gap-6"
+          class="mt-6 grid grid-cols-[repeat(auto-fill,minmax(360px,1fr))] gap-6"
         >
           {#each Array.from( { length: skeletonCount }, ) as _unused, index (index)}
             <div
@@ -472,7 +472,7 @@
           {:else}
             <div
               class={viewMode === "grid"
-                ? "mt-6 grid grid-cols-[repeat(auto-fill,minmax(320px,1fr))] gap-6"
+                ? "mt-6 grid grid-cols-[repeat(auto-fill,minmax(360px,1fr))] justify-items-stretch gap-6"
                 : "mt-6 space-y-4"}
             >
               {#each filteredAndSortedProjects as project (project.id)}
@@ -480,7 +480,7 @@
                   ? withIntervalParams(project.show_path)
                   : null}
                 <article
-                  class="group relative flex {viewMode === 'list' ? 'flex-row items-start sm:items-center sm:justify-between' : ''} min-h-36 overflow-hidden rounded-2xl {projectHref
+                  class="group relative flex w-full {viewMode === 'list' ? 'flex-row items-start sm:items-center sm:justify-between' : ''} min-h-36 overflow-hidden rounded-2xl {projectHref
                     ? 'cursor-pointer'
                     : ''}"
                 >
@@ -492,7 +492,7 @@
                     ></Link>
                   {/if}
                   <div
-                    class="relative flex min-w-0 {viewMode === 'list' ? 'flex-1' : ''} flex-col rounded-2xl border border-surface-200 bg-dark p-5 transition-colors duration-300 ease-out group-hover:border-surface-300"
+                    class="relative flex w-full min-w-0 {viewMode === 'list' ? 'flex-1' : ''} flex-col rounded-2xl border border-surface-200 bg-dark p-5 transition-colors duration-300 ease-out group-hover:border-surface-300"
                   >
                     <div class="grid gap-3">
                       <div
@@ -512,6 +512,12 @@
                           >
                             {project.duration_label}
                           </p>
+                        {:else}
+                          <p
+                            class="shrink-0 text-lg font-semibold tabular-nums text-primary/80"
+                          >
+                            {project.duration_label}
+                          </p>
                         {/if}
                       </div>
 
@@ -686,13 +692,6 @@
                       </div>
                     {/if}
                   </div>
-                  {#if viewMode === "list"}
-                    <div
-                      class="shrink-0 sm:ml-4 text-lg font-semibold tabular-nums text-primary/80"
-                    >
-                      {project.duration_label}
-                    </div>
-                  {/if}
                 </article>
               {/each}
             </div>

From b0dd7b7188481a0c0a9df4c0b375ffc2e8bdf0ab Mon Sep 17 00:00:00 2001
From: Mat Manna <matmanna@outlook.com>
Date: Wed, 20 May 2026 23:04:33 -0400
Subject: [PATCH 07/10] fix: layotu

Co-authored-by: Copilot <copilot@github.com>
---
 app/javascript/pages/Projects/Index.svelte | 108 ++++++++++++++++-----
 1 file changed, 82 insertions(+), 26 deletions(-)

diff --git a/app/javascript/pages/Projects/Index.svelte b/app/javascript/pages/Projects/Index.svelte
index 493b4354f..5efe2dc39 100644
--- a/app/javascript/pages/Projects/Index.svelte
+++ b/app/javascript/pages/Projects/Index.svelte
@@ -259,7 +259,7 @@
   };
 
   const cardActionClass =
-    "inline-flex h-10 w-10 items-center justify-center rounded-xl border border-surface-200/60 bg-surface-content/5 text-surface-content/70 shadow-sm transition-colors duration-200 ease-out hover:bg-surface-content/10 hover:text-surface-content focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 cursor-pointer";
+    "inline-flex h-8 w-8 items-center justify-center rounded-lg border border-surface-200/60 bg-surface-content/5 text-surface-content/70 shadow-sm transition-colors duration-200 ease-out hover:bg-surface-content/10 hover:text-surface-content focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 cursor-pointer";
 </script>
 
 <svelte:head>
@@ -307,18 +307,17 @@
   {/if}
 
   <div class="mt-6 flex flex-wrap items-end gap-3">
-    <div class="sm:max-w-3xs">
-      <IntervalSelect
-        from={from || ""}
-        selected={interval || ""}
-        to={to || ""}
-        onchange={changeInterval}
-      />
-    </div>
-
     {#if projects_data}
       <div class="min-w-0 flex-1">
         <div class="flex flex-wrap items-end gap-3">
+          <div class="min-w-0 flex-[0_1_18rem]">
+            <IntervalSelect
+              from={from || ""}
+              selected={interval || ""}
+              to={to || ""}
+              onchange={changeInterval}
+            />
+          </div>
           <div class="min-w-0 flex-[0_1_16rem]">
             <span class="mb-1.5 block text-xs font-medium uppercase tracking-wider text-secondary/80">
               Search Projects
@@ -473,7 +472,7 @@
             <div
               class={viewMode === "grid"
                 ? "mt-6 grid grid-cols-[repeat(auto-fill,minmax(360px,1fr))] justify-items-stretch gap-6"
-                : "mt-6 space-y-4"}
+                : "mt-6 space-y-2"}
             >
               {#each filteredAndSortedProjects as project (project.id)}
                 {@const projectHref = project.show_path
@@ -488,15 +487,15 @@
                     <Link
                       href={projectHref}
                       aria-label={`View ${project.name}`}
-                      class="absolute inset-0 z-10 rounded-2xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
+                      class="absolute inset-0 z-10 rounded-2xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 py-0 "
                     ></Link>
                   {/if}
                   <div
-                    class="relative flex w-full min-w-0 {viewMode === 'list' ? 'flex-1' : ''} flex-col rounded-2xl border border-surface-200 bg-dark p-5 transition-colors duration-300 ease-out group-hover:border-surface-300"
+                    class="relative flex w-full min-w-0 {viewMode === 'list' ? 'flex-1 p-3 sm:p-4' : 'p-5'} flex-col rounded-2xl border border-surface-200 bg-dark transition-colors duration-300 ease-out group-hover:border-surface-300"
                   >
                     <div class="grid gap-3">
                       <div
-                        class="flex min-w-0 {viewMode === 'list' ? 'flex-1' : ''} items-start justify-between gap-3"
+                        class="flex min-w-0 {viewMode === 'list' ? 'flex-1 items-center' : 'items-start justify-between'} gap-3"
                       >
                         <div class="min-w-0 flex-1">
                           <h3
@@ -506,19 +505,76 @@
                             {project.name}
                           </h3>
                         </div>
-                        {#if viewMode === "grid"}
-                          <p
-                            class="shrink-0 text-lg font-semibold tabular-nums text-primary/80"
-                          >
-                            {project.duration_label}
-                          </p>
-                        {:else}
+                        <div class="flex shrink-0 items-center gap-3 {viewMode === 'list' ? 'ml-auto' : ''}">
+                          {#if viewMode === "list"}
+                            <div
+                              class="relative z-20 flex flex-wrap items-center justify-end gap-2"
+                            >
+                              {#if project.repository?.homepage}
+                                <a
+                                  href={project.repository.homepage}
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  title="View project website"
+                                  class={cardActionClass}
+                                >
+                                  <Web size={20} />
+                                </a>
+                              {/if}
+                              {#if project.repo_url}
+                                <a
+                                  href={project.repo_url}
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  title="View repository"
+                                  class={cardActionClass}
+                                >
+                                  <GithubFill size={20} />
+                                </a>
+                              {/if}
+                              {#if project.manage_enabled}
+                                <Button
+                                  type="button"
+                                  unstyled
+                                  class={cardActionClass}
+                                  title={project.repo_url
+                                    ? "Edit mapping"
+                                    : "Link repository"}
+                                  onclick={() => openMappingEditor(project)}
+                                >
+                                  <Edit size={20} />
+                                </Button>
+                              {/if}
+                              {#if show_archived && project.unarchive_path}
+                                <Button
+                                  type="button"
+                                  unstyled
+                                  class={cardActionClass}
+                                  title="Restore project"
+                                  onclick={() => openStatusChangeModal(project, true)}
+                                >
+                                  <Reply size={20} />
+                                </Button>
+                              {:else if !show_archived && project.archive_path}
+                                <Button
+                                  type="button"
+                                  unstyled
+                                  class={cardActionClass}
+                                  title="Archive project"
+                                  onclick={() =>
+                                    openStatusChangeModal(project, false)}
+                                >
+                                  <Archive size={20} />
+                                </Button>
+                              {/if}
+                            </div>
+                          {/if}
                           <p
-                            class="shrink-0 text-lg font-semibold tabular-nums text-primary/80"
+                            class="text-lg font-semibold tabular-nums text-primary/80"
                           >
                             {project.duration_label}
                           </p>
-                        {/if}
+                        </div>
                       </div>
 
                       {#if project.repository?.description && viewMode === "grid"}
@@ -529,9 +585,8 @@
                         </p>
                       {/if}
 
-                      <div
-                        class="relative z-20 flex flex-wrap items-center gap-2"
-                      >
+                      <div class="relative z-20 flex flex-wrap items-center gap-2">
+                        {#if viewMode === "grid"}
                         {#if project.repository?.homepage}
                           <a
                             href={project.repository.homepage}
@@ -589,6 +644,7 @@
                             <Archive size={20} />
                           </Button>
                         {/if}
+                        {/if}
                       </div>
                     </div>
 

From 91d0978a2a462c9c5d04477992be7d6e5aac70b1 Mon Sep 17 00:00:00 2001
From: Mat Manna <matmanna@outlook.com>
Date: Thu, 21 May 2026 07:54:34 -0400
Subject: [PATCH 08/10] fix: restore broken_name in listview

---
 app/javascript/pages/Projects/Index.svelte | 44 +++++++++++++++-------
 1 file changed, 30 insertions(+), 14 deletions(-)

diff --git a/app/javascript/pages/Projects/Index.svelte b/app/javascript/pages/Projects/Index.svelte
index 01dce1b51..05b1ed9b0 100644
--- a/app/javascript/pages/Projects/Index.svelte
+++ b/app/javascript/pages/Projects/Index.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Deferred, Form, Link, router } from "@inertiajs/svelte";
+  import { onMount } from "svelte";
   import Archive from "hcicons-svelte/archive";
   import Edit from "hcicons-svelte/edit";
   import GithubFill from "hcicons-svelte/github-fill";
@@ -114,7 +115,11 @@
   let sortBy = $state<"most_time" | "least_time" | "name_az" | "name_za">(
     "most_time",
   );
-  let archivalStatus = $state(show_archived ? "archived" : "active");
+  let archivalStatus = $state("active");
+
+  onMount(() => {
+    archivalStatus = show_archived ? "archived" : "active";
+  });
 
   const skeletonCount = $derived.by(() => {
     const safeCount = Number.isFinite(total_projects) ? total_projects : 0;
@@ -749,22 +754,33 @@
                     </div>
 
                     {#if project.broken_name}
-                      <button
-                        type="button"
-                        class="mt-4 block w-full cursor-pointer rounded-2xl border border-yellow/30 bg-yellow/10 p-3 text-left hover:bg-yellow/15"
-                        onclick={() => (brokenNameModalOpen = true)}
-                      >
-                        <p
-                          class="text-sm leading-relaxed text-yellow/80 text-pretty"
+                      {#if viewMode === 'grid'}
+                        <button
+                          type="button"
+                          class="mt-4 block w-full cursor-pointer rounded-2xl border border-yellow/30 bg-yellow/10 p-3 text-left hover:bg-yellow/15"
+                          onclick={() => (brokenNameModalOpen = true)}
                         >
-                          Time can't be used in Hack Club programs
-                          <span
-                            class="underline underline-offset-2 hover:text-yellow"
+                          <p
+                            class="text-sm leading-relaxed text-yellow/80 text-pretty"
                           >
-                            (why?)
+                            Time can't be used in Hack Club programs
+                            <span
+                              class="underline underline-offset-2 hover:text-yellow"
+                            >
+                              (why?)
+                            </span>
+                          </p>
+                        </button>
+                      {:else}
+                        <div class="mt-2 flex items-center gap-3">
+                          <span class="inline-flex items-center gap-2 rounded-full bg-yellow/10 px-3 py-1 text-sm text-yellow/80">
+                            <svg class="h-4 w-4 text-yellow/80" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M1 21h22L12 2 1 21zM12 16v2h0v-2h0zm0-6v4h0v-4h0z"/></svg>
+                            <button type="button" class="underline text-sm" onclick={() => (brokenNameModalOpen = true)}>
+                              Time can't be used for programs (why?)
+                            </button>
                           </span>
-                        </p>
-                      </button>
+                        </div>
+                      {/if}
                     {/if}
 
                     {#if project.manage_enabled && editingProjectKey === project.project_key && updatePathFor(project)}

From 09ecc907e051344af658e14b1ba1afe6364e5ccb Mon Sep 17 00:00:00 2001
From: Mat Manna <matmanna@outlook.com>
Date: Thu, 21 May 2026 07:58:29 -0400
Subject: [PATCH 09/10] chore: format

---
 app/javascript/pages/Projects/Index.svelte | 219 +++++++++++++--------
 1 file changed, 140 insertions(+), 79 deletions(-)

diff --git a/app/javascript/pages/Projects/Index.svelte b/app/javascript/pages/Projects/Index.svelte
index 05b1ed9b0..e7c63ffb0 100644
--- a/app/javascript/pages/Projects/Index.svelte
+++ b/app/javascript/pages/Projects/Index.svelte
@@ -354,7 +354,9 @@
             />
           </div>
           <div class="min-w-0 flex-[0_1_16rem]">
-            <span class="mb-1.5 block text-xs font-medium uppercase tracking-wider text-secondary/80">
+            <span
+              class="mb-1.5 block text-xs font-medium uppercase tracking-wider text-secondary/80"
+            >
               Search Projects
             </span>
             <input
@@ -367,7 +369,9 @@
           </div>
 
           <div class="min-w-0 flex-[0_1_12rem]">
-            <span class="mb-1.5 block text-xs font-medium uppercase tracking-wider text-secondary/80">
+            <span
+              class="mb-1.5 block text-xs font-medium uppercase tracking-wider text-secondary/80"
+            >
               Archival Status
             </span>
             <Select
@@ -386,7 +390,9 @@
               <div class="flex min-w-0 items-end gap-3">
                 <div class="min-w-0 flex-[0_1_12rem]">
                   <div class="mb-1.5 flex items-end gap-3">
-                    <span class="block text-xs font-medium uppercase tracking-wider text-secondary/80">
+                    <span
+                      class="block text-xs font-medium uppercase tracking-wider text-secondary/80"
+                    >
                       Sort
                     </span>
                   </div>
@@ -403,10 +409,14 @@
                   />
                 </div>
                 <div class="shrink-0 flex flex-col items-start">
-                  <span class="mb-1.5 block text-xs font-medium uppercase tracking-wider text-secondary/80">
+                  <span
+                    class="mb-1.5 block text-xs font-medium uppercase tracking-wider text-secondary/80"
+                  >
                     View
                   </span>
-                  <div class="inline-flex shrink-0 gap-1 rounded-lg border border-surface-200 bg-surface-content/5 p-1">
+                  <div
+                    class="inline-flex shrink-0 gap-1 rounded-lg border border-surface-200 bg-surface-content/5 p-1"
+                  >
                     <Button
                       type="button"
                       unstyled
@@ -418,8 +428,15 @@
                       title="Grid view"
                       onclick={() => (viewMode = "grid")}
                     >
-                      <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                        <path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z" />
+                      <svg
+                        class="h-4 w-4"
+                        fill="currentColor"
+                        viewBox="0 0 24 24"
+                        aria-hidden="true"
+                      >
+                        <path
+                          d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"
+                        />
                       </svg>
                     </Button>
                     <Button
@@ -433,8 +450,15 @@
                       title="List view"
                       onclick={() => (viewMode = "list")}
                     >
-                      <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                        <path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z" />
+                      <svg
+                        class="h-4 w-4"
+                        fill="currentColor"
+                        viewBox="0 0 24 24"
+                        aria-hidden="true"
+                      >
+                        <path
+                          d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"
+                        />
                       </svg>
                     </Button>
                   </div>
@@ -534,9 +558,13 @@
             >
               {#each filteredAndSortedProjects as project (project.id)}
                 {@const showPath = showPathFor(project)}
-                {@const projectHref = showPath ? withIntervalParams(showPath) : null}
+                {@const projectHref = showPath
+                  ? withIntervalParams(showPath)
+                  : null}
                 <article
-                  class="group relative flex w-full {viewMode === 'list' ? 'flex-row items-start sm:items-center sm:justify-between' : ''} min-h-36 overflow-hidden rounded-2xl {projectHref
+                  class="group relative flex w-full {viewMode === 'list'
+                    ? 'flex-row items-start sm:items-center sm:justify-between'
+                    : ''} min-h-36 overflow-hidden rounded-2xl {projectHref
                     ? 'cursor-pointer'
                     : ''}"
                 >
@@ -548,11 +576,15 @@
                     ></Link>
                   {/if}
                   <div
-                    class="relative flex w-full min-w-0 {viewMode === 'list' ? 'flex-1 p-3 sm:p-4' : 'p-5'} flex-col rounded-2xl border border-surface-200 bg-dark transition-colors duration-300 ease-out group-hover:border-surface-300"
+                    class="relative flex w-full min-w-0 {viewMode === 'list'
+                      ? 'flex-1 p-3 sm:p-4'
+                      : 'p-5'} flex-col rounded-2xl border border-surface-200 bg-dark transition-colors duration-300 ease-out group-hover:border-surface-300"
                   >
                     <div class="grid gap-3">
                       <div
-                        class="flex min-w-0 {viewMode === 'list' ? 'flex-1 items-center' : 'items-start justify-between'} gap-3"
+                        class="flex min-w-0 {viewMode === 'list'
+                          ? 'flex-1 items-center'
+                          : 'items-start justify-between'} gap-3"
                       >
                         <div class="min-w-0 flex-1">
                           <h3
@@ -562,7 +594,12 @@
                             {project.name}
                           </h3>
                         </div>
-                        <div class="flex shrink-0 items-center gap-3 {viewMode === 'list' ? 'ml-auto' : ''}">
+                        <div
+                          class="flex shrink-0 items-center gap-3 {viewMode ===
+                          'list'
+                            ? 'ml-auto'
+                            : ''}"
+                        >
                           {#if viewMode === "list"}
                             <div
                               class="relative z-20 flex flex-wrap items-center justify-end gap-2"
@@ -608,7 +645,8 @@
                                   unstyled
                                   class={cardActionClass}
                                   title="Restore project"
-                                  onclick={() => openStatusChangeModal(project, true)}
+                                  onclick={() =>
+                                    openStatusChangeModal(project, true)}
                                 >
                                   <Reply size={20} />
                                 </Button>
@@ -642,71 +680,79 @@
                         </p>
                       {/if}
 
-                      <div class="relative z-20 flex flex-wrap items-center gap-2">
+                      <div
+                        class="relative z-20 flex flex-wrap items-center gap-2"
+                      >
                         {#if viewMode === "grid"}
-                        {#if project.repository?.homepage}
-                          <a
-                            href={project.repository.homepage}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            title="View project website"
-                            class={cardActionClass}
-                          >
-                            <Web size={20} />
-                          </a>
-                        {/if}
-                        {#if project.repo_url}
-                          <a
-                            href={project.repo_url}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            title="View repository"
-                            class={cardActionClass}
-                          >
-                            <GithubFill size={20} />
-                          </a>
-                        {/if}
-                        {#if project.manage_enabled}
-                          <Button
-                            type="button"
-                            unstyled
-                            class={cardActionClass}
-                            title={project.repo_url
-                              ? "Edit mapping"
-                              : "Link repository"}
-                            onclick={() => openMappingEditor(project)}
-                          >
-                            <Edit size={20} />
-                          </Button>
-                        {/if}
-                        {#if show_archived && unarchivePathFor(project)}
-                          <Button
-                            type="button"
-                            unstyled
-                            class={cardActionClass}
-                            title="Restore project"
-                            onclick={() => openStatusChangeModal(project, true)}
-                          >
-                            <Reply size={20} />
-                          </Button>
-                        {:else if !show_archived && archivePathFor(project)}
-                          <Button
-                            type="button"
-                            unstyled
-                            class={cardActionClass}
-                            title="Archive project"
-                            onclick={() =>
-                              openStatusChangeModal(project, false)}
-                          >
-                            <Archive size={20} />
-                          </Button>
-                        {/if}
+                          {#if project.repository?.homepage}
+                            <a
+                              href={project.repository.homepage}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              title="View project website"
+                              class={cardActionClass}
+                            >
+                              <Web size={20} />
+                            </a>
+                          {/if}
+                          {#if project.repo_url}
+                            <a
+                              href={project.repo_url}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              title="View repository"
+                              class={cardActionClass}
+                            >
+                              <GithubFill size={20} />
+                            </a>
+                          {/if}
+                          {#if project.manage_enabled}
+                            <Button
+                              type="button"
+                              unstyled
+                              class={cardActionClass}
+                              title={project.repo_url
+                                ? "Edit mapping"
+                                : "Link repository"}
+                              onclick={() => openMappingEditor(project)}
+                            >
+                              <Edit size={20} />
+                            </Button>
+                          {/if}
+                          {#if show_archived && unarchivePathFor(project)}
+                            <Button
+                              type="button"
+                              unstyled
+                              class={cardActionClass}
+                              title="Restore project"
+                              onclick={() =>
+                                openStatusChangeModal(project, true)}
+                            >
+                              <Reply size={20} />
+                            </Button>
+                          {:else if !show_archived && archivePathFor(project)}
+                            <Button
+                              type="button"
+                              unstyled
+                              class={cardActionClass}
+                              title="Archive project"
+                              onclick={() =>
+                                openStatusChangeModal(project, false)}
+                            >
+                              <Archive size={20} />
+                            </Button>
+                          {/if}
                         {/if}
                       </div>
                     </div>
 
                     <div
-                      class="mt-auto flex flex-wrap items-center gap-2 {viewMode === 'grid' ? 'pt-5' : viewMode === 'list' ? 'pt-0' : ''} text-sm text-surface-content/55"
+                      class="mt-auto flex flex-wrap items-center gap-2 {viewMode ===
+                      'grid'
+                        ? 'pt-5'
+                        : viewMode === 'list'
+                          ? 'pt-0'
+                          : ''} text-sm text-surface-content/55"
                     >
                       {#if project.repository?.formatted_languages && viewMode === "grid"}
                         <p
@@ -747,14 +793,15 @@
                             />
                           </svg>
                           <span class="text-surface-content/50"
-                            >Last commit {project.repository.last_commit_ago}</span
+                            >Last commit {project.repository
+                              .last_commit_ago}</span
                           >
                         </p>
                       {/if}
                     </div>
 
                     {#if project.broken_name}
-                      {#if viewMode === 'grid'}
+                      {#if viewMode === "grid"}
                         <button
                           type="button"
                           class="mt-4 block w-full cursor-pointer rounded-2xl border border-yellow/30 bg-yellow/10 p-3 text-left hover:bg-yellow/15"
@@ -773,9 +820,23 @@
                         </button>
                       {:else}
                         <div class="mt-2 flex items-center gap-3">
-                          <span class="inline-flex items-center gap-2 rounded-full bg-yellow/10 px-3 py-1 text-sm text-yellow/80">
-                            <svg class="h-4 w-4 text-yellow/80" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M1 21h22L12 2 1 21zM12 16v2h0v-2h0zm0-6v4h0v-4h0z"/></svg>
-                            <button type="button" class="underline text-sm" onclick={() => (brokenNameModalOpen = true)}>
+                          <span
+                            class="inline-flex items-center gap-2 rounded-full bg-yellow/10 px-3 py-1 text-sm text-yellow/80"
+                          >
+                            <svg
+                              class="h-4 w-4 text-yellow/80"
+                              viewBox="0 0 24 24"
+                              fill="currentColor"
+                              aria-hidden="true"
+                              ><path
+                                d="M1 21h22L12 2 1 21zM12 16v2h0v-2h0zm0-6v4h0v-4h0z"
+                              /></svg
+                            >
+                            <button
+                              type="button"
+                              class="underline text-sm"
+                              onclick={() => (brokenNameModalOpen = true)}
+                            >
                               Time can't be used for programs (why?)
                             </button>
                           </span>

From 9091013034ad3aac873590c2eeb6cad8c096dfbb Mon Sep 17 00:00:00 2001
From: Mat Manna <matmanna@outlook.com>
Date: Thu, 21 May 2026 08:17:51 -0400
Subject: [PATCH 10/10] fix: better list view margin

---
 app/javascript/pages/Projects/Index.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/javascript/pages/Projects/Index.svelte b/app/javascript/pages/Projects/Index.svelte
index e7c63ffb0..e338515b8 100644
--- a/app/javascript/pages/Projects/Index.svelte
+++ b/app/javascript/pages/Projects/Index.svelte
@@ -554,7 +554,7 @@
             <div
               class={viewMode === "grid"
                 ? "mt-6 grid grid-cols-[repeat(auto-fill,minmax(360px,1fr))] justify-items-stretch gap-6"
-                : "mt-6 space-y-2"}
+                : "mt-6 space-y-4"}
             >
               {#each filteredAndSortedProjects as project (project.id)}
                 {@const showPath = showPathFor(project)}
@@ -564,7 +564,7 @@
                 <article
                   class="group relative flex w-full {viewMode === 'list'
                     ? 'flex-row items-start sm:items-center sm:justify-between'
-                    : ''} min-h-36 overflow-hidden rounded-2xl {projectHref
+                    : 'min-h-36'} overflow-hidden rounded-2xl {projectHref
                     ? 'cursor-pointer'
                     : ''}"
                 >
@@ -572,7 +572,7 @@
                     <Link
                       href={projectHref}
                       aria-label={`View ${project.name}`}
-                      class="absolute inset-0 z-10 rounded-2xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 py-0 "
+                      class="absolute inset-0 z-10 rounded-2xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 "
                     ></Link>
                   {/if}
                   <div