perf: set value support format viewing #65

backend/services/browser_service.go

@@ -580,6 +580,11 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
 		resp.Msg = "key not exists"
 		return
 	}
+	var doConvert bool
+	if (len(param.Decode) > 0 && param.Decode != types.DECODE_NONE) ||
+		(len(param.Format) > 0 && param.Format != types.FORMAT_RAW) {
+		doConvert = true
+	}
 
 	var data types.KeyDetail
 	//var cursor uint64
@@ -636,14 +641,15 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
 		loadListHandle := func() ([]types.ListEntryItem, bool, error) {
 			var loadVal []string
 			var cursor uint64
+			var subErr error
 			if param.Full {
 				// load all
 				cursor = 0
-				loadVal, err = client.LRange(ctx, key, 0, -1).Result()
+				loadVal, subErr = client.LRange(ctx, key, 0, -1).Result()
 			} else {
 				cursor, _ = getEntryCursor()
 				scanSize := int64(Preferences().GetScanSize())
-				loadVal, err = client.LRange(ctx, key, int64(cursor), int64(cursor)+scanSize-1).Result()
+				loadVal, subErr = client.LRange(ctx, key, int64(cursor), int64(cursor)+scanSize-1).Result()
 				cursor = cursor + uint64(scanSize)
 				if len(loadVal) < int(scanSize) {
 					cursor = 0
@@ -652,12 +658,7 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
 			setEntryCursor(cursor)
 
 			items := make([]types.ListEntryItem, len(loadVal))
-			doConvert := len(param.Decode) > 0 && len(param.Format) > 0
 			for i, val := range loadVal {
-				items[i] = types.ListEntryItem{
-					Value:        val,
-					DisplayValue: "",
-				}
 				items[i].Value = val
 				if doConvert {
 					if dv, _, _ := strutil.ConvertTo(val, param.Decode, param.Format); dv != val {
@@ -665,8 +666,8 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
 					}
 				}
 			}
-			if err != nil {
+			if subErr != nil {
-				return items, false, err
+				return items, false, subErr
 			}
 			return items, cursor == 0, nil
 		}
@@ -685,14 +686,14 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
 			items := make([]types.HashEntryItem, 0, scanSize)
 			var loadedVal []string
 			var cursor uint64
-			doConvert := len(param.Decode) > 0 && len(param.Format) > 0
+			var subErr error
 			if param.Full {
 				// load all
 				cursor = 0
 				for {
-					loadedVal, cursor, err = client.HScan(ctx, key, cursor, "*", scanSize).Result()
+					loadedVal, cursor, subErr = client.HScan(ctx, key, cursor, "*", scanSize).Result()
-					if err != nil {
+					if subErr != nil {
-						return nil, false, err
+						return nil, false, subErr
 					}
 					for i := 0; i < len(loadedVal); i += 2 {
 						items = append(items, types.HashEntryItem{
@@ -711,9 +712,9 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
 				}
 			} else {
 				cursor, _ = getEntryCursor()
-				loadedVal, cursor, err = client.HScan(ctx, key, cursor, matchPattern, scanSize).Result()
+				loadedVal, cursor, subErr = client.HScan(ctx, key, cursor, matchPattern, scanSize).Result()
-				if err != nil {
+				if subErr != nil {
-					return nil, false, err
+					return nil, false, subErr
 				}
 				for i := 0; i < len(loadedVal); i += 2 {
 					items = append(items, types.HashEntryItem{
@@ -739,30 +740,39 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
 		}
 
 	case "set":
-		loadSetHandle := func() ([]string, bool, error) {
+		loadSetHandle := func() ([]types.SetEntryItem, bool, error) {
-			var items []string
+			var items []types.SetEntryItem
 			var cursor uint64
+			var subErr error
 			scanSize := int64(Preferences().GetScanSize())
 			var loadedKey []string
 			if param.Full {
 				// load all
 				cursor = 0
 				for {
-					loadedKey, cursor, err = client.SScan(ctx, key, cursor, param.MatchPattern, scanSize).Result()
+					loadedKey, cursor, subErr = client.SScan(ctx, key, cursor, param.MatchPattern, scanSize).Result()
-					if err != nil {
+					if subErr != nil {
-						return items, false, err
+						return items, false, subErr
 					}
-					items = append(items, loadedKey...)
 					if cursor == 0 {
 						break
 					}
 				}
 			} else {
 				cursor, _ = getEntryCursor()
-				loadedKey, cursor, err = client.SScan(ctx, key, cursor, param.MatchPattern, scanSize).Result()
+				loadedKey, cursor, subErr = client.SScan(ctx, key, cursor, param.MatchPattern, scanSize).Result()
-				items = append(items, loadedKey...)
 			}
 			setEntryCursor(cursor)
+
+			items = make([]types.SetEntryItem, len(loadedKey))
+			for i, val := range loadedKey {
+				items[i].Value = val
+				if doConvert {
+					if dv, _, _ := strutil.ConvertTo(val, param.Decode, param.Format); dv != val {
+						items[i].DisplayValue = dv
+					}
+				}
+			}
 			return items, cursor == 0, nil
 		}
 
@@ -1245,23 +1255,36 @@ func (b *browserService) SetSetItem(connName string, db int, k any, remove bool,
 }
 
 // UpdateSetItem replace member of set
-func (b *browserService) UpdateSetItem(connName string, db int, k any, value, newValue string) (resp types.JSResp) {
+func (b *browserService) UpdateSetItem(param types.SetSetParam) (resp types.JSResp) {
-	item, err := b.getRedisClient(connName, db)
+	item, err := b.getRedisClient(param.Server, param.DB)
 	if err != nil {
 		resp.Msg = err.Error()
 		return
 	}
 
 	client, ctx := item.client, item.ctx
-	key := strutil.DecodeRedisKey(k)
+	key := strutil.DecodeRedisKey(param.Key)
-	_, _ = client.SRem(ctx, key, value).Result()
+	// remove old value
-	_, err = client.SAdd(ctx, key, newValue).Result()
+	str := strutil.DecodeRedisKey(param.Value)
+	_, _ = client.SRem(ctx, key, str).Result()
+
+	// insert new value
+	str = strutil.DecodeRedisKey(param.NewValue)
+	var saveStr string
+	if saveStr, err = strutil.SaveAs(str, param.Format, param.Decode); err != nil {
+		resp.Msg = fmt.Sprintf(`save to type "%s" fail: %s`, param.Format, err.Error())
+		return
+	}
+	_, err = client.SAdd(ctx, key, saveStr).Result()
 	if err != nil {
 		resp.Msg = err.Error()
 		return
 	}
 
 	resp.Success = true
+	resp.Data = map[string]any{
+		"added": saveStr,
+	}
 	return
 }
 

backend/types/js_resp.go

@@ -30,17 +30,6 @@ type KeyDetailParam struct {
 	Full         bool   `json:"full"`
 }
 
-type ListEntryItem struct {
-	Value        any    `json:"v"`
-	DisplayValue string `json:"dv,omitempty"`
-}
-
-type HashEntryItem struct {
-	Key          string `json:"k"`
-	Value        any    `json:"v"`
-	DisplayValue string `json:"dv,omitempty"`
-}
-
 type KeyDetail struct {
 	Value  any    `json:"value"`
 	Length int64  `json:"length,omitempty"`
@@ -80,3 +69,13 @@ type SetHashParam struct {
 	Format   string `json:"format,omitempty"`
 	Decode   string `json:"decode,omitempty"`
 }
+
+type SetSetParam struct {
+	Server   string `json:"server"`
+	DB       int    `json:"db"`
+	Key      any    `json:"key"`
+	Value    any    `json:"value"`
+	NewValue any    `json:"newValue"`
+	Format   string `json:"format,omitempty"`
+	Decode   string `json:"decode,omitempty"`
+}

backend/types/redis_wrapper.go

@@ -1,5 +1,21 @@
 package types
 
+type ListEntryItem struct {
+	Value        any    `json:"v"`
+	DisplayValue string `json:"dv,omitempty"`
+}
+
+type HashEntryItem struct {
+	Key          string `json:"k"`
+	Value        any    `json:"v"`
+	DisplayValue string `json:"dv,omitempty"`
+}
+
+type SetEntryItem struct {
+	Value        any    `json:"v"`
+	DisplayValue string `json:"dv,omitempty"`
+}
+
 type ZSetItem struct {
 	Value string  `json:"value"`
 	Score float64 `json:"score"`

backend/utils/string/convert.go

@@ -106,6 +106,8 @@ func decodeWith(str, decodeType string) (value, resultDecode string) {
 // if no decode is possible, it will return the origin string value and "none" decode type
 func autoDecode(str string) (value, resultDecode string) {
 	if len(str) > 0 {
+		// pure digit content may incorrect regard as some encoded type, skip decode
+		if match, _ := regexp.MatchString(`^\d+$`, str); !match {
 			var ok bool
 			if value, ok = decodeBase64(str); ok {
 				resultDecode = types.DECODE_BASE64
@@ -133,6 +135,7 @@ func autoDecode(str string) (value, resultDecode string) {
 				return
 			}
 		}
+	}
 
 	value = str
 	resultDecode = types.DECODE_NONE
@@ -215,13 +218,11 @@ func decodeJson(str string) (string, bool) {
 }
 
 func decodeBase64(str string) (string, bool) {
-	if match, _ := regexp.MatchString(`^\d+$`, str); !match {
 	if decodedStr, err := base64.StdEncoding.DecodeString(str); err == nil {
 		if s := string(decodedStr); !containsBinary(s) {
 			return s, true
 		}
 	}
-	}
 	return str, false
 }
 

frontend/src/components/content_value/ContentValueHash.vue

@@ -373,7 +373,6 @@ defineExpose({
         <div id="content-table" class="value-wrapper value-item-part flex-box-h flex-item-expand">
             <!-- table -->
             <n-data-table
-                :key="(row) => row.no"
                 ref="tableRef"
                 :bordered="false"
                 :bottom-bordered="false"

frontend/src/components/content_value/ContentValueList.vue

@@ -84,7 +84,6 @@ const valueColumn = reactive({
     },
     render: (row) => {
         // if (!isEmpty(row.dv)) {
-        //     console.log(row.dv)
         //     return h(NCode, { language: 'json', wordWrap: true, code: row.dv })
         // }
         return row.dv || row.v
@@ -96,6 +95,14 @@ const startEdit = async (no, value) => {
     currentEditRow.no = no
 }
 
+/**
+ *
+ * @param {string|number} pos
+ * @param {string} value
+ * @param {string} decode
+ * @param {string} format
+ * @return {Promise<void>}
+ */
 const saveEdit = async (pos, value, decode, format) => {
     try {
         const index = parseInt(pos) - 1
@@ -149,8 +156,6 @@ const actionColumn = {
             editing: false,
             bindKey: `#${index + 1}`,
             onEdit: () => {
-                currentEditRow.no = index + 1
-                currentEditRow.value = row
                 startEdit(index + 1, row.v)
             },
             onDelete: async () => {
@@ -162,7 +167,7 @@ const actionColumn = {
                         index,
                     )
                     if (success) {
-                        $message.success(i18n.t('dialogue.delete_key_succ', { key: '#' + row.no }))
+                        $message.success(i18n.t('dialogue.delete_key_succ', { key: `#${index + 1}` }))
                     } else {
                         $message.error(msg)
                     }
@@ -307,7 +312,6 @@ defineExpose({
         <div class="value-wrapper value-item-part flex-box-h flex-item-expand">
             <!-- table -->
             <n-data-table
-                :key="(row) => row.no"
                 :bordered="false"
                 :bottom-bordered="false"
                 :columns="columns"

frontend/src/components/content_value/ContentValueSet.vue

@@ -3,7 +3,7 @@ import { computed, h, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ContentToolbar from './ContentToolbar.vue'
 import AddLink from '@/components/icons/AddLink.vue'
-import { NButton, NCode, NIcon, NInput, useThemeVars } from 'naive-ui'
+import { NButton, NIcon, NInput, useThemeVars } from 'naive-ui'
 import { isEmpty, size } from 'lodash'
 import useDialogStore from 'stores/dialog.js'
 import { types, types as redisTypes } from '@/consts/support_redis_type.js'
@@ -14,6 +14,9 @@ import useBrowserStore from 'stores/browser.js'
 import LoadList from '@/components/icons/LoadList.vue'
 import LoadAll from '@/components/icons/LoadAll.vue'
 import IconButton from '@/components/common/IconButton.vue'
+import Edit from '@/components/icons/Edit.vue'
+import ContentEntryEditor from '@/components/content_value/ContentEntryEditor.vue'
+import FormatSelector from '@/components/content_value/FormatSelector.vue'
 
 const i18n = useI18n()
 const themeVars = useThemeVars()
@@ -33,7 +36,7 @@ const props = defineProps({
     value: Array,
     size: Number,
     length: Number,
-    viewAs: {
+    format: {
         type: String,
         default: formatTypes.RAW,
     },
@@ -58,40 +61,87 @@ const keyName = computed(() => {
 const browserStore = useBrowserStore()
 const dialogStore = useDialogStore()
 const keyType = redisTypes.SET
-const currentEditRow = ref({
+const currentEditRow = reactive({
     no: 0,
     value: null,
+    format: formatTypes.RAW,
+    decode: decodeTypes.NONE,
+})
+const inEdit = computed(() => {
+    return currentEditRow.no > 0
 })
-
 const valueColumn = reactive({
     key: 'value',
     title: i18n.t('common.value'),
     align: 'center',
     titleAlign: 'center',
+    ellipsis: {
+        tooltip: true,
+    },
     filterOptionValue: null,
-    filter(value, row) {
+    filter: (value, row) => {
-        return !!~row.value.indexOf(value.toString())
+        return !!~row.v.indexOf(value.toString())
     },
     render: (row) => {
-        const isEdit = currentEditRow.value.no === row.no
+        // if (!isEmpty(row.dv)) {
-        if (isEdit) {
+        //     return h(NCode, { language: 'json', wordWrap: true, code: row.dv })
-            return h(NInput, {
+        // }
-                value: currentEditRow.value.value,
+        return row.dv || row.v
-                type: 'textarea',
-                autosize: { minRow: 2, maxRows: 5 },
-                style: 'text-align: left;',
-                'onUpdate:value': (val) => {
-                    currentEditRow.value.value = val
-                },
-            })
-        } else {
-            return h(NCode, { language: 'plaintext', wordWrap: true }, { default: () => row.value })
-        }
     },
 })
 
-const cancelEdit = () => {
+const startEdit = async (no, value) => {
-    currentEditRow.value.no = 0
+    currentEditRow.value = value
+    currentEditRow.no = no
+}
+
+/**
+ *
+ * @param {string|number} pos
+ * @param {string} value
+ * @param {string} decode
+ * @param {string} format
+ * @return {Promise<void>}
+ */
+const saveEdit = async (pos, value, decode, format) => {
+    try {
+        const index = parseInt(pos) - 1
+        const row = props.value[index]
+        if (row == null) {
+            throw new Error('row not exists')
+        }
+
+        const { added, success, msg } = await browserStore.updateSetItem({
+            server: props.name,
+            db: props.db,
+            key: keyName.value,
+            value: row.v,
+            newValue: value,
+            decode,
+            format,
+        })
+        if (success) {
+            row.v = added
+            const { value: displayVal } = await browserStore.convertValue({
+                value: row.v,
+                decode: props.decode,
+                format: props.format,
+            })
+            row.dv = displayVal
+            $message.success(i18n.t('dialogue.save_value_succ'))
+        } else {
+            $message.error(msg)
+        }
+    } catch (e) {
+        $message.error(e.message)
+    } finally {
+        resetEdit()
+    }
+}
+
+const resetEdit = () => {
+    currentEditRow.no = 0
+    currentEditRow.value = null
 }
 
 const actionColumn = {
@@ -101,14 +151,12 @@ const actionColumn = {
     align: 'center',
     titleAlign: 'center',
     fixed: 'right',
-    render: (row) => {
+    render: (row, index) => {
         return h(EditableTableColumn, {
-            editing: currentEditRow.value.no === row.no,
+            editing: false,
-            bindKey: row.value,
+            bindKey: `#${index + 1}`,
             onEdit: () => {
-                currentEditRow.value.no = row.no
+                startEdit(index + 1, row.v)
-                currentEditRow.value.key = row.key
-                currentEditRow.value.value = row.value
             },
             onDelete: async () => {
                 try {
@@ -116,10 +164,10 @@ const actionColumn = {
                         props.name,
                         props.db,
                         keyName.value,
-                        row.value,
+                        row.v,
                     )
                     if (success) {
-                        $message.success(i18n.t('dialogue.delete_key_succ', { key: row.value }))
+                        $message.success(i18n.t('dialogue.delete_key_succ', { key: row.v }))
                     } else {
                         $message.error(msg)
                     }
@@ -127,31 +175,12 @@ const actionColumn = {
                     $message.error(e.message)
                 }
             },
-            onSave: async () => {
-                try {
-                    const { success, msg } = await browserStore.updateSetItem(
-                        props.name,
-                        props.db,
-                        keyName.value,
-                        row.value,
-                        currentEditRow.value.value,
-                    )
-                    if (success) {
-                        $message.success(i18n.t('dialogue.save_value_succ'))
-                    } else {
-                        $message.error(msg)
-                    }
-                } catch (e) {
-                    $message.error(e.message)
-                } finally {
-                    currentEditRow.value.no = 0
-                }
-            },
-            onCancel: cancelEdit,
         })
     },
 }
+
 const columns = computed(() => {
+    if (!inEdit.value) {
         return [
             {
                 key: 'no',
@@ -159,26 +188,48 @@ const columns = computed(() => {
                 width: 80,
                 align: 'center',
                 titleAlign: 'center',
+                render: (row, index) => {
+                    return index + 1
+                },
             },
             valueColumn,
             actionColumn,
         ]
+    } else {
+        return [
+            {
+                key: 'no',
+                title: '#',
+                width: 80,
+                align: 'center',
+                titleAlign: 'center',
+                render: (row, index) => {
+                    if (index + 1 === currentEditRow.no) {
+                        // editing row, show edit state
+                        return h(NIcon, { size: 16, color: 'red' }, () => h(Edit, { strokeWidth: 5 }))
+                    } else {
+                        return index + 1
+                    }
+                },
+            },
+            valueColumn,
+        ]
+    }
 })
 
-const tableData = computed(() => {
+const rowProps = (row, index) => {
-    const data = []
+    return {
-    const len = size(props.value)
+        onClick: () => {
-    for (let i = 0; i < len; i++) {
+            // in edit mode, switch edit row by click
-        data.push({
+            if (inEdit.value) {
-            no: i + 1,
+                startEdit(index + 1, row.v)
-            value: props.value[i],
-        })
             }
-    return data
+        },
-})
+    }
+}
 
 const entries = computed(() => {
-    const len = size(tableData.value)
+    const len = size(props.value)
     return `${len} / ${Math.max(len, props.length)}`
 })
 
@@ -199,10 +250,14 @@ const onUpdateFilter = (filters, sourceColumn) => {
     valueColumn.filterOptionValue = filters[sourceColumn.key]
 }
 
+const onFormatChanged = (selDecode, selFormat) => {
+    emit('reload', selDecode, selFormat)
+}
+
 defineExpose({
     reset: () => {
         clearFilter()
-        cancelEdit()
+        resetEdit()
     },
 })
 </script>
@@ -254,14 +309,15 @@ defineExpose({
                 {{ $t('interface.add_row') }}
             </n-button>
         </div>
-        <div class="value-wrapper value-item-part flex-box-v flex-item-expand">
+        <div class="value-wrapper value-item-part flex-box-h flex-item-expand">
+            <!-- table -->
             <n-data-table
-                :key="(row) => row.no"
                 :bordered="false"
                 :bottom-bordered="false"
                 :columns="columns"
-                :data="tableData"
+                :data="props.value"
                 :loading="props.loading"
+                :row-props="rowProps"
                 :single-column="true"
                 :single-line="false"
                 class="flex-item-expand"
@@ -270,12 +326,33 @@ defineExpose({
                 striped
                 virtual-scroll
                 @update:filters="onUpdateFilter" />
+
+            <!-- edit pane -->
+            <content-entry-editor
+                v-show="inEdit"
+                :decode="currentEditRow.decode"
+                :field="currentEditRow.no"
+                :field-label="$t('common.index')"
+                :field-readonly="true"
+                :format="currentEditRow.format"
+                :value="currentEditRow.value"
+                :value-label="$t('common.value')"
+                class="flex-item-expand"
+                style="width: 100%"
+                @cancel="resetEdit"
+                @save="saveEdit" />
         </div>
         <div class="value-footer flex-box-h">
             <n-text v-if="!isNaN(props.length)">{{ $t('interface.entries') }}: {{ entries }}</n-text>
             <n-divider v-if="!isNaN(props.length)" vertical />
             <n-text v-if="!isNaN(props.size)">{{ $t('interface.memory_usage') }}: {{ bytes(props.size) }}</n-text>
             <div class="flex-item-expand"></div>
+            <format-selector
+                v-show="!inEdit"
+                :decode="props.decode"
+                :disabled="inEdit"
+                :format="props.format"
+                @format-changed="onFormatChanged" />
         </div>
     </div>
 </template>

frontend/src/components/content_value/ContentValueWrapper.vue

@@ -163,9 +163,11 @@ watch(() => data.value?.keyPath, initContent)
             <n-button :focusable="false" @click="onReload">{{ $t('interface.reload') }}</n-button>
         </template>
     </n-empty>
-    <keep-alive v-else>
+    <!-- FIXME: keep alive may cause virtual list null value error. -->
+    <!--    <keep-alive v-else>-->
     <component
         :is="valueComponents[data.type]"
+        v-else
         ref="contentRef"
         :db="data.db"
         :decode="data.decode"
@@ -184,7 +186,7 @@ watch(() => data.value?.keyPath, initContent)
         @loadmore="onLoadMore"
         @reload="onReload"
         @rename="onRename" />
-    </keep-alive>
+    <!--    </keep-alive>-->
 </template>
 
 <style lang="scss" scoped></style>

frontend/src/stores/browser.js

@@ -1200,7 +1200,7 @@ const useBrowserStore = defineStore('browser', {
          * @param {string} format
          * @returns {Promise<{[msg]: string, success: boolean, [updated]: {}}>}
          */
-        async updateListItem({ server, db, key, index, value, decode, format }) {
+        async updateListItem({ server, db, key, index, value, decode = decodeTypes.NONE, format = formatTypes.RAW }) {
             try {
                 const { data, success, msg } = await SetListItem({ server, db, key, index, value, decode, format })
                 if (success) {
@@ -1266,7 +1266,7 @@ const useBrowserStore = defineStore('browser', {
          */
         async addSetItem(connName, db, key, value) {
             try {
-                if (!value instanceof Array) {
+                if ((!value) instanceof Array) {
                     value = [value]
                 }
                 const { data, success, msg } = await SetSetItem(connName, db, key, false, value)
@@ -1284,20 +1284,23 @@ const useBrowserStore = defineStore('browser', {
 
         /**
          * update value of set item
-         * @param {string} connName
+         * @param {string} server
          * @param {number} db
          * @param {string|number[]} key
-         * @param {string} value
+         * @param {string|number[]} value
-         * @param {string} newValue
+         * @param {string|number[]} newValue
-         * @returns {Promise<{[msg]: string, success: boolean}>}
+         * @param {string} [decode]
+         * @param {string} [format]
+         * @returns {Promise<{[msg]: string, success: boolean, [added]: string|number[]}>}
          */
-        async updateSetItem(connName, db, key, value, newValue) {
+        async updateSetItem({ server, db, key, value, newValue, decode = decodeTypes.NONE, format = formatTypes.RAW }) {
             try {
-                const { success, msg } = await UpdateSetItem(connName, db, key, value, newValue)
+                const { data, success, msg } = await UpdateSetItem({ server, db, key, value, newValue, decode, format })
                 if (success) {
-                    const tab = useTabStore()
+                    const { added } = data
-                    tab.upsertValueEntries({ server: connName, db, key, type: 'set', entries: { [value]: newValue } })
+                    // const tab = useTabStore()
-                    return { success: true }
+                    // tab.upsertValueEntries({ server, db, key, type: 'set', entries: { [value]: newValue } })
+                    return { success: true, added }
                 } else {
                     return { success, msg }
                 }

frontend/src/utils/discrete.js

@@ -111,6 +111,9 @@ export async function setupDiscreteApi() {
             max: 5,
             placement: 'bottom-right',
             keepAliveOnHover: true,
+            containerStyle: {
+                marginBottom: '38px',
+            },
         },
     })