feat: Tray sticker (#105)

Author: egor-xyz

src/main/ipcs/index.ts

@@ -4,3 +4,4 @@ import './ipcProjects';
 import './ipcGit';
 import './ipcLaunch';
 import './ipcGitHub';
+import './ipcSticker';

src/main/ipcs/ipcSticker.ts

@@ -0,0 +1,20 @@
+import { ipcMain, Menu, Tray, nativeImage, BrowserWindow } from 'electron';
+import log from 'electron-log';
+
+let tray: Tray | null = null;
+
+ipcMain.handle('sticker:add', async (_, text: string): Promise<void> => {
+  if (tray) tray.destroy();
+
+  const trayIcon = nativeImage.createEmpty();
+  tray = new Tray(trayIcon);
+  tray.setTitle(text, { fontType: 'monospaced' });
+  tray.setToolTip('Devkitty. Click to remove sticker.');
+
+  tray.on('click', () => {
+    if (tray) {
+      tray.destroy();
+      tray = null;
+    }
+  });
+});

src/main/ipcs/preload.ts

@@ -42,6 +42,9 @@ const bridge = {
       ipcRenderer.on('settings:updated', callback),
     set: <K extends keyof Settings>(key: K, value: Partial<Settings[K]>, safe?: boolean) =>
       ipcRenderer.invoke('settings:set', key, value, safe)
+  },
+  sticker: {
+    add: (text: string) => ipcRenderer.invoke('sticker:add', text)
   }
 };
 

src/rendered/components/AppNavbar/AppNavbar.tsx

@@ -7,11 +7,20 @@ import { useDarkMode } from 'rendered/hooks/useDarkMode';
 import { useProjects } from 'rendered/hooks/useProjects';
 
 import { LeftGroup, Logo, RightGroup, StyledNavbar, Shadow, ShadowContainer, Title } from './AppNavbar.styles';
+import { useModal } from 'rendered/hooks/useModal';
 
 export const AppNavbar = () => {
   const { themeSource, toggleDarkMode } = useDarkMode();
   const { showLogo } = useAppSettings();
   const { addProject } = useProjects();
+  const { openModal } = useModal();
+
+  const addSticker = () => {
+    openModal({
+      name: 'sticker:add',
+      props: {}
+    });
+  };
 
   const refresh = () => {
     window.location.reload();
@@ -59,6 +68,12 @@ export const AppNavbar = () => {
             />
           )}
 
+          <Button
+            minimal
+            icon="pin"
+            onClick={addSticker}
+          />
+
           <NavLink
             className={({ isActive }) => clsx(Classes.BUTTON, Classes.MINIMAL, isActive && Classes.ACTIVE)}
             to="/settings"

src/rendered/components/Modals/TrayStickerModal/TrayStickerModal.styles.ts

@@ -0,0 +1,19 @@
+import { Colors, Dialog } from '@blueprintjs/core';
+import styled from 'styled-components';
+
+export const StyledDialog = styled(Dialog)`
+  max-width: 250px;
+`;
+
+export const Actions = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+  justify-content: space-between;
+  flex-direction: row-reverse;
+`;
+
+export const Error = styled.div`
+  color: ${Colors.RED3};
+  font-size: 12px;
+`;

src/rendered/components/Modals/TrayStickerModal/TrayStickerModal.tsx

@@ -0,0 +1,64 @@
+import { Button, Classes, DialogBody, InputGroup } from '@blueprintjs/core';
+import { ChangeEventHandler, FC, useState } from 'react';
+
+import { appToaster } from 'rendered/utils/appToaster';
+import { ModalProps } from 'types/Modal';
+
+import { Actions, Error, StyledDialog } from './TrayStickerModal.styles';
+
+export const TrayStickerModal: FC<ModalProps> = ({ onClose, darkMode, isOpen }) => {
+  const [text, setText] = useState<string>('');
+  const [error, setError] = useState<string | undefined>();
+
+  const handleChange: ChangeEventHandler<HTMLInputElement> = ({ target: { value } }) => {
+    setText(value);
+  };
+
+  const handleSave = async () => {
+    setError(undefined);
+
+    if (text.trim().length < 1) {
+      setError('Sticker text is required');
+      return;
+    }
+
+    window.bridge.sticker.add(text);
+
+    (await appToaster).show({
+      intent: 'success',
+      message: `Sticker added!`
+    });
+
+    onClose();
+  };
+
+  return (
+    <StyledDialog
+      className={darkMode && Classes.DARK}
+      icon="pin"
+      isOpen={isOpen}
+      title={'Add Tray Sticker'}
+      onClose={onClose}
+    >
+      <DialogBody>
+        <InputGroup
+          autoFocus
+          intent={error ? 'danger' : 'none'}
+          placeholder="sticker text..."
+          value={text}
+          onChange={handleChange}
+        />
+
+        <Actions>
+          <Button
+            intent="warning"
+            text={'Add'}
+            onClick={handleSave}
+          />
+
+          {error && <Error>{error}</Error>}
+        </Actions>
+      </DialogBody>
+    </StyledDialog>
+  );
+};

src/rendered/components/Modals/TrayStickerModal/index.ts

@@ -0,0 +1 @@
+export { TrayStickerModal } from './TrayStickerModal';

src/rendered/hooks/useModal.tsx

@@ -7,6 +7,7 @@ import { GitMergeModal, GitMergeModalProps } from 'rendered/components/Modals/Gi
 import { RemoveAlert } from 'rendered/components/Project/components/RemoveAlert';
 import { RemoveAlertProps } from 'rendered/components/Project/components/RemoveAlert/RemoveAlert';
 import { GroupModal, GroupModalProps } from 'rendered/components/Modals/GroupModal/GroupModal';
+import { TrayStickerModal } from 'rendered/components/Modals/TrayStickerModal';
 import {
   RemoveGroupAlert,
   RemoveGroupAlertProps
@@ -36,6 +37,10 @@ type ActiveModal = ModalProps &
         name: 'remove:group';
         props: RemoveGroupAlertProps;
       }
+    | {
+        name: 'sticker:add';
+        props: ModalProps;
+      }
   );
 
 type State = {
@@ -47,9 +52,10 @@ type State = {
 const Modals: Record<ActiveModal['name'], FC<ActiveModal['props']>> = {
   'git:merge': GitMergeModal,
   'git:reset': GitResetModal,
-  group: GroupModal,
   'remove:group': RemoveGroupAlert,
-  'remove:project': RemoveAlert
+  'remove:project': RemoveAlert,
+  'sticker:add': TrayStickerModal,
+  group: GroupModal
 };
 
 export const useModal = create<State>()((set, get) => ({