UX: Make bookmark icon more readable on mobile (discourse#36096)

On mobile the icon for bookmarked/unbookmarked posts is the same, and
the only way to differentiate the state is the icon color; it may be
hard to tell the difference.

This fixes it by changing the icon when unbookmarked.

This is related to [this post on Discourse
meta](https://meta.discourse.org/t/change-bookmark-icon-for-non-bookmarked-posts-on-mobile-view/388854).

Result on desktop:
<img width="126" height="38" alt="image"
src="https://github.com/user-attachments/assets/f9eb9d70-6378-441d-9072-22815b36290f"
/>
<img width="161" height="38" alt="image"
src="https://github.com/user-attachments/assets/aea963dc-482f-4a40-b432-3dd58e9c6bfc"
/>

Result on mobile:
<img width="45" height="39" alt="image"
src="https://github.com/user-attachments/assets/e5018ed9-b214-45e3-9e21-310b5a7b72be"
/>
<img width="45" height="39" alt="image"
src="https://github.com/user-attachments/assets/b239566a-5971-47c0-9221-6c2496f46cbd"
/>

Author: mtancoigne

frontend/discourse/app/components/bookmark-icon.gjs

@@ -2,6 +2,7 @@ import Component from "@glimmer/component";
 import icon from "discourse/helpers/d-icon";
 import {
   NO_REMINDER_ICON,
+  NOT_BOOKMARKED,
   WITH_REMINDER_ICON,
 } from "discourse/models/bookmark";
 import { i18n } from "discourse-i18n";
@@ -10,9 +11,11 @@ export default class BookmarkIcon extends Component {
   get icon() {
     if (this.args.bookmark?.get("reminder_at")) {
       return WITH_REMINDER_ICON;
+    } else if (this.args.bookmark) {
+      return NO_REMINDER_ICON;
     }
 
-    return NO_REMINDER_ICON;
+    return NOT_BOOKMARKED;
   }
 
   get cssClasses() {

frontend/discourse/app/components/bookmark-menu.gjs

@@ -13,6 +13,11 @@ import {
   TIME_SHORTCUT_TYPES,
   timeShortcuts,
 } from "discourse/lib/time-shortcut";
+import {
+  NO_REMINDER_ICON,
+  NOT_BOOKMARKED,
+  WITH_REMINDER_ICON,
+} from "discourse/models/bookmark";
 import { i18n } from "discourse-i18n";
 
 export default class BookmarkMenu extends Component {
@@ -96,9 +101,11 @@ export default class BookmarkMenu extends Component {
 
   get buttonIcon() {
     if (this.existingBookmark?.reminderAt) {
-      return "discourse-bookmark-clock";
+      return WITH_REMINDER_ICON;
+    } else if (this.existingBookmark) {
+      return NO_REMINDER_ICON;
     } else {
-      return "bookmark";
+      return NOT_BOOKMARKED;
     }
   }
 

frontend/discourse/app/models/bookmark.js

@@ -23,6 +23,7 @@ export const AUTO_DELETE_PREFERENCES = {
 };
 
 export const NO_REMINDER_ICON = "bookmark";
+export const NOT_BOOKMARKED = "far-bookmark";
 export const WITH_REMINDER_ICON = "discourse-bookmark-clock";
 
 export default class Bookmark extends RestModel {

frontend/discourse/tests/integration/components/bookmark-icon-test.gjs

@@ -55,7 +55,7 @@ module("Integration | Component | bookmark-icon", function (hooks) {
   test("no bookmark", async function (assert) {
     await render(<template><BookmarkIcon /></template>);
 
-    assert.dom(".d-icon-bookmark.bookmark-icon").exists();
+    assert.dom(".d-icon-far-bookmark.bookmark-icon").exists();
     assert
       .dom(".svg-icon-title")
       .hasAttribute("title", i18n("bookmarks.create"));

lib/svg_sprite.rb

@@ -130,6 +130,7 @@ module SvgSprite
         fab-windows
         far-bell
         far-bell-slash
+        far-bookmark
         far-calendar-plus
         far-chart-bar
         far-circle