feat: multiple layouts

public/styles.css

@@ -144,6 +144,103 @@ body {
     height: 20px;
 }
 
+/* Layout Toggle Button */
+.layout-toggle-wrapper {
+    position: relative;
+}
+
+.layout-toggle-btn {
+    background: transparent;
+    border: 1px solid var(--border);
+    color: var(--text-secondary);
+    padding: 0.5rem;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    width: 36px;
+    height: 36px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.layout-toggle-btn:hover {
+    background: var(--surface-light);
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+}
+
+.layout-toggle-btn.active {
+    background: rgba(99, 102, 241, 0.1);
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+}
+
+.layout-toggle-btn svg {
+    width: 20px;
+    height: 20px;
+}
+
+/* Layout Dropdown */
+.layout-dropdown {
+    position: absolute;
+    top: calc(100% + 0.5rem);
+    right: 0;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    box-shadow: 0 8px 24px var(--shadow-lg);
+    min-width: 140px;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-10px);
+    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
+    z-index: 1000;
+    overflow: hidden;
+}
+
+.layout-dropdown.show {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+.layout-option {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.625rem 0.875rem;
+    background: transparent;
+    border: none;
+    color: var(--text-primary);
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: background 0.2s ease;
+    text-align: left;
+}
+
+.layout-option:hover {
+    background: var(--surface-light);
+}
+
+.layout-option.active {
+    background: rgba(99, 102, 241, 0.1);
+    color: var(--primary-color);
+}
+
+.layout-option .check-icon {
+    width: 16px;
+    height: 16px;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.layout-option.active .check-icon {
+    opacity: 1;
+}
+
 .container {
     width: 100%;
     padding: 1.5rem 1rem;
@@ -546,6 +643,128 @@ body {
     animation: fadeIn 1s ease-out;
 }
 
+/* Layout: Masonry */
+.links-container.layout-masonry {
+    display: block;
+    column-count: auto;
+    column-width: 280px;
+    column-gap: 1.5rem;
+    animation: fadeIn 1s ease-out;
+}
+
+.links-container.layout-masonry .link-card {
+    display: inline-block;
+    width: 100%;
+    margin-bottom: 1.5rem;
+    break-inside: avoid;
+    page-break-inside: avoid;
+    height: auto;
+}
+
+.links-container.layout-masonry .link-image {
+    width: 100%;
+    height: auto;
+    min-height: 0;
+}
+
+.links-container.layout-masonry .link-image-link {
+    width: 100%;
+    height: auto;
+    display: block;
+}
+
+.links-container.layout-masonry .link-image img {
+    width: 100%;
+    height: auto;
+    object-fit: contain;
+    max-height: 400px;
+    display: block;
+}
+
+.links-container.layout-masonry .link-content {
+    flex: 0 1 auto;
+    padding: 1rem 1.25rem;
+}
+
+.links-container.layout-masonry .link-title {
+    font-size: 1.1rem;
+    margin-bottom: 0.5rem;
+    -webkit-line-clamp: 2;
+}
+
+.links-container.layout-masonry .link-description {
+    display: none;
+}
+
+.links-container.layout-masonry .link-url {
+    display: none;
+}
+
+.links-container.layout-masonry .link-footer {
+    margin-top: auto;
+    padding-top: 0.75rem;
+}
+
+.links-container.layout-masonry .empty-state {
+    column-span: all;
+}
+
+/* Layout: Detail (default - current layout) */
+.links-container.layout-detail {
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+}
+
+/* Layout: List */
+.links-container.layout-list {
+    grid-template-columns: 1fr;
+    gap: 0.75rem;
+}
+
+.links-container.layout-list .link-card {
+    flex-direction: row;
+    border-radius: 10px;
+    padding: 0;
+}
+
+.links-container.layout-list .link-image {
+    width: 100px;
+    height: 100px;
+    flex-shrink: 0;
+    border-radius: 0;
+}
+
+.links-container.layout-list .link-content {
+    padding: 0.75rem 1rem;
+    flex: 1;
+}
+
+.links-container.layout-list .link-title {
+    font-size: 1rem;
+    margin-bottom: 0.375rem;
+    -webkit-line-clamp: 1;
+}
+
+.links-container.layout-list .link-description {
+    font-size: 0.875rem;
+    -webkit-line-clamp: 1;
+    margin-bottom: 0.5rem;
+    line-height: 1.4;
+}
+
+.links-container.layout-list .link-url {
+    font-size: 0.8rem;
+    margin-bottom: 0.5rem;
+}
+
+.links-container.layout-list .link-footer {
+    padding-top: 0.5rem;
+    border-top: 1px solid var(--border);
+}
+
+.links-container.layout-list .link-date {
+    font-size: 0.75rem;
+}
+
 .empty-state {
     grid-column: 1 / -1;
     text-align: center;
@@ -582,12 +801,25 @@ body {
     justify-content: center;
     color: var(--text-muted);
     font-size: 0.9rem;
+    position: relative;
+}
+
+.link-image-link {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    color: inherit;
+    cursor: pointer;
 }
 
 .link-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
+    display: block;
 }
 
 .link-content {
@@ -816,6 +1048,14 @@ body {
         display: flex;
     }
 
+    .layout-toggle-wrapper {
+        position: relative;
+    }
+
+    .layout-dropdown {
+        right: 0;
+    }
+
     .add-link-wrapper {
         width: 100%;
         margin: 0;