Present SRS metadata with a colored pill, instead of raw text attributes

src/ts/core/roam/roam-node.ts

@@ -26,12 +26,12 @@ export class RoamNode {
         return RoamNode.getInlinePropertyMatcher(name).exec(this.text)?.[1]
     }
 
-    withInlineProperty(name: string, value: string) {
+    withInlineProperty(name: string, value: string, newline: boolean = false) {
         const currentValue = this.getInlineProperty(name)
         const property = RoamNode.createInlineProperty(name, value)
         const newText = currentValue
             ? this.text.replace(RoamNode.getInlinePropertyMatcher(name), property)
-            : this.text + ' ' + property
+            : this.text + (newline ? '\n' : ' ') + property
         // @ts-ignore
         return new this.constructor(newText, this.selection)
     }

src/ts/core/srs/AnkiScheduler.ts

@@ -1,7 +1,7 @@
 import {SM2Node} from './SM2Node'
 import {Scheduler, SRSSignal} from './scheduler'
 import {randomFromInterval} from '../common/random'
-import {addDays} from '../common/date';
+import {addDays} from '../common/date'
 
 /**
  * Again (1)
@@ -40,12 +40,11 @@ export class AnkiScheduler implements Scheduler {
         const newParams = this.getNewParameters(node, signal)
 
         const currentDate = new Date()
-        return (
-            node
-                .withInterval(newParams.interval)
-                .withFactor(newParams.factor)
-                .withDate(addDays(currentDate, Math.ceil(newParams.interval)))
-        )
+        return node
+            .withInterval(newParams.interval)
+            .withFactor(newParams.factor)
+            .withDate(addDays(currentDate, Math.ceil(newParams.interval)))
+            .withCursorAtTheEnd()
     }
 
     getNewParameters(node: SM2Node, signal: SRSSignal) {
@@ -93,6 +92,5 @@ export class AnkiScheduler implements Scheduler {
 }
 
 class SM2Params {
-    constructor(readonly interval: number, readonly factor: number) {
-    }
+    constructor(readonly interval: number, readonly factor: number) {}
 }

src/ts/core/srs/SM2Node.ts

@@ -1,7 +1,7 @@
-import {withDate} from '../roam/date/withDate'
-import {RoamNode, Selection} from '../roam/roam-node'
+import {NodeWithDate} from '../roam/date/withDate'
+import {Selection} from '../roam/roam-node'
 
-export class SM2Node extends withDate(RoamNode) {
+export class SM2Node extends NodeWithDate {
     constructor(text: string, selection: Selection = new Selection()) {
         super(text, selection)
     }
@@ -16,7 +16,7 @@ export class SM2Node extends withDate(RoamNode) {
     withInterval(interval: number): SM2Node {
         // Discarding the fractional part for display purposes/and so we don't get infinite number of intervals
         // Should potentially reconsider this later
-        return this.withInlineProperty(this.intervalProperty, Number(interval).toFixed(1))
+        return this.withInlineProperty(this.intervalProperty, Number(interval).toFixed(1), true)
     }
 
     get factor(): number | undefined {

src/ts/core/srs/srs.ts

@@ -1,8 +1,11 @@
+import {range} from 'lodash'
+
 import {Feature} from '../settings'
 import {SRSSignal, SRSSignals} from './scheduler'
 import {SM2Node} from './SM2Node'
 import {AnkiScheduler} from './AnkiScheduler'
 import {Roam} from '../roam/roam'
+import {injectStyle} from 'src/core/common/css'
 
 export const config: Feature = {
     id: 'srs',
@@ -20,3 +23,52 @@ export function rescheduleCurrentNote(signal: SRSSignal) {
     const scheduler = new AnkiScheduler()
     Roam.applyToCurrent(node => scheduler.schedule(new SM2Node(node.text, node.selection), signal))
 }
+
+const intervalStyle = (interval: string, nextReviewTip: string) => {
+    return `
+        [data-link-title^="[[interval]]:${interval}"] ~ [data-link-title]:last-child::before {
+            content: "${nextReviewTip}";
+        }
+    `
+}
+
+const easeStyle = (ease: string, darkColor: string, lightColor: string) => {
+    return `
+        [data-link-title^="[[factor]]:${ease}"] ~ [data-link-title]:last-child::before {
+            border: 1px solid ${darkColor};
+            color: ${darkColor};
+            background: ${lightColor};
+        }
+    `
+}
+
+injectStyle(
+    `
+    [data-link-title^="[[interval]]:"], [data-link-title^="[[factor]]:"] {
+        display: none;
+    }
+    [data-link-title^="[[factor]]:"] ~ [data-link-title]:last-child::before {
+            font-style: italic;
+            margin-right: 6px;
+            margin-left: -7px;
+            padding: 2px 4px;
+            border-radius: 4px;
+            font-size: 14px;
+            white-space: nowrap;
+            position: relative;
+            top: -1px;
+    }
+    ${intervalStyle('', '1+ month')}
+    ${intervalStyle('1.', '1 day')}
+    ${range(2, 6)
+        .map(days => intervalStyle(`${days}.`, `${days + 1} days`))
+        .join('\n')}
+    ${range(7, 30)
+        .map(days => intervalStyle(`${days}.`, `${Math.ceil(days / 7)} weeks`))
+        .join('\n')}
+    ${easeStyle('', 'darkgreen', 'honeydew')}
+    ${easeStyle('1.', '#ff5932', '#ff593226')}
+    ${easeStyle('2.', '#9194ff', '#b2b4ff24')}
+    `,
+    'roam-toolkit--srs'
+)