├── .editorconfig
├── .eslintrc.js
├── .gitattributes
├── .github
    ├── FUNDING.yml
    └── workflows
    │   └── deploy.yml
├── .gitignore
├── LICENSE
├── README.md
├── dist
    ├── magane.plugin.js
    └── magane.vencord.js
├── package.json
├── rollup-bd.config.js
├── rollup-vencord.config.js
├── src
    ├── App.svelte
    ├── Button.svelte
    ├── bd-main.js
    ├── meta.txt
    ├── styles
    │   └── main.scss
    └── vencord-main.js
└── yarn.lock


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = tab
 6 | indent_size = 4
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | indent_style = space
13 | indent_size = 4
14 | insert_final_newline = true
15 | trim_trailing_whitespace = false
16 | 
17 | [*.json]
18 | indent_style = space
19 | indent_size = 2
20 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	'extends': 'aqua/svelte',
 3 | 	'env': {
 4 | 		browser: true,
 5 | 		node: true,
 6 | 		es2021: true
 7 | 	},
 8 | 	'rules': {
 9 | 		'comma-dangle': ['error', 'never'],
10 | 		'import/order': 'off',
11 | 		'semi': 'error'
12 | 	},
13 | 	'overrides': [
14 | 		{
15 | 			files: [
16 | 				'*.config.js'
17 | 			],
18 | 			env: {
19 | 				browser: false
20 | 			}
21 | 		}
22 | 	],
23 | 	'ignorePatterns': [
24 | 		'dist/',
25 | 		'dist-dev/'
26 | 	],
27 | 	'settings': {
28 | 		'svelte3/ignore-warnings': ({ code }) => code === 'a11y-click-events-have-key-events'
29 | 	}
30 | };
31 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | * text=auto eol=lf
2 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
 1 | # These are supported funding model platforms
 2 | 
 3 | github: pitu
 4 | patreon: pitu
 5 | open_collective: # Replace with a single Open Collective username
 6 | ko_fi: # Replace with a single Ko-fi username
 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
 9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | otechie: # Replace with a single Otechie username
12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
13 | 


--------------------------------------------------------------------------------
/.github/workflows/deploy.yml:
--------------------------------------------------------------------------------
 1 | # This is a basic workflow to help you get started with Actions
 2 | 
 3 | name: Release
 4 | 
 5 | # Controls when the action will run.
 6 | on:
 7 |   # Triggers the workflow on push or pull request events but only for the master branch
 8 |   push:
 9 |     branches: [ master ]
10 | 
11 |   # Allows you to run this workflow manually from the Actions tab
12 |   workflow_dispatch:
13 | 
14 | env:
15 |   NODE_VERSION: 18
16 | 
17 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel
18 | jobs:
19 |   # This workflow contains a single job called "build"
20 |   build:
21 |     # The type of runner that the job will run on
22 |     runs-on: ubuntu-latest
23 | 
24 |     # Steps represent a sequence of tasks that will be executed as part of the job
25 |     steps:
26 |       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
27 |       - name: Checkout repo
28 |         uses: actions/checkout@v4
29 | 
30 |       - name: Install Node v14
31 |         uses: actions/setup-node@v4
32 |         with:
33 |           node-version: ${{ env.NODE_VERSION }}
34 | 
35 |       - name: Cache node_modules
36 |         uses: actions/cache@v4
37 |         id: cache-nodemodules
38 |         with:
39 |           path: node_modules
40 |           key: ${{ runner.os }}-${{ env.NODE_VERSION }}-nodemodules-${{ hashFiles('**/yarn.lock') }}
41 | 
42 |       - name: Install dependencies
43 |         if: steps.cache-nodemodules.outputs.cache-hit != 'true'
44 |         run: yarn install --frozen-lockfile --non-interactive
45 | 
46 |       - name: Update browserslist/caniuse-lite
47 |         run: npx browserslist@latest --update-db
48 | 
49 |       - name: Build application (BetterDiscord plugin)
50 |         run: yarn build-bd
51 | 
52 |       - name: Build application (Vencord plugin)
53 |         run: yarn build-vc
54 | 
55 |       - uses: EndBug/add-and-commit@v6
56 |         with:
57 |           branch: master
58 |           message: 'dist: deploy new dist file'
59 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | dist-dev/
3 | .DS_Store
4 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Pitu
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 | 	<img src="https://chibisafe.moe/88r6gPQS.png" />
 3 | </div>
 4 | 
 5 | [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://raw.githubusercontent.com/kanadeko/Kuro/master/LICENSE)
 6 | [![Chat / Support](https://img.shields.io/badge/Chat%20%2F%20Support-discord-7289DA.svg?style=flat-square)](https://discord.gg/5g6vgwn)
 7 | [![Support me](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Fshieldsio-patreon.herokuapp.com%2Fpitu&style=flat-square)](https://www.patreon.com/pitu)
 8 | [![Support me](https://img.shields.io/badge/Support-Buy%20me%20a%20coffee-yellow.svg?style=flat-square)](https://www.buymeacoffee.com/kana)
 9 | 
10 | ### What does this do?
11 | 
12 | You know how LINE and Telegram have this beautiful sticker system where you can send different reactions with just one click? This is a new approach at doing exactly that but on Discord!
13 | 
14 | [It looks like this!](https://chibisafe.moe/owdxQF9m.mp4)
15 | 
16 | ### How even?
17 | 
18 | By injecting the script into Discord it will automatically pull a curated list of sticker packs from [chibisafe](https://chibisafe.moe) and add them to your Discord client. After that a heart button will appear in your message bar where you'll be able to see all the stickers!
19 | 
20 | 
21 | ### Can I make this permanent?
22 | 
23 | You can!
24 | 
25 | Currently the best way to get this up and running is by using [BetterDiscord](https://github.com/rauenzi/BetterDiscordApp/releases), but we also have experimental support for [Vencord](https://vencord.dev/).
26 | 
27 | #### BetterDiscord
28 | 
29 | - Grab Magane's BetterDiscord plugin file from [https://magane.moe/api/dist/betterdiscord](https://magane.moe/api/dist/betterdiscord).
30 | - Place the plugin file into your BetterDiscord's **plugins** directory.
31 | - Activate Magane from Discord's **User Settings > BetterDiscord > Plugins**.
32 | 
33 | #### Vencord
34 | 
35 | > This is for the more advanced users.  
36 | > Be advised that Magane's **update checker is not available** on Vencord.  
37 | > You must manually consult this repo to check for updates! Or just check back whenever it breaks due to Discord's updates...
38 | 
39 | 1. Grab Magane's Vencord plugin file from [https://magane.moe/api/dist/vencord](https://magane.moe/api/dist/vencord).
40 | 2. Install Vencord from source. Follow its installation guide at [https://docs.vencord.dev/installing/](https://docs.vencord.dev/installing/).
41 | 3. In Vencord git directory, navigate to `src`, then create `userplugins` directory (e.g. `/path/to/vencord/src/userplugins`).
42 | 4. Place Magane's plugin file into it.
43 | 5. Rebuild Vencord (`pnpm build`).
44 | 6. (optional) If you had not done it before, you must inject Vencord into your Discord installation (`pnpm inject`).  
45 | For those that use **Vesktop**, please see below.
46 | 7. Restart your Discord/Vesktop.
47 | 8. Activate Magane from Discord's **User Settings > Vencord > Plugins**.
48 | 
49 | #### Vesktop
50 | 
51 | Follow the same steps as above, until step 6.
52 | 
53 | Then in your Vesktop, navigate to Discord's **User Settings > Vencord > Vesktop Settings > Open Developer Settings > Vencord Location**. Change its directory to the **dist** sub-directory of your local copy of Vencord git [(preview)](https://chibisafe.moe/pCX4Qa82.png). Then restart Vesktop.
54 | 
55 | You should now be able to activate Magane from Vesktop's **Plugins** settings.
56 | 
57 | ### So how exactly do I use it after adding the script?
58 | 
59 | It's very easy.
60 | After opening the sticker popup click on the little tool icon and you'll see a list of available sticker packs. Clicking on a sticker pack will subscribe you to it, making every sticker on that pack available on the main window. You can also right click any sticker in the list and add them to your favorites for easy access! To remove one, right click on it again.
61 | 
62 | Or watch [the preview](https://chibisafe.moe/owdxQF9m.mp4) again.
63 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "magane",
 3 |   "version": "3.2.20",
 4 |   "description": "A lie about a lie... It turns inside-out on itself.",
 5 |   "author": "Pitu <heyitspitu@gmail.com>",
 6 |   "license": "MIT",
 7 |   "contributors": [
 8 |     {
 9 |       "name": "iCrawl",
10 |       "email": "icrawltogo@gmail.com"
11 |     },
12 |     {
13 |       "name": "BobbyWibowo",
14 |       "email": "bobby@fiery.me"
15 |     }
16 |   ],
17 |   "engines": {
18 |     "node": ">=18"
19 |   },
20 |   "scripts": {
21 |     "build-bd": "rollup -c rollup-bd.config.js",
22 |     "dev-bd": "rollup -c rollup-bd.config.js -w",
23 |     "build-vc": "rollup -c rollup-vencord.config.js",
24 |     "dev-vc": "rollup -c rollup-vencord.config.js -w"
25 |   },
26 |   "dependencies": {},
27 |   "devDependencies": {
28 |     "@rollup/plugin-commonjs": "^11.1.0",
29 |     "@rollup/plugin-node-resolve": "^11.2.1",
30 |     "@rollup/plugin-replace": "^5.0.2",
31 |     "@rollup/plugin-terser": "^0.4.4",
32 |     "eslint": "^8.57.0",
33 |     "eslint-config-aqua": "^9.2.1",
34 |     "eslint-plugin-import": "^2.29.1",
35 |     "eslint-plugin-svelte3": "^4.0.0",
36 |     "postcss-preset-env": "^6.7.0",
37 |     "rollup": "^1.32.1",
38 |     "rollup-plugin-license": "^2.8.1",
39 |     "rollup-plugin-livereload": "^1.0.0",
40 |     "rollup-plugin-postcss": "^v2.8.2",
41 |     "rollup-plugin-serve": "^1.1.0",
42 |     "rollup-plugin-svelte": "^6.1.1",
43 |     "sass": "^1.52.3",
44 |     "semver": "^7.5.3",
45 |     "svelte": "^3.48.0",
46 |     "svelte-preprocess": "^4.10.7",
47 |     "svelte-scrollto": "^0.2.0"
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/rollup-bd.config.js:
--------------------------------------------------------------------------------
  1 | import svelte from 'rollup-plugin-svelte';
  2 | import resolve from '@rollup/plugin-node-resolve';
  3 | import commonjs from '@rollup/plugin-commonjs';
  4 | import license from 'rollup-plugin-license';
  5 | import terser from '@rollup/plugin-terser';
  6 | import replace from '@rollup/plugin-replace';
  7 | import postcss from 'rollup-plugin-postcss';
  8 | import postcssPresetEnv from 'postcss-preset-env';
  9 | import autoPreprocess from 'svelte-preprocess';
 10 | import fs from 'fs/promises';
 11 | import path from 'path';
 12 | 
 13 | const production = !process.env.ROLLUP_WATCH;
 14 | const file = path.resolve(__dirname, production ? 'dist' : 'dist-dev', 'magane.plugin.js');
 15 | const meta = path.resolve(__dirname, 'src/meta.txt');
 16 | const metadata = {
 17 | 	name: 'MaganeBD',
 18 | 	displayName: 'MaganeBD',
 19 | 	description: 'Bringing LINE stickers to Discord in a chaotic way. BetterDiscord edition.',
 20 | 	updateUrl: 'https://raw.githubusercontent.com/Pitu/Magane/master/dist/magane.plugin.js'
 21 | };
 22 | 
 23 | export default {
 24 | 	input: 'src/bd-main.js',
 25 | 	output: {
 26 | 		file,
 27 | 		format: 'cjs',
 28 | 		name: 'app',
 29 | 		// BetterDiscord won't make sourcemaps available to DevTools anyways,
 30 | 		// and we are not minifying processed output to follow BetterDiscord guidelines,
 31 | 		// so might as well not generate them altogether.
 32 | 		sourcemap: false
 33 | 	},
 34 | 	plugins: [
 35 | 		!production && {
 36 | 			name: 'watch-extras',
 37 | 			buildStart() {
 38 | 				this.addWatchFile(meta);
 39 | 			}
 40 | 		},
 41 | 		svelte({
 42 | 			dev: !production,
 43 | 			emitCss: true,
 44 | 			preprocess: autoPreprocess(),
 45 | 			onwarn: (warning, handler) => {
 46 | 				if (warning.code === 'a11y-click-events-have-key-events') return;
 47 | 				handler(warning);
 48 | 			}
 49 | 		}),
 50 | 		postcss({
 51 | 			extensions: ['.css', '.scss'],
 52 | 			plugins: [
 53 | 				postcssPresetEnv()
 54 | 			],
 55 | 			inject: (cssVariableName, fileId) => {
 56 | 				// Extract packaga name if available
 57 | 				const match = fileId.match(/[\/]node_modules[\/](.*?)[\/]/);
 58 | 				let pkg = '';
 59 | 				if (match) pkg = `${match[1]}-`;
 60 | 				// Normalize basename
 61 | 				const id = pkg + path.basename(fileId).replace(/\./, '_');
 62 | 				// Arguably hacky.., but cleanest method that I could think of
 63 | 				return 'if (typeof window.MAGANE_STYLES !== "object") window.MAGANE_STYLES = {};\n' +
 64 | 					`window.MAGANE_STYLES["${id}"] = ${cssVariableName};`;
 65 | 			}
 66 | 		}),
 67 | 		resolve({
 68 | 			browser: true
 69 | 		}),
 70 | 		commonjs(),
 71 | 		production && terser({
 72 | 			ecma: 2021,
 73 | 			compress: {
 74 | 				keep_classnames: true,
 75 | 				keep_fnames: true,
 76 | 				passes: 1
 77 | 			},
 78 | 			mangle: false,
 79 | 			output: {
 80 | 				beautify: true,
 81 | 				keep_numbers: true,
 82 | 				indent_level: 4
 83 | 			}
 84 | 		}),
 85 | 		production && replace({
 86 | 			delimiters: ['', ''],
 87 | 			preventAssignment: false,
 88 | 			values: {
 89 | 				'    ': '\t'
 90 | 			}
 91 | 		}),
 92 | 		license({
 93 | 			banner: {
 94 | 				commentStyle: 'regular',
 95 | 				content: {
 96 | 					file: meta,
 97 | 					encoding: 'utf-8'
 98 | 				},
 99 | 				data() { return metadata; }
100 | 			}
101 | 		}),
102 | 		{
103 | 			name: 'copyDistFile',
104 | 			writeBundle: async () => {
105 | 				if (!Boolean(process.env.BD_PLUGIN_PATH)) return;
106 | 				await fs.copyFile(file, process.env.BD_PLUGIN_PATH);
107 | 				console.log(`Copied dist file to ${process.env.BD_PLUGIN_PATH}`);
108 | 			}
109 | 		}
110 | 	],
111 | 	watch: {
112 | 		clearScreen: false
113 | 	}
114 | };
115 | 


--------------------------------------------------------------------------------
/rollup-vencord.config.js:
--------------------------------------------------------------------------------
  1 | import svelte from 'rollup-plugin-svelte';
  2 | import resolve from '@rollup/plugin-node-resolve';
  3 | import commonjs from '@rollup/plugin-commonjs';
  4 | import license from 'rollup-plugin-license';
  5 | import terser from '@rollup/plugin-terser';
  6 | import replace from '@rollup/plugin-replace';
  7 | import postcss from 'rollup-plugin-postcss';
  8 | import postcssPresetEnv from 'postcss-preset-env';
  9 | import autoPreprocess from 'svelte-preprocess';
 10 | import fs from 'fs/promises';
 11 | import path from 'path';
 12 | 
 13 | const production = !process.env.ROLLUP_WATCH;
 14 | const file = path.resolve(__dirname, production ? 'dist' : 'dist-dev', 'magane.vencord.js');
 15 | const meta = path.resolve(__dirname, 'src/meta.txt');
 16 | const metadata = {
 17 | 	name: 'MaganeVencord',
 18 | 	displayName: 'MaganeVencord',
 19 | 	description: 'Bringing LINE stickers to Discord in a chaotic way. Vencord edition.',
 20 | 	updateUrl: 'https://raw.githubusercontent.com/Pitu/Magane/master/dist/magane.vencord.js'
 21 | };
 22 | 
 23 | export default {
 24 | 	input: 'src/vencord-main.js',
 25 | 	output: {
 26 | 		file,
 27 | 		format: 'cjs',
 28 | 		name: 'app',
 29 | 		// BetterDiscord won't make sourcemaps available to DevTools anyways,
 30 | 		// and we are not minifying processed output to follow BetterDiscord guidelines,
 31 | 		// so might as well not generate them altogether.
 32 | 		sourcemap: false
 33 | 	},
 34 | 	plugins: [
 35 | 		svelte({
 36 | 			dev: !production,
 37 | 			emitCss: true,
 38 | 			preprocess: autoPreprocess(),
 39 | 			onwarn: (warning, handler) => {
 40 | 				if (warning.code === 'a11y-click-events-have-key-events') return;
 41 | 				handler(warning);
 42 | 			}
 43 | 		}),
 44 | 		postcss({
 45 | 			extensions: ['.css', '.scss'],
 46 | 			plugins: [
 47 | 				postcssPresetEnv()
 48 | 			],
 49 | 			inject: (cssVariableName, fileId) => {
 50 | 				// Extract packaga name if available
 51 | 				const match = fileId.match(/[\/]node_modules[\/](.*?)[\/]/);
 52 | 				let pkg = '';
 53 | 				if (match) pkg = `${match[1]}-`;
 54 | 				// Normalize basename
 55 | 				const id = pkg + path.basename(fileId).replace(/\./, '_');
 56 | 				// Arguably hacky.., but cleanest method that I could think of
 57 | 				return 'if (typeof window.MAGANE_STYLES !== "object") window.MAGANE_STYLES = {};\n' +
 58 | 					`window.MAGANE_STYLES["${id}"] = ${cssVariableName};`;
 59 | 			}
 60 | 		}),
 61 | 		resolve({
 62 | 			browser: true
 63 | 		}),
 64 | 		commonjs(),
 65 | 		production && terser({
 66 | 			ecma: 2021,
 67 | 			compress: {
 68 | 				keep_classnames: true,
 69 | 				keep_fnames: true,
 70 | 				passes: 1
 71 | 			},
 72 | 			mangle: false,
 73 | 			output: {
 74 | 				beautify: true,
 75 | 				keep_numbers: true,
 76 | 				indent_level: 4
 77 | 			}
 78 | 		}),
 79 | 		production && replace({
 80 | 			delimiters: ['', ''],
 81 | 			preventAssignment: false,
 82 | 			values: {
 83 | 				'    ': '\t'
 84 | 			}
 85 | 		}),
 86 | 		production && replace({
 87 | 			delimiters: ['', ''],
 88 | 			preventAssignment: false,
 89 | 			values: {
 90 | 				'"use strict";': '"use strict"\n__VencordImports__;'
 91 | 			}
 92 | 		}),
 93 | 		!production && replace({
 94 | 			delimiters: ['', ''],
 95 | 			preventAssignment: false,
 96 | 			values: {
 97 | 				'\'use strict\';': '\'use strict\';\n__VencordImports__;'
 98 | 			}
 99 | 		}),
100 | 		replace({
101 | 			delimiters: ['', ''],
102 | 			preventAssignment: false,
103 | 			values: {
104 | 				'__VencordImports__;': 'import definePlugin from "@utils/types";\nimport { findByPropsLazy, findLazy } from "@webpack";\nimport { Alerts, Toasts } from "@webpack/common";',
105 | 				'VencordApi.': '',
106 | 
107 | 				// Svelte syntax, lmao..
108 | 				'$$invalidate(0, mountType)': '$$invalidate(0, mountType = MountType.VENCORD)',
109 | 
110 | 				// This is so hacky, lmao
111 | 				'var vencordMain = definePlugin({': 'export default definePlugin({',
112 | 				'module.exports = vencordMain;': ''
113 | 			}
114 | 		}),
115 | 		license({
116 | 			banner: {
117 | 				commentStyle: 'regular',
118 | 				content: {
119 | 					file: meta,
120 | 					encoding: 'utf-8'
121 | 				},
122 | 				data() { return metadata; }
123 | 			}
124 | 		}),
125 | 		{
126 | 			name: 'copyDistFile',
127 | 			writeBundle: async () => {
128 | 				if (!Boolean(process.env.VENCORD_PLUGIN_PATH)) return;
129 | 				await fs.copyFile(file, process.env.VENCORD_PLUGIN_PATH);
130 | 				console.log(`Copied dist file to ${process.env.VENCORD_PLUGIN_PATH}`);
131 | 			}
132 | 		}
133 | 	],
134 | 	watch: {
135 | 		clearScreen: false
136 | 	}
137 | };
138 | 


--------------------------------------------------------------------------------
/src/App.svelte:
--------------------------------------------------------------------------------
   1 | <script>
   2 | 	/* global BdApi, VencordApi */
   3 | 	import { onMount, onDestroy } from 'svelte';
   4 | 	import Button from './Button.svelte';
   5 | 
   6 | 	import * as animateScroll from 'svelte-scrollto';
   7 | 	import SemverGt from 'semver/functions/gt';
   8 | 	import './styles/main.scss';
   9 | 
  10 | 	const log = (message, type = 'log') => {
  11 | 		type = ['log', 'info', 'warn', 'error'].includes(type) ? type : 'log';
  12 | 		return console[type]('%c[Magane]%c', 'color: #3a71c1; font-weight: 700', '', message);
  13 | 	};
  14 | 
  15 | 	const MountType = {
  16 | 		LEGACY: 'legacy',
  17 | 		BETTERDISCORD: 'betterdiscord',
  18 | 		VENCORD: 'vencord'
  19 | 	};
  20 | 	let mountType = null;
  21 | 
  22 | 	/*
  23 | 		Built-in update checker is not available outside of BetterDiscord.
  24 | 		Find-replacing these is not possible due to Svelte directly injecting string constants
  25 | 		into any functions that use them when building in production mode.
  26 | 	*/
  27 | 	const bdPluginName = 'MaganeBD';
  28 | 	const githubUrl = 'https://github.com/Pitu/Magane/commits/master';
  29 | 	const updateUrl = 'https://raw.githubusercontent.com/Pitu/Magane/master/dist/magane.plugin.js';
  30 | 
  31 | 	// APIs
  32 | 	const Modules = {};
  33 | 
  34 | 	/*
  35 | 		For BetterDiscord, use BdApi helper functions.
  36 | 		For other mods, their respective build scripts will have to find-replace
  37 | 		MOCK_API and MOCK_API.functionName with their respective helper functions.
  38 | 	*/
  39 | 	const MOCK_API = {};
  40 | 	const VENCORD_TOASTS_TYPE = {
  41 | 		info: 0,
  42 | 		success: 1,
  43 | 		error: 2,
  44 | 		warn: 2
  45 | 	};
  46 | 	const Helper = {
  47 | 		findByProps(...args) {
  48 | 			switch (mountType) {
  49 | 				case MountType.BETTERDISCORD:
  50 | 					return BdApi.findModuleByProps(...args);
  51 | 				case MountType.VENCORD:
  52 | 					return VencordApi.findByPropsLazy(...args);
  53 | 				default:
  54 | 					return MOCK_API.FINDBYPROPS(...args);
  55 | 			}
  56 | 		},
  57 | 		find(...args) {
  58 | 			switch (mountType) {
  59 | 				case MountType.BETTERDISCORD:
  60 | 					return BdApi.Webpack.getModule(...args);
  61 | 				case MountType.VENCORD:
  62 | 					return VencordApi.findLazy(args[0]);
  63 | 				default:
  64 | 					return MOCK_API.FIND(...args);
  65 | 			}
  66 | 		},
  67 | 		Alerts: {
  68 | 			show(...args) {
  69 | 				if (mountType === MountType.BETTERDISCORD) {
  70 | 					return BdApi.showConfirmationModal(...args);
  71 | 				} else if (mountType === MountType.VENCORD) {
  72 | 					const title = args[0];
  73 | 
  74 | 					// Re-map Markdown formatting to pure HTML
  75 | 					// Once again I'm reminded how whack it is to implant Svelte into React
  76 | 					const body = Modules.React.createElement('div', {
  77 | 						dangerouslySetInnerHTML: {
  78 | 							__html: args[1]
  79 | 								.replace(/\*\*(.*?)\*\*/gm, '<b>$1</b>')
  80 | 								.replace(/__(.*?)__/gm, '<u>$1</u>')
  81 | 								.replace(/```\n(.*?)\n```/gms, '<code>$1</code>')
  82 | 								.replace(/\n\n/gm, '<br>')
  83 | 						},
  84 | 						style: {
  85 | 							'user-select': 'text'
  86 | 						}
  87 | 					});
  88 | 
  89 | 					return VencordApi.Alerts.show(Object.assign({
  90 | 						title,
  91 | 						body
  92 | 					}, ...args.slice(2)));
  93 | 				}
  94 | 
  95 | 				return MOCK_API.ALERTS_SHOW(...args);
  96 | 			}
  97 | 		},
  98 | 		Toasts: {
  99 | 			show(...args) {
 100 | 				if (mountType === MountType.BETTERDISCORD) {
 101 | 					return BdApi.showToast(...args);
 102 | 				} else if (mountType === MountType.VENCORD) {
 103 | 					const message = args[0];
 104 | 					const options = Object.assign({}, ...args.slice(1));
 105 | 					let type = 0;
 106 | 
 107 | 					// Re-map options for Vencord
 108 | 					if (options.type) {
 109 | 						type = VENCORD_TOASTS_TYPE[options.type];
 110 | 						delete options.type;
 111 | 					}
 112 | 					if (options.timeout === undefined) {
 113 | 						// BetterDiscord's default timeout for toasts
 114 | 						options.duration = 3000;
 115 | 					} else {
 116 | 						options.duration = options.timeout;
 117 | 						delete options.timeout;
 118 | 					}
 119 | 
 120 | 					// Force position to bottom
 121 | 					options.position = 1;
 122 | 
 123 | 					return VencordApi.Toasts.show({
 124 | 						message,
 125 | 						type,
 126 | 						options
 127 | 					});
 128 | 				}
 129 | 
 130 | 				return MOCK_API.TOASTS_SHOW(...args);
 131 | 			}
 132 | 		},
 133 | 		Plugins: {
 134 | 			isEnabled(...args) {
 135 | 				switch (mountType) {
 136 | 					case MountType.BETTERDISCORD:
 137 | 						return BdApi.Plugins.isEnabled(...args);
 138 | 					case MountType.VENCORD:
 139 | 						return null; // TODO Vencord
 140 | 					default:
 141 | 						return MOCK_API.PLUGINS_ISENABLED(...args);
 142 | 				}
 143 | 			},
 144 | 			getVersion(...args) {
 145 | 				switch (mountType) {
 146 | 					case MountType.BETTERDISCORD:
 147 | 						return BdApi.Plugins.get(...args).version;
 148 | 					case MountType.VENCORD:
 149 | 						return null; // TODO Vencord
 150 | 					default:
 151 | 						return MOCK_API.PLUGINS_GETVERSION(...args);
 152 | 				}
 153 | 			}
 154 | 		},
 155 | 		UI: {
 156 | 			showNotice(...args) {
 157 | 				switch (mountType) {
 158 | 					case MountType.BETTERDISCORD:
 159 | 						return BdApi.UI.showNotice(...args);
 160 | 					case MountType.VENCORD:
 161 | 						return null; // TODO Vencord
 162 | 					default:
 163 | 						return MOCK_API.UI_SHOWNOTICE(...args);
 164 | 				}
 165 | 			}
 166 | 		}
 167 | 	};
 168 | 
 169 | 	const coords = { top: 0, left: 0 };
 170 | 	const selectorTextArea = '[class^="channelTextArea_"]:not([class*="channelTextAreaDisabled_"])';
 171 | 	let main = null;
 172 | 	let base = null;
 173 | 	let forceHideMagane = false;
 174 | 	let components = [];
 175 | 	let activeComponent = null;
 176 | 
 177 | 	let baseURL = '';
 178 | 	let stickerWindowActive = false;
 179 | 	let stickerAddModalActive = false;
 180 | 	const stickerAddModalTabsInit = {};
 181 | 	let activeTab = null;
 182 | 	let favoriteStickers = [];
 183 | 	let availablePacks = [];
 184 | 	let subscribedPacks = [];
 185 | 	let subscribedPacksSimple = [];
 186 | 	let filteredPacks = [];
 187 | 	let stickersStats = [];
 188 | 	let frequentlyUsedSorted = [];
 189 | 	let simplePacksData = {};
 190 | 	const localPacks = {};
 191 | 	let linePackSearch = null;
 192 | 	let remotePackUrl = null;
 193 | 	let frequentlyUsedInput = 10; // default
 194 | 	let hotkeyInput = null;
 195 | 	let hotkey = {};
 196 | 	let onCooldown = false;
 197 | 	let storage = null;
 198 | 	let packsSearch = null;
 199 | 	let resizeObserver = null;
 200 | 	const resizeObserverQueue = [];
 201 | 	let resizeObserverQueueWorking = false;
 202 | 	let isWarnedAboutViewportHeight = false;
 203 | 	const waitForTimeouts = {};
 204 | 
 205 | 	// For display in info popup only, expandable if required
 206 | 	const remotePackTypes = {
 207 | 		0: 'Custom JSON',
 208 | 		1: 'Chibisafe Albums',
 209 | 		2: 'Old Chibisafe / Lolisafe v3 Albums'
 210 | 	};
 211 | 
 212 | 	const settings = {
 213 | 		disableUpdateCheck: false,
 214 | 		enableWindowMagane: false,
 215 | 		disableToasts: false,
 216 | 		closeWindowOnSend: false,
 217 | 		useLeftToolbar: false,
 218 | 		showPackAppendix: false,
 219 | 		disableDownscale: false,
 220 | 		disableUploadObfuscation: false,
 221 | 		alwaysSendAsLink: false,
 222 | 		maskStickerLink: false,
 223 | 		ctrlInvertSendBehavior: false,
 224 | 		ignoreEmbedLinksPermission: false,
 225 | 		markAsSpoiler: false,
 226 | 		ignoreViewportSize: false,
 227 | 		disableSendingWithChatInput: false,
 228 | 		frequentlyUsed: frequentlyUsedInput,
 229 | 		hotkey: null
 230 | 	};
 231 | 	const defaultSettings = Object.freeze(Object.assign({}, settings));
 232 | 
 233 | 	const allowedStorageKeys = [
 234 | 		'magane.available',
 235 | 		'magane.subscribed',
 236 | 		'magane.favorites',
 237 | 		'magane.settings',
 238 | 		'magane.stats'
 239 | 	];
 240 | 
 241 | 	const toast = (message, options = {}) => {
 242 | 		if (!options.nolog || settings.disableToasts) {
 243 | 			log(message, options.type);
 244 | 		}
 245 | 		if (!settings.disableToasts) {
 246 | 			delete options.nolog;
 247 | 			Helper.Toasts.show(message, options);
 248 | 		}
 249 | 	};
 250 | 
 251 | 	const toastInfo = (message, options = {}) => {
 252 | 		options.type = 'info';
 253 | 		return toast(message, options);
 254 | 	};
 255 | 
 256 | 	const toastSuccess = (message, options = {}) => {
 257 | 		options.type = 'success';
 258 | 		return toast(message, options);
 259 | 	};
 260 | 
 261 | 	const toastError = (message, options = {}) => {
 262 | 		options.type = 'error';
 263 | 		return toast(message, options);
 264 | 	};
 265 | 
 266 | 	const toastWarn = (message, options = {}) => {
 267 | 		options.type = 'warn';
 268 | 		return toast(message, options);
 269 | 	};
 270 | 
 271 | 	const waitFor = (selector, options = {}) => {
 272 | 		if (options.logname) {
 273 | 			log(`Waiting for ${options.logname}\u2026`);
 274 | 		}
 275 | 		let poll;
 276 | 		return new Promise(resolve => {
 277 | 			(poll = () => {
 278 | 				const found = [];
 279 | 				const elements = document.querySelectorAll(selector);
 280 | 				for (let i = 0; i < elements.length; i++) {
 281 | 					// If an assert function is provided, ensure that it passes
 282 | 					if (typeof options.assert !== 'function' || options.assert(elements[i])) {
 283 | 						found.push(elements[i]);
 284 | 					}
 285 | 					// Break for-loop early if not instructed to return multiple elements
 286 | 					if (found.length && !options.multiple) {
 287 | 						break;
 288 | 					}
 289 | 				}
 290 | 				if (found.length) {
 291 | 					delete waitForTimeouts[selector];
 292 | 					return resolve(found);
 293 | 				}
 294 | 				waitForTimeouts[selector] = setTimeout(poll, 500);
 295 | 			})();
 296 | 		});
 297 | 	};
 298 | 
 299 | 	const mountButtonComponent = textArea => {
 300 | 		const buttonsContainer = textArea.querySelector('[class^="buttons"]');
 301 | 		const component = new Button({
 302 | 			target: buttonsContainer,
 303 | 			anchor: buttonsContainer.firstElementChild
 304 | 		});
 305 | 
 306 | 		// eslint-disable-next-line no-use-before-define
 307 | 		component.$on('click', () => toggleStickerWindow(undefined, component));
 308 | 		// eslint-disable-next-line no-use-before-define
 309 | 		component.$on('grabPacks', () => grabPacks(true));
 310 | 
 311 | 		component.textArea = textArea;
 312 | 		component.lastTextAreaSize = {
 313 | 			width: textArea.clientWidth,
 314 | 			height: textArea.clientHeight
 315 | 		};
 316 | 
 317 | 		return component;
 318 | 	};
 319 | 
 320 | 	const updateStickerWindowPosition = component => {
 321 | 		log('Updating window\'s position\u2026');
 322 | 
 323 | 		const buttonsContainer = component.textArea.querySelector('[class^="buttons"]');
 324 | 		const props = buttonsContainer.getBoundingClientRect();
 325 | 
 326 | 		coords.wbottom = (base.clientHeight - props.top) + 8;
 327 | 		coords.wright = (base.clientWidth - props.right) - 6;
 328 | 
 329 | 		if (mountType === MountType.LEGACY) {
 330 | 			const baseProps = base.getBoundingClientRect();
 331 | 			coords.wbottom += baseProps.top;
 332 | 			coords.wright += baseProps.left;
 333 | 		}
 334 | 	};
 335 | 
 336 | 	const resizeObserverWorker = async entry => {
 337 | 		// Check against recorded textArea's size if entry's new size is still valid
 338 | 		if (entry?.contentRect.width !== 0 && entry?.contentRect.height !== 0) {
 339 | 			for (const component of components) {
 340 | 				if (component.textArea === entry.target) {
 341 | 					// Skip worker only if entry's new width still matches recorded width (ignore height)
 342 | 					if (component.lastTextAreaSize.width === entry.contentRect.width) return;
 343 | 					break;
 344 | 				}
 345 | 			}
 346 | 		}
 347 | 
 348 | 		// Wait for new valid textArea(s)
 349 | 		const textAreas = await waitFor(selectorTextArea, {
 350 | 			logname: 'textarea',
 351 | 			// Ensure that the textArea element has a buttons container
 352 | 			assert: element => Boolean(element.querySelector('[class^="buttons"]')),
 353 | 			multiple: true
 354 | 		});
 355 | 
 356 | 		const componentsOld = components.slice();
 357 | 		const componentsNew = [];
 358 | 
 359 | 		for (const textArea of textAreas) {
 360 | 			// Assign ephemeral ID to the textArea element
 361 | 			if (!textArea._maganeID) {
 362 | 				textArea._maganeID = Date.now();
 363 | 			}
 364 | 
 365 | 			let valid = false;
 366 | 			for (let i = 0; i < componentsOld.length; i++) {
 367 | 				if (componentsOld[i].textArea === textArea) {
 368 | 					valid = true;
 369 | 					// Update recorded textArea's size
 370 | 					componentsOld[i].lastTextAreaSize = {
 371 | 						width: textArea.clientWidth,
 372 | 						height: textArea.clientHeight
 373 | 					};
 374 | 					componentsNew.push(componentsOld[i]);
 375 | 					componentsOld.splice(i, 1);
 376 | 					break;
 377 | 				}
 378 | 			}
 379 | 
 380 | 			if (valid) {
 381 | 				log(`Textarea #${textArea._maganeID}: still attached`);
 382 | 				continue;
 383 | 			}
 384 | 
 385 | 			// Mount button component attached to the textArea
 386 | 			const component = mountButtonComponent(textArea);
 387 | 			if (component) {
 388 | 				log(`Textarea #${textArea._maganeID}: attached`);
 389 | 				resizeObserver.observe(textArea);
 390 | 				componentsNew.push(component);
 391 | 			} else {
 392 | 				log(`Textarea #${textArea._maganeID}: failed to attach`);
 393 | 			}
 394 | 		}
 395 | 
 396 | 		// Loop through and destroy outdated components
 397 | 		for (const component of componentsOld) {
 398 | 			log(`Textarea #${component.textArea._maganeID}: outdated, destroying\u2026`);
 399 | 			// Force-close sticker window if an active component is outdated
 400 | 			if (activeComponent === component) {
 401 | 				// eslint-disable-next-line no-use-before-define
 402 | 				toggleStickerWindow(false, activeComponent);
 403 | 				activeComponent = null;
 404 | 			}
 405 | 			resizeObserver.unobserve(component.textArea);
 406 | 			component.$destroy();
 407 | 		}
 408 | 
 409 | 		// Assign new components as current valid components
 410 | 		components = componentsNew;
 411 | 		if (components.length) {
 412 | 			// Update active component's window position
 413 | 			if (activeComponent) {
 414 | 				updateStickerWindowPosition(activeComponent);
 415 | 			}
 416 | 		} else {
 417 | 			// If, by chance, this worker ends with zero valid components due to failed mounting,
 418 | 			// kickstart worker again to await future textArea(s)
 419 | 			resizeObserverWorker();
 420 | 		}
 421 | 	};
 422 | 
 423 | 	// Simple queue system for observer events
 424 | 	const resizeObserverQueuePush = entry => new Promise((resolve, reject) => {
 425 | 		resizeObserverQueue.push({ entry, resolve, reject });
 426 | 		// eslint-disable-next-line no-use-before-define
 427 | 		resizeObserverQueueShift();
 428 | 	});
 429 | 
 430 | 	const resizeObserverQueueShift = () => {
 431 | 		if (resizeObserverQueueWorking) {
 432 | 			return false;
 433 | 		}
 434 | 		const item = resizeObserverQueue.shift();
 435 | 		if (!item) {
 436 | 			return false;
 437 | 		}
 438 | 		try {
 439 | 			resizeObserverQueueWorking = true;
 440 | 			resizeObserverWorker(item.entry)
 441 | 				.then(value => {
 442 | 					resizeObserverQueueWorking = false;
 443 | 					item.resolve(value);
 444 | 					resizeObserverQueueShift();
 445 | 				})
 446 | 				.catch(err => {
 447 | 					resizeObserverQueueWorking = false;
 448 | 					item.reject(err);
 449 | 					resizeObserverQueueShift();
 450 | 				});
 451 | 		} catch (err) {
 452 | 			resizeObserverQueueWorking = false;
 453 | 			item.reject(err);
 454 | 			resizeObserverQueueShift();
 455 | 		}
 456 | 		return true;
 457 | 	};
 458 | 
 459 | 	const initResizeObserver = () => {
 460 | 		// We are basically only using this as some sort of event dispatcher
 461 | 		// for when any textArea(s) disappears due to switching channels, etc.
 462 | 		resizeObserver = new ResizeObserver(entries => {
 463 | 			for (const entry of entries) {
 464 | 				if (!entry.contentRect) return;
 465 | 				// Push this textArea element to observer worker queue
 466 | 				resizeObserverQueuePush(entry);
 467 | 			}
 468 | 		});
 469 | 
 470 | 		// Kickstart worker on first launch
 471 | 		resizeObserverWorker();
 472 | 	};
 473 | 
 474 | 	const initModules = () => {
 475 | 		// Stores
 476 | 		Modules.ChannelStore = Helper.findByProps('getChannel', 'getDMFromUserId');
 477 | 		Modules.SelectedChannelStore = Helper.findByProps('getLastSelectedChannelId');
 478 | 		Modules.UserStore = Helper.findByProps('getCurrentUser', 'getUser');
 479 | 
 480 | 		// Permissions
 481 | 		Modules.PermissionsBits = Helper.find(m => typeof m.ADMINISTRATOR === 'bigint', { searchExports: true });
 482 | 		Modules.Permissions = Helper.findByProps('computePermissions');
 483 | 
 484 | 		// Messages & Uploads
 485 | 		Modules.CloudUpload = Helper.find(m => m.prototype?.trackUploadFinished, { searchExports: true });
 486 | 		Modules.DraftStore = Helper.findByProps('getDraft', 'getState');
 487 | 		Modules.MessageUpload = Helper.findByProps('uploadFiles');
 488 | 		Modules.MessageUtils = Helper.findByProps('sendMessage');
 489 | 		Modules.PendingReplyStore = Helper.findByProps('getPendingReply');
 490 | 
 491 | 		// Misc
 492 | 		Modules.React = Helper.findByProps('createElement', 'version');
 493 | 	};
 494 | 
 495 | 	const getLocalStorage = () => {
 496 | 		// Temporarily spawn an iframe to duplicate localStorage's descriptors into a local object
 497 | 		const iframe = document.createElement('iframe');
 498 | 		document.head.append(iframe);
 499 | 		storage = Object.getOwnPropertyDescriptor(iframe.contentWindow.frames, 'localStorage').get.call(window);
 500 | 		iframe.remove();
 501 | 	};
 502 | 
 503 | 	const saveToLocalStorage = (key, payload) => {
 504 | 		if (!allowedStorageKeys.includes(key)) return;
 505 | 		return storage.setItem(key, JSON.stringify(payload));
 506 | 	};
 507 | 
 508 | 	const getFromLocalStorage = key => {
 509 | 		if (!allowedStorageKeys.includes(key)) return;
 510 | 		try {
 511 | 			const stored = storage.getItem(key);
 512 | 			const parsed = JSON.parse(stored);
 513 | 			return parsed;
 514 | 		} catch (ex) {
 515 | 			console.error(ex);
 516 | 		}
 517 | 	};
 518 | 
 519 | 	const applySettings = data => {
 520 | 		// Only use keys that were explicitly defined in defaultSettings
 521 | 		for (const key of Object.keys(defaultSettings)) {
 522 | 			if (typeof data[key] === 'undefined') {
 523 | 				settings[key] = defaultSettings[key];
 524 | 			} else {
 525 | 				settings[key] = data[key];
 526 | 			}
 527 | 		}
 528 | 
 529 | 		// eslint-disable-next-line no-use-before-define
 530 | 		setWindowMaganeAPIs(settings.enableWindowMagane);
 531 | 
 532 | 		frequentlyUsedInput = settings.frequentlyUsed;
 533 | 		hotkeyInput = settings.hotkey;
 534 | 
 535 | 		// eslint-disable-next-line no-use-before-define
 536 | 		parseThenInitHotkey();
 537 | 	};
 538 | 
 539 | 	const loadSettings = (reset = false) => {
 540 | 		// Reset parsed settings, if required (e.g. on settings reload)
 541 | 		if (reset) {
 542 | 			applySettings(defaultSettings);
 543 | 		}
 544 | 
 545 | 		const storedSettings = getFromLocalStorage('magane.settings');
 546 | 		if (storedSettings) {
 547 | 			applySettings(storedSettings);
 548 | 		}
 549 | 	};
 550 | 
 551 | 	const checkUpdate = async (manual = false) => {
 552 | 		if (mountType !== MountType.BETTERDISCORD) {
 553 | 			return toastWarn('Sorry, update checker is only available when running on BetterDiscord.');
 554 | 		}
 555 | 
 556 | 		// Check if hard-coded plugin name is enabled, sanity-check to ensure the running script is it
 557 | 		if (!Helper.Plugins.isEnabled(bdPluginName)) {
 558 | 			return toastWarn(`Update check skipped, is this plugin not named ${bdPluginName}?`);
 559 | 		}
 560 | 
 561 | 		const currentVersion = Helper.Plugins.getVersion(bdPluginName);
 562 | 
 563 | 		log(`Fetching remote dist file from: ${updateUrl}`);
 564 | 		if (manual) toast('Checking for updates\u2026', { nolog: true });
 565 | 
 566 | 		await fetch(updateUrl, { cache: 'no-cache' }).then(async response => {
 567 | 			log('Remote dist file fetched.');
 568 | 
 569 | 			const data = await response.text();
 570 | 			const match = data.match(/^ \* @version ([a-zA-Z0-9.-]+)$/m);
 571 | 			const remoteVersion = match?.[1];
 572 | 
 573 | 			if (remoteVersion) {
 574 | 				if (SemverGt(remoteVersion, currentVersion)) {
 575 | 					log(`Update found: ${remoteVersion} > ${currentVersion}.`);
 576 | 
 577 | 					Helper.UI.showNotice(`Magane v${currentVersion} found an update: v${remoteVersion}. Please download the update manually.`, {
 578 | 						buttons: [
 579 | 							{
 580 | 								label: 'GitHub',
 581 | 								onClick: () => window.open(githubUrl, { target: '_blank' })
 582 | 							},
 583 | 							{
 584 | 								label: 'Download',
 585 | 								onClick: () => window.open(updateUrl, { target: '_blank' })
 586 | 							}
 587 | 						]
 588 | 					});
 589 | 				} else {
 590 | 					log(`No updates found: ${remoteVersion} <= ${currentVersion}.`);
 591 | 					if (manual) toast('No updates found.', { nolog: true });
 592 | 				}
 593 | 			} else {
 594 | 				toastWarn('Failed to parse version string from remote dist file.');
 595 | 			}
 596 | 		}).catch(error => {
 597 | 			console.error(error);
 598 | 			toastError(`Unexpected error occurred when checking for Magane's updates. Check your console for details.`);
 599 | 		});
 600 | 	};
 601 | 
 602 | 	const isLocalPackID = id => {
 603 | 		if (typeof id !== 'string') return false;
 604 | 		// Faster than regex tests, especially if biased to only having imported LINE remote packs
 605 | 		return id.startsWith('startswith-') ||
 606 | 			id.startsWith('emojis-') ||
 607 | 			id.startsWith('custom-');
 608 | 	};
 609 | 
 610 | 	const initSimplePackDataEntry = (pack, source) => {
 611 | 		// Intended for favorites and/or frequently used (e.g. tooltips)
 612 | 		if (simplePacksData[pack]) return;
 613 | 
 614 | 		// Allow overriding source wherever applicable for faster look-ups
 615 | 		// e.g. favoriteSticker() should only look-up from subscribedPacks
 616 | 		const target = source || availablePacks;
 617 | 
 618 | 		const index = target.findIndex(p => p.id === pack);
 619 | 		if (index !== -1) {
 620 | 			simplePacksData[pack] = {
 621 | 				name: target[index].name
 622 | 			};
 623 | 		}
 624 | 	};
 625 | 
 626 | 	const cleanUpSimplePackDataEntry = pack => {
 627 | 		if (favoriteStickers.some(s => s.pack === pack) || frequentlyUsedSorted.some(s => s.pack === pack)) {
 628 | 			return;
 629 | 		}
 630 | 
 631 | 		// Only delete entry if no longer used by either favorited stickers,
 632 | 		// or stickers in frequently used section
 633 | 		delete simplePacksData[pack];
 634 | 	};
 635 | 
 636 | 	const grabPacks = async (reset = false) => {
 637 | 		let packs;
 638 | 		try {
 639 | 			const response = await fetch('https://magane.moe/api/packs');
 640 | 			packs = await response.json();
 641 | 			baseURL = packs.baseURL;
 642 | 		} catch (error) {
 643 | 			// Toast and log to console, but allow to continue as-is
 644 | 			toastError('Unable to fetch Magane\'s API. Magane will load as-is, but built-in remote packs will temporarily be unavailable.', { timeout: 12000 });
 645 | 			console.error(error);
 646 | 		}
 647 | 
 648 | 		// Reset local arrays/objects, if required (e.g. on settings reload)
 649 | 		if (reset) {
 650 | 			availablePacks = [];
 651 | 			filteredPacks = [];
 652 | 			subscribedPacks = [];
 653 | 			subscribedPacksSimple = [];
 654 | 			favoriteStickers = [];
 655 | 			stickersStats = [];
 656 | 			frequentlyUsedSorted = [];
 657 | 			simplePacksData = {};
 658 | 		}
 659 | 
 660 | 		// Load local packs first to have them always before built-in packs
 661 | 		const availLocalPacks = getFromLocalStorage('magane.available');
 662 | 		if (Array.isArray(availLocalPacks) && availLocalPacks.length) {
 663 | 			// This logic is necessary since the old data, prior to the new master rebase,
 664 | 			// would also store remote built-in packs in local storage (no idea why).
 665 | 			const filteredLocalPacks = availLocalPacks.filter(pack =>
 666 | 				typeof pack === 'object' &&
 667 | 				typeof pack.id !== 'undefined' &&
 668 | 				isLocalPackID(pack.id));
 669 | 
 670 | 			// Update database if required
 671 | 			if (availLocalPacks.length !== filteredLocalPacks.length) {
 672 | 				log(`magane.available mismatch: ${availLocalPacks.length} !== ${filteredLocalPacks.length}`);
 673 | 				saveToLocalStorage('magane.available', filteredLocalPacks);
 674 | 			}
 675 | 
 676 | 			// Store local packs data in an ID-indexed Object for faster get's in formatURL()
 677 | 			filteredLocalPacks.forEach(pack => {
 678 | 				localPacks[pack.id] = pack;
 679 | 			});
 680 | 			availablePacks.push(...filteredLocalPacks);
 681 | 		}
 682 | 
 683 | 		// Then append remote packs after local packs
 684 | 		if (packs) {
 685 | 			availablePacks.push(...packs.packs);
 686 | 		}
 687 | 
 688 | 		// Refresh UI
 689 | 		availablePacks = availablePacks;
 690 | 		filteredPacks = availablePacks;
 691 | 
 692 | 		const subscribed = getFromLocalStorage('magane.subscribed');
 693 | 		if (Array.isArray(subscribed) && subscribed.length) {
 694 | 			// Init simple caching of pack IDs, and filter-out invalid data
 695 | 			// (e.g. failed to unsubscribe upon deleting local packs)
 696 | 			subscribedPacks = subscribed.filter(pack => {
 697 | 				if (isLocalPackID(pack.id) && !localPacks[pack.id]) {
 698 | 					return false;
 699 | 				}
 700 | 				// Simple caching of pack IDs
 701 | 				subscribedPacksSimple.push(pack.id);
 702 | 				return true;
 703 | 			});
 704 | 
 705 | 			// Update database if required
 706 | 			if (subscribed.length !== subscribedPacks.length) {
 707 | 				log(`magane.subscribed mismatch: ${subscribed.length} !== ${subscribedPacks.length}`);
 708 | 				saveToLocalStorage('magane.subscribed', subscribedPacks);
 709 | 			}
 710 | 		}
 711 | 
 712 | 		const favorites = getFromLocalStorage('magane.favorites');
 713 | 		if (Array.isArray(favorites) && favorites.length) {
 714 | 			// Init simple pack data entry, and filter-out invalid data
 715 | 			// (e.g. stickers of local packs that have previously been deleted)
 716 | 			favoriteStickers = favorites.filter(sticker => {
 717 | 				if (isLocalPackID(sticker.pack) && !localPacks[sticker.pack]) {
 718 | 					return false;
 719 | 				}
 720 | 				initSimplePackDataEntry(sticker.pack);
 721 | 				return true;
 722 | 			});
 723 | 
 724 | 			// Update database if required
 725 | 			if (favorites.length !== favoriteStickers.length) {
 726 | 				log(`magane.favorites mismatch: ${favorites.length} !== ${favoriteStickers.length}`);
 727 | 				saveToLocalStorage('magane.favorites', favoriteStickers);
 728 | 			}
 729 | 		}
 730 | 
 731 | 		const stats = getFromLocalStorage('magane.stats');
 732 | 		if (Array.isArray(stats) && stats.length) {
 733 | 			// Filter-out invalid data
 734 | 			// (e.g. stickers of local packs that have previously been deleted)
 735 | 			stickersStats = stats.filter(sticker =>
 736 | 				!isLocalPackID(sticker.pack) || localPacks[sticker.pack]);
 737 | 
 738 | 			// Update database if required
 739 | 			if (stats.length !== stickersStats.length) {
 740 | 				log(`magane.stats mismatch: ${stats.length} !== ${stickersStats.length}`);
 741 | 				saveToLocalStorage('magane.stats', stickersStats);
 742 | 			}
 743 | 
 744 | 			// eslint-disable-next-line no-use-before-define
 745 | 			updateFrequentlyUsed();
 746 | 		}
 747 | 	};
 748 | 
 749 | 	const subscribeToPack = pack => {
 750 | 		if (subscribedPacks.findIndex(p => p.id === pack.id) !== -1) return;
 751 | 		subscribedPacks = [...subscribedPacks, pack];
 752 | 		subscribedPacksSimple = [...subscribedPacksSimple, pack.id];
 753 | 
 754 | 		saveToLocalStorage('magane.subscribed', subscribedPacks);
 755 | 		log(`Subscribed > ${pack.name}`);
 756 | 		// analyticsSubscribePack([pack.id]);
 757 | 	};
 758 | 
 759 | 	const unsubscribeToPack = pack => {
 760 | 		for (let i = 0; i < subscribedPacks.length; i++) {
 761 | 			if (subscribedPacks[i].id === pack.id) {
 762 | 				subscribedPacks.splice(i, 1);
 763 | 				subscribedPacksSimple.splice(i, 1);
 764 | 
 765 | 				// No clue how to do with assignments so we cheat here
 766 | 				subscribedPacks = subscribedPacks;
 767 | 				subscribedPacksSimple = subscribedPacksSimple;
 768 | 
 769 | 				log(`Unsubscribed > ${pack.name}`);
 770 | 				saveToLocalStorage('magane.subscribed', subscribedPacks);
 771 | 				return;
 772 | 			}
 773 | 		}
 774 | 	};
 775 | 
 776 | 	const formatUrl = (pack, id, sending, thumbIndex) => {
 777 | 		let url;
 778 | 		if (typeof pack === 'number') {
 779 | 			// Magane's built-in packs
 780 | 			if (baseURL) {
 781 | 				url = `${baseURL || ''}${pack}/${id}`;
 782 | 				if (!sending) {
 783 | 					url = url.replace(/\.(gif|png)$/i, '_key.$1');
 784 | 				}
 785 | 			} else if (sending) {
 786 | 				// Let sendSticker() handle displaying error
 787 | 				throw new Error('Magane\'s API was unavailable. Please reload Magane if the API is already back online.');
 788 | 			} else {
 789 | 				// Placeholder thumb (❌) if baseURL is missing (i.e. failed to fetch it from Magane's API)
 790 | 				url = '/assets/8becd37ab9d13cdfe37c08c496a9def3.svg';
 791 | 			}
 792 | 		} else if (pack.startsWith('startswith-')) {
 793 | 			/*
 794 | 				LINE Store packs
 795 | 				292p: https://stickershop.line-scdn.net/stickershop/v1/sticker/%id%/iPhone/sticker@2x.png;compress=true
 796 | 				219p: https://stickershop.line-scdn.net/stickershop/v1/sticker/%id%/android/sticker.png;compress=true
 797 | 				146p: https://stickershop.line-scdn.net/stickershop/v1/sticker/%id%/iPhone/sticker.png;compress=true
 798 | 				WARNING: Early packs (can confirm with packs that have their sticker IDs at 4 digits),
 799 | 				do not have iPhone variants, so we will stick with Android variants, which are always available.
 800 | 			*/
 801 | 			const template = 'https://stickershop.line-scdn.net/stickershop/v1/sticker/%id%/android/sticker.png;compress=true';
 802 | 			url = template.replace(/%id%/g, id.split('.')[0]);
 803 | 			let append = sending ? '&h=180p' : '&h=100p';
 804 | 			if (localPacks[pack].animated) {
 805 | 				url = url.replace(/sticker(@2x)?\.png/, 'sticker_animation$1.png');
 806 | 				// In case one day wsrv.nl starts properly supporting APNGs -> GIFs
 807 | 				append += '&output=gif';
 808 | 			}
 809 | 			if (!settings.disableDownscale) {
 810 | 				// Downsizing with wsrv.nl to stay consistent with Magane's built-in packs
 811 | 				url = `https://wsrv.nl/?url=${encodeURIComponent(url)}${append}`;
 812 | 			}
 813 | 		} else if (pack.startsWith('emojis-')) {
 814 | 			/*
 815 | 				LINE Store emojis
 816 | 				220p: https://stickershop.line-scdn.net/sticonshop/v1/sticon/%pack%/iPhone/%id%.png
 817 | 				154p: https://stickershop.line-scdn.net/sticonshop/v1/sticon/%pack%/android/%id%.png
 818 | 				WARNING: Stickers may actually have missing iPhone variants,
 819 | 				so to be safe we will just use Android variant for emojis too.
 820 | 				Plus, it probably makes more sense to have emojis smaller anyway
 821 | 				(Android variant of emojis only go up to 154p).
 822 | 			*/
 823 | 			const template = 'https://stickershop.line-scdn.net/sticonshop/v1/sticon/%pack%/android/%id%.png';
 824 | 			url = template.replace(/%pack%/g, pack.split('-')[1]).replace(/%id%/g, id.split('.')[0]);
 825 | 			let append = sending ? '' : '&h=100p';
 826 | 			if (localPacks[pack].animated) {
 827 | 				url = url.replace(/\.png/, '_animation.png');
 828 | 				// In case one day wsrv.nl starts properly supporting APNGs -> GIFs
 829 | 				append += '&output=gif';
 830 | 			}
 831 | 			if (!settings.disableDownscale) {
 832 | 				// Downsizing with wsrv.nl to stay consistent with Magane's built-in packs
 833 | 				url = `https://wsrv.nl/?url=${encodeURIComponent(url)}${append}`;
 834 | 			}
 835 | 		} else if (pack.startsWith('custom-')) {
 836 | 			// Unified imported custom packs
 837 | 			if (!sending && Array.isArray(localPacks[pack].thumbs)) {
 838 | 				if (localPacks[pack].thumbs.length) {
 839 | 					if (typeof thumbIndex !== 'number') {
 840 | 						// thumbIndex is not available for favorites, so do some work out
 841 | 						thumbIndex = localPacks[pack].files.findIndex(file => file === id);
 842 | 					}
 843 | 					url = thumbIndex >= 0 ? localPacks[pack].thumbs[thumbIndex] : null;
 844 | 				}
 845 | 				if (!url) {
 846 | 					// Immediately return with placeholder thumb (📄)
 847 | 					return '/assets/eedd4bd948a0da6d75bf5304bff4e17f.svg';
 848 | 				}
 849 | 			} else {
 850 | 				url = id;
 851 | 			}
 852 | 			if (typeof localPacks[pack].template === 'string') {
 853 | 				url = localPacks[pack].template.replace(/%pack%/g, pack.replace('custom-', '')).replace(/%id%/g, url);
 854 | 			}
 855 | 		}
 856 | 		return url;
 857 | 	};
 858 | 
 859 | 	const getTextAreaInstance = textArea => {
 860 | 		// NOTE: If any deeper than the 10th step, then Discord must be changing something again,
 861 | 		// thus better to inspect further instead of blindly increasing the limit.
 862 | 		const MAX_LOOKUP_DEPTH = 10;
 863 | 		const reactInstanceKey = Object.keys(textArea).find(key =>
 864 | 			key.startsWith('__reactFiber') || key.startsWith('__reactInternalInstance'));
 865 | 		let cursor = textArea[reactInstanceKey];
 866 | 		for (let i = 0; i < MAX_LOOKUP_DEPTH; i++) {
 867 | 			if (!cursor) break;
 868 | 			if (cursor.stateNode?.handleTextareaChange) {
 869 | 				return cursor;
 870 | 			}
 871 | 			cursor = cursor.return;
 872 | 		}
 873 | 	};
 874 | 
 875 | 	const hasPermission = (permission, context) => {
 876 | 		// Always true if could not fetch the necessary modules
 877 | 		if (!Modules.PermissionsBits || !Modules.Permissions || !Modules.UserStore) {
 878 | 			return true;
 879 | 		}
 880 | 
 881 | 		const user = Modules.UserStore.getCurrentUser();
 882 | 		if (!user) return false;
 883 | 
 884 | 		// Always true in non-guild channels (e.g. DMs)
 885 | 		if (!permission || !context.guild_id || context.isDM() || context.isGroupDM()) {
 886 | 			return true;
 887 | 		}
 888 | 
 889 | 		return Modules.Permissions.can(Modules.PermissionsBits[permission], context);
 890 | 	};
 891 | 
 892 | 	const sendSticker = async (pack, id, event) => {
 893 | 		if (onCooldown) {
 894 | 			return toastWarn('Sending sticker is still on cooldown\u2026', { timeout: 1000 });
 895 | 		} else if (!activeComponent) {
 896 | 			return toastWarn('Selected text area is not found, please re-open Magane window.');
 897 | 		}
 898 | 
 899 | 		onCooldown = true;
 900 | 
 901 | 		try {
 902 | 			const textAreaInstance = getTextAreaInstance(activeComponent.textArea);
 903 | 			if (!textAreaInstance) {
 904 | 				throw new Error('Unable to determine textarea instance.');
 905 | 			}
 906 | 
 907 | 			const channelId = textAreaInstance.stateNode.props.channel.id;
 908 | 			if (!channelId) {
 909 | 				throw new Error('Unable to determine channel ID associated with the textarea.');
 910 | 			}
 911 | 
 912 | 			let channel;
 913 | 			if (Modules.ChannelStore) {
 914 | 				channel = Modules.ChannelStore.getChannel(channelId);
 915 | 			}
 916 | 
 917 | 			if (!hasPermission('SEND_MESSAGES', channelId)) {
 918 | 				throw new Error('No permission to send message in this channel.');
 919 | 			}
 920 | 
 921 | 			if (settings.closeWindowOnSend) {
 922 | 				// eslint-disable-next-line no-use-before-define
 923 | 				toggleStickerWindow(false, activeComponent);
 924 | 			}
 925 | 
 926 | 			const url = formatUrl(pack, id, true);
 927 | 
 928 | 			let messageContent = '';
 929 | 			if (!settings.disableSendingWithChatInput && Modules.DraftStore) {
 930 | 				messageContent = Modules.DraftStore.getDraft(channelId, 0);
 931 | 			}
 932 | 
 933 | 			let messageOptions;
 934 | 			if (Modules.PendingReplyStore) {
 935 | 				const pendingReply = Modules.PendingReplyStore.getPendingReply(channelId);
 936 | 				if (pendingReply) {
 937 | 					messageOptions = Modules.MessageUtils.getSendMessageOptionsForReply(pendingReply);
 938 | 				}
 939 | 			}
 940 | 
 941 | 			let sendAsLink = settings.alwaysSendAsLink;
 942 | 			if (event?.ctrlKey && settings.ctrlInvertSendBehavior) {
 943 | 				sendAsLink = !sendAsLink;
 944 | 			}
 945 | 
 946 | 			// Always send as link if channel instance is not available (due to missing module)
 947 | 			if (!sendAsLink && channel && hasPermission('ATTACH_FILES', channel)) {
 948 | 				toast('Fetching sticker\u2026', { timeout: 1000 });
 949 | 
 950 | 				log(`Fetching: ${url}`);
 951 | 				const response = await fetch(url, { cache: 'force-cache' });
 952 | 				const blob = await response.blob();
 953 | 
 954 | 				let filename = id.substring(id.lastIndexOf('/') + 1).split('?')[0];
 955 | 
 956 | 				if (typeof pack === 'string') {
 957 | 					if (localPacks[pack].animated && (pack.startsWith('startswith-') || pack.startsWith('emojis-'))) {
 958 | 						filename = filename.replace(/\.png$/i, '.gif');
 959 | 						toastWarn('Animated stickers/emojis from LINE Store currently cannot be animated.');
 960 | 					}
 961 | 				}
 962 | 
 963 | 				if (!settings.disableUploadObfuscation) {
 964 | 					const ext = filename.match(/(\.\w+)$/);
 965 | 					filename = `${Date.now().toString()}${ext ? ext[1] : ''}`;
 966 | 				}
 967 | 
 968 | 				if (settings.markAsSpoiler) {
 969 | 					filename = `SPOILER_${filename}`;
 970 | 				}
 971 | 				const file = new File([blob], filename);
 972 | 				log(`Sending sticker as ${filename}\u2026`);
 973 | 
 974 | 				toast('Sending\u2026', { timeout: 1000 });
 975 | 				Modules.MessageUpload.uploadFiles({
 976 | 					channelId,
 977 | 					draftType: 0,
 978 | 					hasSpoiler: false,
 979 | 					options: messageOptions || {},
 980 | 					parsedMessage: {
 981 | 						content: messageContent
 982 | 					},
 983 | 					uploads: [
 984 | 						new Modules.CloudUpload({
 985 | 							file,
 986 | 							isClip: false,
 987 | 							isThumbnail: false,
 988 | 							platform: 1
 989 | 						}, channelId, false, 0)
 990 | 					]
 991 | 				});
 992 | 			} else if (settings.ignoreEmbedLinksPermission || (channel && hasPermission('EMBED_LINKS', channel))) {
 993 | 				if (!sendAsLink) {
 994 | 					if (channel) {
 995 | 						toastWarn('You do not have permission to attach files, sending sticker as link\u2026');
 996 | 					} else {
 997 | 						toastWarn('Unable to fetch ChannelStore module, sending sticker as link\u2026');
 998 | 					}
 999 | 				}
1000 | 
1001 | 				let append = url;
1002 | 
1003 | 				if (settings.maskStickerLink) {
1004 | 					append = `[sticker](${append})`;
1005 | 				}
1006 | 
1007 | 				toast('Sending\u2026', { timeout: 1000 });
1008 | 				Modules.MessageUtils._sendMessage(channelId, {
1009 | 					content: `${messageContent} ${append}`.trim()
1010 | 				}, messageOptions || {});
1011 | 			} else {
1012 | 				throw new Error('No permission to attach files nor embed links.');
1013 | 			}
1014 | 
1015 | 			// Clear chat input if required
1016 | 			if (!settings.disableSendingWithChatInput && textAreaInstance) {
1017 | 				log('Clearing chat input\u2026');
1018 | 				textAreaInstance.stateNode.setState({
1019 | 					textValue: '',
1020 | 					// richValue: modules.richUtils.toRichValue('')
1021 | 					richValue: [{ type: 'line', children: [{ text: '' }] }]
1022 | 				});
1023 | 			}
1024 | 
1025 | 			// Update sticker's usage stats if using Frequently Used
1026 | 			if (settings.frequentlyUsed !== 0) {
1027 | 				const last = stickersStats.findIndex(sticker => sticker.pack === pack && sticker.id === id);
1028 | 				if (last === -1) {
1029 | 					stickersStats.push({ pack, id, used: 1, lastUsed: Date.now() });
1030 | 				} else {
1031 | 					stickersStats[last].used++;
1032 | 					stickersStats[last].lastUsed = Date.now();
1033 | 				}
1034 | 				saveToLocalStorage('magane.stats', stickersStats);
1035 | 
1036 | 				// Refresh UI
1037 | 				// eslint-disable-next-line no-use-before-define
1038 | 				updateFrequentlyUsed();
1039 | 			}
1040 | 		} catch (error) {
1041 | 			console.error(error);
1042 | 			toastError(error.toString(), { nolog: true, timeout: 6000 });
1043 | 		}
1044 | 
1045 | 		onCooldown = false;
1046 | 	};
1047 | 
1048 | 	const favoriteSticker = (pack, id) => {
1049 | 		const index = favoriteStickers.findIndex(f => f.pack === pack && f.id === id);
1050 | 		if (index !== -1) return;
1051 | 
1052 | 		initSimplePackDataEntry(pack, subscribedPacks);
1053 | 
1054 | 		const favorite = { pack, id };
1055 | 		favoriteStickers = [...favoriteStickers, favorite];
1056 | 		saveToLocalStorage('magane.favorites', favoriteStickers);
1057 | 		log(`Favorited > ${id} of pack ${pack}`);
1058 | 		toastSuccess('Favorited!', { nolog: true });
1059 | 	};
1060 | 
1061 | 	const unfavoriteSticker = (pack, id) => {
1062 | 		const index = favoriteStickers.findIndex(f => f.pack === pack && f.id === id);
1063 | 		if (index === -1) return;
1064 | 
1065 | 		favoriteStickers.splice(index, 1);
1066 | 		favoriteStickers = favoriteStickers;
1067 | 
1068 | 		cleanUpSimplePackDataEntry(pack);
1069 | 
1070 | 		saveToLocalStorage('magane.favorites', favoriteStickers);
1071 | 		log(`Unfavorited > ${id} of pack ${pack}`);
1072 | 		toastInfo('Unfavorited!', { nolog: true });
1073 | 	};
1074 | 
1075 | 	const filterPacks = () => {
1076 | 		// Use value from packsSearch var instead of event
1077 | 		// to allow this function to be called from other actions.
1078 | 		const query = typeof packsSearch === 'string' && packsSearch.trim().toLowerCase();
1079 | 		if (query) {
1080 | 			// Allow searching by IDs too
1081 | 			filteredPacks = availablePacks.filter(pack =>
1082 | 				pack.name.toLowerCase().indexOf(query) >= 0 || String(pack.id).indexOf(query) >= 0);
1083 | 		} else {
1084 | 			filteredPacks = availablePacks;
1085 | 		}
1086 | 	};
1087 | 
1088 | 	const _appendPack = (id, e, opts = {}) => {
1089 | 		let availLocalPacks = getFromLocalStorage('magane.available');
1090 | 		if (!Array.isArray(availLocalPacks) || !availLocalPacks.length) {
1091 | 			availLocalPacks = [];
1092 | 		}
1093 | 
1094 | 		const foundIndex = availLocalPacks.findIndex(p => p.id === id);
1095 | 		if (foundIndex >= 0) {
1096 | 			if (opts.overwrite && opts.partial) {
1097 | 				// Allow partial properties overwrites
1098 | 				e = Object.assign(availLocalPacks[foundIndex], e);
1099 | 			} else if (!opts.overwrite) {
1100 | 				throw new Error(`Pack with ID ${id} already exist.`);
1101 | 			}
1102 | 		} else if (opts.overwrite) {
1103 | 			throw new Error(`Cannot overwrite missing pack with ID ${id}.`);
1104 | 		}
1105 | 
1106 | 		if (!e.count || !e.files.length) {
1107 | 			throw new Error('Invalid stickers count.');
1108 | 		}
1109 | 
1110 | 		const result = { pack: e };
1111 | 		if (isLocalPackID(id)) {
1112 | 			localPacks[id] = e;
1113 | 		}
1114 | 
1115 | 		if (foundIndex >= 0) {
1116 | 			availLocalPacks[foundIndex] = e;
1117 | 			const sharedIndex = availablePacks.findIndex(p => p.id === id);
1118 | 			if (sharedIndex !== -1) {
1119 | 				availablePacks[sharedIndex] = e;
1120 | 			}
1121 | 		} else {
1122 | 			availLocalPacks.unshift(e);
1123 | 			availablePacks.unshift(e);
1124 | 			availablePacks = availablePacks;
1125 | 		}
1126 | 
1127 | 		saveToLocalStorage('magane.available', availLocalPacks);
1128 | 		filterPacks();
1129 | 
1130 | 		if (opts.overwrite) {
1131 | 			log(`Overwritten pack with ID ${id}`);
1132 | 		} else {
1133 | 			log(`Added a new pack with ID ${id}`);
1134 | 		}
1135 | 		return result;
1136 | 	};
1137 | 
1138 | 	/*
1139 | 	const analyticsSubscribePack = async ids => {
1140 | 		const data = {
1141 | 			packs: ids.filter(id => typeof id === 'number')
1142 | 		};
1143 | 		const response = await fetch('https://magane.moe/api/packs/subscribe', {
1144 | 			method: 'POST',
1145 | 			headers: {
1146 | 				'Accept': 'application/json',
1147 | 				'Content-Type': 'application/json'
1148 |   			},
1149 | 			mode: 'cors',
1150 | 			body: JSON.stringify(data)
1151 | 		});
1152 | 	};
1153 | 
1154 | 	const sendSubscribedPacksOnce = async () => {
1155 | 		/*
1156 | 		if (getFromLocalStorage('magane.alreadySentAnalyticsPacksOnce')) return;
1157 | 		let data = subscribedPacks.map(pack => pack.id);
1158 | 		try {
1159 | 			await analyticsSubscribePack(data);
1160 | 			saveToLocalStorage('magane.alreadySentAnalyticsPacksOnce', true);
1161 | 		} catch (err) {
1162 | 			toastError('Unexpected error. Check your console for details.');
1163 | 		}
1164 | 	};
1165 | 	*/
1166 | 
1167 | 	const migrateStringPackIds = async () => {
1168 | 		let dirty = false;
1169 | 
1170 | 		const favorites = getFromLocalStorage('magane.favorites');
1171 | 		if (Array.isArray(favorites) && favorites.length) {
1172 | 			favorites.forEach(item => {
1173 | 				if (typeof item.pack === 'number' || isLocalPackID(item.pack)) return;
1174 | 				const result = parseInt(item.pack, 10);
1175 | 				if (isNaN(item.pack)) return;
1176 | 				item.pack = result;
1177 | 				dirty = true;
1178 | 			});
1179 | 		}
1180 | 
1181 | 		const subscribed = getFromLocalStorage('magane.subscribed');
1182 | 		if (Array.isArray(subscribed) && subscribed.length) {
1183 | 			subscribed.forEach(item => {
1184 | 				if (typeof item.id === 'number' || isLocalPackID(item.id)) return;
1185 | 				const result = parseInt(item.id, 10);
1186 | 				if (isNaN(item.id)) return;
1187 | 				item.id = result;
1188 | 				dirty = true;
1189 | 			});
1190 | 		}
1191 | 
1192 | 		if (dirty) {
1193 | 			toastInfo('Found packs/stickers to migrate, migrating now...');
1194 | 			saveToLocalStorage('magane.favorites', favorites);
1195 | 			saveToLocalStorage('magane.subscribed', subscribed);
1196 | 			await grabPacks(true);
1197 | 			toastSuccess('Migration successful.');
1198 | 		}
1199 | 	};
1200 | 
1201 | 	const parseFunctionArgs = (args, argNames = [], minArgs = 0) => {
1202 | 		// Allow calling window.magane.<function> with
1203 | 		// func(val1, val2, ..., valN) for backwards-compatibility, and
1204 | 		// func({arg1: val, arg2: val, ..., argN: val}) for a clean expandable future.
1205 | 		const isFirstArgAnObj = typeof args[0] === 'object';
1206 | 		if (!isFirstArgAnObj && args.length < minArgs) {
1207 | 			throw new Error(`This function expects at least ${minArgs} parameter(s).`);
1208 | 		}
1209 | 		const parsed = {};
1210 | 		for (let i = 0; i < argNames.length; i++) {
1211 | 			parsed[argNames[i]] = isFirstArgAnObj ? args[0][argNames[i]] : args[i];
1212 | 		}
1213 | 		return parsed;
1214 | 	};
1215 | 
1216 | 	const appendPack = (...args) => {
1217 | 		let { name, firstid, count, animated } = parseFunctionArgs(args,
1218 | 			['name', 'firstid', 'count', 'animated'], 3);
1219 | 
1220 | 		firstid = Number(firstid);
1221 | 		if (isNaN(firstid) || !isFinite(firstid) || firstid < 0) {
1222 | 			throw new Error('Invalid first ID.');
1223 | 		}
1224 | 
1225 | 		count = Math.max(Math.min(Number(count), 200), 0) || 0;
1226 | 		const mid = `startswith-${firstid}`;
1227 | 		const files = [];
1228 | 		for (let i = firstid; i < (firstid + count); i += 1) {
1229 | 			files.push(`${i}.png`);
1230 | 		}
1231 | 
1232 | 		return _appendPack(mid, {
1233 | 			name,
1234 | 			count,
1235 | 			id: mid,
1236 | 			animated: animated ? 1 : null,
1237 | 			files
1238 | 		});
1239 | 	};
1240 | 
1241 | 	const appendEmojisPack = (...args) => {
1242 | 		let { name, id, count, animated } = parseFunctionArgs(args,
1243 | 			['name', 'id', 'count', 'animated'], 3);
1244 | 
1245 | 		count = Math.max(Math.min(Number(count), 200), 0) || 0;
1246 | 		const mid = `emojis-${id}`;
1247 | 		const files = [];
1248 | 		for (let i = 0; i < count; i += 1) {
1249 | 			files.push(`${String(i + 1).padStart(3, '0')}.png`);
1250 | 		}
1251 | 
1252 | 		return _appendPack(mid, {
1253 | 			name,
1254 | 			count,
1255 | 			id: mid,
1256 | 			animated: animated ? 1 : null,
1257 | 			files
1258 | 		});
1259 | 	};
1260 | 
1261 | 	const appendCustomPack = (...args) => {
1262 | 		let { name, id, count, animated, template, files, thumbs } = parseFunctionArgs(args,
1263 | 			['name', 'id', 'count', 'animated', 'template', 'files', 'thumbs'], 5);
1264 | 
1265 | 		count = Math.max(Number(count), 0) || 0;
1266 | 		const mid = `custom-${id}`;
1267 | 		if (Array.isArray(files)) {
1268 | 			if (!files.length) {
1269 | 				throw new Error('"files" array cannot be empty.');
1270 | 			}
1271 | 		} else {
1272 | 			if (!template) {
1273 | 				throw new Error('"template" must be set if not using custom "files" array.');
1274 | 			}
1275 | 			files = [];
1276 | 			for (let i = 1; i <= count; i += 1) {
1277 | 				files.push(i + (animated ? '.gif' : '.png'));
1278 | 			}
1279 | 		}
1280 | 
1281 | 		return _appendPack(mid, {
1282 | 			name,
1283 | 			count,
1284 | 			id: mid,
1285 | 			animated: animated ? 1 : null,
1286 | 			files,
1287 | 			thumbs,
1288 | 			template
1289 | 		});
1290 | 	};
1291 | 
1292 | 	const editPack = (...args) => {
1293 | 		const { id, props } = parseFunctionArgs(args,
1294 | 			['id', 'props'], 2);
1295 | 
1296 | 		if (typeof props !== 'object') {
1297 | 			throw new Error('"props" must be an object.');
1298 | 		}
1299 | 
1300 | 		return _appendPack(id, props, {
1301 | 			overwrite: true,
1302 | 			partial: true
1303 | 		});
1304 | 	};
1305 | 
1306 | 	const deletePack = id => {
1307 | 		if (!isLocalPackID(id)) {
1308 | 			throw new Error('Pack ID must start with either "startswith-", "emojis-", or "custom-".');
1309 | 		}
1310 | 
1311 | 		const availLocalPacks = getFromLocalStorage('magane.available');
1312 | 		if (!Array.isArray(availLocalPacks) || !availLocalPacks.length) {
1313 | 			throw new Error('You have not imported any remote or custom packs');
1314 | 		}
1315 | 
1316 | 		const index = availLocalPacks.findIndex(p => p.id === id);
1317 | 		if (index === -1) {
1318 | 			throw new Error(`Unable to find pack with ID ${id}`);
1319 | 		}
1320 | 
1321 | 		// Force unfavorite stickers
1322 | 		favoriteStickers = favoriteStickers.filter(s => s.pack !== id);
1323 | 		saveToLocalStorage('magane.favorites', favoriteStickers);
1324 | 
1325 | 		// Force clear stickers stats
1326 | 		stickersStats = stickersStats.filter(s => s.pack !== id);
1327 | 		saveToLocalStorage('magane.stats', stickersStats);
1328 | 
1329 | 		// Update frequently used section (will also clean up simple pack data entry)
1330 | 		// eslint-disable-next-line no-use-before-define
1331 | 		updateFrequentlyUsed();
1332 | 
1333 | 		// Force unsubscribe
1334 | 		const subbedPack = subscribedPacks.find(p => p.id === id);
1335 | 		if (subbedPack)	{
1336 | 			unsubscribeToPack(subbedPack);
1337 | 		}
1338 | 
1339 | 		availLocalPacks.splice(index, 1);
1340 | 		saveToLocalStorage('magane.available', availLocalPacks);
1341 | 
1342 | 		const sharedIndex = availablePacks.findIndex(p => p.id === id);
1343 | 		if (sharedIndex !== -1) {
1344 | 			availablePacks.splice(sharedIndex, 1);
1345 | 			availablePacks = availablePacks;
1346 | 			filterPacks();
1347 | 		}
1348 | 
1349 | 		delete localPacks[id];
1350 | 		log(`Removed pack with ID ${id} (old index: ${index})`);
1351 | 		return true;
1352 | 	};
1353 | 
1354 | 	const searchPacks = keyword => {
1355 | 		if (!keyword) {
1356 | 			throw new Error('Keyword required');
1357 | 		}
1358 | 
1359 | 		keyword = keyword.toLowerCase();
1360 | 
1361 | 		const availLocalPacks = getFromLocalStorage('magane.available');
1362 | 		if (!Array.isArray(availLocalPacks) || !availLocalPacks.length) {
1363 | 			throw new Error('You have not imported any remote or custom packs');
1364 | 		}
1365 | 
1366 | 		return availLocalPacks.filter(p =>
1367 | 			p.name.toLowerCase().indexOf(keyword) >= 0 || p.id.indexOf(keyword) >= 0);
1368 | 	};
1369 | 
1370 | 	const setWindowMaganeAPIs = state => {
1371 | 		if (state) {
1372 | 			window.magane = {
1373 | 				appendPack,
1374 | 				appendEmojisPack,
1375 | 				appendCustomPack,
1376 | 				editPack,
1377 | 				deletePack,
1378 | 				searchPacks,
1379 | 				Helper,
1380 | 				Modules,
1381 | 				hasPermission
1382 | 			};
1383 | 		} else if (!(window.magane instanceof Node)) {
1384 | 			// For unknown reasons, if "window.magane" is not overriden,
1385 | 			// it ends up being a reference to #magane element (Svelte's quirk?)
1386 | 			delete window.magane;
1387 | 		}
1388 | 	};
1389 | 
1390 | 	const formatStickersCount = count =>
1391 | 		`<span class="counts"><span>–</span>${count} sticker${count === 1 ? '' : 's'}</span>`;
1392 | 
1393 | 	const formatPackAppendix = id => {
1394 | 		let tmp = `${id}`;
1395 | 		if (typeof id === 'string') {
1396 | 			if (id.startsWith('startswith-')) {
1397 | 				tmp = `LINE ${id.replace('startswith-', '')}`;
1398 | 			} else if (id.startsWith('emojis-')) {
1399 | 				tmp = `LINE Emojis ${id.replace('emojis-', '')}`;
1400 | 			} else if (id.startsWith('custom-')) {
1401 | 				tmp = id.replace('custom-', '');
1402 | 			}
1403 | 		}
1404 | 		return `<span class="appendix"><span>–</span><span title="ID: ${id}">${tmp}</span></span>`;
1405 | 	};
1406 | 
1407 | 	onMount(async () => {
1408 | 		// Simple check if Magane is mounted with legacy method or MaganeBD
1409 | 		base = main.parentNode.parentNode;
1410 | 
1411 | 		// If base is document.body, assumes BetterDiscord
1412 | 		mountType = document.body
1413 | 			? MountType.BETTERDISCORD
1414 | 			: MountType.LEGACY;
1415 | 
1416 | 		// Build script for other mods should probably find-replace the following if necessary.
1417 | 		mountType = mountType; // Svelte builds this line into: $$invalidate(0, mountType)
1418 | 
1419 | 		switch (mountType) {
1420 | 			case MountType.BETTERDISCORD:
1421 | 				log('Magane is likely mounted with MaganeBD.');
1422 | 				break;
1423 | 			case MountType.VENCORD:
1424 | 				log('Magane is mounted with MaganeVencord.');
1425 | 				break;
1426 | 			default:
1427 | 				log('Magane is mounted with other or legacy method.');
1428 | 		}
1429 | 
1430 | 		const startTime = Date.now();
1431 | 
1432 | 		try {
1433 | 			toast('Loading Magane\u2026');
1434 | 
1435 | 			// Background tasks
1436 | 			initModules();
1437 | 			getLocalStorage();
1438 | 			loadSettings();
1439 | 
1440 | 			await grabPacks();
1441 | 			await migrateStringPackIds();
1442 | 
1443 | 			toastSuccess('Magane is now ready!');
1444 | 
1445 | 			// Init ResizeObserver
1446 | 			initResizeObserver();
1447 | 		} catch (error) {
1448 | 			console.error(error);
1449 | 			toastError('Unexpected error occurred when initializing Magane. Check your console for details.');
1450 | 		}
1451 | 
1452 | 		log(`Time taken: ${(Date.now() - startTime) / 1000}s.`);
1453 | 
1454 | 		// Only check for updates if running on BetterDiscord
1455 | 		if (!settings.disableUpdateCheck && mountType === MountType.BETTERDISCORD) {
1456 | 			await checkUpdate();
1457 | 		}
1458 | 	});
1459 | 
1460 | 	onDestroy(() => {
1461 | 		// eslint-disable-next-line no-use-before-define
1462 | 		document.removeEventListener('click', maganeBlurHandler);
1463 | 		// eslint-disable-next-line no-use-before-define
1464 | 		document.removeEventListener('keyup', onKeydownEvent);
1465 | 
1466 | 		// Destroy any existing button components
1467 | 		let destroyedCount = 0;
1468 | 		for (let i = 0; i < components.length; i++) {
1469 | 			try {
1470 | 				components[i].$destroy();
1471 | 				destroyedCount++;
1472 | 			} catch (_) {}
1473 | 		}
1474 | 
1475 | 		// Clear all pending timeouts
1476 | 		for (const timeout of Object.values(waitForTimeouts)) {
1477 | 			clearTimeout(timeout);
1478 | 		}
1479 | 
1480 | 		// Disconnect all textArea(s) from observer
1481 | 		if (resizeObserver) {
1482 | 			resizeObserver.disconnect();
1483 | 		}
1484 | 
1485 | 		setWindowMaganeAPIs(false);
1486 | 		log(`${destroyedCount}/${components.length} internal component(s) cleaned up.`);
1487 | 	});
1488 | 
1489 | 	const maganeBlurHandler = e => {
1490 | 		const stickerWindow = main.querySelector('.stickerWindow');
1491 | 		if (stickerWindow) {
1492 | 			const { x, y, width, height } = stickerWindow.getBoundingClientRect();
1493 | 			if (e.target) {
1494 | 				if (activeComponent?.element.contains(e.target)) return;
1495 | 				const visibleModals = document.querySelectorAll('[class^="layerContainer-"]');
1496 | 				if (visibleModals.length && Array.from(visibleModals).some(m => m.contains(e.target))) return;
1497 | 			}
1498 | 			if (!((e.clientX <= x + width && e.clientX >= x) &&
1499 | 				(e.clientY <= y + height && e.clientY >= y))
1500 | 			) {
1501 | 				// eslint-disable-next-line no-use-before-define
1502 | 				toggleStickerWindow(false);
1503 | 			}
1504 | 		}
1505 | 	};
1506 | 
1507 | 	const toggleStickerWindow = (forceState, component) => {
1508 | 		if (!document.body.contains(main)) {
1509 | 			return toastError('Oh no! Magane was unexpectedly destroyed.. Please consider updating to MaganeBD instead.', { timeout: 6000 });
1510 | 		}
1511 | 
1512 | 		// Force-close previous active component if it's a different component
1513 | 		if (component && activeComponent && component !== activeComponent) {
1514 | 			toggleStickerWindow(false, activeComponent);
1515 | 			activeComponent = null;
1516 | 		}
1517 | 
1518 | 		// If no previously active component, simply assign the first valid one
1519 | 		// (e.g. on first launch, or after switching channels).
1520 | 		let toggledComponent = component || activeComponent;
1521 | 		if (!toggledComponent && components.length) {
1522 | 			toggledComponent = components.find(component => document.body.contains(component.element));
1523 | 		}
1524 | 
1525 | 		// If unable to choose a component, return early
1526 | 		if (!toggledComponent) return;
1527 | 		if (!document.body.contains(toggledComponent.textArea)) return;
1528 | 
1529 | 		const active = typeof forceState === 'undefined' ? !stickerWindowActive : forceState;
1530 | 		if (active) {
1531 | 			// Re-position magane's sticker window
1532 | 			updateStickerWindowPosition(toggledComponent);
1533 | 
1534 | 			// One-time warning for viewport height <= 700px when opening Magane window
1535 | 			if (!settings.ignoreViewportSize && !isWarnedAboutViewportHeight) {
1536 | 				const viewportHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
1537 | 				if (viewportHeight <= 700) {
1538 | 					toastWarn('Viewport height is less than 700px, Magane window may not display properly.', { timeout: 6000 });
1539 | 					isWarnedAboutViewportHeight = true;
1540 | 				}
1541 | 			}
1542 | 
1543 | 			// Set toggled component as currently active component
1544 | 			activeComponent = toggledComponent;
1545 | 			document.addEventListener('click', maganeBlurHandler);
1546 | 		} else {
1547 | 			document.removeEventListener('click', maganeBlurHandler);
1548 | 		}
1549 | 
1550 | 		stickerWindowActive = active;
1551 | 		toggledComponent.active = active;
1552 | 	};
1553 | 
1554 | 	const toggleStickerModal = () => {
1555 | 		const active = !stickerAddModalActive;
1556 | 		if (active && activeTab === null) {
1557 | 			// eslint-disable-next-line no-use-before-define
1558 | 			activateTab(0);
1559 | 		}
1560 | 		stickerAddModalActive = active;
1561 | 	};
1562 | 
1563 | 	const activateTab = value => {
1564 | 		activeTab = value;
1565 | 		if (!stickerAddModalTabsInit[activeTab]) {
1566 | 			// Trigger DOM build for this tab for the first time (if applicable)
1567 | 			stickerAddModalTabsInit[activeTab] = true;
1568 | 		}
1569 | 	};
1570 | 
1571 | 	const scrollToStickers = id => {
1572 | 		animateScroll.scrollTo({
1573 | 			element: id.replace(/([.])/g, '\\$1'),
1574 | 			container: main.querySelector('.stickers')
1575 | 		});
1576 | 	};
1577 | 
1578 | 	const movePack = event => {
1579 | 		const value = event.target.value.trim();
1580 | 		if (event.keyCode !== 13 || !value.length) return;
1581 | 
1582 | 		let newIndex = Number(value);
1583 | 		if (isNaN(newIndex) || newIndex < 1 || newIndex > subscribedPacks.length) {
1584 | 			return toastError(`New position must be ≥ 1 and ≤ ${subscribedPacks.length}.`);
1585 | 		}
1586 | 		newIndex--;
1587 | 
1588 | 		let packId = event.target.dataset.pack;
1589 | 		if (typeof packId === 'undefined') return;
1590 | 		if (!isLocalPackID(packId)) packId = Number(packId);
1591 | 
1592 | 		const oldIndex = subscribedPacks.findIndex(pack => pack.id === packId);
1593 | 		if (oldIndex === newIndex) return;
1594 | 
1595 | 		// Pull pack from its old index
1596 | 		const packData = subscribedPacks.splice(oldIndex, 1);
1597 | 		subscribedPacksSimple.splice(oldIndex, 1);
1598 | 
1599 | 		// Push pack to the new index
1600 | 		subscribedPacks.splice(newIndex, 0, packData[0]);
1601 | 		subscribedPacksSimple.splice(newIndex, 0, packData[0].id);
1602 | 
1603 | 		// Unfocus and restore input box
1604 | 		event.target.blur();
1605 | 		event.target.value = String(oldIndex);
1606 | 
1607 | 		// Update UI and storage
1608 | 		subscribedPacks = subscribedPacks;
1609 | 		subscribedPacksSimple = subscribedPacksSimple;
1610 | 		saveToLocalStorage('magane.subscribed', subscribedPacks);
1611 | 		toastSuccess(`Moved pack from position ${oldIndex + 1} to ${newIndex + 1}.`);
1612 | 	};
1613 | 
1614 | 	const deleteLocalPack = id => {
1615 | 		try {
1616 | 			const _name = localPacks[id].name;
1617 | 			const deleted = deletePack(id);
1618 | 			if (deleted) {
1619 | 				toastSuccess(`Removed pack ${_name}.`, { nolog: true });
1620 | 			}
1621 | 		} catch (error) {
1622 | 			console.error(error);
1623 | 			toastError(error.toString(), { nolog: true });
1624 | 		}
1625 | 	};
1626 | 
1627 | 	const processRemotePack = async (data, opts) => {
1628 | 		const pack = {
1629 | 			id: '',
1630 | 			name: '',
1631 | 			files: [],
1632 | 			count: 0,
1633 | 			remoteType: 0
1634 | 		};
1635 | 
1636 | 		if (opts) {
1637 | 			for (const key of Object.keys(opts)) {
1638 | 				pack[key] = opts[key];
1639 | 			}
1640 | 		}
1641 | 
1642 | 		// Expandable if required
1643 | 		switch (pack.remoteType) {
1644 | 			case 1: // Chibisafe Albums
1645 | 				pack.name = String(data.album.name);
1646 | 
1647 | 				pack.thumbs = [];
1648 | 				for (let i = 0; i < data.album.files.length; i++) {
1649 | 					pack.files.push(data.album.files[i].url);
1650 | 					pack.thumbs.push(data.album.files[i].thumb || null);
1651 | 				}
1652 | 				break;
1653 | 			case 2: // Old Chibisafe and Lolisafe v3 Albums
1654 | 				pack.name = String(data.name);
1655 | 
1656 | 				pack.thumbs = [];
1657 | 				for (let i = 0; i < data.files.length; i++) {
1658 | 					pack.files.push(data.files[i].url);
1659 | 					pack.thumbs.push(data.files[i].thumb || null);
1660 | 				}
1661 | 				break;
1662 | 			case 0: // Custom JSON
1663 | 			default:
1664 | 				if (['id', 'name', 'files'].some(key => !data[key])) {
1665 | 					throw new Error('Invalid config. Some required fields are missing.');
1666 | 				}
1667 | 
1668 | 				pack.id = String(data.id);
1669 | 				pack.name = String(data.name);
1670 | 
1671 | 				if (data.files.some(file => typeof file !== 'string')) {
1672 | 					throw new Error('Invalid "files" array. Some values are not string.');
1673 | 				}
1674 | 				pack.files = data.files;
1675 | 
1676 | 				if (Array.isArray(data.thumbs)) {
1677 | 					if (data.thumbs.some(thumb => typeof thumb !== 'string' && thumb !== null)) {
1678 | 						throw new Error('Invalid "thumbs" array. Some values are neither string nor null.');
1679 | 					}
1680 | 					pack.thumbs = data.thumbs;
1681 | 				}
1682 | 
1683 | 				pack.description = data.description ? String(data.description) : null;
1684 | 				pack.homeUrl = data.homeUrl ? String(data.homeUrl) : null;
1685 | 				pack.template = data.template ? String(data.template) : null;
1686 | 
1687 | 				// Override update URL if required
1688 | 				if (data.updateUrl) {
1689 | 					pack.updateUrl = String(data.updateUrl);
1690 | 				}
1691 | 				break;
1692 | 		}
1693 | 
1694 | 		// General chores
1695 | 		pack.count = pack.files.length;
1696 | 		// If all thumbs are missing, just empty the array
1697 | 		if (Array.isArray(pack.thumbs) && pack.thumbs.every(thumb => thumb === null)) {
1698 | 			pack.thumbs = [];
1699 | 		}
1700 | 
1701 | 		return pack;
1702 | 	};
1703 | 
1704 | 	const fetchRemotePack = async url => {
1705 | 		const opts = { updateUrl: url };
1706 | 
1707 | 		if (!url || !/^https?:\/\//.test(url)) {
1708 | 			throw new Error('URL must have HTTP(s) protocol.');
1709 | 		}
1710 | 
1711 | 		// Expandable if required
1712 | 		const regExes = [
1713 | 			// RegEx for Chibisafe album links (basically /a/identifier)
1714 | 			/^(.+:\/\/)(.+)\/a\/([^/\s]+)/,
1715 | 			// RegEx for old method of saving Chibisafe album API (/api/album/identifier)
1716 | 			/^(.+:\/\/)(.+)\/api\/album\/([^/\s]+)/
1717 | 		];
1718 | 
1719 | 		let match = { index: -1 };
1720 | 		for (let i = 0; i < regExes.length; i++) {
1721 | 			const _match = url.match(regExes[i]);
1722 | 			if (_match && !_match.some(m => m === undefined)) {
1723 | 				match = {
1724 | 					index: i,
1725 | 					result: _match
1726 | 				};
1727 | 			}
1728 | 		}
1729 | 
1730 | 		let data;
1731 | 
1732 | 		if (match.index === 0 || match.index === 1) {
1733 | 			// Re-map old method of saving Chibisafe album API
1734 | 			if (match.index === 1) {
1735 | 				// Basically restores it to its original public album link
1736 | 				url = `${match.result[1]}${match.result[2]}/a/${match.result[3]}`;
1737 | 				opts.updateUrl = url;
1738 | 			}
1739 | 
1740 | 			opts.id = `${match.result[2]}-${match.result[3]}`;
1741 | 			opts.homeUrl = url;
1742 | 
1743 | 			// API will now be always deteremined on-the-fly,
1744 | 			// to allow changing this in the future, if required,
1745 | 			// without breaking packs saved with any older methods.
1746 | 			const downloadUrl = `${match.result[1]}${match.result[2]}/api/album/${match.result[3]}`;
1747 | 
1748 | 			// Initially try with latest Chibisafe API
1749 | 			const chibisafeSuffix = '/view?page=1&limit=500';
1750 | 			log(`Fetching chibisafe album: ${downloadUrl + chibisafeSuffix}`);
1751 | 			let response = await fetch(downloadUrl + chibisafeSuffix, { cache: 'no-cache' })
1752 | 				.catch(response => response); // ignore network errors, mainly CORS
1753 | 
1754 | 			if (response?.status === 200 || response?.status === 304) {
1755 | 				// Parse as JSON immediately, and assign remote type 1
1756 | 				data = await response.json();
1757 | 				opts.remoteType = 1;
1758 | 			} else {
1759 | 				// Fallback to old API for backwards-compatibility,
1760 | 				// also to support my lolisafe v3 forks cause im too lazy to update its API.
1761 | 				const _status = response?.status
1762 | 					? `${response.status} ${response.statusText}`.trim()
1763 | 					: 'N/A';
1764 | 				log(`HTTP error ${_status}, re-trying with: ${downloadUrl}`);
1765 | 				response = await fetch(downloadUrl, { cache: 'no-cache' });
1766 | 				data = await response.json();
1767 | 				opts.remoteType = 2; // assign remote type 2
1768 | 			}
1769 | 		} else {
1770 | 			// Custom JSON
1771 | 			const response = await fetch(opts.updateUrl);
1772 | 			data = await response.json();
1773 | 			opts.remoteType = 0; // assign remote type 0
1774 | 		}
1775 | 
1776 | 		if (!data) {
1777 | 			throw new Error('Unable to parse data. Check your console for details.');
1778 | 		}
1779 | 
1780 | 		return processRemotePack(data, opts);
1781 | 	};
1782 | 
1783 | 	const updateRemotePack = async (id, silent = false) => {
1784 | 		try {
1785 | 			if (!localPacks[id] || !localPacks[id].updateUrl) return;
1786 | 			if (!silent) {
1787 | 				toast('Updating pack information\u2026', { nolog: true, timeout: 1000 });
1788 | 			}
1789 | 
1790 | 			// Only pass update URL, the function will determine by itself what to do with it
1791 | 			const pack = await fetchRemotePack(localPacks[id].updateUrl);
1792 | 			pack.id = id;
1793 | 
1794 | 			const stored = _appendPack(pack.id, pack, { overwrite: true });
1795 | 
1796 | 			// Clean up favorites
1797 | 			favoriteStickers = favoriteStickers.filter(s =>
1798 | 				s.pack !== id || stored.pack.files.findIndex(f => f === s.id) !== -1);
1799 | 			saveToLocalStorage('magane.favorites', favoriteStickers);
1800 | 
1801 | 			// Clean up stickers stats
1802 | 			stickersStats = stickersStats.filter(s =>
1803 | 				s.pack !== id || stored.pack.files.findIndex(f => f === s.id) !== -1);
1804 | 			saveToLocalStorage('magane.stats', stickersStats);
1805 | 
1806 | 			// Update simple pack data entry if required
1807 | 			if (simplePacksData[id]) {
1808 | 				simplePacksData[id].name = stored.pack.name;
1809 | 			}
1810 | 
1811 | 			// Update frequently used section (will also clean up simple pack data entry)
1812 | 			// eslint-disable-next-line no-use-before-define
1813 | 			updateFrequentlyUsed();
1814 | 
1815 | 			// Update subscribed pack data
1816 | 			const subIndex = subscribedPacks.findIndex(p => p.id === id);
1817 | 			if (subIndex !== -1)	{
1818 | 				subscribedPacks[subIndex] = stored.pack;
1819 | 				subscribedPacksSimple[subIndex] = stored.pack.id;
1820 | 				saveToLocalStorage('magane.subscribed', subscribedPacks);
1821 | 			}
1822 | 
1823 | 			if (!silent) {
1824 | 				toastSuccess(`Updated pack ${stored.pack.name}.`, { nolog: true });
1825 | 			}
1826 | 			return stored;
1827 | 		} catch (error) {
1828 | 			console.error(error);
1829 | 			toastError(error.toString(), { nolog: true });
1830 | 		}
1831 | 	};
1832 | 
1833 | 	const showPackInfo = id => {
1834 | 		if (!localPacks[id]) return;
1835 | 
1836 | 		let remoteType = 'N/A';
1837 | 		if (typeof localPacks[id].remoteType === 'number') {
1838 | 			remoteType = `${localPacks[id].remoteType} – ${remotePackTypes[localPacks[id].remoteType] || 'N/A'}`;
1839 | 		} else if (id.startsWith('startswith-')) {
1840 | 			remoteType = 'LINE';
1841 | 		} else if (id.startsWith('emojis-')) {
1842 | 			remoteType = 'LINE Emojis';
1843 | 		}
1844 | 
1845 | 		// Formatting is very particular, so we do this the old-fashioned way
1846 | 		/* eslint-disable prefer-template */
1847 | 		const content = '**ID:**\n\n' +
1848 | 			'```\n' + id + '\n```\n\n' +
1849 | 			'**Name:**\n\n' +
1850 | 			localPacks[id].name + '\n\n' +
1851 | 			'**Count:**\n\n' +
1852 | 			localPacks[id].count + '\n\n' +
1853 | 			'**Description:**\n\n' +
1854 | 			(localPacks[id].description || 'N/A') + '\n\n' +
1855 | 			'**Home URL:**\n\n' +
1856 | 			(localPacks[id].homeUrl || 'N/A') + '\n\n' +
1857 | 			'**Update URL:**\n\n' +
1858 | 			'```\n' + (localPacks[id].updateUrl || 'N/A') + '\n```\n\n' +
1859 | 			'**Remote Type:**\n\n' +
1860 | 			remoteType;
1861 | 		/* eslint-enable prefer-template */
1862 | 
1863 | 		Helper.Alerts.show(
1864 | 			localPacks[id].name,
1865 | 			content
1866 | 		);
1867 | 	};
1868 | 
1869 | 	const assertImportPacksConsent = (context, onConfirm) => {
1870 | 		// Markdown, so we do double \n for new line
1871 | 		const content = `**Please continue only if you trust these packs.**\n\n${context}`;
1872 | 		Helper.Alerts.show(
1873 | 			'Import Packs',
1874 | 			content,
1875 | 			{
1876 | 				confirmText: 'Import',
1877 | 				cancelText: 'Cancel',
1878 | 				danger: true,
1879 | 				onConfirm
1880 | 			}
1881 | 		);
1882 | 	};
1883 | 
1884 | 	const parseLinePack = () => {
1885 | 		if (!linePackSearch) return;
1886 | 
1887 | 		const linePackUrls = linePackSearch.split('\n')
1888 | 			.map(url => url.trim())
1889 | 			.filter(url => url.length);
1890 | 
1891 | 		if (!linePackUrls.length) return;
1892 | 
1893 | 		/* eslint-disable-next-line prefer-template */
1894 | 		assertImportPacksConsent('URLs:\n\n```\n' + linePackUrls.join('\n') + '\n```', async () => {
1895 | 			toast('Importing packs\u2026', { nolog: true, timeout: 1000 });
1896 | 			const failed = [];
1897 | 			for (const url of linePackUrls) {
1898 | 				try {
1899 | 					const match = url.match(/^(https?:\/\/store\.line\.me\/((sticker|emoji)shop)\/product\/)?([a-z0-9]+)/);
1900 | 					if (!match) throw new Error('Unsupported LINE Store URL or ID.');
1901 | 
1902 | 					let stored;
1903 | 					if (match[3] === 'emoji') {
1904 | 						// LINE Emojis will only work when using its full URL
1905 | 						const id = match[4];
1906 | 						const response = await fetch(`https://magane.moe/api/proxy/emoji/${id}`);
1907 | 						const props = await response.json();
1908 | 						stored = appendEmojisPack({
1909 | 							name: props.title,
1910 | 							id: props.id,
1911 | 							count: props.len,
1912 | 							animated: props.hasAnimation || null
1913 | 						});
1914 | 					} else {
1915 | 						// LINE Stickers work with either its full URL or just its ID
1916 | 						const id = Number(match[4]);
1917 | 						if (isNaN(id) || id < 0) return toastError('Unsupported LINE Stickers ID.');
1918 | 						const response = await fetch(`https://magane.moe/api/proxy/sticker/${id}`);
1919 | 						const props = await response.json();
1920 | 						stored = appendPack({
1921 | 							name: props.title,
1922 | 							firstid: props.first,
1923 | 							count: props.len,
1924 | 							animated: props.hasAnimation
1925 | 						});
1926 | 					}
1927 | 					toastSuccess(`Added a new pack ${stored.pack.name}.`, { nolog: true });
1928 | 				} catch (error) {
1929 | 					console.error(error);
1930 | 					toastError(error.toString(), { nolog: true });
1931 | 					failed.push(url);
1932 | 				}
1933 | 			}
1934 | 
1935 | 			if (failed.length) {
1936 | 				toastError('Failed to add some remote packs. Their URLs have been kept in the input box.');
1937 | 				linePackSearch = failed.join('\n');
1938 | 			} else {
1939 | 				linePackSearch = '';
1940 | 			}
1941 | 		});
1942 | 	};
1943 | 
1944 | 	const parseRemotePackUrl = () => {
1945 | 		if (!remotePackUrl) return;
1946 | 
1947 | 		const remotePackUrls = remotePackUrl.split('\n')
1948 | 			.map(url => url.trim())
1949 | 			.filter(url => url.length);
1950 | 
1951 | 		if (!remotePackUrls.length) return;
1952 | 
1953 | 		/* eslint-disable-next-line prefer-template */
1954 | 		assertImportPacksConsent('URLs:\n\n```\n' + remotePackUrls.join('\n') + '\n```', async () => {
1955 | 			toast('Importing packs\u2026', { nolog: true, timeout: 1000 });
1956 | 			const failed = [];
1957 | 			for (const url of remotePackUrls) {
1958 | 				try {
1959 | 					const pack = await fetchRemotePack(url);
1960 | 					pack.id = `custom-${pack.id}`;
1961 | 					const stored = _appendPack(pack.id, pack);
1962 | 					toastSuccess(`Added a new pack ${stored.pack.name}.`, { nolog: true });
1963 | 				} catch (error) {
1964 | 					console.error(error);
1965 | 					toastError(error.toString(), { nolog: true });
1966 | 					failed.push(url);
1967 | 				}
1968 | 			}
1969 | 
1970 | 			if (failed.length) {
1971 | 				toastError('Failed to add some remote packs. Their URLs have been kept in the input box.');
1972 | 				remotePackUrl = failed.join('\n');
1973 | 			} else {
1974 | 				remotePackUrl = '';
1975 | 			}
1976 | 		});
1977 | 	};
1978 | 
1979 | 	const onLocalRemotePackChange = async event => {
1980 | 		const { files } = event.target;
1981 | 		if (!files.length) return false;
1982 | 
1983 | 		const results = [];
1984 | 
1985 | 		toast(`Reading ${files.length} file${files.length === 1 ? '' : 's'}\u2026`);
1986 | 		for (const file of files) {
1987 | 			await new Promise((resolve, reject) => {
1988 | 				const reader = new FileReader();
1989 | 				reader.onload = e => {
1990 | 					try {
1991 | 						const data = JSON.parse(e.target.result);
1992 | 						results.push({ name: file.name, data });
1993 | 						resolve();
1994 | 					} catch (error) {
1995 | 						reject(error);
1996 | 					}
1997 | 				};
1998 | 				log(`Reading ${file.name}\u2026`);
1999 | 				reader.readAsText(file);
2000 | 			}).catch(error => {
2001 | 				console.error(error);
2002 | 				toastError(`${file.name} is not a valid JSON file.`);
2003 | 			});
2004 | 		}
2005 | 
2006 | 		// Reset selected files in the hidden input
2007 | 		event.target.value = '';
2008 | 
2009 | 		const fileNames = results.map(result => result.name);
2010 | 
2011 | 		/* eslint-disable-next-line prefer-template */
2012 | 		assertImportPacksConsent('Files:\n\n```\n' + fileNames.join('\n') + '\n```', async () => {
2013 | 			const failedResults = [];
2014 | 			for (const result of results) {
2015 | 				try {
2016 | 					const pack = await processRemotePack(result.data);
2017 | 					pack.id = `custom-${pack.id}`;
2018 | 					const stored = _appendPack(pack.id, pack);
2019 | 					toastSuccess(`Added a new pack ${stored.pack.name}.`, { nolog: true });
2020 | 				} catch (error) {
2021 | 					console.error(error);
2022 | 					toastError(error.toString(), { nolog: true });
2023 | 					failedResults.push(result.name);
2024 | 				}
2025 | 			}
2026 | 
2027 | 			if (failedResults.length) {
2028 | 				toastError(`Failed to add: ${failedResults.join(',')}.`);
2029 | 			}
2030 | 		});
2031 | 	};
2032 | 
2033 | 	const loadLocalRemotePack = () => {
2034 | 		const element = document.getElementById('localRemotePackInput');
2035 | 		element.click();
2036 | 	};
2037 | 
2038 | 	const bulkUpdateRemotePacks = () => {
2039 | 		const packs = Object.values(localPacks)
2040 | 			.filter(pack => pack.updateUrl)
2041 | 			.map(pack => pack.id);
2042 | 		if (!packs.length) {
2043 | 			return toastWarn('You do not have any remote packs that can be updated.');
2044 | 		}
2045 | 
2046 | 		// Markdown, so we do double \n for new line
2047 | 		const content = `**Please confirm that you want to update __${packs.length}__ remote pack${packs.length === 1 ? '' : 's'}.**`;
2048 | 		Helper.Alerts.show(
2049 | 			`Update ${packs.length} remote pack${packs.length === 1 ? '' : 's'}`,
2050 | 			content,
2051 | 			{
2052 | 				confirmText: 'Yes, update all!',
2053 | 				cancelText: 'Cancel',
2054 | 				danger: true,
2055 | 				onConfirm: async () => {
2056 | 					try {
2057 | 						for (let i = 0; i < packs.length; i++) {
2058 | 							toast(`Updating pack ${i + 1} out of ${packs.length}\u2026`, { nolog: true, timeout: 500 });
2059 | 							const stored = await updateRemotePack(packs[i], true);
2060 | 							if (!stored) break;
2061 | 						}
2062 | 						toastSuccess('Updates completed.', { nolog: true });
2063 | 					} catch (ex) {
2064 | 						toastWarn('Updates cancelled due to unexpected errors.', { nolog: true });
2065 | 						// Do nothing
2066 | 					}
2067 | 				}
2068 | 			}
2069 | 		);
2070 | 	};
2071 | 
2072 | 	const onSettingsChange = event => {
2073 | 		const { name } = event.target;
2074 | 		if (!name) return false;
2075 | 
2076 | 		// Value already changed via Svelte's bind:value
2077 | 		log(`settings['${name}'] = ${settings[name]}`);
2078 | 
2079 | 		// Settings that require their own on-change tasks
2080 | 		setWindowMaganeAPIs(settings.enableWindowMagane);
2081 | 
2082 | 		saveToLocalStorage('magane.settings', settings);
2083 | 		toastSuccess('Settings saved!', { nolog: true });
2084 | 	};
2085 | 
2086 | 	const updateFrequentlyUsed = () => {
2087 | 		// Get pack IDs of stickers previously included in frequently used section
2088 | 		const lastPackIDs = frequentlyUsedSorted
2089 | 			.map(v => v.pack)
2090 | 			.filter((v, i, a) => a.indexOf(v) === i);
2091 | 
2092 | 		if (settings.frequentlyUsed) {
2093 | 			// Only keep stats of ceil(settings.frequentlyUsed * 1.5) frequently used stickers
2094 | 			// to avoid infinite growth of extraneous useless data.
2095 | 			// NOTE: If full usage stats is ever required in the future, this check should be removed.
2096 | 			stickersStats = stickersStats
2097 | 				.sort((a, b) => b.used - a.used || b.lastUsed - a.lastUsed)
2098 | 				.slice(0, Math.ceil(settings.frequentlyUsed * 1.5));
2099 | 
2100 | 			const sliced = stickersStats.slice(0, settings.frequentlyUsed);
2101 | 			sliced.forEach(sticker => initSimplePackDataEntry(sticker.pack));
2102 | 
2103 | 			frequentlyUsedSorted = sliced;
2104 | 		} else if (frequentlyUsedSorted.length) {
2105 | 			// Refresh UI only if required
2106 | 			frequentlyUsedSorted = [];
2107 | 		}
2108 | 
2109 | 		// Try to clean up simple pack data entry if no longer used
2110 | 		lastPackIDs.forEach(cleanUpSimplePackDataEntry);
2111 | 	};
2112 | 
2113 | 	const parseFrequentlyUsedInput = () => {
2114 | 		const count = parseInt(frequentlyUsedInput, 10);
2115 | 		if (isNaN(count) || count < 0) {
2116 | 			return toastError('Invalid number.');
2117 | 		}
2118 | 
2119 | 		settings.frequentlyUsed = count;
2120 | 		log(`settings['frequentlyUsed'] = ${settings.frequentlyUsed}`);
2121 | 		saveToLocalStorage('magane.settings', settings);
2122 | 
2123 | 		if (count === 0) {
2124 | 			stickersStats = [];
2125 | 			saveToLocalStorage('magane.stats', stickersStats);
2126 | 			toastSuccess('Settings saved, and stickers usage cleared!', { nolog: true });
2127 | 		} else {
2128 | 			toastSuccess('Settings saved!', { nolog: true });
2129 | 		}
2130 | 
2131 | 		// Refresh UI
2132 | 		updateFrequentlyUsed();
2133 | 	};
2134 | 
2135 | 	const onKeydownEvent = event => {
2136 | 		for (const prop in hotkey) {
2137 | 			if (prop === 'key' || prop === 'code') {
2138 | 				if (hotkey[prop] !== event[prop].toLocaleLowerCase()) return;
2139 | 			} else if (hotkey[prop] !== event[prop]) {
2140 | 				return;
2141 | 			}
2142 | 		}
2143 | 
2144 | 		if (event.target?.classList.contains('supress-magane-hotkey')) return;
2145 | 		if (components.length) {
2146 | 			event.preventDefault();
2147 | 			toggleStickerWindow();
2148 | 		}
2149 | 	};
2150 | 
2151 | 	const parseThenInitHotkey = save => {
2152 | 		// Clean input
2153 | 		const keys = (hotkeyInput || '')
2154 | 			.split('+')
2155 | 			.map(key => key.trim());
2156 | 		hotkeyInput = keys.join('+');
2157 | 		if (hotkeyInput && keys.length) {
2158 | 			// Preset with "key" & "code" ordered first for earlier if-checks in listener event
2159 | 			const tmp = {
2160 | 				key: null,
2161 | 				code: null,
2162 | 				altKey: false,
2163 | 				metaKey: false,
2164 | 				shiftKey: false,
2165 | 				ctrlKey: false
2166 | 			};
2167 | 
2168 | 			for (let i = 0; i < keys.length; i++) {
2169 | 				let key = keys[i].toLocaleLowerCase();
2170 | 				// If last key, assume not modifiers, thus parse extra information
2171 | 				if (i === keys.length - 1) {
2172 | 					if (/^(ctrl|ctl)/.test(key)) {
2173 | 						key = key.replace(/^(ctrl|ctl)/, 'control');
2174 | 					}
2175 | 					if (/(right|left)$/.test(key)) {
2176 | 						tmp.code = key;
2177 | 						tmp.key = key.replace(/(right|left)$/, '');
2178 | 					} else {
2179 | 						tmp.key = key;
2180 | 					}
2181 | 				// Otherwise..
2182 | 				} else if (/^alt/.test(key)) {
2183 | 					tmp.altKey = true;
2184 | 				} else if (/^meta/.test(key)) {
2185 | 					tmp.metaKey = true;
2186 | 				} else if (/^shift/.test(key)) {
2187 | 					tmp.shiftKey = true;
2188 | 				} else if (/^(control|ctrl|ctl)/.test(key)) {
2189 | 					tmp.ctrlKey = true;
2190 | 				} else {
2191 | 					return toastError('Invalid hotkey. If used with modifier keys, only support 1 other key.',
2192 | 						{ timeout: 6000 });
2193 | 				}
2194 | 			}
2195 | 
2196 | 			// Useless if unset with side suffix
2197 | 			if (!tmp.code) {
2198 | 				delete tmp.code;
2199 | 			}
2200 | 
2201 | 			hotkey = tmp;
2202 | 			document.addEventListener('keyup', onKeydownEvent);
2203 | 		} else {
2204 | 			hotkey = null;
2205 | 			document.removeEventListener('keyup', onKeydownEvent);
2206 | 		}
2207 | 
2208 | 		if (save) {
2209 | 			settings.hotkey = hotkeyInput;
2210 | 			log(`settings['hotkey'] = ${settings.hotkey}`);
2211 | 
2212 | 			saveToLocalStorage('magane.settings', settings);
2213 | 			toastSuccess(hotkey ? 'Hotkey saved.' : 'Hotkey cleared.', { nolog: true });
2214 | 		}
2215 | 	};
2216 | 
2217 | 	const onReplaceDatabaseChange = event => {
2218 | 		const { files } = event.target;
2219 | 		if (!files.length) return false;
2220 | 
2221 | 		const reader = new FileReader();
2222 | 		reader.onload = e => {
2223 | 			// Reset selected file in the hidden input
2224 | 			event.target.value = '';
2225 | 
2226 | 			let result;
2227 | 			try {
2228 | 				result = JSON.parse(e.target.result);
2229 | 			} catch (error) {
2230 | 				console.error(error);
2231 | 				toastError('The selected file is not a valid JSON file.');
2232 | 			}
2233 | 
2234 | 			// This accepts Discord's Markdown
2235 | 			let content = 'This database contains the following data:';
2236 | 
2237 | 			const valid = [];
2238 | 			const invalid = [];
2239 | 			for (const key of allowedStorageKeys) {
2240 | 				if (typeof (result[key]) === 'undefined' || result[key] === null) {
2241 | 					invalid.push(key);
2242 | 				} else {
2243 | 					let len = null;
2244 | 					if (Array.isArray(result[key])) {
2245 | 						len = result[key].length;
2246 | 					} else {
2247 | 						try {
2248 | 							len = Object.keys(result[key]).length;
2249 | 						} catch (ex) {
2250 | 							// Do nothing (any other non {}-object values)
2251 | 						}
2252 | 					}
2253 | 
2254 | 					let append = '';
2255 | 					if (len !== null) {
2256 | 						append = ` has **${len}** item${len === 1 ? '' : 's'}`;
2257 | 					}
2258 | 
2259 | 					content += `\n**${key}**${append}`;
2260 | 					valid.push(key);
2261 | 				}
2262 | 			}
2263 | 
2264 | 			if (!valid.length) {
2265 | 				content = '**This is an empty database file.**';
2266 | 			}
2267 | 
2268 | 			if (invalid.length) {
2269 | 				content += `\nThese missing or invalid field${invalid.length === 1 ? '' : 's'} **will be removed**:`;
2270 | 				content += `\n${invalid.join('\n')}`;
2271 | 			}
2272 | 
2273 | 			content += '\n**Please continue only if you trust this database file.**';
2274 | 			Helper.Alerts.show(
2275 | 				'Replace Database',
2276 | 				content.replace(/\n/g, '\n\n'), // Markdown, so we do double \n for new line
2277 | 				{
2278 | 					confirmText: 'Go ahead!',
2279 | 					cancelText: 'Cancel',
2280 | 					danger: true,
2281 | 					onConfirm: async () => {
2282 | 						for (const key of valid) {
2283 | 							saveToLocalStorage(key, result[key]);
2284 | 						}
2285 | 						for (const key of invalid) {
2286 | 							storage.removeItem(key);
2287 | 						}
2288 | 
2289 | 						forceHideMagane = true;
2290 | 						toast('Reloading Magane database\u2026');
2291 | 
2292 | 						Object.assign(settings, defaultSettings);
2293 | 						loadSettings(true);
2294 | 						await grabPacks(true);
2295 | 						await migrateStringPackIds();
2296 | 
2297 | 						toastSuccess('Magane is now ready!');
2298 | 						forceHideMagane = false;
2299 | 					}
2300 | 				}
2301 | 			);
2302 | 		};
2303 | 
2304 | 		log(`Reading ${files[0].name}\u2026`);
2305 | 		reader.readAsText(files[0]);
2306 | 	};
2307 | 
2308 | 	const replaceDatabase = () => {
2309 | 		const element = document.getElementById('replaceDatabaseInput');
2310 | 		element.click();
2311 | 	};
2312 | 
2313 | 	const exportDatabase = () => {
2314 | 		const element = document.createElement('a');
2315 | 		let hrefUrl = '';
2316 | 
2317 | 		try {
2318 | 			toast('Exporting database\u2026');
2319 | 			const database = {};
2320 | 			for (const key of allowedStorageKeys) {
2321 | 				const data = getFromLocalStorage(key);
2322 | 				if (typeof data !== 'undefined') {
2323 | 					database[key] = data;
2324 | 				}
2325 | 			}
2326 | 			const dbString = JSON.stringify(database);
2327 | 			const blob = new Blob([dbString]);
2328 | 			hrefUrl = window.URL.createObjectURL(blob);
2329 | 			element.href = hrefUrl;
2330 | 			element.download = `magane.database.${new Date().toISOString()}.json`;
2331 | 			element.click();
2332 | 		} catch (error) {
2333 | 			console.error(error);
2334 | 			toastError('Unexpected error occurred. Check your console for details.');
2335 | 		}
2336 | 
2337 | 		element.remove();
2338 | 		if (hrefUrl) window.URL.revokeObjectURL(hrefUrl);
2339 | 	};
2340 | </script>
2341 | 
2342 | <main bind:this={ main }>
2343 | 	<div id="magane"
2344 | 		style="{ mountType === MountType.LEGACY ? `top: ${coords.top}px; left: ${coords.left}px;` : '' } { forceHideMagane ? 'display: none;' : ''}">
2345 | 
2346 | 		<div class="stickerWindow" style="bottom: { `${coords.wbottom}px` }; right: { `${coords.wright}px` }; { stickerWindowActive ? '' : 'display: none;' }">
2347 | 			<div class="stickers has-scroll-y { settings.useLeftToolbar ? 'has-left-toolbar' : '' }" style="">
2348 | 				{ #if !favoriteStickers.length && !subscribedPacks.length }
2349 | 				<h3 class="getStarted">It seems you aren't subscribed to any pack yet. Click the plus symbol on the bottom-left to get started! 🎉</h3>
2350 | 				{ /if }
2351 | 				{ #if favoriteStickers.length }
2352 | 				<div class="pack">
2353 | 					<span id="pfavorites">Favorites{ @html formatStickersCount(favoriteStickers.length) }</span>
2354 | 					{ #each favoriteStickers as sticker, i }
2355 | 					<div class="sticker">
2356 | 						<img
2357 | 							class="image"
2358 | 							src="{ `${formatUrl(sticker.pack, sticker.id)}` }"
2359 | 							alt="{ sticker.pack } - { sticker.id }"
2360 | 							title="{ simplePacksData[sticker.pack] ? simplePacksData[sticker.pack].name : '' }"
2361 | 							on:click="{ event => sendSticker(sticker.pack, sticker.id, event) }"
2362 | 						>
2363 | 						<div class="deleteFavorite"
2364 | 							title="Unfavorite"
2365 | 							on:click="{ () => unfavoriteSticker(sticker.pack, sticker.id) }">
2366 | 							<svg width="20" height="20" viewBox="0 0 24 24">
2367 | 								<path fill="grey" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path>
2368 | 							</svg>
2369 | 						</div>
2370 | 					</div>
2371 | 					{ /each }
2372 | 				</div>
2373 | 				{ /if }
2374 | 
2375 | 				{ #if frequentlyUsedSorted.length }
2376 | 				<div class="pack">
2377 | 					<span id="pfrequentlyused">Frequently Used{ @html formatStickersCount(frequentlyUsedSorted.length) }</span>
2378 | 					{ #each frequentlyUsedSorted as sticker, i }
2379 | 					<div class="sticker">
2380 | 						<img
2381 | 							class="image"
2382 | 							src="{ `${formatUrl(sticker.pack, sticker.id)}` }"
2383 | 							alt="{ sticker.pack } - { sticker.id }"
2384 | 							title="{ simplePacksData[sticker.pack] ? `${simplePacksData[sticker.pack].name} – ` : '' }Used: {sticker.used}"
2385 | 							on:click="{ event => sendSticker(sticker.pack, sticker.id, event) }"
2386 | 						>
2387 | 						{ #if favoriteStickers.findIndex(f => f.pack === sticker.pack && f.id === sticker.id) === -1 }
2388 | 						<div class="addFavorite"
2389 | 							title="Favorite"
2390 | 							on:click="{ () => favoriteSticker(sticker.pack, sticker.id) }">
2391 | 							<svg width="20" height="20" viewBox="0 0 24 24">
2392 | 								<path fill="grey" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path>
2393 | 							</svg>
2394 | 						</div>
2395 | 						{ :else }
2396 | 						<div class="deleteFavorite"
2397 | 							title="Unfavorite"
2398 | 							on:click="{ () => unfavoriteSticker(sticker.pack, sticker.id) }">
2399 | 							<svg width="20" height="20" viewBox="0 0 24 24">
2400 | 								<path fill="grey" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path>
2401 | 							</svg>
2402 | 						</div>
2403 | 						{ /if }
2404 | 					</div>
2405 | 					{ /each }
2406 | 				</div>
2407 | 				{ /if }
2408 | 
2409 | 				{ #each subscribedPacks as pack, i }
2410 | 				<div class="pack">
2411 | 					<span id="p{pack.id}">{ pack.name }{ @html formatStickersCount(pack.files.length) }</span>
2412 | 
2413 | 					{ #each pack.files as sticker, i }
2414 | 					<div class="sticker">
2415 | 						<img
2416 | 							class="image"
2417 | 							src="{ `${formatUrl(pack.id, sticker, false, i)}` }"
2418 | 							alt="{ pack.id } - { sticker }"
2419 | 							on:click="{ event => sendSticker(pack.id, sticker, event) }"
2420 | 						>
2421 | 						{ #if favoriteStickers.findIndex(f => f.pack === pack.id && f.id === sticker) === -1 }
2422 | 						<div class="addFavorite"
2423 | 							title="Favorite"
2424 | 							on:click="{ () => favoriteSticker(pack.id, sticker) }">
2425 | 							<svg width="20" height="20" viewBox="0 0 24 24">
2426 | 								<path fill="grey" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path>
2427 | 							</svg>
2428 | 						</div>
2429 | 						{ :else }
2430 | 						<div class="deleteFavorite"
2431 | 							title="Unfavorite"
2432 | 							on:click="{ () => unfavoriteSticker(pack.id, sticker) }">
2433 | 							<svg width="20" height="20" viewBox="0 0 24 24">
2434 | 								<path fill="grey" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path>
2435 | 							</svg>
2436 | 						</div>
2437 | 						{ /if }
2438 | 					</div>
2439 | 					{ /each }
2440 | 				</div>
2441 | 				{ /each }
2442 | 			</div>
2443 | 
2444 | 			<div class="packs-toolbar { settings.useLeftToolbar ? 'has-scroll-y' : 'has-scroll-x' }">
2445 | 				<div class="packs packs-controls">
2446 | 					<div class="packs-wrapper">
2447 | 						<div class="pack"
2448 | 							on:click="{ () => toggleStickerModal() }"
2449 | 							title="Manage subscribed packs" >
2450 | 							<div class="icon-plus" />
2451 | 						</div>
2452 | 						{ #if favoriteSticker.length }
2453 | 						<div class="pack"
2454 | 							on:click={ () => scrollToStickers('#pfavorites') }
2455 | 							title="Favorites" >
2456 | 							<div class="icon-favorite" />
2457 | 						</div>
2458 | 						{ /if }
2459 | 						{ #if frequentlyUsedSorted.length }
2460 | 						<div class="pack"
2461 | 							on:click={ () => scrollToStickers('#pfrequentlyused') }
2462 | 							title="Frequently Used" >
2463 | 							<div class="icon-frequently-used" />
2464 | 						</div>
2465 | 						{ /if }
2466 | 					</div>
2467 | 				</div>
2468 | 
2469 | 				<div class="packs" style="">
2470 | 					<div class="packs-wrapper">
2471 | 						{ #each subscribedPacks as pack, i }
2472 | 						<div class="pack"
2473 | 							on:click={ () => scrollToStickers(`#p${pack.id}`) }
2474 | 							title="{ pack.name }"
2475 | 							style="background-image: { `url(${formatUrl(pack.id, pack.files[0], false, 0)})` }" />
2476 | 						{ /each }
2477 | 					</div>
2478 | 				</div>
2479 | 			</div>
2480 | 
2481 | 			<div class="stickersModal" style="{ stickerAddModalActive ? '' : 'display: none;' }">
2482 | 				<div class="modal-content">
2483 | 					<div class="stickersConfig">
2484 | 						<div class="tabs">
2485 | 							<div class="tab"
2486 | 								on:click="{ () => activateTab(0) }"
2487 | 								class:is-active="{ activeTab === 0 }">
2488 | 								Installed
2489 | 							</div>
2490 | 							<div class="tab"
2491 | 								on:click="{ () => activateTab(1) }"
2492 | 								class:is-active="{ activeTab === 1 }">
2493 | 								Packs
2494 | 							</div>
2495 | 							<div class="tab"
2496 | 								on:click="{ () => activateTab(2) }"
2497 | 								class:is-active="{ activeTab === 2 }">
2498 | 								Import
2499 | 							</div>
2500 | 							<div class="tab"
2501 | 								on:click="{ () => activateTab(3) }"
2502 | 								class:is-active="{ activeTab === 3 }">
2503 | 								Misc
2504 | 							</div>
2505 | 						</div>
2506 | 
2507 | 						<!-- tab: Installed -->
2508 | 						{ #if stickerAddModalTabsInit[0] }
2509 | 						<div class="tab-content has-scroll-y" style="{ activeTab === 0 ? '' : 'display: none;' }">
2510 | 							{ #each subscribedPacks as pack, i (pack.id) }
2511 | 							<div class="pack">
2512 | 								{ #if subscribedPacks.length > 1 }
2513 | 								<div class="index">
2514 | 									<input
2515 | 										on:click="{ event => event.target.select() }"
2516 | 										on:keypress="{ movePack }"
2517 | 										class="inputPackIndex"
2518 | 										type="text"
2519 | 										data-pack={ pack.id }
2520 | 										value={ i + 1 } />
2521 | 								</div>
2522 | 								{ /if }
2523 | 								<div class="preview"
2524 | 									style="background-image: { `url(${formatUrl(pack.id, pack.files[0], false, 0)})` }" />
2525 | 								<div class="info">
2526 | 									<span title="{ settings.showPackAppendix ? '' : `ID: ${pack.id}`}">{ pack.name }</span>
2527 | 									<span>{ pack.count } stickers{ @html settings.showPackAppendix ? formatPackAppendix(pack.id) : '' }</span>
2528 | 								</div>
2529 | 								<div class="action{ localPacks[pack.id] && (isLocalPackID(pack.id) || localPacks[pack.id].updateUrl) ? ' is-tight' : '' }">
2530 | 									<button class="button is-danger"
2531 | 										on:click="{ () => unsubscribeToPack(pack) }"
2532 | 										title="Unsubscribe">Del</button>
2533 | 									{ #if localPacks[pack.id] }
2534 | 									{ #if isLocalPackID(pack.id) }
2535 | 									<button class="button pack-info"
2536 | 										on:click="{ () => showPackInfo(pack.id) }"
2537 | 										title="Info">i</button>
2538 | 									{ /if }
2539 | 									{ #if localPacks[pack.id].updateUrl }
2540 | 									<button class="button update-pack"
2541 | 										on:click="{ () => updateRemotePack(pack.id) }"
2542 | 										title="Update">Up</button>
2543 | 									{ /if }
2544 | 									{ /if }
2545 | 								</div>
2546 | 							</div>
2547 | 							{ /each }
2548 | 						</div>
2549 | 						{ /if }<!-- /stickerAddModalTabsInit[0] -->
2550 | 						<!-- /tab: Installed -->
2551 | 
2552 | 						<!-- tab: Packs -->
2553 | 						<div class="tab-content avail-packs" style="{ activeTab === 1 ? '' : 'display: none;' }">
2554 | 							<input
2555 | 								on:keyup="{ filterPacks }"
2556 | 								bind:value={ packsSearch }
2557 | 								class="inputQuery"
2558 | 								type="text"
2559 | 								placeholder="Search" />
2560 | 							{ #if stickerAddModalTabsInit[1] }
2561 | 							<div class="packs has-scroll-y" style="">
2562 | 								{ #each filteredPacks as pack }
2563 | 								<div class="pack">
2564 | 									<div class="preview"
2565 | 										style="background-image: { `url(${formatUrl(pack.id, pack.files[0], false, 0)})` }" />
2566 | 									<div class="info">
2567 | 										<span title="{ settings.showPackAppendix ? '' : `ID: ${pack.id}`}">{ pack.name }</span>
2568 | 										<span>{ pack.count } stickers{ @html settings.showPackAppendix ? formatPackAppendix(pack.id) : '' }</span>
2569 | 									</div>
2570 | 									<div class="action{ localPacks[pack.id] ? ' is-tight' : '' }">
2571 | 										{ #if subscribedPacksSimple.includes(pack.id) }
2572 | 										<button class="button is-danger"
2573 | 											on:click="{ () => unsubscribeToPack(pack) }"
2574 | 											title="Unsubscribe">Del</button>
2575 | 										{ :else }
2576 | 										<button class="button is-primary"
2577 | 											on:click="{ () => subscribeToPack(pack) }"
2578 | 											title="Subscribe">Add</button>
2579 | 										{ /if }
2580 | 										{ #if localPacks[pack.id] }
2581 | 										{ #if isLocalPackID(pack.id) }
2582 | 										<button class="button pack-info"
2583 | 											on:click="{ () => showPackInfo(pack.id) }"
2584 | 											title="Info">i</button>
2585 | 										{ /if }
2586 | 										{ #if localPacks[pack.id].updateUrl }
2587 | 										<button class="button update-pack"
2588 | 											on:click="{ () => updateRemotePack(pack.id) }"
2589 | 											title="Update">Up</button>
2590 | 										{ /if }
2591 | 										<button class="button delete-pack is-danger"
2592 | 											on:click="{ () => deleteLocalPack(pack.id) }"
2593 | 											title="Purge"></button>
2594 | 										{ /if }
2595 | 									</div>
2596 | 								</div>
2597 | 								{ /each }
2598 | 							</div>
2599 | 							{ /if }<!-- /stickerAddModalTabsInit[1] -->
2600 | 						</div>
2601 | 						<!-- /tab: Packs -->
2602 | 
2603 | 						<!-- tab: Import -->
2604 | 						<div class="tab-content has-scroll-y import" style="{ activeTab === 2 ? '' : 'display: none;' }">
2605 | 							<div class="section line-proxy">
2606 | 								<p class="section-title">LINE Store Proxy</p>
2607 | 								<p>If you are looking for stickers pack that are not provided by Magane, you can go to the <a href="https://store.line.me/" target="_blank">LINE Store</a>, pick whichever packs you want, then paste their full URLs in the box below (separated by new lines).</p>
2608 | 								<p>e.g. https://store.line.me/stickershop/product/17573/ja</p>
2609 | 								<p class="input-grouped">
2610 | 									<textarea
2611 | 										bind:value={ linePackSearch }
2612 | 										autocomplete="off"
2613 | 										class="inputQuery"
2614 | 										placeholder="LINE Sticker Pack URLs" />
2615 | 									<button class="button is-primary"
2616 | 										on:click="{ () => parseLinePack() }">Add</button>
2617 | 								</p>
2618 | 							</div>
2619 | 							<div class="section remote-packs">
2620 | 								<p class="section-title">Remote Packs</p>
2621 | 								<p>You can paste URLs to JSON config files of remote packs in here (separated by new lines).<br>
2622 | 									This also supports public album links of any file hosting websites running <a href="https://github.com/WeebDev/chibisafe" target="_blank">Chibisafe</a>.</p>
2623 | 								<p>e.g. https://example.com/packs/my_custom_pack.json<br>
2624 | 									https://chibisafe.moe/a/my_album</p>
2625 | 								<p class="input-grouped">
2626 | 									<textarea
2627 | 										bind:value={ remotePackUrl }
2628 | 										autocomplete="off"
2629 | 										class="inputQuery"
2630 | 										placeholder="Remote Pack JSON or Chibisafe Album URLs" />
2631 | 									<button class="button is-primary"
2632 | 										on:click="{ () => parseRemotePackUrl() }">Add</button>
2633 | 								</p>
2634 | 								<p>
2635 | 									<input
2636 | 										id="localRemotePackInput"
2637 | 										type="file"
2638 | 										multiple
2639 | 										style="display: none"
2640 | 										accept="application/JSON"
2641 | 										on:click="{ event => event.stopPropagation() }"
2642 | 										on:change="{ onLocalRemotePackChange }" />
2643 | 									<button class="button has-width-full"
2644 | 										on:click="{ () => loadLocalRemotePack() }">Load local JSON files</button>
2645 | 								</p>
2646 | 								<p>
2647 | 									<button class="button is-primary has-width-full"
2648 | 										on:click="{ () => bulkUpdateRemotePacks() }">Update all remote packs</button>
2649 | 								</p>
2650 | 							</div>
2651 | 						</div>
2652 | 						<!-- /tab: Import -->
2653 | 
2654 | 						<!-- tab: Misc -->
2655 | 						<div class="tab-content has-scroll-y misc" style="{ activeTab === 3 ? '' : 'display: none;' }">
2656 | 							<div class="section checkupdate">
2657 | 								<p>
2658 | 									<button class="button has-width-full"
2659 | 										on:click="{ () => checkUpdate(true) }">Check for updates</button>
2660 | 								</p>
2661 | 							</div>
2662 | 							<div class="section settings" on:change="{ onSettingsChange }">
2663 | 								<p class="section-title">Settings</p>
2664 | 								<p>
2665 | 									<label>
2666 | 										<input
2667 | 											name="disableUpdateCheck"
2668 | 											type="checkbox"
2669 | 											bind:checked={ settings.disableUpdateCheck } />
2670 | 										Disable automatically checking for updates on launch
2671 | 									</label>
2672 | 								</p>
2673 | 								<p>
2674 | 									<label>
2675 | 										<input
2676 | 											name="enableWindowMagane"
2677 | 											type="checkbox"
2678 | 											bind:checked={ settings.enableWindowMagane } />
2679 | 										Enable <code>window.magane</code> development utility
2680 | 									</label>
2681 | 								</p>
2682 | 								<p>
2683 | 									<label>
2684 | 										<input
2685 | 											name="disableToasts"
2686 | 											type="checkbox"
2687 | 											bind:checked={ settings.disableToasts } />
2688 | 										Disable Toasts
2689 | 									</label>
2690 | 								</p>
2691 | 								<p>
2692 | 									<label>
2693 | 										<input
2694 | 											name="closeWindowOnSend"
2695 | 											type="checkbox"
2696 | 											bind:checked={ settings.closeWindowOnSend } />
2697 | 										Close window when sending a sticker
2698 | 									</label>
2699 | 								</p>
2700 | 								<p>
2701 | 									<label>
2702 | 										<input
2703 | 											name="useLeftToolbar"
2704 | 											type="checkbox"
2705 | 											bind:checked={ settings.useLeftToolbar } />
2706 | 										Use left toolbar instead of bottom toolbar on main window
2707 | 									</label>
2708 | 								</p>
2709 | 								<p>
2710 | 									<label>
2711 | 										<input
2712 | 											name="showPackAppendix"
2713 | 											type="checkbox"
2714 | 											bind:checked={ settings.showPackAppendix } />
2715 | 										Show pack's appendix in packs list (e.g. its numerical ID)
2716 | 									</label>
2717 | 								</p>
2718 | 								<p>
2719 | 									<label>
2720 | 										<input
2721 | 											name="disableDownscale"
2722 | 											type="checkbox"
2723 | 											bind:checked={ settings.disableDownscale } />
2724 | 										Disable downscaling of imported LINE packs using <code>wsrv.nl</code> (this service is known to be blocked by Discord if sending as links)
2725 | 									</label>
2726 | 								</p>
2727 | 								<p>
2728 | 									<label>
2729 | 										<input
2730 | 											name="disableUploadObfuscation"
2731 | 											type="checkbox"
2732 | 											bind:checked={ settings.disableUploadObfuscation } />
2733 | 										Disable obfuscation of files names for uploaded stickers
2734 | 									</label>
2735 | 								</p>
2736 | 								<p>
2737 | 									<label>
2738 | 										<input
2739 | 											name="alwaysSendAsLink"
2740 | 											type="checkbox"
2741 | 											bind:checked={ settings.alwaysSendAsLink } />
2742 | 										Always send stickers as links instead of uploads
2743 | 									</label>
2744 | 								</p>
2745 | 								<p>
2746 | 									<label>
2747 | 										<input
2748 | 											name="maskStickerLink"
2749 | 											type="checkbox"
2750 | 											bind:checked={ settings.maskStickerLink } />
2751 | 										Mask sticker links with <code>[sticker](url)</code> Markdown
2752 | 									</label>
2753 | 								</p>
2754 | 								<p>
2755 | 									<label>
2756 | 										<input
2757 | 											name="ctrlInvertSendBehavior"
2758 | 											type="checkbox"
2759 | 											bind:checked={ settings.ctrlInvertSendBehavior } />
2760 | 										Allow inverting send behavior if holding Ctrl when sending stickers (if always send as links is enabled, holding Ctrl when sending will instead send as uploads, and vice versa)
2761 | 									</label>
2762 | 								</p>
2763 | 								<p>
2764 | 									<label>
2765 | 										<input
2766 | 											name="ignoreEmbedLinksPermission"
2767 | 											type="checkbox"
2768 | 											bind:checked={ settings.ignoreEmbedLinksPermission } />
2769 | 										Ignore missing embed links permission
2770 | 									</label>
2771 | 								</p>
2772 | 								<p>
2773 | 									<label>
2774 | 										<input
2775 | 											name="markAsSpoiler"
2776 | 											type="checkbox"
2777 | 											bind:checked={ settings.markAsSpoiler } />
2778 | 										Mark as spoiler when sending stickers as uploads
2779 | 									</label>
2780 | 								</p>
2781 | 								<p>
2782 | 									<label>
2783 | 										<input
2784 | 											name="ignoreViewportSize"
2785 | 											type="checkbox"
2786 | 											bind:checked={ settings.ignoreViewportSize } />
2787 | 										Do not warn if viewport height is insufficient
2788 | 									</label>
2789 | 								</p>
2790 | 								<p>
2791 | 									<label>
2792 | 										<input
2793 | 											name="disableSendingWithChatInput"
2794 | 											type="checkbox"
2795 | 											bind:checked={ settings.disableSendingWithChatInput } />
2796 | 										Do not include chat input when sending stickers as links
2797 | 									</label>
2798 | 								</p>
2799 | 							</div>
2800 | 							<div class="section frequently-used">
2801 | 								<p class="section-title">Frequently Used</p>
2802 | 								<p>
2803 | 									Maximum amount of the most frequently used stickers to list on Frequently Used section.
2804 | 								</p>
2805 | 								<p>
2806 | 									Set to <code>0</code> to completely disable the section and stickers usage counter.
2807 | 								</p>
2808 | 								<p class="input-grouped">
2809 | 									<input
2810 | 										bind:value={ frequentlyUsedInput }
2811 | 										class="inputQuery supress-magane-hotkey"
2812 | 										type="text" />
2813 | 									<button class="button is-primary"
2814 | 										on:click="{ () => parseFrequentlyUsedInput() }">Set</button>
2815 | 								</p>
2816 | 							</div>
2817 | 							<div class="section hotkey">
2818 | 								<p class="section-title">Hotkey</p>
2819 | 								<p>
2820 | 									<a href="https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values" target="_blank">See a full list of key values.</a>
2821 | 								</p>
2822 | 								<p>
2823 | 									Ignore notes that will not affect Chromium. Additionally, this may not have full support for everything in the documentation above, but this does support some degree of combinations of modifier keys (<code>Ctrl</code>, <code>Alt</code>, etc.) + other keys.
2824 | 								</p>
2825 | 								<p>
2826 | 									e.g. <code>M</code>, <code>Ctrl+Q</code>, <code>Alt+Shift+Y</code>
2827 | 								</p>
2828 | 								<p class="input-grouped">
2829 | 									<input
2830 | 										bind:value={ hotkeyInput }
2831 | 										class="inputQuery supress-magane-hotkey"
2832 | 										type="text" />
2833 | 									<button class="button is-primary"
2834 | 										on:click="{ () => parseThenInitHotkey(true) }">Set</button>
2835 | 								</p>
2836 | 							</div>
2837 | 							<div class="section database">
2838 | 								<p class="section-title">Database</p>
2839 | 								<p>
2840 | 									<input
2841 | 										id="replaceDatabaseInput"
2842 | 										type="file"
2843 | 										style="display: none"
2844 | 										accept="application/JSON"
2845 | 										on:click="{ event => event.stopPropagation() }"
2846 | 										on:change="{ onReplaceDatabaseChange }" />
2847 | 									<button class="button is-danger has-width-full"
2848 | 										on:click="{ () => replaceDatabase() }">Replace Database</button>
2849 | 								</p>
2850 | 								<p>
2851 | 									<button class="button is-primary has-width-full"
2852 | 										on:click="{ () => exportDatabase() }">Export Database</button>
2853 | 								</p>
2854 | 							</div>
2855 | 						</div>
2856 | 						<!-- /tab: Misc -->
2857 | 					</div>
2858 | 				</div>
2859 | 
2860 | 				<div class="modal-close"
2861 | 					on:click="{ () => toggleStickerModal() }"></div>
2862 | 			</div>
2863 | 		</div>
2864 | 
2865 | 	</div>
2866 | </main>
2867 | 


--------------------------------------------------------------------------------
/src/Button.svelte:
--------------------------------------------------------------------------------
 1 | <!-- Allow App.svelte to interface with exported props -->
 2 | <svelte:options accessors={ true }/>
 3 | 
 4 | <script>
 5 | 	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 6 | 
 7 | 	export let element;
 8 | 	export let active = false;
 9 | 
10 | 	// svelte-ignore unused-export-let
11 | 	export let textArea = undefined;
12 | 	// svelte-ignore unused-export-let
13 | 	export let lastTextAreaSize = {};
14 | 
15 | 	const dispatch = createEventDispatcher();
16 | 
17 | 	const log = message =>
18 | 		console.log('%c[MaganeButton]%c', 'color: #3a71c1; font-weight: 700', '', message);
19 | 
20 | 	onMount(() => log('Mounted.'));
21 | 
22 | 	onDestroy(() => log('Destroyed.'));
23 | </script>
24 | 
25 | <div bind:this={ element } id="maganeButton" class="channel-textarea-emoji channel-textarea-stickers"
26 | 	class:active="{ active }"
27 | 	on:click="{ e => dispatch('click', e) }"
28 | 	on:contextmenu|stopPropagation|preventDefault="{ e => dispatch('grabPacks', e) }">
29 | 	<img class="channel-textarea-stickers-content" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M18.5%2011c-4.136%200-7.5%203.364-7.5%207.5c0%20.871.157%201.704.432%202.482l9.551-9.551A7.462%207.462%200%200%200%2018.5%2011z%22%20fill%3D%22%23b9bbbe%22%2F%3E%3Cpath%20d%3D%22M12%202C6.486%202%202%206.486%202%2012c0%204.583%203.158%208.585%207.563%209.69A9.431%209.431%200%200%201%209%2018.5C9%2013.262%2013.262%209%2018.5%209c1.12%200%202.191.205%203.19.563C20.585%205.158%2016.583%202%2012%202z%22%20fill%3D%22%23b9bbbe%22%2F%3E%3C%2Fsvg%3E" alt="Magane menu button">
30 | </div>
31 | 


--------------------------------------------------------------------------------
/src/bd-main.js:
--------------------------------------------------------------------------------
 1 | /* global BdApi */
 2 | const App = require('./App.svelte');
 3 | 
 4 | module.exports = class MaganeBD {
 5 | 	log(message, type = 'log') {
 6 | 		return console[type]('%c[MaganeBD]%c', 'color: #3a71c1; font-weight: 700', '', message);
 7 | 	}
 8 | 
 9 | 	load() {}
10 | 
11 | 	start() {
12 | 		for (const id of Object.keys(global.MAGANE_STYLES)) {
13 | 			BdApi.injectCSS(`${this.constructor.name}-${id}`, global.MAGANE_STYLES[id]);
14 | 		}
15 | 		this.log('Mounting container into DOM\u2026');
16 | 		this.container = document.createElement('div');
17 | 		this.container.id = 'maganeContainer';
18 | 		document.body.appendChild(this.container);
19 | 		this.app = new App({
20 | 			target: this.container
21 | 		});
22 | 	}
23 | 
24 | 	stop() {
25 | 		if (this.app) {
26 | 			this.log('Destroying Svelte component\u2026');
27 | 			this.app.$destroy();
28 | 		}
29 | 		if (this.container) {
30 | 			this.log('Removing container from DOM\u2026');
31 | 			this.container.remove();
32 | 		}
33 | 		for (const id of Object.keys(global.MAGANE_STYLES)) {
34 | 			BdApi.clearCSS(`${this.constructor.name}-${id}`);
35 | 		}
36 | 	}
37 | };
38 | 


--------------------------------------------------------------------------------
/src/meta.txt:
--------------------------------------------------------------------------------
 1 | @name <%= data.name %>
 2 | @displayName <%= data.displayName %>
 3 | @description <%= data.description %>
 4 | @author Kana, Bobby
 5 | @authorId 176200089226706944
 6 | @authorLink https://github.com/Pitu
 7 | @license MIT - https://opensource.org/licenses/MIT
 8 | @version <%= pkg.version %>
 9 | @invite 5g6vgwn
10 | @source https://github.com/Pitu/Magane
11 | @updateUrl <%= data.updateUrl %>
12 | @website https://magane.moe
13 | @donate https://github.com/sponsors/Pitu
14 | @patreon https://patreon.com/pitu
15 | 


--------------------------------------------------------------------------------
/src/styles/main.scss:
--------------------------------------------------------------------------------
  1 | /** Magane: main.scss **/
  2 | 
  3 | div#magane {
  4 | 	$backgroundPrimary: var(--background-secondary);
  5 | 	$backgroundSecondary: var(--background-tertiary);
  6 | 	$textColor: var(--header-secondary);
  7 | 	$hoverColor: var(--interactive-active);
  8 | 	$scrollbarColor: rgb(105, 96, 128);
  9 | 	display: flex;
 10 | 	flex-direction: row;
 11 | 	height: 44px;
 12 | 	position: absolute;
 13 | 	z-index: 1001;
 14 | 
 15 | 	button, input, select, label, span, p, a, li, ul, div, textarea {
 16 | 		font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
 17 | 		color: $textColor;
 18 | 		font-weight: 400;
 19 | 		line-height: 1.5;
 20 | 		font-size: 16px;
 21 | 		text-rendering: optimizeLegibility;
 22 | 		text-size-adjust: 100%;
 23 | 	}
 24 | 
 25 | 	div.stickerWindow {
 26 | 		width: 600px;
 27 | 		min-height: 200px;
 28 | 		position: fixed;
 29 | 		background: $backgroundPrimary;
 30 | 		max-height: 600px;
 31 | 		transition: all 0.2s ease;
 32 | 		border-radius: 4px;
 33 | 		box-shadow: var(--elevation-stroke),var(--elevation-high);
 34 | 
 35 | 		div.stickers {
 36 | 			height: 550px !important;
 37 | 			margin-bottom: 100px;
 38 | 			position: relative;
 39 | 
 40 | 			&.has-left-toolbar {
 41 | 				height: 600px !important;
 42 | 				margin-left: 50px;
 43 | 			}
 44 | 
 45 | 			h3.getStarted {
 46 | 				text-align: center;
 47 | 				padding-top: 40%;
 48 | 				pointer-events: none;
 49 | 			}
 50 | 
 51 | 			div.pack {
 52 | 				float: left;
 53 | 				display: flex;
 54 | 				flex-flow: wrap;
 55 | 				justify-content: center;
 56 | 				padding: 20px;
 57 | 				width: 100%;
 58 | 				box-sizing: border-box;
 59 | 
 60 | 				span {
 61 | 					color: $textColor;
 62 | 					width: 100%;
 63 | 					cursor: auto;
 64 | 					padding-left: 10px;
 65 | 					margin: 10px 0px;
 66 | 
 67 | 					.counts {
 68 | 						padding-left: 0;
 69 | 					}
 70 | 
 71 | 					.counts span {
 72 | 						padding: 0 0.5em;
 73 | 					}
 74 | 				}
 75 | 
 76 | 				div.sticker {
 77 | 					display: flex;
 78 | 					align-items: center;
 79 | 					justify-content: center;
 80 | 					width: 100px;
 81 | 					height: 100px;
 82 | 					float: left;
 83 | 					position: relative;
 84 | 
 85 | 					.image {
 86 | 						cursor: pointer;
 87 | 						max-height: 100%;
 88 | 						max-width: 100%;
 89 | 					}
 90 | 
 91 | 					div.addFavorite, div.deleteFavorite {
 92 | 						width: 20px;
 93 | 						height: 20px;
 94 | 						position: absolute;
 95 | 						right: 0;
 96 | 						transition: all 0.2s ease;
 97 | 						display: none;
 98 | 						&:hover {
 99 | 							transform: scale(1.25);
100 | 							svg path {
101 | 								transition: all 0.2s ease;
102 | 							}
103 | 						}
104 | 					}
105 | 
106 | 					div.addFavorite {
107 | 						bottom: 0;
108 | 						&:hover {
109 | 							svg path {
110 | 								fill: #2ECC71;
111 | 							}
112 | 						}
113 | 					}
114 | 
115 | 					div.deleteFavorite {
116 | 						top: 0px;
117 | 						transform: rotateZ(45deg);
118 | 						&:hover {
119 | 							transform: scale(1.25) rotateZ(45deg);
120 | 							svg path {
121 | 								fill: #F04747;
122 | 							}
123 | 						}
124 | 					}
125 | 
126 | 					&:hover div.addFavorite,
127 | 					&:hover div.deleteFavorite {
128 | 						display: block;
129 | 						cursor: pointer;
130 | 					}
131 | 				}
132 | 			}
133 | 		}
134 | 
135 | 		div.packs-toolbar {
136 | 			position: absolute;
137 | 			bottom: 0;
138 | 			background: $backgroundSecondary;
139 | 			display: flex;
140 | 
141 | 			&.has-scroll-x {
142 | 				width: 100%;
143 | 				height: 50px;
144 | 
145 | 				div.packs {
146 | 					flex: 1 0 auto;
147 | 
148 | 					&.packs-controls {
149 | 						flex: 0 0 auto;
150 | 					}
151 | 
152 | 					div.packs-wrapper {
153 | 						white-space: nowrap;
154 | 						float: left;
155 | 						width: 100%;
156 | 						font-size: 0; /* quick hax to clear whitespace */
157 | 					}
158 | 				}
159 | 			}
160 | 
161 | 			&.has-scroll-y {
162 | 				width: 50px;
163 | 				height: 100%;
164 | 				flex-direction: column;
165 | 
166 | 				div.packs {
167 | 					flex: 1 1 auto;
168 | 					height: 100%;
169 | 
170 | 					&.packs-controls {
171 | 						flex: 0 0 auto;
172 | 						height: auto;
173 | 					}
174 | 
175 | 					div.packs-wrapper {
176 | 						font-size: 0; /* quick hax to clear whitespace */
177 | 					}
178 | 				}
179 | 			}
180 | 
181 | 			div.packs div.pack {
182 | 				display: inline-block;
183 | 				height: 40px;
184 | 				width: 40px;
185 | 				margin: 5px;
186 | 				cursor: pointer;
187 | 				background-position: center;
188 | 				background-size: contain;
189 | 				background-repeat: no-repeat;
190 | 				transition: all 0.2s ease;
191 | 				filter: grayscale(100%);
192 | 
193 | 				&:hover,
194 | 				div.pack.active {
195 | 					transform: scale(1.25);
196 | 					filter: grayscale(0%);
197 | 				}
198 | 
199 | 				> div {
200 | 					background-image: url('/assets/62ed7720accb1adfe95565b114e843c6.png');
201 | 					width: 32px;
202 | 					height: 32px;
203 | 					background-size: 1344px 1216px;
204 | 					background-repeat: no-repeat;
205 | 					margin-top: 4px;
206 | 					margin-left: 4px;
207 | 				}
208 | 
209 | 				div.icon-favorite {
210 | 					background-position: -1056px -288px;
211 | 				}
212 | 
213 | 				div.icon-plus {
214 | 					background-position: -384px -896px;
215 | 					/* make it greenish */
216 | 					/* thanks to the magic of https://codepen.io/sosuke/pen/Pjoqqp */
217 | 					filter: invert(63%) sepia(25%) saturate(813%) hue-rotate(55deg) brightness(98%) contrast(82%);
218 | 				}
219 | 
220 | 				div.icon-frequently-used {
221 | 					background-position: -160px -960px;
222 | 				}
223 | 			}
224 | 		}
225 | 	}
226 | 
227 | 	.stickersModal {
228 | 		bottom: 0;
229 | 		left: 0;
230 | 		position: absolute;
231 | 		right: 0;
232 | 		top: 0;
233 | 		align-items: center;
234 | 		justify-content: center;
235 | 
236 | 		&.is-active {
237 | 			display: flex;
238 | 		}
239 | 
240 | 		.inputQuery {
241 | 			width: calc(100% - 30px);
242 | 			height: 36px;
243 | 			box-sizing: border-box;
244 | 			margin: 0 15px 10px;
245 | 			padding: 5px 12px;
246 | 			border-radius: 3px;
247 | 			border: 1px solid $backgroundPrimary;
248 | 			background: $backgroundPrimary;
249 | 			color: $textColor;
250 | 		}
251 | 
252 | 		textarea.inputQuery {
253 | 			height: auto;
254 | 			min-height: 54px;
255 | 		}
256 | 
257 | 		.inputPackIndex {
258 | 			width: 55px;
259 | 			height: 36px;
260 | 			box-sizing: border-box;
261 | 			padding: 5px 12px;
262 | 			border-radius: 3px;
263 | 			border: 1px solid $backgroundPrimary;
264 | 			background: $backgroundPrimary;
265 | 			color: $textColor;
266 | 			text-align: center;
267 | 		}
268 | 
269 | 		.modal-background {
270 | 			bottom: 0;
271 | 			left: 0;
272 | 			position: absolute;
273 | 			right: 0;
274 | 			top: 0;
275 | 			width: 100%;
276 | 			height: 100%;
277 | 			background-color: rgba(10, 10, 10, 0.86);
278 | 		}
279 | 
280 | 		.modal-content,
281 | 		.modal-card {
282 | 			position: absolute;
283 | 			width: 100%;
284 | 			height: 100%;
285 | 			left: 0;
286 | 			top: 0;
287 | 			background: $backgroundSecondary;
288 | 		}
289 | 
290 | 		.modal-content {
291 | 			.stickersConfig {
292 | 				height: 100%;
293 | 				width: 100%;
294 | 				display: flex;
295 | 				flex-direction: column;
296 | 
297 | 				.tabs {
298 | 					width: 100%;
299 | 					text-align: center;
300 | 
301 | 					.tab {
302 | 						color: $textColor;
303 | 						display: inline-block;
304 | 						border: none;
305 | 						border-top: 0px transparent;
306 | 						border-left: 0px transparent;
307 | 						border-right: 0px transparent;
308 | 						border-width: 1px;
309 | 						border-style: solid;
310 | 						border-bottom-color: $textColor;
311 | 						padding: 20px;
312 | 						cursor: pointer;
313 | 
314 | 						&:hover,
315 | 						&.is-active {
316 | 							border-bottom-color: $hoverColor;
317 | 							color: $hoverColor;
318 | 						}
319 | 					}
320 | 				}
321 | 
322 | 				div.tab-content {
323 | 					height: calc(100% - 66px); /* .tabs height */
324 | 					width: 100%;
325 | 					padding: 10px 0;
326 | 					box-sizing: border-box;
327 | 
328 | 					&.avail-packs {
329 | 						display: flex;
330 | 						flex-direction: column;
331 | 						padding-bottom: 0;
332 | 
333 | 						.packs {
334 | 							height: 100%;
335 | 							width: 100%;
336 | 							padding-bottom: 10px;
337 | 						}
338 | 					}
339 | 
340 | 					&.import,
341 | 					&.misc {
342 | 						user-select: text;
343 | 
344 | 						.section {
345 | 							padding: 0 24px 14px;
346 | 
347 | 							.section-title {
348 | 								font-weight: 800;
349 | 							}
350 | 
351 | 							> p:last-of-type {
352 | 								margin-bottom: 0;
353 | 							}
354 | 
355 | 							a {
356 | 								/* inherit Discord's link color */
357 | 								color: var(--text-link);
358 | 
359 | 								&:hover {
360 | 									text-decoration: underline;
361 | 								}
362 | 							}
363 | 						}
364 | 
365 | 						.input-grouped {
366 | 							display: flex;
367 | 
368 | 							input {
369 | 								margin: 0;
370 | 								width: auto;
371 | 								flex-grow: 1;
372 | 							}
373 | 
374 | 							textarea {
375 | 								margin: 0;
376 | 								width: auto;
377 | 								flex-grow: 1;
378 | 							}
379 | 
380 | 							button {
381 | 								margin-left: 4px;
382 | 							}
383 | 						}
384 | 					}
385 | 				}
386 | 
387 | 				div.pack {
388 | 					height: 75px;
389 | 					width: 100%;
390 | 					float: left;
391 | 					display: flex;
392 | 					padding: 0 20px;
393 | 					box-sizing: border-box;
394 | 					margin-bottom: 5px;
395 | 
396 | 					&:last-of-type {
397 | 						margin-bottom: 0;
398 | 					}
399 | 
400 | 					div.index,
401 | 					div.handle,
402 | 					div.preview {
403 | 						flex: 0 0 auto;
404 | 						min-width: 75px;
405 | 					}
406 | 
407 | 					div.action {
408 | 						flex: 1 0 auto;
409 | 
410 | 						&.is-tight button {
411 | 							width: auto;
412 | 							padding-right: 0.5em;
413 | 							padding-left: 0.5em;
414 | 						}
415 | 
416 | 						button.delete-pack {
417 | 							width: 36px;
418 | 							height: 36px;
419 | 
420 | 							&:before,
421 | 							&:after {
422 | 								background-color: $textColor;
423 | 								content: "";
424 | 								display: block;
425 | 								left: 50%;
426 | 								position: absolute;
427 | 								top: 50%;
428 | 								transform: translateX(-50%) translateY(-50%) rotate(45deg);
429 | 								transform-origin: center center;
430 | 							}
431 | 
432 | 							&:before {
433 | 								height: 2px;
434 | 								width: 50%;
435 | 							}
436 | 
437 | 							&:after {
438 | 								height: 50%;
439 | 								width: 2px;
440 | 							}
441 | 						}
442 | 					}
443 | 
444 | 					div.index {
445 | 						padding-top: 20px;
446 | 						text-align: left;
447 | 					}
448 | 
449 | 					div.preview {
450 | 						height: 75px;
451 | 						background-position: center;
452 | 						background-size: contain;
453 | 						background-repeat: no-repeat;
454 | 					}
455 | 
456 | 					div.handle {
457 | 						padding: 20px;
458 | 						cursor: move;
459 | 						padding-top: 30px;
460 | 
461 | 						span {
462 | 							background: #555;
463 | 							height: 2px;
464 | 							width: 100%;
465 | 							display: block;
466 | 							margin-bottom: 6px;
467 | 						}
468 | 					}
469 | 
470 | 					div.action {
471 | 						padding-top: 20px;
472 | 						text-align: right;
473 | 					}
474 | 
475 | 					div.info {
476 | 						flex: 1 1 auto;
477 | 						padding: 14px;
478 | 
479 | 						> span {
480 | 							display: block;
481 | 							width: 100%;
482 | 							color: $textColor;
483 | 
484 | 							&:nth-of-type(1) {
485 | 								font-weight: bold;
486 | 								color: $textColor;
487 | 							}
488 | 
489 | 							.appendix span {
490 | 								&:nth-of-type(1) {
491 | 									padding: 0 0.5em;
492 | 								}
493 | 
494 | 								&:nth-of-type(2) {
495 | 									user-select: text;
496 | 								}
497 | 							}
498 | 						}
499 | 					}
500 | 
501 | 					div.preview img {
502 | 						height: 100%;
503 | 						width: 100%;
504 | 					}
505 | 				}
506 | 			}
507 | 		}
508 | 
509 | 		.modal-close {
510 | 			user-select: none;
511 | 			background-color: rgba(10, 10, 10, 0.2);
512 | 			border: none;
513 | 			border-radius: 290486px;
514 | 			cursor: pointer;
515 | 			display: inline-block;
516 | 			flex-grow: 0;
517 | 			flex-shrink: 0;
518 | 			font-size: 0;
519 | 			outline: none;
520 | 			vertical-align: top;
521 | 			background: none;
522 | 			position: absolute;
523 | 			right: 20px;
524 | 			top: 20px;
525 | 			height: 32px;
526 | 			max-height: 32px;
527 | 			max-width: 32px;
528 | 			min-height: 32px;
529 | 			min-width: 32px;
530 | 			width: 32px;
531 | 
532 | 			&:before,
533 | 			&:after {
534 | 				background-color: $textColor;
535 | 				content: "";
536 | 				display: block;
537 | 				left: 50%;
538 | 				position: absolute;
539 | 				top: 50%;
540 | 				transform: translateX(-50%) translateY(-50%) rotate(45deg);
541 | 				transform-origin: center center;
542 | 			}
543 | 
544 | 			&:before {
545 | 				height: 2px;
546 | 				width: 50%;
547 | 			}
548 | 
549 | 			&:after {
550 | 				height: 50%;
551 | 				width: 2px;
552 | 			}
553 | 
554 | 			&:hover,
555 | 			&:focus {
556 | 				background-color: rgba(10, 10, 10, 0.3);
557 | 			}
558 | 		}
559 | 	}
560 | 
561 | 	.button {
562 | 		align-items: center;
563 | 		border: 1px solid transparent;
564 | 		border-radius: 3px;
565 | 		box-shadow: none;
566 | 		display: inline-flex;
567 | 		font-size: 1rem;
568 | 		padding: calc(0.375em - 1px) 0.75em;
569 | 		position: relative;
570 | 		vertical-align: top;
571 | 		user-select: none;
572 | 		cursor: pointer;
573 | 		justify-content: center;
574 | 		text-align: center;
575 | 		white-space: nowrap;
576 | 		border-color: transparent;
577 | 		color: $textColor;
578 | 		background-color: $backgroundPrimary;
579 | 		width: 62px; /* consistent width */
580 | 
581 | 		&.is-danger {
582 | 			color: #ffffff;
583 | 			border-color: rgba(240,71,71,.3);
584 | 			background: #f04747;
585 | 		}
586 | 
587 | 		&:hover, &.is-primary:hover {
588 | 			transform: scale3d(1.1, 1.1, 1.1);
589 | 		}
590 | 
591 | 		&.has-width-full {
592 | 			width: 100%;
593 | 
594 | 			&:hover {
595 | 				/* TODO: Figure out how to do a more consistent scaling,
596 | 				  regardless of the button's dynamic size. */
597 | 				transform: scale3d(1.04, 1.04, 1.04);
598 | 			}
599 | 		}
600 | 	}
601 | 
602 | 	.has-scroll-x {
603 | 		overflow-x: auto;
604 | 		scrollbar-gutter: stable;
605 | 	}
606 | 
607 | 	.has-scroll-y {
608 | 		overflow-y: auto;
609 | 		scrollbar-gutter: stable;
610 | 	}
611 | 
612 | 	::-webkit-scrollbar {
613 | 		/* Let's make the scrollbars pretty */
614 | 		width: 6px;
615 | 		height: 6px;
616 | 
617 | 		&-track {
618 | 			margin: 0;
619 | 			background: transparent;
620 | 			border-radius: 5px;
621 | 
622 | 			&-piece {
623 | 				border: 0 solid transparent;
624 | 				background: transparent;
625 | 				margin: 0;
626 | 			}
627 | 		}
628 | 
629 | 		&-thumb {
630 | 			background: rgba($scrollbarColor, 0.5);
631 | 			border: 0 solid transparent;
632 | 			border-radius: 5px;
633 | 
634 | 			&:hover {
635 | 				background: rgba($scrollbarColor, 0.75);
636 | 			}
637 | 
638 | 			&:active {
639 | 				background: rgba($scrollbarColor, 1);
640 | 			}
641 | 		}
642 | 	}
643 | 
644 | 	code {
645 | 		box-sizing: border-box;
646 | 		padding: 2px 6px;
647 | 		border-radius: 3px;
648 | 		border: 1px solid $backgroundPrimary;
649 | 		background: $backgroundPrimary;
650 | 		color: $textColor;
651 | 	}
652 | }
653 | 
654 | div#maganeButton {
655 | 	&.channel-textarea-stickers {
656 | 		display: flex;
657 | 		align-items: center;
658 | 		cursor: pointer;
659 | 
660 | 		&:hover, &.active {
661 | 			filter: brightness(1.35);
662 | 		}
663 | 	}
664 | 
665 | 	img.channel-textarea-stickers-content {
666 | 		width: 24px;
667 | 		height: 24px;
668 | 		padding: 4px;
669 | 		margin-left: 2px;
670 | 		margin-right: 2px;
671 | 	}
672 | }
673 | 
674 | /* Visually hide Magane button in certain scenarios */
675 | 
676 | div[class^="submitContainer_"] div#maganeButton { /* create thread */
677 | 	display: none;
678 | }
679 | 
680 | div[data-list-item-id^="forum-channel-list-"] div#maganeButton { /* create forum post */
681 | 	display: none;
682 | }
683 | 


--------------------------------------------------------------------------------
/src/vencord-main.js:
--------------------------------------------------------------------------------
 1 | /* global definePlugin */
 2 | const App = require('./App.svelte');
 3 | 
 4 | const pluginName = 'MaganeVencord';
 5 | 
 6 | export default definePlugin({
 7 | 	name: pluginName,
 8 | 	authors: [
 9 | 		{
10 | 			id: 176200089226706944n,
11 | 			name: 'Pitu'
12 | 		},
13 | 		{
14 | 			id: 530445553562025984n,
15 | 			name: 'Bobby'
16 | 		}
17 | 	],
18 | 	description: 'Bringing LINE stickers to Discord in a chaotic way. Vencord edition.',
19 | 
20 | 	log(message, type = 'log') {
21 | 		return console[type]('%c[MaganeVencord]%c', 'color: #3a71c1; font-weight: 700', '', message);
22 | 	},
23 | 
24 | 	start() {
25 | 		for (const id of Object.keys(window.MAGANE_STYLES)) {
26 | 			const style = document.createElement('style');
27 | 			style.id = `${pluginName}-${id}`;
28 | 			style.innerText = window.MAGANE_STYLES[id];
29 | 			document.head.appendChild(style);
30 | 		}
31 | 		this.log('Mounting container into DOM\u2026');
32 | 		this.container = document.createElement('div');
33 | 		this.container.id = 'maganeContainer';
34 | 		document.body.appendChild(this.container);
35 | 		this.app = new App({
36 | 			target: this.container
37 | 		});
38 | 	},
39 | 
40 | 	stop() {
41 | 		if (this.app) {
42 | 			this.log('Destroying Svelte component\u2026');
43 | 			this.app.$destroy();
44 | 		}
45 | 		if (this.container) {
46 | 			this.log('Removing container from DOM\u2026');
47 | 			this.container.remove();
48 | 		}
49 | 		for (const id of Object.keys(window.MAGANE_STYLES)) {
50 | 			const _style = document.head.getElementById(`${pluginName}-${id}`);
51 | 			if (_style) {
52 | 				_style.remove();
53 | 			}
54 | 		}
55 | 	}
56 | });
57 | 


--------------------------------------------------------------------------------