feat: Custom models editor with image picker and file browser integration by ditschi · Pull Request #283 · toniebox-reverse-engineering/teddycloud_web

ditschi · 2026-03-09T22:21:27Z

This Adds

Full editor for tonies.custom.json (add, edit, delete entries)
Image management via reusable file browser (upload, select, custom_img)
Form validation, defaults, and localization

DEPENDS ON:: Backend changes from toniebox-reverse-engineering/teddycloud#426

Details

Custom Tonies Editor: Editor for managing custom tonie models

Custom tonies editor Custom models

Image Manager:

Shared UI for selecting and managing images in Teddy Studio and Custom Tonies Editor

Image Editor::Original Images

Image Editor::Upload and manage Custom Images -- also available in Tonie Studio

…tion - Full editor for tonies.custom.json (add, edit, delete entries) - Image management via reusable file browser (upload, select, custom_img) - Form validation, defaults, and localization

src/components/settings/settings/Settings.tsx

henryk86 · 2026-03-10T05:31:07Z

Thanks for the pr and the added functionality and following the “architecture” 👍

if it works fine, please remove the wip things from the old approach and set your editor as default. No need for a setting to switch between a not finished wip and a complete feature.

Please stick to the icons in the action column instead of the text buttons, the gui should also work in mobile context.

In the custom model file browser… according to the screenshot: are you using no modal and display the editor below the list? In case of a lot of images this might be not ideal? Why not using a modal there?

Please also add an entry in the Changelog.md for your change.

For my better understanding: can you explain the default image thing a bit for me? Aaah. I think I got it. Custom - tonies.custom.json and default - tonies.json. But maybe there is a better wording than default. Like original or so?

have you test it with the image cache enabled?

how did you integrate the image manager in teddystudio? Is the search for a tonie as image source still working as before? Or did you change that completely? - found it, only the custom image part from pure temporary to this solution (would be a completely temporary solution still a nice feature? Not sure probably not.)

src/components/tonies/ToniesSubNav.tsx

src/App.tsx

src/index.css

src/components/tonies/toniecard/modals/EditTonieModal.tsx

src/components/tonies/filebrowser/modals/UploadFilesModal.tsx

henryk86 · 2026-03-10T06:02:30Z

src/components/tonies/filebrowser/helper/Columns.tsx

+    onImagePreviewClick?: (imageUrl: string) => void;
 }

+const IMAGE_EXTENSIONS = [".png", ".jpg", ".jpeg", ".webp", ".gif"];


Move to constants.ts please

Created constants/fileTypes.ts,

public/translations/en.json

src/components/tonies/filebrowser/modals/ImageManagerModal.tsx

public/translations/en.json

public/translations/de.json

ditschi

will continue tomorrow with additionam manual tests (e.g. image cache)

public/translations/de.json

public/translations/en.json

src/components/settings/settings/Settings.tsx

src/components/tonies/ToniesSubNav.tsx

src/index.css

src/components/tonies/toniecard/modals/EditTonieModal.tsx

src/components/tonies/filebrowser/modals/UploadFilesModal.tsx

ditschi · 2026-03-11T00:12:58Z

src/components/tonies/filebrowser/helper/Columns.tsx

+    onImagePreviewClick?: (imageUrl: string) => void;
 }

+const IMAGE_EXTENSIONS = [".png", ".jpg", ".jpeg", ".webp", ".gif"];


Created constants/fileTypes.ts,

src/components/tonies/filebrowser/modals/ImageManagerModal.tsx

- Remove custom_editor_preview setting (editor always active) - Ignore contrib/data/www/ (compiled web assets) - Update teddycloud_web submodule (v0.7.0, PR feedback)

ditschi · 2026-03-11T00:30:54Z

Updated description with updated screenshots

henryk86 · 2026-03-11T05:28:12Z

Thanks for resolving the comments.

Please use the default button colors (no green button for new model)

…n and grey out buttons

ditschi · 2026-03-11T21:14:58Z

Thanks for resolving the comments.

Please use the default button colors (no green button for new model)

Updated,
also moved to better location. Also now save , discard and Changes only buttons will now be greyed out if they do not apply

henryk86 · 2026-03-11T21:16:50Z

src/components/tonies/ToniesCustomJsonEditorEnhanced.tsx

+                            top: 0,
+                            zIndex: 5,
+                            background: "var(--ant-color-bg-container, #141414)",
+                            border: "1px solid #303030",


No hardcoded colors please. Use the ants token system. Also direct use of those -var(…)

Use e.g. token.colorBorder instead

henryk86 · 2026-03-11T21:17:40Z

src/components/tonies/ToniesCustomJsonEditorEnhanced.tsx

@@ -1559,10 +1545,22 @@ export const ToniesCustomJsonEditor: React.FC<ToniesCustomJsonEditorProps> = ({
                <div className="custom-tonie-table" style={{ border: "1px solid #303030", borderRadius: 8, padding: 8, marginBottom: 8 }}>


No hardcoded colors please

henryk86 · 2026-03-11T21:30:50Z

Thanks for resolving the comments.
Please use the default button colors (no green button for new model)

Updated, also moved to better location. Also now save , discard and Changes only buttons will now be greyed out if they do not apply

I still doubt this is a good solution if you have hundreds of custom models. Why don’t you use a modal for that? Even if you want to edit multiple entries a modal would be better. Kind of the teddystudio label edit one where you can navigate through all labels and save on click next and so?

henryk86 · 2026-03-11T21:33:33Z

And please stick to the general placing of buttons. As far as I can remember nowhere else the buttons are on top for saving. They are always on the bottom.

henryk86 · 2026-03-11T21:42:00Z

src/components/tonies/filebrowser/helper/Columns.tsx

    let columns: any[] = [
        {
-            title: mode === "full" ? <div style={{ minHeight: 32 }}></div> : "",
+            title: mode === "full" ? t("fileBrowser.image", { defaultValue: "Bild" }) : "",


Please remove the default. (Or at least change to English)

henryk86 · 2026-03-11T21:44:11Z

src/components/tonies/filebrowser/modals/ImageManagerModal.tsx

+                        display: source === "original" ? "block" : "none",
+                        maxHeight: 520,
+                        overflowY: "auto",
+                        border: "1px solid #303030",


No hardcoded colors please

henryk86 · 2026-03-11T21:44:32Z

src/components/tonies/filebrowser/modals/ImageManagerModal.tsx

+                                        cursor: "pointer",
+                                        padding: 8,
+                                        border:
+                                            originalSelection === item ? "1px solid #1677ff" : "1px solid transparent",


No hardcoded colors please

henryk86 · 2026-03-11T21:48:57Z

src/components/tonies/filebrowser/SelectFileFileBrowser.tsx

Is this a good idea to use this for adding files? This should be the light weight SELECT FILE file browser? So only for selecting existing files from teddycloud. Not for adding files.

With those changes it’s now kind of a duplicate to the filebrowser itself… I would prefer if you remove those changes and leave it as a select file filebrowser…

henryk86 · 2026-03-11T21:54:34Z

src/components/tonies/ToniesCustomJsonEditorEnhanced.tsx

+            const modelKey = entry.model.trim().toLowerCase();
+            if (modelMap.has(modelKey)) {
+                return {
+                    error: t("tonies.addNewCustomTonieModal.modelRequired") + ` (Duplikat: ${entry.model})`,


Stick to English

henryk86 · 2026-03-11T21:54:50Z

src/components/tonies/ToniesCustomJsonEditorEnhanced.tsx

+                const pair = `${audioIds[j]}::${hashes[j].toLowerCase()}`;
+                if (pairMap.has(pair)) {
+                    return {
+                        error: `Doppelte audio_id+hash-Kombination erkannt: ${audioIds[j]}`,


Stick to English

henryk86 · 2026-03-11T21:57:09Z

src/components/tonies/ToniesCustomJsonEditorEnhanced.tsx

+    const changedInputStyle = (changed: boolean) =>
+        changed
+            ? ({
+                  backgroundColor: "rgba(250, 173, 20, 0.18)",


No hardcoded colors please, use the antd token system

henryk86 · 2026-03-11T21:58:33Z

src/components/tonies/ToniesCustomJsonEditorEnhanced.tsx

+
+    const getStatusBadge = (status: DraftStatus) => {
+        const label = getStatusLabel(status);
+        if (status === "clean") return <Tag style={{ background: "transparent", borderColor: "rgba(255,255,255,0.2)" }}>{label}</Tag>;


Try to use the antd token colors, no hardcoded colors.

henryk86 · 2026-03-11T22:00:29Z

src/components/tonies/ToniesCustomJsonEditorEnhanced.tsx

+                                setPreviewOpen(true);
+                            }}
+                            style={{
+                                border: "1px solid #5a5a5a",


No hardcoded colors please

henryk86 · 2026-03-11T22:00:52Z

src/components/tonies/ToniesCustomJsonEditorEnhanced.tsx

+                            }}
+                        >
+                            {isBroken ? (
+                                <span style={{ display: "block", fontSize: 18, lineHeight: "44px", textAlign: "center" }}>🖼️</span>


Only use antd icons please

henryk86 · 2026-03-11T22:02:53Z

src/components/tonies/ToniesCustomJsonEditorEnhanced.tsx

+                        message={t("tonies.customEditor.batch.title", { defaultValue: "Batch editing active" })}
+                        description={t("tonies.customEditor.batch.description", {
+                            defaultValue:
+                                "Bei Mehrfachauswahl werden nur Serie, Release, Sprache, Kategorie und Bild auf alle ausgewählten Modelle angewendet.",


No default please (and if you won’t remove it, stick to English)

henryk86 · 2026-03-11T22:03:31Z

src/components/tonies/ToniesCustomJsonEditorEnhanced.tsx

+                        type="error"
+                        showIcon
+                        style={{ marginBottom: 8 }}
+                        message={t("tonies.customEditor.validation.title", { defaultValue: "Please fix these issues first" })}


No default please. Makes it easier to identify missing translation entries)

henryk86 · 2026-03-11T22:04:07Z

src/components/tonies/ToniesCustomJsonEditorEnhanced.tsx

+                    >
+                        <Collapse.Panel
+                            key="media"
+                            header={t("tonies.customEditor.sections.media", { defaultValue: "Media and images" })}


No default please

henryk86 · 2026-03-11T22:04:20Z

src/components/tonies/ToniesCustomJsonEditorEnhanced.tsx

+                                        {t("tonies.addNewCustomTonieModal.pic")}
+                                        <Tooltip
+                                            title={t("tonies.customEditor.picHint", {
+                                                defaultValue:


No default please

henryk86 · 2026-03-11T22:05:07Z

src/components/tonies/ToniesCustomJsonEditorEnhanced.tsx

+                                    type="info"
+                                    showIcon
+                                    style={{ marginBottom: 12 }}
+                                    message={t("tonies.customEditor.coinHint.title", { defaultValue: "Hint: Audio assignment" })}


No default please

henryk86 · 2026-03-11T22:05:22Z

src/components/tonies/ToniesCustomJsonEditorEnhanced.tsx

+                                    message={t("tonies.customEditor.coinHint.title", { defaultValue: "Hint: Audio assignment" })}
+                                    description={t("tonies.customEditor.coinHint.description", {
+                                        defaultValue:
+                                            "Optional – only for metadata (title, tracks). Custom coins work without a model. Use only custom audio – official IDs overwrite real Tonies. Does not link NFC tags to audio.",


No default please

henryk86 · 2026-03-11T22:06:17Z

src/components/tonies/ToniesCustomJsonEditorEnhanced.tsx

+                            <>
+                                <div
+                                    style={{
+                                        border: areTracksChanged ? "1px solid #faad14" : "1px solid transparent",


No hardcoded colors please

henryk86 · 2026-03-11T22:07:13Z

src/components/tonies/ToniesCustomJsonEditorEnhanced.tsx

+                    setPendingSavePlan(null);
+                }}
+                onOk={handlePreflightConfirm}
+                okText={t("tonies.customEditor.preflight.confirm", { defaultValue: "Save now" })}


No default please

henryk86 · 2026-03-11T22:07:42Z

src/components/tonies/ToniesCustomJsonEditorEnhanced.tsx

+                <Space direction="vertical">
+                    <Typography.Text>
+                        {t("tonies.customEditor.preflight.description", {
+                            defaultValue: "Please confirm the scope of this save operation.",


No default please (Also in the next lines)

henryk86 · 2026-03-11T22:09:07Z

src/components/tonies/ToniesCustomJsonEditorEnhanced.tsx

I hope you will refactor this file when you are finished? It’s a way too big. Move the functionality in one or more hooks please.

henryk86 · 2026-03-11T22:21:20Z

In general please use always the antd token colors if you want to set a color. Hardcoded colors are problematic if you switch the theme.

I like to avoid default translations as it masks forgotten translations. As said earlier, you can use the gui —> community —> contribution —> translations to check if you have all translations in all 4 languages (not if you have missed one in all languages)

Console error logs don’t need to be translated but should always be in English.

I like the configurable columns in the models list. Are those chosen columns stored somewhere or do you have to select them always? (If the selection is stored somewhere, that might be a good thing for the filebrowser also)

feat: Custom models editor with image picker and file browser integra…

e38059d

…tion - Full editor for tonies.custom.json (add, edit, delete entries) - Image management via reusable file browser (upload, select, custom_img) - Form validation, defaults, and localization

ditschi mentioned this pull request Mar 9, 2026

Feature/custom model editor toniebox-reverse-engineering/teddycloud#426

Draft

henryk86 reviewed Mar 10, 2026

View reviewed changes

src/components/settings/settings/Settings.tsx Outdated Show resolved Hide resolved

henryk86 reviewed Mar 10, 2026

View reviewed changes

src/components/tonies/ToniesSubNav.tsx Outdated Show resolved Hide resolved

henryk86 reviewed Mar 10, 2026

View reviewed changes

src/App.tsx Outdated Show resolved Hide resolved

henryk86 reviewed Mar 10, 2026

View reviewed changes

src/index.css Outdated Show resolved Hide resolved

henryk86 reviewed Mar 10, 2026

View reviewed changes

src/components/tonies/toniecard/modals/EditTonieModal.tsx Outdated Show resolved Hide resolved

henryk86 reviewed Mar 10, 2026

View reviewed changes

src/components/tonies/filebrowser/modals/UploadFilesModal.tsx Outdated Show resolved Hide resolved

henryk86 reviewed Mar 10, 2026

View reviewed changes

public/translations/en.json Outdated Show resolved Hide resolved

henryk86 reviewed Mar 10, 2026

View reviewed changes

src/components/tonies/filebrowser/modals/ImageManagerModal.tsx Outdated Show resolved Hide resolved

henryk86 reviewed Mar 10, 2026

View reviewed changes

public/translations/en.json Show resolved Hide resolved

henryk86 reviewed Mar 10, 2026

View reviewed changes

public/translations/de.json Outdated Show resolved Hide resolved

ditschi commented Mar 11, 2026

View reviewed changes

ditschi force-pushed the feature/custom-model-editor branch from bdf2ed3 to 8555fb1 Compare March 11, 2026 00:21

feat: Custom Models Editor integration

d382516

- Remove custom_editor_preview setting (editor always active) - Ignore contrib/data/www/ (compiled web assets) - Update teddycloud_web submodule (v0.7.0, PR feedback)

ditschi force-pushed the feature/custom-model-editor branch from 8555fb1 to d382516 Compare March 11, 2026 00:25

Christian Ditscher added 2 commits March 11, 2026 20:59

fix: use default button colors for new model button

c32e15e

fix: use default button colors for new model button, improved locatio…

5d6f38b

…n and grey out buttons

henryk86 reviewed Mar 11, 2026

View reviewed changes

		@@ -1559,10 +1545,22 @@ export const ToniesCustomJsonEditor: React.FC<ToniesCustomJsonEditorProps> = ({
		<div className="custom-tonie-table" style={{ border: "1px solid #303030", borderRadius: 8, padding: 8, marginBottom: 8 }}>

Conversation

ditschi commented Mar 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

This Adds

Details

Custom Tonies Editor: Editor for managing custom tonie models

Image Manager:

Uh oh!

Uh oh!

henryk86 commented Mar 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ditschi left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ditschi commented Mar 11, 2026

Uh oh!

henryk86 commented Mar 11, 2026

Uh oh!

ditschi commented Mar 11, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

henryk86 Mar 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

henryk86 commented Mar 11, 2026

Uh oh!

henryk86 commented Mar 11, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

henryk86 Mar 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

ditschi commented Mar 9, 2026 •

edited

Loading

henryk86 commented Mar 10, 2026 •

edited

Loading

henryk86 Mar 11, 2026 •

edited

Loading

henryk86 Mar 11, 2026 •

edited

Loading