- {note && !isHiddenNote && noteType === "book" &&
}
+
0 && "visible")}>
+ {items}
);
}
+
+function SearchProperties({ note, ntxId }: { note: FNote, ntxId: string | null | undefined }) {
+ return (note &&
+
+
+ );
+}
diff --git a/apps/client/src/widgets/layout/StatusBar.css b/apps/client/src/widgets/layout/StatusBar.css
index 650b4bdd3..a30b4b89e 100644
--- a/apps/client/src/widgets/layout/StatusBar.css
+++ b/apps/client/src/widgets/layout/StatusBar.css
@@ -57,10 +57,16 @@
}
.dropdown-note-info {
+ padding: 1em !important;
+
ul {
+ --row-block-margin: .2em;
+
list-style-type: none;
- padding: 0.5em;
+ padding: 0;
margin: 0;
+ margin-top: calc(0px - var(--row-block-margin));
+ margin-bottom: 12px;
display: table;
li {
@@ -68,7 +74,8 @@
> strong {
display: table-cell;
- padding: 0.2em 0;
+ padding: var(--row-block-margin) 0;
+ opacity: .5;
}
> span {
@@ -85,9 +92,62 @@
padding: 0.5em;
}
+ .note-path-intro {
+ color: var(--muted-text-color);
+ }
+
.note-path-list {
- margin: 1em;
+ margin: 12px 0;
padding: 0;
+ list-style: none;
+
+ li {
+ --border-radius: 6px;
+
+ position: relative;
+ background: var(--card-background-color);
+ padding: 8px 20px 8px 25px;
+
+ &:first-child {
+ border-radius: var(--border-radius) var(--border-radius) 0 0;
+ }
+
+ &:last-child {
+ border-radius: 0 0 var(--border-radius) var(--border-radius);
+ }
+
+ & + li {
+ margin-top: 2px;
+ }
+
+ &.path-current::before {
+ position: absolute;
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ content: "\ee8f";
+ top: 0;
+ left: 0;
+ width: 20px;
+ bottom: 0;
+ font-family: "boxicons";
+ font-size: .85em;
+ color: var(--menu-item-icon-color);
+ }
+ }
+
+ a {
+ margin-inline: 2px;
+ padding-inline: 2px;
+ color: currentColor;
+ font-weight: normal;
+ text-decoration: none;
+
+ &.basename {
+ color: var(--muted-text-color);
+ }
+ }
+
}
}
diff --git a/apps/client/src/widgets/layout/StatusBar.tsx b/apps/client/src/widgets/layout/StatusBar.tsx
index 26154e98f..e4724b31c 100644
--- a/apps/client/src/widgets/layout/StatusBar.tsx
+++ b/apps/client/src/widgets/layout/StatusBar.tsx
@@ -1,6 +1,7 @@
import "./StatusBar.css";
import { Locale } from "@triliumnext/commons";
+import { Dropdown as BootstrapDropdown } from "bootstrap";
import clsx from "clsx";
import { type ComponentChildren } from "preact";
import { createPortal } from "preact/compat";
@@ -18,14 +19,16 @@ import { formatDateTime } from "../../utils/formatters";
import { BacklinksList, useBacklinkCount } from "../FloatingButtonsDefinitions";
import Dropdown, { DropdownProps } from "../react/Dropdown";
import { FormDropdownDivider, FormListItem } from "../react/FormList";
-import { useActiveNoteContext, useLegacyImperativeHandlers, useNoteProperty, useStaticTooltip, useTriliumEvent, useTriliumEvents } from "../react/hooks";
+import { useActiveNoteContext, useLegacyImperativeHandlers, useNoteLabel, useNoteProperty, useStaticTooltip, useTriliumEvent, useTriliumEvents } from "../react/hooks";
import Icon from "../react/Icon";
+import LinkButton from "../react/LinkButton";
import { ParentComponent } from "../react/react_utils";
import { ContentLanguagesModal, NoteTypeCodeNoteList, NoteTypeOptionsModal, useLanguageSwitcher, useMimeTypes } from "../ribbon/BasicPropertiesTab";
import AttributeEditor, { AttributeEditorImperativeHandlers } from "../ribbon/components/AttributeEditor";
import InheritedAttributesTab from "../ribbon/InheritedAttributesTab";
import { NoteSizeWidget, useNoteMetadata } from "../ribbon/NoteInfoTab";
import { NotePathsWidget, useSortedNotePaths } from "../ribbon/NotePathsTab";
+import SimilarNotesTab from "../ribbon/SimilarNotesTab";
import { useAttachments } from "../type_widgets/Attachment";
import { useProcessedLocales } from "../type_widgets/options/components/LocaleSelector";
import Breadcrumb from "./Breadcrumb";
@@ -40,17 +43,27 @@ interface StatusBarContext {
export default function StatusBar() {
const { note, notePath, noteContext, viewScope, hoistedNoteId } = useActiveNoteContext();
- const [ attributesShown, setAttributesShown ] = useState(false);
+ const [ activePane, setActivePane ] = useState<"attributes" | "similar-notes" | null>(null);
const context: StatusBarContext | undefined | null = note && noteContext && { note, notePath, noteContext, viewScope, hoistedNoteId };
- const attributesContext: AttributesProps | undefined | null = context && { ...context, attributesShown, setAttributesShown };
+ const attributesContext: AttributesProps | undefined | null = context && {
+ ...context,
+ attributesShown: activePane === "attributes",
+ setAttributesShown: () => setActivePane("attributes")
+ };
+ const noteInfoContext: NoteInfoContext | undefined | null = context && {
+ ...context,
+ similarNotesShown: activePane === "similar-notes",
+ setSimilarNotesShown: () => setActivePane("similar-notes")
+ };
const isHiddenNote = note?.isInHiddenSubtree();
return (
{attributesContext &&
}
+ {noteInfoContext &&
}
- {context && attributesContext && <>
+ {context && attributesContext && noteInfoContext && <>
@@ -60,7 +73,7 @@ export default function StatusBar() {
-
+
}
@@ -81,6 +94,7 @@ function StatusBarDropdown({ children, icon, text, buttonClassName, titleOptions
...titleOptions?.popperConfig,
strategy: "fixed"
},
+ animation: false,
...titleOptions
}}
dropdownOptions={{
@@ -92,7 +106,7 @@ function StatusBarDropdown({ children, icon, text, buttonClassName, titleOptions
}}
text={<>
{icon && (<>
)}
- {text}
+
{text}
}
{...dropdownProps}
>
@@ -105,7 +119,7 @@ interface StatusBarButtonBaseProps {
className?: string;
icon: string;
title: string;
- text?: string | number;
+ text: string | number;
disabled?: boolean;
active?: boolean;
}
@@ -120,6 +134,7 @@ function StatusBarButton({ className, icon, text, title, active, ...restProps }:
placement: "top",
fallbackPlacements: [ "top" ],
popperConfig: { strategy: "fixed" },
+ animation: false,
title
});
@@ -136,7 +151,7 @@ function StatusBarButton({ className, icon, text, title, active, ...restProps }:
}
}}
>
-
{text}
+
{text}
);
}
@@ -194,24 +209,41 @@ export function getLocaleName(locale: Locale | null | undefined) {
}
//#endregion
-//#region Note info
-export function NoteInfoBadge({ note }: { note: FNote | null | undefined }) {
+//#region Note info & Similar
+interface NoteInfoContext extends StatusBarContext {
+ similarNotesShown: boolean;
+ setSimilarNotesShown: (value: boolean) => void;
+}
+
+export function NoteInfoBadge({ note, setSimilarNotesShown }: NoteInfoContext) {
+ const dropdownRef = useRef
(null);
const { metadata, ...sizeProps } = useNoteMetadata(note);
+ const [ originalFileName ] = useNoteLabel(note, "originalFileName");
return (note &&
+ {originalFileName && {note.type} {note.mime && ({note.mime}) }} />
{note.noteId}} />
+
+ {
+ dropdownRef.current?.hide();
+ setSimilarNotesShown(true);
+ }}
+ />
);
}
@@ -224,6 +256,14 @@ function NoteInfoValue({ text, title, value }: { text: string; title?: string, v
);
}
+
+function SimilarNotesPane({ note, similarNotesShown }: NoteInfoContext) {
+ return (similarNotesShown &&
+
+
+ );
+}
//#endregion
//#region Backlinks
@@ -233,7 +273,7 @@ function BacklinksBadge({ note, viewScope }: StatusBarContext) {
@@ -252,7 +292,7 @@ function AttachmentCount({ note }: StatusBarContext) {
= {
grid: "bx bxs-grid",
@@ -30,12 +32,12 @@ export default function CollectionProperties({ note }: { note: FNote }) {
const [ viewType, setViewType ] = useViewType(note);
return (
- <>
+
);
}
@@ -187,9 +189,9 @@ function ComboBoxPropertyView({ note, property }: { note: FNote, property: Combo
{index < property.options.length - 1 && , "className"> {
+ title: string;
+ children: ComponentChildren;
+ initiallyExpanded?: boolean;
+}
+
+export default function Collapsible({ title, children, className, initiallyExpanded }: CollapsibleProps) {
+ const bodyRef = useRef(null);
+ const innerRef = useRef(null);
+ const [ expanded, setExpanded ] = useState(initiallyExpanded);
+ const { height } = useElementSize(innerRef) ?? {};
+ const contentId = useUniqueName();
+
+ return (
+
+
setExpanded(!expanded)}
+ aria-expanded={expanded}
+ aria-controls={contentId}
+ >
+
+
+
+
& Pick) {
+ const inputRef = useRef(null);
+
+ return (
+ <>
+ inputRef.current?.click()}
+ />
+
-
+ data-bs-toggle="dropdown" data-bs-display="static" />
- )
+ );
+}
+
+export function useEditedNotes(note: FNote | null | undefined) {
+ const [ editedNotes, setEditedNotes ] = useState();
+
+ useEffect(() => {
+ if (!note) return;
+ server.get(`edited-notes/${note.getLabelValue("dateNote")}`).then(async editedNotes => {
+ editedNotes = editedNotes.filter((n) => n.noteId !== note.noteId);
+ const noteIds = editedNotes.flatMap((n) => n.noteId);
+ await froca.getNotes(noteIds, true); // preload all at once
+ setEditedNotes(editedNotes);
+ });
+ }, [ note ]);
+
+ return editedNotes;
}
diff --git a/apps/client/src/widgets/ribbon/FilePropertiesTab.tsx b/apps/client/src/widgets/ribbon/FilePropertiesTab.tsx
index 76a197279..d59b1c547 100644
--- a/apps/client/src/widgets/ribbon/FilePropertiesTab.tsx
+++ b/apps/client/src/widgets/ribbon/FilePropertiesTab.tsx
@@ -1,13 +1,13 @@
+import FNote from "../../entities/fnote";
import { t } from "../../services/i18n";
+import { downloadFileNote, openNoteExternally } from "../../services/open";
+import protected_session_holder from "../../services/protected_session_holder";
+import server from "../../services/server";
+import toast from "../../services/toast";
import { formatSize } from "../../services/utils";
+import Button from "../react/Button";
import { FormFileUploadButton } from "../react/FormFileUpload";
import { useNoteBlob, useNoteLabel } from "../react/hooks";
-import Button from "../react/Button";
-import protected_session_holder from "../../services/protected_session_holder";
-import { downloadFileNote, openNoteExternally } from "../../services/open";
-import toast from "../../services/toast";
-import server from "../../services/server";
-import FNote from "../../entities/fnote";
export default function FilePropertiesTab({ note }: { note?: FNote | null }) {
const [ originalFileName ] = useNoteLabel(note, "originalFileName");
@@ -54,19 +54,7 @@ export default function FilePropertiesTab({ note }: { note?: FNote | null }) {
icon="bx bx-folder-open"
text={t("file_properties.upload_new_revision")}
disabled={!canAccessProtectedNote}
- onChange={(fileToUpload) => {
- if (!fileToUpload) {
- return;
- }
-
- server.upload(`notes/${note.noteId}/file`, fileToUpload[0]).then((result) => {
- if (result.uploaded) {
- toast.showMessage(t("file_properties.upload_success"));
- } else {
- toast.showError(t("file_properties.upload_failed"));
- }
- });
- }}
+ onChange={buildUploadNewFileRevisionListener(note)}
/>
@@ -77,3 +65,19 @@ export default function FilePropertiesTab({ note }: { note?: FNote | null }) {