fix: improved ui

Author: Daniele-rolli

package.json

@@ -67,6 +67,7 @@
     "@tiptap/extension-text-style": "^2.11.5",
     "@tiptap/extension-typography": "^2.8.0",
     "@tiptap/extension-underline": "^2.1.13",
+    "@tiptap/extensions": "^3.0.7",
     "@tiptap/pm": "^2.1.13",
     "@tiptap/react": "^2.4.0",
     "@tiptap/starter-kit": "^2.1.13",

src/Archive.tsx

@@ -16,6 +16,7 @@ interface ArchiveProps {
 
 const Archive: React.FC<ArchiveProps> = ({ notesState, setNotesState }) => {
   const { activeNoteId } = useNotesState();
+  const [sortingOption, setSortingOption] = useState("updatedAt");
   const [searchQuery, setSearchQuery] = useState<string>("");
   const [selectedLabel, setSelectedLabel] = useState<string>("");
   const [filteredNotes, setFilteredNotes] =
@@ -52,8 +53,6 @@ const Archive: React.FC<ArchiveProps> = ({ notesState, setNotesState }) => {
     );
   }, [searchQuery, selectedLabel, notesState]);
 
-  const [sortingOption] = useState("updatedAt");
-
   const notesList = Object.values(filteredNotes).sort((a, b) => {
     switch (sortingOption) {
       case "alphabetical":
@@ -100,7 +99,7 @@ const Archive: React.FC<ArchiveProps> = ({ notesState, setNotesState }) => {
                 searchQuery={searchQuery}
                 setSearchQuery={setSearchQuery}
                 handleLabelFilterChange={handleLabelFilterChange}
-                setSortingOption={handleLabelFilterChange}
+                setSortingOption={setSortingOption}
               />
               <div className="py-2 p-2 mx-4 mb-10 cursor-pointer rounded-md items-center justify-center h-full">
                 <h2 className="text-3xl font-bold">

src/Home.tsx

@@ -10,8 +10,6 @@ import { useNotesState } from "./store/Activenote";
 import { SendIntent } from "send-intent";
 import { useImportBea } from "./utils/share";
 import { loadNotes } from "./store/notes";
-
-// Import Remix icons
 import NoteCard from "./components/Home/NoteCard";
 import Icon from "./components/UI/Icon";
 

src/assets/locales/en.json

@@ -263,7 +263,7 @@
     "Highlight": "Highlight",
     "Inlinecode": "Inline code",
     "Headings": "Headings (1-6)",
-    "Orderedlist": "Ordered list",
+    "orderedList": "Ordered list",
     "Bulletlist": "Bullet list",
     "Blockquote": "Blockquote",
     "Blockcode": "Block code",

src/components/note/NoteEditor.tsx

@@ -50,10 +50,8 @@ function EditorComponent({
 
   useEffect(() => {
     const filtered = Object.values(notesState).filter((note) => {
-      const titleMatch = note.title
-        .toLowerCase()
-        .includes(searchQuery.toLowerCase());
-      return titleMatch;
+      const noteTitle = note.title ?? ""; // fallback to empty string
+      return noteTitle.toLowerCase().includes(searchQuery.toLowerCase());
     });
 
     setFilteredNotes(
@@ -64,7 +62,7 @@ function EditorComponent({
   const notesList = Object.values(filteredNotes).sort((a, b) => {
     switch (sortingOption) {
       case "alphabetical":
-        return a.title.localeCompare(b.title);
+        return (a.title ?? "").localeCompare(b.title ?? "");
       case "createdAt":
         const createdAtA = typeof a.createdAt === "number" ? a.createdAt : 0;
         const createdAtB = typeof b.createdAt === "number" ? b.createdAt : 0;
@@ -151,9 +149,16 @@ function EditorComponent({
     }
   }, [labelStore.labels, editor, note.labels, title]);
 
-  document.addEventListener("showFind", () => {
-    setShowFind((prevShowFind) => !prevShowFind);
-  });
+  useEffect(() => {
+    function toggleFindListener() {
+      setShowFind((prevShowFind) => !prevShowFind);
+    }
+
+    document.addEventListener("showFind", toggleFindListener);
+    return () => {
+      document.removeEventListener("showFind", toggleFindListener);
+    };
+  }, []);
 
   useEffect(() => {
     setWd(localStorage.getItem("expand-editor") === "true");

src/components/note/Toolbar.tsx

@@ -454,11 +454,11 @@ const Toolbar: React.FC<ToolbarProps> = ({
           modelValue={false}
           triggerContent={
             <button
-              className={`p-1 ${
+              className={`${
                 editor?.isActive("highlight")
-                  ? "text-primary"
-                  : "text-neutral-700 dark:text-[color:var(--selected-dark-text)]"
-              } cursor-pointer flex-1`}
+                  ? "p-1 rounded-md text-primary hoverable cursor-pointer text-primary"
+                  : "p-1 rounded-md hoverable dark:text-[color:var(--selected-dark-text)] text-neutral-800"
+              }`}
             >
               <Icon name="MarkPenLine" />
             </button>

src/lib/tiptap/exts/code-block/CodeBlockComponent.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import { useTranslation } from "@/utils/translations";
 import { NodeViewWrapper, NodeViewContent } from "@tiptap/react";
 
 const CodeBlockComponent = ({ node, updateAttributes, extension }) => {
@@ -18,7 +19,7 @@ const CodeBlockComponent = ({ node, updateAttributes, extension }) => {
     setSelectedLanguage(node.attrs.language || "");
   }, [node.attrs.language]);
 
-  const [translations, setTranslations] = ({
+  const [translations, setTranslations] = useState({
     accessibility: {},
   });
 
@@ -31,7 +32,6 @@ const CodeBlockComponent = ({ node, updateAttributes, extension }) => {
     };
     fetchTranslations();
   }, []);
-  
 
   return (
     <NodeViewWrapper className="relative">

src/lib/tiptap/exts/commands/Commands.tsx

@@ -414,7 +414,7 @@ const Commands: React.FC<SlashMenuProps> = ({
   }, [filteredItems.length]);
 
   return (
-    <UiList className="z-50 fixed bg-white dark:bg-neutral-800 rounded-lg shadow-lg border shadow-xl dark:border-neutral-600 p-2">
+    <UiList className="z-50 fixed rounded-lg shadow-lg border shadow-xl dark:border-neutral-600 p-2">
       {filteredItems.map((item, index) => (
         <UiListItem
           key={item.id}
@@ -425,13 +425,13 @@ const Commands: React.FC<SlashMenuProps> = ({
           {item.type === "upload" && item.component ? (
             item.component
           ) : (
-            <div className="flex items-center p-2 rounded-lg text-black dark:text-[color:var(--selected-dark-text)] hover:bg-neutral-100 dark:hover:bg-neutral-700 transition duration-200">
+            <div className="flex items-center rounded-lg transition">
               <div className="text-left flex overflow-hidden text-ellipsis whitespace-nowrap">
                 <Icon
                   name={item.icon as IconName}
                   className={`mr-2 ltr:ml-2 text-lg ${item.className || ""}`}
                 />
-                <h3 className="text-lg font-medium text-neutral-800 dark:text-[color:var(--selected-dark-text)]">
+                <h3 className="text-lg font-medium">
                   {item.label}
                 </h3>
               </div>

src/lib/tiptap/index.ts

@@ -35,6 +35,7 @@ import { Color } from "@tiptap/extension-color";
 import Footnote from "./exts/footnote-block/footnote";
 import Footnotes from "./exts/footnote-block/footnotes";
 import FootnoteReference from "./exts/footnote-block/reference";
+import { TrailingNode } from "@tiptap/extensions";
 import {
   blackCallout,
   blueCallout,
@@ -81,7 +82,8 @@ const extensions = [
   Link.extend({
     addKeyboardShortcuts() {
       return {
-        "Mod-k": () => this.editor.chain().focus().toggleLink({ href: '' }).run(),
+        "Mod-k": () =>
+          this.editor.chain().focus().toggleLink({ href: "" }).run(),
       };
     },
   }).configure({
@@ -104,6 +106,7 @@ const extensions = [
   MathInline,
   FileEmbed,
   SearchAndReplace,
+  TrailingNode,
   Mathblock,
   iframe,
   Typography,

yarn.lock

@@ -2099,6 +2099,11 @@
   resolved "https://registry.yarnpkg.com/@tiptap/extension-underline/-/extension-underline-2.26.1.tgz#79f2eced758b5432e7b2dd764bd0d4e53e8c1721"
   integrity sha512-/fufv41WDMdf0a4xmFAxONoAz08TonJXX6NEoSJmuGKO59M/Y0Pz8DTK1g32Wk44kn7dyScDiPlvvndl+UOv0A==
 
+"@tiptap/extensions@^3.0.7":
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extensions/-/extensions-3.0.7.tgz#510daa0c683e82631a0b3c2989c42ba9c4a99c5d"
+  integrity sha512-GkXX5l7Q/543BKsC14j8M3qT+75ILb7138zy7cZoHm/s1ztV1XTknpEswBZIRZA9n6qq+Wd9g5qkbR879s6xhA==
+
 "@tiptap/pm@^2.1.13", "@tiptap/pm@^2.26.1":
   version "2.26.1"
   resolved "https://registry.yarnpkg.com/@tiptap/pm/-/pm-2.26.1.tgz#5e4bd79e60fe698fa12770b2845e5133b3333d06"