Add Rails backend: accounts via magic link, server documents, sharing

The app becomes a Rails 8 application; the Vue frontend moves to
app/frontend and is served through vite_rails.

- Without an account documents stay in the browser (IndexedDB). Sign-in
  is by magic link or the 6-digit code from the same mail; afterwards
  local documents can be uploaded into the account.
- Server documents (/d/<id>) with versioned saves and a single-editor
  lock per browser tab; others see them read-only and follow by polling.
- Sharing via link (works without an account) and via e-mail invitation,
  roles viewer/editor; the owner manages links and people.
- Store gains a read-only mode that blocks all content changes.
- Solid Queue, Cache and Cable share the one PostgreSQL database.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

app/frontend/components/StatusBar.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useDocument } from '../store/document';
+import { formatValue } from '../store/format';
+
+const store = useDocument();
+const agg = computed(() => store.selectionAggregate.value);
+const fmt = (n: number) =>
+  formatValue(Math.round(n * 1e6) / 1e6, store.activeLocale.value);
+
+const zoom = computed(() => store.activeZoom.value);
+const setZoom = store.setZoom;
+</script>
+
+<template>
+  <div class="status-bar">
+    <span class="range">{{ store.selectionRangeName.value }}</span>
+    <span v-if="agg.count > 0" class="metric">Summe <b>{{ fmt(agg.sum) }}</b></span>
+    <span v-if="agg.count > 0" class="metric">Mittel <b>{{ fmt(agg.avg) }}</b></span>
+    <span class="metric">Anzahl <b>{{ agg.count }}</b></span>
+    <span class="metric dim">Zellen {{ agg.cells }}</span>
+    <span class="divider" />
+    <div class="zoom-ctl" title="Zoom (dieses Blatt)">
+      <button @click="setZoom(zoom - 0.1)">−</button>
+      <button class="fit" @click="setZoom(1)">{{ Math.round(zoom * 100) }}%</button>
+      <button @click="setZoom(zoom + 0.1)">＋</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* shares one row with SheetTabs.vue (see App.vue's .bottom-bar) -- pinned to
+   the right, scrolls internally rather than wrapping if it ever runs out of
+   room, so the combined row always stays a single line. */
+.status-bar {
+  display: flex;
+  align-items: center;
+  flex: 0 1 auto;
+  gap: 4px 14px;
+  padding: 5px 14px;
+  font-size: 12px;
+  color: var(--text-dim);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  overflow-x: auto;
+  scrollbar-width: thin;
+}
+.metric b {
+  color: var(--text);
+  font-weight: 600;
+}
+.metric.dim {
+  opacity: 0.7;
+}
+.range {
+  font-weight: 600;
+  color: var(--text);
+}
+.divider {
+  width: 1px;
+  align-self: stretch;
+  background: var(--border);
+  flex: none;
+}
+.zoom-ctl {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex: none;
+}
+.zoom-ctl button {
+  border: 1px solid var(--border);
+  background: var(--surface);
+  border-radius: 6px;
+  width: 20px;
+  height: 20px;
+  line-height: 1;
+  cursor: pointer;
+  color: var(--text-dim);
+}
+.zoom-ctl button:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+.zoom-ctl button.fit {
+  width: auto;
+  padding: 0 7px;
+  font-variant-numeric: tabular-nums;
+}
+</style>