feat: add Home page with user dashboard and habit tracking features

- Implemented Home component with user authentication and loading states.
- Created Welcome component for unauthenticated users with a sign-in option.
- Developed Dashboard component to display user's habits and progress.
- Added functionality for habit management, including adding, updating, and deleting habits.
- Integrated HabitChart and HabitHistory components for visual representation of habits.
- Introduced sharing functionality for progress via Discord integration.

feat: establish Discord sharing configuration and routes

- Added DiscordSharingConfig type and readDiscordSharingConfig function for environment variable management.
- Created sharing contracts for input validation and data structure.
- Implemented sharing routes for previewing and sending progress images to Discord.
- Added tests for sharing routes to ensure authentication and proper error handling.

src/pages/DesignSystem.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Link, useNavigate } from "react-router";
+import { useNavigate } from "react-router";
 import {
   Button,
   Checkbox,
@@ -14,6 +14,8 @@ import {
   HABIT_COLORS,
 } from "../components/design-system/calendar-model";
 
+import { PageLayout } from "../components/design-system/PageLayout";
+
 import { DesignSystemTabs } from "../components/design-system/DesignSystemTabs";
 
 export function DesignSystem() {
@@ -23,18 +25,7 @@ export function DesignSystem() {
   const [habitName, setHabitName] = useState("");
   const [savedName, setSavedName] = useState("");
   return (
-    <div className="ds-root" id="top">
-      <a className="ds-skip-link" href="#ds-main" onClick={(event) => {
-        event.preventDefault();
-        document.getElementById("ds-main")?.focus();
-      }}>Skip to content</a>
-      <header className="ds-header">
-        <Link className="ds-wordmark" to="/design-system">
-          minabot<span aria-hidden="true">.</span>
-        </Link>
-        <span className="ds-library-label">Interface library / 01</span>
-      </header>
-      <main id="ds-main" className="ds-main" tabIndex={-1}>
+    <PageLayout mainId="ds-main" wordmarkTo="/design-system" header={<span className="ds-library-label">Interface library / 01</span>}>
         <header className="ds-library-intro">
           <div>
             <p className="ds-eyebrow">MINABOT — INTERFACE LANGUAGE</p>
@@ -300,14 +291,6 @@ export function DesignSystem() {
             </>
           ) },
         ]} />
-        <footer className="ds-footer">
-          <span className="ds-wordmark">minabot.</span>
-          <span>A little, every day.</span>
-          <Button variant="text" onClick={() => window.scrollTo({ top: 0, behavior: "instant" })}>
-            Back to top ↑
-          </Button>
-        </footer>
-      </main>
-    </div>
+    </PageLayout>
   );
 }