feat: desktop version

packages/sdk/src/notifications/context.tsx

@@ -1,4 +1,10 @@
-import { createContext, useCallback, useMemo, useState } from 'react';
+import {
+  createContext,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import type { Notification } from './types';
 
 type NotificationsContextValue = {
@@ -9,6 +15,7 @@ type NotificationsContextValue = {
 
 type NotificationsProviderProps = {
   children: React.ReactNode;
+  onNotificationsUpdate?: (notification: Notification[]) => void;
 };
 
 const NotificationsContext = createContext<NotificationsContextValue | null>(
@@ -19,6 +26,7 @@ let nextId = 0;
 
 const NotificationsProvider: React.FC<NotificationsProviderProps> = ({
   children,
+  onNotificationsUpdate,
 }) => {
   const [notifications, setNotifications] = useState<Notification[]>([]);
 
@@ -55,6 +63,10 @@ const NotificationsProvider: React.FC<NotificationsProviderProps> = ({
     [notifications, add, dismiss],
   );
 
+  useEffect(() => {
+    onNotificationsUpdate?.(notifications);
+  }, [notifications, onNotificationsUpdate]);
+
   return (
     <NotificationsContext.Provider value={value}>
       {children}

packages/sdk/src/provider.tsx

@@ -6,7 +6,7 @@ import {
   SlackLogin,
 } from './clients';
 import { Widget, WidgetsProvider } from './widgets';
-import { NotificationsProvider } from './notifications';
+import { NotificationsProvider, Notification } from './notifications';
 import { BoardsLoad, BoardsProvider, BoardsSave } from './boards';
 
 type DashboardProviderProps = {
@@ -14,6 +14,7 @@ type DashboardProviderProps = {
   widgets?: Widget<TSchema>[];
   load: BoardsLoad;
   save: BoardsSave;
+  onNotificationsUpdate?: (notifications: Notification[]) => void;
   logins: {
     github: GithubLogin;
     linear: LinearLogin;
@@ -27,10 +28,11 @@ const DashboardProvider: React.FC<DashboardProviderProps> = ({
   load,
   save,
   logins,
+  onNotificationsUpdate,
 }) => (
   <WidgetsProvider widgets={widgets}>
     <BoardsProvider load={load} save={save}>
-      <NotificationsProvider>
+      <NotificationsProvider onNotificationsUpdate={onNotificationsUpdate}>
         <ClientProvider logins={logins}>{children}</ClientProvider>
       </NotificationsProvider>
     </BoardsProvider>

packages/ui/src/base/index.ts

@@ -11,3 +11,4 @@ export * from './masonry';
 export * from './code-editor';
 export * from './popover';
 export * from './form';
+export * from './loader';

packages/ui/src/base/loader/index.tsx

@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+import { LuLoader2 } from 'react-icons/lu';
+
+type LoaderProps = {
+  children?: React.ReactNode;
+};
+
+const LoaderWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+`;
+
+const LoaderIcon = styled.div`
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  border: 5px solid #ccc;
+  border-top-color: #000;
+  animation: spin 1s infinite linear;
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
+const Loader: React.FC<LoaderProps> = ({ children }) => {
+  return (
+    <LoaderWrapper>
+      <LoaderIcon>{children || <LuLoader2 />}</LoaderIcon>
+    </LoaderWrapper>
+  );
+};
+
+export { Loader };

packages/ui/src/interface/app/index.tsx

@@ -8,10 +8,10 @@ import {
 } from '@refocus/sdk';
 import { IoAddCircleOutline } from 'react-icons/io5';
 import styled from 'styled-components';
-import { View } from '../../base';
+import { Button, Dialog, Form, View } from '../../base';
 import { Board } from '../board';
 import { Tabs } from '../../base/tabs';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 const Wrapper = styled(View)`
   height: 100vh;
@@ -36,40 +36,68 @@ const Title: React.FC<{ id: string }> = ({ id }) => {
 
 const App: React.FC = () => {
   const boards = useBoards();
+  const [boardName, setBoardName] = useState('');
+  const [addOpen, setAddOpen] = useState(false);
   const selected = useSelectedBoard();
   const selectBoard = useSelectBoard();
   const addBoardAction = useAddBoard();
   const removeBoard = useRemoveBoard();
 
-  const addBoard = useCallback(() => {
-    const name = prompt('Board name?');
-    if (!name) {
-      return;
-    }
-    addBoardAction(name);
-  }, [addBoardAction]);
+  const addBoard = useCallback(
+    (name: string) => {
+      if (!name) {
+        return;
+      }
+      setAddOpen(false);
+      addBoardAction(name);
+    },
+    [addBoardAction],
+  );
 
   return (
     <Wrapper $fc>
       <View $f={1}>
         <Tabs value={selected} onValueChange={selectBoard}>
           <Tabs.List>
-            {Object.entries(boards).map(([id, board]) => (
+            {Object.entries(boards).map(([id]) => (
               <Tabs.Trigger key={id} value={id}>
                 <Title id={id} />
                 <Tabs.Close onClick={() => removeBoard(id)} />
               </Tabs.Trigger>
             ))}
-            <View
-              onClick={addBoard}
-              $fr
-              $justify="center"
-              $items="center"
-              $p="md"
-              $bg="highlight100"
-            >
-              <IoAddCircleOutline size={16} />
-            </View>
+            <Dialog open={addOpen} onOpenChange={setAddOpen}>
+              <Dialog.Trigger>
+                <View
+                  $fr
+                  $justify="center"
+                  $items="center"
+                  $p="md"
+                  $bg="highlight100"
+                >
+                  <IoAddCircleOutline size={16} />
+                </View>
+              </Dialog.Trigger>
+              <Dialog.Portal>
+                <Dialog.Overlay />
+                <Dialog.Content>
+                  <Form>
+                    <Form.Field label="Board Name">
+                      <Form.Input
+                        value={boardName}
+                        onChange={(e) => setBoardName(e.target.value)}
+                        required
+                      />
+                    </Form.Field>
+                    <Form.Buttons>
+                      <Button
+                        title="Add Board"
+                        onClick={() => addBoard(boardName)}
+                      />
+                    </Form.Buttons>
+                  </Form>
+                </Dialog.Content>
+              </Dialog.Portal>
+            </Dialog>
           </Tabs.List>
           {Object.entries(boards).map(([id, board]) => (
             <Tabs.Content key={id} value={id}>

packages/ui/src/provider.tsx

@@ -1,4 +1,4 @@
-import { DashboardProvider, Widget } from '@refocus/sdk';
+import { DashboardProvider, Widget, Notification } from '@refocus/sdk';
 import { UIProvider } from './theme/provider';
 import { useCallback, useMemo } from 'react';
 import { GithubLogin } from './github';
@@ -8,9 +8,14 @@ import { SlackLogin } from './slack';
 type FocusProviderProps = {
   children: React.ReactNode;
   widgets: Widget<any>[];
+  onNotificationsUpdate?: (notifications: Notification[]) => void;
 };
 
-const FocusProvider: React.FC<FocusProviderProps> = ({ children, widgets }) => {
+const FocusProvider: React.FC<FocusProviderProps> = ({
+  children,
+  widgets,
+  onNotificationsUpdate,
+}) => {
   const save = useCallback((data: any) => {
     localStorage.setItem('boards', JSON.stringify(data));
   }, []);
@@ -42,6 +47,7 @@ const FocusProvider: React.FC<FocusProviderProps> = ({ children, widgets }) => {
         save={save}
         widgets={widgets}
         logins={logins}
+        onNotificationsUpdate={onNotificationsUpdate}
       >
         {children}
       </DashboardProvider>

packages/widgets/src/code/edit.tsx

@@ -0,0 +1,44 @@
+import { Button, CodeEditor, Form } from '@refocus/ui';
+import { useCallback, useState } from 'react';
+import { Props } from './schema';
+
+type EditorProps = {
+  value?: Props;
+  save: (data: Props) => void;
+};
+
+const Edit: React.FC<EditorProps> = ({ value, save }) => {
+  const [code, setCode] = useState(value?.code || '');
+  const [language, setLanguage] = useState(value?.language || '');
+  const [name, setName] = useState(value?.name || '');
+
+  const handleSave = useCallback(() => {
+    save({
+      name,
+      code,
+      language,
+    });
+  }, [code, save, language, name]);
+
+  return (
+    <Form>
+      <Form.Field label="Name">
+        <Form.Input value={name} onChange={(e) => setName(e.target.value)} />
+      </Form.Field>
+      <Form.Field label="Language">
+        <Form.Input
+          value={language}
+          onChange={(e) => setLanguage(e.target.value)}
+        />
+      </Form.Field>
+      <Form.Field label="Code">
+        <CodeEditor language={language} value={code} setValue={setCode} />
+      </Form.Field>
+      <Form.Buttons>
+        <Button onClick={handleSave} title="Save" />
+      </Form.Buttons>
+    </Form>
+  );
+};
+
+export { Edit };

packages/widgets/src/code/index.tsx

@@ -0,0 +1,17 @@
+import { Widget } from '@refocus/sdk';
+import { IoLogoMarkdown } from 'react-icons/io';
+import { schema } from './schema';
+import { Edit } from './edit';
+import { View } from './view';
+
+const widget: Widget<typeof schema> = {
+  name: 'Code',
+  description: 'Write a code file',
+  icon: <IoLogoMarkdown />,
+  id: 'text.code',
+  schema,
+  component: View,
+  edit: Edit,
+};
+
+export default widget;

packages/widgets/src/code/schema.ts

@@ -0,0 +1,12 @@
+import { Type, Static } from '@sinclair/typebox';
+
+const schema = Type.Object({
+  name: Type.String(),
+  code: Type.String(),
+  language: Type.String(),
+});
+
+type Props = Static<typeof schema>;
+
+export type { Props };
+export { schema };

packages/widgets/src/code/view.tsx

@@ -0,0 +1,33 @@
+import { useName } from '@refocus/sdk';
+import { Props } from './schema';
+import { useEffect } from 'react';
+import { CodeEditor, View } from '@refocus/ui';
+import { styled } from 'styled-components';
+
+const FullHeight = styled(View)`
+  height: 100%;
+`;
+
+const StyledCodeEditor = styled(CodeEditor)`
+  height: 100%;
+`;
+const WidgetView: React.FC<Props> = ({ code, language, name }) => {
+  const [, setName] = useName();
+
+  useEffect(() => {
+    setName(name);
+  }, [name, setName]);
+
+  return (
+    <FullHeight $fc>
+      <StyledCodeEditor
+        readOnly
+        language={language}
+        value={code}
+        setValue={() => {}}
+      />
+    </FullHeight>
+  );
+};
+
+export { WidgetView as View };

packages/widgets/src/index.ts

@@ -3,12 +3,14 @@ import { github } from './github';
 import { linear } from './linear';
 import { slack } from './slack';
 import markdown from './markdown';
+import code from './code';
 
 const widgets = [
   ...linear,
   ...github,
   ...slack,
   markdown,
+  code,
 ] satisfies Widget<any>[];
 
 export { widgets };

packages/widgets/src/slack/block/render.tsx

@@ -25,7 +25,7 @@ const renderElement = (item: Renderable) => {
         </a>
       );
     case 'user':
-      return <User id={item.user_id} />;
+      return <User key={item.user_id} id={item.user_id} />;
     case 'emoji':
       return unicodeToEmoji(item.unicode);
     case 'rich_text_list':

packages/widgets/src/slack/conversation/message/view.tsx

@@ -5,7 +5,6 @@ import { render } from '../../block/render';
 import { useMemo } from 'react';
 import { WidgetProvider, WidgetView } from '@refocus/sdk';
 import { styled } from 'styled-components';
-import { User } from '../../block/elements/user';
 import { UserAvatar } from '../../block/elements/user-avatar';
 
 type Message = Exclude<
@@ -57,7 +56,7 @@ const Message: React.FC<Message> = ({
                         {reaction.name}
                         <View $fr>
                           {reaction.users?.map((user) => (
-                            <UserAvatar id={user} />
+                            <UserAvatar key={user} id={user} />
                           ))}
                         </View>
                       </Typography>

packages/widgets/src/slack/conversation/view.tsx

@@ -9,7 +9,7 @@ import styled from 'styled-components';
 import { Props } from './schema';
 import { ConversationsHistoryResponse } from '@slack/web-api';
 import { useState } from 'react';
-import { Chat, Slack, Typography, View } from '@refocus/ui';
+import { Chat, Loader, Slack, Typography, View } from '@refocus/ui';
 import { User } from '../block/elements/user';
 import { Message } from './message/view';
 
@@ -42,21 +42,23 @@ const WidgetView = withSlack<Props>(({ conversationId, ts }) => {
   const [, setName] = useName();
   const addNotification = useAddWidgetNotification();
   const [message, setMessage] = useState('');
-  const { fetch, data } = useSlackQuery(async (client, props: Props) => {
-    if (props.ts) {
-      const response = await client.send('conversations.replies', {
-        channel: props.conversationId,
-        ts: props.ts,
-      });
-      return response.messages! as MessageType[];
-    } else {
-      const response = await client.send('conversations.history', {
-        channel: props.conversationId,
-        limit: 5,
-      });
-      return response.messages! as MessageType[];
-    }
-  });
+  const { fetch, data, loading } = useSlackQuery(
+    async (client, props: Props) => {
+      if (props.ts) {
+        const response = await client.send('conversations.replies', {
+          channel: props.conversationId,
+          ts: props.ts,
+        });
+        return response.messages!.reverse() as MessageType[];
+      } else {
+        const response = await client.send('conversations.history', {
+          channel: props.conversationId,
+          limit: 5,
+        });
+        return response.messages! as MessageType[];
+      }
+    },
+  );
   const info = useSlackQuery(async (client, props: Props) => {
     const response = await client.send('conversations.info', {
       channel: props.conversationId,
@@ -65,16 +67,7 @@ const WidgetView = withSlack<Props>(({ conversationId, ts }) => {
     return response.channel!;
   });
 
-  const { fetch: post } = useSlackQuery(
-    async (client, props: PostMessageOptions) => {
-      client.send('chat.postMessage', {
-        text: props.message,
-        channel: conversationId,
-      });
-    },
-  );
-
-  useAutoUpdate(
+  const update = useAutoUpdate(
     {
       action: async () => {
         await info.fetch({ conversationId, ts });
@@ -103,10 +96,22 @@ const WidgetView = withSlack<Props>(({ conversationId, ts }) => {
     [conversationId, ts],
   );
 
+  const { fetch: post } = useSlackQuery(
+    async (client, props: PostMessageOptions) => {
+      await client.send('chat.postMessage', {
+        text: props.message,
+        channel: conversationId,
+      });
+      setMessage('');
+      await update();
+    },
+  );
+
   return (
     <Wrapper $p="sm" $fc $gap="sm">
+      {loading && <Loader />}
       <MessageList $gap="md" $fc>
-        {data?.map((message) => {
+        {data?.map((message, index) => {
           if ('subtype' in message && message.subtype === 'channel_join') {
             return (
               <Typography key={message.ts}>
@@ -116,7 +121,7 @@ const WidgetView = withSlack<Props>(({ conversationId, ts }) => {
           }
           return (
             <Message
-              key={message.ts}
+              key={message.ts || index}
               {...message}
               conversationId={conversationId}
             />