v1.5

ramensoftware · Jul 27, 2024 · 291cf84 · 291cf84
1 parent 7a483b4
commit 291cf84
Show file tree

Hide file tree

Showing 87 changed files with 13,916 additions and 11,533 deletions.
diff --git a/src/vscode-windhawk-ui/.gitignore b/src/vscode-windhawk-ui/.gitignore
@@ -37,3 +37,6 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+.nx/cache
+.nx/workspace-data
diff --git a/src/vscode-windhawk-ui/apps/vscode-windhawk-ui/src/app/components/InputWithContextMenu.tsx b/src/vscode-windhawk-ui/apps/vscode-windhawk-ui/src/app/components/InputWithContextMenu.tsx
@@ -1,5 +1,6 @@
 import {
   Dropdown,
+  DropdownProps,
   Input,
   InputNumber,
   InputNumberProps,
@@ -126,7 +127,7 @@ function TextAreaWithContextMenu({ children, ...rest }: TextAreaProps) {
   );
 }
 
-function SelectWithContextMenu({ children, ...rest }: SelectProps) {
+function SelectModal({ children, ...rest }: SelectProps) {
   return (
     <Select
       popupClassName="windhawk-popup-content"
@@ -141,7 +142,7 @@ function SelectWithContextMenu({ children, ...rest }: SelectProps) {
   );
 }
 
-function PopconfirmWithContextMenu({ children, ...rest }: PopconfirmProps) {
+function PopconfirmModal({ children, ...rest }: PopconfirmProps) {
   return (
     <Popconfirm
       overlayClassName="windhawk-popup-content"
@@ -156,10 +157,31 @@ function PopconfirmWithContextMenu({ children, ...rest }: PopconfirmProps) {
   );
 }
 
-export default {
-  Input: InputWithContextMenu,
-  InputNumber: InputNumberWithContextMenu,
-  TextArea: TextAreaWithContextMenu,
-  Select: SelectWithContextMenu,
-  Popconfirm: PopconfirmWithContextMenu,
+function DropdownModal({ children, ...rest }: DropdownProps) {
+  return (
+    <Dropdown
+      {...rest}
+      onOpenChange={(open) => {
+        onOpenChange(open);
+        rest.onOpenChange?.(open);
+      }}
+      overlayClassName="windhawk-popup-content-no-select"
+    >
+      {children}
+    </Dropdown>
+  );
+}
+
+function dropdownModalDismissed() {
+  document.body.classList.remove('windhawk-no-pointer-events');
+}
+
+export {
+  InputWithContextMenu,
+  InputNumberWithContextMenu,
+  TextAreaWithContextMenu,
+  SelectModal,
+  PopconfirmModal,
+  DropdownModal,
+  dropdownModalDismissed,
 };
diff --git a/src/vscode-windhawk-ui/apps/vscode-windhawk-ui/src/app/components/ReactMarkdownCustom.tsx b/src/vscode-windhawk-ui/apps/vscode-windhawk-ui/src/app/components/ReactMarkdownCustom.tsx
@@ -0,0 +1,62 @@
+import ReactMarkdown from 'react-markdown';
+import rehypeSlug from 'rehype-slug';
+import remarkGfm from 'remark-gfm';
+import styled from 'styled-components';
+
+const ReactMarkdownWithStyle = styled(ReactMarkdown)`
+  // Word-wrap long lines.
+  overflow-wrap: break-word;
+
+  // https://github.com/micromark/micromark-extension-gfm-table#css
+  table {
+    border-spacing: 0;
+    border-collapse: collapse;
+    display: block;
+    margin-top: 0;
+    margin-bottom: 16px;
+    width: max-content;
+    max-width: 100%;
+    overflow: auto;
+  }
+
+  tr {
+    background-color: var(--color-canvas-default);
+    border-top: 1px solid var(--color-border-muted);
+  }
+
+  tr:nth-child(2n) {
+    background-color: var(--color-canvas-subtle);
+  }
+
+  td,
+  th {
+    padding: 6px 13px;
+    border: 1px solid var(--color-border-default);
+  }
+
+  th {
+    font-weight: 600;
+  }
+
+  table img {
+    background-color: transparent;
+  }
+`;
+
+interface Props {
+  markdown: string;
+}
+
+function ReactMarkdownCustom({ markdown }: Props) {
+  return (
+    <ReactMarkdownWithStyle
+      children={markdown}
+      rehypePlugins={[
+        rehypeSlug,
+        remarkGfm,
+      ]}
+    />
+  );
+}
+
+export default ReactMarkdownCustom;
diff --git a/src/vscode-windhawk-ui/apps/vscode-windhawk-ui/src/app/panel/CreateNewModButton.tsx b/src/vscode-windhawk-ui/apps/vscode-windhawk-ui/src/app/panel/CreateNewModButton.tsx
@@ -18,7 +18,7 @@ const ButtonContainer = styled.div`
 
 const CreateButton = styled(Button)`
   position: absolute;
-  right: 20px;
+  right: 32px;
   bottom: 20px;
   background-color: var(--app-background-color) !important;
   box-shadow: 0 3px 6px rgb(100 100 100 / 16%), 0 1px 2px rgb(100 100 100 / 23%);

diff --git a/src/vscode-windhawk-ui/apps/vscode-windhawk-ui/src/app/panel/DevModeAction.tsx b/src/vscode-windhawk-ui/apps/vscode-windhawk-ui/src/app/panel/DevModeAction.tsx
@@ -4,7 +4,7 @@ import React, { useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import { AppUISettingsContext } from '../appUISettings';
-import InputWithContextMenu from '../components/InputWithContextMenu';
+import { PopconfirmModal } from '../components/InputWithContextMenu';
 import { useUpdateAppSettings } from '../webviewIPC';
 
 const PopconfirmTitleContent = styled.div`
@@ -36,7 +36,7 @@ function DevModeAction(props: React.PropsWithChildren<Props>) {
   }
 
   return (
-    <InputWithContextMenu.Popconfirm
+    <PopconfirmModal
       placement={props.popconfirmPlacement}
       disabled={devModeUsedAtLeastOnce || props.disabled}
       title={
@@ -77,7 +77,7 @@ function DevModeAction(props: React.PropsWithChildren<Props>) {
       {props.renderButton(
         !devModeUsedAtLeastOnce ? undefined : () => props.onClick()
       )}
-    </InputWithContextMenu.Popconfirm>
+    </PopconfirmModal>
   );
 }
 

diff --git a/src/vscode-windhawk-ui/apps/vscode-windhawk-ui/src/app/panel/ModCard.tsx b/src/vscode-windhawk-ui/apps/vscode-windhawk-ui/src/app/panel/ModCard.tsx
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Badge, Button, Card, Divider, Rate, Switch, Tooltip } from 'antd';
 import { useTranslation } from 'react-i18next';
 import styled, { css } from 'styled-components';
-import InputWithContextMenu from '../components/InputWithContextMenu';
+import { PopconfirmModal } from '../components/InputWithContextMenu';
 import localModIcon from './assets/local-mod-icon.svg';
 
 const ModCardWrapper = styled.div`
@@ -137,7 +137,7 @@ function ModCard(props: Props) {
           <ModCardActionsContainer>
             {props.buttons.map((button, i) =>
               button.confirmText ? (
-                <InputWithContextMenu.Popconfirm
+                <PopconfirmModal
                   key={i}
                   placement="bottom"
                   title={button.confirmText}
@@ -149,7 +149,7 @@ function ModCard(props: Props) {
                   <Button type="default" ghost>
                     {button.text}
                   </Button>
-                </InputWithContextMenu.Popconfirm>
+                </PopconfirmModal>
               ) : (
                 <Button key={i} type="default" ghost onClick={button.onClick}>
                   {button.text}

diff --git a/src/vscode-windhawk-ui/apps/vscode-windhawk-ui/src/app/panel/ModDetails.tsx b/src/vscode-windhawk-ui/apps/vscode-windhawk-ui/src/app/panel/ModDetails.tsx
@@ -14,6 +14,7 @@ import ModDetailsReadme from './ModDetailsReadme';
 import ModDetailsSettings from './ModDetailsSettings';
 import ModDetailsSource from './ModDetailsSource';
 import ModDetailsSourceDiff from './ModDetailsSourceDiff';
+import { mockInstalledModSourceData } from './mockData';
 
 const ModDetailsContainer = styled.div`
   flex: 1;
@@ -107,7 +108,7 @@ function ModDetails(props: Props) {
   );
 
   useEffect(() => {
-    setInstalledModSourceData(null);
+    setInstalledModSourceData(mockInstalledModSourceData);
     if (installedModDetails?.metadata) {
       getModSourceData({ modId });
     }
@@ -271,8 +272,8 @@ function ModDetails(props: Props) {
                     {!repositoryModDetails && !repositoryModSourceData
                       ? ': ' + t('modDetails.header.loading')
                       : !repositoryModDetails && !repositoryModSource
-                      ? ': ' + t('modDetails.header.loadingFailed')
-                      : repositoryModMetadata.version &&
+                        ? ': ' + t('modDetails.header.loadingFailed')
+                        : repositoryModMetadata.version &&
                         `: ${repositoryModMetadata.version}`}
                   </Radio.Button>
                 </ModVersionRadioGroup>
@@ -294,23 +295,23 @@ function ModDetails(props: Props) {
               installMod:
                 props.installMod && repositoryModSource
                   ? () =>
-                      repositoryModSource &&
-                      props.installMod?.(repositoryModSource)
+                    repositoryModSource &&
+                    props.installMod?.(repositoryModSource)
                   : undefined,
               updateMod:
                 props.updateMod && repositoryModSource
                   ? () =>
-                      repositoryModSource &&
-                      props.updateMod?.(
-                        repositoryModSource,
-                        modStatus === 'disabled'
-                      )
+                    repositoryModSource &&
+                    props.updateMod?.(
+                      repositoryModSource,
+                      modStatus === 'disabled'
+                    )
                   : undefined,
               forkModFromSource:
                 props.forkModFromSource && repositoryModSource
                   ? () =>
-                      repositoryModSource &&
-                      props.forkModFromSource?.(repositoryModSource)
+                    repositoryModSource &&
+                    props.forkModFromSource?.(repositoryModSource)
                   : undefined,
               compileMod: props.compileMod,
               enableMod: props.enableMod,
@@ -326,15 +327,15 @@ function ModDetails(props: Props) {
         onTabChange={(key) => setActiveTab(key)}
       >
         {!modSourceData ||
-        (availableActiveTab === 'changes' && !repositoryModSourceData) ? (
+          (availableActiveTab === 'changes' && !repositoryModSourceData) ? (
           modDetailsToShow === 'repository' ||
-          availableActiveTab === 'changes' ? (
+            availableActiveTab === 'changes' ? (
             <ProgressSpin size="large" tip={t('general.loading')} />
           ) : (
             ''
           )
         ) : (modDetailsToShow === 'repository' ||
-            availableActiveTab === 'changes') &&
+          availableActiveTab === 'changes') &&
           !repositoryModSource ? (
           <Result
             status="error"

diff --git a/src/vscode-windhawk-ui/apps/vscode-windhawk-ui/src/app/panel/ModDetailsAdvanced.tsx b/src/vscode-windhawk-ui/apps/vscode-windhawk-ui/src/app/panel/ModDetailsAdvanced.tsx
@@ -2,7 +2,7 @@ import { Button, Dropdown, List, message, Select, Space, Switch } from 'antd';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
-import InputWithContextMenu from '../components/InputWithContextMenu';
+import { SelectModal, TextAreaWithContextMenu } from '../components/InputWithContextMenu';
 import {
   showAdvancedDebugLogOutput,
   useGetModConfig,
@@ -21,7 +21,7 @@ const SettingsListItemMeta = styled(List.Item.Meta)`
   }
 `;
 
-const SettingsSelect = styled(InputWithContextMenu.Select)`
+const SettingsSelect = styled(SelectModal)`
   width: 200px;
 `;
 
@@ -159,7 +159,7 @@ function ModDetailsAdvanced({ modId }: Props) {
             description={t('modDetails.advanced.modSettings.description')}
           />
           <SpaceWithWidth direction="vertical" size="middle">
-            <InputWithContextMenu.TextArea
+            <TextAreaWithContextMenu
               rows={4}
               value={modSettingsUI}
               onChange={(e) => {
@@ -224,7 +224,7 @@ function ModDetailsAdvanced({ modId }: Props) {
             )}
           />
           <SpaceWithWidth direction="vertical" size="middle">
-            <InputWithContextMenu.TextArea
+            <TextAreaWithContextMenu
               rows={4}
               value={customInclude}
               placeholder={
@@ -271,7 +271,7 @@ function ModDetailsAdvanced({ modId }: Props) {
             )}
           />
           <SpaceWithWidth direction="vertical" size="middle">
-            <InputWithContextMenu.TextArea
+            <TextAreaWithContextMenu
               rows={4}
               value={customExclude}
               placeholder={

diff --git a/src/vscode-windhawk-ui/apps/vscode-windhawk-ui/src/app/panel/ModDetailsChangelog.tsx b/src/vscode-windhawk-ui/apps/vscode-windhawk-ui/src/app/panel/ModDetailsChangelog.tsx
@@ -1,8 +1,7 @@
 import { Trans, useTranslation } from 'react-i18next';
-import ReactMarkdown from 'react-markdown';
-import rehypeSlug from 'rehype-slug';
 import styled from 'styled-components';
 import useSWR from 'swr';
+import ReactMarkdownCustom from '../components/ReactMarkdownCustom';
 import { fetchText } from '../swrHelpers';
 
 const ErrorMessage = styled.div`
@@ -39,7 +38,7 @@ function ModDetailsChangelog({ modId, loadingNode }: Props) {
     return loadingNode;
   }
 
-  return <ReactMarkdown children={data || ''} rehypePlugins={[rehypeSlug]} />;
+  return <ReactMarkdownCustom markdown={data || ''} />;
 }
 
 export default ModDetailsChangelog;