From eae6b09ecd10968eb1c12ba9922e3e7d095be635 Mon Sep 17 00:00:00 2001 From: rmsitz Date: Sun, 23 Aug 2026 21:49:10 -0400 Subject: [PATCH] Replace all OS-rendered emoji with a consistent SVG icon set Add a shared Jinja icon macro (templates/_icons.html) with 27 Feather-style stroke SVGs and import it across every live template - tab bars, buttons, lesson-type/status icons, folder/course icons, and the lesson player's footer brand mark all now use currentColor SVGs instead of emoji, matching the app's vector logo instead of rendering inconsistently per platform. A few icons built dynamically in JS (thumbnail-load fallbacks, toggled button states) get a small ICON_SVGS constant per file, since JS template literals can't call the Jinja macro. Left pure directional glyphs (expand/collapse chevrons, move up/down arrows, keyboard-shortcut arrows) as plain Unicode - they already render as monochrome text, matching the existing collapsible-header chevron pattern rather than the colorful pictographic emoji this was aimed at. Co-Authored-By: Claude Sonnet 5 --- templates/_icons.html | 8 +++ templates/course_dashboard.html | 116 +++++++++++++++++--------------- templates/help.html | 18 +++-- templates/lesson_view.html | 42 ++++++++---- templates/notes_hub.html | 18 +++-- templates/settings.html | 42 ++++++++---- 6 files changed, 154 insertions(+), 90 deletions(-) create mode 100644 templates/_icons.html diff --git a/templates/_icons.html b/templates/_icons.html new file mode 100644 index 0000000..06c5314 --- /dev/null +++ b/templates/_icons.html @@ -0,0 +1,8 @@ +{# + Shared stroke-style SVG icon set (Feather-style, 24x24 viewBox, + currentColor stroke) so every page uses the same hand-picked icons + instead of OS-rendered emoji, which render inconsistently across + platforms and clash with the app's vector logo. Import with + {% import '_icons.html' as icons %} and call icons.icon('name', size). +#} +{% macro icon(name, size=18) %}{% if name == 'home' %}{% elif name == 'pencil' %}{% elif name == 'help' %}{% elif name == 'settings' %}{% elif name == 'dice' %}{% elif name == 'folder' %}{% elif name == 'graduation-cap' %}{% elif name == 'check' %}{% elif name == 'circle' %}{% elif name == 'x' %}{% elif name == 'pin' %}{% elif name == 'ban' %}{% elif name == 'video' %}{% elif name == 'music' %}{% elif name == 'clipboard' %}{% elif name == 'package' %}{% elif name == 'file-text' %}{% elif name == 'trash' %}{% elif name == 'refresh' %}{% elif name == 'checkbox' %}{% elif name == 'list' %}{% elif name == 'grid' %}{% elif name == 'bar-chart' %}{% elif name == 'list-dots' %}{% elif name == 'history' %}{% elif name == 'plus-circle' %}{% elif name == 'play-circle' %}{% elif name == 'play' %}{% endif %}{% endmacro %} diff --git a/templates/course_dashboard.html b/templates/course_dashboard.html index 3b82a10..25add05 100644 --- a/templates/course_dashboard.html +++ b/templates/course_dashboard.html @@ -1,3 +1,4 @@ +{% import '_icons.html' as icons %} @@ -423,9 +424,14 @@ align-items: center; gap: 8px; } - .card-icon { + .icon { + display: inline-block; + vertical-align: -3px; flex-shrink: 0; - color: var(--text-primary); + } + .btn .icon, .tab-icon .icon { + vertical-align: -2px; + margin-right: 3px; } .card-body { @@ -1014,13 +1020,13 @@ {% if stats.total_lessons %}
{% if has_note %} - πŸ“„ Download Study Guide + {{ icons.icon('file-text', 14) }} Download Study Guide {% endif %}
{% endif %} @@ -1041,7 +1047,7 @@
- πŸ“ + {{ icons.icon('folder', 16) }} {{ node.name }} {% if stats.total_lessons %}{{ stats.completed_lessons }}/{{ stats.total_lessons }} watched{% else %}Empty{% endif %} @@ -1065,22 +1071,22 @@ onclick="window.location.href='/lesson/{{ lesson_relative_path }}/{{ lesson.title|replace(' ', '_') }}'">
- {% if lesson.lesson_type == 'video' %}πŸŽ₯ - {% elif lesson.lesson_type == 'audio' %}🎡 - {% elif lesson.lesson_type == 'quiz' %}πŸ“ - {% elif lesson.lesson_type == 'mixed' %}πŸ“¦ - {% else %}πŸ“„{% endif %} + {% if lesson.lesson_type == 'video' %}{{ icons.icon('video', 16) }} + {% elif lesson.lesson_type == 'audio' %}{{ icons.icon('music', 16) }} + {% elif lesson.lesson_type == 'quiz' %}{{ icons.icon('clipboard', 16) }} + {% elif lesson.lesson_type == 'mixed' %}{{ icons.icon('package', 16) }} + {% else %}{{ icons.icon('file-text', 16) }}{% endif %} {{ lesson.title }}
{{ lesson.lesson_type|title }} {% if lesson.completed %} - βœ“ + {{ icons.icon('check', 14) }} {% elif percent_watched %} {{ percent_watched }}% watched {% else %} - β—‹ + {{ icons.icon('circle', 14) }} {% endif %}
{% if percent_watched %} @@ -1103,15 +1109,15 @@
{% if view.has_thumbnail %} + onerror="this.replaceWith(courseFallbackIcon('play'))"> {% else %} - ▢️ + {{ icons.icon('play', 16) }} {% endif %} {{ view.lesson_title }}
{% if view.completed %} - βœ“ + {{ icons.icon('check', 14) }} {% elif view.percent_watched %} {{ view.percent_watched }}% watched {% endif %} @@ -1128,9 +1134,9 @@
{% if item.has_thumbnail %} + onerror="this.replaceWith(courseFallbackIcon('graduation-cap'))"> {% else %} - πŸŽ“ + {{ icons.icon('graduation-cap', 16) }} {% endif %} {{ item.name }}
@@ -1140,13 +1146,13 @@ {% if library_stats and library_stats.total_courses %}
- 🎲 Surprise Me + {{ icons.icon('dice', 16) }} Surprise Me
{% endif %}
-

Your Courses

+

{{ icons.icon('grid') }}Your Courses

@@ -1156,12 +1162,12 @@
+ onclick="setLibraryViewMode('list')" title="List view">{{ icons.icon('list', 16) }} + onclick="setLibraryViewMode('grid')" title="Grid view">{{ icons.icon('grid', 16) }}
+ onclick="toggleSelectionMode()" title="Select multiple">{{ icons.icon('checkbox', 16) }}

@@ -1182,7 +1188,7 @@ {% if library_stats and library_stats.total_courses %}
-

Library Stats

+

{{ icons.icon('bar-chart') }}Library Stats

@@ -1224,23 +1230,23 @@ {% if next_up %}
-

Next Up

+

{{ icons.icon('list-dots') }}Next Up

{% for item in next_up %}
{% if item.has_thumbnail %} + onerror="this.replaceWith(courseFallbackIcon('graduation-cap'))"> {% else %} - πŸŽ“ + {{ icons.icon('graduation-cap', 16) }} {% endif %} {{ item.name }}
- +
{% endfor %} @@ -1251,7 +1257,7 @@ {% if stale_courses %}
-

Pick Back Up

+

{{ icons.icon('history') }}Pick Back Up

{% for item in stale_courses %} {{ render_course_row(item, 'Last touched ' + item.last_touched_display) }} @@ -1263,7 +1269,7 @@ {% if recently_added %}
-

Recently Added

+

{{ icons.icon('plus-circle') }}Recently Added

{% for item in recently_added %} {{ render_course_row(item, item.added_display) }} @@ -1275,7 +1281,7 @@ {% if recent_views %}
-

Recently Viewed

+

{{ icons.icon('play-circle') }}Recently Viewed

{% for view in recent_views %} {{ render_view_row(view) }} @@ -1289,22 +1295,34 @@