Add whiteboard frame mode (Nextcloud Whiteboard / Excalidraw over WebDAV)

New third mode alongside photos/calendar: fetches a .whiteboard file
over plain WebDAV (Basic auth -- generic, not Nextcloud-specific) and
renders it via a small Node.js sidecar using Excalidraw's own real
export code (@excalidraw/utils + @resvg/resvg-js, no headless browser),
since a .whiteboard file turns out to be Excalidraw scene JSON, not an
image. The sidecar runs as a second process inside this same container
(Dockerfile installs Node, start.sh backgrounds it before exec'ing
uvicorn) rather than a separate docker-compose service -- lightweight,
stateless, reachable only at 127.0.0.1 from the Python process, nothing
worth independently scaling.

The rendered PNG is treated exactly like a photo from there on --
composed/quantized through the existing image_pipeline (letterboxed,
never cropped) rather than a second parallel rendering pipeline.

WebDAV credentials support the common "it's actually the same Nextcloud
account as my CalDAV" case (an explicit opt-in checkbox, not silently
inferred) while still working with any WebDAV server generically.
Frame-level source (URL + owning account) follows the same owner-
controls-their-own-data permission split as calendar sources and the
week view's task list: only the account owner can point a frame at it,
anyone linked can clear it.

Honest limitation: this environment has no Node.js/npm, so
render-service/ is written carefully against each library's documented
API (verified via the npm registry, including transitive dependency
licenses after the CalDAV/AGPL surprise earlier this session) but has
never actually been executed. First real docker build is the first
true test -- see render-service/README.md.

server/app/templates/_frame_mode_select.html

@@ -1,4 +1,5 @@
 <select id="frame-mode-select" class="frame-mode-select" title="Frame mode" aria-label="Frame mode">
   <option value="photos" {% if frame.mode == "photos" %}selected{% endif %}>Photos</option>
   <option value="calendar" {% if frame.mode == "calendar" %}selected{% endif %}>Calendar</option>
+  <option value="whiteboard" {% if frame.mode == "whiteboard" %}selected{% endif %}>Whiteboard</option>
 </select>

server/app/templates/_frame_tabs.html

@@ -3,5 +3,7 @@
   <a href="/frames/{{ frame.id }}/config" class="{% if active_tab == 'config' %}active{% endif %}">Configuration</a>
   <a href="/frames/{{ frame.id }}/calendar"
      class="{% if active_tab == 'calendar' %}active{% endif %} {% if frame.mode != 'calendar' %}tab-disabled{% endif %}">Calendar</a>
+  <a href="/frames/{{ frame.id }}/whiteboard"
+     class="{% if active_tab == 'whiteboard' %}active{% endif %} {% if frame.mode != 'whiteboard' %}tab-disabled{% endif %}">Whiteboard</a>
   <a href="/frames/{{ frame.id }}/stats" class="{% if active_tab == 'stats' %}active{% endif %}">Stats</a>
 </nav>

server/app/templates/frame_whiteboard.html

@@ -0,0 +1,80 @@
+{% extends "app_base.html" %}
+
+{% block title %}{{ frame.name or "Frame" }} · Whiteboard{% endblock %}
+{% block page_title %}{% include "_frame_name_edit.html" %}{% endblock %}
+{% block mode_picker %}{% include "_frame_mode_picker.html" %}{% endblock %}
+
+{% block device_status %}{% include "_device_status_bar.html" %}{% endblock %}
+{% block tabs %}{% include "_frame_tabs.html" %}{% endblock %}
+
+{% block content %}
+  <div id="control-banner" class="control-banner" style="display: none;">
+    <span id="control-holder"></span>
+    <button type="button" id="take-control" class="btn-inline">Take control</button>
+  </div>
+
+  {% if frame.mode != 'whiteboard' %}
+    <div class="info-box">This frame is currently in <strong>{{ frame.mode|capitalize }}</strong> mode --
+      settings below take effect once you switch it to <strong>Whiteboard</strong> mode
+      using the selector at the top of the page.</div>
+  {% endif %}
+
+  <div class="layout">
+    <div class="main-col">
+      <section class="card">
+        <h2 class="card-title">Whiteboard source</h2>
+        <p class="sub">Renders a Nextcloud Whiteboard (or any Excalidraw
+          scene) fetched over WebDAV -- credentials set up in
+          <a href="/settings">Settings</a>.</p>
+
+        {% if whiteboard_source %}
+          <p class="sub" style="margin-top: 10px;">
+            Currently showing <strong>{{ whiteboard_source.url }}</strong>
+            using <strong>{{ whiteboard_source.display_name }}</strong>'s
+            WebDAV account.
+            <button type="button" class="btn-inline secondary" id="whiteboard-source-clear">Clear</button>
+          </p>
+        {% else %}
+          <p class="sub" style="margin-top: 10px;">No whiteboard configured yet.</p>
+        {% endif %}
+
+        {% if viewer_has_webdav_creds %}
+          <form id="whiteboard-source-form" style="margin-top: 16px;">
+            <label>{{ "Change to one of your own files" if whiteboard_source else "Use one of your own files" }}
+              <input type="text" id="whiteboard-url-input"
+                     placeholder="https://cloud.example.com/remote.php/dav/files/you/Boards/family.whiteboard"
+                     value="{{ whiteboard_source.url if whiteboard_source and whiteboard_source.user_id == user.id else '' }}">
+            </label>
+            <p class="sub" style="margin-top: 4px;">The direct WebDAV URL
+              to the specific file -- in Nextcloud's Files app, this is
+              the file's path under
+              <code>remote.php/dav/files/&lt;your-username&gt;/</code>.</p>
+            <button type="submit">Save</button>
+          </form>
+        {% else %}
+          <p class="sub" style="margin-top: 10px;">Set up WebDAV credentials
+            in <a href="/settings">Settings</a> first to point this frame at
+            one of your own files.</p>
+        {% endif %}
+      </section>
+    </div>
+
+    <div class="side-col">
+      <section class="card">
+        <h2 class="card-title">Preview</h2>
+        <p class="sub">How this frame's whiteboard currently renders.</p>
+        <img class="preview-img" id="whiteboard-preview" alt="Whiteboard preview">
+        <button type="button" class="secondary" id="whiteboard-preview-refresh">Refresh preview</button>
+      </section>
+    </div>
+  </div>
+
+  <div id="result"></div>
+{% endblock %}
+
+{% block scripts %}
+  <script>window.FRAME_API = {{ ("/api/frames/" ~ frame.id) | tojson }};</script>
+  <script src="/static/device_status_bar.js"></script>
+  <script src="/static/frame_header.js"></script>
+  <script src="/static/frame_whiteboard.js"></script>
+{% endblock %}

server/app/templates/settings.html

@@ -71,6 +71,32 @@
         you're linked to from that frame's Calendar tab, so a frame only
         shows calendars people have actually chosen to share with it.</p>
 
+      <h2 class="card-title" style="margin-top: 24px;">Whiteboard (WebDAV)</h2>
+      <p class="sub">Credentials for whiteboard frame mode -- fetching a
+        specific file (e.g. a Nextcloud Whiteboard board) over WebDAV.
+        Any WebDAV server works, not just Nextcloud.</p>
+      <div class="checkbox-row">
+        <input type="checkbox" id="webdav_reuse_caldav_creds" name="webdav_reuse_caldav_creds"
+               value="true" {% if user.webdav_reuse_caldav_creds %}checked{% endif %}>
+        <label for="webdav_reuse_caldav_creds" style="margin: 0; font-weight: normal;">
+          Reuse my CalDAV username/password above (only works if it's the
+          same account -- e.g. Nextcloud's CalDAV and its regular file
+          storage share one login)</label>
+      </div>
+      <div id="webdav-creds-fields">
+        <label>WebDAV username
+          <input type="text" id="webdav_username" name="webdav_username" autocomplete="off"
+                 value="{{ user.webdav_username }}">
+        </label>
+        <label>WebDAV password
+          <input type="password" id="webdav_password" name="webdav_password" autocomplete="off"
+                 placeholder="{% if user.webdav_password %}(unchanged -- enter a new password to replace){% else %}app password or account password{% endif %}">
+        </label>
+      </div>
+      <p class="sub" style="margin-top: 8px;">Doesn't show up anywhere by
+        itself -- point a specific frame's Whiteboard tab at a file URL
+        using this account.</p>
+
       <h2 class="card-title" style="margin-top: 24px;">Change password</h2>
       <label>Current password
         <input type="password" name="current_password" autocomplete="current-password">