aiden
/
memos
mirror of https://github.com/usememos/memos
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor(web): improve MemoDetail and sidebar maintainability (#5769)

Browse Source 
Co-authored-by: memoclaw <265580040+memoclaw@users.noreply.github.com>
pull/5771/head
memoclaw 2 months ago committed by GitHub
parent e176b28c80
commit 2aaca27bd5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 197 additions and 443 deletions
Show Stats Download Patch File Download Diff File

3
web/package.json
Unescape Escape View File

@ -51,7 +51,6 @@
"mime": "^4.1.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-force-graph-2d": "^1.29.1",
"react-hot-toast": "^2.6.0",
"react-i18next": "^15.7.4",
"react-leaflet": "^4.2.1",
@ -73,7 +72,6 @@
},
"devDependencies": {
"@biomejs/biome": "^2.4.7",
"baseline-browser-mapping": "^2.10.8",
"@bufbuild/protobuf": "^2.11.0",
"@types/d3": "^7.4.3",
"@types/hast": "^3.0.4",
@ -89,6 +87,7 @@
"@types/unist": "^3.0.3",
"@types/uuid": "^10.0.0",
"@vitejs/plugin-react": "^4.7.0",
"baseline-browser-mapping": "^2.10.8",
"long": "^5.3.2",
"terser": "^5.46.1",
"tw-animate-css": "^1.4.0",

150
web/pnpm-lock.yaml
Unescape Escape View File

@ -122,9 +122,6 @@ importers:
react-dom:
specifier: ^18.3.1
version: 18.3.1(react@18.3.1)
react-force-graph-2d:
specifier: ^1.29.1
version: 1.29.1(react@18.3.1)
react-hot-toast:
specifier: ^2.6.0
version: 2.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@ -1363,9 +1360,6 @@ packages:
peerDependencies:
react: ^18 || ^19
'@tweenjs/tween.js@25.0.0':
resolution: {integrity: sha512-XKLA6syeBUaPzx4j3qwMqzzq+V4uo72BnlbOjmuljLrRqdsd3qnzvZZoxvMHZ23ndsRS4aufU6JOZYpCbU6T1A==}
'@types/babel__core@7.20.5':
resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
@ -1557,10 +1551,6 @@ packages:
'@xobotyi/scrollbar-width@1.9.5':
resolution: {integrity: sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==}
accessor-fn@1.5.3:
resolution: {integrity: sha512-rkAofCwe/FvYFUlMB0v0gWmhqtfAtV1IUkdPbfhTUyYniu5LrC0A0UJkTH0Jv3S8SvwkmfuAlY+mQIJATdocMA==}
engines: {node: '>=12'}
acorn@8.15.0:
resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
engines: {node: '>=0.4.0'}
@ -1582,9 +1572,6 @@ packages:
engines: {node: '>=6.0.0'}
hasBin: true
bezier-js@6.1.4:
resolution: {integrity: sha512-PA0FW9ZpcHbojUCMu28z9Vg/fNkwTj5YhusSAjHHDfHDGLxJ6YUKrAN2vk1fP2MMOxVw4Oko16FMlRGVBGqLKg==}
browserslist@4.28.0:
resolution: {integrity: sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ==}
engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@ -1600,10 +1587,6 @@ packages:
caniuse-lite@1.0.30001757:
resolution: {integrity: sha512-r0nnL/I28Zi/yjk1el6ilj27tKcdjLsNqAOZr0yVjWPrSQyHgKI2INaEWw21bAQSv2LXRt1XuCS/GomNpWOxsQ==}
canvas-color-tracker@1.3.2:
resolution: {integrity: sha512-ryQkDX26yJ3CXzb3hxUVNlg1NKE4REc5crLBq661Nxzr8TNd236SaEf2ffYLXyI5tSABSeguHLqcVq4vf9L3Zg==}
engines: {node: '>=12'}
ccount@2.0.1:
resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
@ -1712,9 +1695,6 @@ packages:
resolution: {integrity: sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==}
engines: {node: '>=12'}
d3-binarytree@1.0.2:
resolution: {integrity: sha512-cElUNH+sHu95L04m92pG73t2MEJXKu+GeKUN1TJkFsu93E5W8E9Sc3kHEGJKgenGvj19m6upSn2EunvMgMD2Yw==}
d3-brush@3.0.0:
resolution: {integrity: sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==}
engines: {node: '>=12'}
@ -1756,10 +1736,6 @@ packages:
resolution: {integrity: sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==}
engines: {node: '>=12'}
d3-force-3d@3.0.6:
resolution: {integrity: sha512-4tsKHUPLOVkyfEffZo1v6sFHvGFwAIIjt/W8IThbp08DYAsXZck+2pSHEG5W1+gQgEvFLdZkYvmJAbRM2EzMnA==}
engines: {node: '>=12'}
d3-force@3.0.0:
resolution: {integrity: sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==}
engines: {node: '>=12'}
@ -1780,9 +1756,6 @@ packages:
resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
engines: {node: '>=12'}
d3-octree@1.1.0:
resolution: {integrity: sha512-F8gPlqpP+HwRPMO/8uOu5wjH110+6q4cgJvgJT6vlpy3BEaDIKlTZrgHKZSp/i1InRpVfh4puY/kvL6MxK930A==}
d3-path@1.0.9:
resolution: {integrity: sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==}
@ -1952,14 +1925,6 @@ packages:
find-root@1.1.0:
resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
float-tooltip@1.7.5:
resolution: {integrity: sha512-/kXzuDnnBqyyWyhDMH7+PfP8J/oXiAavGzcRxASOMRHFuReDtofizLLJsf7nnDLAfEaMW4pVWaXrAjtnglpEkg==}
engines: {node: '>=12'}
force-graph@1.51.0:
resolution: {integrity: sha512-aTnihCmiMA0ItLJLCbrQYS9mzriopW24goFPgUnKAAmAlPogTSmFWqoBPMXzIfPb7bs04Hur5zEI4WYgLW3Sig==}
engines: {node: '>=12'}
fsevents@2.3.3:
resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@ -2073,10 +2038,6 @@ packages:
resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
engines: {node: '>=6'}
index-array-by@1.4.2:
resolution: {integrity: sha512-SP23P27OUKzXWEC/TOyWlwLviofQkCSCKONnc62eItjp69yCZZPqDQtr3Pw5gJDnPeUMqExmKydNZaJO0FU9pw==}
engines: {node: '>=12'}
inline-style-parser@0.2.7:
resolution: {integrity: sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==}
@ -2113,10 +2074,6 @@ packages:
resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
engines: {node: '>=12'}
jerrypick@1.1.2:
resolution: {integrity: sha512-YKnxXEekXKzhpf7CLYA0A+oDP8V0OhICNCr5lv96FvSsDEmrb0GKM776JgQvHTMjr7DTTPEVv/1Ciaw0uEWzBA==}
engines: {node: '>=12'}
jiti@2.6.1:
resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
hasBin: true
@ -2140,10 +2097,6 @@ packages:
engines: {node: '>=6'}
hasBin: true
kapsule@1.16.3:
resolution: {integrity: sha512-4+5mNNf4vZDSwPhKprKwz3330iisPrb08JyMgbsdFrimBCKNHecua/WBwvVg3n7vwx0C1ARjfhwIpbrbd9n5wg==}
engines: {node: '>=12'}
katex@0.16.38:
resolution: {integrity: sha512-cjHooZUmIAUmDsHBN+1n8LaZdpmbj03LtYeYPyuYB7OuloiaeaV6N4LcfjcnHVzGWjVQmKrxxTrpDcmSzEZQwQ==}
hasBin: true
@ -2454,10 +2407,6 @@ packages:
node-releases@2.0.27:
resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
object-assign@4.1.1:
resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
engines: {node: '>=0.10.0'}
package-manager-detector@1.5.0:
resolution: {integrity: sha512-uBj69dVlYe/+wxj8JOpr97XfsxH/eumMt6HqjNTmJDf/6NO9s+0uxeOneIz3AsPt2m6y9PqzDzd3ATcU17MNfw==}
@ -2511,12 +2460,6 @@ packages:
resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
engines: {node: ^10 || ^12 || >=14}
preact@10.27.2:
resolution: {integrity: sha512-5SYSgFKSyhCbk6SrXyMpqjb5+MQBgfvEKE/OC+PujcY34sOpqtr+0AZQtPYx5IA6VxynQ7rUPCtKzyovpj9Bpg==}
prop-types@15.8.1:
resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
property-information@6.5.0:
resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==}
@ -2531,12 +2474,6 @@ packages:
peerDependencies:
react: ^18.3.1
react-force-graph-2d@1.29.1:
resolution: {integrity: sha512-1Rl/1Z3xy2iTHKj6a0jRXGyiI86xUti81K+jBQZ+Oe46csaMikp47L5AjrzA9hY9fNGD63X8ffrqnvaORukCuQ==}
engines: {node: '>=12'}
peerDependencies:
react: '*'
react-hot-toast@2.6.0:
resolution: {integrity: sha512-bH+2EBMZ4sdyou/DPrfgIouFpcRLCJ+HoCA32UoAYHn6T3Ur5yfcDCeSr5mwldl6pFOsiocmrXMuoCJ1vV8bWg==}
engines: {node: '>=10'}
@ -2563,12 +2500,6 @@ packages:
react-is@16.13.1:
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
react-kapsule@2.5.7:
resolution: {integrity: sha512-kifAF4ZPD77qZKc4CKLmozq6GY1sBzPEJTIJb0wWFK6HsePJatK3jXplZn2eeAt3x67CDozgi7/rO8fNQ/AL7A==}
engines: {node: '>=12'}
peerDependencies:
react: '>=16.13.1'
react-leaflet-cluster@2.1.0:
resolution: {integrity: sha512-16X7XQpRThQFC4PH4OpXHimGg19ouWmjxjtpxOeBKpvERSvIRqTx7fvhTwkEPNMFTQ8zTfddz6fRTUmUEQul7g==}
peerDependencies:
@ -2809,9 +2740,6 @@ packages:
resolution: {integrity: sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==}
engines: {node: '>=10'}
tinycolor2@1.6.0:
resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
tinyexec@1.0.2:
resolution: {integrity: sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==}
engines: {node: '>=18'}
@ -3997,8 +3925,6 @@ snapshots:
'@tanstack/query-core': 5.90.20
react: 18.3.1
'@tweenjs/tween.js@25.0.0': {}
'@types/babel__core@7.20.5':
dependencies:
'@babel/parser': 7.28.5
@ -4224,8 +4150,6 @@ snapshots:
'@xobotyi/scrollbar-width@1.9.5': {}
accessor-fn@1.5.3: {}
acorn@8.15.0: {}
aria-hidden@1.2.6:
@ -4242,8 +4166,6 @@ snapshots:
baseline-browser-mapping@2.10.8: {}
bezier-js@6.1.4: {}
browserslist@4.28.0:
dependencies:
baseline-browser-mapping: 2.10.8
@ -4258,10 +4180,6 @@ snapshots:
caniuse-lite@1.0.30001757: {}
canvas-color-tracker@1.3.2:
dependencies:
tinycolor2: 1.6.0
ccount@2.0.1: {}
character-entities-html4@2.1.0: {}
@ -4363,8 +4281,6 @@ snapshots:
d3-axis@3.0.0: {}
d3-binarytree@1.0.2: {}
d3-brush@3.0.0:
dependencies:
d3-dispatch: 3.0.1
@ -4406,14 +4322,6 @@ snapshots:
dependencies:
d3-dsv: 3.0.1
d3-force-3d@3.0.6:
dependencies:
d3-binarytree: 1.0.2
d3-dispatch: 3.0.1
d3-octree: 1.1.0
d3-quadtree: 3.0.1
d3-timer: 3.0.1
d3-force@3.0.0:
dependencies:
d3-dispatch: 3.0.1
@ -4432,8 +4340,6 @@ snapshots:
dependencies:
d3-color: 3.1.0
d3-octree@1.1.0: {}
d3-path@1.0.9: {}
d3-path@3.1.0: {}
@ -4635,30 +4541,6 @@ snapshots:
find-root@1.1.0: {}
float-tooltip@1.7.5:
dependencies:
d3-selection: 3.0.0
kapsule: 1.16.3
preact: 10.27.2
force-graph@1.51.0:
dependencies:
'@tweenjs/tween.js': 25.0.0
accessor-fn: 1.5.3
bezier-js: 6.1.4
canvas-color-tracker: 1.3.2
d3-array: 3.2.4
d3-drag: 3.0.0
d3-force-3d: 3.0.6
d3-scale: 4.0.2
d3-scale-chromatic: 3.1.0
d3-selection: 3.0.0
d3-zoom: 3.0.0
float-tooltip: 1.7.5
index-array-by: 1.4.2
kapsule: 1.16.3
lodash-es: 4.17.23
fsevents@2.3.3:
optional: true
@ -4827,8 +4709,6 @@ snapshots:
parent-module: 1.0.1
resolve-from: 4.0.0
index-array-by@1.4.2: {}
inline-style-parser@0.2.7: {}
inline-style-prefixer@7.0.1:
@ -4858,8 +4738,6 @@ snapshots:
is-plain-obj@4.1.0: {}
jerrypick@1.1.2: {}
jiti@2.6.1: {}
js-cookie@2.2.1: {}
@ -4872,10 +4750,6 @@ snapshots:
json5@2.2.3: {}
kapsule@1.16.3:
dependencies:
lodash-es: 4.17.23
katex@0.16.38:
dependencies:
commander: 8.3.0
@ -5412,8 +5286,6 @@ snapshots:
node-releases@2.0.27: {}
object-assign@4.1.1: {}
package-manager-detector@1.5.0: {}
parent-module@1.0.1:
@ -5478,14 +5350,6 @@ snapshots:
picocolors: 1.1.1
source-map-js: 1.2.1
preact@10.27.2: {}
prop-types@15.8.1:
dependencies:
loose-envify: 1.4.0
object-assign: 4.1.1
react-is: 16.13.1
property-information@6.5.0: {}
property-information@7.1.0: {}
@ -5498,13 +5362,6 @@ snapshots:
react: 18.3.1
scheduler: 0.23.2
react-force-graph-2d@1.29.1(react@18.3.1):
dependencies:
force-graph: 1.51.0
prop-types: 15.8.1
react: 18.3.1
react-kapsule: 2.5.7(react@18.3.1)
react-hot-toast@2.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
csstype: 3.2.3
@ -5524,11 +5381,6 @@ snapshots:
react-is@16.13.1: {}
react-kapsule@2.5.7(react@18.3.1):
dependencies:
jerrypick: 1.1.2
react: 18.3.1
react-leaflet-cluster@2.1.0(leaflet@1.9.4)(react-dom@18.3.1(react@18.3.1))(react-leaflet@4.2.1(leaflet@1.9.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1):
dependencies:
leaflet: 1.9.4
@ -5838,8 +5690,6 @@ snapshots:
throttle-debounce@3.0.1: {}
tinycolor2@1.6.0: {}
tinyexec@1.0.2: {}
tinyglobby@0.2.15:

79
web/src/components/MemoCommentSection.tsx
Unescape Escape View File

@ -0,0 +1,79 @@
import { MessageCircleIcon } from "lucide-react";
import { useState } from "react";
import MemoEditor from "@/components/MemoEditor";
import MemoView from "@/components/MemoView";
import { Button } from "@/components/ui/button";
import { extractMemoIdFromName } from "@/helpers/resource-names";
import useCurrentUser from "@/hooks/useCurrentUser";
import type { Memo } from "@/types/proto/api/v1/memo_service_pb";
import { useTranslate } from "@/utils/i18n";
interface Props {
memo: Memo;
comments: Memo[];
parentPage?: string;
}
const MemoCommentSection = ({ memo, comments, parentPage }: Props) => {
const t = useTranslate();
const currentUser = useCurrentUser();
const [showEditor, setShowEditor] = useState(false);
const showCreateButton = currentUser && !showEditor;
const handleCommentCreated = async (_memoCommentName: string) => {
setShowEditor(false);
};
return (
<div className="pt-8 pb-16 w-full">
<h2 id="comments" className="sr-only">
{t("memo.comment.self")}
</h2>
<div className="relative mx-auto grow w-full min-h-full flex flex-col justify-start items-start gap-y-1">
{comments.length === 0 ? (
showCreateButton && (
<div className="w-full flex flex-row justify-center items-center py-6">
<Button variant="ghost" onClick={() => setShowEditor(true)}>
<span className="text-muted-foreground">{t("memo.comment.write-a-comment")}</span>
<MessageCircleIcon className="ml-2 w-5 h-auto text-muted-foreground" />
</Button>
</div>
)
) : (
<div className="w-full flex flex-row justify-between items-center h-8 pl-3 mb-2">
<div className="flex flex-row justify-start items-center">
<MessageCircleIcon className="w-5 h-auto text-muted-foreground mr-1" />
<span className="text-muted-foreground text-sm">{t("memo.comment.self")}</span>
<span className="text-muted-foreground text-sm ml-1">({comments.length})</span>
</div>
{showCreateButton && (
<Button variant="ghost" className="text-muted-foreground" onClick={() => setShowEditor(true)}>
{t("memo.comment.write-a-comment")}
</Button>
)}
</div>
)}
{showEditor && (
<div className="w-full mb-2">
<MemoEditor
cacheKey={`${memo.name}-${memo.updateTime}-comment`}
placeholder={t("editor.add-your-comment-here")}
parentMemoName={memo.name}
autoFocus
onConfirm={handleCommentCreated}
onCancel={() => setShowEditor(false)}
/>
</div>
)}
{comments.map((comment) => (
<div className="w-full" key={`${comment.name}-${comment.displayTime}`} id={extractMemoIdFromName(comment.name)}>
<MemoView memo={comment} parentPage={parentPage} showCreator compact />
</div>
))}
</div>
</div>
);
};
export default MemoCommentSection;

124
web/src/components/MemoDetailSidebar/MemoDetailSidebar.tsx
Unescape Escape View File

@ -1,116 +1,104 @@
import { create } from "@bufbuild/protobuf";
import { timestampDate } from "@bufbuild/protobuf/wkt";
import { isEqual } from "lodash-es";
import { CheckCircleIcon, Code2Icon, HashIcon, LinkIcon, Share2Icon } from "lucide-react";
import { useState } from "react";
import MemoSharePanel from "@/components/MemoSharePanel";
import { CheckCircleIcon, Code2Icon, HashIcon, LinkIcon, type LucideIcon, Share2Icon } from "lucide-react";
import { useMemo, useState } from "react";
import { Button } from "@/components/ui/button";
import useCurrentUser from "@/hooks/useCurrentUser";
import { cn } from "@/lib/utils";
import { Memo, Memo_PropertySchema, MemoRelation_Type } from "@/types/proto/api/v1/memo_service_pb";
import { useTranslate } from "@/utils/i18n";
import { Memo, Memo_PropertySchema } from "@/types/proto/api/v1/memo_service_pb";
import { type Translations, useTranslate } from "@/utils/i18n";
import { isSuperUser } from "@/utils/user";
import MemoRelationForceGraph from "../MemoRelationForceGraph";
import MemoSharePanel from "./MemoSharePanel";
interface Props {
memo: Memo;
className?: string;
parentPage?: string;
}
const SectionLabel = ({ children }: { children: React.ReactNode }) => (
<p className="text-xs font-medium text-muted-foreground/50 uppercase tracking-wider">{children}</p>
interface PropertyBadge {
icon: LucideIcon;
labelKey: Translations;
}
const SidebarSection = ({ label, count, children }: { label: string; count?: number; children: React.ReactNode }) => (
<div className="w-full space-y-2">
<div className="flex items-center gap-1.5">
<p className="text-xs font-medium text-muted-foreground/50 uppercase tracking-wider">{label}</p>
{count != null && <span className="text-xs text-muted-foreground/30">({count})</span>}
</div>
{children}
</div>
);
const MemoDetailSidebar = ({ memo, className, parentPage }: Props) => {
const PROPERTY_BADGE_CLASSES =
"inline-flex items-center gap-1.5 px-2 py-1 rounded-md border border-border/60 bg-muted/60 text-xs text-muted-foreground";
const TAG_BADGE_CLASSES =
"inline-flex items-center gap-1 px-1 rounded-md border border-border/60 bg-muted/60 text-sm text-muted-foreground hover:bg-muted hover:text-foreground/80 transition-colors cursor-pointer";
const MemoDetailSidebar = ({ memo, className }: Props) => {
const t = useTranslate();
const currentUser = useCurrentUser();
const [sharePanelOpen, setSharePanelOpen] = useState(false);
const property = create(Memo_PropertySchema, memo.property || {});
const hasSpecialProperty = property.hasLink || property.hasTaskList || property.hasCode;
const hasReferenceRelations = memo.relations.some((r) => r.type === MemoRelation_Type.REFERENCE);
const canManageShares = !memo.parent && (memo.creator === currentUser?.name || isSuperUser(currentUser));
const hasUpdated = !isEqual(memo.createTime, memo.updateTime);
const propertyBadges = useMemo(() => {
const badges: PropertyBadge[] = [];
if (property.hasLink) badges.push({ icon: LinkIcon, labelKey: "memo.links" });
if (property.hasTaskList) badges.push({ icon: CheckCircleIcon, labelKey: "memo.to-do" });
if (property.hasCode) badges.push({ icon: Code2Icon, labelKey: "memo.code" });
return badges;
}, [property.hasLink, property.hasTaskList, property.hasCode]);
return (
<aside className={cn("relative w-full h-auto max-h-screen overflow-auto flex flex-col gap-5", className)}>
{canManageShares && (
<div className="w-full space-y-2">
<SectionLabel>{t("memo.share.section-label")}</SectionLabel>
<SidebarSection label={t("memo.share.section-label")}>
<Button variant="outline" className="w-full justify-start gap-2" onClick={() => setSharePanelOpen(true)}>
<Share2Icon className="w-4 h-4" />
{t("memo.share.open-panel")}
</Button>
</div>
</SidebarSection>
)}
{hasReferenceRelations && (
<div className="w-full space-y-2">
<div className="flex items-center gap-1.5">
<SectionLabel>{t("common.relations")}</SectionLabel>
<span className="text-xs text-muted-foreground/30">(Beta)</span>
</div>
<div className="relative w-full h-36 border border-border rounded-lg bg-muted overflow-hidden">
<MemoRelationForceGraph className="w-full h-full" memo={memo} parentPage={parentPage} />
</div>
<SidebarSection label={t("common.created-at")}>
<div className="flex flex-col gap-1">
<p className="text-sm text-foreground/70">{memo.createTime ? timestampDate(memo.createTime).toLocaleString() : "—"}</p>
{hasUpdated && (
<p className="text-xs text-muted-foreground">
{t("common.last-updated-at")}: {memo.updateTime ? timestampDate(memo.updateTime).toLocaleString() : "—"}
</p>
)}
</div>
)}
<div className="w-full space-y-1">
<SectionLabel>{t("common.created-at")}</SectionLabel>
<p className="text-sm text-foreground/70">{memo.createTime ? timestampDate(memo.createTime).toLocaleString() : "—"}</p>
</div>
</SidebarSection>
{!isEqual(memo.createTime, memo.updateTime) && (
<div className="w-full space-y-1">
<SectionLabel>{t("common.last-updated-at")}</SectionLabel>
<p className="text-sm text-foreground/70">{memo.updateTime ? timestampDate(memo.updateTime).toLocaleString() : "—"}</p>
</div>
)}
{hasSpecialProperty && (
<div className="w-full space-y-2">
<SectionLabel>{t("common.properties")}</SectionLabel>
{propertyBadges.length > 0 && (
<SidebarSection label={t("common.properties")}>
<div className="flex flex-wrap gap-1.5">
{property.hasLink && (
<span className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md border border-border/60 bg-muted/60 text-xs text-muted-foreground">
<LinkIcon className="w-3.5 h-3.5" />
{t("memo.links")}
</span>
)}
{property.hasTaskList && (
<span className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md border border-border/60 bg-muted/60 text-xs text-muted-foreground">
<CheckCircleIcon className="w-3.5 h-3.5" />
{t("memo.to-do")}
</span>
)}
{property.hasCode && (
<span className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md border border-border/60 bg-muted/60 text-xs text-muted-foreground">
<Code2Icon className="w-3.5 h-3.5" />
{t("memo.code")}
{propertyBadges.map(({ icon: Icon, labelKey }) => (
<span key={labelKey} className={PROPERTY_BADGE_CLASSES}>
<Icon className="w-3.5 h-3.5" />
{t(labelKey)}
</span>
)}
))}
</div>
</div>
</SidebarSection>
)}
{memo.tags.length > 0 && (
<div className="w-full space-y-2">
<div className="flex items-center gap-1.5">
<SectionLabel>{t("common.tags")}</SectionLabel>
<span className="text-xs text-muted-foreground/30">({memo.tags.length})</span>
</div>
<SidebarSection label={t("common.tags")} count={memo.tags.length}>
<div className="flex flex-wrap gap-1.5">
{memo.tags.map((tag) => (
<span
key={tag}
className="inline-flex items-center gap-1 px-1 rounded-md border border-border/60 bg-muted/60 text-sm text-muted-foreground hover:bg-muted hover:text-foreground/80 transition-colors cursor-pointer"
>
<span key={tag} className={TAG_BADGE_CLASSES}>
<HashIcon className="w-3 h-3 opacity-50" />
{tag}
</span>
))}
</div>
</div>
</SidebarSection>
)}
{sharePanelOpen && <MemoSharePanel memoName={memo.name} open={sharePanelOpen} onClose={() => setSharePanelOpen(false)} />}

5
web/src/components/MemoDetailSidebar/MemoDetailSidebarDrawer.tsx
Unescape Escape View File

@ -8,10 +8,9 @@ import MemoDetailSidebar from "./MemoDetailSidebar";
interface Props {
memo: Memo;
parentPage?: string;
}
const MemoDetailSidebarDrawer = ({ memo, parentPage }: Props) => {
const MemoDetailSidebarDrawer = ({ memo }: Props) => {
const location = useLocation();
const [open, setOpen] = useState(false);
@ -27,7 +26,7 @@ const MemoDetailSidebarDrawer = ({ memo, parentPage }: Props) => {
</Button>
</SheetTrigger>
<SheetContent side="right" className="w-full sm:w-80 px-4 bg-background">
<MemoDetailSidebar className="py-4" memo={memo} parentPage={parentPage} />
<MemoDetailSidebar className="py-4" memo={memo} />
</SheetContent>
</Sheet>
);

0
web/src/components/MemoSharePanel.tsx → web/src/components/MemoDetailSidebar/MemoSharePanel.tsx
Unescape Escape View File

62
web/src/components/MemoRelationForceGraph/MemoRelationForceGraph.tsx
Unescape Escape View File

@ -1,62 +0,0 @@
import { useEffect, useRef, useState } from "react";
import ForceGraph2D, { ForceGraphMethods, LinkObject, NodeObject } from "react-force-graph-2d";
import { extractMemoIdFromName } from "@/helpers/resource-names";
import useNavigateTo from "@/hooks/useNavigateTo";
import { cn } from "@/lib/utils";
import { Memo, MemoRelation_Type } from "@/types/proto/api/v1/memo_service_pb";
import { LinkType, NodeType } from "./types";
import { convertMemoRelationsToGraphData } from "./utils";
interface Props {
memo: Memo;
className?: string;
parentPage?: string;
}
const MAIN_NODE_COLOR = "#14b8a6";
const DEFAULT_NODE_COLOR = "#a1a1aa";
const MemoRelationForceGraph = ({ className, memo, parentPage }: Props) => {
const navigateTo = useNavigateTo();
const [mode] = useState<"light">("light");
const containerRef = useRef<HTMLDivElement>(null);
const graphRef = useRef<ForceGraphMethods<NodeObject<NodeType>, LinkObject<NodeType, LinkType>> | undefined>(undefined);
const [graphSize, setGraphSize] = useState({ width: 0, height: 0 });
useEffect(() => {
if (!containerRef.current) return;
setGraphSize(containerRef.current.getBoundingClientRect());
}, []);
const onNodeClick = (node: NodeObject<NodeType>) => {
if (node.memo.name === memo.name) return;
navigateTo(`/${memo.name}`, {
state: {
from: parentPage,
},
});
};
return (
<div ref={containerRef} className={cn("opacity-80", className)}>
<ForceGraph2D
ref={graphRef}
width={graphSize.width}
height={graphSize.height}
enableZoomInteraction
cooldownTicks={0}
nodeColor={(node) => (node.id === memo.name ? MAIN_NODE_COLOR : DEFAULT_NODE_COLOR)}
nodeRelSize={3}
nodeLabel={(node) => extractMemoIdFromName(node.memo.name).slice(0, 6).toLowerCase()}
linkColor={() => (mode === "light" ? "#e4e4e7" : "#3f3f46")}
graphData={convertMemoRelationsToGraphData(memo.relations.filter((r) => r.type === MemoRelation_Type.REFERENCE))}
onNodeClick={onNodeClick}
linkDirectionalArrowLength={3}
linkDirectionalArrowRelPos={1}
linkCurvature={0.25}
/>
</div>
);
};
export default MemoRelationForceGraph;

5
web/src/components/MemoRelationForceGraph/index.ts
Unescape Escape View File

@ -1,5 +0,0 @@
import MemoRelationForceGraph from "./MemoRelationForceGraph";
export * from "./utils";
export default MemoRelationForceGraph;

10
web/src/components/MemoRelationForceGraph/types.ts
Unescape Escape View File

@ -1,10 +0,0 @@
import { MemoRelation_Memo } from "@/types/proto/api/v1/memo_service_pb";
export interface NodeType {
memo: MemoRelation_Memo;
}
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
export interface LinkType {
// ...add more additional properties relevant to the link here.
}

36
web/src/components/MemoRelationForceGraph/utils.ts
Unescape Escape View File

@ -1,36 +0,0 @@
import { GraphData, LinkObject, NodeObject } from "react-force-graph-2d";
import { MemoRelation, MemoRelation_Memo } from "@/types/proto/api/v1/memo_service_pb";
import { LinkType, NodeType } from "./types";
export const convertMemoRelationsToGraphData = (memoRelations: MemoRelation[]): GraphData<NodeType, LinkType> => {
const nodesMap = new Map<string, NodeObject<NodeType>>();
const links: LinkObject<NodeType, LinkType>[] = [];
// Iterate through memoRelations to populate nodes and links.
memoRelations.forEach((relation) => {
const memo = relation.memo as MemoRelation_Memo;
const relatedMemo = relation.relatedMemo as MemoRelation_Memo;
// Add memo node if not already present.
if (!nodesMap.has(memo.name)) {
nodesMap.set(memo.name, { id: memo.name, memo });
}
// Add related_memo node if not already present.
if (!nodesMap.has(relatedMemo.name)) {
nodesMap.set(relatedMemo.name, { id: relatedMemo.name, memo: relatedMemo });
}
// Create link between memo and relatedMemo.
links.push({
source: memo.name,
target: relatedMemo.name,
type: relation.type, // Include the type of relation as a property of the link.
});
});
return {
nodes: Array.from(nodesMap.values()),
links,
};
};

44
web/src/hooks/useMemoDetailError.ts
Unescape Escape View File

@ -0,0 +1,44 @@
import { Code, ConnectError } from "@connectrpc/connect";
import { useEffect } from "react";
import { toast } from "react-hot-toast";
import useNavigateTo from "@/hooks/useNavigateTo";
import { AUTH_REASON_PROTECTED_MEMO, redirectOnAuthFailure } from "@/utils/auth-redirect";
interface UseMemoDetailErrorOptions {
error: Error | null;
pathname: string;
search: string;
hash: string;
}
const useMemoDetailError = ({ error, pathname, search, hash }: UseMemoDetailErrorOptions) => {
const navigateTo = useNavigateTo();
useEffect(() => {
if (!error) {
return;
}
if (error instanceof ConnectError) {
if (error.code === Code.Unauthenticated) {
redirectOnAuthFailure(true, {
redirect: `${pathname}${search}${hash}`,
reason: AUTH_REASON_PROTECTED_MEMO,
});
return;
}
if (error.code === Code.PermissionDenied || error.code === Code.NotFound) {
navigateTo("/404", { replace: true });
return;
}
toast.error(error.message);
return;
}
toast.error(error.message);
}, [error, hash, pathname, search, navigateTo]);
};
export default useMemoDetailError;

122
web/src/pages/MemoDetail.tsx
Unescape Escape View File

@ -1,70 +1,36 @@
import { Code, ConnectError } from "@connectrpc/connect";
import { ArrowUpLeftFromCircleIcon, MessageCircleIcon } from "lucide-react";
import { useEffect, useState } from "react";
import { toast } from "react-hot-toast";
import { ArrowUpLeftFromCircleIcon } from "lucide-react";
import { useEffect } from "react";
import { Link, useLocation, useParams } from "react-router-dom";
import MemoCommentSection from "@/components/MemoCommentSection";
import { MemoDetailSidebar, MemoDetailSidebarDrawer } from "@/components/MemoDetailSidebar";
import MemoEditor from "@/components/MemoEditor";
import MemoView from "@/components/MemoView";
import MobileHeader from "@/components/MobileHeader";
import { Button } from "@/components/ui/button";
import { extractMemoIdFromName, memoNamePrefix } from "@/helpers/resource-names";
import useCurrentUser from "@/hooks/useCurrentUser";
import { memoNamePrefix } from "@/helpers/resource-names";
import useMediaQuery from "@/hooks/useMediaQuery";
import useMemoDetailError from "@/hooks/useMemoDetailError";
import { useMemo, useMemoComments } from "@/hooks/useMemoQueries";
import useNavigateTo from "@/hooks/useNavigateTo";
import { cn } from "@/lib/utils";
import { AUTH_REASON_PROTECTED_MEMO, redirectOnAuthFailure } from "@/utils/auth-redirect";
import { useTranslate } from "@/utils/i18n";
const MemoDetail = () => {
const t = useTranslate();
const md = useMediaQuery("md");
const params = useParams();
const navigateTo = useNavigateTo();
const location = useLocation();
const { state: locationState, hash } = location;
const currentUser = useCurrentUser();
const uid = params.uid;
const memoName = `${memoNamePrefix}${uid}`;
const [showCommentEditor, setShowCommentEditor] = useState(false);
const memoName = `${memoNamePrefix}${params.uid}`;
// Fetch main memo with React Query
const { data: memo, error, isLoading } = useMemo(memoName, { enabled: !!memoName });
// Handle errors
useEffect(() => {
if (!error) {
return;
}
if (error instanceof ConnectError) {
if (error.code === Code.Unauthenticated) {
redirectOnAuthFailure(true, {
redirect: `${location.pathname}${location.search}${location.hash}`,
reason: AUTH_REASON_PROTECTED_MEMO,
});
return;
}
if (error.code === Code.PermissionDenied || error.code === Code.NotFound) {
navigateTo("/404", { replace: true });
return;
}
toast.error(error.message);
return;
}
toast.error((error as Error).message);
}, [error, location.hash, location.pathname, location.search, navigateTo]);
useMemoDetailError({
error: error as Error | null,
pathname: location.pathname,
search: location.search,
hash: location.hash,
});
// Fetch parent memo if exists
const { data: parentMemo } = useMemo(memo?.parent || "", {
enabled: !!memo?.parent,
});
// Fetch all comments for this memo in a single query
const { data: commentsResponse } = useMemoComments(memoName, {
enabled: !!memo,
});
@ -76,26 +42,15 @@ const MemoDetail = () => {
el?.scrollIntoView({ behavior: "smooth", block: "center" });
}, [hash, comments]);
const showCreateCommentButton = currentUser && !showCommentEditor;
if (isLoading || !memo) {
return null;
}
const handleShowCommentEditor = () => {
setShowCommentEditor(true);
};
const handleCommentCreated = async (_memoCommentName: string) => {
// React Query will auto-refetch due to invalidation in the mutation
setShowCommentEditor(false);
};
return (
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
{!md && (
<MobileHeader>
<MemoDetailSidebarDrawer memo={memo} parentPage={locationState?.from} />
<MemoDetailSidebarDrawer memo={memo} />
</MobileHeader>
)}
<div className={cn("w-full flex flex-row justify-start items-start px-4 sm:px-6 gap-4")}>
@ -115,7 +70,6 @@ const MemoDetail = () => {
)}
<MemoView
key={`${memo.name}-${memo.displayTime}`}
className="shadow hover:shadow-md transition-all"
memo={memo}
compact={false}
parentPage={locationState?.from}
@ -123,57 +77,11 @@ const MemoDetail = () => {
showVisibility
showPinned
/>
<div className="pt-8 pb-16 w-full">
<h2 id="comments" className="sr-only">
{t("memo.comment.self")}
</h2>
<div className="relative mx-auto grow w-full min-h-full flex flex-col justify-start items-start gap-y-1">
{comments.length === 0 ? (
showCreateCommentButton && (
<div className="w-full flex flex-row justify-center items-center py-6">
<Button variant="ghost" onClick={handleShowCommentEditor}>
<span className="text-muted-foreground">{t("memo.comment.write-a-comment")}</span>
<MessageCircleIcon className="ml-2 w-5 h-auto text-muted-foreground" />
</Button>
</div>
)
) : (
<div className="w-full flex flex-row justify-between items-center h-8 pl-3 mb-2">
<div className="flex flex-row justify-start items-center">
<MessageCircleIcon className="w-5 h-auto text-muted-foreground mr-1" />
<span className="text-muted-foreground text-sm">{t("memo.comment.self")}</span>
<span className="text-muted-foreground text-sm ml-1">({comments.length})</span>
</div>
{showCreateCommentButton && (
<Button variant="ghost" className="text-muted-foreground" onClick={handleShowCommentEditor}>
{t("memo.comment.write-a-comment")}
</Button>
)}
</div>
)}
{showCommentEditor && (
<div className="w-full mb-2">
<MemoEditor
cacheKey={`${memo.name}-${memo.updateTime}-comment`}
placeholder={t("editor.add-your-comment-here")}
parentMemoName={memo.name}
autoFocus
onConfirm={handleCommentCreated}
onCancel={() => setShowCommentEditor(false)}
/>
</div>
)}
{comments.map((comment) => (
<div className="w-full" key={`${comment.name}-${comment.displayTime}`} id={extractMemoIdFromName(comment.name)}>
<MemoView memo={comment} parentPage={locationState?.from} showCreator compact />
</div>
))}
</div>
</div>
<MemoCommentSection memo={memo} comments={comments} parentPage={locationState?.from} />
</div>
{md && (
<div className="sticky top-0 left-0 shrink-0 -mt-6 w-56 h-full">
<MemoDetailSidebar className="py-6" memo={memo} parentPage={locationState?.from} />
<MemoDetailSidebar className="py-6" memo={memo} />
</div>
)}
</div>

Write Preview
Loading…
Cancel
Save