Skip to content

Commit aaf9dee

Browse files
sid597sid597
authored
ENG-899 V2 Be able to give page or block links a nickname (alias) (#609)
* use roam query to get the results instead of dom * first pass give personal section child items an alias, working keep as draft * fix bugs * remove unused * fix
1 parent 193e67d commit aaf9dee

File tree

3 files changed

+132
-42
lines changed

3 files changed

+132
-42
lines changed

‎apps/roam/src/components/LeftSidebarView.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -118,15 +118,16 @@ const SectionChildren = ({
118118
childrenNodes,
119119
truncateAt,
120120
}: {
121-
childrenNodes: { uid: string; text: string }[];
121+
childrenNodes: { uid: string; text: string; alias?: { value: string } }[];
122122
truncateAt?: number;
123123
}) => {
124124
if (!childrenNodes?.length) return null;
125125
return (
126126
<>
127127
{childrenNodes.map((child) => {
128128
const ref = parseReference(child.text);
129-
const label = truncate(ref.display, truncateAt);
129+
const alias = child.alias?.value;
130+
const label = alias || truncate(ref.display, truncateAt);
130131
const onClick = (e: React.MouseEvent) => {
131132
return void openTarget(e, child.text);
132133
};
@@ -183,7 +184,7 @@ const PersonalSectionItem = ({
183184
onClick={() => {
184185
if ((section.children?.length || 0) > 0) {
185186
handleChevronClick();
186-
}
187+
}
187188
}}
188189
>
189190
{(blockText || titleRef.display).toUpperCase()}

‎apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx‎

Lines changed: 114 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,11 @@ import createBlock from "roamjs-components/writes/createBlock";
1313
import deleteBlock from "roamjs-components/writes/deleteBlock";
1414
import type { RoamBasicNode } from "roamjs-components/types";
1515
import NumberPanel from "roamjs-components/components/ConfigPanels/NumberPanel";
16+
import TextPanel from "roamjs-components/components/ConfigPanels/TextPanel";
1617
import {
1718
LeftSidebarPersonalSectionConfig,
1819
getLeftSidebarPersonalSectionConfig,
20+
PersonalSectionChild,
1921
} from "~/utils/getLeftSidebarSettings";
2022
import { extractRef, getSubTree } from "roamjs-components/util";
2123
import getTextByBlockUid from "roamjs-components/queries/getTextByBlockUid";
@@ -56,6 +58,9 @@ const SectionItem = memo(
5658
new Set(),
5759
);
5860
const isExpanded = expandedChildLists.has(section.uid);
61+
const [childSettingsUid, setChildSettingsUid] = useState<string | null>(
62+
null,
63+
);
5964
const toggleChildrenList = useCallback((sectionUid: string) => {
6065
setExpandedChildLists((prev) => {
6166
const next = new Set(prev);
@@ -168,6 +173,7 @@ const SectionItem = memo(
168173
text: childName,
169174
uid: newChild,
170175
children: [],
176+
alias: { value: "" },
171177
},
172178
],
173179
};
@@ -189,7 +195,7 @@ const SectionItem = memo(
189195
const removeChild = useCallback(
190196
async (
191197
section: LeftSidebarPersonalSectionConfig,
192-
child: RoamBasicNode,
198+
child: PersonalSectionChild,
193199
) => {
194200
try {
195201
await deleteBlock(child.uid);
@@ -369,43 +375,114 @@ const SectionItem = memo(
369375

370376
{(section.children || []).length > 0 && (
371377
<div className="space-y-1">
372-
{(section.children || []).map((child, index) => (
373-
<div
374-
key={child.uid}
375-
className="group flex items-center justify-between rounded bg-gray-50 p-2 hover:bg-gray-100"
376-
>
377-
<div className="mr-2 min-w-0 flex-1 truncate">
378-
{child.text}
378+
{(section.children || []).map((child, index) => {
379+
const childAlias = child.alias?.value;
380+
const isSettingsOpen = childSettingsUid === child.uid;
381+
return (
382+
<div key={child.uid}>
383+
<div className="group flex items-center justify-between rounded bg-gray-50 p-2 hover:bg-gray-100">
384+
<div
385+
className="mr-2 min-w-0 flex-1 truncate"
386+
title={child.text}
387+
>
388+
{childAlias ? (
389+
<span>
390+
<span className="font-medium">
391+
{childAlias}
392+
</span>
393+
<span className="ml-2 text-xs text-gray-400">
394+
({child.text})
395+
</span>
396+
</span>
397+
) : (
398+
child.text
399+
)}
400+
</div>
401+
<ButtonGroup minimal className="flex-shrink-0">
402+
<Button
403+
icon="settings"
404+
small
405+
onClick={() => setChildSettingsUid(child.uid)}
406+
title="Child Settings"
407+
className="opacity-0 transition-opacity group-hover:opacity-100"
408+
/>
409+
<Button
410+
icon="arrow-up"
411+
small
412+
disabled={index === 0}
413+
onClick={() => moveChild(section, index, "up")}
414+
title="Move child up"
415+
className="opacity-0 transition-opacity group-hover:opacity-100"
416+
/>
417+
<Button
418+
icon="arrow-down"
419+
small
420+
disabled={
421+
index === (section.children || []).length - 1
422+
}
423+
onClick={() => moveChild(section, index, "down")}
424+
title="Move child down"
425+
className="opacity-0 transition-opacity group-hover:opacity-100"
426+
/>
427+
<Button
428+
icon="trash"
429+
small
430+
intent="danger"
431+
onClick={() => void removeChild(section, child)}
432+
title="Remove child"
433+
/>
434+
</ButtonGroup>
435+
</div>
436+
<Dialog
437+
isOpen={isSettingsOpen}
438+
onClose={() => {
439+
setChildSettingsUid(null);
440+
refreshAndNotify();
441+
}}
442+
title={`Settings for "${child.text}"`}
443+
style={{ width: "400px" }}
444+
>
445+
<div className="p-4">
446+
<TextPanel
447+
title="Alias"
448+
description="Display name for this item"
449+
order={0}
450+
uid={child.alias?.uid}
451+
parentUid={child.uid}
452+
defaultValue=""
453+
options={{
454+
onChange: (
455+
event: React.ChangeEvent<HTMLInputElement>,
456+
) => {
457+
const nextValue = event.target.value;
458+
setSections((prev) =>
459+
prev.map((s) =>
460+
s.uid === section.uid
461+
? {
462+
...s,
463+
children: s.children?.map((c) =>
464+
c.uid === child.uid
465+
? {
466+
...c,
467+
alias: {
468+
...c.alias,
469+
value: nextValue,
470+
},
471+
}
472+
: c,
473+
),
474+
}
475+
: s,
476+
),
477+
);
478+
},
479+
}}
480+
/>
481+
</div>
482+
</Dialog>
379483
</div>
380-
<ButtonGroup minimal className="flex-shrink-0">
381-
<Button
382-
icon="arrow-up"
383-
small
384-
disabled={index === 0}
385-
onClick={() => moveChild(section, index, "up")}
386-
title="Move child up"
387-
className="opacity-0 transition-opacity group-hover:opacity-100"
388-
/>
389-
<Button
390-
icon="arrow-down"
391-
small
392-
disabled={
393-
index === (section.children || []).length - 1
394-
}
395-
onClick={() => moveChild(section, index, "down")}
396-
title="Move child down"
397-
className="opacity-0 transition-opacity group-hover:opacity-100"
398-
/>
399-
<Button
400-
icon="trash"
401-
small
402-
intent="danger"
403-
onClick={() => void removeChild(section, child)}
404-
title="Remove child"
405-
/>
406-
</ButtonGroup>
407-
</div>
408-
))}
484+
);
485+
})}
409486
</div>
410487
)}
411488

‎apps/roam/src/utils/getLeftSidebarSettings.ts‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import {
44
getUidAndBooleanSetting,
55
IntSetting,
66
getUidAndIntSetting,
7+
StringSetting,
8+
getUidAndStringSetting,
79
} from "./getExportSettings";
810
import { getSubTree } from "roamjs-components/util";
911

@@ -13,11 +15,15 @@ type LeftSidebarPersonalSectionSettings = {
1315
folded: BooleanSetting;
1416
};
1517

18+
export type PersonalSectionChild = RoamBasicNode & {
19+
alias: StringSetting;
20+
};
21+
1622
export type LeftSidebarPersonalSectionConfig = {
1723
uid: string;
1824
text: string;
1925
settings?: LeftSidebarPersonalSectionSettings;
20-
children?: RoamBasicNode[];
26+
children?: PersonalSectionChild[];
2127
childrenUid?: string;
2228
};
2329

@@ -149,7 +155,13 @@ export const getLeftSidebarPersonalSectionConfig = (
149155
settings: settingsNode
150156
? getPersonalSectionSettings(settingsNode)
151157
: undefined,
152-
children: childrenNode?.children || [],
158+
children: (childrenNode?.children || []).map((child) => ({
159+
...child,
160+
alias: getUidAndStringSetting({
161+
tree: child.children || [],
162+
text: "Alias",
163+
}),
164+
})),
153165
childrenUid: childrenNode?.uid || "",
154166
};
155167
},

0 commit comments

Comments
 (0)