v1.4 - Login fixes, etc

2026-04-27 21:53:36 +12:00
parent 8cf9bfb441
commit c9580ac2eb
33 changed files with 2283 additions and 202 deletions
@@ -0,0 +1,135 @@
+<script lang="ts">
+  import { clientSession } from '$lib/session';
+
+  const currentYear = new Date().getFullYear();
+</script>
+
+<section class="page-intro">
+  <div>
+    <p class="eyebrow">Workspace Settings</p>
+    <h2>Account and workspace preferences.</h2>
+    <p>Review your current session, navigation setup, and the client workspace details shown across the app.</p>
+  </div>
+</section>
+
+<section class="settings-grid">
+  <article class="surface-card">
+    <p class="eyebrow">Session</p>
+    <h3>Signed-in account</h3>
+    <div class="details-list">
+      <div>
+        <span>Name</span>
+        <strong>{$clientSession?.name ?? 'No active session'}</strong>
+      </div>
+      <div>
+        <span>Email</span>
+        <strong>{$clientSession?.email ?? 'Sign in required'}</strong>
+      </div>
+      <div>
+        <span>Role</span>
+        <strong>{$clientSession?.role ?? 'Client'}</strong>
+      </div>
+    </div>
+  </article>
+
+  <article class="surface-card">
+    <p class="eyebrow">Display</p>
+    <h3>Navigation behaviour</h3>
+    <div class="details-list">
+      <div>
+        <span>Desktop</span>
+        <strong>Left rail navigation</strong>
+      </div>
+      <div>
+        <span>iPad / Tablet</span>
+        <strong>Bottom navigation drawer</strong>
+      </div>
+      <div>
+        <span>Copyright</span>
+        <strong>&copy; {currentYear} Hunter Premium Produce</strong>
+      </div>
+    </div>
+  </article>
+</section>
+
+<style>
+  h2,
+  h3,
+  p {
+    margin: 0;
+  }
+
+  .eyebrow {
+    color: #7f8e85;
+    font-size: 0.78rem;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .page-intro,
+  .settings-grid {
+    margin-bottom: 1.2rem;
+  }
+
+  .page-intro h2 {
+    margin: 0.35rem 0 0.45rem;
+    font-size: clamp(1.7rem, 3vw, 2.2rem);
+    font-weight: 700;
+  }
+
+  .page-intro p:last-child,
+  .details-list span {
+    color: var(--muted);
+  }
+
+  .settings-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
+  }
+
+  .surface-card {
+    display: grid;
+    gap: 1rem;
+    padding: 1.2rem;
+    border: 1px solid var(--line);
+    border-radius: 1.25rem;
+    background: var(--panel);
+    box-shadow: var(--shadow);
+  }
+
+  .surface-card h3 {
+    font-size: 1.1rem;
+    font-weight: 700;
+  }
+
+  .details-list {
+    display: grid;
+    gap: 0.85rem;
+  }
+
+  .details-list div {
+    padding: 0.9rem 0.95rem;
+    border: 1px solid var(--line);
+    border-radius: 0.95rem;
+    background: var(--panel-soft);
+  }
+
+  .details-list span {
+    display: block;
+    margin-bottom: 0.28rem;
+    font-size: 0.84rem;
+  }
+
+  .details-list strong {
+    font-size: 0.98rem;
+    font-weight: 700;
+  }
+
+  @media (max-width: 900px) {
+    .settings-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>