From f42031c8de4226bfa9f8eaee5eb3c63f4ea5eec4 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 9 Dec 2025 21:11:30 +0200
Subject: [PATCH] feat(layout): add icon to the badge

---
 apps/client/src/widgets/BreadcrumbBadges.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/BreadcrumbBadges.tsx b/apps/client/src/widgets/BreadcrumbBadges.tsx
index fdc94461b..f4f684c88 100644
--- a/apps/client/src/widgets/BreadcrumbBadges.tsx
+++ b/apps/client/src/widgets/BreadcrumbBadges.tsx
@@ -2,6 +2,7 @@ import "./BreadcrumbBadges.css";
 
 import { ComponentChildren } from "preact";
 import { useIsNoteReadOnly, useNoteContext } from "./react/hooks";
+import Icon from "./react/Icon";
 
 export default function NoteBadges() {
     return (
@@ -17,15 +18,18 @@ function ReadOnlyBadge() {
     const isExplicitReadOnly = note?.isLabelTruthy("readOnly");
 
     return (isReadOnly &&
-        <Badge onClick={() => enableEditing()}>
+        <Badge
+            icon="bx bx-lock"
+            onClick={() => enableEditing()}>
             {isExplicitReadOnly ? "Read-only" : "Auto read-only"}
         </Badge>
     );
 }
 
-function Badge({ children, onClick }: { children: ComponentChildren, onClick?: () => void }) {
+function Badge({ icon, children, onClick }: { icon: string, children: ComponentChildren, onClick?: () => void }) {
     return (
         <div className="breadcrumb-badge" onClick={onClick}>
+            <Icon icon={icon} />&nbsp;
             {children}
         </div>
     );