Features
-
-
-
-
{EDITOR_MODE_OPTIONS.map((item) => (
+ setAudioRecorderOpen(false)}
+ onSaveSuccess={handleAudioRecordingSuccess}
+ initialMode="meeting"
+ />
+
+ )}
);
}
diff --git a/src/components/MediaAttachmentPicker.jsx b/src/components/MediaAttachmentPicker.jsx
new file mode 100644
index 0000000..0e7040a
--- /dev/null
+++ b/src/components/MediaAttachmentPicker.jsx
@@ -0,0 +1,813 @@
+import { useState, useEffect, useMemo, useRef, forwardRef } from "react";
+import {
+ Upload,
+ Music,
+ Film,
+ FileDigit,
+ MessageSquareText,
+ Image as ImageIcon,
+ FileText,
+ Search,
+ X,
+ LayoutGrid,
+ List,
+ Globe,
+ FolderOpen,
+ UploadCloud,
+ Paperclip,
+ Plus,
+} from "lucide-react";
+import { AppSelect } from "./AppSelect";
+import { listImages, listDocuments, readImage } from "../services/electronService";
+import { insertMediaFromFile } from "../services/imageService";
+import { MEDIA_FILE_INPUT_ACCEPT } from "../utils/mediaTypeUtils";
+import {
+ getAssetMediaType,
+ decodePathForDisplay,
+ createMediaMarkdown,
+ toRelativeDocPath,
+ normalizeImagePathForMarkdown,
+ hasMarkdownExtension,
+} from "../utils/markdownUtils";
+
+function isValidHttpUrl(value) {
+ const trimmed = String(value || "").trim();
+ if (!trimmed) return false;
+ try {
+ const parsed = new URL(trimmed);
+ return parsed.protocol === "http:" || parsed.protocol === "https:";
+ } catch {
+ return false;
+ }
+}
+
+export const MediaAttachmentPicker = forwardRef(function MediaAttachmentPicker(
+ {
+ isOpen,
+ onClose,
+ basePath,
+ availableAssets: propAvailableAssets,
+ assetsLoading: propAssetsLoading,
+ assetsError: propAssetsError,
+ onInsert,
+ onNotify,
+ },
+ ref
+) {
+ const fileInputRef = useRef(null);
+ const searchInputRef = useRef(null);
+ const [activeTab, setActiveTab] = useState("workspace"); // "workspace" | "web" | "upload"
+ const [viewMode, setViewMode] = useState("grid"); // "grid" | "list"
+ const [assetSearch, setAssetSearch] = useState("");
+ const [assetFilter, setAssetFilter] = useState("all");
+ const [linkText, setLinkText] = useState("");
+ const [assetUrl, setAssetUrl] = useState("");
+ const [internalAssets, setInternalAssets] = useState([]);
+ const [internalLoading, setInternalLoading] = useState(false);
+ const [internalError, setInternalError] = useState("");
+ const [uploading, setUploading] = useState(false);
+ const [isDragOver, setIsDragOver] = useState(false);
+ const [selectedIndex, setSelectedIndex] = useState(-1);
+ const [selectedAsset, setSelectedAsset] = useState(null);
+ const [thumbnailMap, setThumbnailMap] = useState({});
+
+ const rawAvailableAssets = propAvailableAssets !== undefined ? propAvailableAssets : internalAssets;
+ const availableAssets = useMemo(() => {
+ return rawAvailableAssets.map((asset) => {
+ const rawNormalized = String(asset.path || asset.filePath || "").replace(/\\/g, "/").trim();
+ const withoutQuery = rawNormalized.split(/[?#]/)[0];
+ const parts = withoutQuery.split("/").filter(Boolean);
+ const rawFileName = parts.length ? parts[parts.length - 1] : rawNormalized;
+ const decodedFileName = decodePathForDisplay(rawFileName) || rawFileName;
+
+ let folderDir = "";
+ if (parts.length > 1) {
+ const dirParts = parts.slice(0, -1).filter((p) => p !== ".");
+ folderDir = dirParts.length ? `${dirParts.join("/")}/` : "";
+ }
+
+ const title = asset.type === "document"
+ ? (asset.title || asset.fileName || decodedFileName || "Untitled note").trim()
+ : (asset.title && asset.title !== rawNormalized && !asset.title.includes("/")
+ ? asset.title
+ : decodedFileName);
+
+ let displayPath = asset.displayPath || folderDir || "";
+ if (displayPath === title || displayPath === decodedFileName) {
+ displayPath = folderDir;
+ }
+
+ return {
+ ...asset,
+ title,
+ displayPath: displayPath.replace(/^\.\//, ""),
+ };
+ });
+ }, [rawAvailableAssets]);
+
+ const assetsLoading = propAssetsLoading !== undefined ? propAssetsLoading : internalLoading;
+ const [localError, setLocalError] = useState("");
+ const assetsError = propAssetsError || internalError || localError;
+
+ useEffect(() => {
+ if (!isOpen) {
+ setAssetSearch("");
+ setLinkText("");
+ setAssetUrl("");
+ setLocalError("");
+ setActiveTab("workspace");
+ setSelectedIndex(-1);
+ setSelectedAsset(null);
+ setThumbnailMap({});
+ return;
+ }
+
+ searchInputRef.current?.focus();
+
+ if (propAvailableAssets !== undefined) return;
+
+ if (!basePath) {
+ setInternalAssets([]);
+ setInternalError("Save or open a note file before linking workspace assets.");
+ return;
+ }
+
+ let isCancelled = false;
+ setInternalLoading(true);
+ setInternalError("");
+
+ Promise.allSettled([
+ listImages(basePath),
+ listDocuments(),
+ ]).then(([imagesResult, docsResult]) => {
+ if (isCancelled) return;
+ const mediaList = imagesResult.status === "fulfilled" && Array.isArray(imagesResult.value)
+ ? imagesResult.value.map((pathValue) => {
+ const rawNormalized = String(pathValue || "").replace(/\\/g, "/").trim();
+ const withoutQuery = rawNormalized.split(/[?#]/)[0];
+ const parts = withoutQuery.split("/").filter(Boolean);
+ const rawFileName = parts.length ? parts[parts.length - 1] : rawNormalized;
+ const decodedTitle = decodePathForDisplay(rawFileName) || rawFileName;
+
+ let folderDir = "";
+ if (parts.length > 1) {
+ const dirParts = parts.slice(0, -1).filter((p) => p !== ".");
+ folderDir = dirParts.length ? `${dirParts.join("/")}/` : "";
+ }
+
+ return {
+ type: "media",
+ path: pathValue,
+ fileName: rawFileName,
+ mediaType: getAssetMediaType(pathValue),
+ title: decodedTitle,
+ displayPath: folderDir,
+ };
+ })
+ : [];
+
+ const currentPathLower = String(basePath || "").trim().toLowerCase();
+ const docsList = docsResult.status === "fulfilled" && Array.isArray(docsResult.value)
+ ? docsResult.value
+ .filter((doc) => String(doc?.filePath || "").trim().toLowerCase() !== currentPathLower)
+ .map((doc) => {
+ const fileNameLower = String(doc.fileName || "").toLowerCase();
+ const titleLower = String(doc.title || "").toLowerCase();
+ const pathLower = String(doc.filePath || "").toLowerCase();
+ const isTranscriptDoc =
+ fileNameLower.includes("transcript") ||
+ titleLower.includes("transcript") ||
+ pathLower.includes("transcript");
+
+ const title = (doc.title || doc.fileName || "Untitled note").trim();
+ let displayPath = doc.displayPath || "";
+ if (!displayPath || displayPath === title || displayPath === doc.fileName) {
+ const normPath = String(doc.filePath || "").replace(/\\/g, "/");
+ const parts = normPath.split("/").filter(Boolean);
+ displayPath = parts.length > 1 ? `${parts.slice(0, -1).join("/")}/` : "";
+ }
+
+ return {
+ type: "document",
+ path: doc.filePath,
+ fileName: doc.fileName,
+ title,
+ displayPath,
+ mediaType: isTranscriptDoc ? "transcript" : "document",
+ };
+ })
+ : [];
+
+ setInternalAssets([...mediaList, ...docsList]);
+ setInternalLoading(false);
+ }).catch((err) => {
+ if (isCancelled) return;
+ setInternalAssets([]);
+ setInternalError(err?.message || "Unable to load workspace assets.");
+ setInternalLoading(false);
+ });
+
+ return () => {
+ isCancelled = true;
+ };
+ }, [isOpen, basePath, propAvailableAssets]);
+
+ // Resolve disk thumbnails for images & videos via IPC
+ useEffect(() => {
+ let isCancelled = false;
+ if (!isOpen || !availableAssets.length) return;
+
+ const visualMedia = availableAssets.filter(
+ (a) => a.type === "media" && (a.mediaType === "image" || a.mediaType === "video")
+ );
+
+ if (!visualMedia.length) return;
+
+ Promise.allSettled(
+ visualMedia.map(async (asset) => {
+ try {
+ if (
+ asset.path.startsWith("http://") ||
+ asset.path.startsWith("https://") ||
+ asset.path.startsWith("data:")
+ ) {
+ return { path: asset.path, src: asset.path };
+ }
+ const src = await readImage(basePath || "", asset.path, { thumbnail: true });
+ return { path: asset.path, src };
+ } catch {
+ return { path: asset.path, src: null };
+ }
+ })
+ ).then((results) => {
+ if (isCancelled) return;
+ const newMap = {};
+ for (const r of results) {
+ if (r.status === "fulfilled" && r.value?.src) {
+ newMap[r.value.path] = r.value.src;
+ }
+ }
+ setThumbnailMap((prev) => ({ ...prev, ...newMap }));
+ });
+
+ return () => {
+ isCancelled = true;
+ };
+ }, [isOpen, availableAssets, basePath]);
+
+ const hasValidAssetUrl = isValidHttpUrl(assetUrl.trim());
+
+ const filteredAssets = useMemo(() => {
+ return availableAssets.filter((asset) => {
+ if (assetFilter !== "all" && assetFilter !== "All Media") {
+ const f = assetFilter.toLowerCase();
+ if (f === "document" || f === "documents" || f === "notes") {
+ if (asset.type !== "document" && asset.mediaType !== "document") return false;
+ } else if (f === "transcript" || f === "transcripts") {
+ const isTranscript =
+ asset.mediaType === "transcript" ||
+ (asset.title && asset.title.toLowerCase().includes("transcript")) ||
+ (asset.fileName && asset.fileName.toLowerCase().includes("transcript")) ||
+ (asset.path && asset.path.toLowerCase().includes("transcript"));
+ if (!isTranscript) return false;
+ } else {
+ const norm = f.replace(/s$/, "");
+ if (asset.mediaType !== norm && asset.mediaType !== f) {
+ return false;
+ }
+ }
+ }
+
+ const search = assetSearch.trim().toLowerCase();
+ if (!search) return true;
+ const label = [asset.title, asset.path, asset.fileName, asset.displayPath]
+ .filter(Boolean)
+ .join(" ")
+ .toLowerCase();
+ return label.includes(search);
+ });
+ }, [availableAssets, assetFilter, assetSearch]);
+
+ // Reset selected asset & index when filter or tab changes
+ useEffect(() => {
+ setSelectedIndex(-1);
+ setSelectedAsset(null);
+ }, [assetFilter, assetSearch, activeTab]);
+
+ const handleProcessFile = async (file) => {
+ if (!file) return;
+
+ setUploading(true);
+ try {
+ const { mediaPath, altText } = await insertMediaFromFile(file);
+ const markdown = createMediaMarkdown(altText, mediaPath);
+ onInsert?.(markdown, altText);
+ onNotify?.("Media uploaded and inserted.", "success");
+ onClose?.();
+ } catch (error) {
+ console.error("Upload failed:", error);
+ setLocalError(error?.message || "Failed to upload file.");
+ onNotify?.(error?.message || "Failed to upload file.", "error");
+ } finally {
+ setUploading(false);
+ }
+ };
+
+ const handleFileInputChange = async (event) => {
+ const file = event.target.files?.[0];
+ await handleProcessFile(file);
+ if (event.target) event.target.value = "";
+ };
+
+ const handleDrop = async (event) => {
+ event.preventDefault();
+ setIsDragOver(false);
+ const file = event.dataTransfer.files?.[0];
+ if (file) {
+ await handleProcessFile(file);
+ }
+ };
+
+ const handleDragOver = (event) => {
+ event.preventDefault();
+ setIsDragOver(true);
+ };
+
+ const handleDragLeave = (event) => {
+ event.preventDefault();
+ setIsDragOver(false);
+ };
+
+ if (!isOpen) return null;
+
+ const handleLinkAssetFromUrl = () => {
+ const rawUrl = assetUrl.trim();
+ if (!isValidHttpUrl(rawUrl)) {
+ setLocalError("Use a valid http/https URL.");
+ return;
+ }
+ const label = linkText.trim() || "Web link";
+ const markdown = `[${label}](${rawUrl})`;
+ onInsert?.(markdown, label);
+ onClose?.();
+ };
+
+ const handleSelectAsset = (asset, idx) => {
+ setSelectedAsset(asset);
+ if (typeof idx === "number") {
+ setSelectedIndex(idx);
+ }
+ };
+
+ const handleInsertAsset = (asset) => {
+ const targetAsset = asset || selectedAsset;
+ if (!targetAsset) return;
+
+ if (targetAsset.type === "document") {
+ const text = linkText.trim() || targetAsset.title || targetAsset.fileName || "Linked note";
+ let relativePath = toRelativeDocPath(basePath, targetAsset.path);
+ if (relativePath && !hasMarkdownExtension(relativePath) && hasMarkdownExtension(targetAsset.fileName)) {
+ relativePath = `${relativePath}.md`;
+ }
+ const normalizedPath = normalizeImagePathForMarkdown(relativePath);
+ if (!normalizedPath || normalizedPath === "./" || normalizedPath === ".") {
+ setLocalError("Choose a different note. Linking current note is not supported.");
+ return;
+ }
+ onInsert?.(`[${text}](${normalizedPath})`, text);
+ onClose?.();
+ return;
+ }
+
+ const label = linkText.trim() || targetAsset.title || targetAsset.fileName || "Media";
+ const markdown = createMediaMarkdown(label, targetAsset.path);
+ onInsert?.(markdown, label);
+ onClose?.();
+ };
+
+ const handleKeyDown = (event) => {
+ if (event.key === "Escape") {
+ onClose?.();
+ return;
+ }
+
+ if (activeTab !== "workspace" || !filteredAssets.length) return;
+
+ if (event.key === "ArrowDown") {
+ event.preventDefault();
+ const next = selectedIndex < 0 ? 0 : (selectedIndex + 1) % filteredAssets.length;
+ setSelectedIndex(next);
+ setSelectedAsset(filteredAssets[next]);
+ } else if (event.key === "ArrowUp") {
+ event.preventDefault();
+ const prev = selectedIndex <= 0 ? filteredAssets.length - 1 : selectedIndex - 1;
+ setSelectedIndex(prev);
+ setSelectedAsset(filteredAssets[prev]);
+ } else if (event.key === "Enter") {
+ const target = selectedAsset || (selectedIndex >= 0 ? filteredAssets[selectedIndex] : null);
+ if (target) {
+ event.preventDefault();
+ handleInsertAsset(target);
+ }
+ }
+ };
+
+ const getMediaIcon = (mediaType, type) => {
+ if (type === "document") return
+
+
+ );
+ }
+
+ if (asset.mediaType === "video") {
+ if (resolvedSrc) {
+ return (
+
+ );
+ }
+ return (
+
+
+ );
+ }
+
+ if (asset.mediaType === "audio") {
+ return (
+
+
+ );
+ }
+
+ if (asset.mediaType === "pdf") {
+ return (
+
+
+
+
+
+ );
+ }
+
+ if (asset.type === "document" || asset.mediaType === "document") {
+ return (
+
+
+ );
+ }
+
+ return (
+
+
+
+
+ {getMediaIcon(asset.mediaType, asset.type)}
+
+ );
+ };
+
+ return (
+
+
+
+ {/* Header */}
+
+ );
+});
+
+export default MediaAttachmentPicker;
diff --git a/src/components/RecordingOverlayApp.jsx b/src/components/RecordingOverlayApp.jsx
index 13d81af..a074ac5 100644
--- a/src/components/RecordingOverlayApp.jsx
+++ b/src/components/RecordingOverlayApp.jsx
@@ -10,6 +10,7 @@ export function RecordingOverlayApp() {
const [paused, setPaused] = useState(false);
const [hasMic, setHasMic] = useState(true);
const [micEnabled, setMicEnabled] = useState(true);
+ const [finishing, setFinishing] = useState(false);
useEffect(() => {
// Listen to state updates pushed from main window
@@ -27,6 +28,15 @@ export function RecordingOverlayApp() {
return () => cleanup();
}, []);
+ // Local ticker fallback to keep elapsed time advancing smoothly
+ useEffect(() => {
+ if (paused || finishing) return;
+ const timer = setInterval(() => {
+ setElapsed((prev) => prev + 1);
+ }, 1000);
+ return () => clearInterval(timer);
+ }, [paused, finishing]);
+
function formatTime(seconds) {
const m = Math.floor(seconds / 60).toString().padStart(2, "0");
const s = (seconds % 60).toString().padStart(2, "0");
@@ -66,27 +76,35 @@ export function RecordingOverlayApp() {
50% { opacity: 0.35; }
}
.overlay-drag-pill {
- -webkit-app-region: drag;
- cursor: grab;
+ -webkit-app-region: no-drag;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
- background: rgba(15, 23, 42, 0.92);
+ background: rgba(15, 23, 42, 0.94);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
- border: 1px solid rgba(255, 255, 255, 0.15);
+ border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
- box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
+ box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
color: #f8fafc;
- font-family: system-ui, -apple-system, sans-serif;
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 13px;
}
- .overlay-drag-pill:active {
+ .overlay-drag-handle {
+ -webkit-app-region: drag;
+ cursor: grab;
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ user-select: none;
+ }
+ .overlay-drag-handle:active {
cursor: grabbing;
}
.overlay-drag-pill button {
- -webkit-app-region: no-drag;
+ -webkit-app-region: no-drag !important;
+ pointer-events: auto !important;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 8px;
@@ -98,43 +116,54 @@ export function RecordingOverlayApp() {
display: flex;
align-items: center;
gap: 5px;
- transition: background 0.15s, border-color 0.15s;
+ transition: background 0.15s, border-color 0.15s, transform 0.1s;
white-space: nowrap;
}
- .overlay-drag-pill button:hover {
- background: rgba(255, 255, 255, 0.18);
- border-color: rgba(255, 255, 255, 0.3);
+ .overlay-drag-pill button * {
+ pointer-events: none !important;
+ }
+ .overlay-drag-pill button:hover:not(:disabled) {
+ background: rgba(255, 255, 255, 0.2);
+ border-color: rgba(255, 255, 255, 0.35);
+ }
+ .overlay-drag-pill button:active:not(:disabled) {
+ transform: scale(0.96);
+ }
+ .overlay-drag-pill button:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ transform: none;
}
.overlay-drag-pill .rec-stop-btn {
background: rgba(239, 68, 68, 0.25);
border-color: rgba(239, 68, 68, 0.5);
color: #fca5a5;
}
- .overlay-drag-pill .rec-stop-btn:hover {
+ .overlay-drag-pill .rec-stop-btn:hover:not(:disabled) {
background: rgba(239, 68, 68, 0.45);
}
`}
+
+
+ {/* 3-Tab Segmented Control */}
+
+
+
+
+
+ Insert Media & Attachments
+
+
+
+
+
+
+ {/* TAB 1: WORKSPACE ASSETS */}
+ {activeTab === "workspace" && (
+ <>
+ {/* Search bar & Type Dropdown */}
+
+ setAssetFilter(e.target.value)}
+ className="media-picker-select"
+ >
+
+
+
+
+
+
+
+
+
+
+ {/* View controls */}
+
+
+
+
+ {filteredAssets.length} item{filteredAssets.length === 1 ? "" : "s"} found
+
+
+ {/* Error / Loading States */}
+ {assetsError &&
+
+
+
+ {assetsError}
} + {assetsLoading ?Loading workspace assets...
: null} + + {/* Assets Grid / List View */} + {!assetsLoading && !filteredAssets.length ? ( +No matching media or notes found.
+ ) : viewMode === "grid" ? ( +
+ {filteredAssets.map((asset, idx) => (
+
+ ))}
+
+ ) : (
+
+ {filteredAssets.map((asset, idx) => (
+
+ ))}
+
+ )}
+
+ )}
+
+ {/* TAB 2: WEB URL */}
+ {activeTab === "web" && (
+
+
+ )}
+
+ {/* TAB 3: UPLOAD & DROPZONE */}
+ {activeTab === "upload" && (
+
+
+ {
+ setAssetUrl(e.target.value);
+ setLocalError("");
+ }}
+ placeholder="https://example.com/media.png"
+ autoFocus
+ />
+
+
+
+ setLinkText(e.target.value)}
+ placeholder="Defaults to URL or item name"
+ />
+
+
+ {assetUrl.trim() && !hasValidAssetUrl ? (
+ Use a valid http/https URL.
+ ) : null} + +
+
+
+
+
+ )}
+
+ {/* Footer / Actions */}
+ {activeTab === "workspace" && (
+ fileInputRef.current?.click()}
+ >
+
+
+
+
+
+ {uploading ? "Uploading file..." : "Drop file here or click to browse"}
+
+
+ Images, Audio, Videos, PDFs, Transcripts, Documents
+
+
+
+
+
+
+
+ )}
+
- {/* Drag handle icon */}
-
diff --git a/src/components/layout/AppSubpageViews.jsx b/src/components/layout/AppSubpageViews.jsx
index ed5bf9b..6aec6c8 100644
--- a/src/components/layout/AppSubpageViews.jsx
+++ b/src/components/layout/AppSubpageViews.jsx
@@ -187,6 +187,7 @@ export function AppSubpageViews({
documents={documents}
workspacePath={notesFolderPath}
onBack={() => setDiagramsMediaOpen(false)}
+ onNotify={notify}
onOpenNote={(filePath, line) => {
setDiagramsMediaOpen(false);
if (handleOpenReferencedDocument) {
diff --git a/src/components/layout/LandingView.jsx b/src/components/layout/LandingView.jsx
index a9e2cc6..c28b2d5 100644
--- a/src/components/layout/LandingView.jsx
+++ b/src/components/layout/LandingView.jsx
@@ -2,6 +2,7 @@ import React from "react";
import { Eye, X } from "lucide-react";
import { DashboardPanels } from "../DashboardPanels";
import { LandingListControls } from "../LandingListControls";
+import LandingQuickCaptureBar from "../LandingQuickCaptureBar";
import { DocumentList } from "../DocumentList";
import { useWorkspaceScopedStorage } from "../../hooks/useWorkspaceScopedStorage";
import { useNoteDragDrop } from "../../utils/noteDragDrop";
@@ -225,6 +226,9 @@ export function LandingView({
)}
+
-
-
- {formatTime(elapsed)}
-
+ {/* Dedicated drag handle (grip + timer) */}
+
+
@@ -142,6 +171,7 @@ export function RecordingOverlayApp() {
{/* Pause / Resume */}
+
+
+ {formatTime(elapsed)}
+
+
-
-
-
-
- Assets Library
-Browse assets in this workspace folder.
-
- Loading media…
}>
-