+ {!isFocusMode &&
+ );
+}
+
+function FocusModeBar({ onExit }: { onExit: () => void }) {
+ return (
+
+
+
+ );
+}
+
+function PdfPaneContent() {
+ const { isFocusMode } = useFocusModeContext();
+
+ return (
+
+ {!isFocusMode &&
+
+
+ );
+}
+
+function WideLayout() {
+ const { version } = useVersionContext();
+ const { urlGetters } = useContext(MetadataContext) as IMetadataContext;
+ const { isSplitActive, theme, setTheme } = useSplitScreenContext();
+
+ // Right side: either SplitPaneView or Sidebar
+ const rightContent = isSplitActive ?
+
+
-
-
-
-
- }
- right={
+
+ Sidebar
,
+}));
+
+describe("BottomDrawer", () => {
+ it("renders collapsed by default", () => {
+ render(
+
+
+ );
+}
diff --git a/src/components/CodeSyncProvider/CodeSyncProvider.tsx b/src/components/CodeSyncProvider/CodeSyncProvider.tsx
index 07562512..7dccb816 100644
--- a/src/components/CodeSyncProvider/CodeSyncProvider.tsx
+++ b/src/components/CodeSyncProvider/CodeSyncProvider.tsx
@@ -1,8 +1,10 @@
-import { migrateSelection as migrateSelectionRaw } from "@fluffylabs/links-metadata";
import type { ISelectionParams, ISynctexBlock, ISynctexBlockId, ISynctexData } from "@fluffylabs/links-metadata";
-import { createContext, useCallback, useContext, useEffect, useState } from "react";
+import { migrateSelection as migrateSelectionRaw } from "@fluffylabs/links-metadata";
import type { PropsWithChildren } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { isFeatureEnabled } from "../../devtools";
import { type ILocationContext, LocationContext } from "../LocationProvider/LocationProvider";
+import { debugDrawBlock } from "./debugDrawBlock";
import { useSynctexStore } from "./hooks/useSynctexStore";
import { useTexStore } from "./hooks/useTexStore";
@@ -17,6 +19,7 @@ export interface ICodeSyncContext {
sourceVersion: string,
targetVersion: string,
): Promise
+
+
+
+
+
+ Download
+
+
+ {error &&
+
+
+
+
+
+ );
+}
diff --git a/src/components/DownloadThemedPdf/DownloadThemedPdf.tsx b/src/components/DownloadThemedPdf/DownloadThemedPdf.tsx
deleted file mode 100644
index 100e50de..00000000
--- a/src/components/DownloadThemedPdf/DownloadThemedPdf.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { useContext, useState } from "react";
-import { Tooltip } from "react-tooltip";
-import { type IPdfContext, PdfContext } from "../PdfProvider/PdfProvider";
-
-export function DownloadPdfWithTheme() {
- const { downloadPdfWithTheme } = useContext(PdfContext) as IPdfContext;
- const [isProcessing, setIsProcessing] = useState(false);
-
- const handleDownloadClick = async () => {
- setIsProcessing(true);
- try {
- await downloadPdfWithTheme();
- } finally {
- setIsProcessing(false);
- }
- };
-
- return (
-
+
+
+
+
+ +
+
+
+
+
+
+
+ {themesOrder.map((t) => (
+
+ ))}
+
+ + Re-renders all pages with selected theme. May take a couple of minutes. +
+{error}
} +
-
-
- );
-}
diff --git a/src/components/FocusModeProvider/FocusModeProvider.tsx b/src/components/FocusModeProvider/FocusModeProvider.tsx
new file mode 100644
index 00000000..59f69e5b
--- /dev/null
+++ b/src/components/FocusModeProvider/FocusModeProvider.tsx
@@ -0,0 +1,52 @@
+import { createContext, type ReactNode, useCallback, useContext, useMemo, useState } from "react";
+
+export interface IFocusModeContext {
+ isFocusMode: boolean;
+ toggleFocusMode: () => void;
+}
+
+const FocusModeContext = createContext
+
+
+ );
+};
diff --git a/src/components/Header/components/ConfirmDropdownMenuItem.tsx b/src/components/Header/components/ConfirmDropdownMenuItem.tsx
new file mode 100644
index 00000000..4e35447f
--- /dev/null
+++ b/src/components/Header/components/ConfirmDropdownMenuItem.tsx
@@ -0,0 +1,71 @@
+import { DropdownMenuItem } from "@fluffylabs/shared-ui";
+import { type ComponentProps, type PropsWithChildren, useEffect, useState } from "react";
+
+type Props = ComponentProps
+ {isCustomMediumOrWider &&
+ {isLargeOrWider &&
- {treeRoots.map((label) => (
-
+ const selectLabel = useCallback(
+ (label: ILabelTreeNode) => {
+ onToggleLabel(label);
+ },
+ [onToggleLabel],
);
-}
-function LabelsFilterNode({ label, onToggleLabel }: LabelNodeProps) {
- const [isFolded, setFolded] = useState(!label.isActive);
- const toggle = useCallback(() => setFolded((folded) => !folded), []);
+ const childrenStats = useMemo(() => {
+ const allChildren = treeRoots.flatMap((root) => root.children);
+
+ return {
+ active: allChildren.filter((child) => child.isActive).length,
+ total: allChildren.length,
+ };
+ }, [treeRoots]);
return (
- <>
- {label.children.length > 0 ? (
-
- {isFolded ? "▷" : "▽"}
-
- ) : null}
- -
- {label.children.map((label) => (
-
+
+
+
+
+ {treeRoots.length === 0 && No labels }
+ {treeRoots.map((label) => (
+
+ selectLabel(label)}
+ onSelect={(e) => e.preventDefault()}
+ className={twMerge("pl-7")}
+ >
+
+
+ {label.children.map((child) => (
+ selectLabel(child)}
+ onSelect={(e) => e.preventDefault()}
+ className={twMerge("pl-10")}
+ >
+
+
+ ))}
+
))}
-
-
+
+
);
-}
-
-type LabelNodeProps = {
- label: ILabelTreeNode;
- onToggleLabel: LabelsFilterProps["onToggleLabel"];
};
-function LabelNode({ label, onToggleLabel }: LabelNodeProps) {
- const selectLabel = useCallback
+
-
-