chore(react/ribbon): finalize note type selection

This commit is contained in:
Elian Doran
2025-08-21 21:01:57 +03:00
parent f45da049b9
commit 5945f2860a
3 changed files with 5 additions and 44 deletions

View File

@@ -1,42 +0,0 @@
import { Dropdown } from "bootstrap";
import { NOTE_TYPES } from "../services/note_types.js";
import { t } from "../services/i18n.js";
import dialogService from "../services/dialog.js";
import mimeTypesService from "../services/mime_types.js";
import NoteContextAwareWidget from "./note_context_aware_widget.js";
import server from "../services/server.js";
import type { EventData } from "../components/app_context.js";
import type { NoteType } from "../entities/fnote.js";
import type FNote from "../entities/fnote.js";
const NOT_SELECTABLE_NOTE_TYPES = NOTE_TYPES.filter((nt) => nt.reserved || nt.static).map((nt) => nt.type);
export default class NoteTypeWidget extends NoteContextAwareWidget {
private dropdown!: Dropdown;
private $noteTypeDropdown!: JQuery<HTMLElement>;
private $noteTypeButton!: JQuery<HTMLElement>;
private $noteTypeDesc!: JQuery<HTMLElement>;
doRender() {
this.$widget = $(TPL);
this.dropdown = Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']")[0]);
this.$widget.on("show.bs.dropdown", () => this.renderDropdown());
this.$noteTypeDropdown = this.$widget.find(".note-type-dropdown");
this.$noteTypeButton = this.$widget.find(".note-type-button");
this.$widget.on("click", ".dropdown-item", () => this.dropdown.toggle());
}
async refreshWithNote(note: FNote) {
this.$noteTypeButton.prop("disabled", () => NOT_SELECTABLE_NOTE_TYPES.includes(note.type));
this.$noteTypeDesc.text(await this.findTypeTitle(note.type, note.mime));
this.dropdown.hide();
}
}

View File

@@ -21,6 +21,7 @@ function NoteTypeWidget() {
const noteTypes = useMemo(() => NOTE_TYPES.filter((nt) => !nt.reserved && !nt.static), []);
const [ codeNotesMimeTypes ] = useTriliumOption("codeNotesMimeTypes");
const mimeTypes = useMemo(() => mime_types.getMimeTypes().filter(mimeType => mimeType.enabled), [ codeNotesMimeTypes ]);
const notSelectableNoteTypes = useMemo(() => NOTE_TYPES.filter((nt) => nt.reserved || nt.static).map((nt) => nt.type), []);
const { note } = useNoteContext();
const currentNoteType = useNoteProperty(note, "type") ?? undefined;
@@ -50,6 +51,7 @@ function NoteTypeWidget() {
<Dropdown
dropdownContainerClassName="note-type-dropdown"
text={<span className="note-type-desc">{findTypeTitle(currentNoteType, currentNoteMime)}</span>}
disabled={notSelectableNoteTypes.includes(currentNoteType ?? "text")}
>
{noteTypes.map(({ isNew, isBeta, type, mime, title }) => {
const badges: FormListBadge[] = [];
@@ -99,7 +101,7 @@ function NoteTypeWidget() {
)
}
function findTypeTitle(type?: NoteType, mime?: string) {
function findTypeTitle(type?: NoteType, mime?: string | null) {
if (type === "code") {
const mimeTypes = mime_types.getMimeTypes();
const found = mimeTypes.find((mt) => mt.mime === mime);

View File

@@ -119,7 +119,8 @@ export const ALLOWED_NOTE_TYPES = [
"book",
"webView",
"code",
"mindMap"
"mindMap",
"aiChat"
] as const;
export type NoteType = (typeof ALLOWED_NOTE_TYPES)[number];