Merge branch 'dev'

auto-i18n.project.yaml

@@ -0,0 +1,11 @@
+code_files:
+- './src/**/*.ts'
+- './src/**/*.tsx'
+dict: {}
+export_dir: src/types
+i18n_dir: public/i18n
+i18n_pattern: \(\(`(.+?)`\)\)
+i18n_var_mid: filename
+i18n_var_prefix: i18n
+main_file: zh_CN.yaml
+strategy: diff

package.json

@@ -1,20 +1,17 @@
 {
   "name": "sy-bookmark-plus",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "type": "module",
   "description": "A more powerful bookmark",
   "repository": "",
   "homepage": "",
   "author": "frostime",
   "license": "GPL-3.0-only",
   "scripts": {
-    "make-link": "node  --no-warnings ./scripts/make_dev_link.js",
-    "make-link-win": "powershell.exe -NoProfile -ExecutionPolicy Bypass -File ./scripts/elevate.ps1 -scriptPath ./scripts/make_dev_link.js",
-    "update-version": "node --no-warnings ./scripts/update_version.js",
-    "dev": "vite build --watch",
-    "dev-srcmap": "vite build --watch --sourcemap=inline",
-    "build": "vite build",
-    "make-install": "vite build && node --no-warnings ./scripts/make_install.js"
+    "dev": "cross-env NODE_ENV=development VITE_SOURCEMAP=inline vite build --watch",
+    "build": "cross-env NODE_ENV=production vite build",
+    "build-srcmap": "cross-env NODE_ENV=production VITE_SOURCEMAP=inline vite build",
+    "make-install": "cross-env NODE_ENV=production vite build && node --no-warnings ./scripts/make_install.js"
   },
   "devDependencies": {
     "@types/node": "^20.3.0",
@@ -24,15 +21,16 @@
     "minimist": "^1.2.8",
     "rollup-plugin-livereload": "^2.0.5",
     "sass": "^1.72.0",
-    "siyuan": "0.9.9",
+    "siyuan": "1.0.3",
     "solid-js": "^1.8.17",
     "solid-styled-jsx": "^0.27.1",
     "ts-node": "^10.9.2",
     "typescript": "^5.4.2",
     "vite": "^5.2.13",
     "vite-plugin-solid": "^2.10.2",
     "vite-plugin-static-copy": "^1.0.5",
-    "vite-plugin-zip-pack": "^1.2.2"
+    "vite-plugin-zip-pack": "^1.2.2",
+    "cross-env": "^7.0.3"
   },
   "dependencies": {
     "solid-transition-group": "^0.2.3"

plugin.json

@@ -2,7 +2,7 @@
   "name": "sy-bookmark-plus",
   "author": "frostime",
   "url": "https://github.com/frostime/sy-bookmark-plus",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "minAppVersion": "3.0.12",
   "backends": [
     "all"

public/i18n/en_US.yaml

@@ -103,6 +103,9 @@ newgroup:
     omit: No Process
     fb2p: First child of container
     b2doc: Display as document block
+  icontitle: Group Icon
+  # icondesc: 可以手动选择分组的图标；如果不设置，插件会根据分组类型分配默认的图标。
+  icondesc: Select the icon for the group; if not set, the plugin will assign a default icon based on the group type.
 
 bookmarktype:
   normal: 'Normal Bookmark'
@@ -120,3 +123,7 @@ template:
     todo: Unsolved Task
   attr:
     dailynote: Daily Note
+selecticon:
+  title: Change Group Icon
+  h3: Please select an icon
+  reset: Reset

public/i18n/zh_CN.yaml

@@ -103,6 +103,8 @@ newgroup:
     omit: 无处理
     fb2p: 容器首个子块
     b2doc: 显示为文档块
+  icontitle: 分组图标
+  icondesc: 可以手动选择分组的图标；如果不设置，插件会根据分组类型分配默认的图标。
 bookmarktype:
   normal: '普通书签'
   dynamic: '动态书签'
@@ -119,3 +121,7 @@ template:
     todo: 未完成的任务
   attr:
     dailynote: Daily Note
+selecticon:
+  title: 更改组图标
+  h3: 请选择图标
+  reset: 重置

src/components/bookmark.tsx

@@ -20,27 +20,30 @@ const createNewGroup = (confirmCb: (data: any) => void) => {
     let container = document.createElement("div") as HTMLDivElement;
     container.style.display = 'contents';
 
-    const [group, setGroup] = createSignal({name: "", type: "normal"});
-    const [rule, setRule] = createSignal({type: "", input: ""});
+    const [group, setGroup] = createSignal({ name: "", type: "normal" });
+    const [rule, setRule] = createSignal({ type: "", input: "" });
+    const [icon, setIcon] = createSignal<IBookmarkGroup['icon'] | null>(null);
 
     render(() => NewGroup({
         setGroup: (args) => {
             let current = group();
-            let newval = {...current, ...args};
+            let newval = { ...current, ...args };
             setGroup(newval);
         },
         setRule: (args) => {
             let current = rule();
-            let newval = {...current, ...args};
+            let newval = { ...current, ...args };
             setRule(newval);
-        }
+        },
+        icon,
+        setIcon
     }), container);
     confirmDialog({
         title: i18n.bookmark.new,
         content: container,
-        width: '600px',
+        width: '800px',
         confirm: () => {
-            confirmCb({group: group(), rule: rule()});
+            confirmCb({ group: group(), rule: rule(), icon: icon() });
         }
     });
 }
@@ -60,14 +63,14 @@ const BookmarkComponent: Component<Props> = (props) => {
     });
 
     const groupAdd = () => {
-        createNewGroup((result: {group: any, rule: any}) => {
+        createNewGroup((result: { group: any, rule: any, icon?: IBookmarkGroup['icon'] }) => {
             console.log(result);
-            let { group, rule } = result;
+            let { group, rule, icon } = result;
             if (group.name === "") {
                 showMessage(i18n.msg.groupNameEmpty, 3000, 'error');
                 return;
             }
-            props.model.newGroup(group.name, group.type, rule);
+            props.model.newGroup(group.name, group.type, rule, icon);
         });
     };
 

src/components/group.tsx

@@ -1,5 +1,5 @@
-import { Component, createEffect, createMemo, createSignal, Match, useContext, Show } from "solid-js";
-import { For, Switch } from "solid-js";
+import { Component, createEffect, createMemo, createSignal, useContext, Show } from "solid-js";
+import { For } from "solid-js";
 import { Transition } from "solid-transition-group";
 
 import { Menu, Constants, confirm, showMessage } from "siyuan";
@@ -13,6 +13,56 @@ import Item from "./item";
 import { groups, setGroups, configs, itemInfo } from "../model";
 import { BookmarkContext, itemMoving, setItemMoving, groupDrop, setGroupDrop } from "./context";
 import { getActiveDoc } from "@/utils";
+import Icon from "./icon";
+import { parseEmoji } from "./icon";
+
+import { selectGroupIcon } from "./select-icon";
+
+const useGroupIcon = (props: Parameters<typeof Group>[0]) => {
+    const { model } = useContext(BookmarkContext);
+
+    const changeGroupIcon = () => {
+        selectGroupIcon({
+            onReset: () => {
+                model.setGroups(props.group.id, 'icon', null);
+                showMessage('Reset!');
+            },
+            onUpdate: (icon) => {
+                model.setGroups(props.group.id, 'icon', icon);
+                showMessage((icon.type === 'symbol' ? icon.value : parseEmoji(icon.value)));
+            }
+        });
+    }
+
+    const onClickIcon = (e: MouseEvent) => {
+        e.stopPropagation();
+        e.preventDefault();
+        changeGroupIcon();
+    }
+
+    const ShowIcon = (icon?: {
+        type: 'symbol' | 'emoji' | ''; value: string;
+    }) => {
+        if (!icon || icon.type === '') {
+            return <Icon symbol={(!props.group.type || props.group.type === 'normal') ? 'iconFolder' : 'iconSearch'} />
+        } else if (icon.type === 'symbol') {
+            return <Icon symbol={icon.value} />
+        } else if (icon.type === 'emoji') {
+            return <Icon emojiCode={icon.value} />
+        }
+    }
+
+    const IconView = () => (
+        <span class="group-icon__wrapper" style={{ display: 'contents' }} onClick={onClickIcon}>
+            {(() => ShowIcon(props.group.icon))()}
+        </span>
+    )
+
+    return {
+        IconView,
+        changeGroupIcon
+    }
+}
 
 
 interface Props {
@@ -24,6 +74,8 @@ interface Props {
 const Group: Component<Props> = (props) => {
     const { model, doAction } = useContext(BookmarkContext);
 
+    const { IconView, changeGroupIcon } = useGroupIcon(props);
+
     const isDynamicGroup = () => props.group.type === 'dynamic';
 
     const i18n_ = i18n.group;
@@ -190,6 +242,12 @@ const Group: Component<Props> = (props) => {
                 });
             },
         });
+        menu.addItem({
+            label: i18n.selecticon.title,
+            icon: "iconImage",
+            click: changeGroupIcon
+        });
+
         if (isDynamicGroup()) {
             let type: "textline" | "textarea" = 'textline';
             let height = null;
@@ -362,7 +420,7 @@ const Group: Component<Props> = (props) => {
             const info = meta.split(Constants.ZWSP);
             const nodeId = info[2];
             addItemByBlockId(nodeId);
-        }  else if (type.startsWith(Constants.SIYUAN_DROP_FILE)) {
+        } else if (type.startsWith(Constants.SIYUAN_DROP_FILE)) {
             const ele: HTMLElement = window.siyuan.dragElement;
             if (ele && ele.innerText) {
                 const blockid = ele.innerText;
@@ -420,7 +478,7 @@ const Group: Component<Props> = (props) => {
                         <use href="#iconRight"></use>
                     </svg>
                 </span>
-                <svg class="b3-list-item__graphic">
+                {/* <svg class="b3-list-item__graphic">
                     <Switch fallback={<use href="#iconFolder"></use>}>
                         <Match when={props.group.type === 'normal'}>
                             <use href="#iconFolder"></use>
@@ -429,7 +487,9 @@ const Group: Component<Props> = (props) => {
                             <use href="#iconSearch"></use>
                         </Match>
                     </Switch>
-                </svg>
+                </svg> */}
+                <IconView />
+
                 <span class="b3-list-item__text ariaLabel" data-position="parentE">
                     {props.group.name}
                 </span>

src/components/icon.tsx

@@ -1,4 +1,4 @@
-import { Component } from "solid-js";
+import { Component, JSX } from "solid-js";
 import { Dynamic } from "solid-js/web";
 
 export const parseEmoji = (code: string) => {
@@ -11,7 +11,7 @@ interface CommonProps {
     fontSize?: string;
     height?: string;
     width?: string;
-    style?: { [key: string]: string | number };
+    style?: JSX.CSSProperties;
 }
 
 interface SymbolProps extends CommonProps {
@@ -37,7 +37,7 @@ type IProps = SymbolProps | EmojiCodeProps | ImgProps;
 
 const Icon: Component<IProps> = (props) => {
 
-    let style = {
+    let style: JSX.CSSProperties = {
         "font-size": props?.fontSize ?? '14px',
         "height": props?.height,
         "width": props?.width,
@@ -48,7 +48,7 @@ const Icon: Component<IProps> = (props) => {
     }
 
     const Symbol = () => (
-        <svg style={style}>
+        <svg class="b3-list-item__graphic" style={style}>
             <use href={`#${props.symbol}`}></use>
         </svg>
     );

src/components/new-group.tsx

@@ -13,6 +13,7 @@ import { RuleTemplate } from "@/utils/const";
 import { createContext, useContext } from "solid-js";
 
 import { Caret } from "@/utils/const";
+import { selectGroupIcon } from "./select-icon";
 
 const NewGroupContext = createContext<{
     groupType: Accessor<TBookmarkGroupType>;
@@ -234,6 +235,8 @@ const RuleEditor = () => {
 interface IPrpos {
     setGroup: (arg: { name?: string, type?: TBookmarkGroupType }) => void;
     setRule: (arg: { type?: string, input?: string }) => void;
+    icon: Accessor<IBookmarkGroup['icon']>;
+    setIcon: (args: IBookmarkGroup['icon']) => void;
 }
 
 const NewGroup = (props: IPrpos) => {
@@ -249,6 +252,17 @@ const NewGroup = (props: IPrpos) => {
 
     const transitionDuration = 100;
 
+    const changeGroupIcon = () => {
+        selectGroupIcon({
+            onReset: () => {
+                props.setIcon(null);
+            },
+            onUpdate: (icon) => {
+                props.setIcon(icon);
+            }
+        });
+    }
+
     return (
         <div class="fn__flex fn__flex-1 fn__flex-column"
             onkeydown={(e) => {
@@ -293,6 +307,22 @@ const NewGroup = (props: IPrpos) => {
                         }}
                     />
                 </Form.Wrap>
+                <Form.Wrap
+                    title={i18n_.icontitle}
+                    description={i18n_.icondesc}
+                >
+                    <div style={{ display: 'flex', "align-items": 'center' }} onClick={changeGroupIcon}>
+                        {(() => {
+                            if (!props.icon()) {
+                                return  <Icon symbol={groupType() === 'normal' ? 'iconFolder' : 'iconSearch'} />
+                            } else if (props.icon()?.type === 'symbol') {
+                                return <Icon symbol={props.icon()?.value} />
+                            } else {
+                                return <Icon emojiCode={props.icon()?.value} />
+                            }
+                        })()}
+                    </div>
+                </Form.Wrap>
             </div>
             <Transition
                 onExit={(el, done) => {