chore(react/ribbon): add basic note types & badges

apps/client/src/widgets/note_type.ts

@@ -65,19 +65,9 @@ export default class NoteTypeWidget extends NoteContextAwareWidget {
             return;
         }
 
-        for (const noteType of NOTE_TYPES.filter((nt) => !nt.reserved && !nt.static)) {
+        for (const noteType of ) {
             let $typeLink: JQuery<HTMLElement>;
 
-            const $title = $("<span>").text(noteType.title);
-
-            if (noteType.isNew) {
-                $title.append($(`<span class="badge new-note-type-badge">`).text(t("note_types.new-feature")));
-            }
-
-            if (noteType.isBeta) {
-                $title.append($(`<span class="badge">`).text(t("note_types.beta-feature")));
-            }
-
             if (noteType.type !== "code") {
                 $typeLink = $('<a class="dropdown-item">')
                     .attr("data-note-type", noteType.type)

apps/client/src/widgets/react/FormList.tsx

@@ -63,15 +63,21 @@ export default function FormList({ children, onSelect, style, fullHeight }: Form
     );
 }
 
+export interface FormListBadge {
+    className?: string;
+    text: string;
+}
+
 interface FormListItemOpts {
     children: ComponentChildren;
     icon?: string;
     value?: string;
     title?: string;
     active?: boolean;
+    badges?: FormListBadge[];
 }
 
-export function FormListItem({ children, icon, value, title, active }: FormListItemOpts) {
+export function FormListItem({ children, icon, value, title, active, badges }: FormListItemOpts) {
     return (
         <a
             class={`dropdown-item ${active ? "active" : ""}`}
@@ -80,6 +86,9 @@ export function FormListItem({ children, icon, value, title, active }: FormListI
         >
             <Icon icon={icon} />&nbsp;
             {children}
+            {badges && badges.map(({ className, text }) => (
+                <span className={`badge ${className ?? ""}`}>{text}</span>
+            ))}
         </a>
     );
 }

apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx

@@ -1,3 +1,42 @@
+import { useCallback, useMemo } from "preact/hooks";
+import Dropdown from "../react/Dropdown";
+import { NOTE_TYPES } from "../../services/note_types";
+import { FormListBadge, FormListItem } from "../react/FormList";
+import { t } from "../../services/i18n";
+
 export default function BasicPropertiesTab() {
-    return <p>Hi</p>;
+    return (
+        <div className="basic-properties-widget">
+            <NoteTypeWidget />
+        </div>
+    );
+}
+
+function NoteTypeWidget() {
+    const noteTypes = useMemo(() => NOTE_TYPES.filter((nt) => !nt.reserved && !nt.static), []);
+
+    return (
+        <Dropdown>
+            {noteTypes.map(noteType => {
+                const badges: FormListBadge[] = [];
+                if (noteType.isNew) {
+                    badges.push({
+                        className: "new-note-type-badge",
+                        text: t("note_types.new-feature")
+                    });
+                }
+                if (noteType.isBeta) {
+                    badges.push({
+                        text: t("note_types.beta-feature")
+                    });
+                }
+
+                return (
+                    <FormListItem
+                        badges={badges}
+                    >{noteType.title}</FormListItem>    
+                );
+            })}
+        </Dropdown>
+    )   
 }

apps/client/src/widgets/ribbon/Ribbon.tsx

@@ -101,7 +101,7 @@ const TAB_CONFIGURATION: TabConfiguration[] = [
 export default function Ribbon() {
     const { note } = useNoteContext();
     const context: TabContext = { note };
-    const [ activeTab, setActiveTab ] = useState<number>();
+    const [ activeTab, setActiveTab ] = useState<number | undefined>(8);
     const activeTabConfiguration = activeTab ? TAB_CONFIGURATION[activeTab] : undefined;
 
     return (

apps/client/src/widgets/ribbon/style.css

@@ -91,4 +91,27 @@
 
 .ribbon-tab-title.active .ribbon-tab-title-label {
     display: inline;
+}
+
+.basic-properties-widget {
+    padding: 0px 12px 6px 12px;
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+}
+
+.basic-properties-widget > * {
+    margin-top: 9px;
+    margin-bottom: 2px;
+}
+
+.basic-properties-widget > * > :last-child {
+    margin-right: 30px;
+}
+
+.note-type-container,
+.editability-select-container,
+.note-language-container {
+    display: flex;
+    align-items: center;
 }

apps/client/src/widgets/ribbon_widgets/basic_properties.ts

@@ -10,32 +10,6 @@ import type FNote from "../../entities/fnote.js";
 import NoteLanguageWidget from "../note_language.js";
 
 const TPL = /*html*/`
-<div class="basic-properties-widget">
-    <style>
-        .basic-properties-widget {
-            padding: 0px 12px 6px 12px;
-            display: flex;
-            align-items: baseline;
-            flex-wrap: wrap;
-        }
-
-        .basic-properties-widget > * {
-            margin-top: 9px;
-            margin-bottom: 2px;
-        }
-
-        .basic-properties-widget > * > :last-child {
-            margin-right: 30px;
-        }
-
-        .note-type-container,
-        .editability-select-container,
-        .note-language-container {
-            display: flex;
-            align-items: center;
-        }
-    </style>
-
     <div class="note-type-container">
         <span>${t("basic_properties.note_type")}:</span> &nbsp;
     </div>
@@ -55,7 +29,7 @@ const TPL = /*html*/`
     <div class="note-language-container">
         <span>${t("basic_properties.language")}:</span> &nbsp;
     </div>
-</div>`;
+`;
 
 export default class BasicPropertiesWidget extends NoteContextAwareWidget {