2anki
diff --git a/‎src/services/ankify/AnkiConnectClient.test.ts‎
Lines changed: 63 additions & 0 deletions b/‎src/services/ankify/AnkiConnectClient.test.ts‎
Lines changed: 63 additions & 0 deletions
diff --git a/‎src/services/ankify/AnkiConnectClient.ts‎
Lines changed: 32 additions & 0 deletions b/‎src/services/ankify/AnkiConnectClient.ts‎
Lines changed: 32 additions & 0 deletions
diff --git a/‎src/services/ankify/ankifyModels.ts‎
Lines changed: 62 additions & 24 deletions b/‎src/services/ankify/ankifyModels.ts‎
Lines changed: 62 additions & 24 deletions
diff --git a/‎src/services/ankify/notionPageWalker.test.ts‎
Lines changed: 101 additions & 0 deletions b/‎src/services/ankify/notionPageWalker.test.ts‎
Lines changed: 101 additions & 0 deletions
@@ -155,6 +155,69 @@ describe('AnkiConnectClient', () => {
     });
   });
 
+  test('updateModelStyling posts the updateModelStyling action with model.css payload', async () => {
+    const fetchImpl = makeFetch({ result: null, error: null });
+    const client = new AnkiConnectClient('http://localhost:8765', fetchImpl);
+
+    await client.updateModelStyling({
+      name: 'Ankify Basic',
+      css: '.card { color: red; }',
+    });
+
+    const body = JSON.parse((fetchImpl as jest.Mock).mock.calls[0][1].body);
+    expect(body).toEqual({
+      action: 'updateModelStyling',
+      version: 6,
+      params: {
+        model: { name: 'Ankify Basic', css: '.card { color: red; }' },
+      },
+    });
+  });
+
+  test('updateModelTemplates posts the updateModelTemplates action with templates payload', async () => {
+    const fetchImpl = makeFetch({ result: null, error: null });
+    const client = new AnkiConnectClient('http://localhost:8765', fetchImpl);
+
+    await client.updateModelTemplates({
+      name: 'Ankify Basic',
+      templates: {
+        'Card 1': { Front: '{{Front}}', Back: '{{Back}}' },
+      },
+    });
+
+    const body = JSON.parse((fetchImpl as jest.Mock).mock.calls[0][1].body);
+    expect(body).toEqual({
+      action: 'updateModelTemplates',
+      version: 6,
+      params: {
+        model: {
+          name: 'Ankify Basic',
+          templates: {
+            'Card 1': { Front: '{{Front}}', Back: '{{Back}}' },
+          },
+        },
+      },
+    });
+  });
+
+  test('storeMediaFile posts the storeMediaFile action with filename + base64 data', async () => {
+    const fetchImpl = makeFetch({ result: 'ankify-x.png', error: null });
+    const client = new AnkiConnectClient('http://localhost:8765', fetchImpl);
+
+    const stored = await client.storeMediaFile({
+      filename: 'ankify-x.png',
+      data: 'UEFTREFUQQ==',
+    });
+
+    expect(stored).toBe('ankify-x.png');
+    const body = JSON.parse((fetchImpl as jest.Mock).mock.calls[0][1].body);
+    expect(body).toEqual({
+      action: 'storeMediaFile',
+      version: 6,
+      params: { filename: 'ankify-x.png', data: 'UEFTREFUQQ==' },
+    });
+  });
+
   test('throws AnkiConnectUnreachableError when fetch rejects', async () => {
     const fetchImpl = jest.fn(async () => {
       throw new Error('connect ECONNREFUSED');
 
@@ -91,6 +91,18 @@ export class AnkiConnectClient {
     return this.invoke('createModel', params as unknown as Record<string, unknown>);
   }
 
+  async updateModelStyling(params: AnkiConnectUpdateStylingParams): Promise<null> {
+    return this.invoke('updateModelStyling', { model: params });
+  }
+
+  async updateModelTemplates(params: AnkiConnectUpdateTemplatesParams): Promise<null> {
+    return this.invoke('updateModelTemplates', { model: params });
+  }
+
+  async storeMediaFile(params: AnkiConnectStoreMediaFileParams): Promise<string> {
+    return this.invoke('storeMediaFile', params as unknown as Record<string, unknown>);
+  }
+
   async getNumCardsReviewedByDay(): Promise<Array<[string, number]>> {
     return this.invoke('getNumCardsReviewedByDay');
   }
@@ -185,6 +197,26 @@ export interface AnkiConnectCreateModelParams {
   cardTemplates: AnkiConnectCardTemplate[];
 }
 
+export interface AnkiConnectUpdateStylingParams {
+  name: string;
+  css: string;
+}
+
+export interface AnkiConnectTemplateBody {
+  Front: string;
+  Back: string;
+}
+
+export interface AnkiConnectUpdateTemplatesParams {
+  name: string;
+  templates: Record<string, AnkiConnectTemplateBody>;
+}
+
+export interface AnkiConnectStoreMediaFileParams {
+  filename: string;
+  data: string;
+}
+
 export interface AnkiNoteInfo {
   noteId: number;
   modelName: string;
 
@@ -1,3 +1,4 @@
+import { NOTION_STYLE } from '../../templates/helper';
 import { AnkiConnectCreateModelParams } from './AnkiConnectClient';
 
 export const ANKIFY_BASIC_MODEL = 'Ankify Basic';
@@ -6,40 +7,77 @@ export const ANKIFY_CLOZE_MODEL = 'Ankify Cloze';
 export const ANKIFY_BASIC_FIELDS = ['Front', 'Back'] as const;
 export const ANKIFY_CLOZE_FIELDS = ['Text', 'Back Extra'] as const;
 
-const ANKIFY_CARD_STYLING = `
-html, body { text-align: center; }
-
+const ANKIFY_CARD_OVERRIDES = `
 .card {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
-    "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
-  color: black;
-  background-color: white;
-  border: lightgray 1px solid;
-  padding: 16px;
-  border-radius: 8px;
-  margin: 16px;
-  width: 80%;
-  display: inline-block;
+  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  font-size: 18px;
+  line-height: 1.5;
+  color: rgb(55, 53, 47);
+  background-color: rgb(255, 255, 255);
+  text-align: left;
+  padding: 32px 24px;
+  max-width: 720px;
+  margin: 0 auto;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+.nightMode.card,
+.night_mode .card {
+  color: rgba(255, 255, 255, 0.9);
+  background-color: rgb(25, 25, 25);
+}
+
+.front-text-pre {
+  display: block;
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+  text-align: center;
+  margin-bottom: 0.25em;
+}
+
+.front-text-post {
+  display: block;
+  font-size: 1rem;
+  font-weight: 500;
+  color: rgba(55, 53, 47, 0.65);
+  text-align: center;
+  letter-spacing: -0.005em;
 }
 
-.card:hover {
-  box-shadow: 0 0 8px #ccc;
-  border: 1px solid #fff;
+.back-text { display: block; }
+
+.extra {
+  display: block;
+  margin-top: 1em;
+  color: rgba(55, 53, 47, 0.6);
+  font-size: 0.9em;
 }
 
-.front-text-pre { font-size: 1.5rem; }
-.front-text-post { color: gray; font-size: 1rem; }
-.back-text { font-size: 1.5rem; text-align: left; }
-.extra { color: gray; }
+hr#answer {
+  border: none;
+  border-top: 1px solid rgba(55, 53, 47, 0.16);
+  margin: 1.5em 0;
+}
 
-hr { border: none; border-bottom: 1px solid rgba(55, 53, 47, 0.18); }
+mark { background: rgba(255, 212, 0, 0.25); color: inherit; padding: 0 2px; border-radius: 2px; }
 
 .cloze {
-  font-weight: bold;
-  color: #2563eb;
+  font-weight: 600;
+  color: rgb(11, 110, 153);
+}
+.nightMode .cloze, .night_mode .cloze { color: rgb(82, 156, 202); }
+
+@media (max-width: 480px) {
+  .card { padding: 20px 16px; font-size: 17px; }
+  .front-text-pre { font-size: 1.3rem; }
 }
 `.trim();
 
+const ANKIFY_CARD_STYLING = `${NOTION_STYLE}\n\n${ANKIFY_CARD_OVERRIDES}`;
+
 export const ankifyBasicCreateModelParams = (): AnkiConnectCreateModelParams => ({
   modelName: ANKIFY_BASIC_MODEL,
   inOrderFields: [...ANKIFY_BASIC_FIELDS],
@@ -63,7 +101,7 @@ export const ankifyClozeCreateModelParams = (): AnkiConnectCreateModelParams =>
     {
       Name: 'Cloze',
       Front: '{{cloze:Text}}',
-      Back: '{{cloze:Text}}<br><span class="extra">{{Back Extra}}</span>',
+      Back: '{{cloze:Text}}<hr id="answer"><span class="extra">{{Back Extra}}</span>',
     },
   ],
 });
@@ -0,0 +1,101 @@
+import { walkNotionPageForFlashcards } from './notionPageWalker';
+
+const toggleBlock = (overrides: Record<string, unknown> = {}) => ({
+  id: 'toggle-1',
+  type: 'toggle',
+  has_children: true,
+  last_edited_time: '2026-05-09T12:00:00.000Z',
+  toggle: { rich_text: [{ plain_text: 'What is Anki?' }] },
+  ...overrides,
+});
+
+const paragraphChild = (text: string) => ({
+  type: 'paragraph',
+  paragraph: { rich_text: [{ plain_text: text }] },
+});
+
+describe('walkNotionPageForFlashcards', () => {
+  test('extracts image blocks from toggle children and embeds <img> in the back', async () => {
+    const fetchChildren = jest.fn(async (blockId: string) => {
+      if (blockId === 'page-id') {
+        return [toggleBlock()];
+      }
+      return [
+        paragraphChild('Spaced repetition.'),
+        {
+          id: 'img-block-77',
+          type: 'image',
+          image: {
+            type: 'file',
+            file: {
+              url: 'https://prod-files.notion.so/abc/img.png?signed=1',
+              expiry_time: '2026-05-09T13:00:00.000Z',
+            },
+          },
+        },
+      ];
+    });
+
+    const cards = await walkNotionPageForFlashcards('page-id', fetchChildren);
+
+    expect(cards).toHaveLength(1);
+    expect(cards[0].back).toContain('Spaced repetition.');
+    expect(cards[0].back).toContain('<img');
+    expect(cards[0].images).toEqual([
+      {
+        block_id: 'img-block-77',
+        source: 'file',
+        url: 'https://prod-files.notion.so/abc/img.png?signed=1',
+        filename: 'ankify-img-block-77.png',
+      },
+    ]);
+  });
+
+  test('keeps external-hosted image URLs as-is in the back HTML', async () => {
+    const fetchChildren = jest.fn(async (blockId: string) => {
+      if (blockId === 'page-id') {
+        return [toggleBlock()];
+      }
+      return [
+        {
+          id: 'img-block-ext',
+          type: 'image',
+          image: {
+            type: 'external',
+            external: { url: 'https://cdn.example.com/diagram.png' },
+          },
+        },
+      ];
+    });
+
+    const cards = await walkNotionPageForFlashcards('page-id', fetchChildren);
+
+    expect(cards[0].back).toContain(
+      '<img src="https://cdn.example.com/diagram.png">'
+    );
+    expect(cards[0].images).toEqual([
+      {
+        block_id: 'img-block-ext',
+        source: 'external',
+        url: 'https://cdn.example.com/diagram.png',
+      },
+    ]);
+  });
+
+  test('skips toggles with empty front text', async () => {
+    const fetchChildren = jest.fn(async (blockId: string) => {
+      if (blockId === 'page-id') {
+        return [
+          toggleBlock({ id: 't-empty', toggle: { rich_text: [] } }),
+          toggleBlock({ id: 't-real' }),
+        ];
+      }
+      return [paragraphChild('answer')];
+    });
+
+    const cards = await walkNotionPageForFlashcards('page-id', fetchChildren);
+
+    expect(cards).toHaveLength(1);
+    expect(cards[0].notion_block_id).toBe('t-real');
+  });
+});