Merge branch 'feature/up' into develop

Author: oldj

src-tauri/Cargo.lock

@@ -3,5 +3,12 @@
   "identifier": "main-window",
   "description": "Capabilities for the main window: core defaults plus the dialog plugin for import/export file pickers.",
   "windows": ["main"],
-  "permissions": ["core:default", "core:window:allow-start-dragging", "dialog:default", "updater:default"]
+  "permissions": [
+    "core:default",
+    "core:window:allow-start-dragging",
+    "core:window:allow-minimize",
+    "core:window:allow-toggle-maximize",
+    "dialog:default",
+    "updater:default"
+  ]
 }

src-tauri/capabilities/main.json

@@ -26,6 +26,7 @@ pub struct AppConfig {
     pub left_panel_show: bool,
     pub left_panel_width: u32,
     pub right_panel_show: bool,
+    pub right_panel_width: u32,
     pub use_system_window_frame: bool,
 
     // preferences
@@ -63,6 +64,7 @@ impl Default for AppConfig {
             left_panel_show: true,
             left_panel_width: 270,
             right_panel_show: true,
+            right_panel_width: 240,
             use_system_window_frame: false,
 
             write_mode: "append".to_string(),

src-tauri/src/storage/config.rs

@@ -11,6 +11,7 @@ const configs = {
   left_panel_show: true,
   left_panel_width: 270,
   right_panel_show: true,
+  right_panel_width: 240,
   use_system_window_frame: false,
 
   // preferences

src/common/default_configs.ts

@@ -1,8 +1,4 @@
-@use '../../styles/common';
-
 .root {
-  // padding-bottom: 20px;
-
   a {
     color: var(--swh-primary-color);
 
@@ -20,21 +16,9 @@
 }
 
 .names {
-  @include common.swh-scroll-y;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 16px;
-  //justify-content: center;
   margin: 8px 0;
-  //max-width: 350px;
   max-height: 160px;
-  overflow-y: auto;
   border: 1px solid var(--swh-border-color-1);
   border-radius: 4px;
   padding: 8px;
-
-  // a {
-  //   margin: 0 0.5em;
-  //   display: inline-block;
-  // }
 }

src/renderer/components/About/AboutContent.module.scss

@@ -7,7 +7,7 @@ import logo from '@/assets/logo@512w.png'
 import version from '@/version.json'
 import acknowledgements from '@common/acknowledgements'
 import { homepageUrl, sourceUrl } from '@common/constants'
-import { Box, Center, Flex, Image, Stack } from '@mantine/core'
+import { Center, Flex, Image, ScrollArea, Stack } from '@mantine/core'
 import { default as Link } from '@renderer/components/BrowserLink'
 import useI18n from '@renderer/models/useI18n'
 import styles from './AboutContent.module.scss'
@@ -29,13 +29,15 @@ const AboutContent = () => {
       </Flex>
 
       <Center style={{ paddingTop: 32, fontWeight: 'bold' }}>{lang.acknowledgement}</Center>
-      <Box className={styles.names}>
-        {acknowledgements.map((o, idx) => (
-          <Link key={idx} href={o.link}>
-            {o.name}
-          </Link>
-        ))}
-      </Box>
+      <ScrollArea className={styles.names} scrollbars="y" type="hover">
+        <Flex wrap="wrap" gap="4px 16px">
+          {acknowledgements.map((o, idx) => (
+            <Link key={idx} href={o.link}>
+              {o.name}
+            </Link>
+          ))}
+        </Flex>
+      </ScrollArea>
     </Stack>
   )
 }

src/renderer/components/About/AboutContent.tsx

@@ -30,6 +30,24 @@
       // monospace rule which is injected after this stylesheet at runtime.
       .cm-scroller {
         font-family: common.$font-editor;
+
+        &::-webkit-scrollbar {
+          width: 8px;
+          height: 8px;
+        }
+        &::-webkit-scrollbar-track {
+          background: transparent;
+        }
+        &::-webkit-scrollbar-thumb {
+          background: var(--swh-scrollbar-thumb);
+          border-radius: 4px;
+        }
+        &::-webkit-scrollbar-thumb:hover {
+          background: var(--swh-scrollbar-thumb-hover, var(--swh-scrollbar-thumb));
+        }
+        &::-webkit-scrollbar-corner {
+          background: transparent;
+        }
       }
     }
 

src/renderer/components/Editor/HostsEditor.module.scss

@@ -1,3 +1,11 @@
+.item {
+  border-radius: 4px;
+
+  & + & {
+    margin-top: 2px;
+  }
+}
+
 .selected {
   background: var(--swh-tree-selected-bg);
   color: var(--swh-font-color-reverse);

src/renderer/components/History.module.scss

@@ -13,6 +13,7 @@ import {
   Group,
   Loader,
   NativeSelect,
+  ScrollArea,
   Text,
   Tooltip,
 } from '@mantine/core'
@@ -60,13 +61,15 @@ const HistoryList = (props: IHistoryProps): React.ReactElement => {
       >
         <HostsViewer content={selectedItem ? selectedItem.content : ''} />
       </Box>
-      <Box
+      <ScrollArea
         w={200}
         h="100%"
+        scrollbars="y"
+        type="hover"
         style={{
-          overflow: 'auto',
           border: '1px solid var(--swh-border-color-0)',
           borderRadius: 6,
+          padding: 4,
         }}
       >
         {list.map((item) => (
@@ -76,7 +79,7 @@ const HistoryList = (props: IHistoryProps): React.ReactElement => {
             px="12px"
             py="8px"
             style={{ userSelect: 'none' }}
-            className={clsx(item.id === selectedItem?.id && styles.selected)}
+            className={clsx(styles.item, item.id === selectedItem?.id && styles.selected)}
           >
             <Group gap="8px" wrap="nowrap" align="flex-start">
               <Box>
@@ -99,7 +102,7 @@ const HistoryList = (props: IHistoryProps): React.ReactElement => {
             </Group>
           </Box>
         ))}
-      </Box>
+      </ScrollArea>
     </Flex>
   )
 }
@@ -218,11 +221,7 @@ const History = () => {
         {isLoading ? (
           <Loading />
         ) : (
-          <HistoryList
-            list={list}
-            selectedItem={selectedItem}
-            setSelectedItem={setSelectedItem}
-          />
+          <HistoryList list={list} selectedItem={selectedItem} setSelectedItem={setSelectedItem} />
         )}
       </Box>
     </SideDrawer>

src/renderer/components/History.tsx

@@ -1,20 +1,84 @@
-@use "../styles/common";
+@use '../styles/common';
 
 .root {
   @include common.code;
+  width: 100%;
   height: 100%;
 }
 
-.content {
+.editor {
   height: calc(100% - var(--swh-status-bar-height));
-  background: var(--swh-editor-read-only-bg);
-  font-size: var(--swh-editor-font-size);
-  line-height: var(--swh-editor-line-height);
-  color: var(--swh-editor-text-color);
-  overflow: auto;
-  padding: 8px 10px;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  :global {
+    .cm-editor {
+      height: 100%;
+
+      &.cm-focused {
+        outline: none;
+      }
+
+      .cm-scroller {
+        font-family: common.$font-editor;
+
+        &::-webkit-scrollbar {
+          width: 8px;
+          height: 8px;
+        }
+        &::-webkit-scrollbar-track {
+          background: transparent;
+        }
+        &::-webkit-scrollbar-thumb {
+          background: var(--swh-scrollbar-thumb);
+          border-radius: 4px;
+        }
+        &::-webkit-scrollbar-thumb:hover {
+          background: var(--swh-scrollbar-thumb-hover, var(--swh-scrollbar-thumb));
+        }
+        &::-webkit-scrollbar-corner {
+          background: transparent;
+        }
+      }
+    }
+
+    .hl-comment {
+      color: var(--swh-editor-comment);
+    }
+
+    .hl-ip {
+      color: var(--swh-editor-ip);
+      font-weight: bold;
+    }
+
+    .hl-error {
+      color: var(--swh-editor-error);
+    }
+  }
+
+  &.read_only {
+    :global {
+      .cm-editor,
+      .cm-gutters {
+        background: var(--swh-editor-read-only-bg);
+      }
+
+      .cm-content {
+        caret-color: transparent;
+        opacity: 0.8;
+      }
+    }
+  }
+}
+
+.mount {
+  height: 100%;
 }
 
-.line {
-  min-height: var(--swh-editor-line-height);
+:global(.theme-dark) {
+  .editor.read_only {
+    :global(.cm-content) {
+      caret-color: transparent;
+    }
+  }
 }