Skip to content

Commit 5bb04b9

Browse files
trangdoan982trangdoan982
authored
[ENG-864] Add info section for plugin in the general setting (#489)
* add the info section * move to general setting
1 parent 7e96f02 commit 5bb04b9

File tree

3 files changed

+85
-5
lines changed

3 files changed

+85
-5
lines changed

‎apps/obsidian/src/components/GeneralSettings.tsx‎

Lines changed: 83 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,88 @@
1-
import { useState, useCallback } from "react";
1+
import { useState, useCallback, useRef, useEffect } from "react";
22
import { usePlugin } from "./PluginContext";
3-
import { Notice } from "obsidian";
3+
import { Notice, setIcon } from "obsidian";
44
import SuggestInput from "./SuggestInput";
5+
import { SLACK_LOGO, WHITE_LOGO_SVG } from "~/icons";
56

7+
const DOCS_URL = "https://discoursegraphs.com/docs/obsidian";
8+
const COMMUNITY_URL =
9+
"https://join.slack.com/t/discoursegraphs/shared_invite/zt-37xklatti-cpEjgPQC0YyKYQWPNgAkEg";
10+
11+
const InfoSection = () => {
12+
const plugin = usePlugin();
13+
const logoRef = useRef<HTMLDivElement>(null);
14+
const communityIconRef = useRef<HTMLDivElement>(null);
15+
16+
useEffect(() => {
17+
if (logoRef.current) {
18+
logoRef.current.innerHTML = WHITE_LOGO_SVG;
19+
}
20+
if (communityIconRef.current) {
21+
communityIconRef.current.innerHTML = SLACK_LOGO;
22+
}
23+
}, []);
24+
25+
return (
26+
<div className="flex justify-center">
27+
<div
28+
className="flex w-48 flex-col items-center rounded-lg p-3"
29+
style={{ background: "var(--tag-background)" }}
30+
>
31+
<div
32+
ref={logoRef}
33+
className="h-12 w-12"
34+
style={{ color: "var(--interactive-accent)" }}
35+
/>
36+
<div
37+
className="font-semibold"
38+
style={{ color: "var(--interactive-accent)" }}
39+
>
40+
Discourse Graphs
41+
</div>
42+
43+
<a
44+
href={COMMUNITY_URL}
45+
className="flex items-center gap-1 text-sm no-underline hover:opacity-80"
46+
style={{ color: "var(--interactive-accent)" }}
47+
target="_blank"
48+
rel="noopener noreferrer"
49+
aria-label="Community"
50+
>
51+
<div ref={communityIconRef} className="icon" />
52+
<span>Community</span>
53+
<span
54+
className="icon"
55+
ref={(el) => (el && setIcon(el, "arrow-up-right")) || undefined}
56+
/>
57+
</a>
58+
<a
59+
href={DOCS_URL}
60+
className="flex items-center gap-1 text-sm no-underline hover:opacity-80"
61+
style={{ color: "var(--interactive-accent)" }}
62+
target="_blank"
63+
rel="noopener noreferrer"
64+
aria-label="Docs"
65+
>
66+
<div
67+
className="icon"
68+
ref={(el) => (el && setIcon(el, "book")) || undefined}
69+
/>
70+
<span>Docs</span>
71+
<span
72+
className="icon"
73+
ref={(el) => (el && setIcon(el, "arrow-up-right")) || undefined}
74+
/>
75+
</a>
76+
<span
77+
className="text-muted text-xs"
78+
style={{ color: "var(--interactive-accent)" }}
79+
>
80+
{plugin.manifest.version}
81+
</span>
82+
</div>
83+
</div>
84+
);
85+
};
686
export const FolderSuggestInput = ({
787
value,
888
onChange,
@@ -195,6 +275,7 @@ const GeneralSettings = () => {
195275
{hasUnsavedChanges && (
196276
<div className="text-muted mt-2">You have unsaved changes</div>
197277
)}
278+
<InfoSection />
198279
</div>
199280
);
200281
};

‎apps/obsidian/src/components/Settings.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ const Settings = () => {
1515
return (
1616
<div className="flex flex-col gap-4">
1717
<h2 className="dg-h2">Discourse Graph Settings</h2>
18-
1918
<div className="border-modifier-border flex w-full overflow-x-auto border-b p-2">
2019
<button
2120
onClick={() => setActiveTab("general")}

‎apps/obsidian/src/icons.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export const WHITE_LOGO_SVG =
2-
'<svg width="18" height="18" viewBox="0 0 256 264" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M156.705 252.012C140.72 267.995 114.803 267.995 98.8183 252.012L11.9887 165.182C-3.99622 149.197 -3.99622 123.28 11.9886 107.296L55.4035 63.8807C63.3959 55.8881 76.3541 55.8881 84.3467 63.8807C92.3391 71.8731 92.3391 84.8313 84.3467 92.8239L69.8751 107.296C53.8901 123.28 53.8901 149.197 69.8751 165.182L113.29 208.596C121.282 216.589 134.241 216.589 142.233 208.596C150.225 200.604 150.225 187.646 142.233 179.653L127.761 165.182C111.777 149.197 111.777 123.28 127.761 107.296C143.746 91.3105 143.746 65.3939 127.761 49.4091L113.29 34.9375C105.297 26.9452 105.297 13.9868 113.29 5.99432C121.282 -1.99811 134.241 -1.99811 142.233 5.99434L243.533 107.296C259.519 123.28 259.519 149.197 243.533 165.182L156.705 252.012ZM200.119 121.767C192.127 113.775 179.168 113.775 171.176 121.767C163.184 129.76 163.184 142.718 171.176 150.71C179.168 158.703 192.127 158.703 200.119 150.71C208.112 142.718 208.112 129.76 200.119 121.767Z" fill="currentColor"/></svg>';
3-
2+
'<svg width="32" height="32" viewBox="0 0 256 264" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M156.705 252.012C140.72 267.995 114.803 267.995 98.8183 252.012L11.9887 165.182C-3.99622 149.197 -3.99622 123.28 11.9886 107.296L55.4035 63.8807C63.3959 55.8881 76.3541 55.8881 84.3467 63.8807C92.3391 71.8731 92.3391 84.8313 84.3467 92.8239L69.8751 107.296C53.8901 123.28 53.8901 149.197 69.8751 165.182L113.29 208.596C121.282 216.589 134.241 216.589 142.233 208.596C150.225 200.604 150.225 187.646 142.233 179.653L127.761 165.182C111.777 149.197 111.777 123.28 127.761 107.296C143.746 91.3105 143.746 65.3939 127.761 49.4091L113.29 34.9375C105.297 26.9452 105.297 13.9868 113.29 5.99432C121.282 -1.99811 134.241 -1.99811 142.233 5.99434L243.533 107.296C259.519 123.28 259.519 149.197 243.533 165.182L156.705 252.012ZM200.119 121.767C192.127 113.775 179.168 113.775 171.176 121.767C163.184 129.76 163.184 142.718 171.176 150.71C179.168 158.703 192.127 158.703 200.119 150.71C208.112 142.718 208.112 129.76 200.119 121.767Z" fill="currentColor"/></svg>';
3+
export const SLACK_LOGO = '<svg width="16" height="16" viewBox="0 0 127 127" xmlns="http://www.w3.org/2000/svg"><path d="M27.2 80c0 7.3-5.9 13.2-13.2 13.2C6.7 93.2.8 87.3.8 80c0-7.3 5.9-13.2 13.2-13.2h13.2V80zm6.6 0c0-7.3 5.9-13.2 13.2-13.2 7.3 0 13.2 5.9 13.2 13.2v33c0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V80z" fill="currentColor"/><path d="M47 27c-7.3 0-13.2-5.9-13.2-13.2C33.8 6.5 39.7.6 47 .6c7.3 0 13.2 5.9 13.2 13.2V27H47zm0 6.7c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H13.9C6.6 60.1.7 54.2.7 46.9c0-7.3 5.9-13.2 13.2-13.2H47z" fill="currentColor"/><path d="M99.9 46.9c0-7.3 5.9-13.2 13.2-13.2 7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H99.9V46.9zm-6.6 0c0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V13.8C66.9 6.5 72.8.6 80.1.6c7.3 0 13.2 5.9 13.2 13.2v33.1z" fill="currentColor"/><path d="M80.1 99.8c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V99.8h13.2zm0-6.6c-7.3 0-13.2-5.9-13.2-13.2 0-7.3 5.9-13.2 13.2-13.2h33.1c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H80.1z" fill="currentColor"/></svg>'
44
export const TOOL_ARROW_ICON_SVG =
55
'<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M24 18.467V6m0 0H11.533M24 6 7 23"/></svg>';
66

0 commit comments

Comments
 (0)