Merge pull request #11 from kellenmurphy/ui/footer-and-privacy

UI: footer mobile centering, badges, and privacy notice

Author: kellenmurphy

.github/workflows/ci.yml

@@ -34,8 +34,16 @@ jobs:
             - name: Type check
               run: npm run check
 
-            - name: Test
-              run: npm test
+            - name: Test with coverage
+              run: npm run coverage
+
+            - name: Upload coverage to Codecov
+              # codecov/codecov-action v6.0.0
+              uses: codecov/codecov-action@57e3a136b779b570ffcdbf80b3bdc90e7fab3de2
+              with:
+                  token: ${{ secrets.CODECOV_TOKEN }}
+                  files: ./coverage/lcov.info
+                  fail_ci_if_error: true
 
             - name: Build
               run: npm run build

src/routes/+layout.svelte

@@ -98,30 +98,48 @@
 
     <footer class="px-6 py-4">
         <div
-            class="mx-auto flex max-w-5xl flex-wrap items-center justify-center gap-x-3 gap-y-1 text-xs text-neutral-400 dark:text-neutral-600"
+            class="mx-auto flex max-w-5xl flex-col items-center gap-2 text-xs text-neutral-400 dark:text-neutral-600 sm:flex-row sm:flex-wrap sm:justify-center sm:gap-x-3 sm:gap-y-1"
         >
             <a
                 href="/privacy"
                 class="transition-colors hover:text-neutral-600 dark:hover:text-neutral-400"
                 >Privacy</a
             >
-            <span aria-hidden="true">&middot;</span>
+            <span aria-hidden="true" class="hidden sm:inline">&middot;</span>
             <span>
                 Made with ♥ by <a
                     href="https://kellenmurphy.com"
                     class="transition-colors hover:text-neutral-600 dark:hover:text-neutral-400"
                     >Kellen "The SAML Guy" Murphy</a
                 >
             </span>
-            <span aria-hidden="true">&middot;</span>
-            <a
-                href="https://github.com/kellenmurphy/samlguy"
-                class="transition-colors hover:text-neutral-600 dark:hover:text-neutral-400"
-                target="_blank"
-                rel="noopener noreferrer"
-            >
-                GitHub
-            </a>
+            <span aria-hidden="true" class="hidden sm:inline">&middot;</span>
+            <span class="flex items-center gap-2">
+                <a
+                    href="https://github.com/kellenmurphy/samlguy/actions/workflows/ci.yml"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label="CI status"
+                >
+                    <img
+                        src="https://img.shields.io/github/actions/workflow/status/kellenmurphy/samlguy/ci.yml?branch=main&style=flat-square&label=CI&labelColor=404040"
+                        alt="CI status"
+                        class="h-4"
+                    />
+                </a>
+                <a
+                    href="https://app.codecov.io/gh/kellenmurphy/samlguy"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label="Code coverage"
+                >
+                    <img
+                        src="https://img.shields.io/codecov/c/github/kellenmurphy/samlguy?style=flat-square&label=coverage&labelColor=404040"
+                        alt="Code coverage"
+                        class="h-4"
+                    />
+                </a>
+            </span>
         </div>
     </footer>
 </div>

src/routes/+page.svelte

@@ -147,6 +147,24 @@
         class="h-48 w-full resize-y rounded-lg border border-neutral-300 bg-neutral-50 px-4 py-3 font-mono text-sm text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:outline-none dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100 dark:placeholder-neutral-600"
     ></textarea>
 
+    <p class="flex items-center gap-1.5 text-xs text-neutral-400 dark:text-neutral-600">
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="h-3 w-3 shrink-0"
+            aria-hidden="true"
+        >
+            <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+            <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+        </svg>
+        Decoded entirely in your browser — nothing you paste is sent to any server.
+    </p>
+
     {#if detected === 'jwt' && results.length === 0}
         <div class="flex items-center gap-3">
             <span

src/routes/privacy/+page.svelte

@@ -7,6 +7,29 @@
     <h1 class="text-2xl font-bold">Privacy Policy</h1>
     <p class="mt-1 text-sm text-neutral-500">Effective: May 2025</p>
 
+    <div
+        class="mt-6 flex items-start gap-3 rounded-lg border border-green-200 bg-green-50 px-4 py-3 dark:border-green-900/60 dark:bg-green-950/30"
+    >
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="mt-0.5 h-4 w-4 shrink-0 text-green-700 dark:text-green-400"
+            aria-hidden="true"
+        >
+            <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+            <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+        </svg>
+        <p class="text-sm font-medium text-green-800 dark:text-green-400">
+            Everything is processed in your browser. Nothing you paste — SAML assertions, JWTs,
+            certificates, or any other identity data — is ever transmitted to or stored on any server.
+        </p>
+    </div>
+
     <div class="mt-8 space-y-6 text-sm leading-relaxed text-neutral-700 dark:text-neutral-300">
         <section class="space-y-2">
             <h2 class="text-base font-semibold text-neutral-900 dark:text-neutral-100">

vitest.config.ts

@@ -12,6 +12,7 @@ export default defineConfig({
         include: ['src/lib/**/*.test.ts'],
         coverage: {
             provider: 'v8',
+            reporter: ['text', 'lcov'],
             include: ['src/lib/**/*.ts'],
             exclude: ['src/lib/**/*.test.ts', 'src/lib/fixtures.test-helper.ts']
         }