Added initial voice work edit logic (set favorite / delete) on Api and UI layers.

JSMR.UI.Blazor/wwwroot/css/ant-design.css

@@ -0,0 +1,48 @@
+/* Modals */
+.ant-modal-content {
+    background-color: var(--ant-modal-content-bg);
+    border-radius: var(--ant-border-radius-lg);
+    border-width: 1px;
+    border-style: solid;
+    border-top-color: rgb(83, 99, 109);
+    border-left-color: rgb(72, 88, 99);
+    border-right-color: rgb(72, 88, 99);
+    border-bottom-color: rgb(63, 78, 88);
+}
+
+.ant-modal-confirm-title {
+    color: var(--ant-modal-title-color);
+    text-shadow: 1px 1px 2px black;
+}
+
+.ant-modal-confirm-body .ant-modal-confirm-content {
+    color: var(--ant-color-text);
+}
+
+/* Buttons */
+.ant-btn {
+    font-weight: var(--ant-button-font-weight);
+    border: var(--ant-btn-border-width) var(--ant-btn-border-style) var(--ant-btn-border-color);
+    color: var(--ant-btn-text-color);
+    background-color: var(--ant-btn-bg-color);
+}
+
+/* 
+    --ant-button-font-weight: 400;
+    --ant-button-icon-gap: 8px;
+    --ant-button-padding-inline: 15px;
+    --ant-button-default-border-color: rgba(180, 200, 214, 0.25);
+    --ant-button-content-font-size: 14px;
+    --ant-btn-color-base: var(--ant-button-default-border-color);
+    --ant-btn-text-color: var(--ant-button-default-color);
+    --ant-btn-text-color-hover: var(--ant-button-default-hover-color);
+    --ant-btn-shadow: var(--ant-button-default-shadow);
+    --ant-btn-border-color: var(--ant-btn-color-base);
+    --ant-btn-border-color-hover: var(--ant-btn-color-hover);
+    --ant-btn-border-color-active: var(--ant-btn-color-active);
+    --ant-btn-bg-color: var(--ant-btn-bg-color-container);
+    --ant-btn-text-color: var(--ant-btn-color-base);
+    --ant-btn-text-color-hover: var(--ant-btn-color-hover);
+    --ant-btn-text-color-active: var(--ant-btn-color-active);
+
+*/

JSMR.UI.Blazor/wwwroot/css/app.css

@@ -669,11 +669,21 @@ code {
     border: 1px solid transparent;
 }
 
-    .j-chip.is-clickable {
-        cursor: pointer;
-        user-select: none;
-        transition: background .2s linear, color .2s linear, border-color .2s linear, filter .2s linear;
-    }
+.j-chip-icon-only {
+    padding: .75em;
+    border-radius: 2em;
+}
+
+.j-chip-thick-border,
+.j-chip.varient-outlined.j-chip-thick-border {
+    border-width: 2px;
+}
+
+.j-chip.is-clickable {
+    cursor: pointer;
+    user-select: none;
+    transition: background .2s linear, color .2s linear, border-color .2s linear, filter .2s linear;
+}
 
         .j-chip.is-clickable:hover {
             filter: brightness(1.2);
@@ -770,6 +780,10 @@ code {
         --chip-fg-rgb: var(--rgb-on-yellow, 255 255 255);
     }
 
+.j-chip.color-orange {
+    --chip-rgb: var(--rgb-orange);
+}
+
     .j-chip.color-pink {
         color: rgb(var(--chip-fg-rgb));
         --chip-rgb: var(--rgb-pink);
@@ -955,6 +969,14 @@ code {
     mask-image: url("../svg/microphone-fill.svg");
 }
 
+.j-icon-pencil {
+    mask-image: url("../svg/pencil.svg");
+}
+
+.j-icon-pencil-fill {
+    mask-image: url("../svg/pencil-fill.svg");
+}
+
 .j-icon-2 {
     background-repeat: no-repeat;
     background-position: center;

JSMR.UI.Blazor/wwwroot/css/theme-frozen.css

@@ -48,6 +48,7 @@
     --rgb-blue: 115 196 255;
     --rgb-yellow: 255 224 115;
     --rgb-on-yellow: 0 0 0;
+    --rgb-orange: 255 167 115;
     --rgb-pink: 224 104 148;
     --rgb-on-pink: 255 255 255;
     --rgb-red: 224 104 104;
@@ -74,6 +75,44 @@
     --surface-container-outline-high: rgb(83, 99, 109);
     --surface-container-outline: rgb(72, 88, 99);
     --surface-container-outline-low: rgb(63, 78, 88);
+    /* Ant Design - Modals */
+    --ant-color-text: #b4c8d6;
+    --ant-modal-content-bg: #273f50;
+    --ant-modal-title-color: #b4c8d6;
+    /* Ant Design - Buttons */
+    /* Button Part I */
+    --ant-btn-text-color: var(--ant-button-default-color);
+    --ant-btn-text-color-hover: var(--ant-button-default-hover-color);
+    --ant-btn-text-color-active: var(--ant-button-default-active-color);
+    --ant-btn-bg-color-container: var(--ant-button-default-bg);
+    --ant-btn-bg-color-hover: var(--ant-button-default-hover-bg);
+    --ant-btn-bg-color-active: var(--ant-button-default-active-bg);
+    /* Part II */
+    --ant-button-default-bg: #1e3545;
+    --ant-button-default-border-color: rgba(180, 200, 214, 0.25);
+    --ant-button-font-weight: 400;
+    --ant-button-icon-gap: 8px;
+    --ant-button-padding-inline: 15px;
+    --ant-button-content-font-size: 14px;
+    --ant-border-radius-lg: 16px;
+    --ant-button-font-weight: 400;
+    --ant-btn-border-width: var(--ant-line-width);
+    --ant-btn-border-color: #000;
+    --ant-btn-border-color-hover: var(--ant-btn-border-color);
+    --ant-btn-border-color-active: var(--ant-btn-border-color);
+    --ant-btn-border-color-disabled: var(--ant-btn-border-color);
+    --ant-btn-border-style: solid;
+    --ant-btn-text-color: #000;
+    --ant-btn-text-color-hover: var(--ant-btn-text-color);
+    --ant-btn-text-color-active: var(--ant-btn-text-color);
+    --ant-btn-text-color-disabled: var(--ant-btn-text-color);
+    --ant-btn-border-color: var(--ant-btn-color-base);
+    --ant-btn-border-color-hover: var(--ant-btn-color-hover);
+    --ant-btn-border-color-active: var(--ant-btn-color-active);
+    --ant-btn-bg-color: var(--ant-btn-bg-color-container);
+    --ant-btn-text-color: var(--ant-btn-color-base);
+    --ant-btn-text-color-hover: var(--ant-btn-color-hover);
+    --ant-btn-text-color-active: var(--ant-btn-color-active);
 }
 
 /*

JSMR.UI.Blazor/wwwroot/index.html

@@ -24,6 +24,7 @@
     <link rel="stylesheet" href="css/radzen.css" />
     <link href="_content/Bit.BlazorUI/styles/bit.blazorui.css" rel="stylesheet" />
     <link href="_content/AntDesign/css/ant-design-blazor.dark.css" rel="stylesheet" />
+    <link rel="stylesheet" href="css/ant-design.css" />
     <link rel="stylesheet" href="css/bit-blazor.css" />
     <link rel="stylesheet" href="css/font.css" />
     <link rel="stylesheet" href="css/app.css" />

JSMR.UI.Blazor/wwwroot/svg/pencil-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-fill" viewBox="0 0 16 16">
+	<path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.5.5 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11z"/>
+</svg>

JSMR.UI.Blazor/wwwroot/svg/pencil.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
+	<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325"/>
+</svg>