Add openExternal IPC handler and integrate with UI components
- Introduce `openExternal` IPC handler in `electron/main.ts` for opening external links via the default browser or native app. - Update typings in `electron.d.ts` and `preload.ts` to include `openExternal`. - Refactor `ComposerRightBar` and `LeftBar` components to leverage `electron.openExternal` for external link actions (e.g., Facebook, Discord). - Add offline mode logic to filter navigation options in `ComposerRightBar` and `LeftBar`. - Enhance footer bar to display book titles when chapters are unavailable.
This commit is contained in:
natreex
@@ -7,10 +7,12 @@ import {faBook, faChartSimple, faHeart, faSheetPlastic} from "@fortawesome/free-
|
||||
import {SessionContext} from "@/context/SessionContext";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {AlertContext} from "@/context/AlertContext";
|
||||
import {BookContext} from "@/context/BookContext";
|
||||
|
||||
export default function ScribeFooterBar() {
|
||||
const t = useTranslations();
|
||||
const {chapter} = useContext(ChapterContext);
|
||||
const {book} = useContext(BookContext);
|
||||
const editor: Editor | null = useContext(EditorContext).editor;
|
||||
const {session} = useContext(SessionContext);
|
||||
const {errorMessage} = useContext(AlertContext)
|
||||
@@ -51,15 +53,15 @@ export default function ScribeFooterBar() {
|
||||
<div>
|
||||
<span className="flex items-center gap-2">
|
||||
{chapter && (
|
||||
<span
|
||||
className="inline-flex items-center px-3 py-1 rounded-lg bg-primary/10 border border-primary/30">
|
||||
<span className="inline-flex items-center px-3 py-1 rounded-lg bg-primary/10 border border-primary/30">
|
||||
<span className="text-primary font-bold text-sm">
|
||||
{chapter.chapterOrder < 0 ? t('scribeFooterBar.sheet') : `${chapter.chapterOrder}.`}
|
||||
</span>
|
||||
</span>
|
||||
)}
|
||||
<span className={'flex items-center gap-2 font-medium'}>
|
||||
{chapter?.title || (
|
||||
{
|
||||
chapter?.title || book?.title || (
|
||||
<>
|
||||
<span>{t('scribeFooterBar.madeWith')}</span>
|
||||
<FontAwesomeIcon color={'red'} icon={faHeart} className={'w-4 h-4 animate-pulse'}/>
|
||||
@@ -69,7 +71,7 @@ export default function ScribeFooterBar() {
|
||||
</span>
|
||||
</div>
|
||||
{
|
||||
chapter ? (
|
||||
chapter || book ? (
|
||||
<div className="flex items-center space-x-3">
|
||||
<div
|
||||
className="flex items-center gap-2 bg-secondary/50 px-4 py-2 rounded-xl border border-secondary shadow-sm">
|
||||
|
||||
@@ -9,6 +9,7 @@ import AddNewBookForm from "@/components/book/AddNewBookForm";
|
||||
import ShortStoryGenerator from "@/components/ShortStoryGenerator";
|
||||
import {SessionContext} from "@/context/SessionContext";
|
||||
import {useTranslations} from "next-intl";
|
||||
import OfflineContext from "@/context/OfflineContext";
|
||||
|
||||
export default function ScribeLeftBar() {
|
||||
const {book} = useContext(BookContext);
|
||||
@@ -21,6 +22,7 @@ export default function ScribeLeftBar() {
|
||||
|
||||
const [showAddNewBook, setShowAddNewBook] = useState<boolean>(false);
|
||||
const [showGenerateShortModal, setShowGenerateShortModal] = useState<boolean>(false)
|
||||
const {isCurrentlyOffline} = useContext(OfflineContext)
|
||||
|
||||
const editorComponents: PanelComponent[] = [
|
||||
{
|
||||
@@ -76,7 +78,7 @@ export default function ScribeLeftBar() {
|
||||
return (
|
||||
<div id="left-panel-container" data-guide={"left-panel-container"} className="flex transition-all duration-300">
|
||||
<div className="bg-tertiary border-r border-secondary/50 p-3 flex flex-col space-y-3 shadow-xl">
|
||||
{book ? editorComponents.map(component => (
|
||||
{book ? editorComponents.map((component:PanelComponent) => (
|
||||
<button
|
||||
key={component.id}
|
||||
onClick={(): void => {
|
||||
@@ -97,6 +99,9 @@ export default function ScribeLeftBar() {
|
||||
</button>
|
||||
)) : (
|
||||
homeComponents
|
||||
.filter((component: PanelComponent):boolean => {
|
||||
return !(isCurrentlyOffline() && component.id === 2);
|
||||
})
|
||||
.map((component: PanelComponent) => (
|
||||
<button
|
||||
key={component.id}
|
||||
|
||||
@@ -12,6 +12,7 @@ import LocationComponent from "@/components/book/settings/locations/LocationComp
|
||||
import CharacterComponent from "@/components/book/settings/characters/CharacterComponent";
|
||||
import QuillSense from "@/components/quillsense/QuillSenseComponent";
|
||||
import {useTranslations} from "next-intl";
|
||||
import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
|
||||
|
||||
export default function ComposerRightBar() {
|
||||
const {book} = useContext(BookContext);
|
||||
@@ -19,20 +20,16 @@ export default function ComposerRightBar() {
|
||||
|
||||
const t = useTranslations();
|
||||
|
||||
const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext)
|
||||
|
||||
const [panelHidden, setPanelHidden] = useState<boolean>(false);
|
||||
const [currentPanel, setCurrentPanel] = useState<PanelComponent | undefined>()
|
||||
|
||||
const [showAbout, setShowAbout] = useState<boolean>(false);
|
||||
|
||||
const worldRef: RefObject<{ handleSave: () => Promise<void> } | null> = useRef<{
|
||||
handleSave: () => Promise<void>
|
||||
}>(null);
|
||||
const locationRef: RefObject<{ handleSave: () => Promise<void> } | null> = useRef<{
|
||||
handleSave: () => Promise<void>
|
||||
}>(null);
|
||||
const characterRef: RefObject<{ handleSave: () => Promise<void> } | null> = useRef<{
|
||||
handleSave: () => Promise<void>
|
||||
}>(null);
|
||||
const worldRef: RefObject<{ handleSave: () => Promise<void> } | null> = useRef<{ handleSave: () => Promise<void> }>(null);
|
||||
const locationRef: RefObject<{ handleSave: () => Promise<void> } | null> = useRef<{ handleSave: () => Promise<void> }>(null);
|
||||
const characterRef: RefObject<{ handleSave: () => Promise<void> } | null> = useRef<{ handleSave: () => Promise<void> }>(null);
|
||||
|
||||
async function handleSaveClick(): Promise<void> {
|
||||
switch (currentPanel?.id) {
|
||||
@@ -114,7 +111,7 @@ export default function ComposerRightBar() {
|
||||
description: t("composerRightBar.homeComponents.facebook.description"),
|
||||
badge: t("composerRightBar.homeComponents.facebook.badge"),
|
||||
icon: faFacebook,
|
||||
action: () => window.open('https://www.facebook.com/profile.php?id=61562628720878', '_blank')
|
||||
action: ():Promise<void> => window.electron.openExternal('https://www.facebook.com/profile.php?id=61562628720878')
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
@@ -122,7 +119,7 @@ export default function ComposerRightBar() {
|
||||
description: t("composerRightBar.homeComponents.discord.description"),
|
||||
badge: t("composerRightBar.homeComponents.discord.badge"),
|
||||
icon: faDiscord,
|
||||
action: () => window.open('https://discord.gg/CHXRPvmaXm', '_blank')
|
||||
action: () => window.electron.openExternal('https://discord.gg/CHXRPvmaXm')
|
||||
}
|
||||
]
|
||||
|
||||
@@ -166,7 +163,11 @@ export default function ComposerRightBar() {
|
||||
</div>
|
||||
)}
|
||||
<div className="bg-tertiary border-l border-secondary/50 p-3 flex flex-col space-y-3 shadow-xl">
|
||||
{book ? editorComponents.map((component: PanelComponent) => (
|
||||
{book ? editorComponents
|
||||
.filter((component: PanelComponent):boolean => {
|
||||
return !(isCurrentlyOffline() && component.id === 1);
|
||||
})
|
||||
.map((component: PanelComponent) => (
|
||||
<button
|
||||
key={component.id}
|
||||
disabled={disabled(component.id)}
|
||||
|
||||
Reference in New Issue
Block a user