sw status

apps/catalog/domain/model.software.go

@@ -11,5 +11,6 @@ type Software struct {
 	Site     string    `gorm:"size:255" json:"site"`
 	License  string    `gorm:"size:128" json:"license"`
 	Platform string    `gorm:"size:128" json:"platform"`
+	Status   string    `gorm:"size:20;default:development" json:"status"`
 	Releases []Release `json:"-"`
 }

apps/frontend/src/pages/catalog.astro

@@ -16,16 +16,29 @@ const softwares = json.softwares;
     </div>
   </header>
 
-  <main class="main-container py-12 px-4 grid grid-cols-1 gap-8 mt-0">
-    {softwares.map(({ software, releases, latestRelease }) => (
-      <div class="software-card">
-        <div class="software-card-content">
-          <h2 class="software-title">{software.title}</h2>
-          <p class="software-desc">{software.desc}</p>
-          <div class="software-meta">
-            <div>Author: {software.author}</div>
-            <div>Platform: {software.platform}</div>
-          </div>
+  <main class="main-container py-12 px-4 mt-0">
+    <div class="flex flex-wrap gap-4 mb-8 justify-center filter-buttons pb-4">
+      <button class="filter-btn active" data-filter="all">All</button>
+      <button class="filter-btn" data-filter="released">Released</button>
+      <button class="filter-btn" data-filter="development">Development</button>
+      <button class="filter-btn" data-filter="archived">Archived</button>
+    </div>
+
+    <div class="grid grid-cols-1 gap-8 software-list">
+      {softwares.map(({ software, releases, latestRelease }) => (
+        <div class="software-card" data-status={software.status}>
+          <div class="software-card-content">
+            <div class="flex items-center gap-3 mb-2">
+              <h2 class="software-title mb-0">{software.title}</h2>
+              <span class={`status-badge status-${software.status}`}>
+                {software.status}
+              </span>
+            </div>
+            <p class="software-desc">{software.desc}</p>
+            <div class="software-meta">
+              <div>Author: {software.author}</div>
+              <div>Platform: {software.platform}</div>
+            </div>
 
           {latestRelease && (
             <div class="latest-release-actions">
@@ -141,10 +154,49 @@ const softwares = json.softwares;
         </div>
       </div>
     ))}
+    </div>
   </main>
 </Layout>
 
+<script>
+  const filterButtons = document.querySelectorAll('.filter-btn');
+  const softwareCards = document.querySelectorAll('.software-card');
+
+  filterButtons.forEach(button => {
+    button.addEventListener('click', () => {
+      // Update active button
+      filterButtons.forEach(btn => btn.classList.remove('active'));
+      button.classList.add('active');
+
+      const filter = button.getAttribute('data-filter');
+
+      softwareCards.forEach(card => {
+        const status = (card as HTMLElement).getAttribute('data-status');
+        if (filter === 'all' || status === filter) {
+          (card as HTMLElement).style.display = 'block';
+        } else {
+          (card as HTMLElement).style.display = 'none';
+        }
+      });
+    });
+  });
+</script>
+
 <style>
+  .filter-btn {
+    @apply px-4 py-2 rounded-full border-2 border-purple-600 text-purple-600 font-bold transition-all hover:bg-purple-600 hover:text-white;
+  }
+  .filter-btn.active {
+    @apply bg-purple-600 text-white;
+  }
+
+  .status-badge {
+    @apply px-2 py-0.5 rounded text-xs font-bold uppercase;
+  }
+  .status-released { @apply bg-green-100 text-green-800 border border-green-200; }
+  .status-development { @apply bg-yellow-100 text-yellow-800 border border-yellow-200; }
+  .status-archived { @apply bg-gray-100 text-gray-800 border border-gray-200; }
+
   .software-card {
     @apply bg-white shadow-lg relative rounded-xl overflow-hidden hover:shadow-2xl transition-shadow duration-300;
   }