clanker-saddle/src/pages/rules.html

<!DOCTYPE html>
<html lang="en">
<head>
    <pstm-uri>/rules</pstm-uri>
    <pstm-template>main</pstm-template>
</head>
<body>
    <section>
        <div class="cluster cluster-between">
            <h1>Rules</h1>
            <!-- Goal 41 T9 (ux-notes expander fatigue): "New rule" hid
                 behind a collapsed <details>. The primary action is now
                 a persistent button opening a Spry dialog (the
                 openAppDialog helper closes it on the action's
                 notify). -->
            <button type="button" class="btn-primary"
                    onclick="window.openAppDialog('rule-create-dialog')">+ New rule</button>
        </div>
        <p class="text-muted">Reusable instructions dispatched with every task that carries them —
            attach rules on the project and task pages.</p>
        <div stm-if="rules == null" class="page-loading" role="status" aria-label="Loading"><span class="spinner spinner-lg"></span></div>

        <div stm-if="rules != null">

            <div stm-for-rule-in="rules.rules" stm-key="rule.id" class="card">
                <!-- Goal 41 T9 (ux-notes rules): the Edit expander became
                     the in-place editor (the data-long-form engine in
                     app.js) — the edit half prefills from the slot's
                     current values, so it edits what IS instead of a
                     cold empty form. Delete left the row's face for a
                     visually secondary danger control inside the
                     confirm, inverting the old destructive-more-
                     prominent-than-edit accident. -->
                <div data-long-form data-field="rule-row">
                    <div class="card-header cluster cluster-between">
                        <h3 stm-text="rule.name">name</h3>
                        <button type="button" class="btn-ghost btn-sm" data-lf-toggle>Edit</button>
                    </div>
                    <div class="card-body" data-lf-view>
                        <div class="md" stm-markdown="rule.body">body</div>
                        <p class="text-muted">Created <span stm-text="rule.created_display">when</span></p>
                    </div>
                    <div class="card-body" data-lf-edit hidden>
                        <!-- No data-lf-src here: these editors live INSIDE a
                             stm-for loop, so no slot path can address the
                             row. The textarea instead prefills from
                             stm-text (textContent pre-fills a pristine
                             textarea; this page re-renders only on its
                             own actions, never on a pulse) and the input
                             from stm-attribute.value. The lf engine's
                             prefill pass simply finds no data-lf-src
                             controls and leaves both as rendered. -->
                        <form stm-action="rule.update" class="form-rows">
                            <input type="hidden" name="rule_id" stm-attribute.value="rule.id">
                            <div class="field"><label>Name</label>
                                <input type="text" name="name"
                                       stm-attribute.value="rule.name"></div>
                            <div class="field"><label>Body</label>
                                <textarea name="body" rows="4"
                                          stm-text="rule.body">body</textarea></div>
                            <div class="cluster">
                                <button type="submit" class="btn-primary">Save</button>
                                <button type="button" class="btn-ghost" data-lf-toggle>Cancel</button>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="card-body">
                    <!-- Goal 41 T9 (ux-notes rules): the blast radius —
                         where this rule is attached. A delete here
                         detaches it from every listed project and
                         task; naming them makes the confirm honest. -->
                    <p stm-if="rule.attachments.length > 0" class="text-muted">Attached to
                        <span stm-for-attachment-in="rule.attachments">
                            <a stm-if="attachment.kind == 'project'"
                               stm-attribute.href="'/projects/' + attachment.id"
                               stm-text="attachment.label">project</a>
                            <a stm-if="attachment.kind == 'task'"
                               stm-attribute.href="'/tasks/' + attachment.id"
                               stm-text="'#' + attachment.id + ' ' + attachment.label">task</a>
                        </span>
                    </p>
                    <p stm-if="rule.attachments.length == 0" class="text-muted">Not attached
                        anywhere — deleting it changes no dispatch.</p>
                    <button type="button" class="btn-ghost btn-sm"
                            stm-action="rule.delete"
                            stm-confirm="Delete this rule everywhere? It detaches from every project and task listed above.">Delete rule…</button>
                </div>
            </div>
            <p stm-if="rules.rules.length == 0" class="text-muted">No rules yet.</p>
        </div>

        <dialog id="rule-create-dialog" class="dialog-sm">
            <div class="dialog-titlebar">
                <p class="dialog-title">New rule</p>
                <button type="button" class="dialog-close" aria-label="Close"
                        onclick="window.closeAppDialog('rule-create-dialog')">×</button>
            </div>
            <form stm-action="rules.create">
                <div class="dialog-body form-rows">
                    <div class="field"><label for="rule-new-name">Name</label>
                        <input type="text" id="rule-new-name" name="name" required
                               placeholder="Use Invercargill"></div>
                    <div class="field"><label for="rule-new-body">Body</label>
                        <textarea name="body" id="rule-new-body" rows="3" required
                                  placeholder="Never use libgee; use Invercargill enumerables."></textarea></div>
                </div>
                <div class="dialog-footer">
                    <button type="button" class="btn-ghost"
                            onclick="window.closeAppDialog('rule-create-dialog')">Cancel</button>
                    <button type="submit" class="btn-primary">Create rule</button>
                </div>
            </form>
        </dialog>
    </section>
</body>
</html>