release nouri 0.4.0 templates suggestions and mobile sheet

nouri/static/css/styles.css

@@ -67,6 +67,10 @@ body.has-mobile-nav {
     padding-bottom: 6rem;
 }
 
+body.sheet-open {
+    overflow: hidden;
+}
+
 a {
     color: inherit;
     text-decoration: none;
@@ -256,6 +260,11 @@ h3,
     display: none;
 }
 
+.mobile-sheet-backdrop[hidden],
+.mobile-more-sheet[hidden] {
+    display: none;
+}
+
 .content {
     display: grid;
     gap: 1.2rem;
@@ -576,6 +585,12 @@ h3 {
     gap: 1rem;
 }
 
+.template-library-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
+}
+
 .stack-form label,
 .planner-entry-form label,
 .filter-form label,
@@ -640,6 +655,37 @@ legend {
     border: 1px solid var(--line);
 }
 
+.check-option[hidden],
+.quick-select-card[hidden] {
+    display: none;
+}
+
+.quick-select-card {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.7rem;
+    padding: 0.85rem 0.95rem;
+    min-width: 220px;
+    border-radius: 18px;
+    border: 1px solid var(--line);
+    background: color-mix(in srgb, var(--surface-strong) 82%, #fff 18%);
+}
+
+.quick-select-card strong,
+.template-list-card strong {
+    display: block;
+}
+
+.quick-select-card small,
+.template-list-card p,
+.template-list-card small,
+.hint-chip,
+.suggestion-card p,
+.suggestion-card small,
+.week-template-row p {
+    color: var(--muted);
+}
+
 .inline-photo img {
     width: min(220px, 100%);
     border-radius: 18px;
@@ -739,6 +785,10 @@ legend {
     margin-bottom: 1rem;
 }
 
+.template-search-row {
+    margin-bottom: 0.9rem;
+}
+
 .quick-add-row form {
     margin: 0;
 }
@@ -769,6 +819,49 @@ legend {
     background: color-mix(in srgb, var(--surface) 88%, #fff 12%);
 }
 
+.template-card,
+.template-list-card,
+.suggestion-card {
+    padding: 0.95rem 1rem;
+    border-radius: 18px;
+    border: 1px solid var(--line);
+    background: color-mix(in srgb, var(--surface-strong) 84%, #fff 16%);
+}
+
+.template-list-card,
+.week-template-row {
+    display: grid;
+    gap: 0.9rem;
+}
+
+.week-template-row {
+    padding: 1rem;
+    border-radius: 18px;
+    border: 1px solid var(--line);
+    background: rgba(255, 255, 255, 0.34);
+}
+
+.hint-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.7rem;
+}
+
+.hint-chip {
+    margin: 0;
+    padding: 0.85rem 1rem;
+    border-radius: 16px;
+    background: color-mix(in srgb, var(--surface-strong) 80%, #fff 20%);
+    border: 1px solid var(--line);
+}
+
+.suggestion-row {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 0.8rem;
+    margin-bottom: 1rem;
+}
+
 .planner-entry-top {
     align-items: flex-start;
 }
@@ -915,6 +1008,71 @@ legend {
     mask-image: url("../icons/fa/sparkles.svg");
 }
 
+.icon-layer-group {
+    -webkit-mask-image: url("../icons/fa/layer-group.svg");
+    mask-image: url("../icons/fa/layer-group.svg");
+}
+
+.icon-ellipsis {
+    -webkit-mask-image: url("../icons/fa/ellipsis.svg");
+    mask-image: url("../icons/fa/ellipsis.svg");
+}
+
+.mobile-sheet-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 24;
+    background: rgba(33, 29, 28, 0.22);
+    backdrop-filter: blur(6px);
+}
+
+.mobile-more-sheet {
+    position: fixed;
+    left: 0.75rem;
+    right: 0.75rem;
+    bottom: 5.9rem;
+    z-index: 25;
+    padding: 1rem;
+    border-radius: 24px;
+    border: 1px solid var(--line);
+    background: var(--bg-elevated);
+    box-shadow: var(--shadow);
+    backdrop-filter: blur(24px) saturate(1.1);
+}
+
+.mobile-sheet-head,
+.mobile-sheet-actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.8rem;
+}
+
+.mobile-sheet-head small {
+    color: var(--muted);
+}
+
+.mobile-sheet-links {
+    display: grid;
+    gap: 0.45rem;
+    margin: 1rem 0;
+}
+
+.mobile-sheet-links a {
+    padding: 0.9rem 1rem;
+    border-radius: 16px;
+    border: 1px solid var(--line);
+    background: color-mix(in srgb, var(--surface-strong) 86%, #fff 14%);
+}
+
+.mobile-sheet-actions {
+    flex-wrap: wrap;
+}
+
+.mobile-sheet-actions > * {
+    flex: 1 1 180px;
+}
+
 @media (max-width: 1080px) {
     .site-header,
     .hero,
@@ -932,6 +1090,7 @@ legend {
 
     .stats-grid,
     .two-column,
+    .template-library-grid,
     .inline-form,
     .planner-entry-form,
     .planner-entry-form-wide,
@@ -1014,7 +1173,8 @@ legend {
     .mini-card-grid,
     .week-mini-grid,
     .week-overview-grid,
-    .more-link-grid {
+    .more-link-grid,
+    .template-library-grid {
         grid-template-columns: 1fr;
     }
 
@@ -1079,7 +1239,20 @@ legend {
         font-size: 0.78rem;
     }
 
-    .mobile-bottom-nav a.active {
+    .mobile-nav-button {
+        display: grid;
+        justify-items: center;
+        gap: 0.28rem;
+        padding: 0.55rem 0.35rem;
+        border-radius: 16px;
+        border: 0;
+        background: transparent;
+        color: var(--muted);
+        font-size: 0.78rem;
+    }
+
+    .mobile-bottom-nav a.active,
+    .mobile-nav-button.is-open {
         background: var(--accent-soft);
         color: var(--text);
     }
@@ -1088,4 +1261,21 @@ legend {
         width: 1rem;
         height: 1rem;
     }
+
+    .mobile-profile-link {
+        display: inline-flex;
+        padding: 0.35rem;
+        background: transparent;
+    }
+
+    .mobile-profile-link .mobile-profile-avatar {
+        width: 2.15rem;
+        height: 2.15rem;
+    }
+
+    .mobile-sheet-head,
+    .mobile-sheet-actions,
+    .week-template-row {
+        align-items: flex-start;
+    }
 }