feat: Option for viewing sr decks and cards in tabs

CHANGELOG.md

@@ -1 +1 @@
-docs/docs/changelog.md
+docs/docs/changelog.md

CONTRIBUTING.md

@@ -1 +1 @@
-docs/docs/en/contributing.md
+docs/docs/en/contributing.md

docs/docs/changelog.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [Unreleased]
+
+-   feat: adds support for tabs [`#1169`](https://github.com/st3v3nmw/obsidian-spaced-repetition/pull/1169)
+
 #### [1.13.2](https://github.com/st3v3nmw/obsidian-spaced-repetition/compare/1.13.1...1.13.2)
 
 -   refactor: make fuzzing less aggressive [`#1147`](https://github.com/st3v3nmw/obsidian-spaced-repetition/pull/1147)

src/constants.ts

@@ -41,3 +41,5 @@ export const TICKS_PER_DAY = 24 * 3600 * 1000;
 
 export const SR_HTML_COMMENT_BEGIN = "<!--SR:";
 export const SR_HTML_COMMENT_END = "-->";
+
+export const SR_TAB_VIEW = "spaced-repetition-tab-view";

src/gui/flashcard-review-view.tsx → src/gui/card-ui.tsx

@@ -10,20 +10,20 @@ import {
     FlashcardReviewMode,
     IFlashcardReviewSequencer as IFlashcardReviewSequencer,
 } from "src/flashcard-review-sequencer";
-import { FlashcardModalMode } from "src/gui/flashcard-modal";
+import { FlashcardMode } from "src/gui/sr-modal";
 import { t } from "src/lang/helpers";
 import type SRPlugin from "src/main";
 import { Note } from "src/note";
 import { CardType, Question } from "src/question";
 import { SRSettings } from "src/settings";
 import { RenderMarkdownWrapper } from "src/utils/renderers";
 
-export class FlashcardReviewView {
+export class CardUI {
     public app: App;
     public plugin: SRPlugin;
-    public modalContentEl: HTMLElement;
-    public modalEl: HTMLElement;
-    public mode: FlashcardModalMode;
+    public contentEl: HTMLElement;
+    public parentEl: HTMLElement;
+    public mode: FlashcardMode;
 
     public view: HTMLDivElement;
 
@@ -63,7 +63,7 @@ export class FlashcardReviewView {
         reviewSequencer: IFlashcardReviewSequencer,
         reviewMode: FlashcardReviewMode,
         contentEl: HTMLElement,
-        modalEl: HTMLElement,
+        parentEl: HTMLElement,
         backClickHandler: () => void,
         editClickHandler: () => void,
     ) {
@@ -75,8 +75,8 @@ export class FlashcardReviewView {
         this.reviewMode = reviewMode;
         this.backClickHandler = backClickHandler;
         this.editClickHandler = editClickHandler;
-        this.modalContentEl = contentEl;
-        this.modalEl = modalEl;
+        this.contentEl = contentEl;
+        this.parentEl = parentEl;
         this.chosenDeck = null;
 
         // Build ui
@@ -89,7 +89,7 @@ export class FlashcardReviewView {
     init() {
         this._createBackButton();
 
-        this.view = this.modalContentEl.createDiv();
+        this.view = this.contentEl.createDiv();
         this.view.addClasses(["sr-flashcard", "sr-is-hidden"]);
 
         this.header = this.view.createDiv();
@@ -172,7 +172,7 @@ export class FlashcardReviewView {
     // #region -> Functions & helpers
 
     private async _drawContent() {
-        this.mode = FlashcardModalMode.Front;
+        this.mode = FlashcardMode.Front;
         const currentDeck: Deck = this.reviewSequencer.currentDeck;
 
         // Setup title
@@ -208,10 +208,7 @@ export class FlashcardReviewView {
 
     private _keydownHandler = (e: KeyboardEvent) => {
         // Prevents any input, if the edit modal is open
-        if (
-            document.activeElement.nodeName === "TEXTAREA" ||
-            this.mode === FlashcardModalMode.Closed
-        ) {
+        if (document.activeElement.nodeName === "TEXTAREA" || this.mode === FlashcardMode.Closed) {
             return;
         }
 
@@ -226,49 +223,49 @@ export class FlashcardReviewView {
                 consumeKeyEvent();
                 break;
             case "Space":
-                if (this.mode === FlashcardModalMode.Front) {
+                if (this.mode === FlashcardMode.Front) {
                     this._showAnswer();
                     consumeKeyEvent();
-                } else if (this.mode === FlashcardModalMode.Back) {
+                } else if (this.mode === FlashcardMode.Back) {
                     this._processReview(ReviewResponse.Good);
                     consumeKeyEvent();
                 }
                 break;
             case "Enter":
             case "NumpadEnter":
-                if (this.mode !== FlashcardModalMode.Front) {
+                if (this.mode !== FlashcardMode.Front) {
                     break;
                 }
                 this._showAnswer();
                 consumeKeyEvent();
                 break;
             case "Numpad1":
             case "Digit1":
-                if (this.mode !== FlashcardModalMode.Back) {
+                if (this.mode !== FlashcardMode.Back) {
                     break;
                 }
                 this._processReview(ReviewResponse.Hard);
                 consumeKeyEvent();
                 break;
             case "Numpad2":
             case "Digit2":
-                if (this.mode !== FlashcardModalMode.Back) {
+                if (this.mode !== FlashcardMode.Back) {
                     break;
                 }
                 this._processReview(ReviewResponse.Good);
                 consumeKeyEvent();
                 break;
             case "Numpad3":
             case "Digit3":
-                if (this.mode !== FlashcardModalMode.Back) {
+                if (this.mode !== FlashcardMode.Back) {
                     break;
                 }
                 this._processReview(ReviewResponse.Easy);
                 consumeKeyEvent();
                 break;
             case "Numpad0":
             case "Digit0":
-                if (this.mode !== FlashcardModalMode.Back) {
+                if (this.mode !== FlashcardMode.Back) {
                     break;
                 }
                 this._processReview(ReviewResponse.Reset);
@@ -314,7 +311,7 @@ export class FlashcardReviewView {
         }
         this.lastPressed = timeNow;
 
-        this.mode = FlashcardModalMode.Back;
+        this.mode = FlashcardMode.Back;
 
         this.resetButton.disabled = false;
 
@@ -411,7 +408,7 @@ export class FlashcardReviewView {
     // -> Header
 
     private _createBackButton() {
-        this.backButton = this.modalEl.createDiv();
+        this.backButton = this.parentEl.createDiv();
         this.backButton.addClasses(["sr-back-button", "sr-is-hidden"]);
         setIcon(this.backButton, "arrow-left");
         this.backButton.setAttribute("aria-label", t("BACK"));

src/gui/deck-list-view.tsx → src/gui/deck-ui.tsx

@@ -7,16 +7,16 @@ import {
     DeckStats,
     IFlashcardReviewSequencer as IFlashcardReviewSequencer,
 } from "src/flashcard-review-sequencer";
-import { FlashcardModalMode } from "src/gui/flashcard-modal";
+import { FlashcardMode } from "src/gui/sr-modal";
 import { t } from "src/lang/helpers";
 import type SRPlugin from "src/main";
 import { SRSettings } from "src/settings";
 import { TopicPath } from "src/topic-path";
 
-export class DeckListView {
+export class DeckUI {
     public plugin: SRPlugin;
-    public mode: FlashcardModalMode;
-    public modalContentEl: HTMLElement;
+    public mode: FlashcardMode;
+    public contentEl: HTMLElement;
 
     public view: HTMLDivElement;
     public header: HTMLDivElement;
@@ -39,7 +39,7 @@ export class DeckListView {
         this.plugin = plugin;
         this.settings = settings;
         this.reviewSequencer = reviewSequencer;
-        this.modalContentEl = contentEl;
+        this.contentEl = contentEl;
         this.startReviewOfDeck = startReviewOfDeck;
 
         // Build ui
@@ -50,7 +50,7 @@ export class DeckListView {
      * Initializes all static elements in the DeckListView
      */
     init(): void {
-        this.view = this.modalContentEl.createDiv();
+        this.view = this.contentEl.createDiv();
         this.view.addClasses(["sr-deck-list", "sr-is-hidden"]);
 
         this.header = this.view.createDiv();
@@ -72,7 +72,7 @@ export class DeckListView {
      * Shows the DeckListView & rerenders dynamic elements
      */
     show(): void {
-        this.mode = FlashcardModalMode.DecksList;
+        this.mode = FlashcardMode.Deck;
 
         // Redraw in case the stats have changed
         this._createHeaderStats();

src/gui/settings.tsx

@@ -574,6 +574,21 @@ export class SRSettingTab extends PluginSettingTab {
 
     private async tabUiPreferences(containerEl: HTMLElement): Promise<void> {
         containerEl.createEl("h3", { text: t("OBSIDIAN_INTEGRATION") });
+        new Setting(containerEl)
+            .setName(t("OPEN_IN_TAB"))
+            .setDesc(t("OPEN_IN_TAB_DESC"))
+            .addToggle((toggle) =>
+                toggle
+                    .setValue(this.plugin.data.settings.openViewInNewTab)
+                    .onChange(async (value) => {
+                        if (!value) {
+                            this.plugin.tabViewManager.closeAllTabViews();
+                        }
+                        this.plugin.data.settings.openViewInNewTab = value;
+                        await this.plugin.savePluginData();
+                    }),
+            );
+
         new Setting(containerEl)
             .setName(t("SHOW_RIBBON_ICON"))
             .setDesc(t("SHOW_RIBBON_ICON_DESC"))

src/gui/flashcard-modal.tsx → src/gui/sr-modal.tsx

@@ -1,32 +1,32 @@
 import { App, Modal } from "obsidian";
 
 import { Deck } from "src/deck";
 import {
     FlashcardReviewMode,
     IFlashcardReviewSequencer as IFlashcardReviewSequencer,
 } from "src/flashcard-review-sequencer";
-import { DeckListView } from "src/gui/deck-list-view";
+import { DeckUI } from "src/gui/deck-ui";
 import { FlashcardEditModal } from "src/gui/edit-modal";
-import { FlashcardReviewView } from "src/gui/flashcard-review-view";
+import { CardUI } from "src/gui/card-ui";
 import type SRPlugin from "src/main";
 import { Question } from "src/question";
 import { SRSettings } from "src/settings";
 
-export enum FlashcardModalMode {
-    DecksList,
+export enum FlashcardMode {
+    Deck,
     Front,
     Back,
     Closed,
 }
 
 export class FlashcardModal extends Modal {
     public plugin: SRPlugin;
-    public mode: FlashcardModalMode;
+    public mode: FlashcardMode;
     private reviewSequencer: IFlashcardReviewSequencer;
     private settings: SRSettings;
     private reviewMode: FlashcardReviewMode;
-    private deckView: DeckListView;
-    private flashcardView: FlashcardReviewView;
+    private deckView: DeckUI;
+    private flashcardView: CardUI;
 
     constructor(
         app: App,
@@ -53,15 +53,15 @@
         this.contentEl.addClass("sr-modal-content");
 
         // Init static elements in views
-        this.deckView = new DeckListView(
+        this.deckView = new DeckUI(
             this.plugin,
             this.settings,
             this.reviewSequencer,
             this.contentEl,
             this._startReviewOfDeck.bind(this),
         );
 
-        this.flashcardView = new FlashcardReviewView(
+        this.flashcardView = new CardUI(
             this.app,
             this.plugin,
             this.settings,
@@ -79,7 +79,7 @@
     }
 
     onClose(): void {
-        this.mode = FlashcardModalMode.Closed;
+        this.mode = FlashcardMode.Closed;
         this.deckView.close();
         this.flashcardView.close();
     }