From 833010fa52c42b44ba3bb9cf6c721eac4a88d2f9 Mon Sep 17 00:00:00 2001 From: sadan <117494111+sadan4@users.noreply.github.com> Date: Wed, 5 Jun 2024 21:46:03 -0400 Subject: [PATCH 01/17] initial commit --- src/plugins/customFolderIcons/index.tsx | 170 ++++++++++++++++++++++++ src/plugins/customFolderIcons/style.css | 7 + src/utils/constants.ts | 4 + 3 files changed, 181 insertions(+) create mode 100644 src/plugins/customFolderIcons/index.tsx create mode 100644 src/plugins/customFolderIcons/style.css diff --git a/src/plugins/customFolderIcons/index.tsx b/src/plugins/customFolderIcons/index.tsx new file mode 100644 index 000000000..f2d51501a --- /dev/null +++ b/src/plugins/customFolderIcons/index.tsx @@ -0,0 +1,170 @@ +/* + * Vencord, a Discord client mod + * Copyright (c) 2024 Vendicated and contributors + * SPDX-License-Identifier: GPL-3.0-or-later + */ + +import "./style.css"; + +import { DataStore } from "@api/index"; +import { Devs } from "@utils/constants"; +import { closeModal, ModalContent, ModalHeader, ModalRoot, openModalLazy } from "@utils/modal"; +import definePlugin from "@utils/types"; +import { Button, Menu, TextInput } from "@webpack/common"; +const DATA_STORE_NAME = "CFI_DATA"; +enum ICON_TYPE { + PNG, + SVG +} +interface folderIcon{ + type: ICON_TYPE, + url: string +} +interface config { + [key: string]: folderIcon +} +let d: config; +export default definePlugin({ + start: async ()=>{ + d = await DataStore.get(DATA_STORE_NAME) || {} as config; + }, + name: "_customFolderIcons", + description: "customize folder icons with any png", + authors: [ + Devs.sadan + ], + patches: [ + { + find: ".expandedFolderIconWrapper", + replacement: { + match: /(return.{0,80}expandedFolderIconWrapper.*,)\(0,..jsxs\)\(.*]}\)/, + replace: "$1$self.test(e)" + } + } + ], + contextMenus: { + "guild-context": (c, a) => { + if(!("folderId" in a)) return; + c.push(makeContextItem(a.folderId)); + } + }, + commands: [ + { + name: "test", + description: "test command for some wack shit", + execute: async () => { + console.log("asd"); + } + } + ], + test(e){ + console.log(e); + if(d && e.folderNode.id in d){ + switch(d[e.folderNode.id].type){ + case ICON_TYPE.PNG: + return ( + + ); + case ICON_TYPE.SVG: + return null; + } + } + // TODO: when using the default set the color properly + return( +
+ +
+ ); + } +}); +const setFolderUrl = async (id: string, url: string) => { + console.log(id, url); + DataStore.get(DATA_STORE_NAME).then(v => { + if(v){ + v[id] = { + type: ICON_TYPE.PNG, + url: url + }; + DataStore.set(DATA_STORE_NAME, v).then(() => { d = v; }).catch(e => { + handleUpdateError(e); + }); + }else{ + v = {}; + v[id] = { + type: ICON_TYPE.PNG, + url: url + }; + DataStore.set(DATA_STORE_NAME, v).then(() => { d = v; }).catch(e => { + handleUpdateError(e); + }); + } + } + ) + .catch(e => { + handleUpdateError(e); + }); +}; +function ImageModal(a: { folderId: string }){ + let v = ""; + return( + <> +
+ { + v = val; + }} + placeholder="https://example.com/image.png" + > + + + + ); +} +function makeContextItem(id: string) { + return ( + { + console.log("menu clicked"); + openModalLazy(async () => { + return props => ( + + +
+ Set a New Icon. +
+ + + + + + ); + }, + { + modalKey: "custom-folder-icon" + }); + }}/> + ); +} +function handleUpdateError(e: any) { + throw e; +} diff --git a/src/plugins/customFolderIcons/style.css b/src/plugins/customFolderIcons/style.css new file mode 100644 index 000000000..26400f314 --- /dev/null +++ b/src/plugins/customFolderIcons/style.css @@ -0,0 +1,7 @@ +.customFolderDefaultIcon{ + display: flex; + justify-content: center; + align-items: center; + width: var(--custom-folder-item-guild-icon-size); + height: var(--custom-folder-item-guild-icon-size); +} diff --git a/src/utils/constants.ts b/src/utils/constants.ts index 4e3422526..dcb19979a 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -518,6 +518,10 @@ export const Devs = /* #__PURE__*/ Object.freeze({ name: "verticalsync", id: 328165170536775680n }, + sadan: { + name: "sadan", + id: 521819891141967883n + }, } satisfies Record); // iife so #__PURE__ works correctly From 25b9898c09d357a2560f98f60e57b5722d9b2c85 Mon Sep 17 00:00:00 2001 From: sadan <117494111+sadan4@users.noreply.github.com> Date: Thu, 6 Jun 2024 21:58:13 -0400 Subject: [PATCH 02/17] fix *some* horrorcode --- src/plugins/customFolderIcons/index.tsx | 139 ++++++++++++------------ src/plugins/customFolderIcons/style.css | 7 -- 2 files changed, 69 insertions(+), 77 deletions(-) delete mode 100644 src/plugins/customFolderIcons/style.css diff --git a/src/plugins/customFolderIcons/index.tsx b/src/plugins/customFolderIcons/index.tsx index f2d51501a..aacf5d2fb 100644 --- a/src/plugins/customFolderIcons/index.tsx +++ b/src/plugins/customFolderIcons/index.tsx @@ -4,29 +4,26 @@ * SPDX-License-Identifier: GPL-3.0-or-later */ -import "./style.css"; - import { DataStore } from "@api/index"; import { Devs } from "@utils/constants"; import { closeModal, ModalContent, ModalHeader, ModalRoot, openModalLazy } from "@utils/modal"; import definePlugin from "@utils/types"; import { Button, Menu, TextInput } from "@webpack/common"; const DATA_STORE_NAME = "CFI_DATA"; -enum ICON_TYPE { - PNG, - SVG -} interface folderIcon{ - type: ICON_TYPE, - url: string + url: string, } -interface config { - [key: string]: folderIcon +interface folderMap { + [key: string]: folderIcon | undefined } -let d: config; +interface folderProp { + folderId: string; + folderColor: number; +} +let d: folderMap; export default definePlugin({ start: async ()=>{ - d = await DataStore.get(DATA_STORE_NAME) || {} as config; + d = await DataStore.get(DATA_STORE_NAME) || {} as folderMap; }, name: "_customFolderIcons", description: "customize folder icons with any png", @@ -37,15 +34,15 @@ export default definePlugin({ { find: ".expandedFolderIconWrapper", replacement: { - match: /(return.{0,80}expandedFolderIconWrapper.*,)\(0,..jsxs\)\(.*]}\)/, - replace: "$1$self.test(e)" + match: /(return.{0,80}expandedFolderIconWrapper.*,)(\(0,..jsxs\)\(.*]}\))/, + replace: "$1$self.shouldReplace(e)?$self.replace(e):$2" } } ], contextMenus: { - "guild-context": (c, a) => { + "guild-context": (c, a: folderProp) => { if(!("folderId" in a)) return; - c.push(makeContextItem(a.folderId)); + c.push(makeContextItem(a)); } }, commands: [ @@ -53,68 +50,52 @@ export default definePlugin({ name: "test", description: "test command for some wack shit", execute: async () => { - console.log("asd"); } } ], - test(e){ - console.log(e); - if(d && e.folderNode.id in d){ - switch(d[e.folderNode.id].type){ - case ICON_TYPE.PNG: - return ( - - ); - case ICON_TYPE.SVG: - return null; - } + shouldReplace(e: any){ + return d && e.folderNode.id in d && d[e.folderNode.id] && d[e.folderNode.id]?.url; + }, + replace(e: any){ + if(d && d[e.folderNode.id]){ + return ( + + ); } - // TODO: when using the default set the color properly - return( -
- -
- ); } }); -const setFolderUrl = async (id: string, url: string) => { - console.log(id, url); - DataStore.get(DATA_STORE_NAME).then(v => { - if(v){ - v[id] = { - type: ICON_TYPE.PNG, - url: url - }; - DataStore.set(DATA_STORE_NAME, v).then(() => { d = v; }).catch(e => { - handleUpdateError(e); - }); - }else{ - v = {}; - v[id] = { - type: ICON_TYPE.PNG, - url: url - }; - DataStore.set(DATA_STORE_NAME, v).then(() => { d = v; }).catch(e => { - handleUpdateError(e); - }); - } +/** + * @param i RGB value + * @param a alpha bewteen zero and 1 + */ +const int2rgba = (i: number, a: number = 1)=>{ + const b = i & 0xFF, + g = (i & 0xFF00) >>> 8, + r = (i & 0xFF0000) >>> 16; + return `rgba(${[r,g,b].join(",")},${a})`; +}; +const setFolderUrl = async (a: folderProp, url: string) => { + DataStore.get(DATA_STORE_NAME).then(v => { + v = v ?? {} as folderMap; + v[a.folderId] = { + // type: url.endsWith("svg") ? ICON_TYPE.SVG:ICON_TYPE.PNG, + url: url, + }; + DataStore.set(DATA_STORE_NAME, v).then(() => { d = v; }).catch(e => { + handleUpdateError(e); + }); } ) .catch(e => { handleUpdateError(e); }); }; -function ImageModal(a: { folderId: string }){ + +function ImageModal(folderData: folderProp){ let v = ""; return( <> @@ -126,23 +107,34 @@ function ImageModal(a: { folderId: string }){ > +
+ +
); } -function makeContextItem(id: string) { +function makeContextItem(a: folderProp) { return ( { - console.log("menu clicked"); openModalLazy(async () => { return props => ( @@ -154,8 +146,15 @@ function makeContextItem(id: string) { - + +
+ You might have to hover the folder after setting in order for it to refresh. +
); }, diff --git a/src/plugins/customFolderIcons/style.css b/src/plugins/customFolderIcons/style.css deleted file mode 100644 index 26400f314..000000000 --- a/src/plugins/customFolderIcons/style.css +++ /dev/null @@ -1,7 +0,0 @@ -.customFolderDefaultIcon{ - display: flex; - justify-content: center; - align-items: center; - width: var(--custom-folder-item-guild-icon-size); - height: var(--custom-folder-item-guild-icon-size); -} From ffaca84aa53cefd84b7f33f8afed9fcf562dc9c8 Mon Sep 17 00:00:00 2001 From: sadan <117494111+sadan4@users.noreply.github.com> Date: Thu, 6 Jun 2024 22:00:50 -0400 Subject: [PATCH 03/17] guh --- src/plugins/customFolderIcons/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/plugins/customFolderIcons/index.tsx b/src/plugins/customFolderIcons/index.tsx index aacf5d2fb..a162b0479 100644 --- a/src/plugins/customFolderIcons/index.tsx +++ b/src/plugins/customFolderIcons/index.tsx @@ -82,7 +82,6 @@ const setFolderUrl = async (a: folderProp, url: string) => { DataStore.get(DATA_STORE_NAME).then(v => { v = v ?? {} as folderMap; v[a.folderId] = { - // type: url.endsWith("svg") ? ICON_TYPE.SVG:ICON_TYPE.PNG, url: url, }; DataStore.set(DATA_STORE_NAME, v).then(() => { d = v; }).catch(e => { From 89c2cd21082f77c0c0c6a15778cc030142ab4bba Mon Sep 17 00:00:00 2001 From: sadan <117494111+sadan4@users.noreply.github.com> Date: Thu, 6 Jun 2024 22:04:22 -0400 Subject: [PATCH 04/17] fix error handling --- src/plugins/customFolderIcons/index.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/plugins/customFolderIcons/index.tsx b/src/plugins/customFolderIcons/index.tsx index a162b0479..63220df20 100644 --- a/src/plugins/customFolderIcons/index.tsx +++ b/src/plugins/customFolderIcons/index.tsx @@ -4,6 +4,7 @@ * SPDX-License-Identifier: GPL-3.0-or-later */ +import { showNotification } from "@api/Notifications"; import { DataStore } from "@api/index"; import { Devs } from "@utils/constants"; import { closeModal, ModalContent, ModalHeader, ModalRoot, openModalLazy } from "@utils/modal"; @@ -164,5 +165,9 @@ function makeContextItem(a: folderProp) { ); } function handleUpdateError(e: any) { - throw e; + showNotification({ + title: "CustomFolderIcons: Error", + body: "An error has occurred. Check the console for more info." + }); + console.error(e); } From 3bcbe7e386a40a744fdb86a0c1e4aab8d45de67a Mon Sep 17 00:00:00 2001 From: sadan <117494111+sadan4@users.noreply.github.com> Date: Thu, 6 Jun 2024 22:40:44 -0400 Subject: [PATCH 05/17] rename vars, minor changes --- src/plugins/customFolderIcons/index.tsx | 77 ++++++++++++------------- 1 file changed, 36 insertions(+), 41 deletions(-) diff --git a/src/plugins/customFolderIcons/index.tsx b/src/plugins/customFolderIcons/index.tsx index 63220df20..ef69ab601 100644 --- a/src/plugins/customFolderIcons/index.tsx +++ b/src/plugins/customFolderIcons/index.tsx @@ -4,8 +4,8 @@ * SPDX-License-Identifier: GPL-3.0-or-later */ -import { showNotification } from "@api/Notifications"; import { DataStore } from "@api/index"; +import { showNotification } from "@api/Notifications"; import { Devs } from "@utils/constants"; import { closeModal, ModalContent, ModalHeader, ModalRoot, openModalLazy } from "@utils/modal"; import definePlugin from "@utils/types"; @@ -14,20 +14,20 @@ const DATA_STORE_NAME = "CFI_DATA"; interface folderIcon{ url: string, } -interface folderMap { +interface folderStoredData { [key: string]: folderIcon | undefined } interface folderProp { folderId: string; folderColor: number; } -let d: folderMap; +let folderData: folderStoredData; export default definePlugin({ start: async ()=>{ - d = await DataStore.get(DATA_STORE_NAME) || {} as folderMap; + folderData = await DataStore.get(DATA_STORE_NAME) || {} as folderStoredData; }, - name: "_customFolderIcons", - description: "customize folder icons with any png", + name: "CustomFolderIcons", + description: "Customize folder icons with any png", authors: [ Devs.sadan ], @@ -36,33 +36,28 @@ export default definePlugin({ find: ".expandedFolderIconWrapper", replacement: { match: /(return.{0,80}expandedFolderIconWrapper.*,)(\(0,..jsxs\)\(.*]}\))/, - replace: "$1$self.shouldReplace(e)?$self.replace(e):$2" + replace: "$1$self.shouldReplace(arguments[0])?$self.replace(arguments[0]):$2" } } ], contextMenus: { - "guild-context": (c, a: folderProp) => { - if(!("folderId" in a)) return; - c.push(makeContextItem(a)); + "guild-context": (menuItems, props: folderProp) => { + if(!("folderId" in props)) return; + menuItems.push(makeContextItem(props)); } }, - commands: [ - { - name: "test", - description: "test command for some wack shit", - execute: async () => { - } - } - ], - shouldReplace(e: any){ - return d && e.folderNode.id in d && d[e.folderNode.id] && d[e.folderNode.id]?.url; + shouldReplace(props: any){ + return folderData + && props.folderNode.id in folderData + && folderData[props.folderNode.id] + && folderData[props.folderNode.id]?.url; }, - replace(e: any){ - if(d && d[e.folderNode.id]){ + replace(props: any){ + if(folderData && folderData[props.folderNode.id]){ return ( - ); @@ -70,22 +65,22 @@ export default definePlugin({ } }); /** - * @param i RGB value - * @param a alpha bewteen zero and 1 + * @param rgbVal RGB value + * @param alpha alpha bewteen zero and 1 */ -const int2rgba = (i: number, a: number = 1)=>{ - const b = i & 0xFF, - g = (i & 0xFF00) >>> 8, - r = (i & 0xFF0000) >>> 16; - return `rgba(${[r,g,b].join(",")},${a})`; +const int2rgba = (rgbVal: number, alpha: number = 1)=>{ + const b = rgbVal & 0xFF, + g = (rgbVal & 0xFF00) >>> 8, + r = (rgbVal & 0xFF0000) >>> 16; + return `rgba(${[r,g,b].join(",")},${alpha})`; }; -const setFolderUrl = async (a: folderProp, url: string) => { - DataStore.get(DATA_STORE_NAME).then(v => { - v = v ?? {} as folderMap; - v[a.folderId] = { +const setFolderUrl = async (props: folderProp, url: string) => { + DataStore.get(DATA_STORE_NAME).then(data => { + data = data ?? {} as folderStoredData; + data[props.folderId] = { url: url, }; - DataStore.set(DATA_STORE_NAME, v).then(() => { d = v; }).catch(e => { + DataStore.set(DATA_STORE_NAME, data).then(() => { folderData = data; }).catch(e => { handleUpdateError(e); }); } @@ -96,18 +91,18 @@ const setFolderUrl = async (a: folderProp, url: string) => { }; function ImageModal(folderData: folderProp){ - let v = ""; + let data = ""; return( <>
- { - v = val; + { + data = val; }} placeholder="https://example.com/image.png" >
+
+ +
+ + ); +} +export function RenderPreview({ folderProps, url, size }: { folderProps: folderProp; url: string; size: number; }) { + if (!url) return null; + return ( +
+ +
+ ); +} + +export function makeContextItem(a: folderProp) { + return ( + { + openModalLazy(async () => { + return props => ( + + +
+ Set a New Icon. +
+ + + + +
+ You might have to hover the folder after setting in order for it to refresh. +
+ + ); + }, + { + modalKey: "custom-folder-icon" + }); + }}/> + ); +} diff --git a/src/plugins/customFolderIcons/index.tsx b/src/plugins/customFolderIcons/index.tsx index 12c9e6bdf..f6e2772ae 100644 --- a/src/plugins/customFolderIcons/index.tsx +++ b/src/plugins/customFolderIcons/index.tsx @@ -4,31 +4,19 @@ * SPDX-License-Identifier: GPL-3.0-or-later */ -import { DataStore } from "@api/index"; import { showNotification } from "@api/Notifications"; import { Devs } from "@utils/constants"; -import { closeModal, ModalContent, ModalHeader, ModalRoot, openModalLazy } from "@utils/modal"; import definePlugin from "@utils/types"; -import { Button, Menu, Slider, TextInput, useState } from "@webpack/common"; -import settings from "./settings"; -const DATA_STORE_NAME = "CFI_DATA"; -interface folderIcon{ - url: string, - size: number, -} -interface folderStoredData { - [key: string]: folderIcon | undefined -} -interface folderProp { + +import { makeContextItem } from "./components"; +import settings, { folderIconsData } from "./settings"; +import { int2rgba } from "./util"; +export interface folderProp { folderId: string; folderColor: number; } -let folderData: folderStoredData; export default definePlugin({ settings, - start: async ()=>{ - folderData = await DataStore.get(DATA_STORE_NAME).catch(e => handleUpdateError(e)) || {} as folderStoredData; - }, name: "CustomFolderIcons", description: "Customize folder icons with any png", authors: [ @@ -49,15 +37,14 @@ export default definePlugin({ menuItems.push(makeContextItem(props)); } }, - shouldReplace(props: any){ - return folderData - && props.folderNode.id in folderData - && folderData[props.folderNode.id] - && folderData[props.folderNode.id]?.url; + shouldReplace(props: any): boolean{ + const folderSettings = (settings.store.folderIcons as folderIconsData); + return !!(folderSettings?.[props.folderNode.id]?.url); }, replace(props: any){ - if(folderData && folderData[props.folderNode.id]){ - const data = folderData[props.folderNode.id]; + const folderSettings = (settings.store.folderIcons as folderIconsData); + if(folderSettings && folderSettings[props.folderNode.id]){ + const data = folderSettings[props.folderNode.id]; return (
-
); } } }); -/** - * @param rgbVal RGB value - * @param alpha alpha bewteen zero and 1 - */ -function int2rgba(rgbVal: number, alpha: number = 1) { - const b = rgbVal & 0xFF, - g = (rgbVal & 0xFF00) >>> 8, - r = (rgbVal & 0xFF0000) >>> 16; - return `rgba(${[r, g, b].join(",")},${alpha})`; -} -async function setFolderUrl(props: folderProp, url: string, size: number) { - DataStore.get(DATA_STORE_NAME).then(data => { - data = data ?? {} as folderStoredData; - data[props.folderId] = { - url: url, - size: size - }; - DataStore.set(DATA_STORE_NAME, data).then(() => { folderData = data; }).catch(e => { - handleUpdateError(e); - }); - } - ) - .catch(e => { - handleUpdateError(e); - }); -} -function RenderPreview({ folderProps, url, size }: {folderProps: folderProp, url: string, size: number}){ - if (!url) return null; - return( -
- -
- ); -} -function ImageModal(folderProps: folderProp){ - const [data, setData]= useState(""); - const [size, setSize] = useState(100); - return( - <> - { - setData(val); - }} - placeholder="https://example.com/image.png" - > - - - {data && <> -
Change the size of the folder icon
- { - setSize(v); - }} - maxValue={200} - minValue={25} - markers={Array.apply(0, Array(176)).map((v, i) => i+25)} - stickToMarkers = {true} - keyboardStep={1} - renderMarker={() => null} - /> - } - -
- -
- - ); -} -function makeContextItem(a: folderProp) { - return ( - { - openModalLazy(async () => { - return props => ( - - -
- Set a New Icon. -
- - - - -
- You might have to hover the folder after setting in order for it to refresh. -
- - ); - }, - { - modalKey: "custom-folder-icon" - }); - }}/> - ); -} -function handleUpdateError(e: any) { +export function handleUpdateError(e: any) { showNotification({ title: "CustomFolderIcons: Error", body: "An error has occurred. Check the console for more info." diff --git a/src/plugins/customFolderIcons/settings.tsx b/src/plugins/customFolderIcons/settings.tsx index 00d041d9d..ab8fec38c 100644 --- a/src/plugins/customFolderIcons/settings.tsx +++ b/src/plugins/customFolderIcons/settings.tsx @@ -7,9 +7,16 @@ import { definePluginSettings } from "@api/Settings"; import { IPluginOptionComponentProps, OptionType } from "@utils/types"; +export interface folderIcon{ + url: string, + size: number, +} +export type folderIconsData = Record; + const settings = definePluginSettings({ folderIcons: { type: OptionType.COMPONENT, + hidden: true, description: "guh", component: props => <> >> 8, + r = (rgbVal & 0xFF0000) >>> 16; + return `rgba(${[r, g, b].join(",")},${alpha})`; +} From 3b969e55efaecf5f58b6ed5364afd0b05a8778d4 Mon Sep 17 00:00:00 2001 From: sadan <117494111+sadan4@users.noreply.github.com> Date: Sat, 29 Jun 2024 23:56:51 -0400 Subject: [PATCH 10/17] bunch of stuff - fix preview - fix settings - update headers - add readme --- src/plugins/customFolderIcons/README.md | 7 +++++ src/plugins/customFolderIcons/components.tsx | 30 +++++++++++--------- src/plugins/customFolderIcons/index.tsx | 9 +----- src/plugins/customFolderIcons/settings.tsx | 17 +++-------- src/plugins/customFolderIcons/util.tsx | 11 ++----- 5 files changed, 32 insertions(+), 42 deletions(-) create mode 100644 src/plugins/customFolderIcons/README.md diff --git a/src/plugins/customFolderIcons/README.md b/src/plugins/customFolderIcons/README.md new file mode 100644 index 000000000..e3d923943 --- /dev/null +++ b/src/plugins/customFolderIcons/README.md @@ -0,0 +1,7 @@ +# CustomFolderIcons + +Allows you to set custom images/svgs as folder icons + +Available as "Change Icon" in the folder context menu + +TODO: upload example images (in *pss#general) diff --git a/src/plugins/customFolderIcons/components.tsx b/src/plugins/customFolderIcons/components.tsx index e13807050..90f51546e 100644 --- a/src/plugins/customFolderIcons/components.tsx +++ b/src/plugins/customFolderIcons/components.tsx @@ -1,6 +1,6 @@ /* * Vencord, a Discord client mod - * Copyright (c) 2024 Vendicated and contributors + * Copyright (c) 2024 sadan * SPDX-License-Identifier: GPL-3.0-or-later */ @@ -9,17 +9,20 @@ import { Button, Menu, Slider, TextInput, useState } from "@webpack/common"; import { folderProp } from "."; import settings, { folderIconsData } from "./settings"; -import { int2rgba, setFolderUrl } from "./util"; +import { int2rgba, setFolderData } from "./util"; export function ImageModal(folderProps: folderProp) { - const [data, setData] = useState(""); + const [data, setData] = useState(((settings.store.folderIcons ?? {}) as folderIconsData)[folderProps.folderId]?.url ?? ""); const [size, setSize] = useState(100); return ( <> - { - setData(val); - }} - placeholder="https://example.com/image.png" + { + setData(val); + }} + placeholder="https://example.com/image.png" > @@ -34,13 +37,14 @@ export function ImageModal(folderProps: folderProp) { }} maxValue={200} minValue={25} + // [25, 200] markers={Array.apply(0, Array(176)).map((_, i) => i + 25)} stickToMarkers={true} keyboardStep={1} renderMarker={() => null} /> }