refactor: switch to minimal black and white design

src/app/boot/page.module.css

@@ -5,29 +5,28 @@
     margin: 0 auto;
     background: white;
     border-radius: 20px;
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.08);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
 }
 
 .success_title {
     font-size: 1.75rem;
     font-weight: 700;
     margin-bottom: 1rem;
-    color: #7c3aed;
+    color: #000;
 }
 
 .error_title {
     font-size: 1.75rem;
     font-weight: 700;
     margin-bottom: 1rem;
-    color: #ef4444;
+    color: #000;
 }
 
 .message_text {
-    color: #6b7280;
+    color: #000;
     margin-bottom: 1rem;
 }
 
 .message_text:last-child {
     margin-bottom: 0;
 }
-

src/app/global.css

@@ -1,4 +1,4 @@
-/* Professional Global Styles - Solid Project Inspired */
+/* Minimal Global Styles - Black and White */
 
 * {
     box-sizing: border-box;
@@ -9,20 +9,13 @@ body {
     padding: 2rem;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
     line-height: 1.6;
-    color: #1f2937;
-    background: #f5f7fa;
+    color: #000;
+    background: white;
     min-height: 100vh;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
 
-@media (prefers-color-scheme: dark) {
-    body {
-        background: #1a1a2e;
-        color: #e0e0e0;
-    }
-}
-
 img {
     max-width: 100px;
     max-height: 100px;
@@ -32,7 +25,7 @@ img {
 a:focus-visible,
 button:focus-visible,
 input:focus-visible {
-    outline: 2px solid #7c3aed;
+    outline: 2px solid #000;
     outline-offset: 2px;
     border-radius: 4px;
 }
@@ -49,14 +42,13 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 a {
-    color: #2563eb;
-    text-decoration: none;
-    transition: color 0.2s ease;
+    color: #000;
+    text-decoration: underline;
+    transition: opacity 0.2s ease;
 }
 
 a:hover {
-    color: #1d4ed8;
-    text-decoration: underline;
+    opacity: 0.7;
 }
 
 /* Smooth scrolling */

src/app/page.module.css

@@ -8,7 +8,7 @@
     font-size: 2rem;
     font-weight: 700;
     margin-bottom: 2.5rem;
-    color: #7c3aed;
+    color: #000;
     letter-spacing: -0.02em;
 }
 
@@ -18,18 +18,17 @@
     margin: 0 auto;
     background: white;
     border-radius: 20px;
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.08);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
 }
 
 .error_title {
     font-size: 1.75rem;
     font-weight: 700;
     margin-bottom: 1rem;
-    color: #ef4444;
+    color: #000;
 }
 
 .error_text {
-    color: #6b7280;
+    color: #000;
     margin-bottom: 1rem;
 }
-

src/components/ui/ListViewer.tsx

@@ -9,17 +9,15 @@ export function ListViewer({
     data,
     deleteHandler,
 }: ListViewerProps): React.ReactNode {
-    // TODO: describe
-    const render = (item: Item) => renderItem(item, deleteHandler);
+    // Convert LdSet to array to use standard Array.map() with index support
+    // LdSet.map() has different signature (value, set) instead of (value, index)
+    const itemsArray = data.item ? Array.from(data.item) : [];
+    const items = itemsArray.map((item, index) => renderItem(item, deleteHandler, index));
 
-    // TODO: describe why item is nullable
-    const items = data.item?.map(render);
-
-    // TODO: describe
     return <ul className={style.list}>{items}</ul>;
 }
 
-function renderItem(item: Item, deleteHandler?: ItemHandler): React.ReactNode {
+function renderItem(item: Item, deleteHandler?: ItemHandler, index?: number): React.ReactNode {
     // TODO: Describe why these are nullable
     if (!item.website) {
         throw new Error("website is required");
@@ -28,13 +26,15 @@ function renderItem(item: Item, deleteHandler?: ItemHandler): React.ReactNode {
         throw new Error("thumbnail is required");
     }
 
-    // TODO: descripbe @id
     const website = item.website["@id"];
     const thumbnail = item.thumbnail["@id"];
+
+    // Fixed: Use unique key to prevent React duplicate key errors
+    // Prefer item's @id, fallback to thumbnail (unique per item), then index as last resort
+    const uniqueKey = item["@id"] || thumbnail || `item-${index}`;
 
     return (
-        // TODO: Assume website is unique
-        <li key={website} className={style.list_item}>
+        <li key={uniqueKey} className={style.list_item}>
             <dl className={style.item_details}>
                 <div className={style.detail_row}>
                     <dt>name</dt>