Replace Emojis with SVG Icon Library#

Goal#

Replace unicode emojis/symbols with proper SVG icons from a lightweight icon library for better consistency and rendering across platforms.

Current State#

You can tell the current implementation was heavily AI based on the number of emojis. These render inconsistently across browsers/platforms and don't match the overall design.

Recommended Library#

Lucide (https://lucide.dev) - Lightweight, modern, easy to integrate

CDN available (no build step needed)
Simple HTML:

Tasks#

1. Add Icon Library (`pkg/appview/templates/layouts/base.html`)#

Add to <head>:

<script src="https://unpkg.com/lucide@latest"></script>

Add before closing </body>:

<script>
  lucide.createIcons();
</script>

2. Replace Stars#

Files:

pkg/appview/templates/pages/repository.html:40
pkg/appview/templates/partials/push-list.html:20
pkg/appview/templates/components/repo-card.html:34
pkg/appview/static/js/app.js:133,159,165

Replace with:

<i data-lucide="star" class="star-icon"></i>
<i data-lucide="star" class="star-icon star-filled"></i>

Update CSS for icon sizing and color.

4. Replace Other Icons#

Trash: Use 
Checkmark: Use 
Moon/Sun (for dark mode):  /

5. Update CSS (`pkg/appview/static/css/style.css`)#

Add icon styling:

.star-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
}

.star-filled {
    fill: var(--star);
    stroke: var(--star);
}

Files to Modify#

pkg/appview/templates/layouts/base.html - Add library
pkg/appview/templates/pages/repository.html - Replace stars, trash
pkg/appview/templates/partials/push-list.html - Replace stars
pkg/appview/templates/components/repo-card.html - Replace stars
pkg/appview/static/js/app.js - Update star/arrow logic
pkg/appview/static/css/style.css - Add icon styles
pkg/appview/handlers/settings.go:131 - Replace checkmark in HTML response