Book form: can now click "start read" even when the book is marked as read

It will do the same behavior as clicking on the "read" button again to
cancel it.

front/src/BigIcon.vue

@@ -5,16 +5,13 @@ const props = defineProps({
   icon: String,
   legend: String,
   isSet: Boolean,
-  isReadonly: Boolean,
 })
 
 const hovered = ref(false)
 const isOnMobile = ref(computeIsOnMobile())
 
 const computedIcon = computed(
-  () =>
+  () => props.icon + ((hovered.value && !isOnMobile.value) || props.isSet ? 'Fill' : ''),
-    props.icon +
-    (!props.isReadonly && ((hovered.value && !isOnMobile.value) || props.isSet) ? 'Fill' : ''),
 )
 
 function computeIsOnMobile() {
@@ -34,8 +31,7 @@ onUnmounted(() => {
 
 <template>
   <div
-    class="bigiconandlegend"
+    class="bigiconandlegend showcanclick"
-    :class="props.isReadonly ? 'widget-readonly' : 'showcanclick'"
     @mouseover="hovered = true"
     @mouseout="hovered = false"
   >
@@ -79,10 +75,6 @@ onUnmounted(() => {
   padding-bottom: 30px;
 }
 
-.widget-readonly {
-  opacity: 50%;
-}
-
 @media (max-width: 1024px) {
   .bigicon {
     flex: 1;

front/src/BookDateWidget.vue

@@ -9,7 +9,6 @@ const props = defineProps({
   startReadDate: String,
   endReadDate: String,
   isExpanded: Boolean,
-  isReadonly: Boolean,
   useEndDate: Boolean,
   lastWidget: Boolean,
 })
@@ -35,10 +34,9 @@ function computeParentClasses() {
   <div :class="computeParentClasses()">
     <BigIcon
       :icon="props.icon"
-      :is-readonly="props.isReadonly"
       :legend="props.legend"
       :isSet="props.isExpanded"
-      @click="props.isReadonly ? null : $emit('onIconClick')"
+      @click="$emit('onIconClick')"
     />
     <div v-if="props.isExpanded" class="inputdate">
       <div class="ontopofinput">

front/src/BookForm.vue

@@ -60,10 +60,14 @@ async function onStartReadIconClick() {
   if (!data.value.startReadDate) {
     data.value.startReadDate = today
     putStartReadDate(props.id, data.value.startReadDate)
-  } else {
+  } else if (!data.value.read) {
     data.value.startReadDate = null
     putStartReadDateUnset(props.id)
   }
+  if (data.value.read) {
+    data.value.read = false
+    putUnreadBook(props.id)
+  }
 }
 
 function onStartReadDateChange(d) {

front/src/BookFormIcons.vue

@@ -61,8 +61,7 @@ async function onStartReadIconClick() {
         icon="BIconBook"
         :legend="$t('bookform.wantread')"
         :is-set="isStartReadExpanded()"
-        :is-readonly="props.read"
+        @click="onStartReadIconClick"
-        @click="props.read ? null : onStartReadIconClick()"
       />
     </div>
     <div
@@ -82,7 +81,6 @@ async function onStartReadIconClick() {
       :legend="$t('bookform.startread')"
       :start-read-date="props.startReadDate"
       :is-expanded="isStartReadExpanded()"
-      :is-readonly="props.read"
       @onStartDateChange="(d) => $emit('onStartReadDateChange', d)"
       @onIconClick="onStartReadIconClick"
     />