feat(web): implement Ship List page with create and delete modals

Adds ship cards with navigation, create ship modal with initial stats, inline delete confirmation, and supporting CSS for modals and cards. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-19 16:23:00 +01:00
parent 06428f79cd
commit 130cffd3c1
5 changed files with 360 additions and 1 deletions
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -177,3 +177,124 @@ a:hover {
 .btn-icon:hover {
  color: var(--color-text);
 }
+
+/* Modal */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-md);
+  z-index: 100;
+}
+
+.modal-content {
+  background: var(--color-surface);
+  border-radius: var(--radius);
+  padding: var(--spacing-lg);
+  width: 100%;
+  max-width: 400px;
+  max-height: 90dvh;
+  overflow-y: auto;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--spacing-md);
+}
+
+.modal-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.modal-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.modal-actions {
+  display: flex;
+  gap: var(--spacing-sm);
+  justify-content: flex-end;
+  margin-top: var(--spacing-md);
+}
+
+/* Form */
+.form-label {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  font-size: 0.85rem;
+  color: var(--color-text-muted);
+}
+
+/* Ship List */
+.ship-list-header {
+  margin-bottom: var(--spacing-md);
+}
+
+.ship-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.ship-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  padding: var(--spacing-md);
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+.ship-card:hover {
+  background: var(--color-surface-hover);
+}
+
+.ship-card-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.ship-card-name {
+  font-weight: 600;
+  font-size: 1rem;
+}
+
+.ship-card-updated {
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+}
+
+.ship-card-delete {
+  color: var(--color-danger);
+  font-size: 1.1rem;
+}
+
+.ship-card-delete:hover {
+  color: #ff6b6b;
+}
+
+/* Utility */
+.loading-text,
+.empty-text {
+  text-align: center;
+  color: var(--color-text-muted);
+  padding: var(--spacing-xl) 0;
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}