mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-06 11:44:40 +00:00
Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Seth Burkart
|
fda0071251 |
+112
-95
@@ -2,83 +2,87 @@
|
||||
module.exports = {
|
||||
forbidden: [
|
||||
{
|
||||
name: "no-circular",
|
||||
severity: "warn",
|
||||
name: 'no-circular',
|
||||
severity: 'warn',
|
||||
comment:
|
||||
"This dependency is part of a circular relationship. You might want to revise " +
|
||||
"your solution (i.e. use dependency inversion, make sure the modules have a single responsibility) ",
|
||||
'This dependency is part of a circular relationship. You might want to revise ' +
|
||||
'your solution (i.e. use dependency inversion, make sure the modules have a single responsibility) ',
|
||||
from: {},
|
||||
to: {
|
||||
circular: true,
|
||||
},
|
||||
circular: true
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "no-orphans",
|
||||
name: 'no-orphans',
|
||||
comment:
|
||||
"This is an orphan module - it's likely not used (anymore?). Either use it or " +
|
||||
"remove it. If it's logical this module is an orphan (i.e. it's a config file), " +
|
||||
"add an exception for it in your dependency-cruiser configuration. By default " +
|
||||
"this rule does not scrutinize dot-files (e.g. .eslintrc.js), TypeScript declaration " +
|
||||
"files (.d.ts), tsconfig.json and some of the babel and webpack configs.",
|
||||
severity: "warn",
|
||||
severity: 'warn',
|
||||
from: {
|
||||
orphan: true,
|
||||
pathNot: [
|
||||
"(^|/)[.][^/]+[.](?:js|cjs|mjs|ts|cts|mts|json)$", // dot files
|
||||
"[.]d[.]ts$", // TypeScript declaration files
|
||||
"(^|/)tsconfig[.]json$", // TypeScript config
|
||||
"(^|/)(?:babel|webpack)[.]config[.](?:js|cjs|mjs|ts|cts|mts|json)$", // other configs
|
||||
],
|
||||
'(^|/)[.][^/]+[.](?:js|cjs|mjs|ts|cts|mts|json)$', // dot files
|
||||
'[.]d[.]ts$', // TypeScript declaration files
|
||||
'(^|/)tsconfig[.]json$', // TypeScript config
|
||||
'(^|/)(?:babel|webpack)[.]config[.](?:js|cjs|mjs|ts|cts|mts|json)$' // other configs
|
||||
]
|
||||
},
|
||||
to: {},
|
||||
},
|
||||
{
|
||||
name: "no-deprecated-core",
|
||||
name: 'no-deprecated-core',
|
||||
comment:
|
||||
"A module depends on a node core module that has been deprecated. Find an alternative - these are " +
|
||||
'A module depends on a node core module that has been deprecated. Find an alternative - these are ' +
|
||||
"bound to exist - node doesn't deprecate lightly.",
|
||||
severity: "warn",
|
||||
severity: 'warn',
|
||||
from: {},
|
||||
to: {
|
||||
dependencyTypes: ["core"],
|
||||
path: [
|
||||
"^v8/tools/codemap$",
|
||||
"^v8/tools/consarray$",
|
||||
"^v8/tools/csvparser$",
|
||||
"^v8/tools/logreader$",
|
||||
"^v8/tools/profile_view$",
|
||||
"^v8/tools/profile$",
|
||||
"^v8/tools/SourceMap$",
|
||||
"^v8/tools/splaytree$",
|
||||
"^v8/tools/tickprocessor-driver$",
|
||||
"^v8/tools/tickprocessor$",
|
||||
"^node-inspect/lib/_inspect$",
|
||||
"^node-inspect/lib/internal/inspect_client$",
|
||||
"^node-inspect/lib/internal/inspect_repl$",
|
||||
"^async_hooks$",
|
||||
"^punycode$",
|
||||
"^domain$",
|
||||
"^constants$",
|
||||
"^sys$",
|
||||
"^_linklist$",
|
||||
"^_stream_wrap$",
|
||||
dependencyTypes: [
|
||||
'core'
|
||||
],
|
||||
},
|
||||
path: [
|
||||
'^v8/tools/codemap$',
|
||||
'^v8/tools/consarray$',
|
||||
'^v8/tools/csvparser$',
|
||||
'^v8/tools/logreader$',
|
||||
'^v8/tools/profile_view$',
|
||||
'^v8/tools/profile$',
|
||||
'^v8/tools/SourceMap$',
|
||||
'^v8/tools/splaytree$',
|
||||
'^v8/tools/tickprocessor-driver$',
|
||||
'^v8/tools/tickprocessor$',
|
||||
'^node-inspect/lib/_inspect$',
|
||||
'^node-inspect/lib/internal/inspect_client$',
|
||||
'^node-inspect/lib/internal/inspect_repl$',
|
||||
'^async_hooks$',
|
||||
'^punycode$',
|
||||
'^domain$',
|
||||
'^constants$',
|
||||
'^sys$',
|
||||
'^_linklist$',
|
||||
'^_stream_wrap$'
|
||||
],
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "not-to-deprecated",
|
||||
name: 'not-to-deprecated',
|
||||
comment:
|
||||
"This module uses a (version of an) npm module that has been deprecated. Either upgrade to a later " +
|
||||
"version of that module, or find an alternative. Deprecated modules are a security risk.",
|
||||
severity: "warn",
|
||||
'This module uses a (version of an) npm module that has been deprecated. Either upgrade to a later ' +
|
||||
'version of that module, or find an alternative. Deprecated modules are a security risk.',
|
||||
severity: 'warn',
|
||||
from: {},
|
||||
to: {
|
||||
dependencyTypes: ["deprecated"],
|
||||
},
|
||||
dependencyTypes: [
|
||||
'deprecated'
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "no-non-package-json",
|
||||
severity: "error",
|
||||
name: 'no-non-package-json',
|
||||
severity: 'error',
|
||||
comment:
|
||||
"This module depends on an npm package that isn't in the 'dependencies' section of your package.json. " +
|
||||
"That's problematic as the package either (1) won't be available on live (2 - worse) will be " +
|
||||
@@ -86,75 +90,84 @@ module.exports = {
|
||||
"in your package.json.",
|
||||
from: {},
|
||||
to: {
|
||||
dependencyTypes: ["npm-no-pkg", "npm-unknown"],
|
||||
},
|
||||
dependencyTypes: [
|
||||
'npm-no-pkg',
|
||||
'npm-unknown'
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "not-to-unresolvable",
|
||||
name: 'not-to-unresolvable',
|
||||
comment:
|
||||
"This module depends on a module that cannot be found ('resolved to disk'). If it's an npm " +
|
||||
"module: add it to your package.json. In all other cases you likely already know what to do.",
|
||||
severity: "error",
|
||||
'module: add it to your package.json. In all other cases you likely already know what to do.',
|
||||
severity: 'error',
|
||||
from: {},
|
||||
to: {
|
||||
couldNotResolve: true,
|
||||
},
|
||||
couldNotResolve: true
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "no-duplicate-dep-types",
|
||||
name: 'no-duplicate-dep-types',
|
||||
comment:
|
||||
"Likely this module depends on an external ('npm') package that occurs more than once " +
|
||||
"in your package.json i.e. bot as a devDependencies and in dependencies. This will cause " +
|
||||
"maintenance problems later on.",
|
||||
severity: "warn",
|
||||
severity: 'warn',
|
||||
from: {},
|
||||
to: {
|
||||
moreThanOneDependencyType: true,
|
||||
// as it's pretty common to have a type import be a type only import
|
||||
// _and_ (e.g.) a devDependency - don't consider type-only dependency
|
||||
// types for this rule
|
||||
dependencyTypesNot: ["type-only"],
|
||||
},
|
||||
dependencyTypesNot: ["type-only"]
|
||||
}
|
||||
},
|
||||
|
||||
/* rules you might want to tweak for your specific situation: */
|
||||
|
||||
{
|
||||
name: "not-to-spec",
|
||||
name: 'not-to-spec',
|
||||
comment:
|
||||
"This module depends on a spec (test) file. The sole responsibility of a spec file is to test code. " +
|
||||
'This module depends on a spec (test) file. The sole responsibility of a spec file is to test code. ' +
|
||||
"If there's something in a spec that's of use to other modules, it doesn't have that single " +
|
||||
"responsibility anymore. Factor it out into (e.g.) a separate utility/ helper or a mock.",
|
||||
severity: "error",
|
||||
'responsibility anymore. Factor it out into (e.g.) a separate utility/ helper or a mock.',
|
||||
severity: 'error',
|
||||
from: {},
|
||||
to: {
|
||||
path: "[.](?:spec|test)[.](?:js|mjs|cjs|jsx|ts|mts|cts|tsx)$",
|
||||
},
|
||||
path: '[.](?:spec|test)[.](?:js|mjs|cjs|jsx|ts|mts|cts|tsx)$'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "not-to-dev-dep",
|
||||
severity: "error",
|
||||
name: 'not-to-dev-dep',
|
||||
severity: 'error',
|
||||
comment:
|
||||
"This module depends on an npm package from the 'devDependencies' section of your " +
|
||||
"package.json. It looks like something that ships to production, though. To prevent problems " +
|
||||
'package.json. It looks like something that ships to production, though. To prevent problems ' +
|
||||
"with npm packages that aren't there on production declare it (only!) in the 'dependencies'" +
|
||||
"section of your package.json. If this module is development only - add it to the " +
|
||||
"from.pathNot re of the not-to-dev-dep rule in the dependency-cruiser configuration",
|
||||
'section of your package.json. If this module is development only - add it to the ' +
|
||||
'from.pathNot re of the not-to-dev-dep rule in the dependency-cruiser configuration',
|
||||
from: {
|
||||
path: "^(src)",
|
||||
pathNot: "[.](?:spec|test)[.](?:js|mjs|cjs|jsx|ts|mts|cts|tsx)$",
|
||||
path: '^(src)',
|
||||
pathNot: '[.](?:spec|test)[.](?:js|mjs|cjs|jsx|ts|mts|cts|tsx)$'
|
||||
},
|
||||
to: {
|
||||
dependencyTypes: ["npm-dev"],
|
||||
dependencyTypes: [
|
||||
'npm-dev',
|
||||
],
|
||||
// type only dependencies are not a problem as they don't end up in the
|
||||
// production code or are ignored by the runtime.
|
||||
dependencyTypesNot: ["type-only"],
|
||||
pathNot: ["node_modules/@types/"],
|
||||
},
|
||||
dependencyTypesNot: [
|
||||
'type-only'
|
||||
],
|
||||
pathNot: [
|
||||
'node_modules/@types/'
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "optional-deps-used",
|
||||
severity: "info",
|
||||
name: 'optional-deps-used',
|
||||
severity: 'info',
|
||||
comment:
|
||||
"This module depends on an npm package that is declared as an optional dependency " +
|
||||
"in your package.json. As this makes sense in limited situations only, it's flagged here. " +
|
||||
@@ -162,28 +175,33 @@ module.exports = {
|
||||
"dependency-cruiser configuration.",
|
||||
from: {},
|
||||
to: {
|
||||
dependencyTypes: ["npm-optional"],
|
||||
},
|
||||
dependencyTypes: [
|
||||
'npm-optional'
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "peer-deps-used",
|
||||
name: 'peer-deps-used',
|
||||
comment:
|
||||
"This module depends on an npm package that is declared as a peer dependency " +
|
||||
"in your package.json. This makes sense if your package is e.g. a plugin, but in " +
|
||||
"other cases - maybe not so much. If the use of a peer dependency is intentional " +
|
||||
"add an exception to your dependency-cruiser configuration.",
|
||||
severity: "warn",
|
||||
severity: 'warn',
|
||||
from: {},
|
||||
to: {
|
||||
dependencyTypes: ["npm-peer"],
|
||||
},
|
||||
},
|
||||
dependencyTypes: [
|
||||
'npm-peer'
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
options: {
|
||||
|
||||
/* Which modules not to follow further when encountered */
|
||||
doNotFollow: {
|
||||
/* path: an array of regular expressions in strings to match against */
|
||||
path: ["node_modules"],
|
||||
path: ['node_modules']
|
||||
},
|
||||
|
||||
/* Which modules to exclude */
|
||||
@@ -256,7 +274,7 @@ module.exports = {
|
||||
defaults to './tsconfig.json'.
|
||||
*/
|
||||
tsConfig: {
|
||||
fileName: "tsconfig.json",
|
||||
fileName: 'tsconfig.json'
|
||||
},
|
||||
|
||||
/* Webpack configuration to use to get resolve options from.
|
||||
@@ -346,8 +364,8 @@ module.exports = {
|
||||
"bun:wrap",
|
||||
"detect-libc",
|
||||
"undici",
|
||||
"ws",
|
||||
],
|
||||
"ws"
|
||||
]
|
||||
},
|
||||
|
||||
reporterOptions: {
|
||||
@@ -357,7 +375,7 @@ module.exports = {
|
||||
collapses everything in node_modules to one folder deep so you see
|
||||
the external modules, but their innards.
|
||||
*/
|
||||
collapsePattern: "node_modules/(?:@[^/]+/[^/]+|[^/]+)",
|
||||
collapsePattern: 'node_modules/(?:@[^/]+/[^/]+|[^/]+)',
|
||||
|
||||
/* Options to tweak the appearance of your graph.See
|
||||
https://github.com/sverweij/dependency-cruiser/blob/main/doc/options-reference.md#reporteroptions
|
||||
@@ -379,8 +397,7 @@ module.exports = {
|
||||
dependency graph reporter (`archi`) you probably want to tweak
|
||||
this collapsePattern to your situation.
|
||||
*/
|
||||
collapsePattern:
|
||||
"^(?:packages|src|lib(s?)|app(s?)|bin|test(s?)|spec(s?))/[^/]+|node_modules/(?:@[^/]+/[^/]+|[^/]+)",
|
||||
collapsePattern: '^(?:packages|src|lib(s?)|app(s?)|bin|test(s?)|spec(s?))/[^/]+|node_modules/(?:@[^/]+/[^/]+|[^/]+)',
|
||||
|
||||
/* Options to tweak the appearance of your graph. If you don't specify a
|
||||
theme for 'archi' dependency-cruiser will use the one specified in the
|
||||
@@ -388,10 +405,10 @@ module.exports = {
|
||||
*/
|
||||
// theme: { },
|
||||
},
|
||||
text: {
|
||||
highlightFocused: true,
|
||||
},
|
||||
},
|
||||
"text": {
|
||||
"highlightFocused": true
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
// generated: dependency-cruiser@16.10.0 on 2025-02-16T22:32:01.621Z
|
||||
|
||||
+2
-5
@@ -12,15 +12,12 @@
|
||||
},
|
||||
"rules": {
|
||||
// allow importing ts extensions
|
||||
"sort-imports": [
|
||||
"error",
|
||||
{
|
||||
"sort-imports": ["error", {
|
||||
"ignoreCase": true,
|
||||
"ignoreDeclarationSort": true,
|
||||
"ignoreMemberSort": false,
|
||||
"memberSyntaxSortOrder": ["none", "all", "multiple", "single"]
|
||||
}
|
||||
],
|
||||
}],
|
||||
"import/extensions": [
|
||||
"error",
|
||||
"ignorePackages",
|
||||
|
||||
@@ -2,21 +2,20 @@ name: Bug report
|
||||
description: Report an issue with the modpack in its unmodified state. For other issues, use Discord.
|
||||
labels: bug
|
||||
title: "[BUG]"
|
||||
type: "Bug"
|
||||
body:
|
||||
- type: markdown
|
||||
- type: markdown
|
||||
attributes:
|
||||
value: |
|
||||
Before reporting an issue, [please search](https://github.com/BetterSEQTA/BetterSEQTA-Plus/issues) to make sure it has not already been reported (make sure to search closed issues as well!).
|
||||
|
||||
- type: textarea
|
||||
- type: textarea
|
||||
attributes:
|
||||
label: Describe the bug
|
||||
description: Describe your issue. For general issues and questions you'll get a faster answer [from our Discord.](https://discord.gg/YzmbnCDkat)
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: input
|
||||
- type: input
|
||||
attributes:
|
||||
label: Extension version
|
||||
description: What version of the extension are you using?
|
||||
@@ -24,7 +23,7 @@ body:
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: dropdown
|
||||
- type: dropdown
|
||||
attributes:
|
||||
label: Browser
|
||||
description: Which Browser are you using?
|
||||
@@ -40,14 +39,14 @@ body:
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: checkboxes
|
||||
- type: checkboxes
|
||||
attributes:
|
||||
label: Confirm
|
||||
options:
|
||||
- label: This bug report is about an issue with the extension itself. I have not modified the extension nor added any unsupported plugins. If this is not the case, I know that I should post the issue to the extension's Discord support channel instead.
|
||||
required: true
|
||||
|
||||
- type: textarea
|
||||
- type: textarea
|
||||
attributes:
|
||||
label: Additional context
|
||||
description: Screenshots, video or any other information. Include photos of the console if possible
|
||||
|
||||
@@ -2,16 +2,16 @@ name: Feature request
|
||||
description: Suggest a new Feature to be added or replaced in BetterSeqtaPLUS
|
||||
labels: enhancement
|
||||
title: "[FR]"
|
||||
|
||||
body:
|
||||
- type: checkboxes
|
||||
|
||||
- type: checkboxes
|
||||
attributes:
|
||||
label: Confirm
|
||||
options:
|
||||
- label: "Is this feature request related to a Bug report?"
|
||||
required: false
|
||||
|
||||
- type: input
|
||||
- type: input
|
||||
attributes:
|
||||
label: Bug report link
|
||||
description: "If this feature request is related to a bug report, please insert the link to the bug report here"
|
||||
@@ -19,13 +19,14 @@ body:
|
||||
validations:
|
||||
required: false
|
||||
|
||||
- type: markdown
|
||||
- type: markdown
|
||||
attributes:
|
||||
value: |
|
||||
## Feature details
|
||||
Before you request a feature, [please search](https://github.com/BetterSEQTA/BetterSEQTA-Plus/issues) if it has already been requested. (Make sure to check closed issues as well!)
|
||||
|
||||
- type: dropdown
|
||||
|
||||
- type: dropdown
|
||||
attributes:
|
||||
label: Feature type
|
||||
multiple: false
|
||||
@@ -36,17 +37,18 @@ body:
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: input
|
||||
|
||||
- type: input
|
||||
attributes:
|
||||
label: Feature Details
|
||||
description: Please write, with as much detail as possible, what you would like to see from this feature.
|
||||
placeholder: it would be cool if
|
||||
description: Please write, with as much detail as possible, what you would like to see from this mod.
|
||||
placeholder: I would like to see...
|
||||
validations:
|
||||
required: false
|
||||
|
||||
- type: textarea
|
||||
- type: textarea
|
||||
attributes:
|
||||
label: Additional details
|
||||
description: Anything else that would help describe your vision (reference images, descriptions, etc)
|
||||
description: Anything else you want to add?
|
||||
validations:
|
||||
required: false
|
||||
|
||||
@@ -1,114 +0,0 @@
|
||||
name: 🙋 New Contributor - Need Help Getting Started
|
||||
description: Perfect for first-time contributors who need guidance
|
||||
labels: ["help wanted", "documentation"]
|
||||
title: "[NEW CONTRIBUTOR] "
|
||||
|
||||
body:
|
||||
- type: markdown
|
||||
attributes:
|
||||
value: |
|
||||
## Hi there! 👋
|
||||
Welcome to BetterSEQTA+! We're excited to have you join our community.
|
||||
|
||||
- type: checkboxes
|
||||
attributes:
|
||||
label: Tell us about yourself (check all that apply)
|
||||
options:
|
||||
- label: "This is my first time contributing to open source"
|
||||
required: false
|
||||
- label: "I'm new to browser extensions"
|
||||
required: false
|
||||
- label: "I'm new to TypeScript/JavaScript"
|
||||
required: false
|
||||
- label: "I have some coding experience but new to this project"
|
||||
required: false
|
||||
|
||||
- type: checkboxes
|
||||
attributes:
|
||||
label: What would you like to work on? (check all that apply)
|
||||
options:
|
||||
- label: "Fix a bug 🐛"
|
||||
required: false
|
||||
- label: "Add a new feature ✨"
|
||||
required: false
|
||||
- label: "Improve documentation 📚"
|
||||
required: false
|
||||
- label: "Create a plugin 🧩"
|
||||
required: false
|
||||
- label: "Improve the UI/design 🎨"
|
||||
required: false
|
||||
- label: "Write tests 🧪"
|
||||
required: false
|
||||
- label: "Not sure - I want to help but need guidance!"
|
||||
required: false
|
||||
|
||||
- type: checkboxes
|
||||
attributes:
|
||||
label: Have you read our guides?
|
||||
options:
|
||||
- label: "Getting Started Guide (see docs/GETTING_STARTED_CONTRIBUTING.md)"
|
||||
required: true
|
||||
- label: "Architecture Guide (see docs/ARCHITECTURE.md)"
|
||||
required: true
|
||||
- label: "Plugin Development Guide (see docs/plugins/README.md)"
|
||||
required: true
|
||||
|
||||
- type: checkboxes
|
||||
attributes:
|
||||
label: Have you set up the development environment yet?
|
||||
options:
|
||||
- label: Yes, everything works! 🎉
|
||||
required: false
|
||||
- label: Partially - I can run `npm run dev` but having some issues
|
||||
required: false
|
||||
- label: No, I need help with setup
|
||||
required: false
|
||||
- label: I tried but ran into errors (please describe below)
|
||||
required: false
|
||||
|
||||
- type: input
|
||||
attributes:
|
||||
label: Errors
|
||||
description: "Please list any encountered errors here:"
|
||||
placeholder: "I am encountering issues with..."
|
||||
validations:
|
||||
required: false
|
||||
|
||||
- type: input
|
||||
attributes:
|
||||
label: Questions or Issues
|
||||
description: "Tell us:
|
||||
1. What specifically would you like help with?
|
||||
2. Are you stuck on anything?
|
||||
3. Do you have any questions about the codebase?
|
||||
4. Is there anything in our documentation that's unclear?"
|
||||
placeholder: "I want help with..."
|
||||
validations:
|
||||
required: false
|
||||
|
||||
- type: input
|
||||
attributes:
|
||||
label: Ideas or Suggestions
|
||||
description: "If you have any ideas for features, improvements, or just want to share your thoughts:"
|
||||
placeholder: "It would be cool if I could help add..."
|
||||
validations:
|
||||
required: false
|
||||
|
||||
- type: markdown
|
||||
attributes:
|
||||
value: |
|
||||
## What happens next?
|
||||
|
||||
A maintainer will respond within 24-48 hours to:
|
||||
- Answer your questions
|
||||
- Suggest some good issues to work on
|
||||
- Help you with setup if needed
|
||||
- Point you to relevant documentation
|
||||
|
||||
Don't worry if you're new to this - we're here to help! Every expert was once a beginner. 🚀
|
||||
|
||||
**Join our [Discord server](https://discord.gg/YzmbnCDkat) for real-time help and community chat!**
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -2,9 +2,9 @@ name: NodeJS Build
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: ["main"]
|
||||
branches: [ "main" ]
|
||||
pull_request:
|
||||
branches: ["main"]
|
||||
branches: [ "main" ]
|
||||
|
||||
jobs:
|
||||
build:
|
||||
|
||||
+10
-10
@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
|
||||
Examples of behavior that contributes to a positive environment for our
|
||||
community include:
|
||||
|
||||
- Demonstrating empathy and kindness toward other people
|
||||
- Being respectful of differing opinions, viewpoints, and experiences
|
||||
- Giving and gracefully accepting constructive feedback
|
||||
- Accepting responsibility and apologizing to those affected by our mistakes,
|
||||
* Demonstrating empathy and kindness toward other people
|
||||
* Being respectful of differing opinions, viewpoints, and experiences
|
||||
* Giving and gracefully accepting constructive feedback
|
||||
* Accepting responsibility and apologizing to those affected by our mistakes,
|
||||
and learning from the experience
|
||||
- Focusing on what is best not just for us as individuals, but for the
|
||||
* Focusing on what is best not just for us as individuals, but for the
|
||||
overall community
|
||||
|
||||
Examples of unacceptable behavior include:
|
||||
|
||||
- The use of sexualized language or imagery, and sexual attention or
|
||||
* The use of sexualized language or imagery, and sexual attention or
|
||||
advances of any kind
|
||||
- Trolling, insulting or derogatory comments, and personal or political attacks
|
||||
- Public or private harassment
|
||||
- Publishing others' private information, such as a physical or email
|
||||
* Trolling, insulting or derogatory comments, and personal or political attacks
|
||||
* Public or private harassment
|
||||
* Publishing others' private information, such as a physical or email
|
||||
address, without their explicit permission
|
||||
- Other conduct which could reasonably be considered inappropriate in a
|
||||
* Other conduct which could reasonably be considered inappropriate in a
|
||||
professional setting
|
||||
|
||||
## Enforcement Responsibilities
|
||||
|
||||
+5
-23
@@ -1,31 +1,13 @@
|
||||
# Contributing to BetterSEQTA+
|
||||
# Contributing
|
||||
|
||||
Hey there! 👋 Thanks for your interest in contributing to BetterSEQTA+! We're excited to have you join our community of contributors.
|
||||
|
||||
## 🚀 New Contributors Start Here!
|
||||
|
||||
**Never contributed to an open source project before?** No worries! We've made it super easy to get started:
|
||||
|
||||
- **📖 Read our [Getting Started Guide](./docs/GETTING_STARTED_CONTRIBUTING.md)** - This walks you through everything step-by-step, from setting up your development environment to making your first pull request.
|
||||
- **🏗️ Understand the codebase** with our [Architecture Guide](./docs/ARCHITECTURE.md)
|
||||
- **🔧 Having issues?** Check our [Troubleshooting Guide](./docs/TROUBLESHOOTING.md)
|
||||
|
||||
We have lots of [`good first issue`](https://github.com/BetterSEQTA/BetterSEQTA-plus/labels/good%20first%20issue) labels that are perfect for beginners!
|
||||
|
||||
## Discussion Before Contributing
|
||||
|
||||
For significant changes, please first discuss what you'd like to change via:
|
||||
- Opening an issue
|
||||
- Joining our Discord server
|
||||
- Emailing the maintainers
|
||||
|
||||
This helps ensure your contribution aligns with the project's goals and saves you time!
|
||||
When contributing to this repository, please first discuss the change you wish to make via issue,
|
||||
email, or any other method with the owners of this repository before making a change.
|
||||
|
||||
## Community
|
||||
|
||||
Join our community channels to discuss the project, get help, and connect with other contributors:
|
||||
|
||||
- **Discord Server**: [Join our Discord](https://discord.gg/YzmbnCDkat)
|
||||
- **Discord Server**: [Join our Discord](https://discord.gg/betterseqta)
|
||||
- **GitHub Discussions**: For longer-form conversations
|
||||
- **GitHub Issues**: For bug reports and feature requests
|
||||
|
||||
@@ -39,7 +21,7 @@ If you're interested in creating plugins for BetterSEQTA+, check out our plugin
|
||||
## Pull Request Process
|
||||
|
||||
1. It is recommended to start by opening an issue to discuss the change you wish to make. This will allow us to discuss the change and ensure it is a good fit for the project.
|
||||
2. Fork the repo and create your branch from `main`.
|
||||
2. Fork the repo and create your branch from `master`.
|
||||
3. When writing your pull request, make sure to use the pull request template.
|
||||
|
||||
### Pull Request Template
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
|
||||
#
|
||||
|
||||
<a href="https://chromewebstore.google.com/detail/betterseqta+/afdgaoaclhkhemfkkkonemoapeinchel">
|
||||
<img src="https://socialify.git.ci/betterseqta/betterseqta-plus/image?description=1&font=Inter&forks=1&issues=1&logo=data%3Aimage%2Fsvg%2Bxml%2C%253Csvg%20height%3D%27656pt%27%20fill%3D%27white%27%20preserveAspectRatio%3D%27xMidYMid%20meet%27%20viewBox%3D%270%200%20658%20656%27%20width%3D%27658pt%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%253E%253Cg%20transform%3D%27matrix(.1%200%200%20-.1%200%20656)%27%253E%253Cpath%20d%3D%27m2960%206499c-918-100-1726-561-2278-1299-196-262-374-609-475-925-171-533-203-1109-91-1655%20228-1115%201030-2032%202104-2408%20356-124%20680-177%201080-176%20269%201%20403%2014%20650%2064%20790%20159%201503%20624%201980%201290%20714%20998%20799%202342%20217%203420-488%20902-1361%201515-2382%201671-113%2017-196%2022-430%2024-159%202-328-1-375-6zm566-1443c476-99%20885-385%201134-791%20190-309%20282-696%20250-1045-22-240-73-420-180-635-78-156-159-275-274-401l-77-84h445%20446v-235-236l-1162%204-1163%203-100%2023c-449%20101-812%20337-1071%20697-77%20107-193%20335-233%20459-115%20358-116%20726-1%201078%20209%20644%20766%201101%201446%201187%20128%2016%20405%204%20540-24z%27%2F%253E%253Cpath%20d%3D%27m3065%204604c-250-36-396-89-576-209-280-187-470-478-535-821-25-135-16-395%2019-525%2095-351%20331-644%20651-806%2098-49%20225-93%20331-114%2092-18%20368-18%20460%200%20481%2095%20853%20444%20982%20921%2035%20129%2044%20389%2019%20524-36%20191-121%20387-228%20531-186%20249-476%20428-783%20485-65%2012-291%2021-340%2014z%27%2F%253E%253C%2Fg%253E%253C%2Fsvg%253E&name=1&owner=1&pattern=Signal&stargazers=1&theme=Dark" />
|
||||
</a>
|
||||
@@ -54,53 +57,66 @@ If you are looking to create custom themes, I would recommend you start at the o
|
||||
|
||||
Don't worry- if you get stuck feel free to ask around in the [discord](https://discord.gg/YzmbnCDkat). We're open and happy to help out! Happy creating :)
|
||||
|
||||
## 🚀 Want to Contribute?
|
||||
## Getting started
|
||||
|
||||
**New contributors welcome!** 🎉 We've made it easy to get started:
|
||||
1. Clone the repository
|
||||
|
||||
- **👋 New to the project?** Start with our [Getting Started Guide](./docs/GETTING_STARTED_CONTRIBUTING.md)
|
||||
- **🏗️ Want to understand the code?** Check out our [Architecture Guide](./docs/ARCHITECTURE.md)
|
||||
- **🧩 Interested in plugins?** Read our [Plugin Development Guide](./docs/plugins/README.md)
|
||||
- **🐛 Found a bug?** Open an [issue](https://github.com/BetterSEQTA/BetterSEQTA-plus/issues) or fix it yourself!
|
||||
- **💬 Need help?** Join our [Discord community](https://discord.gg/YzmbnCDkat)
|
||||
|
||||
We have lots of [`good first issue`](https://github.com/BetterSEQTA/BetterSEQTA-plus/labels/good%20first%20issue) labels perfect for beginners!
|
||||
|
||||
## Quick Development Setup
|
||||
|
||||
**1. Fork & Clone**
|
||||
```bash
|
||||
git clone https://github.com/YOUR_USERNAME/BetterSEQTA-Plus
|
||||
cd BetterSEQTA-Plus
|
||||
```
|
||||
git clone https://github.com/BetterSEQTA/BetterSEQTA-Plus
|
||||
```
|
||||
|
||||
**2. Install & Run**
|
||||
```bash
|
||||
npm install --legacy-peer-deps
|
||||
npm run dev
|
||||
|
||||
|
||||
1. Install dependencies
|
||||
|
||||
You may install the dependencies like below:
|
||||
|
||||
```
|
||||
npm install # or your preferred package manager like pnpm or yarn
|
||||
```
|
||||
|
||||
**3. Load in Browser**
|
||||
1. Go to `chrome://extensions`
|
||||
2. Enable "Developer mode"
|
||||
3. Click "Load unpacked" → Select `dist` folder
|
||||
4. Visit a SEQTA page to see it work! 🎉
|
||||
But it is recommended to do it like this:
|
||||
|
||||
📚 **Need more details?** Check our [detailed setup guide](./docs/GETTING_STARTED_CONTRIBUTING.md#your-first-30-minutes)
|
||||
|
||||
### Building for Production
|
||||
|
||||
```bash
|
||||
npm run build # Build for all browsers
|
||||
npm run zip # Package for distribution (requires 7-Zip)
|
||||
```
|
||||
npm install --legacy-peer-deps # Only NPM supported
|
||||
```
|
||||
### Running Development
|
||||
2. Run the dev script (it updates as you save files)
|
||||
|
||||
```
|
||||
npm run dev # or use your perferred package manager
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Building for production
|
||||
|
||||
2. Run the build script
|
||||
|
||||
```
|
||||
npm run build # or use your perferred package manager
|
||||
```
|
||||
|
||||
2.1. Package it up (optional)
|
||||
|
||||
```
|
||||
npm run zip # This REQUIRES 7-Zip to be installed in order to work. You can also use your perferred package manager
|
||||
```
|
||||
3. Load the extension into chrome
|
||||
|
||||
- Go to `chrome://extensions`
|
||||
- Enable developer mode
|
||||
- Click `Load unpacked`
|
||||
- Select the `dist` folder
|
||||
|
||||
Just remember, in order to update changes to the extension if you are running in developer mode, you need to click the refresh button on the extension in `chrome://extensions` whenever anything's changed.
|
||||
|
||||
## Folder Structure
|
||||
|
||||
The folder structure is as follows:
|
||||
|
||||
- The `src` folder contains source files that are compiled to the build directory.
|
||||
|
||||
-
|
||||
- The `src/plugins` folder contains vital loaders required for BetterSEQTA+ functionality.
|
||||
|
||||
- The `src/interface` folder contains source React & Svelte files that are required for the Settings page.
|
||||
@@ -114,10 +130,9 @@ The folder structure is as follows:
|
||||
</a>
|
||||
|
||||
Want to contribute? [Click Here!](https://github.com/BetterSEQTA/BetterSEQTA-Plus/blob/main/CONTRIBUTING.md)
|
||||
|
||||
## Credits
|
||||
|
||||
This extension was initially developed by [Nulkem](https://github.com/Nulkem/betterseqta), was ported to manifest V3 by [MEGA-Dawg68](https://github.com/MEGA-Dawg68) and is currently under active development from lead developers [SethBurkart123](https://github.com/SethBurkart123) and [Crazypersonalph](https://github.com/Crazypersonalph) with help from other volunteers.
|
||||
This extension was initially developed by [Nulkem](https://github.com/Nulkem/betterseqta), was ported to manifest V3 by [MEGA-Dawg68](https://github.com/MEGA-Dawg68) and is currently under active development by [SethBurkart123](https://github.com/SethBurkart123) and [Crazypersonalph](https://github.com/Crazypersonalph)
|
||||
|
||||
## Star History
|
||||
|
||||
|
||||
+1
-2
@@ -5,12 +5,11 @@
|
||||
Below here is the supported versions of BetterSEQTA+. Anything older than this is not supported and contains bugs.
|
||||
|
||||
| Version | Supported |
|
||||
| ------- | --------- |
|
||||
| ------- | ------------------ |
|
||||
| 3.4.3 | ✅ |
|
||||
| < 3.4.3 | :x: |
|
||||
|
||||
`*` May not work on other devices.
|
||||
|
||||
## Reporting a Vulnerability
|
||||
|
||||
If you find vulnerabilities, REPORT IT IMMEDIATELY. open the [advisories tab](https://github.com/BetterSEQTA/BetterSEQTA-Plus/security/advisories) on the left and click the green "report a vulnerability" button or use [this quick-link](https://github.com/BetterSEQTA/BetterSEQTA-Plus/security/advisories/new) to create a new report
|
||||
|
||||
@@ -1,235 +0,0 @@
|
||||
# BetterSEQTA+ Architecture
|
||||
|
||||
Hey there! 👋 New to the codebase and feeling a bit lost? Don't worry - this guide will help you understand how everything fits together!
|
||||
|
||||
## Table of Contents
|
||||
|
||||
- [Overview](#overview)
|
||||
- [High-Level Architecture](#high-level-architecture)
|
||||
- [Core Components](#core-components)
|
||||
- [Plugin System](#plugin-system)
|
||||
- [File Structure Explained](#file-structure-explained)
|
||||
- [Data Flow](#data-flow)
|
||||
- [Browser Extension Basics](#browser-extension-basics)
|
||||
|
||||
## Overview
|
||||
|
||||
BetterSEQTA+ is a browser extension that enhances SEQTA Learn by:
|
||||
- Adding new features through a plugin system
|
||||
- Providing customizable themes and UI improvements
|
||||
- Offering better navigation and user experience
|
||||
|
||||
Think of it like this: **SEQTA Learn + BetterSEQTA+ = Enhanced SEQTA Experience**
|
||||
|
||||
## High-Level Architecture
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ BROWSER EXTENSION │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌─────────────────┐ ┌──────────────────┐ │
|
||||
│ │ Background │ │ Content Script │ │
|
||||
│ │ Script │ │ (SEQTA.ts) │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ - Settings │◄───┤ - Page Detection│ │
|
||||
│ │ - Storage │ │ - Plugin Loading│ │
|
||||
│ │ - Updates │ │ - UI Injection │ │
|
||||
│ └─────────────────┘ └──────────────────┘ │
|
||||
│ │ │
|
||||
│ ┌─────────▼─────────┐ │
|
||||
│ │ Plugin System │ │
|
||||
│ │ │ │
|
||||
│ │ ┌─────────────┐ │ │
|
||||
│ │ │ Built-in │ │ │
|
||||
│ │ │ Plugins │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ │ - Themes │ │ │
|
||||
│ │ │ - Search │ │ │
|
||||
│ │ │ - Timetable │ │ │
|
||||
│ │ │ - etc... │ │ │
|
||||
│ │ └─────────────┘ │ │
|
||||
│ └───────────────────┘ │
|
||||
│ │ │
|
||||
│ ┌─────────▼─────────┐ │
|
||||
│ │ Settings UI │ │
|
||||
│ │ (Svelte App) │ │
|
||||
│ │ │ │
|
||||
│ │ - Plugin Config │ │
|
||||
│ │ - Theme Creator │ │
|
||||
│ │ - General Settings│ │
|
||||
│ └───────────────────┘ │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
│
|
||||
┌─────────▼─────────┐
|
||||
│ SEQTA Learn │
|
||||
│ Website │
|
||||
└───────────────────┘
|
||||
```
|
||||
|
||||
## Core Components
|
||||
|
||||
### 1. Entry Point (`src/SEQTA.ts`)
|
||||
This is where it all begins! When you visit a SEQTA page:
|
||||
1. Detects if you're on a SEQTA Learn page
|
||||
2. Injects our CSS styles
|
||||
3. Changes the favicon to BetterSEQTA+ icon
|
||||
4. Loads settings from storage
|
||||
5. Initializes the plugin system
|
||||
|
||||
### 2. Plugin System (`src/plugins/`)
|
||||
The heart of BetterSEQTA+! This is what makes it extensible:
|
||||
- **Plugin Manager**: Registers and manages all plugins
|
||||
- **Built-in Plugins**: Pre-made plugins (themes, search, etc.)
|
||||
- **Plugin API**: Provides plugins with tools to interact with SEQTA
|
||||
|
||||
### 3. Settings UI (`src/interface/`)
|
||||
A Svelte application that lets users:
|
||||
- Enable/disable plugins
|
||||
- Configure plugin settings
|
||||
- Create custom themes
|
||||
- Browse the theme store
|
||||
|
||||
### 4. Background Script (`src/background.ts`)
|
||||
Runs in the background and handles:
|
||||
- Extension-wide settings storage
|
||||
- Communication between different parts
|
||||
- Update notifications
|
||||
|
||||
## Plugin System
|
||||
|
||||
Our plugin system is what makes BetterSEQTA+ so powerful. Here's how it works:
|
||||
|
||||
### Plugin Lifecycle
|
||||
```
|
||||
Plugin Registration → Settings Loading → Plugin Initialization → Running → Cleanup
|
||||
```
|
||||
|
||||
### Built-in Plugins Overview
|
||||
|
||||
| Plugin | What it does | Files |
|
||||
|--------|-------------|-------|
|
||||
| **Themes** | Custom CSS themes and backgrounds | `src/plugins/built-in/themes/` |
|
||||
| **Global Search** | Search across all SEQTA content | `src/plugins/built-in/globalSearch/` |
|
||||
| **Timetable** | Enhanced timetable features | `src/plugins/built-in/timetable/` |
|
||||
| **Profile Picture** | Custom profile pictures | `src/plugins/built-in/profilePicture/` |
|
||||
| **Animated Background** | Moving background animations | `src/plugins/built-in/animatedBackground/` |
|
||||
|
||||
### Creating a Plugin
|
||||
Every plugin follows this structure:
|
||||
```typescript
|
||||
const myPlugin: Plugin = {
|
||||
id: "unique-plugin-id",
|
||||
name: "Human Readable Name",
|
||||
description: "What does this plugin do?",
|
||||
version: "1.0.0",
|
||||
settings: { /* user configurable options */ },
|
||||
run: async (api) => {
|
||||
// Your plugin code goes here!
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## File Structure Explained
|
||||
|
||||
```
|
||||
src/
|
||||
├── SEQTA.ts # 🚀 Main entry point - start reading here!
|
||||
├── background.ts # 🔧 Background script for extension
|
||||
├── manifests/ # 📦 Browser extension manifests
|
||||
├── plugins/ # 🧩 Plugin system (the magic happens here!)
|
||||
│ ├── core/ # 🏗️ Plugin infrastructure
|
||||
│ ├── built-in/ # 🎁 Pre-made plugins
|
||||
│ └── index.ts # 📋 Plugin registration
|
||||
├── interface/ # 🎨 Settings UI (Svelte app)
|
||||
│ ├── pages/ # 📄 Settings pages
|
||||
│ ├── components/ # 🧱 Reusable UI components
|
||||
│ └── main.ts # 🏠 Settings app entry point
|
||||
├── seqta/ # 🔗 SEQTA-specific utilities
|
||||
│ ├── main.ts # 🎯 Core SEQTA modifications
|
||||
│ ├── ui/ # 🎨 UI manipulation helpers
|
||||
│ └── utils/ # 🛠️ Helper functions
|
||||
└── css/ # 💄 Styles and themes
|
||||
```
|
||||
|
||||
### Where to Start Reading?
|
||||
1. **New to the project?** Start with `src/SEQTA.ts`
|
||||
2. **Want to understand plugins?** Look at `src/plugins/core/types.ts`
|
||||
3. **Want to see a simple plugin?** Check out `src/plugins/built-in/profilePicture/`
|
||||
4. **Interested in the UI?** Explore `src/interface/main.ts`
|
||||
|
||||
## Data Flow
|
||||
|
||||
Here's how data flows through the system:
|
||||
|
||||
```
|
||||
User visits SEQTA → SEQTA.ts detects page → Loads settings from storage
|
||||
│
|
||||
▼
|
||||
Plugin Manager initializes → Each plugin gets API access → Plugins modify SEQTA
|
||||
│
|
||||
▼
|
||||
User opens settings → Svelte UI loads → Settings changed → Storage updated
|
||||
│
|
||||
▼
|
||||
Storage change detected → Plugins notified → UI updates automatically
|
||||
```
|
||||
|
||||
## Browser Extension Basics
|
||||
|
||||
Never worked on a browser extension before? Here's what you need to know:
|
||||
|
||||
### Content Scripts vs Background Scripts
|
||||
- **Content Script** (`SEQTA.ts`): Runs on SEQTA pages, can access and modify the page
|
||||
- **Background Script** (`background.ts`): Runs in the background, handles storage and messaging
|
||||
|
||||
### Manifest Files
|
||||
Each browser needs a slightly different manifest file:
|
||||
- `manifests/chrome.ts` - Chrome, Edge, Brave
|
||||
- `manifests/firefox.ts` - Firefox
|
||||
- `manifests/safari.ts` - Safari (experimental)
|
||||
|
||||
### Communication
|
||||
Different parts of the extension communicate using:
|
||||
- `browser.runtime.sendMessage()` - Send messages
|
||||
- `browser.storage` - Shared storage, but we have created a custom storage system that is easier to use:
|
||||
```ts
|
||||
settingsState.[the setting name] = [whatever you want to set it to]
|
||||
console.log(settingsState.[the setting name])
|
||||
```
|
||||
- Custom events for plugin communication
|
||||
|
||||
## Development Tips
|
||||
|
||||
### Debugging
|
||||
1. **Chrome DevTools**: Right-click → Inspect → Console tab
|
||||
2. **Extension Console**: `chrome://extensions` → BetterSEQTA+ → "Inspect views: background page"
|
||||
3. **Look for logs**: We log everything with `[BetterSEQTA+]` prefix
|
||||
|
||||
### Making Changes
|
||||
1. Edit code → Save → Browser auto-reloads extension → Refresh SEQTA page
|
||||
2. For UI changes: The dev server hot-reloads automatically
|
||||
3. For plugin changes: May need to disable/enable the plugin in settings
|
||||
|
||||
### Common Gotchas
|
||||
- Settings take a moment to load (use `api.settings.loaded` promise)
|
||||
- Some SEQTA elements load dynamically (use `api.seqta.onMount()`)
|
||||
- Plugin cleanup is important (always return a cleanup function)
|
||||
|
||||
## Next Steps
|
||||
|
||||
Ready to contribute? Here's what to do next:
|
||||
|
||||
1. **Read the code**: Start with `src/SEQTA.ts` and follow the flow
|
||||
2. **Try creating a simple plugin**: Follow our [plugin guide](./plugins/README.md)
|
||||
3. **Look at existing issues**: Check our [GitHub issues](https://github.com/BetterSEQTA/BetterSEQTA-plus/issues) for "good first issue" labels
|
||||
4. **Join our Discord**: Get help from the community!
|
||||
|
||||
## Questions?
|
||||
|
||||
Still confused about something? That's totally normal! Here are your options:
|
||||
- 💬 Ask in our [Discord server](https://discord.gg/YzmbnCDkat)
|
||||
- 🐛 Open an issue on GitHub
|
||||
- 📧 Email us at betterseqta@betterseqta.com
|
||||
|
||||
Remember: **Every expert was once a beginner!** We're here to help you learn and contribute. 🚀
|
||||
@@ -1,285 +0,0 @@
|
||||
# Getting Started as a Contributor
|
||||
|
||||
Welcome to BetterSEQTA+! 🎉 This guide will walk you through making your first contribution, even if you're completely new to the project.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
- [Before You Start](#before-you-start)
|
||||
- [Your First 30 Minutes](#your-first-30-minutes)
|
||||
- [Making Your First Contribution](#making-your-first-contribution)
|
||||
- [Types of Contributions](#types-of-contributions)
|
||||
- [Finding Something to Work On](#finding-something-to-work-on)
|
||||
- [Development Workflow](#development-workflow)
|
||||
- [Getting Help](#getting-help)
|
||||
|
||||
## Before You Start
|
||||
|
||||
### What You'll Need
|
||||
- **Node.js** (v16 or higher) - [Download here](https://nodejs.org/)
|
||||
- **Git** - [Download here](https://git-scm.com/)
|
||||
- **A code editor** - We recommend [VS Code](https://code.visualstudio.com/)
|
||||
- **A Chromium browser** (Chrome, Edge, Brave) for testing (recommended, however you can use firefox although it requires being built every time you make a change)
|
||||
|
||||
### Helpful Background (but not required!)
|
||||
- Basic JavaScript/TypeScript knowledge
|
||||
- Some familiarity with HTML/CSS
|
||||
- Understanding of browser extensions (we'll teach you!)
|
||||
|
||||
**Don't worry if you're missing some of these!** We're happy to help you learn. 🤗
|
||||
|
||||
## Your First 30 Minutes
|
||||
|
||||
Let's get you up and running quickly:
|
||||
|
||||
### 1. Get the Code (3 minutes)
|
||||
```bash
|
||||
# Fork the repository on GitHub first, then:
|
||||
git clone https://github.com/YOUR_USERNAME/BetterSEQTA-plus.git
|
||||
cd BetterSEQTA-plus
|
||||
```
|
||||
|
||||
### 2. Install Dependencies (3 minutes)
|
||||
```bash
|
||||
npm install --legacy-peer-deps
|
||||
```
|
||||
|
||||
### 3. Start Development Server (2 minutes)
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### 4. Load Extension in Browser (4 minutes)
|
||||
1. Open Chrome and go to `chrome://extensions`
|
||||
2. Enable "Developer mode" (toggle in top right)
|
||||
3. Click "Load unpacked"
|
||||
4. Select the `dist` folder in your project
|
||||
5. Visit a SEQTA Learn page to see BetterSEQTA+ in action!
|
||||
|
||||
### 5. Make a Tiny Change (5 minutes)
|
||||
Let's prove everything works:
|
||||
1. Open `src/SEQTA.ts`
|
||||
2. Find the line that says `"[BetterSEQTA+] Successfully initialised"`
|
||||
3. Change it to `"[BetterSEQTA+] Successfully initialised - Hello [YOUR_NAME]!"`
|
||||
4. Save the file
|
||||
5. Go to `chrome://extensions`, click the refresh icon on BetterSEQTA+
|
||||
6. Refresh a SEQTA page and check the browser console (F12) - you should see your message!
|
||||
|
||||
### 6. Reset Your Change (3 minutes)
|
||||
```bash
|
||||
git checkout -- src/SEQTA.ts
|
||||
```
|
||||
|
||||
**Congratulations! 🎉 You've successfully set up BetterSEQTA+ for development!**
|
||||
|
||||
## Making Your First Contribution
|
||||
|
||||
### Easy First Contributions
|
||||
|
||||
Here are some great starter contributions:
|
||||
|
||||
1. **Fix a typo in documentation** - Super easy and always appreciated!
|
||||
2. **Improve error messages** - Make them more helpful
|
||||
3. **Add comments to code** - Help other contributors understand
|
||||
4. **Create a simple plugin** - Follow our plugin guide
|
||||
5. **Fix a bug you found** - If you found a bug, fix it!
|
||||
|
||||
### Step-by-Step: Your First Pull Request
|
||||
|
||||
#### Step 1: Pick an Issue
|
||||
- Go to our [Issues page](https://github.com/BetterSEQTA/BetterSEQTA-plus/issues)
|
||||
- Look for labels like:
|
||||
- `good first issue` - Perfect for beginners
|
||||
- `help wanted` - We'd love help with these
|
||||
- `documentation` - Improve our docs
|
||||
- `bug` - Fix something broken
|
||||
|
||||
#### Step 2: Claim the Issue
|
||||
Comment on the issue saying "I'd like to work on this!" We'll assign it to you.
|
||||
|
||||
#### Step 3: Create a Branch
|
||||
```bash
|
||||
git checkout -b fix-issue-123 # Replace 123 with the issue number
|
||||
```
|
||||
|
||||
#### Step 4: Make Your Changes
|
||||
- Follow the patterns you see in existing code
|
||||
- Test your changes thoroughly
|
||||
- Keep changes focused and small
|
||||
|
||||
#### Step 5: Test Everything
|
||||
```bash
|
||||
# Test the extension still loads
|
||||
npm run dev
|
||||
|
||||
# Test in browser
|
||||
# 1. Reload extension at chrome://extensions
|
||||
# 2. Visit SEQTA page
|
||||
# 3. Verify everything still works
|
||||
```
|
||||
|
||||
#### Step 6: Commit Your Changes
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "Fix issue #123: Brief description of what you fixed"
|
||||
```
|
||||
|
||||
#### Step 7: Push and Create Pull Request
|
||||
```bash
|
||||
git push origin fix-issue-123
|
||||
```
|
||||
|
||||
Then go to GitHub and create a pull request with:
|
||||
- **Clear title**: "Fix issue #123: Brief description"
|
||||
- **Description**: Explain what you changed and why
|
||||
- **Testing**: Describe how you tested it
|
||||
|
||||
## Types of Contributions
|
||||
|
||||
### 🐛 Bug Fixes
|
||||
- Fix broken features
|
||||
- Improve error handling
|
||||
- Resolve compatibility issues
|
||||
|
||||
**Example**: "The theme selector doesn't work on Firefox"
|
||||
|
||||
### ✨ New Features
|
||||
- Add new plugins
|
||||
- Enhance existing functionality
|
||||
- Improve user experience
|
||||
|
||||
**Example**: "Add keyboard shortcuts for common actions"
|
||||
|
||||
### 📚 Documentation
|
||||
- Fix typos and unclear explanations
|
||||
- Add examples and tutorials
|
||||
- Improve code comments
|
||||
|
||||
**Example**: "Add more examples to the plugin guide"
|
||||
|
||||
### 🎨 Design & UI
|
||||
- Improve the settings interface
|
||||
- Make things more user-friendly
|
||||
- Add animations and polish
|
||||
|
||||
**Example**: "Make the theme creator more intuitive"
|
||||
|
||||
### 🔧 Technical Improvements
|
||||
- Refactor code for clarity
|
||||
- Add tests
|
||||
- Improve performance
|
||||
|
||||
**Example**: "Simplify the plugin loading logic"
|
||||
|
||||
## Finding Something to Work On
|
||||
|
||||
### Browse Issues by Label
|
||||
- [`good first issue`](https://github.com/BetterSEQTA/BetterSEQTA-plus/labels/good%20first%20issue) - Perfect for beginners
|
||||
- [`help wanted`](https://github.com/BetterSEQTA/BetterSEQTA-plus/labels/help%20wanted) - We need help with these
|
||||
- [`documentation`](https://github.com/BetterSEQTA/BetterSEQTA-plus/labels/documentation) - Improve our docs
|
||||
- [`bug`](https://github.com/BetterSEQTA/BetterSEQTA-plus/labels/bug) - Fix something broken
|
||||
- [`enhancement`](https://github.com/BetterSEQTA/BetterSEQTA-plus/labels/enhancement) - Add new features
|
||||
|
||||
### Create Your Own Issue
|
||||
Found a bug or have an idea? Create an issue first to discuss it!
|
||||
|
||||
### Plugin Ideas
|
||||
Want to create a plugin? Here are some ideas:
|
||||
- **Study Timer**: Track study time across SEQTA pages
|
||||
- **Grade Tracker**: Better visualization of grades over time
|
||||
- **Quick Notes**: Add notes to any SEQTA page
|
||||
- **Homework Reminder**: Smart notifications for upcoming due dates
|
||||
- **Custom Shortcuts**: User-defined keyboard shortcuts
|
||||
|
||||
## Development Workflow
|
||||
|
||||
### Daily Development
|
||||
```bash
|
||||
# Start working
|
||||
git pull origin main
|
||||
npm run dev
|
||||
|
||||
# Make changes, test, commit
|
||||
git add .
|
||||
git commit -m "Descriptive commit message"
|
||||
|
||||
# Push when ready
|
||||
git push origin your-branch-name
|
||||
```
|
||||
|
||||
### Before Submitting PR
|
||||
1. **Test thoroughly** - Make sure nothing breaks
|
||||
2. **Check console** - No new errors
|
||||
3. **Test in different browsers** - Chrome and Firefox
|
||||
4. **Update documentation** - If you changed how something works
|
||||
|
||||
### Code Style
|
||||
- Use TypeScript where possible
|
||||
- Follow existing naming conventions
|
||||
- Add comments for complex logic
|
||||
- Keep functions small and focused
|
||||
|
||||
## Getting Help
|
||||
|
||||
### Stuck? Here's How to Get Unstuck
|
||||
|
||||
1. **Check the docs** - [Architecture guide](./ARCHITECTURE.md) explains everything
|
||||
2. **Search existing issues** - Someone might have had the same problem
|
||||
3. **Ask in Discord** - Our community is super helpful
|
||||
4. **Create an issue** - If you found a bug or need help
|
||||
|
||||
### Discord Community
|
||||
Join our [Discord server](https://discord.gg/YzmbnCDkat) for:
|
||||
- Real-time help and discussion
|
||||
- Collaboration on features
|
||||
- Sharing ideas and feedback
|
||||
- Getting to know the community
|
||||
|
||||
### Code Review Process
|
||||
- All contributions need code review
|
||||
- We'll provide helpful feedback
|
||||
- Don't worry about making mistakes - we're here to help!
|
||||
- Reviews usually happen within 24-48 hours
|
||||
|
||||
## Common Questions
|
||||
|
||||
**Q: I'm new to browser extensions. Is this too advanced for me?**
|
||||
A: Not at all! We have lots of beginner-friendly issues, and our plugin system makes it easy to add features without understanding all the browser extension complexities.
|
||||
|
||||
**Q: How long does it take to get my first PR merged?**
|
||||
A: For simple fixes, usually 1-3 days. For larger features, it might take a week or two as we discuss the best approach.
|
||||
|
||||
**Q: I made a mistake in my PR. What do I do?**
|
||||
A: No worries! Just push more commits to the same branch and they'll be added to your PR automatically.
|
||||
|
||||
**Q: Can I work on multiple issues at once?**
|
||||
A: It's better to focus on one issue at a time, especially when starting out. This makes code review easier and reduces conflicts.
|
||||
|
||||
**Q: What if I start working on something and get stuck?**
|
||||
A: Ask for help! Create a draft PR with what you have so far, and we'll help you figure out the next steps.
|
||||
|
||||
## Recognition
|
||||
|
||||
All contributors get:
|
||||
- Recognition in our README
|
||||
- Contributor badge in Discord
|
||||
- Our eternal gratitude! 🙏
|
||||
|
||||
Significant contributors may also get:
|
||||
- Special Discord roles
|
||||
- Input on project direction
|
||||
- Maintainer status
|
||||
|
||||
## Next Steps
|
||||
|
||||
Ready to contribute? Here's what to do:
|
||||
|
||||
1. ✅ **Set up your development environment** (follow the 30-minute guide above)
|
||||
2. 🔍 **Find an issue to work on** (check the "good first issue" label)
|
||||
3. 💬 **Join our Discord** and introduce yourself
|
||||
4. 🚀 **Make your first contribution** and submit a PR
|
||||
|
||||
Remember: **Every expert was once a beginner!** We're excited to help you learn and grow as a contributor. Welcome to the team! 🎉
|
||||
|
||||
---
|
||||
|
||||
*Questions? Suggestions for improving this guide? Open an issue or message us on Discord!*
|
||||
+1
-6
@@ -7,16 +7,11 @@ Welcome to the BetterSEQTA+ documentation! This documentation will help you unde
|
||||
## Table of Contents
|
||||
|
||||
### Getting Started
|
||||
|
||||
- [Project Overview](./README.md) - This file
|
||||
- [Installation Guide](./installation.md) - How to install and set up BetterSEQTA+
|
||||
- [Getting Started Contributing](./GETTING_STARTED_CONTRIBUTING.md) - **Start here!** Complete beginner-friendly guide
|
||||
- [Architecture Guide](./ARCHITECTURE.md) - How BetterSEQTA+ works under the hood
|
||||
- [Contributing Guide](../CONTRIBUTING.md) - Official contribution guidelines
|
||||
- [Troubleshooting](./TROUBLESHOOTING.md) - Common issues and solutions
|
||||
- [Contributing Guide](../CONTRIBUTING.md) - How to contribute to BetterSEQTA+
|
||||
|
||||
### Plugin System
|
||||
|
||||
- [Creating Your First Plugin](./plugins/README.md) - A comprehensive, beginner-friendly guide to creating plugins
|
||||
- [Plugin API Reference](./plugins/api-reference.md) - Detailed technical documentation of the plugin APIs
|
||||
|
||||
|
||||
@@ -1,348 +0,0 @@
|
||||
# Troubleshooting Guide
|
||||
|
||||
Having issues with BetterSEQTA+ development? This guide covers the most common problems and their solutions.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
- [Installation Issues](#installation-issues)
|
||||
- [Development Server Issues](#development-server-issues)
|
||||
- [Browser Extension Issues](#browser-extension-issues)
|
||||
- [Plugin Development Issues](#plugin-development-issues)
|
||||
- [Build Issues](#build-issues)
|
||||
- [Still Stuck?](#still-stuck)
|
||||
|
||||
## Installation Issues
|
||||
|
||||
### ❌ "npm install" fails with peer dependency errors
|
||||
|
||||
**Problem**: You see errors about peer dependencies or conflicting packages.
|
||||
|
||||
**Solution**:
|
||||
```bash
|
||||
rm -rf node_modules package-lock.json
|
||||
npm install --legacy-peer-deps
|
||||
```
|
||||
|
||||
### ❌ "Cannot find module" errors
|
||||
|
||||
**Problem**: Node.js can't find required packages.
|
||||
|
||||
**Solutions**:
|
||||
1. **Clear and reinstall**:
|
||||
```bash
|
||||
rm -rf node_modules
|
||||
npm install --legacy-peer-deps
|
||||
```
|
||||
|
||||
2. **Check Node.js version**:
|
||||
```bash
|
||||
node --version # Should be v16 or higher
|
||||
```
|
||||
|
||||
3. **Try with npm cache clean**:
|
||||
```bash
|
||||
npm cache clean --force
|
||||
npm install --legacy-peer-deps
|
||||
```
|
||||
|
||||
### ❌ Permission errors on macOS/Linux
|
||||
|
||||
**Problem**: "EACCES" or permission denied errors.
|
||||
|
||||
**Solution**:
|
||||
```bash
|
||||
sudo chown -R $(whoami) ~/.npm
|
||||
sudo chown -R $(whoami) /usr/local/lib/node_modules
|
||||
```
|
||||
|
||||
## Development Server Issues
|
||||
|
||||
### ❌ "npm run dev" fails
|
||||
|
||||
**Problem**: Development server won't start.
|
||||
|
||||
**Solutions**:
|
||||
1. **Check if port is in use**:
|
||||
```bash
|
||||
lsof -i :5173 # Kill the process using the port
|
||||
```
|
||||
|
||||
2. **Clear dist folder**:
|
||||
```bash
|
||||
rm -rf dist
|
||||
npm run dev
|
||||
```
|
||||
|
||||
3. **Check for TypeScript errors**:
|
||||
```bash
|
||||
npx tsc --noEmit # Check for type errors
|
||||
```
|
||||
|
||||
### ❌ Changes not reflecting in browser
|
||||
|
||||
**Problem**: You make code changes but don't see them in the browser.
|
||||
|
||||
**Solutions**:
|
||||
1. **Reload the extension**:
|
||||
- Go to `chrome://extensions`
|
||||
- Find BetterSEQTA+ and click the refresh icon
|
||||
- Refresh your SEQTA page
|
||||
|
||||
2. **Check if dev server is running**:
|
||||
- Look for "Build completed" in your terminal
|
||||
- If not, restart `npm run dev`
|
||||
|
||||
3. **Hard refresh the page**:
|
||||
- Press `Ctrl+Shift+R` (or `Cmd+Shift+R` on Mac)
|
||||
|
||||
## Browser Extension Issues
|
||||
|
||||
### ❌ Extension doesn't load in Chrome
|
||||
|
||||
**Problem**: Extension appears in `chrome://extensions` but doesn't work.
|
||||
|
||||
**Solutions**:
|
||||
1. **Check for errors**:
|
||||
- Go to `chrome://extensions`
|
||||
- Click "Errors" button on BetterSEQTA+
|
||||
- Fix any JavaScript errors shown
|
||||
|
||||
2. **Verify manifest**:
|
||||
- Check if `dist/manifest.json` exists
|
||||
- Ensure it has proper structure
|
||||
|
||||
3. **Check permissions**:
|
||||
- Extension needs permission to access SEQTA pages
|
||||
- Click "Details" → "Site access" → "On all sites"
|
||||
|
||||
### ❌ Extension doesn't appear on SEQTA pages
|
||||
|
||||
**Problem**: Extension loads but doesn't modify SEQTA.
|
||||
|
||||
**Solutions**:
|
||||
1. **Check if you're on a SEQTA Learn page**:
|
||||
- URL should contain "seqta" or "learn"
|
||||
- Page title should include "SEQTA Learn"
|
||||
|
||||
2. **Check browser console**:
|
||||
- Press `F12` → Console tab
|
||||
- Look for "[BetterSEQTA+]" messages
|
||||
- If no messages, extension isn't running
|
||||
|
||||
3. **Verify page detection**:
|
||||
- Extension only runs on actual SEQTA Learn pages
|
||||
- Test on a real SEQTA instance
|
||||
|
||||
### ❌ Settings page won't open
|
||||
|
||||
**Problem**: Clicking the extension icon doesn't open settings.
|
||||
|
||||
**Solutions**:
|
||||
1. **Check popup errors**:
|
||||
- Right-click extension icon → "Inspect popup"
|
||||
- Look for JavaScript errors
|
||||
|
||||
2. **Clear extension storage**:
|
||||
```javascript
|
||||
// In browser console on any page:
|
||||
chrome.storage.local.clear()
|
||||
```
|
||||
|
||||
3. **Reload extension and try again**
|
||||
|
||||
## Plugin Development Issues
|
||||
|
||||
### ❌ My plugin doesn't appear in settings
|
||||
|
||||
**Problem**: Created a plugin but it's not showing up.
|
||||
|
||||
**Solutions**:
|
||||
1. **Check plugin registration**:
|
||||
- Ensure your plugin is imported in `src/plugins/index.ts`
|
||||
- Verify `pluginManager.registerPlugin(yourPlugin)` is called
|
||||
|
||||
2. **Check plugin structure**:
|
||||
```typescript
|
||||
// Ensure your plugin has all required fields
|
||||
const myPlugin: Plugin = {
|
||||
id: "unique-id", // Must be unique
|
||||
name: "Display Name",
|
||||
description: "What it does",
|
||||
version: "1.0.0",
|
||||
run: async (api) => {
|
||||
// Your code here
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
3. **Check for errors**:
|
||||
- Look in browser console for plugin loading errors
|
||||
|
||||
### ❌ Plugin settings not working
|
||||
|
||||
**Problem**: Plugin settings don't save or load properly.
|
||||
|
||||
**Solutions**:
|
||||
1. **Check settings definition**:
|
||||
```typescript
|
||||
import { defineSettings, booleanSetting } from "@/plugins/core/settingsHelpers";
|
||||
|
||||
const settings = defineSettings({
|
||||
myOption: booleanSetting({
|
||||
default: true,
|
||||
title: "My Option",
|
||||
description: "What this does"
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
2. **Wait for settings to load**:
|
||||
```typescript
|
||||
run: async (api) => {
|
||||
await api.settings.loaded; // Wait for settings to load
|
||||
console.log(api.settings.myOption); // Now you can use settings
|
||||
}
|
||||
```
|
||||
|
||||
### ❌ Plugin API functions not working
|
||||
|
||||
**Problem**: `api.seqta.onMount()` or other API functions don't work.
|
||||
|
||||
**Solutions**:
|
||||
1. **Check selector specificity**:
|
||||
```typescript
|
||||
// Be specific with selectors
|
||||
api.seqta.onMount(".home-page", (element) => {
|
||||
// Your code
|
||||
});
|
||||
```
|
||||
|
||||
2. **Wait for elements**:
|
||||
```typescript
|
||||
// Some elements load after page navigation
|
||||
api.seqta.onPageChange((page) => {
|
||||
if (page === "home") {
|
||||
api.seqta.onMount(".home-content", (element) => {
|
||||
// Now element should exist
|
||||
});
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## Build Issues
|
||||
|
||||
### ❌ "npm run build" fails
|
||||
|
||||
**Problem**: Production build fails with errors.
|
||||
|
||||
**Solutions**:
|
||||
1. **Check TypeScript errors**:
|
||||
```bash
|
||||
npx tsc --noEmit
|
||||
```
|
||||
|
||||
2. **Clear cache and rebuild**:
|
||||
```bash
|
||||
rm -rf dist node_modules
|
||||
npm install --legacy-peer-deps
|
||||
npm run build
|
||||
```
|
||||
|
||||
3. **Check for import errors**:
|
||||
- Ensure all imports use correct paths
|
||||
- Check for missing files
|
||||
|
||||
### ❌ Built extension doesn't work
|
||||
|
||||
**Problem**: `npm run build` succeeds but extension doesn't work.
|
||||
|
||||
**Solutions**:
|
||||
1. **Test the built extension**:
|
||||
- Load the `dist` folder as unpacked extension
|
||||
- Check console for errors
|
||||
|
||||
2. **Compare with dev version**:
|
||||
- If dev works but build doesn't, there might be a build configuration issue
|
||||
|
||||
3. **Check manifest generation**:
|
||||
- Verify `dist/manifest.json` looks correct
|
||||
- Compare with working version
|
||||
|
||||
## Common Error Messages
|
||||
|
||||
### "Cannot access contents of the URL"
|
||||
- **Cause**: Extension permissions issue
|
||||
- **Fix**: Go to `chrome://extensions` → BetterSEQTA+ → Details → Site access → "On all sites"
|
||||
|
||||
### "Extension context invalidated"
|
||||
- **Cause**: Extension was reloaded while page was open
|
||||
- **Fix**: Refresh the SEQTA page
|
||||
|
||||
### "Uncaught ReferenceError: browser is not defined"
|
||||
- **Cause**: Missing webextension-polyfill import
|
||||
- **Fix**: Add `import browser from "webextension-polyfill";` at top of file
|
||||
|
||||
### "Module not found: Can't resolve '@/...' "
|
||||
- **Cause**: TypeScript path mapping issue
|
||||
- **Fix**: Check `tsconfig.json` and `vite.config.ts` for path configuration
|
||||
|
||||
## Performance Issues
|
||||
|
||||
### Extension makes SEQTA slow
|
||||
1. **Check for memory leaks**:
|
||||
- Use Chrome DevTools → Performance tab
|
||||
- Look for growing memory usage
|
||||
|
||||
2. **Optimize plugin code**:
|
||||
- Remove unnecessary listeners
|
||||
- Clean up intervals/timeouts
|
||||
- Use efficient selectors
|
||||
|
||||
3. **Profile your changes**:
|
||||
- Test with extension disabled vs enabled
|
||||
- Identify which plugin is causing issues
|
||||
|
||||
## Still Stuck?
|
||||
|
||||
If none of these solutions work:
|
||||
|
||||
1. **🔍 Search existing issues**: [GitHub Issues](https://github.com/BetterSEQTA/BetterSEQTA-plus/issues)
|
||||
|
||||
2. **💬 Ask on Discord**: [Join our server](https://discord.gg/YzmbnCDkat) - fastest way to get help!
|
||||
|
||||
3. **📝 Create a new issue**: Include:
|
||||
- Your operating system
|
||||
- Node.js version (`node --version`)
|
||||
- Browser version
|
||||
- Exact error message
|
||||
- Steps to reproduce
|
||||
- What you've already tried
|
||||
|
||||
4. **📧 Email us**: betterseqta.plus@gmail.com for urgent issues
|
||||
|
||||
## Getting More Debug Info
|
||||
|
||||
### Enable verbose logging
|
||||
Add this to your plugin's `run` function:
|
||||
```typescript
|
||||
console.log("[DEBUG] Plugin starting:", api);
|
||||
```
|
||||
|
||||
### Check extension background page
|
||||
1. Go to `chrome://extensions`
|
||||
2. Click "Details" on BetterSEQTA+
|
||||
3. Click "Inspect views: background page"
|
||||
4. Check console for background script errors
|
||||
|
||||
### Export debug info
|
||||
Run this in browser console on a SEQTA page:
|
||||
```javascript
|
||||
console.log("Extension info:", {
|
||||
version: chrome.runtime.getManifest().version,
|
||||
url: window.location.href,
|
||||
userAgent: navigator.userAgent,
|
||||
storage: await chrome.storage.local.get()
|
||||
});
|
||||
```
|
||||
|
||||
Remember: **Don't give up!** Every developer faces these issues. The community is here to help, and solving these problems makes you a better developer. 💪
|
||||
@@ -22,7 +22,6 @@ Thank you for your interest in contributing to BetterSEQTA+! This document provi
|
||||
BetterSEQTA+ is committed to providing a welcoming and inclusive environment for all contributors. We expect all participants to adhere to our Code of Conduct, which promotes respectful and harassment-free interaction.
|
||||
|
||||
Key points:
|
||||
|
||||
- Be respectful and inclusive
|
||||
- Focus on what is best for the community
|
||||
- Show empathy towards other community members
|
||||
@@ -106,7 +105,6 @@ git checkout -b feature/my-new-feature
|
||||
2. **Write Clear Commit Messages**
|
||||
|
||||
Follow the conventional commits format:
|
||||
|
||||
```
|
||||
feat: add new feature
|
||||
fix: resolve bug with timetable
|
||||
@@ -120,7 +118,6 @@ git checkout -b feature/my-new-feature
|
||||
4. **Run Tests**
|
||||
|
||||
Make sure all tests pass before submitting your PR:
|
||||
|
||||
```bash
|
||||
npm test
|
||||
```
|
||||
@@ -160,7 +157,6 @@ We follow TypeScript best practices and have a consistent code style:
|
||||
5. **Use Linters**
|
||||
|
||||
We use ESLint and Prettier. Run them before submitting your PR:
|
||||
|
||||
```bash
|
||||
npm run lint
|
||||
npm run format
|
||||
@@ -177,7 +173,6 @@ If you find a bug, please report it by creating an issue on GitHub:
|
||||
2. **Use the Bug Report Template**
|
||||
|
||||
Fill in all sections of the bug report template:
|
||||
|
||||
- Description
|
||||
- Steps to reproduce
|
||||
- Expected behavior
|
||||
@@ -200,7 +195,6 @@ We welcome feature suggestions! To suggest a new feature:
|
||||
2. **Use the Feature Request Template**
|
||||
|
||||
Fill in all sections of the feature request template:
|
||||
|
||||
- Description
|
||||
- Use case
|
||||
- Potential implementation
|
||||
|
||||
@@ -132,7 +132,6 @@ bun install
|
||||
#### Extension not appearing in SEQTA
|
||||
|
||||
Make sure:
|
||||
|
||||
- You're visiting a SEQTA Learn page
|
||||
- The extension is enabled
|
||||
- You've refreshed the page after installing the extension
|
||||
@@ -140,7 +139,6 @@ Make sure:
|
||||
#### Development build not updating
|
||||
|
||||
Try:
|
||||
|
||||
1. Stopping the development server
|
||||
2. Clearing your browser cache
|
||||
3. Removing the extension from your browser
|
||||
|
||||
@@ -1,335 +0,0 @@
|
||||
# Example Plugin Template
|
||||
|
||||
This is a complete, working example of a simple BetterSEQTA+ plugin. You can copy this code and modify it to create your own plugin!
|
||||
|
||||
## What This Example Does
|
||||
|
||||
This plugin adds a friendly welcome message to the SEQTA homepage and lets users customize the message through settings.
|
||||
|
||||
## Complete Plugin Code
|
||||
|
||||
Create a new file in `src/plugins/built-in/my-first-plugin/index.ts`:
|
||||
|
||||
```typescript
|
||||
import type { Plugin } from "@/plugins/core/types";
|
||||
import { BasePlugin } from "@/plugins/core/settings";
|
||||
import {
|
||||
defineSettings,
|
||||
booleanSetting,
|
||||
stringSetting
|
||||
} from "@/plugins/core/settingsHelpers";
|
||||
import { Setting } from "@/plugins/core/settingsHelpers";
|
||||
|
||||
// Define the plugin settings
|
||||
const settings = defineSettings({
|
||||
enabled: booleanSetting({
|
||||
default: true,
|
||||
title: "Show Welcome Message",
|
||||
description: "Display a welcome message on the SEQTA homepage"
|
||||
}),
|
||||
customMessage: stringSetting({
|
||||
default: "Welcome to SEQTA! 🎉",
|
||||
title: "Custom Message",
|
||||
description: "The message to display on the homepage",
|
||||
maxLength: 100
|
||||
}),
|
||||
showEmoji: booleanSetting({
|
||||
default: true,
|
||||
title: "Show Emoji",
|
||||
description: "Include emojis in the welcome message"
|
||||
})
|
||||
});
|
||||
|
||||
// Create settings class
|
||||
class MyFirstPluginSettings extends BasePlugin<typeof settings> {
|
||||
@Setting(settings.enabled)
|
||||
enabled!: boolean;
|
||||
|
||||
@Setting(settings.customMessage)
|
||||
customMessage!: string;
|
||||
|
||||
@Setting(settings.showEmoji)
|
||||
showEmoji!: boolean;
|
||||
}
|
||||
|
||||
// Create settings instance
|
||||
const settingsInstance = new MyFirstPluginSettings();
|
||||
|
||||
// Define the plugin
|
||||
const myFirstPlugin: Plugin<typeof settings> = {
|
||||
id: "my-first-plugin",
|
||||
name: "My First Plugin",
|
||||
description: "Adds a customizable welcome message to the SEQTA homepage",
|
||||
version: "1.0.0",
|
||||
|
||||
// Link our settings
|
||||
settings: settingsInstance.settings,
|
||||
|
||||
// Mark as beta (optional)
|
||||
beta: true,
|
||||
|
||||
// Add some CSS styles (optional)
|
||||
styles: `
|
||||
.my-plugin-welcome {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
margin: 20px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
animation: slideIn 0.5s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.my-plugin-welcome .close-btn {
|
||||
float: right;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 5px 10px;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.my-plugin-welcome .close-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
`,
|
||||
|
||||
// Main plugin function
|
||||
run: async (api) => {
|
||||
console.log("[My First Plugin] Starting up! 🚀");
|
||||
|
||||
// Wait for settings to load
|
||||
await api.settings.loaded;
|
||||
|
||||
let welcomeElement: HTMLElement | null = null;
|
||||
|
||||
// Function to create the welcome message
|
||||
const createWelcomeMessage = () => {
|
||||
// Only show if enabled in settings
|
||||
if (!api.settings.enabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Remove existing message if it exists
|
||||
if (welcomeElement) {
|
||||
welcomeElement.remove();
|
||||
}
|
||||
|
||||
// Create the message element
|
||||
welcomeElement = document.createElement("div");
|
||||
welcomeElement.className = "my-plugin-welcome";
|
||||
|
||||
// Build the message content
|
||||
let message = api.settings.customMessage;
|
||||
if (!api.settings.showEmoji) {
|
||||
// Remove emojis if disabled
|
||||
message = message.replace(/[\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/gu, '');
|
||||
}
|
||||
|
||||
welcomeElement.innerHTML = `
|
||||
<button class="close-btn" onclick="this.parentElement.remove()">×</button>
|
||||
<div>${message}</div>
|
||||
<small style="opacity: 0.8; margin-top: 10px; display: block;">
|
||||
Powered by My First Plugin
|
||||
</small>
|
||||
`;
|
||||
|
||||
return welcomeElement;
|
||||
};
|
||||
|
||||
// Function to add message to homepage
|
||||
const addToHomepage = () => {
|
||||
api.seqta.onMount(".home-page, .dashboard, [class*='home']", (homePage) => {
|
||||
console.log("[My First Plugin] Found homepage, adding welcome message");
|
||||
|
||||
const message = createWelcomeMessage();
|
||||
if (message) {
|
||||
// Add to the top of the homepage
|
||||
homePage.insertBefore(message, homePage.firstChild);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Add message when plugin starts
|
||||
addToHomepage();
|
||||
|
||||
// Re-add message when user navigates to homepage
|
||||
api.seqta.onPageChange((page) => {
|
||||
console.log("[My First Plugin] Page changed to:", page);
|
||||
if (page.includes("home") || page.includes("dashboard")) {
|
||||
// Small delay to let the page load
|
||||
setTimeout(addToHomepage, 500);
|
||||
}
|
||||
});
|
||||
|
||||
// Listen for settings changes and update the message
|
||||
api.settings.onChange("enabled", (enabled) => {
|
||||
console.log("[My First Plugin] Enabled setting changed:", enabled);
|
||||
if (enabled) {
|
||||
addToHomepage();
|
||||
} else if (welcomeElement) {
|
||||
welcomeElement.remove();
|
||||
welcomeElement = null;
|
||||
}
|
||||
});
|
||||
|
||||
api.settings.onChange("customMessage", (newMessage) => {
|
||||
console.log("[My First Plugin] Message changed:", newMessage);
|
||||
if (welcomeElement && api.settings.enabled) {
|
||||
// Update existing message
|
||||
addToHomepage();
|
||||
}
|
||||
});
|
||||
|
||||
api.settings.onChange("showEmoji", (showEmoji) => {
|
||||
console.log("[My First Plugin] Show emoji changed:", showEmoji);
|
||||
if (welcomeElement && api.settings.enabled) {
|
||||
// Update existing message
|
||||
addToHomepage();
|
||||
}
|
||||
});
|
||||
|
||||
// Return cleanup function (called when plugin is disabled)
|
||||
return () => {
|
||||
console.log("[My First Plugin] Cleaning up...");
|
||||
if (welcomeElement) {
|
||||
welcomeElement.remove();
|
||||
welcomeElement = null;
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
export default myFirstPlugin;
|
||||
```
|
||||
|
||||
## How to Use This Example
|
||||
|
||||
### Step 1: Create the Plugin File
|
||||
1. Create a new folder: `src/plugins/built-in/my-first-plugin/`
|
||||
2. Create `index.ts` in that folder
|
||||
3. Copy the code above into `index.ts`
|
||||
|
||||
### Step 2: Register the Plugin
|
||||
Add this to `src/plugins/index.ts`:
|
||||
|
||||
```typescript
|
||||
// Add this import at the top
|
||||
import myFirstPlugin from "./built-in/my-first-plugin";
|
||||
|
||||
// Add this line where other plugins are registered
|
||||
pluginManager.registerPlugin(myFirstPlugin);
|
||||
```
|
||||
|
||||
### Step 3: Test It
|
||||
1. Run `npm run dev`
|
||||
2. Reload your extension in Chrome
|
||||
3. Visit a SEQTA page
|
||||
4. You should see your welcome message!
|
||||
5. Open BetterSEQTA+ settings to customize it
|
||||
|
||||
## Key Concepts Explained
|
||||
|
||||
### 1. Plugin Structure
|
||||
```typescript
|
||||
const myPlugin: Plugin = {
|
||||
id: "unique-id", // Must be unique across all plugins
|
||||
name: "Display Name", // Shown in settings
|
||||
description: "What it does", // Shown in settings
|
||||
version: "1.0.0", // Plugin version
|
||||
settings: settingsObject, // User-configurable options
|
||||
styles: "/* CSS here */", // Optional CSS styles
|
||||
run: async (api) => { // Main plugin code
|
||||
// Your code here
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 2. Settings System
|
||||
```typescript
|
||||
// Define what settings your plugin has
|
||||
const settings = defineSettings({
|
||||
myOption: booleanSetting({
|
||||
default: true,
|
||||
title: "My Option",
|
||||
description: "What this option does"
|
||||
})
|
||||
});
|
||||
|
||||
// Use in your plugin
|
||||
if (api.settings.myOption) {
|
||||
// Do something
|
||||
}
|
||||
```
|
||||
|
||||
### 3. SEQTA Integration
|
||||
```typescript
|
||||
// Wait for elements to appear
|
||||
api.seqta.onMount(".some-selector", (element) => {
|
||||
// Modify the element
|
||||
});
|
||||
|
||||
// Detect page changes
|
||||
api.seqta.onPageChange((page) => {
|
||||
if (page === "home") {
|
||||
// User navigated to homepage
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### 4. Cleanup
|
||||
Always return a cleanup function to remove your changes when the plugin is disabled:
|
||||
|
||||
```typescript
|
||||
run: async (api) => {
|
||||
// Add your features
|
||||
|
||||
return () => {
|
||||
// Remove your features
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
## Customization Ideas
|
||||
|
||||
Want to modify this example? Here are some ideas:
|
||||
|
||||
1. **Change the styling**: Modify the CSS to use different colors, animations, or layouts
|
||||
2. **Add more settings**: Number settings, select dropdowns, hotkeys
|
||||
3. **Different trigger**: Show on different pages, or based on time of day
|
||||
4. **Add interactions**: Buttons that do things when clicked
|
||||
5. **Store data**: Use `api.storage` to remember user preferences
|
||||
6. **Communicate with other plugins**: Use `api.events` to send/receive events
|
||||
|
||||
## Next Steps
|
||||
|
||||
Once you've got this working:
|
||||
|
||||
1. **Experiment**: Try changing things and see what happens
|
||||
2. **Read other plugins**: Look at the built-in plugins for inspiration
|
||||
3. **Check the API docs**: Learn about all available API functions
|
||||
4. **Share your creation**: Show it off in Discord!
|
||||
|
||||
## Need Help?
|
||||
|
||||
- 💬 Ask in our [Discord server](https://discord.gg/YzmbnCDkat)
|
||||
- 📚 Read our [Plugin Development Guide](./README.md)
|
||||
- 🐛 Check the [Troubleshooting Guide](../TROUBLESHOOTING.md)
|
||||
- 📝 Open an issue on GitHub
|
||||
|
||||
Happy coding! 🎉
|
||||
+35
-75
@@ -5,7 +5,6 @@ Hey there! 👋 So you want to create a plugin for BetterSEQTA+? That's awesome!
|
||||
## What is a Plugin?
|
||||
|
||||
In BetterSEQTA+, a plugin is like a mini-app that adds new features to SEQTA. Think of it as a piece of LEGO that you can snap onto SEQTA to make it do new things. For example, you could create a plugin that:
|
||||
|
||||
- Changes how SEQTA looks
|
||||
- Adds new buttons or features
|
||||
- Shows extra information on your timetable
|
||||
@@ -17,32 +16,29 @@ In BetterSEQTA+, a plugin is like a mini-app that adds new features to SEQTA. Th
|
||||
Let's create a super simple plugin together. We'll make one that adds a friendly message to the SEQTA homepage. Here's what we'll need:
|
||||
|
||||
```typescript
|
||||
import type { Plugin } from "@/plugins/core/types";
|
||||
import type { Plugin } from '@/plugins/core/types';
|
||||
|
||||
const myFirstPlugin: Plugin = {
|
||||
// Every plugin needs these basic details
|
||||
id: "my-first-plugin",
|
||||
name: "My First Plugin",
|
||||
description: "Adds a friendly message to SEQTA",
|
||||
version: "1.0.0",
|
||||
id: 'my-first-plugin',
|
||||
name: 'My First Plugin',
|
||||
description: 'Adds a friendly message to SEQTA',
|
||||
version: '1.0.0',
|
||||
|
||||
// This tells BetterSEQTA+ that users can turn our plugin on/off
|
||||
disableToggle: true,
|
||||
|
||||
// Optional: Mark your plugin as beta to show a "Beta" tag in settings
|
||||
beta: true,
|
||||
|
||||
// This is where the magic happens!
|
||||
run: async (api) => {
|
||||
// Wait for the homepage to load
|
||||
api.seqta.onMount(".home-page", (homePage) => {
|
||||
api.seqta.onMount('.home-page', (homePage) => {
|
||||
// Create our message
|
||||
const message = document.createElement("div");
|
||||
message.textContent = "Hello from my first plugin! 🎉";
|
||||
message.style.padding = "20px";
|
||||
message.style.backgroundColor = "#e9f5ff";
|
||||
message.style.borderRadius = "8px";
|
||||
message.style.margin = "20px";
|
||||
const message = document.createElement('div');
|
||||
message.textContent = 'Hello from my first plugin! 🎉';
|
||||
message.style.padding = '20px';
|
||||
message.style.backgroundColor = '#e9f5ff';
|
||||
message.style.borderRadius = '8px';
|
||||
message.style.margin = '20px';
|
||||
|
||||
// Add it to the page
|
||||
homePage.prepend(message);
|
||||
@@ -50,10 +46,10 @@ const myFirstPlugin: Plugin = {
|
||||
|
||||
// Return a cleanup function that removes our message when the plugin is disabled
|
||||
return () => {
|
||||
const message = document.querySelector(".home-page > div");
|
||||
const message = document.querySelector('.home-page > div');
|
||||
message?.remove();
|
||||
};
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
export default myFirstPlugin;
|
||||
@@ -68,11 +64,10 @@ Let's break down what's happening here:
|
||||
- `description`: Explain what your plugin does
|
||||
- `version`: Your plugin's version number
|
||||
3. We set `disableToggle: true` so users can turn our plugin on/off in settings
|
||||
4. We set `beta: true` to mark the plugin as beta
|
||||
5. The `run` function is where we put our plugin's code
|
||||
6. We use `api.seqta.onMount` to wait for the homepage to load
|
||||
7. We create and style a message element
|
||||
8. We return a cleanup function that removes our changes when the plugin is disabled
|
||||
4. The `run` function is where we put our plugin's code
|
||||
5. We use `api.seqta.onMount` to wait for the homepage to load
|
||||
6. We create and style a message element
|
||||
7. We return a cleanup function that removes our changes when the plugin is disabled
|
||||
|
||||
## The Plugin API
|
||||
|
||||
@@ -84,13 +79,13 @@ This helps you interact with SEQTA's pages:
|
||||
|
||||
```typescript
|
||||
// Wait for an element to appear on the page
|
||||
api.seqta.onMount(".some-class", (element) => {
|
||||
api.seqta.onMount('.some-class', (element) => {
|
||||
// Do something with the element
|
||||
});
|
||||
|
||||
// Know when the user changes pages
|
||||
api.seqta.onPageChange((page) => {
|
||||
console.log("User went to:", page);
|
||||
console.log('User went to:', page);
|
||||
});
|
||||
|
||||
// Get the current page
|
||||
@@ -102,12 +97,8 @@ const currentPage = api.seqta.getCurrentPage();
|
||||
Want to let users customize your plugin? Use settings!
|
||||
|
||||
```typescript
|
||||
import { BasePlugin } from "@/plugins/core/settings";
|
||||
import {
|
||||
booleanSetting,
|
||||
defineSettings,
|
||||
Setting,
|
||||
} from "@/plugins/core/settingsHelpers";
|
||||
import { BasePlugin } from '@/plugins/core/settings';
|
||||
import { booleanSetting, defineSettings, Setting } from '@/plugins/core/settingsHelpers';
|
||||
|
||||
// Define your settings
|
||||
const settings = defineSettings({
|
||||
@@ -115,7 +106,7 @@ const settings = defineSettings({
|
||||
default: true,
|
||||
title: "Show Welcome Message",
|
||||
description: "Show a friendly message on the homepage",
|
||||
}),
|
||||
})
|
||||
});
|
||||
|
||||
// Create a class for your plugin
|
||||
@@ -138,14 +129,14 @@ const myPlugin: Plugin<typeof settings> = {
|
||||
}
|
||||
|
||||
// Listen for setting changes
|
||||
api.settings.onChange("showMessage", (newValue) => {
|
||||
api.settings.onChange('showMessage', (newValue) => {
|
||||
if (newValue) {
|
||||
// Show the message
|
||||
} else {
|
||||
// Hide the message
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
@@ -155,14 +146,14 @@ Need to save some data? The storage API has got you covered:
|
||||
|
||||
```typescript
|
||||
// Save some data
|
||||
await api.storage.set("lastVisit", new Date().toISOString());
|
||||
await api.storage.set('lastVisit', new Date().toISOString());
|
||||
|
||||
// Get it back later
|
||||
const lastVisit = await api.storage.get("lastVisit");
|
||||
const lastVisit = await api.storage.get('lastVisit');
|
||||
|
||||
// Listen for changes
|
||||
api.storage.onChange("lastVisit", (newValue) => {
|
||||
console.log("Last visit updated:", newValue);
|
||||
api.storage.onChange('lastVisit', (newValue) => {
|
||||
console.log('Last visit updated:', newValue);
|
||||
});
|
||||
```
|
||||
|
||||
@@ -172,12 +163,12 @@ Want your plugin to be able to interface with other plugins? Then use events!
|
||||
|
||||
```typescript
|
||||
// Listen for an event
|
||||
api.events.on("myCustomEvent", (data) => {
|
||||
console.log("Got event:", data);
|
||||
api.events.on('myCustomEvent', (data) => {
|
||||
console.log('Got event:', data);
|
||||
});
|
||||
|
||||
// Send an event
|
||||
api.events.emit("myCustomEvent", { some: "data" });
|
||||
api.events.emit('myCustomEvent', { some: 'data' });
|
||||
```
|
||||
|
||||
## Adding Styles
|
||||
@@ -208,7 +199,7 @@ const myPlugin: Plugin = {
|
||||
|
||||
run: async (api) => {
|
||||
// Your plugin code here
|
||||
},
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
@@ -217,31 +208,28 @@ const myPlugin: Plugin = {
|
||||
Here are some tips to make your plugin awesome:
|
||||
|
||||
1. **Always Clean Up**: When your plugin is disabled, clean up any changes you made:
|
||||
|
||||
```typescript
|
||||
run: async (api) => {
|
||||
// Add stuff to the page
|
||||
const element = document.createElement("div");
|
||||
const element = document.createElement('div');
|
||||
document.body.appendChild(element);
|
||||
|
||||
// Return a cleanup function
|
||||
return () => {
|
||||
element.remove();
|
||||
};
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
2. **Use TypeScript**: It helps catch errors before they happen and makes your code easier to understand.
|
||||
|
||||
3. **Test Your Plugin**: Make sure it works in different situations:
|
||||
|
||||
- When SEQTA is loading
|
||||
- When the user switches pages
|
||||
- When the plugin is enabled/disabled
|
||||
- When settings are changed
|
||||
|
||||
4. **Keep It Fast**: Don't slow down SEQTA:
|
||||
|
||||
- Use `onMount` instead of intervals or timeouts
|
||||
- Clean up event listeners when they're not needed
|
||||
- Don't do heavy calculations on the main thread
|
||||
@@ -250,37 +238,10 @@ Here are some tips to make your plugin awesome:
|
||||
- Add clear settings with good descriptions
|
||||
- Use `disableToggle: true` so users can turn it off if needed
|
||||
- Add helpful error messages if something goes wrong
|
||||
- Use `beta: true` for experimental features to let users know they're trying something new
|
||||
|
||||
## Plugin Metadata Options
|
||||
|
||||
Your plugin object supports several optional flags to customize how it appears and behaves:
|
||||
|
||||
```typescript
|
||||
const myPlugin: Plugin = {
|
||||
id: "my-plugin",
|
||||
name: "My Plugin",
|
||||
description: "What my plugin does",
|
||||
version: "1.0.0",
|
||||
|
||||
// Optional flags:
|
||||
disableToggle: true, // Show enable/disable toggle in settings
|
||||
defaultEnabled: false, // Start disabled by default (requires disableToggle: true)
|
||||
beta: true, // Show "Beta" tag in settings UI
|
||||
|
||||
// Your plugin code...
|
||||
run: async (api) => { /* ... */ },
|
||||
};
|
||||
```
|
||||
|
||||
- **`disableToggle`**: When `true`, users can enable/disable your plugin in settings
|
||||
- **`defaultEnabled`**: When `false`, your plugin starts disabled (only works with `disableToggle: true`)
|
||||
- **`beta`**: When `true`, shows an orange "Beta" tag next to your plugin name in settings
|
||||
|
||||
## Examples
|
||||
|
||||
Want to see more examples? Check out our built-in plugins:
|
||||
|
||||
- [themes](../../src/plugins/built-in/themes/index.ts): Shows how to change SEQTA's appearance
|
||||
- [notificationCollector](../../src/plugins/built-in/notificationCollector/index.ts): Shows how to work with SEQTA's notifications
|
||||
- [timetable](../../src/plugins/built-in/timetable/index.ts): Shows how to modify SEQTA's timetable view
|
||||
@@ -289,7 +250,6 @@ Want to see more examples? Check out our built-in plugins:
|
||||
## Need Help?
|
||||
|
||||
Got stuck? No worries! Here's where you can get help:
|
||||
|
||||
- Join our [Discord server](https://discord.gg/YzmbnCDkat)
|
||||
- Check out the built-in plugins in the `src/plugins/built-in` folder
|
||||
- Open an issue on our [GitHub page](https://github.com/betterseqta/betterseqta-plus/issues)
|
||||
|
||||
+74
-126
@@ -7,13 +7,9 @@ This document provides detailed technical information about BetterSEQTA+'s plugi
|
||||
Here's how a plugin is structured:
|
||||
|
||||
```typescript
|
||||
import type { Plugin } from "@/plugins/core/types";
|
||||
import { BasePlugin } from "@/plugins/core/settings";
|
||||
import {
|
||||
booleanSetting,
|
||||
defineSettings,
|
||||
Setting,
|
||||
} from "@/plugins/core/settingsHelpers";
|
||||
import type { Plugin } from '@/plugins/core/types';
|
||||
import { BasePlugin } from '@/plugins/core/settings';
|
||||
import { booleanSetting, defineSettings, Setting } from '@/plugins/core/settingsHelpers';
|
||||
|
||||
// First, define your settings
|
||||
const settings = defineSettings({
|
||||
@@ -21,7 +17,7 @@ const settings = defineSettings({
|
||||
default: true,
|
||||
title: "Enable Feature",
|
||||
description: "Turn this feature on or off",
|
||||
}),
|
||||
})
|
||||
});
|
||||
|
||||
// Create a class to handle your settings
|
||||
@@ -35,92 +31,59 @@ const settingsInstance = new MyPluginClass();
|
||||
|
||||
// Create your plugin
|
||||
const myPlugin: Plugin<typeof settings> = {
|
||||
id: "my-plugin",
|
||||
name: "My Plugin",
|
||||
description: "A cool plugin that does things",
|
||||
version: "1.0.0",
|
||||
id: 'my-plugin',
|
||||
name: 'My Plugin',
|
||||
description: 'A cool plugin that does things',
|
||||
version: '1.0.0',
|
||||
settings: settingsInstance.settings,
|
||||
disableToggle: true,
|
||||
beta: true,
|
||||
|
||||
run: async (api) => {
|
||||
console.log("Plugin is running!");
|
||||
console.log('Plugin is running!');
|
||||
|
||||
// Do stuff when settings change
|
||||
api.settings.onChange("enabled", (enabled) => {
|
||||
api.settings.onChange('enabled', (enabled) => {
|
||||
if (enabled) {
|
||||
console.log("Feature enabled!");
|
||||
console.log('Feature enabled!');
|
||||
}
|
||||
});
|
||||
|
||||
// Return a cleanup function
|
||||
return () => {
|
||||
console.log("Plugin cleanup");
|
||||
console.log('Plugin cleanup');
|
||||
};
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
export default myPlugin;
|
||||
```
|
||||
|
||||
## Plugin Metadata
|
||||
|
||||
The plugin object supports several metadata fields and options:
|
||||
|
||||
```typescript
|
||||
interface Plugin {
|
||||
// Required fields
|
||||
id: string; // Unique identifier (lowercase, dashes)
|
||||
name: string; // Display name shown to users
|
||||
description: string; // Brief description of what the plugin does
|
||||
version: string; // Semantic version (e.g., "1.0.0")
|
||||
settings: PluginSettings; // Plugin settings object
|
||||
run: (api: PluginAPI) => void; // Main plugin function
|
||||
|
||||
// Optional fields
|
||||
styles?: string; // CSS styles to inject
|
||||
disableToggle?: boolean; // Show enable/disable toggle in settings
|
||||
defaultEnabled?: boolean; // Start enabled/disabled (requires disableToggle)
|
||||
beta?: boolean; // Show "Beta" tag in settings UI
|
||||
}
|
||||
```
|
||||
|
||||
### Metadata Options
|
||||
|
||||
- **`disableToggle`**: When `true`, users can enable/disable your plugin in the settings page
|
||||
- **`defaultEnabled`**: When `false`, your plugin starts disabled by default (only works with `disableToggle: true`)
|
||||
- **`beta`**: When `true`, displays an orange "Beta" tag next to your plugin name in the settings UI
|
||||
- **`styles`**: CSS string that gets injected into the page when your plugin runs
|
||||
|
||||
## SEQTA API
|
||||
|
||||
The SEQTA API helps you interact with SEQTA's pages:
|
||||
|
||||
```typescript
|
||||
import type { Plugin } from "@/plugins/core/types";
|
||||
import type { Plugin } from '@/plugins/core/types';
|
||||
|
||||
const seqtaPlugin: Plugin<typeof settings> = {
|
||||
id: "seqta-example",
|
||||
name: "SEQTA Example",
|
||||
description: "Shows how to use the SEQTA API",
|
||||
version: "1.0.0",
|
||||
id: 'seqta-example',
|
||||
name: 'SEQTA Example',
|
||||
description: 'Shows how to use the SEQTA API',
|
||||
version: '1.0.0',
|
||||
settings: {},
|
||||
disableToggle: true,
|
||||
|
||||
run: async (api) => {
|
||||
// Wait for elements to appear
|
||||
const { unregister: timetableUnregister } = api.seqta.onMount(
|
||||
".timetable",
|
||||
(timetable) => {
|
||||
const button = document.createElement("button");
|
||||
button.textContent = "Export";
|
||||
const { unregister: timetableUnregister } = api.seqta.onMount('.timetable', (timetable) => {
|
||||
const button = document.createElement('button');
|
||||
button.textContent = 'Export';
|
||||
timetable.appendChild(button);
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
// Track page changes
|
||||
const { unregister: pageUnregister } = api.seqta.onPageChange((page) => {
|
||||
console.log("User went to:", page);
|
||||
console.log('User went to:', page);
|
||||
});
|
||||
|
||||
// Clean up when disabled
|
||||
@@ -128,7 +91,7 @@ const seqtaPlugin: Plugin<typeof settings> = {
|
||||
timetableUnregister();
|
||||
pageUnregister();
|
||||
};
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
export default seqtaPlugin;
|
||||
@@ -139,29 +102,22 @@ export default seqtaPlugin;
|
||||
Here's how to add settings to your plugin:
|
||||
|
||||
```typescript
|
||||
import type { Plugin } from "@/plugins/core/types";
|
||||
import { BasePlugin } from "@/plugins/core/settings";
|
||||
import {
|
||||
booleanSetting,
|
||||
stringSetting,
|
||||
numberSetting,
|
||||
selectSetting,
|
||||
defineSettings,
|
||||
Setting,
|
||||
} from "@/plugins/core/settingsHelpers";
|
||||
import type { Plugin } from '@/plugins/core/types';
|
||||
import { BasePlugin } from '@/plugins/core/settings';
|
||||
import { booleanSetting, stringSetting, numberSetting, selectSetting, defineSettings, Setting } from '@/plugins/core/settingsHelpers';
|
||||
|
||||
// Define your settings
|
||||
const settings = defineSettings({
|
||||
darkMode: booleanSetting({
|
||||
default: false,
|
||||
title: "Dark Mode",
|
||||
description: "Enable dark mode",
|
||||
description: "Enable dark mode"
|
||||
}),
|
||||
userName: stringSetting({
|
||||
default: "",
|
||||
title: "User Name",
|
||||
description: "Your display name",
|
||||
placeholder: "Enter your name...",
|
||||
placeholder: "Enter your name..."
|
||||
}),
|
||||
theme: selectSetting({
|
||||
default: "light",
|
||||
@@ -169,9 +125,9 @@ const settings = defineSettings({
|
||||
description: "Choose your theme",
|
||||
options: [
|
||||
{ value: "light", label: "Light" },
|
||||
{ value: "dark", label: "Dark" },
|
||||
],
|
||||
}),
|
||||
{ value: "dark", label: "Dark" }
|
||||
]
|
||||
})
|
||||
});
|
||||
|
||||
// Create your settings class
|
||||
@@ -188,29 +144,29 @@ class ThemePluginClass extends BasePlugin<typeof settings> {
|
||||
|
||||
// Create the plugin
|
||||
const themePlugin: Plugin<typeof settings> = {
|
||||
id: "theme-example",
|
||||
name: "Theme Example",
|
||||
description: "Shows how to use settings",
|
||||
version: "1.0.0",
|
||||
id: 'theme-example',
|
||||
name: 'Theme Example',
|
||||
description: 'Shows how to use settings',
|
||||
version: '1.0.0',
|
||||
settings: new ThemePluginClass().settings,
|
||||
disableToggle: true,
|
||||
|
||||
run: async (api) => {
|
||||
// Apply initial settings
|
||||
if (api.settings.darkMode) {
|
||||
document.body.classList.add("dark");
|
||||
document.body.classList.add('dark');
|
||||
}
|
||||
|
||||
// Listen for changes
|
||||
const { unregister } = api.settings.onChange("darkMode", (enabled) => {
|
||||
document.body.classList.toggle("dark", enabled);
|
||||
const { unregister } = api.settings.onChange('darkMode', (enabled) => {
|
||||
document.body.classList.toggle('dark', enabled);
|
||||
});
|
||||
|
||||
return () => {
|
||||
unregister();
|
||||
document.body.classList.remove("dark");
|
||||
document.body.classList.remove('dark');
|
||||
};
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
export default themePlugin;
|
||||
@@ -221,13 +177,13 @@ export default themePlugin;
|
||||
Here's how to use storage in your plugin:
|
||||
|
||||
```typescript
|
||||
import type { Plugin } from "@/plugins/core/types";
|
||||
import type { Plugin } from '@/plugins/core/types';
|
||||
|
||||
const storagePlugin: Plugin<typeof settings> = {
|
||||
id: "storage-example",
|
||||
name: "Storage Example",
|
||||
description: "Shows how to use storage",
|
||||
version: "1.0.0",
|
||||
id: 'storage-example',
|
||||
name: 'Storage Example',
|
||||
description: 'Shows how to use storage',
|
||||
version: '1.0.0',
|
||||
settings: {},
|
||||
disableToggle: true,
|
||||
|
||||
@@ -236,21 +192,21 @@ const storagePlugin: Plugin<typeof settings> = {
|
||||
await api.storage.loaded;
|
||||
|
||||
// Save some data
|
||||
await api.storage.set("lastVisit", new Date().toISOString());
|
||||
await api.storage.set('lastVisit', new Date().toISOString());
|
||||
|
||||
// Get saved data
|
||||
const lastVisit = await api.storage.get("lastVisit");
|
||||
console.log("Last visit:", lastVisit);
|
||||
const lastVisit = await api.storage.get('lastVisit');
|
||||
console.log('Last visit:', lastVisit);
|
||||
|
||||
// Listen for changes
|
||||
const { unregister } = api.storage.onChange("lastVisit", (newValue) => {
|
||||
console.log("Last visit updated:", newValue);
|
||||
const { unregister } = api.storage.onChange('lastVisit', (newValue) => {
|
||||
console.log('Last visit updated:', newValue);
|
||||
});
|
||||
|
||||
return () => {
|
||||
unregister();
|
||||
};
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
export default storagePlugin;
|
||||
@@ -261,39 +217,33 @@ export default storagePlugin;
|
||||
Here's how to use events in your plugin:
|
||||
|
||||
```typescript
|
||||
import type { Plugin } from "@/plugins/core/types";
|
||||
import type { Plugin } from '@/plugins/core/types';
|
||||
|
||||
const eventsPlugin: Plugin<typeof settings> = {
|
||||
id: "events-example",
|
||||
name: "Events Example",
|
||||
description: "Shows how to use events",
|
||||
version: "1.0.0",
|
||||
id: 'events-example',
|
||||
name: 'Events Example',
|
||||
description: 'Shows how to use events',
|
||||
version: '1.0.0',
|
||||
settings: {},
|
||||
disableToggle: true,
|
||||
|
||||
run: async (api) => {
|
||||
// Listen for theme changes
|
||||
const { unregister: themeListener } = api.events.on(
|
||||
"theme.changed",
|
||||
(theme) => {
|
||||
console.log("Theme changed to:", theme);
|
||||
},
|
||||
);
|
||||
const { unregister: themeListener } = api.events.on('theme.changed', (theme) => {
|
||||
console.log('Theme changed to:', theme);
|
||||
});
|
||||
|
||||
// Listen for notifications
|
||||
const { unregister: notifyListener } = api.events.on(
|
||||
"notification.new",
|
||||
(notification) => {
|
||||
console.log("New notification:", notification);
|
||||
},
|
||||
);
|
||||
const { unregister: notifyListener } = api.events.on('notification.new', (notification) => {
|
||||
console.log('New notification:', notification);
|
||||
});
|
||||
|
||||
// Clean up listeners
|
||||
return () => {
|
||||
themeListener();
|
||||
notifyListener();
|
||||
};
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
export default eventsPlugin;
|
||||
@@ -304,20 +254,20 @@ export default eventsPlugin;
|
||||
Here's how to write efficient plugins:
|
||||
|
||||
```typescript
|
||||
import type { Plugin } from "@/plugins/core/types";
|
||||
import type { Plugin } from '@/plugins/core/types';
|
||||
|
||||
const efficientPlugin: Plugin<typeof settings> = {
|
||||
id: "efficient-example",
|
||||
name: "Efficient Example",
|
||||
description: "Shows performance best practices",
|
||||
version: "1.0.0",
|
||||
id: 'efficient-example',
|
||||
name: 'Efficient Example',
|
||||
description: 'Shows performance best practices',
|
||||
version: '1.0.0',
|
||||
settings: {},
|
||||
disableToggle: true,
|
||||
|
||||
run: async (api) => {
|
||||
// ✅ Good: Use onMount
|
||||
const { unregister } = api.seqta.onMount(".timetable", (el) => {
|
||||
el.classList.add("enhanced");
|
||||
const { unregister } = api.seqta.onMount('.timetable', (el) => {
|
||||
el.classList.add('enhanced');
|
||||
});
|
||||
|
||||
// ❌ Bad: Don't use intervals
|
||||
@@ -327,7 +277,7 @@ const efficientPlugin: Plugin<typeof settings> = {
|
||||
// }, 100);
|
||||
|
||||
// ✅ Good: Cache DOM elements
|
||||
const header = document.querySelector(".header");
|
||||
const header = document.querySelector('.header');
|
||||
if (header) {
|
||||
// Reuse header instead of querying again
|
||||
}
|
||||
@@ -335,7 +285,7 @@ const efficientPlugin: Plugin<typeof settings> = {
|
||||
// ✅ Good: Batch DOM updates
|
||||
const fragment = document.createDocumentFragment();
|
||||
for (let i = 0; i < 10; i++) {
|
||||
const div = document.createElement("div");
|
||||
const div = document.createElement('div');
|
||||
fragment.appendChild(div);
|
||||
}
|
||||
document.body.appendChild(fragment);
|
||||
@@ -344,14 +294,13 @@ const efficientPlugin: Plugin<typeof settings> = {
|
||||
unregister();
|
||||
// clearInterval(interval); // If you used the bad approach
|
||||
};
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
export default efficientPlugin;
|
||||
```
|
||||
|
||||
Each plugin should be in its own file and exported as the default export. The plugin should:
|
||||
|
||||
1. Import necessary types and helpers
|
||||
2. Define settings if needed
|
||||
3. Create a settings class if using settings
|
||||
@@ -359,7 +308,6 @@ Each plugin should be in its own file and exported as the default export. The pl
|
||||
5. Export the plugin as default
|
||||
|
||||
Remember to always:
|
||||
|
||||
- Use proper TypeScript types
|
||||
- Clean up when your plugin is disabled
|
||||
- Handle errors gracefully
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
export default {
|
||||
preset: 'ts-jest',
|
||||
testEnvironment: 'node',
|
||||
roots: ['<rootDir>/src'],
|
||||
testMatch: [
|
||||
'**/__tests__/**/*.ts',
|
||||
'**/?(*.)+(spec|test).ts'
|
||||
],
|
||||
transform: {
|
||||
'^.+\\.ts$': 'ts-jest',
|
||||
},
|
||||
moduleFileExtensions: ['ts', 'js', 'json'],
|
||||
collectCoverageFrom: [
|
||||
'src/**/*.ts',
|
||||
'!src/**/*.d.ts',
|
||||
],
|
||||
};
|
||||
+1
-34
@@ -1,46 +1,13 @@
|
||||
import fs from "fs";
|
||||
import mime from "mime-types";
|
||||
|
||||
/**
|
||||
* A Vite plugin designed to load files as base64 encoded data URLs.
|
||||
* This plugin intercepts module imports that have a `?base64` query parameter
|
||||
* appended to the file path. It then reads the targeted file, converts its content
|
||||
* to a base64 string, and constructs a data URL which is then exported as the
|
||||
* default export of a new JavaScript module.
|
||||
*
|
||||
* @example
|
||||
* // To use this loader, import a file with ?base64 query:
|
||||
* // import myImageBase64 from './path/to/myimage.png?base64';
|
||||
* // myImageBase64 will then be a string like "data:image/png;base64,..."
|
||||
*/
|
||||
export const base64Loader = {
|
||||
/**
|
||||
* The name of the Vite plugin.
|
||||
* @type {string}
|
||||
*/
|
||||
name: "base64-loader",
|
||||
/**
|
||||
* The core transformation function of the Vite plugin.
|
||||
* It is called by Vite for modules that might need transformation. This function
|
||||
* checks if the module ID includes the `?base64` query. If so, it reads the
|
||||
* specified file, converts it to a base64 data URL, and returns a new
|
||||
* JavaScript module that default exports this data URL.
|
||||
*
|
||||
* @param {any} _ The original code of the file. This parameter is unused by this loader.
|
||||
* @param {string} id The ID of the module being transformed. This string typically
|
||||
* contains the absolute file path and any query parameters
|
||||
* (e.g., "/path/to/file.png?base64").
|
||||
* @returns {string | null} If the module ID does not contain `?base64` query,
|
||||
* it returns `null` to indicate no transformation.
|
||||
* Otherwise, it returns a string of JavaScript code
|
||||
* that default exports the base64 data URL of the file.
|
||||
* For example: `export default 'data:image/png;base64,xxxx';`
|
||||
*/
|
||||
transform(_: any, id: string) {
|
||||
const [filePath, query] = id.split("?");
|
||||
if (query !== "base64") return null;
|
||||
|
||||
const data = fs.readFileSync(filePath, { encoding: "base64" });
|
||||
const data = fs.readFileSync(filePath, { encoding: 'base64' });
|
||||
const mimeType = mime.lookup(filePath);
|
||||
const dataURL = `data:${mimeType};base64,${data}`;
|
||||
|
||||
|
||||
+12
-45
@@ -1,58 +1,25 @@
|
||||
// ref: https://stackoverflow.com/a/76920975
|
||||
import type { Plugin } from "vite";
|
||||
import type { Plugin } from 'vite';
|
||||
|
||||
/**
|
||||
* Creates a Vite plugin designed to gracefully handle the conclusion of the build process.
|
||||
* This plugin utilizes the `buildEnd` and `closeBundle` hooks provided by Vite.
|
||||
* It checks for errors at the end of the build:
|
||||
* - If an error occurred during the build (`buildEnd` hook receives an error), it logs the error
|
||||
* and explicitly exits the Node.js process with a status code of 1 (indicating failure).
|
||||
* - If the build completes without errors and the bundle is successfully generated
|
||||
* (`closeBundle` hook is called), it logs a success message and exits the process
|
||||
* with a status code of 0 (indicating success).
|
||||
* This explicit process exiting can be useful in CI/CD environments or scripts that
|
||||
* rely on the process status code to determine the build outcome.
|
||||
* The core logic for using these hooks to exit the process is inspired by
|
||||
* a solution found on StackOverflow (https://stackoverflow.com/a/76920975).
|
||||
*
|
||||
* @returns {Plugin} A Vite plugin object configured with `name`, `buildEnd`, and `closeBundle` hooks.
|
||||
*/
|
||||
export default function ClosePlugin(): Plugin {
|
||||
return {
|
||||
/**
|
||||
* The unique name of this Vite plugin. This name is used by Vite for identification
|
||||
* purposes and will appear in warnings, errors, and logs related to this plugin.
|
||||
* @type {string}
|
||||
*/
|
||||
name: "ClosePlugin", // required, will show up in warnings and errors
|
||||
name: 'ClosePlugin', // required, will show up in warnings and errors
|
||||
|
||||
/**
|
||||
* A Vite hook that is called when the build process has finished, regardless of
|
||||
* whether it was successful or encountered an error.
|
||||
*
|
||||
* @param {Error} [error] An optional error object. If the build failed, this parameter
|
||||
* will contain the error that occurred. If the build was successful,
|
||||
* this parameter will be undefined or null.
|
||||
*/
|
||||
// use this to catch errors when building
|
||||
buildEnd(error) {
|
||||
if (error) {
|
||||
console.error("Error bundling");
|
||||
console.error(error);
|
||||
process.exit(1); // Exit with status 1 indicating an error
|
||||
if(error) {
|
||||
console.error('Error bundling')
|
||||
console.error(error)
|
||||
process.exit(1)
|
||||
} else {
|
||||
console.log("Build ended"); // Log successful completion of the build phase
|
||||
console.log('Build ended')
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* A Vite hook that is called after the `buildEnd` hook, but only if the build
|
||||
* was successful (i.e., no errors were passed to `buildEnd`) and all output
|
||||
* files have been generated and written to disk. This signifies the successful
|
||||
* completion of the entire bundling process.
|
||||
*/
|
||||
// use this to catch the end of a build without errors
|
||||
closeBundle() {
|
||||
console.log("Bundle closed"); // Log successful closure of the bundle
|
||||
process.exit(0); // Exit with status 0 indicating a successful build
|
||||
console.log('Bundle closed')
|
||||
process.exit(0)
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
+14
-27
@@ -1,22 +1,12 @@
|
||||
import type { Browser, BuildTarget, Manifest } from "./types";
|
||||
import type { AnyCase } from "./utils";
|
||||
|
||||
import type { Browser, BuildTarget, Manifest } from './types'
|
||||
import type { AnyCase } from './utils'
|
||||
/**
|
||||
* Packages a given manifest object with a specific target browser identifier.
|
||||
* This function is typically used in multi-browser extension build processes
|
||||
* to create a configuration object that pairs the manifest data with the browser
|
||||
* it's intended for. The `AnyCase<Browser>` type for the browser parameter
|
||||
* implies that browser names like 'chrome', 'firefox', etc., can be provided
|
||||
* in various casings.
|
||||
*
|
||||
*
|
||||
* @export
|
||||
* @param {Manifest} manifest The core manifest data for the extension,
|
||||
* compatible with `chrome.runtime.ManifestV3` as defined by the {@link Manifest} type.
|
||||
* @param {AnyCase<Browser>} browser The target browser identifier (e.g., 'chrome', 'firefox', 'CHROME').
|
||||
* Refers to the {@link Browser} type, allowing for flexible casing.
|
||||
* @returns {BuildTarget} An object that pairs the `manifest` with its target `browser`.
|
||||
* The structure is `{ manifest: Manifest; browser: AnyCase<Browser>; }`
|
||||
* as defined by the {@link BuildTarget} type.
|
||||
* @param {Manifest} manifest
|
||||
* @param {AnyCase<Browser>} browser
|
||||
* @return {*} {@link BuildTarget}
|
||||
*/
|
||||
export function createManifest(
|
||||
manifest: Manifest,
|
||||
@@ -25,22 +15,19 @@ export function createManifest(
|
||||
return {
|
||||
manifest,
|
||||
browser,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines a base manifest object.
|
||||
* This function is typically used to establish a common, shared foundation for an extension's manifest
|
||||
* (compatible with `chrome.runtime.ManifestV3` as per the {@link Manifest} type).
|
||||
* This base can then be extended or modified for different browsers or specific build configurations.
|
||||
* For example, you might define core permissions and properties here, and then add
|
||||
* browser-specific keys in subsequent steps.
|
||||
* create a base Manifest to inherit from
|
||||
* type Manifest = chrome.runtime.ManifestV3
|
||||
*
|
||||
* use as shared base to extend inBrowser manifests
|
||||
*
|
||||
* @export
|
||||
* @param {Manifest} manifest The core manifest data to be used as a base.
|
||||
* This should conform to the {@link Manifest} type structure.
|
||||
* @returns {Manifest} The provided manifest object, intended to serve as a reusable base.
|
||||
* @param {Manifest} manifest
|
||||
* @return {*} {@link Manifest}
|
||||
*/
|
||||
export function createManifestBase(manifest: Manifest): Manifest {
|
||||
return manifest;
|
||||
return manifest
|
||||
}
|
||||
+20
-53
@@ -1,70 +1,37 @@
|
||||
// vite-plugin-inline-worker-dev.ts
|
||||
// vite-plugin-inline-worker-dev.ts
|
||||
import { Plugin } from "vite";
|
||||
import fs from "fs/promises";
|
||||
import { build } from "esbuild";
|
||||
import { Plugin } from 'vite'
|
||||
import fs from 'fs/promises'
|
||||
import { build, transform } from 'esbuild'
|
||||
|
||||
/**
|
||||
* Creates a Vite plugin designed for bundling and inlining web worker scripts during development.
|
||||
* This plugin specifically targets module imports that include a `?inlineWorker` query parameter.
|
||||
* When such an import is encountered, the plugin bundles the worker script using `esbuild`
|
||||
* and then generates JavaScript code that inlines this bundled worker as a Blob,
|
||||
* creating the worker instance via `URL.createObjectURL()`.
|
||||
* The name "vite:inline-worker-dev" suggests it's primarily intended for development builds.
|
||||
*
|
||||
* @returns {Plugin} A Vite plugin object with `name` and `load` properties.
|
||||
*/
|
||||
export default function InlineWorkerDevPlugin(): Plugin {
|
||||
return {
|
||||
/**
|
||||
* The unique name of this Vite plugin.
|
||||
* @type {string}
|
||||
*/
|
||||
name: "vite:inline-worker-dev",
|
||||
/**
|
||||
* The Vite hook responsible for loading and transforming modules.
|
||||
* This function intercepts modules imported with `?inlineWorker`.
|
||||
* For such modules, it bundles the worker script and returns JavaScript code
|
||||
* that, when executed, will create an instance of this worker from an inlined Blob.
|
||||
*
|
||||
* @async
|
||||
* @param {string} id The path or ID of the module Vite is attempting to load,
|
||||
* potentially including query parameters (e.g., "/path/to/worker.ts?inlineWorker").
|
||||
* @returns {Promise<string | null>} A promise that resolves to:
|
||||
* - `null` if the module ID does not include `?inlineWorker`.
|
||||
* - A string of JavaScript code if the module is an inline worker.
|
||||
* This code will define a default export function (e.g., `InlineWorker`)
|
||||
* that, when called, creates and returns a new `Worker` instance
|
||||
* from the bundled and inlined worker script.
|
||||
*/
|
||||
name: 'vite:inline-worker-dev',
|
||||
async load(id) {
|
||||
if (id.includes("?inlineWorker")) {
|
||||
const [cleanPath] = id.split("?");
|
||||
// Note: Original code had `await fs.readFile(cleanPath, "utf-8");` but `code` wasn't used.
|
||||
// `esbuild` directly takes `cleanPath` as an entry point.
|
||||
if (id.includes('?inlineWorker')) {
|
||||
const [cleanPath] = id.split('?')
|
||||
console.log('cleanPath', cleanPath)
|
||||
const code = await fs.readFile(cleanPath, 'utf-8')
|
||||
const result = await build({
|
||||
entryPoints: [cleanPath], // esbuild uses the file path directly
|
||||
entryPoints: [cleanPath],
|
||||
bundle: true,
|
||||
write: false, // We want the output in memory, not written to disk
|
||||
platform: "browser", // Target environment for the worker code
|
||||
format: "iife", // Immediately Invoked Function Expression, suitable for workers
|
||||
target: "esnext", // Transpile to modern JavaScript
|
||||
});
|
||||
write: false,
|
||||
platform: 'browser',
|
||||
format: 'iife',
|
||||
target: 'esnext',
|
||||
})
|
||||
|
||||
const workerCode = result.outputFiles[0].text;
|
||||
const workerCode = result.outputFiles[0].text
|
||||
|
||||
// Construct JavaScript code that will create the worker from a Blob.
|
||||
// This code is what gets returned to Vite and replaces the original import.
|
||||
const workerBlobCode = `
|
||||
const code = ${JSON.stringify(workerCode)};
|
||||
export default function InlineWorker() {
|
||||
const blob = new Blob([code], { type: 'application/javascript' });
|
||||
return new Worker(URL.createObjectURL(blob), { type: 'module' });
|
||||
}
|
||||
`;
|
||||
return workerBlobCode;
|
||||
`
|
||||
return workerBlobCode
|
||||
}
|
||||
return null
|
||||
}
|
||||
}
|
||||
return null; // Let Vite handle other modules normally
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
/*
|
||||
TEMPORARY FIX FOR CHROME 130+ builds
|
||||
*/
|
||||
|
||||
import path from 'node:path';
|
||||
import fs from 'fs';
|
||||
import { PluginOption } from 'vite';
|
||||
import { ManifestV3Export } from '@crxjs/vite-plugin';
|
||||
|
||||
const manifestPath = path.resolve('dist/chrome/manifest.json');
|
||||
|
||||
export function updateManifestPlugin(): PluginOption {
|
||||
return {
|
||||
name: 'update-manifest-plugin',
|
||||
enforce: 'post',
|
||||
closeBundle() {
|
||||
forceDisableUseDynamicUrl();
|
||||
},
|
||||
|
||||
configureServer(server) {
|
||||
server.httpServer?.once('listening', () => {
|
||||
const updated = forceDisableUseDynamicUrl();
|
||||
if (updated) {
|
||||
server.ws.send({ type: 'full-reload' });
|
||||
console.log('** updated **');
|
||||
}
|
||||
|
||||
// Implement retry mechanism for file watching
|
||||
const watchWithRetry = () => {
|
||||
if (!fs.existsSync(manifestPath)) {
|
||||
console.log('Manifest not found, retrying in 1 second...');
|
||||
setTimeout(watchWithRetry, 1000);
|
||||
return;
|
||||
}
|
||||
|
||||
fs.watchFile(manifestPath, () => {
|
||||
try {
|
||||
const manifestContents = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
|
||||
if (manifestContents.web_accessible_resources?.some((resource: any) => resource.use_dynamic_url)) {
|
||||
const updated = forceDisableUseDynamicUrl();
|
||||
if (updated) {
|
||||
server.ws.send({ type: 'full-reload' });
|
||||
console.log('** updated **');
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('Error reading manifest, will retry on next change:', error.message);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
watchWithRetry();
|
||||
});
|
||||
},
|
||||
|
||||
writeBundle() {
|
||||
console.log('### writeBundle ##');
|
||||
forceDisableUseDynamicUrl();
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function forceDisableUseDynamicUrl() {
|
||||
if (!fs.existsSync(manifestPath)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const manifestContents = JSON.parse(fs.readFileSync(manifestPath, 'utf8')) as Awaited<ManifestV3Export>;
|
||||
|
||||
if (typeof manifestContents === 'function' || !manifestContents.web_accessible_resources) return false;
|
||||
if (manifestContents.web_accessible_resources.every((resource) => !resource.use_dynamic_url)) return false;
|
||||
|
||||
manifestContents.web_accessible_resources.forEach((resource) => {
|
||||
if (resource.use_dynamic_url) resource.use_dynamic_url = false;
|
||||
});
|
||||
|
||||
fs.writeFileSync(manifestPath, JSON.stringify(manifestContents, null, 2));
|
||||
return true;
|
||||
}
|
||||
+48
-154
@@ -1,199 +1,94 @@
|
||||
/**
|
||||
* @fileoverview
|
||||
* This script is a command-line utility for publishing the BetterSEQTA+ extension.
|
||||
* It automates the process of finding the latest built extension ZIP files for specified
|
||||
* browsers, zipping the project source code (for Firefox), and then invoking the
|
||||
* `publish-extension` tool with the appropriate arguments.
|
||||
*
|
||||
* To use this script, invoke it with Node.js followed by browser arguments:
|
||||
* e.g., `node lib/publish.js --b chrome firefox`
|
||||
* or `node lib/publish.js --b chrome`
|
||||
* or `node lib/publish.js --b firefox`
|
||||
*/
|
||||
const glob = require('glob');
|
||||
const semver = require('semver');
|
||||
const { execSync } = require('child_process');
|
||||
const path = require('path');
|
||||
|
||||
const glob = require("glob");
|
||||
const semver = require("semver");
|
||||
const { execSync } = require("child_process");
|
||||
const path = require("path");
|
||||
|
||||
/**
|
||||
* Determines the latest version string from a list of filenames that include version numbers.
|
||||
* Filenames are expected to follow a pattern like `betterseqtaplus@3.4.5.1-chrome.zip`.
|
||||
* This function handles potential 4-part versions (e.g., `3.4.5.1`) by trimming them
|
||||
* to 3 parts (e.g., `3.4.5`) for comparison using the `semver` library. After identifying
|
||||
* the latest semver-compatible version, it returns the original full version string
|
||||
* (e.g., "3.4.5.1") that corresponds to this latest version.
|
||||
*
|
||||
* @param {string[]} files An array of filenames.
|
||||
* @returns {string | null} The latest version string (e.g., "3.4.5.1") found among the files,
|
||||
* or `null` if no valid version numbers are found or no files are provided.
|
||||
*/
|
||||
function getLatestVersion(files) {
|
||||
console.log("Files passed to getLatestVersion:", files);
|
||||
console.log('Files passed to getLatestVersion:', files);
|
||||
|
||||
const versions = files
|
||||
.map((file) => {
|
||||
const versions = files.map(file => {
|
||||
const match = file.match(/@([\d\.]+)-/);
|
||||
console.log(
|
||||
"Matching file:",
|
||||
file,
|
||||
"Version found:",
|
||||
match ? match[1] : "None",
|
||||
);
|
||||
console.log('Matching file:', file, 'Version found:', match ? match[1] : 'None');
|
||||
|
||||
if (!match) return null;
|
||||
|
||||
const fullVersion = match[1]; // Original version (e.g., 3.4.5.1)
|
||||
// Trim to 3 parts for semver comparison, as semver typically handles X.Y.Z
|
||||
const semverVersion = fullVersion.split(".").slice(0, 3).join(".");
|
||||
const semverVersion = fullVersion.split('.').slice(0, 3).join('.'); // Trim to 3.4.5
|
||||
|
||||
return { fullVersion, semverVersion };
|
||||
})
|
||||
.filter(Boolean); // Remove null entries if any file didn't match
|
||||
}).filter(Boolean);
|
||||
|
||||
console.log(
|
||||
"Extracted versions:",
|
||||
versions.map((v) => v.semverVersion),
|
||||
);
|
||||
|
||||
if (versions.length === 0) {
|
||||
console.log("No versions extracted.");
|
||||
return null;
|
||||
}
|
||||
console.log('Extracted versions:', versions.map(v => v.semverVersion));
|
||||
|
||||
// Find latest version using the trimmed semver format
|
||||
const latestSemver = semver.maxSatisfying(
|
||||
versions.map((v) => v.semverVersion),
|
||||
"*", // Satisfy any version, effectively finding the max
|
||||
);
|
||||
console.log("Latest SemVer-compatible version:", latestSemver);
|
||||
const latestSemver = semver.maxSatisfying(versions.map(v => v.semverVersion), '*');
|
||||
console.log('Latest SemVer-compatible version:', latestSemver);
|
||||
|
||||
if (!latestSemver) {
|
||||
console.log("Could not determine latest semver version.");
|
||||
return null;
|
||||
}
|
||||
// Get the full version that matches the latest SemVer version
|
||||
const latestVersion = versions.find(v => v.semverVersion === latestSemver)?.fullVersion || null;
|
||||
|
||||
// Get the original full version string that matches the identified latest SemVer version
|
||||
const latestVersionData = versions.find(
|
||||
(v) => v.semverVersion === latestSemver,
|
||||
);
|
||||
const latestFullVersion = latestVersionData ? latestVersionData.fullVersion : null;
|
||||
|
||||
console.log("Final selected latest version:", latestFullVersion);
|
||||
return latestFullVersion;
|
||||
console.log('Final selected latest version:', latestVersion);
|
||||
return latestVersion;
|
||||
}
|
||||
|
||||
/**
|
||||
* Finds the path to the latest built ZIP file for a specific browser.
|
||||
* It constructs a glob pattern based on the browser name (e.g., `dist/betterseqtaplus@*-*chrome.zip`),
|
||||
* finds all matching files, and then uses `getLatestVersion` to identify the version string
|
||||
* of the most recent file. Finally, it returns the full path to that specific file.
|
||||
*
|
||||
* @param {string} browser A string indicating the target browser (e.g., "chrome", "firefox").
|
||||
* @returns {string | undefined} The filepath string to the latest ZIP file for the specified browser,
|
||||
* or `undefined` if no matching file is found or if the latest version
|
||||
* cannot be determined.
|
||||
*/
|
||||
function getLatestFiles(browser) {
|
||||
const pattern = `dist/betterseqtaplus@*-*${browser}.zip`;
|
||||
console.log("Glob pattern:", pattern);
|
||||
console.log('Glob pattern:', pattern);
|
||||
|
||||
const files = glob.sync(pattern);
|
||||
console.log("Files found for browser", browser, ":", files);
|
||||
|
||||
if (files.length === 0) {
|
||||
console.log("No files found for browser", browser);
|
||||
return undefined;
|
||||
}
|
||||
console.log('Files found for browser', browser, ':', files);
|
||||
|
||||
const latestVersion = getLatestVersion(files);
|
||||
if (!latestVersion) {
|
||||
console.log("Could not determine latest version for browser", browser);
|
||||
return undefined;
|
||||
}
|
||||
|
||||
// Find the exact file by matching the original full version string
|
||||
const latestFile = files.find((file) => file.includes(`@${latestVersion}-`));
|
||||
// Find the exact file by matching the original full version
|
||||
const latestFile = files.find(file => file.includes(`@${latestVersion}-`));
|
||||
|
||||
console.log("Latest file for browser", browser, ":", latestFile);
|
||||
console.log('Latest file for browser', browser, ':', latestFile);
|
||||
return latestFile;
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a ZIP file of the project's source code, excluding specified development-related
|
||||
* files and directories such as `node_modules`, `dist`, `.git`, etc.
|
||||
* It uses the `7z` command-line tool to perform the archiving.
|
||||
* The output filename is fixed as `dist/betterseqtaplus@latest-sources.zip`.
|
||||
*
|
||||
* @returns {string} The filename of the created ZIP file (e.g., `dist/betterseqtaplus@latest-sources.zip`).
|
||||
*/
|
||||
function zipSources() {
|
||||
const zipFileName = `dist/betterseqtaplus@latest-sources.zip`;
|
||||
|
||||
const excludePatterns = [
|
||||
"node_modules",
|
||||
"dist",
|
||||
".env*",
|
||||
".git",
|
||||
".github",
|
||||
".vscode",
|
||||
"LICENSE",
|
||||
"package.json",
|
||||
]
|
||||
.map((pattern) => `-x!${pattern}`) // Format for 7z exclude syntax
|
||||
.join(" ");
|
||||
'node_modules',
|
||||
'dist',
|
||||
'.env*',
|
||||
'.git',
|
||||
'.github',
|
||||
'.vscode',
|
||||
'LICENSE',
|
||||
'package.json'
|
||||
].map(pattern => `-x!${pattern}`).join(' ');
|
||||
|
||||
// Command to zip the current directory's contents into zipFileName, applying exclude patterns
|
||||
const zipCommand = `7z a ${zipFileName} . ${excludePatterns}`;
|
||||
|
||||
console.log("Zipping project sources with command:", zipCommand);
|
||||
execSync(zipCommand, { stdio: "inherit" }); // Execute synchronously and show output
|
||||
console.log('Zipping project sources with command:', zipCommand);
|
||||
execSync(zipCommand, { stdio: 'inherit' });
|
||||
|
||||
return zipFileName;
|
||||
}
|
||||
|
||||
/**
|
||||
* Orchestrates the extension publishing process for the specified browsers.
|
||||
* This function performs the following steps:
|
||||
* 1. Calls `getLatestFiles` to find the latest built ZIP for Chrome if "chrome" is in `browsers`.
|
||||
* 2. Calls `getLatestFiles` to find the latest built ZIP for Firefox if "firefox" is in `browsers`.
|
||||
* 3. Calls `zipSources` to create a source code ZIP if "firefox" is in `browsers` (required for Mozilla Add-ons).
|
||||
* 4. Validates that all required files were found and that at least one browser was specified. Exits if not.
|
||||
* 5. Constructs the `publish-extension` command-line string with the appropriate arguments
|
||||
* based on the found ZIP files for the specified browsers.
|
||||
* 6. Executes the constructed `publish-extension` command.
|
||||
*
|
||||
* @param {string[]} browsers An array of browser strings (e.g., ["chrome", "firefox"]) for which to publish the extension.
|
||||
*/
|
||||
function runPublishCommand(browsers) {
|
||||
const chromeZip = browsers.includes("chrome")
|
||||
? getLatestFiles("chrome")
|
||||
: null;
|
||||
const firefoxZip = browsers.includes("firefox")
|
||||
? getLatestFiles("firefox")
|
||||
: null;
|
||||
// Sources are typically only needed for Firefox submissions
|
||||
const firefoxSourcesZip = browsers.includes("firefox") ? zipSources() : null;
|
||||
const chromeZip = browsers.includes('chrome') ? getLatestFiles('chrome') : null;
|
||||
const firefoxZip = browsers.includes('firefox') ? getLatestFiles('firefox') : null;
|
||||
const firefoxSourcesZip = browsers.includes('firefox') ? zipSources() : null;
|
||||
|
||||
console.log("Chrome zip:", chromeZip);
|
||||
console.log("Firefox zip:", firefoxZip);
|
||||
console.log("Firefox sources zip:", firefoxSourcesZip);
|
||||
console.log('Chrome zip:', chromeZip);
|
||||
console.log('Firefox zip:', firefoxZip);
|
||||
console.log('Firefox sources zip:', firefoxSourcesZip);
|
||||
|
||||
if (browsers.length === 0) {
|
||||
console.log("No browsers specified. Exiting.");
|
||||
process.exit(0); // Exit gracefully if no action is needed
|
||||
console.log('No browsers specified. Exiting.');
|
||||
process.exit(0);
|
||||
}
|
||||
|
||||
// Check if required files are missing for the specified browsers
|
||||
if (
|
||||
(browsers.includes("chrome") && !chromeZip) ||
|
||||
(browsers.includes("firefox") && (!firefoxZip || !firefoxSourcesZip))
|
||||
) {
|
||||
console.error("Could not find required zip files for specified browsers.");
|
||||
process.exit(1); // Exit with error status
|
||||
if ((browsers.includes('chrome') && !chromeZip) || (browsers.includes('firefox') && (!firefoxZip || !firefoxSourcesZip))) {
|
||||
console.error('Could not find required zip files for specified browsers.');
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
let command = "publish-extension";
|
||||
let command = 'publish-extension';
|
||||
if (chromeZip) {
|
||||
command += ` --chrome-zip ${chromeZip}`;
|
||||
}
|
||||
@@ -201,14 +96,13 @@ function runPublishCommand(browsers) {
|
||||
command += ` --firefox-zip ${firefoxZip} --firefox-sources-zip ${firefoxSourcesZip}`;
|
||||
}
|
||||
|
||||
console.log("Running command:", command);
|
||||
execSync(command, { stdio: "inherit" }); // Execute and show output
|
||||
console.log('Running command:', command);
|
||||
execSync(command, { stdio: 'inherit' });
|
||||
}
|
||||
|
||||
// Parse command-line arguments to determine which browsers to publish for
|
||||
// Parse command-line arguments
|
||||
const args = process.argv.slice(2);
|
||||
const browserIndex = args.indexOf("--b"); // Find the --b flag
|
||||
// If --b is found, take all subsequent arguments as browser names
|
||||
const browserIndex = args.indexOf('--b');
|
||||
const browsers = browserIndex !== -1 ? args.slice(browserIndex + 1) : [];
|
||||
|
||||
runPublishCommand(browsers);
|
||||
+8
-46
@@ -1,55 +1,17 @@
|
||||
import fs from "fs";
|
||||
import fs from 'fs';
|
||||
|
||||
/**
|
||||
* Creates a Vite plugin designed to improve the reliability of Hot Module Replacement (HMR)
|
||||
* for global CSS files.
|
||||
*
|
||||
* When a JavaScript/TypeScript module that imports a CSS file is updated, Vite's HMR
|
||||
* might not always reliably update the styles injected by that global CSS. This plugin
|
||||
* attempts to mitigate this by listening for hot updates. If an updated module
|
||||
* has direct importers that are CSS files (e.g., a JS file imports a global CSS file),
|
||||
* this plugin will "touch" those CSS files by updating their access and modification
|
||||
* timestamps using `fs.utimesSync`. This action can help signal to Vite or the browser
|
||||
* that the CSS file has changed, potentially triggering a more reliable style reload.
|
||||
*
|
||||
* @returns {import('vite').Plugin} A Vite plugin object configured with `name` and `handleHotUpdate` hooks.
|
||||
*/
|
||||
export default function touchGlobalCSSPlugin() {
|
||||
return {
|
||||
/**
|
||||
* The unique name of this Vite plugin.
|
||||
* This name is used by Vite for identification purposes and will appear in logs.
|
||||
* @type {string}
|
||||
*/
|
||||
name: "touch-global-css",
|
||||
/**
|
||||
* A Vite hook that is called when a module is hot-updated.
|
||||
* This function inspects the importers of the updated module. If any of these
|
||||
* importers are CSS files, their filesystem timestamps are updated ("touched").
|
||||
*
|
||||
* @param {object} context The context object provided by Vite's `handleHotUpdate` hook.
|
||||
* @param {Array<import('vite').ModuleNode>} context.modules An array of `ModuleNode` instances that have been updated.
|
||||
* This plugin specifically accesses `modules[0]._clientModule.importers`
|
||||
* to find CSS files that import the updated module.
|
||||
*/
|
||||
name: 'touch-global-css',
|
||||
handleHotUpdate({ modules }) {
|
||||
// It's assumed `modules[0]` is the primary updated module of interest.
|
||||
// `_clientModule` and `importers` might be internal or less stable Vite APIs.
|
||||
const importers = modules[0]?._clientModule?.importers;
|
||||
if (importers) {
|
||||
// log all of the staticImportedUrls
|
||||
const importers = modules[0]._clientModule.importers
|
||||
importers.forEach((importer) => {
|
||||
// Check if the importer is a CSS file
|
||||
if (importer.file && importer.file.includes(".css")) {
|
||||
console.log("[touch-global-css] touching", importer.file);
|
||||
try {
|
||||
// Update the access and modification times of the CSS file to the current time
|
||||
fs.utimesSync(importer.file, new Date(), new Date());
|
||||
} catch (err) {
|
||||
console.error(`[touch-global-css] Error touching file ${importer.file}:`, err);
|
||||
if (importer.file.includes('.css')) {
|
||||
console.log("touching", importer.file)
|
||||
fs.utimesSync(importer.file, new Date(), new Date())
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
+69
-205
@@ -1,240 +1,104 @@
|
||||
import type { ManifestV3Export } from "@crxjs/vite-plugin";
|
||||
import { type AnyCase, createEnum, ObjectValues } from "./utils";
|
||||
import type { ManifestV3Export } from '@crxjs/vite-plugin'
|
||||
import { type AnyCase, createEnum } from './utils'
|
||||
|
||||
/**
|
||||
* Enumerates supported JavaScript frameworks for project generation or configuration.
|
||||
*/
|
||||
export const FrameworkEnum = {
|
||||
React: "React",
|
||||
Vanilla: "Vanilla",
|
||||
Preact: "Preact",
|
||||
Lit: "Lit",
|
||||
Svelte: "Svelte",
|
||||
Vue: "Vue",
|
||||
} as const;
|
||||
React: 'React',
|
||||
Vanilla: 'Vanilla',
|
||||
Preact: 'Preact',
|
||||
Lit: 'Lit',
|
||||
Svelte: 'Svelte',
|
||||
Vue: 'Vue',
|
||||
} as const
|
||||
|
||||
/**
|
||||
* Enumerates supported web browsers, typically for targeting builds or configurations.
|
||||
*/
|
||||
export const BrowserEnum = {
|
||||
Chrome: "Chrome",
|
||||
Brave: "Brave",
|
||||
Opera: "Opera",
|
||||
Edge: "Edge",
|
||||
Firefox: "Firefox",
|
||||
Safari: "Safari",
|
||||
} as const;
|
||||
Chrome: 'Chrome',
|
||||
Brave: 'Brave',
|
||||
Opera: 'Opera',
|
||||
Edge: 'Edge',
|
||||
Firefox: 'Firefox',
|
||||
Safari: 'Safari',
|
||||
} as const
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Enumerates supported programming languages for project setup.
|
||||
* This enum is not exported, suggesting it's for internal use within this module or related modules.
|
||||
*/
|
||||
const LanguageEnum = {
|
||||
TypeScript: "TypeScript",
|
||||
JavaScript: "JavaScript",
|
||||
} as const;
|
||||
TypeScript: 'TypeScript',
|
||||
JavaScript: 'JavaScript',
|
||||
} as const
|
||||
|
||||
/**
|
||||
* Enumerates supported styling options or libraries.
|
||||
*/
|
||||
export const StyleEnum = {
|
||||
Tailwind: "Tailwind",
|
||||
} as const;
|
||||
Tailwind: 'Tailwind',
|
||||
} as const
|
||||
|
||||
/**
|
||||
* Enumerates supported package managers.
|
||||
*/
|
||||
export const PackageManagerEnum = {
|
||||
Bun: "Bun",
|
||||
PnPm: "PnPm",
|
||||
Npm: "Npm",
|
||||
Yarn: "Yarn",
|
||||
} as const;
|
||||
Bun: 'Bun',
|
||||
PnPm: 'PnPm',
|
||||
Npm: 'Npm',
|
||||
Yarn: 'Yarn',
|
||||
} as const
|
||||
|
||||
/**
|
||||
* Defines the structure for browser-specific settings within a web extension manifest.
|
||||
* This is particularly used for Firefox (gecko) extensions to specify properties like
|
||||
* an extension ID, and minimum/maximum supported browser versions.
|
||||
* The structure is based on common manifest extensions for Firefox.
|
||||
* See: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings
|
||||
* The link in the original code (// see: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/firefox-webext-browser/index.d.ts)
|
||||
* also points to type definitions that include this structure.
|
||||
*
|
||||
* @property {object} [browser_specific_settings] - Container for browser-specific settings.
|
||||
* @property {object} [browser_specific_settings.gecko] - Settings specific to Gecko-based browsers (e.g., Firefox).
|
||||
* @property {string} [browser_specific_settings.gecko.id] - The unique identifier for the extension in Firefox.
|
||||
* @property {string} [browser_specific_settings.gecko.strict_min_version] - The minimum version of Firefox the extension is compatible with.
|
||||
* @property {string} [browser_specific_settings.gecko.strict_max_version] - The maximum version of Firefox the extension is compatible with.
|
||||
*/
|
||||
// see: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/firefox-webext-browser/index.d.ts
|
||||
export type BrowserSpecificSettings = {
|
||||
browser_specific_settings?: {
|
||||
gecko?: {
|
||||
id: string;
|
||||
strict_min_version?: string;
|
||||
strict_max_version?: string;
|
||||
};
|
||||
};
|
||||
};
|
||||
id: string
|
||||
strict_min_version?: string
|
||||
strict_max_version?: string
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Represents the structure of a Chrome Manifest V3 file.
|
||||
* This type is an alias for `ManifestV3Export` from the `@crxjs/vite-plugin`,
|
||||
* which provides a comprehensive definition for Chrome extension manifests.
|
||||
*/
|
||||
export type Manifest = ManifestV3Export;
|
||||
|
||||
/** Alias for the `icons` property within a Chrome Manifest V3. */
|
||||
export type ManifestIcons = chrome.runtime.ManifestIcons;
|
||||
/** Alias for the `background` property within a Chrome Manifest V3. */
|
||||
export type ManifestBackground = chrome.runtime.ManifestV3["background"];
|
||||
/** Alias for the `content_scripts` property within a Chrome Manifest V3. */
|
||||
export type Manifest = ManifestV3Export
|
||||
export type ManifestIcons = chrome.runtime.ManifestIcons
|
||||
export type ManifestBackground = chrome.runtime.ManifestV3['background']
|
||||
export type ManifestContentScripts =
|
||||
chrome.runtime.ManifestV3["content_scripts"];
|
||||
/** Alias for the `web_accessible_resources` property within a Chrome Manifest V3. */
|
||||
chrome.runtime.ManifestV3['content_scripts']
|
||||
export type ManifestWebAccessibleResources =
|
||||
chrome.runtime.ManifestV3["web_accessible_resources"];
|
||||
/** Alias for the `commands` property within a Chrome Manifest V3. */
|
||||
export type ManifestCommands = chrome.runtime.ManifestV3["commands"];
|
||||
/** Alias for the `action` property (or `browser_action`/`page_action`) within a Chrome Manifest V3. */
|
||||
export type ManifestAction = chrome.runtime.ManifestV3["action"];
|
||||
/** Alias for the `permissions` property within a Chrome Manifest V3. */
|
||||
export type ManifestPermissions = chrome.runtime.ManifestV3["permissions"];
|
||||
/** Alias for the `options_ui` property within a Chrome Manifest V3. */
|
||||
export type ManifestOptionsUI = chrome.runtime.ManifestV3["options_ui"];
|
||||
/** Alias for the `chrome_url_overrides` property within a Chrome Manifest V3. */
|
||||
chrome.runtime.ManifestV3['web_accessible_resources']
|
||||
export type ManifestCommands = chrome.runtime.ManifestV3['commands']
|
||||
export type ManifestAction = chrome.runtime.ManifestV3['action']
|
||||
export type ManifestPermissions = chrome.runtime.ManifestV3['permissions']
|
||||
export type ManifestOptionsUI = chrome.runtime.ManifestV3['options_ui']
|
||||
export type ManifestURLOverrides =
|
||||
chrome.runtime.ManifestV3["chrome_url_overrides"];
|
||||
chrome.runtime.ManifestV3['chrome_url_overrides']
|
||||
|
||||
/**
|
||||
* Creates a type that accepts a string literal `T` in either its capitalized or lowercase form.
|
||||
* Useful for defining types that should be case-insensitive for specific known strings.
|
||||
* @template T - A string literal type.
|
||||
*/
|
||||
export type BrowserName<T extends string> = Capitalize<T> | Lowercase<T>;
|
||||
|
||||
/**
|
||||
* Creates a record type where both keys and values are derived from a string literal `T`,
|
||||
* specifically using `BrowserName<T>` which allows for capitalized or lowercase forms.
|
||||
* This could be used to define an object where, for example, keys are 'Chrome' or 'chrome'
|
||||
* and values are also 'Chrome' or 'chrome'.
|
||||
* @template T - A string literal type, typically representing a browser name.
|
||||
*/
|
||||
export type BrowserName<T extends string> = Capitalize<T> | Lowercase<T>
|
||||
export type BrowserEnumType<T extends string> = {
|
||||
[browser in BrowserName<T>]: BrowserName<T>;
|
||||
};
|
||||
[browser in BrowserName<T>]: BrowserName<T>
|
||||
}
|
||||
|
||||
/**
|
||||
* Represents the target browser for a build, allowing for various casings of browser names
|
||||
* (e.g., "chrome", "Chrome", "CHROME") through the `AnyCase<Browser>` utility type.
|
||||
* `Browser` itself is a union of specific browser name strings (e.g., "Chrome" | "Firefox").
|
||||
*/
|
||||
export type BuildMode = AnyCase<Browser>;
|
||||
|
||||
/**
|
||||
* Defines an object structure that pairs a web extension `Manifest`
|
||||
* with its target `browser` (represented as `AnyCase<Browser>`).
|
||||
* This is commonly used in build processes to manage configurations for different browsers.
|
||||
*/
|
||||
export type BuildMode = AnyCase<Browser>
|
||||
export type BuildTarget = {
|
||||
manifest: Manifest;
|
||||
browser: AnyCase<Browser>;
|
||||
};
|
||||
|
||||
/**
|
||||
* Defines the configuration options for a build process.
|
||||
* @property {"build" | "serve"} [command] - The type of build command (e.g., 'build' for production, 'serve' for development).
|
||||
* @property {AnyCase<Browser> | string | undefined} [mode] - The target build mode, typically a browser name (allowing various casings)
|
||||
* or potentially other custom mode strings.
|
||||
*/
|
||||
manifest: Manifest
|
||||
browser: AnyCase<Browser>
|
||||
}
|
||||
export type BuildConfig = {
|
||||
command?: "build" | "serve";
|
||||
mode?: AnyCase<Browser> | string | undefined;
|
||||
};
|
||||
command?: 'build' | 'serve'
|
||||
mode?: AnyCase<Browser> | string | undefined
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines the structure for repository information, commonly found in `package.json`.
|
||||
* @property {string} type - The type of the repository (e.g., "git").
|
||||
* @property {string} [url] - The URL of the repository.
|
||||
* @property {Bugs} [bugs] - An object containing information about where to report bugs.
|
||||
*/
|
||||
export interface Repository {
|
||||
type: string;
|
||||
url?: string;
|
||||
bugs?: Bugs;
|
||||
type: string
|
||||
url?: string
|
||||
bugs?: Bugs
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines the structure for bug reporting information, often part of the `Repository` interface.
|
||||
* @property {string} [url] - The URL of the issue tracker.
|
||||
* @property {string} [email] - The email address for reporting bugs.
|
||||
*/
|
||||
export interface Bugs {
|
||||
url?: string;
|
||||
email?: string;
|
||||
url?: string
|
||||
email?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* A string literal union type representing supported browser names, derived from the values of `BrowserEnum`.
|
||||
* e.g., "Chrome" | "Firefox" | ...
|
||||
*/
|
||||
export type Browser = ObjectValues<typeof BrowserEnum>;
|
||||
export type Browser = (typeof BrowserEnum)[keyof typeof BrowserEnum]
|
||||
export const Browser: AnyCase<Browser> = createEnum(BrowserEnum)
|
||||
|
||||
/**
|
||||
* A constant intended to provide access to browser names, potentially in various casings.
|
||||
* Its type `AnyCase<Browser>` suggests it can be used where case-insensitivity for browser names is needed.
|
||||
* The `createEnum(BrowserEnum)` call aims to produce a representation of browser names from `BrowserEnum`.
|
||||
* Note: `createEnum` from `lib/utils.ts` has a declared return type of `ObjectValues<T>` (a union of values),
|
||||
* while its implementation uses `Object.values()` which returns an array. This constant will hold the
|
||||
* runtime array value, but its JSDoc type refers to the more restrictive `AnyCase<Browser>` union type.
|
||||
*/
|
||||
export const Browser: AnyCase<Browser> = createEnum(BrowserEnum);
|
||||
|
||||
/**
|
||||
* A string literal union type representing supported package managers, derived from the values of `PackageManagerEnum`.
|
||||
* e.g., "Bun" | "PnPm" | "Npm" | "Yarn"
|
||||
*/
|
||||
export type PackageManager = ObjectValues<typeof PackageManagerEnum>;
|
||||
/**
|
||||
* A constant intended to provide access to package manager names, potentially in various casings.
|
||||
* Its type `AnyCase<PackageManager>` suggests it can be used where case-insensitivity for package manager names is needed.
|
||||
* Utilizes `createEnum(PackageManagerEnum)`. Refer to notes on `Browser` constant regarding `createEnum` behavior.
|
||||
*/
|
||||
export type PackageManager =
|
||||
(typeof PackageManagerEnum)[keyof typeof PackageManagerEnum]
|
||||
export const PackageManager: AnyCase<PackageManager> =
|
||||
createEnum(PackageManagerEnum);
|
||||
createEnum(PackageManagerEnum)
|
||||
|
||||
/**
|
||||
* A string literal union type representing supported JavaScript frameworks, derived from the values of `FrameworkEnum`.
|
||||
* e.g., "React" | "Vanilla" | ...
|
||||
*/
|
||||
export type Framework = ObjectValues<typeof FrameworkEnum>;
|
||||
/**
|
||||
* A constant intended to provide access to framework names, potentially in various casings.
|
||||
* Its type `AnyCase<Framework>` suggests it can be used where case-insensitivity for framework names is needed.
|
||||
* Utilizes `createEnum(FrameworkEnum)`. Refer to notes on `Browser` constant regarding `createEnum` behavior.
|
||||
*/
|
||||
export const Framework: AnyCase<Framework> = createEnum(FrameworkEnum);
|
||||
export type Framework = (typeof FrameworkEnum)[keyof typeof FrameworkEnum]
|
||||
export const Framework: AnyCase<Framework> = createEnum(FrameworkEnum)
|
||||
|
||||
/**
|
||||
* A string literal union type representing supported styling options, derived from the values of `StyleEnum`.
|
||||
* e.g., "Tailwind"
|
||||
*/
|
||||
export type Style = ObjectValues<typeof StyleEnum>;
|
||||
/**
|
||||
* A constant intended to provide access to style option names, potentially in various casings.
|
||||
* Its type `AnyCase<Style>` suggests it can be used where case-insensitivity for style names is needed.
|
||||
* Utilizes `createEnum(StyleEnum)`. Refer to notes on `Browser` constant regarding `createEnum` behavior.
|
||||
*/
|
||||
export const Style: AnyCase<Style> = createEnum(StyleEnum);
|
||||
export type Style = (typeof StyleEnum)[keyof typeof StyleEnum]
|
||||
export const Style: AnyCase<Style> = createEnum(StyleEnum)
|
||||
|
||||
/**
|
||||
* A string literal union type representing supported programming languages, derived from the values of `LanguageEnum`.
|
||||
* e.g., "TypeScript" | "JavaScript"
|
||||
*/
|
||||
export type Language = ObjectValues<typeof LanguageEnum>;
|
||||
/**
|
||||
* A constant intended to provide access to programming language names, potentially in various casings.
|
||||
* Its type `AnyCase<Language>` suggests it can be used where case-insensitivity for language names is needed.
|
||||
* Utilizes `createEnum(LanguageEnum)`. Refer to notes on `Browser` constant regarding `createEnum` behavior.
|
||||
*/
|
||||
export const Language: AnyCase<Language> = createEnum(LanguageEnum);
|
||||
export type Language = (typeof LanguageEnum)[keyof typeof LanguageEnum]
|
||||
export const Language: AnyCase<Language> = createEnum(LanguageEnum)
|
||||
+6
-69
@@ -1,84 +1,21 @@
|
||||
/**
|
||||
* Extracts a union type of all values from the properties of an object type `T`.
|
||||
*
|
||||
* @template T - An object type (typically a Record or an enum-like object).
|
||||
* @example
|
||||
* type MyObject = { a: "foo", b: "bar", c: 123 };
|
||||
* type MyObjectValues = ObjectValues<MyObject>; // "foo" | "bar" | 123
|
||||
*/
|
||||
export type ObjectValues<T> = T[keyof T];
|
||||
export type ObjectValues<T> = T[keyof T]
|
||||
|
||||
/**
|
||||
* Creates a union of an object's string values, often used to represent the set of possible values for an enum-like object.
|
||||
* Note: The implementation `Object.values(enumObj) as unknown as ObjectValues<T>` returns an array at runtime,
|
||||
* but the declared return type `ObjectValues<T>` is a union of the object's property values.
|
||||
* This type signature suggests it's intended to represent the set of possible string values from `enumObj`.
|
||||
*
|
||||
* @template T - An object type where keys are strings and values are strings (e.g., `const MyEnum = { VAL_A: "A", VAL_B: "B" }`).
|
||||
* @param {T} enumObj - The object from which to extract values.
|
||||
* @returns {ObjectValues<T>} A union type representing all possible string values of the `enumObj`.
|
||||
* For example, if `enumObj` is `{ A: "valA", B: "valB" }`, the return type is `"valA" | "valB"`.
|
||||
* (Runtime behavior of `Object.values()` is to return an array like `["valA", "valB"]`).
|
||||
*/
|
||||
export function createEnum<T extends Record<string, string>>(enumObj: T) {
|
||||
return Object.values(enumObj) as unknown as ObjectValues<T>;
|
||||
return Object.values(enumObj) as unknown as ObjectValues<T>
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a union type that includes various case formats (uppercase, lowercase, capitalized, uncapitalized)
|
||||
* of a given string literal type `T`.
|
||||
*
|
||||
* @template T - A string literal type.
|
||||
* @example
|
||||
* type MyString = "example";
|
||||
* type MyStringAnyCase = AnyCase<MyString>; // "EXAMPLE" | "example" | "Example" | "example" (Uncapitalize<"Example"> is "example")
|
||||
*/
|
||||
export type AnyCase<T extends string> =
|
||||
| Uppercase<T>
|
||||
| Lowercase<T>
|
||||
| Capitalize<T>
|
||||
| Uncapitalize<T>;
|
||||
| Uncapitalize<T>
|
||||
|
||||
/**
|
||||
* Creates a union type that includes various case formats (uppercase, lowercase, capitalized, uncapitalized)
|
||||
* of the union of two given string literal types `T` and `K`.
|
||||
* This is useful for representing a combined set of related string constants where case variations are permitted for each.
|
||||
*
|
||||
* @template T - A string literal type.
|
||||
* @template K - Another string literal type.
|
||||
* @example
|
||||
* type Lang1 = "english";
|
||||
* type Lang2 = "french";
|
||||
* type CombinedLangsAnyCase = AnyCaseLanguage<Lang1, Lang2>;
|
||||
* // Result includes: "ENGLISH" | "english" | "English" | "FRENCH" | "french" | "French" etc.
|
||||
* // for all case variations of "english" and "french".
|
||||
*/
|
||||
export type AnyCaseLanguage<T extends string, K extends string> =
|
||||
| Uppercase<T | K>
|
||||
| Lowercase<T | K>
|
||||
| Capitalize<T | K>
|
||||
| Uncapitalize<T | K>;
|
||||
| Uncapitalize<T | K>
|
||||
|
||||
/**
|
||||
* Extracts a new object type containing only the keys of `T` whose properties are optional
|
||||
* (i.e., their type includes `undefined`). The values associated with these keys retain their original types.
|
||||
*
|
||||
* @template T - An object type.
|
||||
* @example
|
||||
* type MyObject = {
|
||||
* requiredProp: string;
|
||||
* optionalProp?: number;
|
||||
* anotherOptional?: boolean | undefined;
|
||||
* nullProp: string | null;
|
||||
* };
|
||||
* type MyOptionalProps = OptionalKeys<MyObject>;
|
||||
* // MyOptionalProps would be conceptually equivalent to:
|
||||
* // {
|
||||
* // optionalProp?: number;
|
||||
* // anotherOptional?: boolean | undefined;
|
||||
* // }
|
||||
* // The actual resulting type is an object type with only these optional keys.
|
||||
*/
|
||||
export type OptionalKeys<T> = {
|
||||
[K in keyof T as undefined extends T[K] ? K : never]: T[K];
|
||||
};
|
||||
[K in keyof T as undefined extends T[K] ? K : never]: T[K]
|
||||
}
|
||||
+4
-6
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "betterseqtaplus",
|
||||
"version": "3.4.9",
|
||||
"version": "3.4.6.1",
|
||||
"type": "module",
|
||||
"description": "Enhance SEQTA Learn's usability and aesthetics! A fork of BetterSEQTA to continue development add add heaps more features!",
|
||||
"browserslist": "> 0.5%, last 2 versions, not dead",
|
||||
@@ -28,7 +28,7 @@
|
||||
"keywords": [],
|
||||
"author": {
|
||||
"name": "SethBurkart123",
|
||||
"email": "betterseqta.plus@gmail.com",
|
||||
"email": "betterseqta@betterseqta.com",
|
||||
"url": "https://github.com/BetterSEQTA/BetterSEQTA-plus"
|
||||
},
|
||||
"license": "MIT",
|
||||
@@ -36,7 +36,7 @@
|
||||
"@babel/plugin-transform-runtime": "^7.26.9",
|
||||
"@babel/runtime": "^7.26.9",
|
||||
"@bedframe/cli": "^0.0.91",
|
||||
"@crxjs/vite-plugin": "2.0.0-beta.32",
|
||||
"@crxjs/vite-plugin": "2.0.0-beta.25",
|
||||
"@types/mime-types": "^2.1.4",
|
||||
"@types/react": "^19.0.10",
|
||||
"@types/react-dom": "^19.0.4",
|
||||
@@ -75,14 +75,12 @@
|
||||
"@uiw/codemirror-extensions-color": "^4.23.10",
|
||||
"@uiw/codemirror-theme-github": "^4.23.10",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"canvas-confetti": "^1.9.3",
|
||||
"client-vector-search": "../client-vector-search",
|
||||
"codemirror": "^6.0.1",
|
||||
"color": "^5.0.0",
|
||||
"dompurify": "^3.2.4",
|
||||
"embeddia": "^1.2.1",
|
||||
"embla-carousel-autoplay": "^8.5.2",
|
||||
"embla-carousel-svelte": "^8.5.2",
|
||||
"esbuild": "^0.25.3",
|
||||
"events": "^3.3.0",
|
||||
"flexsearch": "^0.8.147",
|
||||
"fuse.js": "^7.1.0",
|
||||
|
||||
+126
@@ -0,0 +1,126 @@
|
||||
--- a/Users/sethburkart/Documents/Coding/betterseqta-plus/src/plugins/core/settings.ts
|
||||
+++ b/Users/sethburkart/Documents/Coding/betterseqta-plus/src/plugins/core/settings.ts
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
// Base interfaces for our settings
|
||||
interface BaseSettingOptions {
|
||||
- title: string;
|
||||
+ readonly title: string; // Mark as readonly where appropriate
|
||||
description?: string;
|
||||
}
|
||||
|
||||
@@ -11,21 +11,21 @@
|
||||
}
|
||||
|
||||
interface StringSettingOptions extends BaseSettingOptions {
|
||||
- default: string;
|
||||
+ readonly default: string;
|
||||
maxLength?: number;
|
||||
pattern?: string;
|
||||
}
|
||||
|
||||
interface NumberSettingOptions extends BaseSettingOptions {
|
||||
- default: number;
|
||||
+ readonly default: number;
|
||||
min?: number;
|
||||
max?: number;
|
||||
step?: number;
|
||||
}
|
||||
|
||||
interface SelectSettingOptions<T extends string> extends BaseSettingOptions {
|
||||
- default: T;
|
||||
- options: readonly T[];
|
||||
+ readonly default: T;
|
||||
+ readonly options: readonly T[];
|
||||
}
|
||||
|
||||
// The actual decorators
|
||||
@@ -34,14 +34,16 @@
|
||||
// Ensure the settings property exists on the constructor's prototype
|
||||
const proto = target.constructor.prototype;
|
||||
if (!proto.hasOwnProperty('settings')) {
|
||||
- proto.settings = {};
|
||||
+ // Initialize with a base type that can be extended
|
||||
+ Object.defineProperty(proto, 'settings', {
|
||||
+ value: {},
|
||||
+ writable: true, // Allows adding properties
|
||||
+ configurable: true,
|
||||
+ enumerable: true
|
||||
+ });
|
||||
}
|
||||
-
|
||||
+
|
||||
// Add the setting to the prototype's settings object with const assertion
|
||||
proto.settings[propertyKey] = {
|
||||
type: 'boolean' as const,
|
||||
...options
|
||||
};
|
||||
- };
|
||||
-}
|
||||
-
|
||||
-export function StringSetting(options: StringSettingOptions): PropertyDecorator {
|
||||
- return (target: Object, propertyKey: string | symbol) => {
|
||||
- // Ensure the settings property exists on the constructor's prototype
|
||||
- const proto = target.constructor.prototype;
|
||||
- if (!proto.hasOwnProperty('settings')) {
|
||||
- proto.settings = {};
|
||||
- }
|
||||
-
|
||||
- // Add the setting to the prototype's settings object with const assertion
|
||||
- proto.settings[propertyKey] = {
|
||||
- type: 'string' as const,
|
||||
- ...options
|
||||
- };
|
||||
};
|
||||
}
|
||||
|
||||
@@ -50,14 +52,16 @@
|
||||
// Ensure the settings property exists on the constructor's prototype
|
||||
const proto = target.constructor.prototype;
|
||||
if (!proto.hasOwnProperty('settings')) {
|
||||
- proto.settings = {};
|
||||
+ Object.defineProperty(proto, 'settings', {
|
||||
+ value: {},
|
||||
+ writable: true,
|
||||
+ configurable: true,
|
||||
+ enumerable: true
|
||||
+ });
|
||||
}
|
||||
-
|
||||
+
|
||||
// Add the setting to the prototype's settings object with const assertion
|
||||
proto.settings[propertyKey] = {
|
||||
type: 'number' as const,
|
||||
...options
|
||||
};
|
||||
- };
|
||||
-}
|
||||
-
|
||||
-export function SelectSetting<T extends string>(options: SelectSettingOptions<T>): PropertyDecorator {
|
||||
- return (target: Object, propertyKey: string | symbol) => {
|
||||
- // Ensure the settings property exists on the constructor's prototype
|
||||
- const proto = target.constructor.prototype;
|
||||
- if (!proto.hasOwnProperty('settings')) {
|
||||
- proto.settings = {};
|
||||
- }
|
||||
-
|
||||
- // Add the setting to the prototype's settings object with const assertion
|
||||
- proto.settings[propertyKey] = {
|
||||
- type: 'select' as const,
|
||||
- ...options
|
||||
- };
|
||||
};
|
||||
}
|
||||
|
||||
// Base plugin class that handles settings
|
||||
export abstract class BasePlugin<T extends PluginSettings = PluginSettings> {
|
||||
// The settings property will be populated by decorators
|
||||
- settings!: T;
|
||||
-
|
||||
+ // Keep the instance property and constructor logic as is,
|
||||
+ // as changing it would require changing animated-background/index.ts
|
||||
+ settings!: T; // Use definite assignment assertion
|
||||
+
|
||||
constructor() {
|
||||
// Copy settings from the prototype to the instance
|
||||
// This ensures that each instance has its own settings object
|
||||
+30
-50
@@ -1,85 +1,65 @@
|
||||
import {
|
||||
initializeSettingsState,
|
||||
settingsState,
|
||||
} from "@/seqta/utils/listeners/SettingsState";
|
||||
import documentLoadCSS from "@/css/documentload.scss?inline";
|
||||
import icon48 from "@/resources/icons/icon-48.png?base64";
|
||||
import browser from "webextension-polyfill";
|
||||
} from "@/seqta/utils/listeners/SettingsState"
|
||||
import documentLoadCSS from "@/css/documentload.scss?inline"
|
||||
import icon48 from "@/resources/icons/icon-48.png?base64"
|
||||
import browser from "webextension-polyfill"
|
||||
|
||||
import * as plugins from "@/plugins";
|
||||
import { main } from "@/seqta/main";
|
||||
import { delay } from "./seqta/utils/delay";
|
||||
import { initializeHideSensitiveToggle } from "@/seqta/utils/hideSensitiveToggle";
|
||||
import * as plugins from "@/plugins"
|
||||
import { main } from "@/seqta/main"
|
||||
|
||||
export let MenuOptionsOpen = false;
|
||||
|
||||
var IsSEQTAPage = false;
|
||||
let hasSEQTAText = false;
|
||||
export let MenuOptionsOpen = false
|
||||
|
||||
var IsSEQTAPage = false
|
||||
let hasSEQTAText = false
|
||||
|
||||
// This check is placed outside of the document load event due to issues with EP (https://github.com/BetterSEQTA/BetterSEQTA-Plus/issues/84)
|
||||
if (document.childNodes[1]) {
|
||||
hasSEQTAText =
|
||||
document.childNodes[1].textContent?.includes(
|
||||
"Copyright (c) SEQTA Software",
|
||||
) ?? false;
|
||||
init();
|
||||
) ?? false
|
||||
init()
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes BetterSEQTA+ on a SEQTA page.
|
||||
*
|
||||
* This function performs the following steps:
|
||||
* 1. Verifies that the current page is a SEQTA page.
|
||||
* 2. Injects CSS styles for document loading.
|
||||
* 3. Changes the page's favicon.
|
||||
* 4. Initializes the extension's settings state.
|
||||
* 5. Sets default storage if settings are not already defined.
|
||||
* 6. Calls the main function to apply core BetterSEQTA+ modifications.
|
||||
* 7. Initializes legacy and new plugins if the extension is enabled.
|
||||
* 8. Logs success or error messages during initialization.
|
||||
*/
|
||||
async function init() {
|
||||
const hasSEQTATitle = document.title.includes("SEQTA Learn");
|
||||
const hasSEQTATitle = document.title.includes("SEQTA Learn")
|
||||
|
||||
if (hasSEQTAText && hasSEQTATitle && !IsSEQTAPage) {
|
||||
// Verify we are on a SEQTA page
|
||||
IsSEQTAPage = true;
|
||||
console.info("[BetterSEQTA+] Verified SEQTA Page");
|
||||
if (hasSEQTAText && hasSEQTATitle && !IsSEQTAPage) { // Verify we are on a SEQTA page
|
||||
IsSEQTAPage = true
|
||||
console.info("[BetterSEQTA+] Verified SEQTA Page")
|
||||
|
||||
const documentLoadStyle = document.createElement("style");
|
||||
documentLoadStyle.textContent = documentLoadCSS;
|
||||
document.head.appendChild(documentLoadStyle);
|
||||
const documentLoadStyle = document.createElement("style")
|
||||
documentLoadStyle.textContent = documentLoadCSS
|
||||
document.head.appendChild(documentLoadStyle)
|
||||
|
||||
const icon = document.querySelector(
|
||||
'link[rel*="icon"]',
|
||||
)! as HTMLLinkElement;
|
||||
icon.href = icon48; // Change the icon
|
||||
const icon = document.querySelector('link[rel*="icon"]')! as HTMLLinkElement
|
||||
icon.href = icon48 // Change the icon
|
||||
|
||||
try {
|
||||
await initializeSettingsState();
|
||||
await initializeSettingsState()
|
||||
|
||||
if (typeof settingsState.onoff === "undefined") {
|
||||
await browser.runtime.sendMessage({ type: "setDefaultStorage" });
|
||||
|
||||
await delay(5);
|
||||
browser.runtime.sendMessage({ type: "setDefaultStorage" })
|
||||
}
|
||||
|
||||
await main();
|
||||
plugins.Monofile();
|
||||
await main()
|
||||
|
||||
if (settingsState.onoff) {
|
||||
await plugins.initializePlugins();
|
||||
}
|
||||
// Initialize legacy plugins
|
||||
plugins.Monofile()
|
||||
|
||||
if (settingsState.devMode) {
|
||||
initializeHideSensitiveToggle();
|
||||
// Initialize new plugin system
|
||||
await plugins.initializePlugins();
|
||||
}
|
||||
|
||||
console.info(
|
||||
"[BetterSEQTA+] Successfully initialised BetterSEQTA+, starting to load assets.",
|
||||
);
|
||||
)
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
}
|
||||
+125
-55
@@ -1,81 +1,65 @@
|
||||
import browser from "webextension-polyfill";
|
||||
import browser from 'webextension-polyfill'
|
||||
import type { SettingsState } from "@/types/storage";
|
||||
import { fetchNews } from "./background/news";
|
||||
import { fetchNews } from './background/news';
|
||||
|
||||
function reloadSeqtaPages() {
|
||||
const result = browser.tabs.query({});
|
||||
function open(tabs: any) {
|
||||
const result = browser.tabs.query({})
|
||||
function open (tabs: any) {
|
||||
for (let tab of tabs) {
|
||||
if (tab.title.includes("SEQTA Learn")) {
|
||||
if (tab.title.includes('SEQTA Learn')) {
|
||||
browser.tabs.reload(tab.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
result.then(open, console.error);
|
||||
result.then(open, console.error)
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
browser.runtime.onMessage.addListener(
|
||||
(request: any, _: any, sendResponse: (response?: any) => void) => {
|
||||
browser.runtime.onMessage.addListener((request: any, _: any, sendResponse: (response?: any) => void) => {
|
||||
|
||||
switch (request.type) {
|
||||
case "reloadTabs":
|
||||
case 'reloadTabs':
|
||||
reloadSeqtaPages();
|
||||
break;
|
||||
|
||||
case "extensionPages":
|
||||
case 'extensionPages':
|
||||
browser.tabs.query({}).then(function (tabs) {
|
||||
for (let tab of tabs) {
|
||||
if (tab.url?.includes("chrome-extension://")) {
|
||||
if (tab.url?.includes('chrome-extension://')) {
|
||||
browser.tabs.sendMessage(tab.id!, request);
|
||||
}
|
||||
}
|
||||
});
|
||||
break;
|
||||
|
||||
case "currentTab":
|
||||
browser.tabs
|
||||
.query({ active: true, currentWindow: true })
|
||||
.then(function (tabs) {
|
||||
browser.tabs
|
||||
.sendMessage(tabs[0].id!, request)
|
||||
.then(function (response) {
|
||||
case 'currentTab':
|
||||
browser.tabs.query({ active: true, currentWindow: true }).then(function (tabs) {
|
||||
browser.tabs.sendMessage(tabs[0].id!, request).then(function (response) {
|
||||
sendResponse(response);
|
||||
});
|
||||
});
|
||||
return true;
|
||||
|
||||
case "githubTab":
|
||||
browser.tabs.create({ url: "github.com/BetterSEQTA/BetterSEQTA-Plus" });
|
||||
case 'githubTab':
|
||||
browser.tabs.create({ url: 'github.com/BetterSEQTA/BetterSEQTA-Plus' });
|
||||
break;
|
||||
|
||||
case "setDefaultStorage":
|
||||
SetStorageValue(getDefaultValues());
|
||||
case 'setDefaultStorage':
|
||||
SetStorageValue(DefaultValues);
|
||||
break;
|
||||
|
||||
case "sendNews":
|
||||
fetchNews(request.source ?? "australia", sendResponse);
|
||||
case 'sendNews':
|
||||
fetchNews(request.source ?? 'australia', sendResponse);
|
||||
return true;
|
||||
|
||||
default:
|
||||
console.log("Unknown request type");
|
||||
console.log('Unknown request type');
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
function detectLowEndDevice(): boolean {
|
||||
// Check for low-end hardware indicators
|
||||
const lowCoreCount = navigator.hardwareConcurrency && navigator.hardwareConcurrency < 4;
|
||||
const lowMemory = (navigator as any).deviceMemory && (navigator as any).deviceMemory <= 2;
|
||||
|
||||
return lowCoreCount || lowMemory;
|
||||
}
|
||||
|
||||
function getDefaultValues(): SettingsState {
|
||||
const isLowEndDevice = detectLowEndDevice();
|
||||
|
||||
return {
|
||||
const DefaultValues: SettingsState = {
|
||||
onoff: true,
|
||||
animatedbk: true,
|
||||
bksliderinput: "50",
|
||||
@@ -102,33 +86,67 @@ function getDefaultValues(): SettingsState {
|
||||
},
|
||||
menuorder: [],
|
||||
subjectfilters: {},
|
||||
selectedTheme: "",
|
||||
selectedColor:
|
||||
"linear-gradient(40deg, rgba(201,61,0,1) 0%, RGBA(170, 5, 58, 1) 100%)",
|
||||
originalSelectedColor: "",
|
||||
selectedTheme: '',
|
||||
selectedColor: 'linear-gradient(40deg, rgba(201,61,0,1) 0%, RGBA(170, 5, 58, 1) 100%)',
|
||||
originalSelectedColor: '',
|
||||
DarkMode: true,
|
||||
animations: !isLowEndDevice,
|
||||
animations: true,
|
||||
assessmentsAverage: true,
|
||||
defaultPage: "home",
|
||||
defaultPage: 'home',
|
||||
shortcuts: [
|
||||
{
|
||||
name: "Outlook",
|
||||
name: 'YouTube',
|
||||
enabled: false,
|
||||
},
|
||||
{
|
||||
name: 'Outlook',
|
||||
enabled: true,
|
||||
},
|
||||
{
|
||||
name: "Office",
|
||||
name: 'Office',
|
||||
enabled: true,
|
||||
},
|
||||
{
|
||||
name: "Google",
|
||||
name: 'Spotify',
|
||||
enabled: false,
|
||||
},
|
||||
{
|
||||
name: 'Google',
|
||||
enabled: true,
|
||||
},
|
||||
{
|
||||
name: 'DuckDuckGo',
|
||||
enabled: false,
|
||||
},
|
||||
{
|
||||
name: 'Cool Math Games',
|
||||
enabled: false,
|
||||
},
|
||||
{
|
||||
name: 'SACE',
|
||||
enabled: false,
|
||||
},
|
||||
{
|
||||
name: 'Google Scholar',
|
||||
enabled: false,
|
||||
},
|
||||
{
|
||||
name: 'Gmail',
|
||||
enabled: false,
|
||||
},
|
||||
{
|
||||
name: 'Netflix',
|
||||
enabled: false,
|
||||
},
|
||||
{
|
||||
name: 'Education Perfect',
|
||||
enabled: false,
|
||||
},
|
||||
],
|
||||
customshortcuts: [],
|
||||
lettergrade: false,
|
||||
newsSource: "australia",
|
||||
};
|
||||
}
|
||||
newsSource: 'australia',
|
||||
};
|
||||
|
||||
function SetStorageValue(object: any) {
|
||||
for (var i in object) {
|
||||
@@ -136,11 +154,63 @@ function SetStorageValue(object: any) {
|
||||
}
|
||||
}
|
||||
|
||||
browser.runtime.onInstalled.addListener(function (event) {
|
||||
browser.storage.local.remove(["justupdated"]);
|
||||
browser.storage.local.remove(["data"]);
|
||||
function convertBksliderToSpeed(bksliderinput: number): number {
|
||||
const minBase = 50;
|
||||
const maxBase = 150;
|
||||
|
||||
if (event.reason == "install" || event.reason == "update") {
|
||||
const scaledValue = 2 + ((maxBase - bksliderinput) / (maxBase - minBase)) ** 4;
|
||||
const baseSpeed = 3;
|
||||
|
||||
const speed = baseSpeed / scaledValue;
|
||||
return speed;
|
||||
}
|
||||
|
||||
async function migrateLegacySettings() {
|
||||
const storage = await browser.storage.local.get(null) as unknown as SettingsState;
|
||||
|
||||
// Animated Background Migration
|
||||
if ('animatedbk' in storage || 'bksliderinput' in storage) {
|
||||
const animatedSettings = {
|
||||
enabled: storage.animatedbk ?? true,
|
||||
speed: storage.bksliderinput ? convertBksliderToSpeed(parseFloat(storage.bksliderinput)) : 1
|
||||
};
|
||||
await browser.storage.local.set({ 'plugin.animated-background.settings': animatedSettings });
|
||||
}
|
||||
|
||||
// Assessments Average Migration
|
||||
if ('assessmentsAverage' in storage || 'lettergrade' in storage) {
|
||||
const assessmentsSettings = {
|
||||
enabled: storage.assessmentsAverage ?? true,
|
||||
lettergrade: storage.lettergrade ?? false
|
||||
};
|
||||
await browser.storage.local.set({ 'plugin.assessments-average.settings': assessmentsSettings });
|
||||
}
|
||||
|
||||
if ('selectedTheme' in storage) {
|
||||
const themesSettings = { enabled: true };
|
||||
await browser.storage.local.set({ 'plugin.themes.settings': themesSettings });
|
||||
}
|
||||
if (storage.notificationCollector !== false) {
|
||||
await browser.storage.local.set({ 'plugin.notificationCollector.settings': { enabled: true } });
|
||||
} else {
|
||||
await browser.storage.local.set({ 'plugin.notificationCollector.settings': { enabled: false } });
|
||||
}
|
||||
|
||||
const keysToRemove = [
|
||||
'animatedbk',
|
||||
'bksliderinput',
|
||||
'assessmentsAverage',
|
||||
'lettergrade'
|
||||
];
|
||||
await browser.storage.local.remove(keysToRemove);
|
||||
}
|
||||
|
||||
browser.runtime.onInstalled.addListener(function (event) {
|
||||
browser.storage.local.remove(['justupdated']);
|
||||
browser.storage.local.remove(['data']);
|
||||
|
||||
if ( event.reason == 'install' || event.reason == 'update' ) {
|
||||
browser.storage.local.set({ justupdated: true });
|
||||
migrateLegacySettings();
|
||||
}
|
||||
});
|
||||
|
||||
+14
-51
@@ -1,36 +1,17 @@
|
||||
import Parser from "rss-parser";
|
||||
import Parser from 'rss-parser';
|
||||
|
||||
/**
|
||||
* Fetches news articles specifically for Australia from the NewsAPI.
|
||||
*
|
||||
* This function handles a specific case for fetching Australian news. It includes a
|
||||
* mechanism to retry the fetch operation by appending "%00" to the URL if a
|
||||
* rate limit error (`response.code == "rateLimited"`) is encountered. This is
|
||||
* likely a workaround for cache-busting or bypassing certain rate-limiting measures.
|
||||
*
|
||||
* @param {string} url The NewsAPI URL to fetch Australian news from.
|
||||
* @param {any} sendResponse A callback function (likely from a browser extension message listener)
|
||||
* to send the fetched news data back to the caller.
|
||||
* It's called with an object like `{ news: responseData }`.
|
||||
*/
|
||||
const fetchAustraliaNews = async (url: string, sendResponse: any) => {
|
||||
fetch(url)
|
||||
.then((result) => result.json())
|
||||
.then((response) => {
|
||||
if (response.code == "rateLimited") {
|
||||
fetchAustraliaNews((url += "%00"), sendResponse);
|
||||
if (response.code == 'rateLimited') {
|
||||
fetchAustraliaNews(url += '%00', sendResponse);
|
||||
} else {
|
||||
sendResponse({ news: response });
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* A record mapping lowercase country codes (e.g., "usa", "canada") to an array
|
||||
* of RSS feed URLs for news sources in that country.
|
||||
*
|
||||
* @type {Record<string, string[]>}
|
||||
*/
|
||||
const rssFeedsByCountry: Record<string, string[]> = {
|
||||
usa: [
|
||||
"https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml",
|
||||
@@ -50,13 +31,13 @@ const rssFeedsByCountry: Record<string, string[]> = {
|
||||
"https://critica.com.pa/rss.xml",
|
||||
"https://www.panamaamerica.com.pa/rss.xml",
|
||||
"https://noticiassin.com/feed/",
|
||||
"https://elcapitalfinanciero.com/feed/",
|
||||
"https://elcapitalfinanciero.com/feed/"
|
||||
],
|
||||
canada: [
|
||||
"https://www.cbc.ca/cmlink/rss-topstories",
|
||||
"https://calgaryherald.com/feed",
|
||||
"https://ottawacitizen.com/feed",
|
||||
"https://www.montrealgazette.com/feed",
|
||||
"https://www.montrealgazette.com/feed"
|
||||
],
|
||||
singapore: [
|
||||
"https://www.straitstimes.com/news/singapore/rss.xml",
|
||||
@@ -68,39 +49,23 @@ const rssFeedsByCountry: Record<string, string[]> = {
|
||||
],
|
||||
japan: [
|
||||
"https://www3.nhk.or.jp/nhkworld/en/news/feeds/",
|
||||
"https://news.livedoor.com/topics/rss/int.xml",
|
||||
"https://news.livedoor.com/topics/rss/int.xml"
|
||||
],
|
||||
netherlands: [
|
||||
"https://www.dutchnews.nl/feed/",
|
||||
"https://www.nrc.nl/rss/"
|
||||
],
|
||||
netherlands: ["https://www.dutchnews.nl/feed/", "https://www.nrc.nl/rss/"],
|
||||
};
|
||||
|
||||
/**
|
||||
* Fetches news articles based on a specified source.
|
||||
*
|
||||
* The source can be:
|
||||
* 1. The string "australia": Fetches news from Australian sources via NewsAPI,
|
||||
* handled by the `fetchAustraliaNews` function.
|
||||
* 2. A lowercase country code (e.g., "usa", "canada"): Fetches news from a predefined
|
||||
* list of RSS feeds for that country, as specified in `rssFeedsByCountry`.
|
||||
* 3. A direct RSS feed URL (starting with "http"): Fetches news directly from this URL.
|
||||
*
|
||||
* The fetched articles are then sent back to the caller using the `sendResponse` callback.
|
||||
*
|
||||
* @param {string} source The news source identifier. This can be "australia", a
|
||||
* lowercase country code, or a direct RSS feed URL.
|
||||
* @param {any} sendResponse A callback function (typically from a browser extension
|
||||
* message listener, like `chrome.runtime.onMessage`)
|
||||
* used to send the fetched news data back to the caller.
|
||||
* It's called with an object like `{ news: { articles: [...] } }`.
|
||||
*/
|
||||
export async function fetchNews(source: string, sendResponse: any) {
|
||||
if (source === "australia") {
|
||||
const date = new Date();
|
||||
|
||||
const from =
|
||||
date.getFullYear() +
|
||||
"-" +
|
||||
'-' +
|
||||
(date.getMonth() + 1) +
|
||||
"-" +
|
||||
'-' +
|
||||
(date.getDate() - 5);
|
||||
|
||||
const url = `https://newsapi.org/v2/everything?domains=abc.net.au&from=${from}&apiKey=17c0da766ba347c89d094449504e3080`;
|
||||
@@ -111,7 +76,7 @@ export async function fetchNews(source: string, sendResponse: any) {
|
||||
|
||||
const parser = new Parser();
|
||||
let feeds: string[];
|
||||
console.log("fetchNews", source);
|
||||
console.log('fetchNews', source)
|
||||
|
||||
if (rssFeedsByCountry[source.toLowerCase()]) {
|
||||
// If the source is a country, fetch from predefined feeds
|
||||
@@ -120,9 +85,7 @@ export async function fetchNews(source: string, sendResponse: any) {
|
||||
// If the source is a URL, use it directly
|
||||
feeds = [source];
|
||||
} else {
|
||||
throw new Error(
|
||||
"Invalid source. Provide a country code or a valid RSS feed URL.",
|
||||
);
|
||||
throw new Error("Invalid source. Provide a country code or a valid RSS feed URL.");
|
||||
}
|
||||
|
||||
const articlesPromises = feeds.map(async (feedUrl) => {
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
* along with EvenBetterSEQTA. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
@use "injected/popup.scss";
|
||||
@use 'injected/popup.scss';
|
||||
|
||||
html {
|
||||
background: #161616 !important;
|
||||
@@ -77,9 +77,7 @@ html {
|
||||
transform-origin: top;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
body:has(.outside-container:not(.hide))
|
||||
#AddedSettings.tooltip:hover
|
||||
> .tooltiptext {
|
||||
body:has(.outside-container:not(.hide)) #AddedSettings.tooltip:hover > .tooltiptext {
|
||||
transform: scale(0);
|
||||
}
|
||||
.assessmenttooltip svg {
|
||||
@@ -94,57 +92,3 @@ body:has(.outside-container:not(.hide))
|
||||
background: var(--text-primary) !important;
|
||||
color: var(--theme-primary) !important;
|
||||
}
|
||||
.fixed-tooltip {
|
||||
display: inline-block;
|
||||
z-index: 5 !important;
|
||||
width: 28px;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
padding: 2px;
|
||||
position: absolute;
|
||||
}
|
||||
.fixed-tooltip svg {
|
||||
fill: var(--theme-primary);
|
||||
}
|
||||
.tooltiptext-fixed {
|
||||
width: 120px;
|
||||
transform: scale(0);
|
||||
transition: transform 0.2s;
|
||||
transform-origin: top;
|
||||
background: var(--background-primary);
|
||||
color: var(--text-primary);
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 2px;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin-left: -62px;
|
||||
}
|
||||
.tooltiptext-fixed::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent var(--text-primary) transparent;
|
||||
}
|
||||
.tooltiptext-fixed.show {
|
||||
transform: scale(1);
|
||||
transform-origin: top;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.tooltiptext-fixed p:hover {
|
||||
cursor: pointer;
|
||||
background: rgba(0, 0, 0, 0.3) !important;
|
||||
transition: 200ms;
|
||||
}
|
||||
.tooltiptext-fixed p {
|
||||
border-radius: 8px !important;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
@@ -1 +1 @@
|
||||
import "./documentload.scss";
|
||||
import './documentload.scss';
|
||||
|
||||
+2
-11
@@ -15,7 +15,7 @@
|
||||
* along with EvenBetterSEQTA. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
body {
|
||||
body {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@@ -25,9 +25,7 @@ body {
|
||||
span,
|
||||
body {
|
||||
color: white !important;
|
||||
text-shadow:
|
||||
1px 1px 2px #161616,
|
||||
0 0 1em #161616;
|
||||
text-shadow: 1px 1px 2px #161616, 0 0 1em #161616;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -114,10 +112,3 @@ body {
|
||||
transition: text-shadow 0.5s;
|
||||
}
|
||||
}
|
||||
|
||||
.cke_panel_listItem > a {
|
||||
|
||||
&:hover {
|
||||
background: #3d3d3e !important;
|
||||
}
|
||||
}
|
||||
+78
-726
File diff suppressed because it is too large
Load Diff
@@ -36,7 +36,5 @@
|
||||
transform-origin: 70% 0;
|
||||
will-change: opacity, transform;
|
||||
transform: translateZ(0); // promotes GPU rendering
|
||||
transition:
|
||||
opacity 0.05s,
|
||||
transform 0.05s;
|
||||
transition: opacity 0.05s, transform 0.05s;
|
||||
}
|
||||
@@ -25,7 +25,7 @@
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.sub:has(ul > li.hasChildren.active) > .nav > .back {
|
||||
.sub:has(ul>li.hasChildren.active) > .nav > .back {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -8,6 +8,7 @@ html.transparencyEffects:not(.dark) {
|
||||
--background-secondary: rgba(229, 231, 235, 0.6);
|
||||
}
|
||||
|
||||
|
||||
html.transparencyEffects {
|
||||
/* Background Fixes */
|
||||
[class*="notifications__item___"],
|
||||
@@ -21,9 +22,6 @@ html.transparencyEffects {
|
||||
}
|
||||
|
||||
/* Blurs */
|
||||
.search,
|
||||
.document,
|
||||
.border,
|
||||
.draggable,
|
||||
.notice,
|
||||
[class*="BasicPanel__BasicPanel___"],
|
||||
@@ -39,29 +37,34 @@ html.transparencyEffects {
|
||||
[class*="LabelList__selected___"],
|
||||
.buttonChecklist,
|
||||
.pane,
|
||||
.legacy-root button,
|
||||
.legacy-root a,
|
||||
.legacy-root button, .legacy-root a,
|
||||
[class*="MessageList__MessageList___"] {
|
||||
backdrop-filter: blur(80px);
|
||||
}
|
||||
|
||||
.filter-select,
|
||||
.uiShortText.search,
|
||||
.report {
|
||||
backdrop-filter: blur(10px) !important;
|
||||
}
|
||||
|
||||
#menu,
|
||||
.kanban-column,
|
||||
.whatsnewContainer,
|
||||
[class*="Message__Message___"] {
|
||||
backdrop-filter: blur(50px);
|
||||
}
|
||||
|
||||
#menu {
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.title > a {
|
||||
backdrop-filter: blur(0px) !important;
|
||||
}
|
||||
|
||||
.search,
|
||||
.document,
|
||||
.border {
|
||||
backdrop-filter: blur(80px);
|
||||
}
|
||||
|
||||
#main > .dashboard {
|
||||
section,
|
||||
.dashlet {
|
||||
|
||||
Vendored
+7
-7
@@ -1,11 +1,11 @@
|
||||
declare module "*.mp4";
|
||||
declare module "*.woff";
|
||||
declare module "*.scss";
|
||||
declare module "*.png";
|
||||
declare module "*.html";
|
||||
declare module "*.svelte";
|
||||
declare module '*.mp4';
|
||||
declare module '*.woff';
|
||||
declare module '*.scss';
|
||||
declare module '*.png';
|
||||
declare module '*.html';
|
||||
declare module '*.svelte';
|
||||
|
||||
declare module "*?inlineWorker" {
|
||||
declare module '*?inlineWorker' {
|
||||
const value: () => Worker;
|
||||
export default value;
|
||||
}
|
||||
|
||||
@@ -2,6 +2,6 @@
|
||||
let { onClick, text } = $props<{ onClick: () => void, text: string, [key: string]: any }>();
|
||||
</script>
|
||||
|
||||
<button onclick={onClick} class='px-5 py-1.5 text-[0.75rem] shadow-2xl border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 dark:text-white rounded-lg'>
|
||||
<button onclick={onClick} class='px-4 py-1 text-[0.75rem] dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white rounded-md'>
|
||||
{text}
|
||||
</button>
|
||||
@@ -81,20 +81,20 @@
|
||||
</script>
|
||||
|
||||
{#if standalone}
|
||||
<div class="h-auto overflow-clip rounded-xl">
|
||||
<div class="h-auto rounded-xl overflow-clip">
|
||||
<ReactAdapter customOnChange={customOnChange} customState={customState} savePresets={savePresets} el={ColourPicker} />
|
||||
</div>
|
||||
{:else}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div
|
||||
bind:this={background}
|
||||
class="flex absolute top-0 left-0 z-50 justify-center items-center w-full h-full shadow-2xl cursor-pointer bg-black/20 border border-[#DDDDDD]/30 dark:border-[#38373D]/30"
|
||||
class="absolute top-0 left-0 z-50 flex items-center justify-center w-full h-full cursor-pointer bg-black/20"
|
||||
onclick={handleBackgroundClick}
|
||||
onkeydown={(e) => { e.key === 'Enter' && handleBackgroundClick }}
|
||||
>
|
||||
<div
|
||||
bind:this={content}
|
||||
class="p-4 h-auto bg-white rounded-xl border shadow-lg cursor-auto dark:bg-zinc-800 border-zinc-100 dark:border-zinc-700"
|
||||
class="h-auto p-4 bg-white border shadow-lg cursor-auto rounded-xl dark:bg-zinc-800 border-zinc-100 dark:border-zinc-700"
|
||||
>
|
||||
<ReactAdapter customOnChange={customOnChange} customState={customState} savePresets={savePresets} el={ColourPicker} />
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import ColorPicker from "react-best-gradient-color-picker";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts";
|
||||
import ColorPicker from "react-best-gradient-color-picker"
|
||||
import { useEffect, useRef, useState } from "react"
|
||||
import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
|
||||
|
||||
const defaultPresets = [
|
||||
"linear-gradient(30deg, rgba(229,209,218,1) 0%, RGBA(235,169,202,1) 46%, rgba(214,155,162,1) 100%)",
|
||||
@@ -22,12 +22,12 @@ const defaultPresets = [
|
||||
"rgba(30, 64, 175, 0.89)",
|
||||
"rgba(134, 25, 143, 1)",
|
||||
"rgba(14, 165, 233, 0.9)",
|
||||
];
|
||||
]
|
||||
|
||||
interface PickerProps {
|
||||
customOnChange?: (color: string) => void;
|
||||
customState?: string;
|
||||
savePresets?: boolean;
|
||||
customOnChange?: (color: string) => void
|
||||
customState?: string
|
||||
savePresets?: boolean
|
||||
}
|
||||
|
||||
export default function Picker({
|
||||
@@ -35,44 +35,32 @@ export default function Picker({
|
||||
customState,
|
||||
savePresets = true,
|
||||
}: PickerProps) {
|
||||
const [customThemeColor, setCustomThemeColor] = useState<string | null>();
|
||||
const [presets, setPresets] = useState<string[]>();
|
||||
const [customThemeColor, setCustomThemeColor] = useState<string | null>()
|
||||
const [presets, setPresets] = useState<string[]>()
|
||||
|
||||
const latestValuesRef = useRef({
|
||||
customThemeColor,
|
||||
customOnChange,
|
||||
savePresets,
|
||||
presets,
|
||||
});
|
||||
const latestValuesRef = useRef({ customThemeColor, customOnChange, savePresets, presets });
|
||||
|
||||
useEffect(() => {
|
||||
if (customState !== undefined && customState !== null) {
|
||||
setCustomThemeColor(customState);
|
||||
setCustomThemeColor(customState)
|
||||
} else {
|
||||
setCustomThemeColor(settingsState.selectedColor ?? null);
|
||||
setCustomThemeColor(settingsState.selectedColor ?? null)
|
||||
}
|
||||
|
||||
if (presets === undefined) {
|
||||
const savedPresets = localStorage.getItem("colorPickerPresets");
|
||||
setPresets(savedPresets ? JSON.parse(savedPresets) : defaultPresets);
|
||||
const savedPresets = localStorage.getItem("colorPickerPresets")
|
||||
setPresets(savedPresets ? JSON.parse(savedPresets) : defaultPresets)
|
||||
}
|
||||
}, []);
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
latestValuesRef.current = {
|
||||
customThemeColor,
|
||||
customOnChange,
|
||||
savePresets,
|
||||
presets,
|
||||
};
|
||||
latestValuesRef.current = { customThemeColor, customOnChange, savePresets, presets };
|
||||
}, [customThemeColor, customOnChange, savePresets, presets]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
const { customThemeColor, customOnChange, savePresets, presets } =
|
||||
latestValuesRef.current;
|
||||
if (!(customThemeColor && !customOnChange && savePresets && presets))
|
||||
return;
|
||||
const { customThemeColor, customOnChange, savePresets, presets } = latestValuesRef.current;
|
||||
if (!(customThemeColor && !customOnChange && savePresets && presets)) return;
|
||||
|
||||
// Only proceed if presets are different (avoid unnecessary updates)
|
||||
const existingIndex = presets.indexOf(customThemeColor);
|
||||
@@ -91,18 +79,15 @@ export default function Picker({
|
||||
updatedPresets = [customThemeColor, ...presets].slice(0, 18);
|
||||
}
|
||||
|
||||
localStorage.setItem(
|
||||
"colorPickerPresets",
|
||||
JSON.stringify(updatedPresets),
|
||||
);
|
||||
};
|
||||
}, []);
|
||||
localStorage.setItem("colorPickerPresets", JSON.stringify(updatedPresets));
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (customThemeColor && !customOnChange) {
|
||||
settingsState.selectedColor = customThemeColor;
|
||||
settingsState.selectedColor = customThemeColor
|
||||
}
|
||||
}, [customThemeColor, customOnChange]);
|
||||
}, [customThemeColor, customOnChange])
|
||||
|
||||
return (
|
||||
<ColorPicker
|
||||
@@ -112,12 +97,12 @@ export default function Picker({
|
||||
value={customThemeColor ?? ""}
|
||||
onChange={(color: string) => {
|
||||
if (customOnChange) {
|
||||
customOnChange(color);
|
||||
setCustomThemeColor(color);
|
||||
customOnChange(color)
|
||||
setCustomThemeColor(color)
|
||||
} else {
|
||||
setCustomThemeColor(color);
|
||||
setCustomThemeColor(color)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,227 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { isValidHotkey, parseHotkey } from '@/plugins/built-in/globalSearch/src/utils/hotkeyUtils';
|
||||
|
||||
let { value, onChange } = $props<{
|
||||
value: string,
|
||||
onChange: (newValue: string) => void
|
||||
}>();
|
||||
|
||||
let isRecording = $state(false);
|
||||
let recordedKeys = $state<Set<string>>(new Set());
|
||||
let inputElement = $state<HTMLInputElement>();
|
||||
|
||||
const formatKeyForHotkey = (key: string): string => {
|
||||
// Map special keys to their hotkey format
|
||||
const keyMap: Record<string, string> = {
|
||||
'Control': 'ctrl',
|
||||
'Meta': 'cmd',
|
||||
'Alt': 'alt',
|
||||
'Shift': 'shift',
|
||||
' ': 'space',
|
||||
'ArrowUp': 'up',
|
||||
'ArrowDown': 'down',
|
||||
'ArrowLeft': 'left',
|
||||
'ArrowRight': 'right',
|
||||
'Escape': 'esc',
|
||||
'Enter': 'enter',
|
||||
'Tab': 'tab',
|
||||
'Backspace': 'backspace',
|
||||
'Delete': 'delete',
|
||||
};
|
||||
|
||||
return keyMap[key] || key.toLowerCase();
|
||||
};
|
||||
|
||||
const formatKeyForDisplay = (key: string): string => {
|
||||
// Map keys to their display format
|
||||
const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
|
||||
const keyMap: Record<string, string> = {
|
||||
'ctrl': isMac ? '⌃' : 'Ctrl',
|
||||
'cmd': '⌘',
|
||||
'meta': '⌘',
|
||||
'alt': isMac ? '⌥' : 'Alt',
|
||||
'shift': isMac ? '⇧' : 'Shift',
|
||||
'space': 'Space',
|
||||
'up': '↑',
|
||||
'down': '↓',
|
||||
'left': '←',
|
||||
'right': '→',
|
||||
'esc': 'Esc',
|
||||
'enter': 'Enter',
|
||||
'tab': 'Tab',
|
||||
'backspace': 'Backspace',
|
||||
'delete': 'Delete',
|
||||
};
|
||||
|
||||
return keyMap[key.toLowerCase()] || key.toUpperCase();
|
||||
};
|
||||
|
||||
const getHotkeyParts = (hotkeyString: string): string[] => {
|
||||
if (!hotkeyString || !isValidHotkey(hotkeyString)) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const parsed = parseHotkey(hotkeyString);
|
||||
const parts: string[] = [];
|
||||
|
||||
// Add modifiers in a consistent order
|
||||
if (parsed.ctrl) parts.push('ctrl');
|
||||
if (parsed.meta) parts.push('cmd');
|
||||
if (parsed.alt) parts.push('alt');
|
||||
if (parsed.shift) parts.push('shift');
|
||||
|
||||
// Add the main key
|
||||
if (parsed.key) parts.push(parsed.key);
|
||||
|
||||
return parts;
|
||||
};
|
||||
|
||||
const startRecording = () => {
|
||||
isRecording = true;
|
||||
recordedKeys.clear();
|
||||
inputElement?.focus();
|
||||
};
|
||||
|
||||
const stopRecording = () => {
|
||||
if (recordedKeys.size > 0) {
|
||||
if (recordedKeys.has('esc')) {
|
||||
onChange('');
|
||||
isRecording = false;
|
||||
recordedKeys.clear();
|
||||
inputElement?.blur();
|
||||
return;
|
||||
}
|
||||
|
||||
// Build the hotkey string
|
||||
const modifiers: string[] = [];
|
||||
let mainKey = '';
|
||||
|
||||
for (const key of recordedKeys) {
|
||||
if (['ctrl', 'cmd', 'alt', 'shift'].includes(key)) {
|
||||
modifiers.push(key);
|
||||
} else {
|
||||
mainKey = key;
|
||||
}
|
||||
}
|
||||
|
||||
if (mainKey) {
|
||||
const hotkeyString = [...modifiers, mainKey].join('+');
|
||||
if (isValidHotkey(hotkeyString)) {
|
||||
onChange(hotkeyString);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
isRecording = false;
|
||||
recordedKeys.clear();
|
||||
inputElement?.blur();
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (!isRecording) return;
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const key = formatKeyForHotkey(e.key);
|
||||
|
||||
// Add modifiers
|
||||
if (e.ctrlKey) recordedKeys.add('ctrl');
|
||||
if (e.metaKey) recordedKeys.add('cmd');
|
||||
if (e.altKey) recordedKeys.add('alt');
|
||||
if (e.shiftKey) recordedKeys.add('shift');
|
||||
|
||||
// Add the main key (ignore modifier keys themselves)
|
||||
if (!['ctrl', 'cmd', 'alt', 'shift'].includes(key)) {
|
||||
recordedKeys.add(key);
|
||||
}
|
||||
|
||||
// Auto-stop recording if we have a main key
|
||||
if (!['ctrl', 'cmd', 'alt', 'shift'].includes(key)) {
|
||||
setTimeout(stopRecording, 100);
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyUp = (e: KeyboardEvent) => {
|
||||
if (!isRecording) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
};
|
||||
|
||||
const handleBlur = () => {
|
||||
if (isRecording) {
|
||||
stopRecording();
|
||||
}
|
||||
};
|
||||
|
||||
$effect(() => {
|
||||
if (isRecording && inputElement) {
|
||||
inputElement.focus();
|
||||
}
|
||||
});
|
||||
|
||||
// Get the parts to display
|
||||
const hotkeyParts = $derived(isRecording
|
||||
? Array.from(recordedKeys).map(formatKeyForDisplay)
|
||||
: getHotkeyParts(value).map(formatKeyForDisplay));
|
||||
</script>
|
||||
|
||||
<div class="flex gap-2 items-center">
|
||||
<div class="relative">
|
||||
{#if isRecording}
|
||||
<!-- Recording state -->
|
||||
<div
|
||||
class="flex items-center justify-center px-3 py-1.5 text-sm rounded-md dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 dark:text-white border cursor-pointer text-nowrap"
|
||||
onclick={startRecording}
|
||||
onkeydown={startRecording}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Press keys...
|
||||
</div>
|
||||
{:else if hotkeyParts.length > 0}
|
||||
<!-- Display current hotkey -->
|
||||
<div
|
||||
class="flex gap-1 items-center text-sm rounded-md border-none cursor-pointer dark:text-white"
|
||||
onclick={startRecording}
|
||||
onkeydown={startRecording}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
{#each hotkeyParts as part}
|
||||
<div class="size-8 text-sm flex items-center justify-center rounded-md border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30">
|
||||
{part}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Empty state -->
|
||||
<div
|
||||
class="flex items-center justify-center px-3 py-2 text-sm rounded-md dark:bg-[#38373D]/50 bg-[#DDDDDD] dark:text-white border-none cursor-pointer text-nowrap"
|
||||
onclick={startRecording}
|
||||
onkeydown={startRecording}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<span class="text-gray-500 dark:text-gray-400">Click to set</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Hidden input for focus management -->
|
||||
<input
|
||||
bind:this={inputElement}
|
||||
type="text"
|
||||
readonly
|
||||
class="absolute inset-0 opacity-0 pointer-events-none"
|
||||
onkeydown={handleKeyDown}
|
||||
onkeyup={handleKeyUp}
|
||||
onblur={handleBlur}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
input:focus {
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
@@ -8,5 +8,5 @@
|
||||
aria-label="Color Picker Swatch"
|
||||
onclick={onClick}
|
||||
style="background: {$settingsState.selectedColor}"
|
||||
class="w-16 h-8 rounded-md shadow-2xl ring-[1px] ring-[#DDDDDD]/30 dark:ring-[#38373D]/30"
|
||||
class="w-16 h-8 rounded-md"
|
||||
></button>
|
||||
@@ -8,17 +8,15 @@
|
||||
let select: HTMLSelectElement;
|
||||
</script>
|
||||
|
||||
<div class="border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 shadow-2xl rounded-lg w-full overflow-clip">
|
||||
<select
|
||||
<select
|
||||
bind:this={select}
|
||||
value={state}
|
||||
onchange={() => onChange(select.value)}
|
||||
class="px-4 py-1 text-[0.75rem] dark:text-white w-full border-none bg-transparent focus:ring-0 focus:bg-white/20 dark:focus:bg-black/10"
|
||||
>
|
||||
class="px-4 py-1 text-[0.75rem] dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white rounded-md w-full"
|
||||
>
|
||||
{#each options as option}
|
||||
<option value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</select>
|
||||
|
||||
@@ -16,9 +16,9 @@
|
||||
max={max}
|
||||
step={step}
|
||||
bind:value={state}
|
||||
style={`background: linear-gradient(to right, #30d259ad 0%, #30D259 ${percentage}%, #dddddd ${percentage}%)`}
|
||||
style={`background: linear-gradient(to right, #30D259 ${percentage}%, #dddddd ${percentage}%)`}
|
||||
onchange={(e) => onChange(Number(e.currentTarget.value))}
|
||||
class="w-full h-1 rounded-full appearance-none cursor-pointer slider"
|
||||
class="w-full h-1 rounded-full appearance-none cursor-pointer dark:bg-[#38373D] bg-[#DDDDDD] slider"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -38,7 +38,6 @@
|
||||
height: 24px;
|
||||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
|
||||
background: white;
|
||||
color: #30d259ad;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.dark .switch[data-ison="true"],
|
||||
.switch[data-ison="true"] {
|
||||
background-color: #30d259;
|
||||
background-color: #30D259;
|
||||
}
|
||||
@@ -30,7 +30,8 @@
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="flex w-14 p-1 cursor-pointer transition-all duration-150 rounded-full bg-gradient-to-tr select-none shadow-2xl ring-[1px] ring-[#DDDDDD]/30 dark:ring-[#38373D]/30 {state ? 'to-[#30D259]/80 from-[#30D259] dark:from-[#30D259]/40 dark:to-[#30D259]' : 'dark:from-[#38373D]/50 dark:to-[#38373D] to-[#DDDDDD]/50 from-[#DDDDDD]'}"
|
||||
class="flex w-14 p-1 cursor-pointer transition-all duration-150 rounded-full dark:bg-[#38373D] bg-[#DDDDDD] switch select-none"
|
||||
data-ison={state}
|
||||
onclick={() => onChange(!state)}
|
||||
onkeydown={(e) => e.key === "Enter" && onChange(!state)}
|
||||
role="switch"
|
||||
@@ -42,3 +43,9 @@
|
||||
class="w-6 h-6 bg-white dark:bg-[#FEFEFE] rounded-full drop-shadow-md"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.switch[data-ison="true"] {
|
||||
background-color: #30D259;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -43,7 +43,7 @@
|
||||
<div class="top-0 z-10 text-[0.875rem] pb-0.5 mx-4 px-2 tab-width-container">
|
||||
<div bind:this={containerRef} class="flex relative">
|
||||
<MotionDiv
|
||||
class="absolute top-0 left-0 z-0 h-full bg-gradient-to-tr dark:from-[#38373D]/80 dark:to-[#38373D] from-[#DDDDDD]/80 to-[#DDDDDD] rounded-full opacity-40 tab-width"
|
||||
class="absolute top-0 left-0 z-0 h-full bg-[#DDDDDD] dark:bg-[#38373D] rounded-full opacity-40 tab-width"
|
||||
animate={{ x: calcXPos(activeTab) }}
|
||||
transition={springTransition}
|
||||
/>
|
||||
@@ -65,9 +65,8 @@
|
||||
>
|
||||
<div class="flex">
|
||||
{#each tabs as { Content, props }, index}
|
||||
<div class="absolute focus:outline-none w-full pt-2 transition-opacity duration-300 overflow-y-scroll no-scrollbar pb-2 h-full tab {activeTab === index ? 'opacity-100 active' : 'opacity-0'}"
|
||||
<div class="absolute focus:outline-none w-full transition-opacity duration-300 overflow-y-scroll no-scrollbar h-full tab {activeTab === index ? 'opacity-100 active' : 'opacity-0'}"
|
||||
style="left: {index * 100}%;">
|
||||
<div style="left: {index * 100}%;" class="fixed top-0 w-full h-8 bg-gradient-to-b to-transparent pointer-events-none z-[100] from-white dark:from-zinc-800 dark:to-transparent"></div>
|
||||
<Content {...props} />
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
@@ -14,14 +14,12 @@
|
||||
let isDragging = $state(false);
|
||||
let tempTheme = $state(null);
|
||||
|
||||
const handleThemeClick = async (theme: CustomTheme, e: MouseEvent) => {
|
||||
const handleThemeClick = async (theme: CustomTheme) => {
|
||||
if (isEditMode) return;
|
||||
if (theme.id === themes?.selectedTheme) {
|
||||
themeManager.setTransitionPoint(e.clientX, e.clientY);
|
||||
await themeManager.disableTheme();
|
||||
themes.selectedTheme = '';
|
||||
} else {
|
||||
themeManager.setTransitionPoint(e.clientX, e.clientY);
|
||||
await themeManager.setTheme(theme.id);
|
||||
if (!themes) return;
|
||||
themes.selectedTheme = theme.id;
|
||||
@@ -129,7 +127,7 @@
|
||||
{#each themes.themes as theme (theme.id)}
|
||||
<button
|
||||
class="relative group w-full aspect-theme flex justify-center items-center rounded-xl transition ring dark:ring-white ring-zinc-300 {theme.id === themes.selectedTheme ? 'dark:ring-2 ring-4' : 'ring-0'}"
|
||||
onclick={(e) => handleThemeClick(theme, e)}
|
||||
onclick={() => handleThemeClick(theme)}
|
||||
>
|
||||
{#if isEditMode}
|
||||
<div
|
||||
|
||||
@@ -1,20 +1,8 @@
|
||||
import { type DBSchema, type IDBPDatabase, openDB } from "idb";
|
||||
import { type DBSchema, type IDBPDatabase, openDB } from 'idb';
|
||||
|
||||
/**
|
||||
* Defines the schema for the IndexedDB database used for storing background image data.
|
||||
*
|
||||
* @interface BackgroundDB
|
||||
* @extends {DBSchema}
|
||||
* @property {object} backgrounds - The object store for background images.
|
||||
* @property {string} backgrounds.key - The type of the key for the object store (in this case, it's `id` as defined in `keyPath`).
|
||||
* @property {object} backgrounds.value - The structure of the objects stored.
|
||||
* @property {string} backgrounds.value.id - The unique identifier for the background image record.
|
||||
* @property {string} backgrounds.value.type - The MIME type of the image (e.g., "image/png", "image/jpeg").
|
||||
* @property {Blob} backgrounds.value.blob - The binary large object (Blob) containing the image data.
|
||||
*/
|
||||
interface BackgroundDB extends DBSchema {
|
||||
backgrounds: {
|
||||
key: string; // Corresponds to the 'id' property due to keyPath: "id"
|
||||
key: string;
|
||||
value: {
|
||||
id: string;
|
||||
type: string;
|
||||
@@ -25,100 +13,43 @@ interface BackgroundDB extends DBSchema {
|
||||
|
||||
let db: IDBPDatabase<BackgroundDB> | null = null;
|
||||
|
||||
/**
|
||||
* Initializes and opens an IndexedDB connection or returns an existing one.
|
||||
* If the database doesn't exist or needs an upgrade, the `upgrade` callback
|
||||
* creates the 'backgrounds' object store with 'id' as the keyPath.
|
||||
*
|
||||
* @async
|
||||
* @returns {Promise<IDBPDatabase<BackgroundDB>>} A promise that resolves with the database instance.
|
||||
*/
|
||||
export async function openDatabase(): Promise<IDBPDatabase<BackgroundDB>> {
|
||||
if (db) return db;
|
||||
|
||||
db = await openDB<BackgroundDB>("BackgroundDB", 1, {
|
||||
db = await openDB<BackgroundDB>('BackgroundDB', 1, {
|
||||
upgrade(db: IDBPDatabase<BackgroundDB>) {
|
||||
db.createObjectStore("backgrounds", { keyPath: "id" });
|
||||
db.createObjectStore('backgrounds', { keyPath: 'id' });
|
||||
},
|
||||
});
|
||||
|
||||
return db;
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieves all background image records from the 'backgrounds' object store in IndexedDB.
|
||||
*
|
||||
* @async
|
||||
* @returns {Promise<Array<{id: string, type: string, blob: Blob}>>} A promise that resolves with an array of all background image records.
|
||||
*/
|
||||
export async function readAllData(): Promise<
|
||||
Array<{ id: string; type: string; blob: Blob }>
|
||||
> {
|
||||
export async function readAllData(): Promise<Array<{ id: string; type: string; blob: Blob }>> {
|
||||
const db = await openDatabase();
|
||||
return db.getAll("backgrounds");
|
||||
return db.getAll('backgrounds');
|
||||
}
|
||||
|
||||
/**
|
||||
* Writes or updates a background image record in the 'backgrounds' object store.
|
||||
* If a record with the given `id` already exists, it will be updated. Otherwise, a new record is created.
|
||||
*
|
||||
* @async
|
||||
* @param {string} id - The unique identifier for the background image record.
|
||||
* @param {string} type - The MIME type of the image (e.g., "image/png").
|
||||
* @param {Blob} blob - The Blob object containing the image data.
|
||||
* @returns {Promise<void>} A promise that resolves when the data has been successfully written.
|
||||
*/
|
||||
export async function writeData(
|
||||
id: string,
|
||||
type: string,
|
||||
blob: Blob,
|
||||
): Promise<void> {
|
||||
export async function writeData(id: string, type: string, blob: Blob): Promise<void> {
|
||||
const db = await openDatabase();
|
||||
await db.put("backgrounds", { id, type, blob });
|
||||
await db.put('backgrounds', { id, type, blob });
|
||||
}
|
||||
|
||||
/**
|
||||
* Deletes a background image record from the 'backgrounds' object store by its ID.
|
||||
*
|
||||
* @async
|
||||
* @param {string} id - The unique identifier of the background image record to delete.
|
||||
* @returns {Promise<void>} A promise that resolves when the data has been successfully deleted.
|
||||
*/
|
||||
export async function deleteData(id: string): Promise<void> {
|
||||
const db = await openDatabase();
|
||||
await db.delete("backgrounds", id);
|
||||
await db.delete('backgrounds', id);
|
||||
}
|
||||
|
||||
/**
|
||||
* Clears all records from the 'backgrounds' object store in IndexedDB.
|
||||
*
|
||||
* @async
|
||||
* @returns {Promise<void>} A promise that resolves when all data has been successfully cleared.
|
||||
*/
|
||||
export async function clearAllData(): Promise<void> {
|
||||
const db = await openDatabase();
|
||||
await db.clear("backgrounds");
|
||||
await db.clear('backgrounds');
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieves a single background image record from the 'backgrounds' object store by its ID.
|
||||
*
|
||||
* @async
|
||||
* @param {string} id - The unique identifier of the background image record to retrieve.
|
||||
* @returns {Promise<{id: string, type: string, blob: Blob} | undefined>} A promise that resolves with the
|
||||
* background image record if found, or undefined otherwise.
|
||||
*/
|
||||
export async function getDataById(
|
||||
id: string,
|
||||
): Promise<{ id: string; type: string; blob: Blob } | undefined> {
|
||||
export async function getDataById(id: string): Promise<{ id: string; type: string; blob: Blob } | undefined> {
|
||||
const db = await openDatabase();
|
||||
return db.get("backgrounds", id);
|
||||
return db.get('backgrounds', id);
|
||||
}
|
||||
|
||||
/**
|
||||
* Closes the active IndexedDB connection and nullifies the global `db` variable.
|
||||
* This is important to release resources and allow for proper database management.
|
||||
*/
|
||||
export function closeDatabase(): void {
|
||||
if (db) {
|
||||
db.close();
|
||||
@@ -126,31 +57,17 @@ export function closeDatabase(): void {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if IndexedDB is supported by the current browser environment.
|
||||
*
|
||||
* @returns {boolean} True if IndexedDB is supported, false otherwise.
|
||||
*/
|
||||
// Helper function to check if IndexedDB is supported
|
||||
export function isIndexedDBSupported(): boolean {
|
||||
return "indexedDB" in window;
|
||||
return 'indexedDB' in window;
|
||||
}
|
||||
|
||||
/**
|
||||
* Estimates available storage space and checks if it's sufficient for the specified `requiredSpace`.
|
||||
* Uses the `navigator.storage.estimate()` API if available.
|
||||
* If the API is not available or cannot determine space, it defaults to assuming enough space is available.
|
||||
*
|
||||
* @async
|
||||
* @param {number} requiredSpace - The amount of storage space required, in bytes.
|
||||
* @returns {Promise<boolean>} A promise that resolves with true if enough space is estimated to be available, false otherwise.
|
||||
*/
|
||||
export async function hasEnoughStorageSpace(
|
||||
requiredSpace: number,
|
||||
): Promise<boolean> {
|
||||
if ("storage" in navigator && "estimate" in navigator.storage) {
|
||||
// Helper function to check if there's enough storage space
|
||||
export async function hasEnoughStorageSpace(requiredSpace: number): Promise<boolean> {
|
||||
if ('storage' in navigator && 'estimate' in navigator.storage) {
|
||||
const { quota, usage } = await navigator.storage.estimate();
|
||||
if (quota !== undefined && usage !== undefined) {
|
||||
return quota - usage > requiredSpace;
|
||||
return (quota - usage) > requiredSpace;
|
||||
}
|
||||
}
|
||||
// If we can't determine, assume there's enough space
|
||||
|
||||
@@ -1,21 +1,11 @@
|
||||
type BackgroundUpdateCallback = () => void;
|
||||
|
||||
/**
|
||||
* A singleton class used to notify listeners about generic background updates or events.
|
||||
* These updates typically signify that UI components or other parts of the application
|
||||
* might need to refresh or re-evaluate background-related data (e.g., after a new background
|
||||
* image is added, removed, or changed).
|
||||
*/
|
||||
class BackgroundUpdates {
|
||||
private static instance: BackgroundUpdates;
|
||||
private listeners: Set<BackgroundUpdateCallback> = new Set();
|
||||
|
||||
private constructor() {}
|
||||
|
||||
/**
|
||||
* Gets the singleton instance of the BackgroundUpdates class.
|
||||
* @returns {BackgroundUpdates} The singleton instance.
|
||||
*/
|
||||
public static getInstance(): BackgroundUpdates {
|
||||
if (!BackgroundUpdates.instance) {
|
||||
BackgroundUpdates.instance = new BackgroundUpdates();
|
||||
@@ -23,33 +13,16 @@ class BackgroundUpdates {
|
||||
return BackgroundUpdates.instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers a callback function to be invoked when a background update is triggered.
|
||||
*
|
||||
* @param {BackgroundUpdateCallback} callback The function to call when a background update occurs.
|
||||
* This callback takes no arguments and returns void.
|
||||
*/
|
||||
public addListener(callback: BackgroundUpdateCallback): void {
|
||||
this.listeners.add(callback);
|
||||
}
|
||||
|
||||
/**
|
||||
* Unregisters a previously added callback function.
|
||||
* After calling this method, the provided callback will no longer be invoked when a background update is triggered.
|
||||
*
|
||||
* @param {BackgroundUpdateCallback} callback The callback function to remove from the listeners.
|
||||
*/
|
||||
public removeListener(callback: BackgroundUpdateCallback): void {
|
||||
this.listeners.delete(callback);
|
||||
}
|
||||
|
||||
/**
|
||||
* Invokes all registered listener callbacks, signifying that a background update has occurred.
|
||||
* This method should be called whenever a change to background data happens that requires
|
||||
* other parts of the application to be notified.
|
||||
*/
|
||||
public triggerUpdate(): void {
|
||||
this.listeners.forEach((callback) => callback());
|
||||
this.listeners.forEach(callback => callback());
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ type SettingsPopupCallback = () => void;
|
||||
* settingsPopup.addListener(() => {
|
||||
* console.log('Settings popup closed');
|
||||
* });
|
||||
*/
|
||||
*/
|
||||
class SettingsPopup {
|
||||
private static instance: SettingsPopup;
|
||||
private listeners: Set<SettingsPopupCallback> = new Set();
|
||||
@@ -21,32 +21,16 @@ class SettingsPopup {
|
||||
return SettingsPopup.instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers a callback function to be invoked when the settings popup is closed.
|
||||
*
|
||||
* @param {SettingsPopupCallback} callback The function to call when the settings popup closes.
|
||||
* This callback takes no arguments and returns void.
|
||||
*/
|
||||
public addListener(callback: SettingsPopupCallback): void {
|
||||
this.listeners.add(callback);
|
||||
}
|
||||
|
||||
/**
|
||||
* Unregisters a previously added callback function.
|
||||
* After calling this method, the provided callback will no longer be invoked when the settings popup closes.
|
||||
*
|
||||
* @param {SettingsPopupCallback} callback The callback function to remove from the listeners.
|
||||
*/
|
||||
public removeListener(callback: SettingsPopupCallback): void {
|
||||
this.listeners.delete(callback);
|
||||
}
|
||||
|
||||
/**
|
||||
* Invokes all registered listener callbacks.
|
||||
* This method should be called when the settings popup is closed to notify all subscribed components or services.
|
||||
*/
|
||||
public triggerClose(): void {
|
||||
this.listeners.forEach((callback) => callback());
|
||||
this.listeners.forEach(callback => callback());
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,21 +1,11 @@
|
||||
type ThemeUpdateCallback = () => void;
|
||||
|
||||
/**
|
||||
* A singleton class used to notify listeners about theme-related updates.
|
||||
* These updates can include events like theme changes, custom theme modifications,
|
||||
* or any other event that might require UI components to refresh their appearance
|
||||
* or re-apply theme styles.
|
||||
*/
|
||||
class ThemeUpdates {
|
||||
private static instance: ThemeUpdates;
|
||||
private listeners: Set<ThemeUpdateCallback> = new Set();
|
||||
|
||||
private constructor() {}
|
||||
|
||||
/**
|
||||
* Gets the singleton instance of the ThemeUpdates class.
|
||||
* @returns {ThemeUpdates} The singleton instance.
|
||||
*/
|
||||
public static getInstance(): ThemeUpdates {
|
||||
if (!ThemeUpdates.instance) {
|
||||
ThemeUpdates.instance = new ThemeUpdates();
|
||||
@@ -23,33 +13,16 @@ class ThemeUpdates {
|
||||
return ThemeUpdates.instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers a callback function to be invoked when a theme update is triggered.
|
||||
*
|
||||
* @param {ThemeUpdateCallback} callback The function to call when a theme update occurs.
|
||||
* This callback takes no arguments and returns void.
|
||||
*/
|
||||
public addListener(callback: ThemeUpdateCallback): void {
|
||||
this.listeners.add(callback);
|
||||
}
|
||||
|
||||
/**
|
||||
* Unregisters a previously added callback function.
|
||||
* After calling this method, the provided callback will no longer be invoked when a theme update is triggered.
|
||||
*
|
||||
* @param {ThemeUpdateCallback} callback The callback function to remove from the listeners.
|
||||
*/
|
||||
public removeListener(callback: ThemeUpdateCallback): void {
|
||||
this.listeners.delete(callback);
|
||||
}
|
||||
|
||||
/**
|
||||
* Invokes all registered listener callbacks, signifying that a theme-related update has occurred.
|
||||
* This method should be called whenever a change related to themes happens that requires
|
||||
* other parts of the application to be notified.
|
||||
*/
|
||||
public triggerUpdate(): void {
|
||||
this.listeners.forEach((callback) => callback());
|
||||
this.listeners.forEach(callback => callback());
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "./components/ColourPicker.css";
|
||||
@import './components/ColourPicker.css';
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<title>BetterSEQTA+ Settings</title>
|
||||
</head>
|
||||
<body class="h-[600px]">
|
||||
<div id="app" style="height: 100%"></div>
|
||||
<div id="app" style="height: 100%;"></div>
|
||||
<script type="module" src="./index.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
+15
-20
@@ -1,34 +1,29 @@
|
||||
import "./index.css";
|
||||
import Settings from "./pages/settings.svelte";
|
||||
import IconFamily from "@/resources/fonts/IconFamily.woff";
|
||||
import browser from "webextension-polyfill";
|
||||
import renderSvelte from "./main";
|
||||
import { initializeSettingsState } from "@/seqta/utils/listeners/SettingsState";
|
||||
import "./index.css"
|
||||
import Settings from "./pages/settings.svelte"
|
||||
import IconFamily from '@/resources/fonts/IconFamily.woff'
|
||||
import browser from "webextension-polyfill"
|
||||
import renderSvelte from "./main"
|
||||
|
||||
function InjectCustomIcons() {
|
||||
console.info("[BetterSEQTA+] Injecting Icons");
|
||||
console.info('[BetterSEQTA+] Injecting Icons')
|
||||
|
||||
const style = document.createElement("style");
|
||||
style.setAttribute("type", "text/css");
|
||||
const style = document.createElement('style')
|
||||
style.setAttribute('type', 'text/css')
|
||||
style.innerHTML = `
|
||||
@font-face {
|
||||
font-family: 'IconFamily';
|
||||
src: url('${browser.runtime.getURL(IconFamily)}') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}`;
|
||||
document.head.appendChild(style);
|
||||
}`
|
||||
document.head.appendChild(style)
|
||||
}
|
||||
|
||||
const mountPoint = document.getElementById("app");
|
||||
const mountPoint = document.getElementById('app')
|
||||
if (!mountPoint) {
|
||||
console.error("Mount point #app not found");
|
||||
throw new Error("Mount point #app not found");
|
||||
console.error('Mount point #app not found')
|
||||
throw new Error('Mount point #app not found')
|
||||
}
|
||||
|
||||
InjectCustomIcons();
|
||||
|
||||
(async () => {
|
||||
await initializeSettingsState();
|
||||
renderSvelte(Settings, mountPoint, { standalone: true });
|
||||
})();
|
||||
InjectCustomIcons()
|
||||
renderSvelte(Settings, mountPoint, { standalone: true })
|
||||
Vendored
+1
-1
@@ -1,4 +1,4 @@
|
||||
import "./index.css";
|
||||
import './index.css';
|
||||
|
||||
declare module "*.png";
|
||||
declare module "*.svg";
|
||||
|
||||
+8
-10
@@ -1,6 +1,6 @@
|
||||
import { mount } from "svelte";
|
||||
import type { SvelteComponent } from "svelte";
|
||||
import style from "./index.css?inline";
|
||||
import { mount } from "svelte"
|
||||
import type { SvelteComponent } from "svelte"
|
||||
import style from './index.css?inline'
|
||||
|
||||
export default function renderSvelte(
|
||||
Component: SvelteComponent | any,
|
||||
@@ -13,13 +13,11 @@ export default function renderSvelte(
|
||||
standalone: false,
|
||||
...props,
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
if (mountPoint instanceof ShadowRoot) {
|
||||
const styleElement = document.createElement("style");
|
||||
styleElement.textContent = style;
|
||||
mountPoint.appendChild(styleElement);
|
||||
}
|
||||
const styleElement = document.createElement('style')
|
||||
styleElement.textContent = style
|
||||
mountPoint.appendChild(styleElement)
|
||||
|
||||
return app;
|
||||
return app
|
||||
}
|
||||
|
||||
@@ -1,44 +1,43 @@
|
||||
<script lang="ts">
|
||||
import TabbedContainer from "../components/TabbedContainer.svelte";
|
||||
import Settings from "./settings/general.svelte";
|
||||
import Shortcuts from "./settings/shortcuts.svelte";
|
||||
import Theme from "./settings/theme.svelte";
|
||||
import browser from "webextension-polyfill";
|
||||
import TabbedContainer from '../components/TabbedContainer.svelte';
|
||||
import Settings from './settings/general.svelte';
|
||||
import Shortcuts from './settings/shortcuts.svelte';
|
||||
import Theme from './settings/theme.svelte';
|
||||
import browser from 'webextension-polyfill';
|
||||
|
||||
import { standalone as StandaloneStore } from "../utils/standalone.svelte";
|
||||
import { onMount } from "svelte";
|
||||
import { settingsState } from "@/seqta/utils/listeners/SettingsState";
|
||||
import { standalone as StandaloneStore } from '../utils/standalone.svelte';
|
||||
import { onMount } from 'svelte'
|
||||
import { initializeSettingsState, settingsState } from '@/seqta/utils/listeners/SettingsState'
|
||||
|
||||
import { closeExtensionPopup } from "@/seqta/utils/Closers/closeExtensionPopup";
|
||||
import { OpenAboutPage } from "@/seqta/utils/Openers/OpenAboutPage";
|
||||
import { OpenWhatsNewPopup } from "@/seqta/utils/Whatsnew";
|
||||
import { OpenMinecraftServerPopup } from "@/seqta/utils/AboutMinecraftServer";
|
||||
import { closeExtensionPopup } from "@/seqta/utils/Closers/closeExtensionPopup"
|
||||
import { OpenAboutPage } from "@/seqta/utils/Openers/OpenAboutPage"
|
||||
import { OpenWhatsNewPopup } from "@/seqta/utils/Whatsnew"
|
||||
|
||||
import ColourPicker from "../components/ColourPicker.svelte";
|
||||
import { settingsPopup } from "../hooks/SettingsPopup";
|
||||
import ColourPicker from '../components/ColourPicker.svelte'
|
||||
import { settingsPopup } from '../hooks/SettingsPopup'
|
||||
|
||||
let devModeSequence = "";
|
||||
let devModeSequence = '';
|
||||
|
||||
const handleDevModeToggle = () => {
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
devModeSequence += event.key.toLowerCase();
|
||||
if (devModeSequence.includes("dev")) {
|
||||
document.removeEventListener("keydown", handleKeyDown);
|
||||
if (devModeSequence.includes('dev')) {
|
||||
document.removeEventListener('keydown', handleKeyDown);
|
||||
settingsState.devMode = true;
|
||||
alert("Dev mode is now enabled");
|
||||
alert('Dev mode is now enabled');
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
setTimeout(() => {
|
||||
document.removeEventListener("keydown", handleKeyDown);
|
||||
devModeSequence = "";
|
||||
document.removeEventListener('keydown', handleKeyDown);
|
||||
devModeSequence = '';
|
||||
}, 10000);
|
||||
};
|
||||
|
||||
const openColourPicker = () => {
|
||||
showColourPicker = true;
|
||||
};
|
||||
}
|
||||
|
||||
const openChangelog = () => {
|
||||
OpenWhatsNewPopup();
|
||||
@@ -50,225 +49,45 @@
|
||||
closeExtensionPopup();
|
||||
};
|
||||
|
||||
const openMinecraftServer = () => {
|
||||
OpenMinecraftServerPopup();
|
||||
closeExtensionPopup();
|
||||
};
|
||||
|
||||
let { standalone } = $props<{ standalone?: boolean }>();
|
||||
let showColourPicker = $state<boolean>(false);
|
||||
|
||||
onMount(async () => {
|
||||
onMount(() => {
|
||||
settingsPopup.addListener(() => {
|
||||
showColourPicker = false;
|
||||
});
|
||||
|
||||
if (!standalone) return;
|
||||
initializeSettingsState();
|
||||
console.log('settingsState', $settingsState);
|
||||
StandaloneStore.setStandalone(true);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="w-[384px] no-scrollbar shadow-2xl {$settingsState.DarkMode
|
||||
? 'dark'
|
||||
: ''} {standalone ? 'h-[600px]' : 'h-full rounded-xl'} overflow-clip"
|
||||
>
|
||||
<div
|
||||
class="flex relative flex-col gap-2 h-full overflow-clip bg-white dark:bg-zinc-800 dark:text-white"
|
||||
>
|
||||
<div
|
||||
class="grid place-items-center border-b border-b-zinc-200/40 dark:border-b-zinc-700/40"
|
||||
>
|
||||
<div class="w-[384px] no-scrollbar shadow-2xl {$settingsState.DarkMode ? 'dark' : ''} { standalone ? 'h-[600px]' : 'h-full rounded-xl' } overflow-clip">
|
||||
<div class="flex relative flex-col gap-2 h-full overflow-clip bg-white dark:bg-zinc-800 dark:text-white">
|
||||
<div class="grid place-items-center border-b border-b-zinc-200/40">
|
||||
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<img
|
||||
src={browser.runtime.getURL(
|
||||
"resources/icons/betterseqta-dark-full.png",
|
||||
)}
|
||||
class="w-4/5 dark:hidden"
|
||||
alt="Light logo"
|
||||
onclick={handleDevModeToggle}
|
||||
/>
|
||||
<img src={browser.runtime.getURL('resources/icons/betterseqta-dark-full.png')} class="w-4/5 dark:hidden" alt="Light logo" onclick={handleDevModeToggle} />
|
||||
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<img
|
||||
src={browser.runtime.getURL(
|
||||
"resources/icons/betterseqta-light-full.png",
|
||||
)}
|
||||
class="hidden w-4/5 dark:block"
|
||||
alt="Dark logo"
|
||||
onclick={handleDevModeToggle}
|
||||
/>
|
||||
<img src={browser.runtime.getURL('resources/icons/betterseqta-light-full.png')} class="hidden w-4/5 dark:block" alt="Dark logo" onclick={handleDevModeToggle} />
|
||||
|
||||
{#if !standalone}
|
||||
<button
|
||||
onclick={openAbout}
|
||||
class="absolute top-1 right-[62px] w-8 h-8 text-lg rounded-xl font-IconFamily bg-zinc-100 dark:bg-zinc-700"
|
||||
>
|
||||
{"\ueb73"}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onclick={openChangelog}
|
||||
class="absolute top-1 right-10 w-8 h-8 text-lg rounded-xl font-IconFamily bg-zinc-100 dark:bg-zinc-700"
|
||||
>
|
||||
{"\ue929"}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onclick={openMinecraftServer}
|
||||
class="absolute top-1 right-1 w-8 h-8 bg-zinc-100 dark:bg-zinc-700 rounded-xl p-1"
|
||||
aria-label="Open Minecraft Server"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 64 70"
|
||||
fill="none"
|
||||
class="w-full h-full"
|
||||
>
|
||||
<path
|
||||
d="M0 0 C3.96 0 7.92 0 12 0 C12 3.96 12 7.92 12 12 C10.68 12 9.36 12 8 12 C8 10.68 8 9.36 8 8 C6.68 8 5.36 8 4 8 C4 6.68 4 5.36 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
|
||||
fill="currentColor"
|
||||
transform="translate(42,10)"
|
||||
/>
|
||||
<path
|
||||
d="M0 0 C1.32 0 2.64 0 4 0 C4 6.6 4 13.2 4 20 C2.68 20 1.36 20 0 20 C0 13.4 0 6.8 0 0 Z "
|
||||
fill="currentColor"
|
||||
transform="translate(54,22)"
|
||||
/>
|
||||
<path
|
||||
d="M0 0 C6.6 0 13.2 0 20 0 C20 1.32 20 2.64 20 4 C13.4 4 6.8 4 0 4 C0 2.68 0 1.36 0 0 Z "
|
||||
fill="currentColor"
|
||||
transform="translate(22,6)"
|
||||
/>
|
||||
<path
|
||||
d="M0 0 C1.32 0 2.64 0 4 0 C4 5.28 4 10.56 4 16 C2.68 16 1.36 16 0 16 C0 10.72 0 5.44 0 0 Z "
|
||||
fill="currentColor"
|
||||
transform="translate(46,26)"
|
||||
/>
|
||||
<path
|
||||
d="M0 0 C5.28 0 10.56 0 16 0 C16 1.32 16 2.64 16 4 C10.72 4 5.44 4 0 4 C0 2.68 0 1.36 0 0 Z "
|
||||
fill="currentColor"
|
||||
transform="translate(22,14)"
|
||||
/>
|
||||
<path
|
||||
d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C5.32 4 6.64 4 8 4 C8 5.32 8 6.64 8 8 C5.36 8 2.72 8 0 8 C0 5.36 0 2.72 0 0 Z "
|
||||
fill="currentColor"
|
||||
transform="translate(6,50)"
|
||||
/>
|
||||
<path
|
||||
d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
|
||||
fill="currentColor"
|
||||
transform="translate(14,50)"
|
||||
/>
|
||||
<path
|
||||
d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
|
||||
fill="currentColor"
|
||||
transform="translate(18,46)"
|
||||
/>
|
||||
<path
|
||||
d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
|
||||
fill="currentColor"
|
||||
transform="translate(10,46)"
|
||||
/>
|
||||
<path
|
||||
d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
|
||||
fill="currentColor"
|
||||
transform="translate(50,42)"
|
||||
/>
|
||||
<path
|
||||
d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
|
||||
fill="currentColor"
|
||||
transform="translate(22,42)"
|
||||
/>
|
||||
<path
|
||||
d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
|
||||
fill="currentColor"
|
||||
transform="translate(14,42)"
|
||||
/>
|
||||
<path
|
||||
d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
|
||||
fill="currentColor"
|
||||
transform="translate(26,38)"
|
||||
/>
|
||||
<path
|
||||
d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
|
||||
fill="currentColor"
|
||||
transform="translate(18,38)"
|
||||
/>
|
||||
<path
|
||||
d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
|
||||
fill="currentColor"
|
||||
transform="translate(30,34)"
|
||||
/>
|
||||
<path
|
||||
d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
|
||||
fill="currentColor"
|
||||
transform="translate(22,34)"
|
||||
/>
|
||||
<path
|
||||
d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
|
||||
fill="currentColor"
|
||||
transform="translate(34,30)"
|
||||
/>
|
||||
<path
|
||||
d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
|
||||
fill="currentColor"
|
||||
transform="translate(26,30)"
|
||||
/>
|
||||
<path
|
||||
d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
|
||||
fill="currentColor"
|
||||
transform="translate(38,26)"
|
||||
/>
|
||||
<path
|
||||
d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
|
||||
fill="currentColor"
|
||||
transform="translate(30,26)"
|
||||
/>
|
||||
<path
|
||||
d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
|
||||
fill="currentColor"
|
||||
transform="translate(42,22)"
|
||||
/>
|
||||
<path
|
||||
d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
|
||||
fill="currentColor"
|
||||
transform="translate(34,22)"
|
||||
/>
|
||||
<path
|
||||
d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
|
||||
fill="currentColor"
|
||||
transform="translate(38,18)"
|
||||
/>
|
||||
<path
|
||||
d="M0 0 C1.32 0 2.64 0 4 0 C4 1.32 4 2.64 4 4 C2.68 4 1.36 4 0 4 C0 2.68 0 1.36 0 0 Z "
|
||||
fill="currentColor"
|
||||
transform="translate(18,10)"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button onclick={openChangelog} class="absolute top-1 right-1 w-8 h-8 text-lg rounded-xl font-IconFamily bg-zinc-100 dark:bg-zinc-700">{'\ue929'}</button>
|
||||
<button onclick={openAbout} class="absolute top-1 right-10 w-8 h-8 text-lg rounded-xl font-IconFamily bg-zinc-100 dark:bg-zinc-700">{'\ueb73'}</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<TabbedContainer
|
||||
tabs={[
|
||||
{
|
||||
title: "Settings",
|
||||
Content: Settings,
|
||||
props: { showColourPicker: openColourPicker },
|
||||
},
|
||||
{ title: "Shortcuts", Content: Shortcuts },
|
||||
{ title: "Themes", Content: Theme },
|
||||
]}
|
||||
/>
|
||||
<TabbedContainer tabs={[
|
||||
{ title: 'Settings', Content: Settings, props: { showColourPicker: openColourPicker } },
|
||||
{ title: 'Shortcuts', Content: Shortcuts },
|
||||
{ title: 'Themes', Content: Theme },
|
||||
]} />
|
||||
</div>
|
||||
|
||||
{#if showColourPicker}
|
||||
<ColourPicker
|
||||
hidePicker={() => {
|
||||
showColourPicker = false;
|
||||
}}
|
||||
/>
|
||||
<ColourPicker hidePicker={() => { showColourPicker = false }} />
|
||||
{/if}
|
||||
</div>
|
||||
@@ -3,16 +3,16 @@
|
||||
import Button from "../../components/Button.svelte"
|
||||
import Slider from "../../components/Slider.svelte"
|
||||
import Select from "@/interface/components/Select.svelte"
|
||||
import HotkeyInput from "@/interface/components/HotkeyInput.svelte"
|
||||
|
||||
import browser from "webextension-polyfill"
|
||||
|
||||
import type { SettingsList } from "@/interface/types/SettingsProps"
|
||||
import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
|
||||
import PickerSwatch from "@/interface/components/PickerSwatch.svelte"
|
||||
import hideSensitiveContent from "@/seqta/ui/dev/hideSensitiveContent"
|
||||
|
||||
import { getAllPluginSettings } from "@/plugins"
|
||||
import type { BooleanSetting, StringSetting, NumberSetting, SelectSetting, ButtonSetting, HotkeySetting, ComponentSetting } from "@/plugins/core/types"
|
||||
import type { BooleanSetting, StringSetting, NumberSetting, SelectSetting } from "@/plugins/core/types"
|
||||
|
||||
// Union type representing all possible settings
|
||||
type SettingType =
|
||||
@@ -23,26 +23,12 @@
|
||||
type: 'select',
|
||||
id: string,
|
||||
options: string[]
|
||||
}) |
|
||||
(Omit<ButtonSetting, 'type'> & {
|
||||
type: 'button',
|
||||
id: string
|
||||
}) |
|
||||
(Omit<HotkeySetting, 'type'> & {
|
||||
type: 'hotkey',
|
||||
id: string
|
||||
}) |
|
||||
(Omit<ComponentSetting, 'type'> & {
|
||||
type: 'component',
|
||||
id: string,
|
||||
component: any
|
||||
});
|
||||
|
||||
interface Plugin {
|
||||
pluginId: string;
|
||||
name: string;
|
||||
description: string;
|
||||
beta?: boolean;
|
||||
settings: Record<string, SettingType>;
|
||||
}
|
||||
|
||||
@@ -59,11 +45,7 @@
|
||||
pluginSettingsValues[plugin.pluginId] = stored[storageKey] || {};
|
||||
|
||||
for (const [key, setting] of Object.entries(plugin.settings)) {
|
||||
if (
|
||||
pluginSettingsValues[plugin.pluginId][key] === undefined &&
|
||||
setting.type !== 'button' &&
|
||||
setting.type !== 'component'
|
||||
) {
|
||||
if (pluginSettingsValues[plugin.pluginId][key] === undefined) {
|
||||
pluginSettingsValues[plugin.pluginId][key] = setting.default;
|
||||
}
|
||||
}
|
||||
@@ -202,20 +184,12 @@
|
||||
{/each}
|
||||
|
||||
{#each pluginSettings as plugin}
|
||||
<div class="border-none">
|
||||
<div class="p-1 my-1 from-white to-zinc-100 bg-gradient-to-br rounded-xl border shadow-sm border-zinc-200/50 dark:border-zinc-700/40 dark:to-zinc-900/50 dark:from-zinc-900/40 {!(plugin as any).disableToggle && Object.keys(plugin.settings).length === 0 ? 'hidden' : ''}">
|
||||
<div>
|
||||
<!-- Always show enable toggle if disableToggle is true -->
|
||||
{#if (plugin as any).disableToggle}
|
||||
<div class="flex justify-between items-center px-4 py-3">
|
||||
<div class="pr-4">
|
||||
<h2 class="flex gap-2 items-center text-sm font-bold">
|
||||
Enable {plugin.name}
|
||||
{#if plugin.beta}
|
||||
<span class="px-2 py-0.5 text-xs font-medium text-orange-800 bg-orange-100 rounded-full border border-orange-300/30 dark:bg-orange-900/30 dark:text-orange-300 dark:border-orange-900/30">
|
||||
Beta
|
||||
</span>
|
||||
{/if}
|
||||
</h2>
|
||||
<h2 class="text-sm font-bold">Enable {plugin.name}</h2>
|
||||
<p class="text-xs">{plugin.description}</p>
|
||||
</div>
|
||||
<div>
|
||||
@@ -227,6 +201,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Only show other settings if plugin is enabled or has no disableToggle -->
|
||||
{#if !((plugin as any).disableToggle) || (pluginSettingsValues[plugin.pluginId]?.enabled ?? true)}
|
||||
{#each Object.entries(plugin.settings) as [key, setting]}
|
||||
<!-- Skip the 'enabled' setting if it's part of the settings object -->
|
||||
@@ -253,7 +228,7 @@
|
||||
{:else if setting.type === 'string'}
|
||||
<input
|
||||
type="text"
|
||||
class="px-2 py-1 text-sm rounded-md dark:bg-[#38373D]/50 bg-[#DDDDDD] dark:text-white border-none"
|
||||
class="px-2 py-1 text-sm rounded-md dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white"
|
||||
value={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
|
||||
oninput={(e) => updatePluginSetting(plugin.pluginId, key, e.currentTarget.value)}
|
||||
/>
|
||||
@@ -266,21 +241,6 @@
|
||||
label: opt.charAt(0).toUpperCase() + opt.slice(1)
|
||||
}))}
|
||||
/>
|
||||
{:else if setting.type === 'button'}
|
||||
<Button
|
||||
onClick={() => setting.trigger?.()}
|
||||
text={setting.title}
|
||||
/>
|
||||
{:else if setting.type === 'hotkey'}
|
||||
<HotkeyInput
|
||||
value={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
|
||||
onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
|
||||
/>
|
||||
{:else if setting.type === 'component'}
|
||||
{#if setting.component}
|
||||
{@const Component = setting.component}
|
||||
<Component />
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
@@ -288,11 +248,8 @@
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<div class="p-1 border-none"></div>
|
||||
|
||||
{@render Setting({
|
||||
title: "BetterSEQTA+",
|
||||
description: "Enables BetterSEQTA+ features",
|
||||
@@ -305,8 +262,7 @@
|
||||
})}
|
||||
|
||||
{#if $settingsState.devMode}
|
||||
<div class="flex-col p-1 my-1 bg-gradient-to-br from-white rounded-xl border shadow-sm to-zinc-100 border-zinc-200/50 dark:border-zinc-700/40 dark:to-zinc-900/50 dark:from-zinc-900/40">
|
||||
<div class="flex justify-between items-center px-4 py-3">
|
||||
<div class="flex items-center justify-between px-4 py-3 mt-4 pt-[1.75rem]">
|
||||
<div class="pr-4">
|
||||
<h2 class="text-sm font-bold">Developer Mode</h2>
|
||||
<p class="text-xs">Enables developer mode, allowing you to test new features and changes.</p>
|
||||
@@ -321,24 +277,11 @@
|
||||
<p class="text-xs">Replace sensitive content with mock data</p>
|
||||
</div>
|
||||
<div>
|
||||
<Switch
|
||||
state={$settingsState.hideSensitiveContent ?? false}
|
||||
onChange={(isOn: boolean) => settingsState.hideSensitiveContent = isOn}
|
||||
<Button
|
||||
onClick={() => hideSensitiveContent()}
|
||||
text="Hide"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center px-4 py-3">
|
||||
<div class="pr-4">
|
||||
<h2 class="text-sm font-bold">Mock Notices</h2>
|
||||
<p class="text-xs">Use fake notice data on homepage instead of real data</p>
|
||||
</div>
|
||||
<div>
|
||||
<Switch
|
||||
state={$settingsState.mockNotices ?? false}
|
||||
onChange={(isOn: boolean) => settingsState.mockNotices = isOn}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -3,10 +3,8 @@
|
||||
import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
|
||||
import Switch from "@/interface/components/Switch.svelte"
|
||||
import { onMount } from 'svelte';
|
||||
import Shortcuts from "@/seqta/content/links.json"
|
||||
|
||||
let isLoaded = $state(false);
|
||||
let fileInput = $state<HTMLInputElement | null>(null);
|
||||
|
||||
onMount(async () => {
|
||||
// Wait for settingsState to be initialized
|
||||
@@ -23,38 +21,15 @@
|
||||
});
|
||||
});
|
||||
|
||||
const switchChange = (shortcut: any) => {
|
||||
const value = $settingsState.shortcuts.find(s => s.name === shortcut);
|
||||
if (value) {
|
||||
value.enabled = !value.enabled;
|
||||
settingsState.shortcuts = settingsState.shortcuts;
|
||||
} else {
|
||||
settingsState.shortcuts = [...settingsState.shortcuts, { name: shortcut, enabled: true }];
|
||||
}
|
||||
const switchChange = (index: number) => {
|
||||
const updatedShortcuts = [...settingsState.shortcuts];
|
||||
updatedShortcuts[index].enabled = !updatedShortcuts[index].enabled;
|
||||
settingsState.shortcuts = updatedShortcuts;
|
||||
}
|
||||
|
||||
let isFormVisible = $state(false);
|
||||
let newTitle = $state("");
|
||||
let newURL = $state("");
|
||||
let newIcon = $state<string | null>(null);
|
||||
|
||||
function handleIconChange(event: Event) {
|
||||
const file = (event.target as HTMLInputElement).files?.[0];
|
||||
if (file && file.type === "image/svg+xml") {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
newIcon = reader.result as string;
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
}
|
||||
|
||||
const clearIcon = () => {
|
||||
newIcon = null;
|
||||
if (fileInput) {
|
||||
fileInput.value = ""; // Clear the file input so the same file can be re-selected
|
||||
}
|
||||
};
|
||||
|
||||
const toggleForm = () => {
|
||||
isFormVisible = !isFormVisible;
|
||||
@@ -74,13 +49,11 @@
|
||||
|
||||
const addNewCustomShortcut = () => {
|
||||
if (isValidTitle(newTitle) && isValidURL(newURL)) {
|
||||
const icon = newIcon || newTitle[0];
|
||||
const newShortcut = { name: newTitle.trim(), url: formatUrl(newURL).trim(), icon };
|
||||
const newShortcut = { name: newTitle.trim(), url: formatUrl(newURL).trim(), icon: newTitle[0] };
|
||||
settingsState.customshortcuts = [...settingsState.customshortcuts, newShortcut];
|
||||
|
||||
newTitle = "";
|
||||
newURL = "";
|
||||
newIcon = null;
|
||||
isFormVisible = false;
|
||||
} else {
|
||||
alert("Please enter a valid title and URL.");
|
||||
@@ -92,6 +65,15 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
{#snippet Shortcuts([index, Shortcut]: [string, { name: string, enabled: boolean }]) }
|
||||
<div class="flex justify-between items-center px-4 py-3">
|
||||
<div class="pr-4">
|
||||
<h2 class="text-sm">{Shortcut.name}</h2>
|
||||
</div>
|
||||
<Switch state={Shortcut.enabled} onChange={() => switchChange(parseInt(index))} />
|
||||
</div>
|
||||
{/snippet}
|
||||
|
||||
<div class="flex flex-col pt-4 divide-y divide-zinc-100 dark:divide-zinc-700">
|
||||
{#if isLoaded}
|
||||
<div>
|
||||
@@ -123,7 +105,7 @@
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.05, duration: 0.2 }}
|
||||
class="flex gap-2 w-full"
|
||||
class="w-full"
|
||||
>
|
||||
<input
|
||||
class="p-2 my-2 w-full rounded-lg border-0 transition placeholder-zinc-300 bg-zinc-100 dark:bg-zinc-700 focus:bg-zinc-200/50 dark:focus:bg-zinc-600"
|
||||
@@ -131,48 +113,6 @@
|
||||
placeholder="URL eg. https://google.com"
|
||||
bind:value={newURL}
|
||||
/>
|
||||
<input
|
||||
bind:this={fileInput}
|
||||
class="p-2 w-full rounded-lg border-0 transition placeholder-zinc-300 bg-zinc-100 dark:bg-zinc-700 focus:bg-zinc-200/50 dark:focus:bg-zinc-600"
|
||||
type="file"
|
||||
accept=".svg"
|
||||
onchange={handleIconChange}
|
||||
hidden
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="flex justify-between items-center p-2 my-2 text-left rounded-lg border border-dashed transition text-nowrap text-zinc-500 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-700/50 hover:bg-zinc-200/50 dark:hover:bg-zinc-700/30 focus:bg-zinc-200/50 dark:focus:bg-zinc-600/50 border-zinc-300 dark:border-zinc-600"
|
||||
onclick={() => fileInput?.click()}
|
||||
>
|
||||
{#if newIcon}
|
||||
<div class="flex overflow-hidden items-center">
|
||||
<div class="flex-shrink-0 mr-2 w-6 h-6">
|
||||
<img src={`data:image/svg+xml;base64,${btoa(newIcon)}`} alt="Selected Icon" class="object-contain w-full h-full" />
|
||||
</div>
|
||||
<span class="truncate">Selected Icon</span>
|
||||
</div>
|
||||
<span
|
||||
class="p-1 ml-2 rounded hover:bg-zinc-200 dark:hover:bg-zinc-600"
|
||||
aria-label="Clear icon"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
onclick={(event) => { event.stopPropagation(); clearIcon(); }}
|
||||
onkeydown={(event) => {
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
event.preventDefault();
|
||||
clearIcon();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</span>
|
||||
{:else}
|
||||
<span class="font-IconFamily">{ '\ued47' }</span>
|
||||
<span class="ml-2">SVG icon <span class="text-xs italic text-zinc-400 dark:text-zinc-500">(Optional)</span></span>
|
||||
{/if}
|
||||
</button>
|
||||
</MotionDiv>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -196,14 +136,8 @@
|
||||
</MotionDiv>
|
||||
</div>
|
||||
|
||||
{#each Object.entries(Shortcuts) as shortcut}
|
||||
<div class="flex justify-between items-center px-4 py-3">
|
||||
<div class="pr-4">
|
||||
<!-- Use DisplayName if it exists, otherwise use the key (shortcut[0]) as a fallback -->
|
||||
<h2 class="text-sm">{shortcut[1].DisplayName || shortcut[0]}</h2>
|
||||
</div>
|
||||
<Switch state={$settingsState.shortcuts.find(s => s.name === shortcut[0])?.enabled ?? false} onChange={() => switchChange(shortcut[0])} />
|
||||
</div>
|
||||
{#each Object.entries($settingsState.shortcuts) as shortcut}
|
||||
{@render Shortcuts(shortcut)}
|
||||
{/each}
|
||||
|
||||
<!-- Custom Shortcuts Section -->
|
||||
|
||||
@@ -2,6 +2,6 @@ export interface SettingsList {
|
||||
title: string;
|
||||
id: number;
|
||||
description: string;
|
||||
Component: any /* TODO: Give this a type */;
|
||||
Component: any; /* TODO: Give this a type */
|
||||
props?: any;
|
||||
}
|
||||
@@ -16,7 +16,7 @@ export class Standalone {
|
||||
|
||||
public setStandalone(value: boolean) {
|
||||
this._standalone = value;
|
||||
this.subscribers.forEach((subscriber) => subscriber(value));
|
||||
this.subscribers.forEach(subscriber => subscriber(value));
|
||||
}
|
||||
|
||||
public get standalone() {
|
||||
|
||||
@@ -1,49 +1,23 @@
|
||||
import type { LoadedCustomTheme } from "@/types/CustomThemes";
|
||||
import type { LoadedCustomTheme } from '@/types/CustomThemes';
|
||||
|
||||
/**
|
||||
* Generates a random 9-character alphanumeric string to be used as a unique ID for images.
|
||||
* This helps in identifying and managing custom images within a theme.
|
||||
*
|
||||
* @returns {string} A randomly generated unique ID string.
|
||||
*/
|
||||
export function generateImageId(): string {
|
||||
return Math.random().toString(36).substr(2, 9);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles the upload of a new custom image from a file input event.
|
||||
* If a file is selected, it reads the file using FileReader, converts it to a Blob,
|
||||
* generates a unique ID and a default variable name for it, and then adds this new image
|
||||
* to the `CustomImages` array within the provided `theme` object.
|
||||
*
|
||||
* @param {Event} event The file input change event, typically from an `<input type="file">` element.
|
||||
* @param {LoadedCustomTheme} theme The current theme object to which the new image will be added.
|
||||
* @returns {Promise<LoadedCustomTheme> | LoadedCustomTheme} A Promise that resolves with the updated theme object
|
||||
* containing the new image if a file was processed.
|
||||
* Returns the original theme object synchronously if no file was selected.
|
||||
*/
|
||||
export function handleImageUpload(
|
||||
event: Event,
|
||||
theme: LoadedCustomTheme,
|
||||
): Promise<LoadedCustomTheme> | LoadedCustomTheme {
|
||||
export function handleImageUpload(event: Event, theme: LoadedCustomTheme): Promise<LoadedCustomTheme> | LoadedCustomTheme {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
input.value = "";
|
||||
input.value = '';
|
||||
if (file) {
|
||||
return new Promise((resolve) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = async () => {
|
||||
const imageBlob = await fetch(reader.result as string).then((res) =>
|
||||
res.blob(),
|
||||
);
|
||||
const imageBlob = await fetch(reader.result as string).then(res => res.blob());
|
||||
const imageId = generateImageId();
|
||||
const variableName = `custom-image-${theme.CustomImages.length}`;
|
||||
resolve({
|
||||
...theme,
|
||||
CustomImages: [
|
||||
...theme.CustomImages,
|
||||
{ id: imageId, blob: imageBlob, variableName, url: null },
|
||||
],
|
||||
CustomImages: [...theme.CustomImages, { id: imageId, blob: imageBlob, variableName, url: null }],
|
||||
});
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
@@ -52,75 +26,31 @@ export function handleImageUpload(
|
||||
return theme;
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes a custom image from the theme based on its ID.
|
||||
* It filters out the image with the specified `imageId` from the `CustomImages` array
|
||||
* in the `theme` object.
|
||||
*
|
||||
* @param {string} imageId The unique ID of the custom image to be removed.
|
||||
* @param {LoadedCustomTheme} theme The current theme object from which the image will be removed.
|
||||
* @returns {LoadedCustomTheme} A new theme object with the specified image removed from its `CustomImages` array.
|
||||
* This function is synchronous.
|
||||
*/
|
||||
export function handleRemoveImage(
|
||||
imageId: string,
|
||||
theme: LoadedCustomTheme,
|
||||
): LoadedCustomTheme {
|
||||
export function handleRemoveImage(imageId: string, theme: LoadedCustomTheme): LoadedCustomTheme {
|
||||
return {
|
||||
...theme,
|
||||
CustomImages: theme.CustomImages.filter((image) => image.id !== imageId),
|
||||
} as LoadedCustomTheme;
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the CSS variable name associated with a specific custom image in the theme.
|
||||
* It finds the image by `imageId` in the `CustomImages` array of the `theme` object
|
||||
* and updates its `variableName` property.
|
||||
*
|
||||
* @param {string} imageId The unique ID of the custom image whose variable name is to be updated.
|
||||
* @param {string} variableName The new CSS variable name to assign to the image.
|
||||
* @param {LoadedCustomTheme} theme The current theme object containing the image to be updated.
|
||||
* @returns {LoadedCustomTheme} A new theme object with the updated image variable name.
|
||||
* This function is synchronous.
|
||||
*/
|
||||
export function handleImageVariableChange(
|
||||
imageId: string,
|
||||
variableName: string,
|
||||
theme: LoadedCustomTheme,
|
||||
): LoadedCustomTheme {
|
||||
export function handleImageVariableChange(imageId: string, variableName: string, theme: LoadedCustomTheme): LoadedCustomTheme {
|
||||
return {
|
||||
...theme,
|
||||
CustomImages: theme.CustomImages.map((image) =>
|
||||
image.id === imageId ? { ...image, variableName } : image,
|
||||
image.id === imageId ? { ...image, variableName } : image
|
||||
),
|
||||
} as LoadedCustomTheme;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles the upload of a cover image for the theme from a file input event.
|
||||
* If a file is selected, it reads the file using FileReader, converts it to a Blob,
|
||||
* and then updates the `coverImage` property of the provided `theme` object with this new blob.
|
||||
*
|
||||
* @param {Event} event The file input change event, typically from an `<input type="file">` element.
|
||||
* @param {LoadedCustomTheme} theme The current theme object whose cover image will be updated.
|
||||
* @returns {Promise<LoadedCustomTheme>} A Promise that resolves with the updated theme object
|
||||
* containing the new cover image if a file was processed.
|
||||
* Returns a Promise resolving with the original theme object if no file was selected.
|
||||
*/
|
||||
export function handleCoverImageUpload(
|
||||
event: Event,
|
||||
theme: LoadedCustomTheme,
|
||||
): Promise<LoadedCustomTheme> {
|
||||
export function handleCoverImageUpload(event: Event, theme: LoadedCustomTheme): Promise<LoadedCustomTheme> {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
input.value = "";
|
||||
input.value = '';
|
||||
if (file) {
|
||||
return new Promise((resolve) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = async () => {
|
||||
const imageBlob = await fetch(reader.result as string).then((res) =>
|
||||
res.blob(),
|
||||
);
|
||||
const imageBlob = await fetch(reader.result as string).then(res => res.blob());
|
||||
resolve({ ...theme, coverImage: imageBlob });
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
@@ -1,12 +1,9 @@
|
||||
import { createManifest } from "../../lib/createManifest";
|
||||
import baseManifest from "./manifest.json";
|
||||
import pkg from "../../package.json";
|
||||
import { createManifest } from '../../lib/createManifest'
|
||||
import baseManifest from './manifest.json'
|
||||
import pkg from '../../package.json'
|
||||
|
||||
export const brave = createManifest(
|
||||
{
|
||||
export const brave = createManifest({
|
||||
...baseManifest,
|
||||
version: pkg.version,
|
||||
description: pkg.description,
|
||||
},
|
||||
"brave",
|
||||
);
|
||||
}, 'brave')
|
||||
|
||||
@@ -1,12 +1,9 @@
|
||||
import { createManifest } from "../../lib/createManifest";
|
||||
import baseManifest from "./manifest.json";
|
||||
import pkg from "../../package.json";
|
||||
import { createManifest } from '../../lib/createManifest'
|
||||
import baseManifest from './manifest.json'
|
||||
import pkg from '../../package.json'
|
||||
|
||||
export const chrome = createManifest(
|
||||
{
|
||||
export const chrome = createManifest({
|
||||
...baseManifest,
|
||||
version: pkg.version,
|
||||
description: pkg.description,
|
||||
},
|
||||
"chrome",
|
||||
);
|
||||
}, 'chrome')
|
||||
|
||||
@@ -1,12 +1,9 @@
|
||||
import { createManifest } from "../../lib/createManifest";
|
||||
import baseManifest from "./manifest.json";
|
||||
import pkg from "../../package.json";
|
||||
import { createManifest } from '../../lib/createManifest'
|
||||
import baseManifest from './manifest.json'
|
||||
import pkg from '../../package.json'
|
||||
|
||||
export const edge = createManifest(
|
||||
{
|
||||
export const edge = createManifest({
|
||||
...baseManifest,
|
||||
version: pkg.version,
|
||||
description: pkg.description,
|
||||
},
|
||||
"edge",
|
||||
);
|
||||
}, 'edge')
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { createManifest } from "../../lib/createManifest";
|
||||
import baseManifest from "./manifest.json";
|
||||
import pkg from "../../package.json";
|
||||
import { createManifest } from '../../lib/createManifest'
|
||||
import baseManifest from './manifest.json'
|
||||
import pkg from '../../package.json'
|
||||
|
||||
const updatedFirefoxManifest = {
|
||||
...baseManifest,
|
||||
@@ -10,13 +10,13 @@ const updatedFirefoxManifest = {
|
||||
scripts: [baseManifest.background.service_worker],
|
||||
},
|
||||
action: {
|
||||
default_popup: "interface/index.html#settings",
|
||||
"default_popup": "interface/index.html#settings",
|
||||
},
|
||||
browser_specific_settings: {
|
||||
gecko: {
|
||||
id: pkg.author.email,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export const firefox = createManifest(updatedFirefoxManifest, "firefox");
|
||||
export const firefox = createManifest(updatedFirefoxManifest, 'firefox')
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
],
|
||||
"web_accessible_resources": [
|
||||
{
|
||||
"resources": ["resources/icons/*", "resources/update-image.webp"],
|
||||
"resources": ["*/*", "resources/*", "seqta/utils/migration/migrate.html", "plugins/built-in/globalSearch/*"],
|
||||
"matches": ["*://*/*"]
|
||||
}
|
||||
]
|
||||
|
||||
@@ -1,12 +1,9 @@
|
||||
import { createManifest } from "../../lib/createManifest";
|
||||
import baseManifest from "./manifest.json";
|
||||
import pkg from "../../package.json";
|
||||
import { createManifest } from '../../lib/createManifest'
|
||||
import baseManifest from './manifest.json'
|
||||
import pkg from '../../package.json'
|
||||
|
||||
export const opera = createManifest(
|
||||
{
|
||||
export const opera = createManifest({
|
||||
...baseManifest,
|
||||
version: pkg.version,
|
||||
description: pkg.description,
|
||||
},
|
||||
"opera",
|
||||
);
|
||||
}, 'opera')
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { createManifest } from "../../lib/createManifest";
|
||||
import baseManifest from "./manifest.json";
|
||||
import pkg from "../../package.json";
|
||||
import { createManifest } from '../../lib/createManifest'
|
||||
import baseManifest from './manifest.json'
|
||||
import pkg from '../../package.json'
|
||||
|
||||
const updatedSafariManifest = {
|
||||
...baseManifest,
|
||||
@@ -8,12 +8,12 @@ const updatedSafariManifest = {
|
||||
description: pkg.description,
|
||||
browser_specific_settings: {
|
||||
safari: {
|
||||
strict_min_version: "15.4",
|
||||
strict_max_version: "*",
|
||||
strict_min_version: '15.4',
|
||||
strict_max_version: '*',
|
||||
},
|
||||
// ^^^ https://developer.apple.com/documentation/safariservices/safari_web_extensions/optimizing_your_web_extension_for_safari#3743239
|
||||
// https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings#safari_properties
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export const safari = createManifest(updatedSafariManifest, "safari");
|
||||
export const safari = createManifest(updatedSafariManifest, 'safari')
|
||||
|
||||
+48
-448
@@ -3,27 +3,13 @@ class ReactFiber {
|
||||
this.selector = selector;
|
||||
this.debug = options.debug || false;
|
||||
this.nodes = [...document.querySelectorAll(selector)]; // Support multiple elements
|
||||
this.fibers = this.nodes.map((node) => this.getFiberNode(node));
|
||||
this.components = this.fibers.map((fiber) => this.getOwnerComponent(fiber));
|
||||
this.fibers = this.nodes.map(node => this.getFiberNode(node));
|
||||
this.components = this.fibers.map(fiber => this.getOwnerComponent(fiber));
|
||||
|
||||
if (this.debug) {
|
||||
console.log("Selected Nodes:", this.nodes);
|
||||
console.log("🔍 Found Fibers:", this.fibers);
|
||||
console.log("🛠 Found Components:", this.components);
|
||||
|
||||
// Debug fiber info
|
||||
this.fibers.forEach((fiber, index) => {
|
||||
if (fiber) {
|
||||
console.log(`Fiber ${index}:`, {
|
||||
tag: fiber.tag,
|
||||
type: fiber.type?.name || fiber.type,
|
||||
elementType: fiber.elementType,
|
||||
stateNode: fiber.stateNode,
|
||||
hasState: !!fiber.stateNode?.state,
|
||||
hasMemoizedState: !!fiber.memoizedState
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -33,27 +19,8 @@ class ReactFiber {
|
||||
|
||||
getFiberNode(node) {
|
||||
if (!node) return null;
|
||||
|
||||
// Try multiple property name patterns for different React versions
|
||||
const possibleKeys = [
|
||||
'__reactFiber$', // React 16+
|
||||
'__reactInternalFiber$', // React 15
|
||||
'__reactInternalInstance$', // Older versions
|
||||
'__reactFiber',
|
||||
'__reactInternalInstance'
|
||||
];
|
||||
|
||||
// Check for exact matches first
|
||||
for (const key of possibleKeys) {
|
||||
if (node[key]) return node[key];
|
||||
}
|
||||
|
||||
// Fall back to pattern matching
|
||||
const fiberKey = Object.getOwnPropertyNames(node).find(
|
||||
(name) =>
|
||||
name.startsWith("__reactFiber") ||
|
||||
name.startsWith("__reactInternalInstance") ||
|
||||
name.startsWith("__reactInternalFiber")
|
||||
const fiberKey = Object.getOwnPropertyNames(node).find(name =>
|
||||
name.startsWith('__reactFiber') || name.startsWith('__reactInternalInstance')
|
||||
);
|
||||
return fiberKey ? node[fiberKey] : null;
|
||||
}
|
||||
@@ -61,75 +28,21 @@ class ReactFiber {
|
||||
getOwnerComponent(fiberNode) {
|
||||
let current = fiberNode;
|
||||
while (current) {
|
||||
// Use React's internal tag system to identify component types
|
||||
// Based on React's WorkTags: ClassComponent = 1, FunctionComponent = 0
|
||||
if (current.tag === 1) { // ClassComponent
|
||||
return current.stateNode; // For class components, stateNode is the component instance
|
||||
}
|
||||
|
||||
// For function components, look for hooks in memoizedState
|
||||
if (current.tag === 0 || current.tag === 15) { // FunctionComponent or MemoComponent
|
||||
// Function components don't have setState, but we can still track them
|
||||
if (current.memoizedState && current.type) {
|
||||
return {
|
||||
type: 'function',
|
||||
hooks: current.memoizedState,
|
||||
fiber: current,
|
||||
forceUpdate: () => {
|
||||
// Trigger re-render by updating fiber
|
||||
if (current.alternate) {
|
||||
current.alternate.expirationTime = 1;
|
||||
}
|
||||
current.expirationTime = 1;
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Legacy fallback: check if stateNode has React component methods
|
||||
if (
|
||||
current.stateNode &&
|
||||
current.stateNode !== null &&
|
||||
typeof current.stateNode === 'object' &&
|
||||
(current.stateNode.setState || current.stateNode.forceUpdate)
|
||||
) {
|
||||
if (current.stateNode && (current.stateNode.setState || current.stateNode.forceUpdate)) {
|
||||
return current.stateNode;
|
||||
}
|
||||
|
||||
current = current.return;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
getState(key) {
|
||||
if (!this.components.length && !this.fibers.length) return null;
|
||||
|
||||
const component = this.components[0];
|
||||
const fiber = this.fibers[0];
|
||||
let state = null;
|
||||
|
||||
// Handle class components
|
||||
if (component?.state) {
|
||||
state = component.state;
|
||||
}
|
||||
// Handle function components with hooks - look directly at fiber
|
||||
else if (fiber?.memoizedState) {
|
||||
if (this.debug) {
|
||||
console.log("🔍 Raw fiber.memoizedState:", fiber.memoizedState);
|
||||
}
|
||||
// Extract useState values from the hook chain
|
||||
const states = this.extractStateFromHooks(fiber.memoizedState);
|
||||
state = states.length === 1 ? states[0] : states;
|
||||
}
|
||||
// Fallback: try component hooks if available
|
||||
else if (component?.type === 'function' && component?.hooks) {
|
||||
const states = this.extractStateFromHooks(component.hooks);
|
||||
state = states.length === 1 ? states[0] : states;
|
||||
}
|
||||
if (!this.components.length) return null;
|
||||
const state = this.components[0]?.state || null;
|
||||
|
||||
if (key === undefined) {
|
||||
return state;
|
||||
} else if (typeof key === "string") {
|
||||
} else if (typeof key === 'string') {
|
||||
return state?.[key];
|
||||
} else if (Array.isArray(key)) {
|
||||
const filteredState = {};
|
||||
@@ -143,166 +56,28 @@ class ReactFiber {
|
||||
return null;
|
||||
}
|
||||
|
||||
extractStateFromHooks(hookChain) {
|
||||
const states = [];
|
||||
let mainStateFound = false;
|
||||
let currentHook = hookChain;
|
||||
let hookIndex = 0;
|
||||
|
||||
if (this.debug) {
|
||||
console.log("🔍 Hook chain analysis:");
|
||||
}
|
||||
|
||||
while (currentHook) {
|
||||
if (this.debug) {
|
||||
console.log(`Hook ${hookIndex}:`, {
|
||||
type: currentHook.tag || 'unknown',
|
||||
memoizedState: currentHook.memoizedState,
|
||||
queue: currentHook.queue,
|
||||
next: !!currentHook.next
|
||||
});
|
||||
}
|
||||
|
||||
// Try different approaches to extract state
|
||||
if (currentHook.memoizedState !== undefined && currentHook.memoizedState !== null) {
|
||||
const state = currentHook.memoizedState;
|
||||
|
||||
// Priority 1: Check for useRef hooks with complex state in .current
|
||||
if (!currentHook.queue &&
|
||||
typeof state === 'object' &&
|
||||
state !== null &&
|
||||
state.current !== undefined &&
|
||||
typeof state.current === 'object' &&
|
||||
state.current !== null) {
|
||||
|
||||
// Check if this looks like a substantial state object (has multiple properties)
|
||||
const currentKeys = Object.keys(state.current);
|
||||
if (currentKeys.length > 2) {
|
||||
states.push(state.current);
|
||||
mainStateFound = true;
|
||||
if (this.debug) console.log(` 🎯 Found main state in useRef:`, state.current);
|
||||
}
|
||||
}
|
||||
// Priority 2: useState hooks with queue
|
||||
else if (currentHook.queue && typeof state !== 'function') {
|
||||
states.push(state);
|
||||
if (this.debug) console.log(` ✅ Found useState state:`, state);
|
||||
}
|
||||
// Priority 3: Other potential state objects (only if we haven't found main state)
|
||||
else if (!mainStateFound && !currentHook.queue && typeof state === 'object' && state !== null) {
|
||||
// Skip useEffect hooks (they have tag 36)
|
||||
if (!(state.tag === 36 && state.create)) {
|
||||
states.push(state);
|
||||
if (this.debug) console.log(` 📦 Found potential state object:`, state);
|
||||
}
|
||||
}
|
||||
// Priority 4: Simple primitive state
|
||||
else if (typeof state !== 'function' && typeof state !== 'object') {
|
||||
states.push(state);
|
||||
if (this.debug) console.log(` 🔹 Found primitive state:`, state);
|
||||
}
|
||||
}
|
||||
|
||||
currentHook = currentHook.next;
|
||||
hookIndex++;
|
||||
}
|
||||
|
||||
if (this.debug) {
|
||||
console.log(`🎯 Extracted ${states.length} state values:`, states);
|
||||
}
|
||||
|
||||
// If we found main state objects, prioritize and deduplicate them
|
||||
if (mainStateFound && states.length > 1) {
|
||||
const mainStates = states.filter(state =>
|
||||
typeof state === 'object' &&
|
||||
state !== null &&
|
||||
Object.keys(state).length > 2
|
||||
);
|
||||
|
||||
if (mainStates.length > 1) {
|
||||
// If we have multiple main state objects, find the most comprehensive one
|
||||
// or merge them if they seem complementary
|
||||
const largestState = mainStates.reduce((largest, current) => {
|
||||
const largestKeys = Object.keys(largest).length;
|
||||
const currentKeys = Object.keys(current).length;
|
||||
|
||||
// Prefer the one with more properties
|
||||
if (currentKeys > largestKeys) return current;
|
||||
|
||||
// If same number of properties, prefer the one with more complex data
|
||||
if (currentKeys === largestKeys) {
|
||||
const largestComplexity = this.calculateStateComplexity(largest);
|
||||
const currentComplexity = this.calculateStateComplexity(current);
|
||||
return currentComplexity > largestComplexity ? current : largest;
|
||||
}
|
||||
|
||||
return largest;
|
||||
});
|
||||
|
||||
if (this.debug) {
|
||||
console.log(`🎯 Selected most comprehensive state from ${mainStates.length} candidates:`, largestState);
|
||||
}
|
||||
|
||||
return [largestState];
|
||||
}
|
||||
|
||||
return mainStates;
|
||||
}
|
||||
|
||||
return states;
|
||||
}
|
||||
|
||||
calculateStateComplexity(state) {
|
||||
if (!state || typeof state !== 'object') return 0;
|
||||
|
||||
let complexity = 0;
|
||||
for (const [key, value] of Object.entries(state)) {
|
||||
complexity += 1; // Base point for each property
|
||||
|
||||
if (Array.isArray(value)) {
|
||||
complexity += value.length * 0.1; // Arrays get points based on length
|
||||
} else if (typeof value === 'object' && value !== null) {
|
||||
complexity += Object.keys(value).length * 0.5; // Nested objects get points
|
||||
} else if (typeof value === 'function') {
|
||||
complexity += 2; // Functions are valuable
|
||||
}
|
||||
}
|
||||
|
||||
return complexity;
|
||||
}
|
||||
|
||||
setState(update) {
|
||||
this.components.forEach((component) => {
|
||||
// Handle class components
|
||||
this.components.forEach(component => {
|
||||
if (component?.setState) {
|
||||
if (typeof update === "function") {
|
||||
if (typeof update === 'function') {
|
||||
// Functional update
|
||||
component.setState((prevState) => {
|
||||
component.setState(prevState => {
|
||||
const newState = update(prevState);
|
||||
if (this.debug)
|
||||
console.log("✅ Updated State (Functional):", newState);
|
||||
if (this.debug) console.log("✅ Updated State (Functional):", newState);
|
||||
return newState;
|
||||
});
|
||||
} else {
|
||||
// Object update (merge with existing state)
|
||||
component.setState((prevState) => {
|
||||
component.setState(prevState => {
|
||||
const newState = {
|
||||
...prevState,
|
||||
...update,
|
||||
...update
|
||||
};
|
||||
if (this.debug)
|
||||
console.log("✅ Updated State (Object Merge):", newState);
|
||||
if (this.debug) console.log("✅ Updated State (Object Merge):", newState);
|
||||
return newState;
|
||||
});
|
||||
}
|
||||
}
|
||||
// Handle function components - force re-render since we can't directly update hooks
|
||||
else if (component?.type === 'function' && component?.forceUpdate) {
|
||||
if (this.debug) {
|
||||
console.log("⚠️ Function component detected - triggering re-render. Direct state update not possible.");
|
||||
}
|
||||
component.forceUpdate();
|
||||
}
|
||||
});
|
||||
return this;
|
||||
}
|
||||
@@ -317,8 +92,8 @@ class ReactFiber {
|
||||
return this.fibers[0]?.memoizedProps?.[propName];
|
||||
}
|
||||
|
||||
setProp(propName, value) {
|
||||
this.fibers.forEach((fiber) => {
|
||||
setProp(propName) {
|
||||
this.fibers.forEach(fiber => {
|
||||
if (fiber?.memoizedProps) {
|
||||
fiber.memoizedProps[propName] = value;
|
||||
}
|
||||
@@ -327,7 +102,7 @@ class ReactFiber {
|
||||
}
|
||||
|
||||
forceUpdate() {
|
||||
this.components.forEach((component) => {
|
||||
this.components.forEach(component => {
|
||||
if (component?.forceUpdate) {
|
||||
component.forceUpdate();
|
||||
if (this.debug) console.log("🔄 Forced React Re-render");
|
||||
@@ -337,183 +112,51 @@ class ReactFiber {
|
||||
}
|
||||
}
|
||||
|
||||
function makeSerializable(obj, visited = new WeakSet(), depth = 0, maxDepth = 10) {
|
||||
// Handle primitives first
|
||||
if (obj === null || obj === undefined) {
|
||||
function makeSerializable(obj) {
|
||||
if (typeof obj !== 'object' || obj === null) {
|
||||
return obj;
|
||||
}
|
||||
|
||||
// Catch ALL functions early
|
||||
if (typeof obj === "function") {
|
||||
return `[Function: ${obj.name || 'anonymous'}]`;
|
||||
}
|
||||
|
||||
if (typeof obj !== "object") {
|
||||
// Handle other primitives
|
||||
if (typeof obj === "symbol") return obj.toString();
|
||||
if (typeof obj === "bigint") return obj.toString() + "n";
|
||||
return obj;
|
||||
}
|
||||
|
||||
// Prevent infinite recursion - depth limit
|
||||
if (depth > maxDepth) {
|
||||
return "[Max Depth Reached]";
|
||||
}
|
||||
|
||||
// Prevent circular references
|
||||
if (visited.has(obj)) {
|
||||
return "[Circular Reference]";
|
||||
}
|
||||
visited.add(obj);
|
||||
|
||||
try {
|
||||
// Handle special objects first
|
||||
if (obj instanceof HTMLElement) {
|
||||
return {
|
||||
type: "HTMLElement",
|
||||
tagName: obj.tagName,
|
||||
id: obj.id || null,
|
||||
className: obj.className || null,
|
||||
attributes: obj.attributes ? Array.from(obj.attributes).map(attr => ({ name: attr.name, value: attr.value })) : []
|
||||
};
|
||||
}
|
||||
|
||||
if (obj instanceof Event) {
|
||||
return {
|
||||
type: "Event",
|
||||
eventType: obj.type,
|
||||
target: obj.target?.tagName || null
|
||||
};
|
||||
}
|
||||
|
||||
if (obj instanceof Date) {
|
||||
return { type: "Date", value: obj.toISOString() };
|
||||
}
|
||||
|
||||
if (obj instanceof RegExp) {
|
||||
return { type: "RegExp", source: obj.source, flags: obj.flags };
|
||||
}
|
||||
|
||||
if (obj instanceof Error) {
|
||||
return { type: "Error", message: obj.message, name: obj.name };
|
||||
}
|
||||
|
||||
// Handle React Fiber nodes - these are super circular
|
||||
if (obj.tag !== undefined && obj.elementType !== undefined) {
|
||||
return {
|
||||
type: "ReactFiber",
|
||||
tag: obj.tag,
|
||||
elementType: typeof obj.elementType === 'function' ? obj.elementType.name || 'AnonymousComponent' : String(obj.elementType),
|
||||
key: obj.key,
|
||||
hasState: !!obj.stateNode?.state,
|
||||
hasMemoizedState: !!obj.memoizedState,
|
||||
hasProps: !!obj.memoizedProps
|
||||
};
|
||||
}
|
||||
|
||||
// Handle arrays
|
||||
if (Array.isArray(obj)) {
|
||||
return obj.slice(0, 50).map((item, index) => {
|
||||
if (index >= 25) return "[...truncated]"; // Smaller limit
|
||||
return makeSerializable(item, visited, depth + 1, maxDepth);
|
||||
});
|
||||
return obj.map(item => makeSerializable(item));
|
||||
}
|
||||
|
||||
// Handle regular objects
|
||||
const serializableObj = {};
|
||||
|
||||
// Get own enumerable properties only to avoid prototype pollution
|
||||
const ownKeys = Object.getOwnPropertyNames(obj).filter(key => {
|
||||
try {
|
||||
return obj.propertyIsEnumerable(key);
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
// Limit number of properties to avoid huge objects
|
||||
const maxKeys = 30; // Smaller limit for safety
|
||||
const processedKeys = ownKeys.slice(0, maxKeys);
|
||||
|
||||
for (const key of processedKeys) {
|
||||
try {
|
||||
// Skip problematic keys early
|
||||
const dangerousKeys = [
|
||||
'parentNode', 'parentElement', 'ownerDocument', 'children', 'childNodes',
|
||||
'return', 'child', 'sibling', 'alternate', 'ref', // React Fiber circular refs
|
||||
'_owner', '_source', '_self', '_debugOwner', '_debugSource', // React internals
|
||||
'window', 'document', 'global', 'self', 'top', 'parent', // Global objects
|
||||
'constructor', 'prototype', '__proto__', // Constructor/prototype chains
|
||||
'addEventListener', 'removeEventListener', // Event handlers
|
||||
'setState', 'forceUpdate', 'render' // React methods that might be functions
|
||||
];
|
||||
|
||||
if (dangerousKeys.includes(key)) {
|
||||
serializableObj[key] = `[Skipped: ${key}]`;
|
||||
continue;
|
||||
}
|
||||
|
||||
const descriptor = Object.getOwnPropertyDescriptor(obj, key);
|
||||
if (descriptor && (descriptor.get || descriptor.set)) {
|
||||
serializableObj[key] = "[Getter/Setter]";
|
||||
continue;
|
||||
}
|
||||
|
||||
for (const key in obj) {
|
||||
if (Object.hasOwn(obj, key)) {
|
||||
let value = obj[key];
|
||||
|
||||
// Handle symbols specifically (React context symbols)
|
||||
if (typeof value === "symbol") {
|
||||
value = `[Symbol: ${value.description || 'anonymous'}]`;
|
||||
}
|
||||
// Extra function check
|
||||
else if (typeof value === "function") {
|
||||
value = `[Function: ${value.name || 'anonymous'}]`;
|
||||
} else if (value && typeof value === "object") {
|
||||
value = makeSerializable(value, visited, depth + 1, maxDepth);
|
||||
if (typeof value === 'function') {
|
||||
value = '[Function]';
|
||||
} else if (value instanceof HTMLElement) {
|
||||
value = {
|
||||
type: 'HTMLElement',
|
||||
id: value.id,
|
||||
tagName: value.tagName
|
||||
}; // Replace DOM node with ID/tag info
|
||||
} else if (typeof value === 'symbol') {
|
||||
value = value.toString();
|
||||
} else if (typeof value === 'object' && value !== null) {
|
||||
value = makeSerializable(value);
|
||||
}
|
||||
|
||||
serializableObj[key] = value;
|
||||
} catch (error) {
|
||||
serializableObj[key] = `[Error: ${error.message}]`;
|
||||
}
|
||||
}
|
||||
|
||||
if (ownKeys.length > maxKeys) {
|
||||
serializableObj['...'] = `[${ownKeys.length - maxKeys} more properties]`;
|
||||
}
|
||||
|
||||
return serializableObj;
|
||||
} catch (error) {
|
||||
return `[Serialization Error: ${error.message}]`;
|
||||
} finally {
|
||||
visited.delete(obj); // Clean up for potential reuse
|
||||
}
|
||||
}
|
||||
|
||||
// Final safety check - recursively scan for any remaining functions
|
||||
function deepFunctionCheck(obj, path = "") {
|
||||
if (typeof obj === "function") {
|
||||
throw new Error(`Found function at path: ${path}`);
|
||||
}
|
||||
|
||||
if (obj && typeof obj === "object") {
|
||||
if (Array.isArray(obj)) {
|
||||
obj.forEach((item, index) => {
|
||||
deepFunctionCheck(item, `${path}[${index}]`);
|
||||
});
|
||||
} else {
|
||||
Object.keys(obj).forEach(key => {
|
||||
deepFunctionCheck(obj[key], path ? `${path}.${key}` : key);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("message", (event) => {
|
||||
window.addEventListener('message', (event) => {
|
||||
if (event.data.type === "reactFiberRequest") {
|
||||
const { selector, action, payload, debug, messageId } = event.data;
|
||||
const fiberInstance = ReactFiber.find(selector, {
|
||||
const {
|
||||
selector,
|
||||
action,
|
||||
payload,
|
||||
debug,
|
||||
messageId
|
||||
} = event.data;
|
||||
const fiberInstance = ReactFiber.find(selector, {
|
||||
debug
|
||||
});
|
||||
|
||||
let response;
|
||||
@@ -524,7 +167,7 @@ window.addEventListener("message", (event) => {
|
||||
case "setState":
|
||||
// Handle both function and object updates
|
||||
if (payload.updateFn) {
|
||||
const updateFn = new Function('return ' + payload.updateFn)();
|
||||
const updateFn = eval(`(${payload.updateFn})`);
|
||||
fiberInstance.setState(updateFn);
|
||||
} else {
|
||||
fiberInstance.setState(payload.updateObject);
|
||||
@@ -548,57 +191,14 @@ window.addEventListener("message", (event) => {
|
||||
response = null;
|
||||
}
|
||||
|
||||
if (response !== null && typeof response === "object") {
|
||||
if (response !== null && typeof response === 'object') {
|
||||
response = makeSerializable(response);
|
||||
}
|
||||
|
||||
// Final safety check before postMessage
|
||||
try {
|
||||
deepFunctionCheck(response);
|
||||
} catch (functionError) {
|
||||
console.warn("[pageState] Function detected in response, cleaning:", functionError.message);
|
||||
response = `[Cleaned Response - Function found at: ${functionError.message}]`;
|
||||
}
|
||||
|
||||
// Additional structured clone test
|
||||
try {
|
||||
// Test if the object can be cloned (same algorithm as postMessage)
|
||||
if (typeof structuredClone === 'function') {
|
||||
structuredClone(response);
|
||||
} else {
|
||||
// Fallback for older browsers - try JSON round-trip
|
||||
JSON.parse(JSON.stringify(response));
|
||||
}
|
||||
} catch (cloneError) {
|
||||
console.warn("[pageState] Response not cloneable, fallback:", cloneError.message);
|
||||
response = `[Uncloneable Response: ${cloneError.message}]`;
|
||||
}
|
||||
|
||||
window.postMessage(
|
||||
{
|
||||
window.postMessage({
|
||||
type: "reactFiberResponse",
|
||||
response,
|
||||
messageId,
|
||||
},
|
||||
"*",
|
||||
);
|
||||
} else if (event.data.type === "triggerKeyboardEvent") {
|
||||
// Handle keyboard event triggering from content script
|
||||
const { key, code, altKey, ctrlKey, metaKey, shiftKey, keyCode } = event.data;
|
||||
|
||||
const keyboardEvent = new KeyboardEvent('keydown', {
|
||||
key,
|
||||
code,
|
||||
keyCode: keyCode || 0,
|
||||
which: keyCode || 0,
|
||||
altKey: altKey || false,
|
||||
ctrlKey: ctrlKey || false,
|
||||
metaKey: metaKey || false,
|
||||
shiftKey: shiftKey || false,
|
||||
bubbles: true,
|
||||
cancelable: true
|
||||
});
|
||||
|
||||
document.dispatchEvent(keyboardEvent);
|
||||
}, "*");
|
||||
}
|
||||
});
|
||||
@@ -1,11 +1,7 @@
|
||||
import { BasePlugin } from "../../core/settings";
|
||||
import { type Plugin } from "@/plugins/core/types";
|
||||
import {
|
||||
defineSettings,
|
||||
numberSetting,
|
||||
Setting,
|
||||
} from "@/plugins/core/settingsHelpers";
|
||||
import styles from "./styles.css?inline";
|
||||
import { BasePlugin } from '../../core/settings';
|
||||
import { type Plugin } from '@/plugins/core/types';
|
||||
import { defineSettings, numberSetting, Setting } from '@/plugins/core/settingsHelpers';
|
||||
import styles from './styles.css?inline';
|
||||
|
||||
const settings = defineSettings({
|
||||
speed: numberSetting({
|
||||
@@ -14,8 +10,8 @@ const settings = defineSettings({
|
||||
description: "Controls how fast the background moves",
|
||||
min: 0.1,
|
||||
max: 2,
|
||||
step: 0.05,
|
||||
}),
|
||||
step: 0.05
|
||||
})
|
||||
});
|
||||
|
||||
class AnimatedBackgroundPluginClass extends BasePlugin<typeof settings> {
|
||||
@@ -26,10 +22,10 @@ class AnimatedBackgroundPluginClass extends BasePlugin<typeof settings> {
|
||||
const instance = new AnimatedBackgroundPluginClass();
|
||||
|
||||
const animatedBackgroundPlugin: Plugin<typeof settings> = {
|
||||
id: "animated-background",
|
||||
name: "Animated Background",
|
||||
description: "Adds an animated background to BetterSEQTA+",
|
||||
version: "1.0.0",
|
||||
id: 'animated-background',
|
||||
name: 'Animated Background',
|
||||
description: 'Adds an animated background to BetterSEQTA+',
|
||||
version: '1.0.0',
|
||||
disableToggle: true,
|
||||
styles: styles,
|
||||
settings: instance.settings,
|
||||
@@ -46,12 +42,12 @@ const animatedBackgroundPlugin: Plugin<typeof settings> = {
|
||||
const backgrounds = [
|
||||
{ classes: ["bg"] },
|
||||
{ classes: ["bg", "bg2"] },
|
||||
{ classes: ["bg", "bg3"] },
|
||||
{ classes: ["bg", "bg3"] }
|
||||
];
|
||||
|
||||
backgrounds.forEach(({ classes }) => {
|
||||
const bk = document.createElement("div");
|
||||
classes.forEach((cls) => bk.classList.add(cls));
|
||||
classes.forEach(cls => bk.classList.add(cls));
|
||||
container.insertBefore(bk, menu);
|
||||
});
|
||||
|
||||
@@ -59,23 +55,20 @@ const animatedBackgroundPlugin: Plugin<typeof settings> = {
|
||||
updateAnimationSpeed(api.settings.speed);
|
||||
|
||||
// Listen for speed changes
|
||||
const speedUnregister = api.settings.onChange(
|
||||
"speed",
|
||||
updateAnimationSpeed,
|
||||
);
|
||||
const speedUnregister = api.settings.onChange('speed', updateAnimationSpeed);
|
||||
|
||||
// Return cleanup function
|
||||
return () => {
|
||||
speedUnregister.unregister();
|
||||
// Remove background elements
|
||||
const backgrounds = document.getElementsByClassName("bg");
|
||||
Array.from(backgrounds).forEach((element) => element.remove());
|
||||
const backgrounds = document.getElementsByClassName('bg');
|
||||
Array.from(backgrounds).forEach(element => element.remove());
|
||||
};
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
function updateAnimationSpeed(speed: number) {
|
||||
const bgElements = document.getElementsByClassName("bg");
|
||||
const bgElements = document.getElementsByClassName('bg');
|
||||
Array.from(bgElements).forEach((element, index) => {
|
||||
const baseSpeed = index === 0 ? 3 : index === 1 ? 4 : 5;
|
||||
(element as HTMLElement).style.animationDuration = `${baseSpeed / speed}s`;
|
||||
|
||||
@@ -13,12 +13,12 @@ export function CreateBackground() {
|
||||
const backgrounds = [
|
||||
{ classes: ["bg"] },
|
||||
{ classes: ["bg", "bg2"] },
|
||||
{ classes: ["bg", "bg3"] },
|
||||
{ classes: ["bg", "bg3"] }
|
||||
];
|
||||
|
||||
backgrounds.forEach(({ classes }) => {
|
||||
const bk = document.createElement("div");
|
||||
classes.forEach((cls) => bk.classList.add(cls));
|
||||
classes.forEach(cls => bk.classList.add(cls));
|
||||
container.insertBefore(bk, menu);
|
||||
});
|
||||
}
|
||||
@@ -2,5 +2,5 @@ export function RemoveBackground() {
|
||||
const backgrounds = document.getElementsByClassName("bg");
|
||||
|
||||
// Convert HTMLCollection to Array and remove each element
|
||||
Array.from(backgrounds).forEach((element) => element.remove());
|
||||
Array.from(backgrounds).forEach(element => element.remove());
|
||||
}
|
||||
@@ -1,9 +1,5 @@
|
||||
import { BasePlugin } from "@/plugins/core/settings";
|
||||
import {
|
||||
booleanSetting,
|
||||
defineSettings,
|
||||
Setting,
|
||||
} from "@/plugins/core/settingsHelpers";
|
||||
import { booleanSetting, defineSettings, Setting } from "@/plugins/core/settingsHelpers";
|
||||
import { type Plugin } from "@/plugins/core/types";
|
||||
import stringToHTML from "@/seqta/utils/stringToHTML";
|
||||
import { waitForElm } from "@/seqta/utils/waitForElm";
|
||||
@@ -12,7 +8,7 @@ const settings = defineSettings({
|
||||
lettergrade: booleanSetting({
|
||||
default: false,
|
||||
title: "Letter Grades",
|
||||
description: "Display the average as a letter instead of a percentage",
|
||||
description: "Display the average as a letter instead of a percentage"
|
||||
}),
|
||||
});
|
||||
|
||||
@@ -38,105 +34,62 @@ const assessmentsAveragePlugin: Plugin<typeof settings> = {
|
||||
"#main > .assessmentsWrapper .assessments [class*='AssessmentItem__AssessmentItem___']",
|
||||
true,
|
||||
10,
|
||||
1000,
|
||||
1000
|
||||
);
|
||||
|
||||
// Helper function to find actual class names by their base pattern
|
||||
const getClassByPattern = (
|
||||
element: Element | Document,
|
||||
basePattern: string,
|
||||
): string => {
|
||||
const getClassByPattern = (element: Element | Document, basePattern: string): string => {
|
||||
// Find all classes on the element
|
||||
const classes = Array.from(element.querySelectorAll("*"))
|
||||
.flatMap((el) => Array.from(el.classList))
|
||||
.filter((className) => className.startsWith(basePattern));
|
||||
const classes = Array.from(element.querySelectorAll('*'))
|
||||
.flatMap(el => Array.from(el.classList))
|
||||
.filter(className => className.startsWith(basePattern));
|
||||
|
||||
return classes.length ? classes[0] : "";
|
||||
return classes.length ? classes[0] : '';
|
||||
};
|
||||
|
||||
// Find actual class names from the DOM
|
||||
const sampleAssessmentItem = document.querySelector(
|
||||
"[class*='AssessmentItem__AssessmentItem___']",
|
||||
);
|
||||
const sampleAssessmentItem = document.querySelector("[class*='AssessmentItem__AssessmentItem___']");
|
||||
if (!sampleAssessmentItem) return;
|
||||
|
||||
// Extract all necessary class patterns from a sample assessment item
|
||||
const assessmentItemClass =
|
||||
Array.from(sampleAssessmentItem.classList).find((c) =>
|
||||
c.startsWith("AssessmentItem__AssessmentItem___"),
|
||||
) || "";
|
||||
const assessmentItemClass = Array.from(sampleAssessmentItem.classList)
|
||||
.find(c => c.startsWith('AssessmentItem__AssessmentItem___')) || '';
|
||||
|
||||
const metaContainerClass = getClassByPattern(
|
||||
sampleAssessmentItem,
|
||||
"AssessmentItem__metaContainer___",
|
||||
);
|
||||
const metaClass = getClassByPattern(
|
||||
sampleAssessmentItem,
|
||||
"AssessmentItem__meta___",
|
||||
);
|
||||
const simpleResultClass = getClassByPattern(
|
||||
sampleAssessmentItem,
|
||||
"AssessmentItem__simpleResult___",
|
||||
);
|
||||
const titleClass = getClassByPattern(
|
||||
sampleAssessmentItem,
|
||||
"AssessmentItem__title___",
|
||||
);
|
||||
const metaContainerClass = getClassByPattern(sampleAssessmentItem, 'AssessmentItem__metaContainer___');
|
||||
const metaClass = getClassByPattern(sampleAssessmentItem, 'AssessmentItem__meta___');
|
||||
const simpleResultClass = getClassByPattern(sampleAssessmentItem, 'AssessmentItem__simpleResult___');
|
||||
const titleClass = getClassByPattern(sampleAssessmentItem, 'AssessmentItem__title___');
|
||||
|
||||
// Get Thermoscore classes
|
||||
const thermoscoreElement = document.querySelector(
|
||||
"[class*='Thermoscore__Thermoscore___']",
|
||||
);
|
||||
const thermoscoreElement = document.querySelector("[class*='Thermoscore__Thermoscore___']");
|
||||
if (!thermoscoreElement) return;
|
||||
|
||||
const thermoscoreClass =
|
||||
Array.from(thermoscoreElement.classList).find((c) =>
|
||||
c.startsWith("Thermoscore__Thermoscore___"),
|
||||
) || "";
|
||||
const fillClass = getClassByPattern(
|
||||
thermoscoreElement,
|
||||
"Thermoscore__fill___",
|
||||
);
|
||||
const textClass = getClassByPattern(
|
||||
thermoscoreElement,
|
||||
"Thermoscore__text___",
|
||||
);
|
||||
const thermoscoreClass = Array.from(thermoscoreElement.classList)
|
||||
.find(c => c.startsWith('Thermoscore__Thermoscore___')) || '';
|
||||
const fillClass = getClassByPattern(thermoscoreElement, 'Thermoscore__fill___');
|
||||
const textClass = getClassByPattern(thermoscoreElement, 'Thermoscore__text___');
|
||||
|
||||
// Find assessment list
|
||||
const assessmentsList = document.querySelector(
|
||||
"#main > .assessmentsWrapper .assessments [class*='AssessmentList__items___']",
|
||||
);
|
||||
const assessmentsList = document.querySelector("#main > .assessmentsWrapper .assessments [class*='AssessmentList__items___']");
|
||||
if (!assessmentsList) return;
|
||||
|
||||
const gradeElements = document.querySelectorAll(
|
||||
"[class*='Thermoscore__text___']",
|
||||
);
|
||||
const gradeElements = document.querySelectorAll("[class*='Thermoscore__text___']");
|
||||
if (!gradeElements.length) return;
|
||||
|
||||
// Parse and average grades
|
||||
const letterToNumber: Record<string, number> = {
|
||||
"A+": 100,
|
||||
A: 95,
|
||||
"A-": 90,
|
||||
"B+": 85,
|
||||
B: 80,
|
||||
"B-": 75,
|
||||
"C+": 70,
|
||||
C: 65,
|
||||
"C-": 60,
|
||||
"D+": 55,
|
||||
D: 50,
|
||||
"D-": 45,
|
||||
"E+": 40,
|
||||
E: 35,
|
||||
"E-": 30,
|
||||
"A+": 100, A: 95, "A-": 90,
|
||||
"B+": 85, B: 80, "B-": 75,
|
||||
"C+": 70, C: 65, "C-": 60,
|
||||
"D+": 55, D: 50, "D-": 45,
|
||||
"E+": 40, E: 35, "E-": 30,
|
||||
F: 0,
|
||||
};
|
||||
|
||||
function parseGrade(text: string): number {
|
||||
const str = text.trim().toUpperCase();
|
||||
if (str.includes("/")) {
|
||||
const [raw, max] = str.split("/").map((n) => parseFloat(n));
|
||||
const [raw, max] = str.split("/").map(n => parseFloat(n));
|
||||
return (raw / max) * 100;
|
||||
}
|
||||
if (str.includes("%")) {
|
||||
@@ -159,23 +112,16 @@ const assessmentsAveragePlugin: Plugin<typeof settings> = {
|
||||
|
||||
const avg = total / count;
|
||||
const rounded = Math.ceil(avg / 5) * 5;
|
||||
const numberToLetter = Object.entries(letterToNumber).reduce(
|
||||
(acc, [k, v]) => {
|
||||
const numberToLetter = Object.entries(letterToNumber).reduce((acc, [k, v]) => {
|
||||
acc[v] = k;
|
||||
return acc;
|
||||
},
|
||||
{} as Record<number, string>,
|
||||
);
|
||||
}, {} as Record<number, string>);
|
||||
|
||||
const letterAvg = numberToLetter[rounded] ?? "N/A";
|
||||
const display = api.settings.lettergrade
|
||||
? letterAvg
|
||||
: `${avg.toFixed(2)}%`;
|
||||
const display = api.settings.lettergrade ? letterAvg : `${avg.toFixed(2)}%`;
|
||||
|
||||
// Prevent duplicate
|
||||
const existing = assessmentsList.querySelector(
|
||||
`[class*='AssessmentItem__title___']`,
|
||||
);
|
||||
const existing = assessmentsList.querySelector(`[class*='AssessmentItem__title___']`);
|
||||
if (existing?.textContent === "Subject Average") return;
|
||||
|
||||
// Use the dynamic class names in the HTML template
|
||||
@@ -198,7 +144,7 @@ const assessmentsAveragePlugin: Plugin<typeof settings> = {
|
||||
|
||||
assessmentsList.insertBefore(averageElement!, assessmentsList.firstChild);
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
export default assessmentsAveragePlugin;
|
||||
@@ -1,384 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { determineStatus, formatDate, getGradeValue } from "./utils";
|
||||
import { settingsState } from "@/seqta/utils/listeners/SettingsState";
|
||||
import confetti from "canvas-confetti";
|
||||
|
||||
export let data: any;
|
||||
|
||||
interface FilterOptions {
|
||||
subject: string;
|
||||
sortBy: "due" | "grade" | "subject" | "title";
|
||||
}
|
||||
|
||||
function percentageToLetter(percentage: number): string {
|
||||
const letterMap: Record<number, string> = {
|
||||
100: "A+",
|
||||
95: "A",
|
||||
90: "A-",
|
||||
85: "B+",
|
||||
80: "B",
|
||||
75: "B-",
|
||||
70: "C+",
|
||||
65: "C",
|
||||
60: "C-",
|
||||
55: "D+",
|
||||
50: "D",
|
||||
45: "D-",
|
||||
40: "E+",
|
||||
35: "E",
|
||||
30: "E-",
|
||||
0: "F",
|
||||
};
|
||||
|
||||
const rounded = Math.ceil(percentage / 5) * 5;
|
||||
return letterMap[rounded] || "F";
|
||||
}
|
||||
|
||||
let currentFilters: FilterOptions = {
|
||||
subject: "all",
|
||||
sortBy: "due",
|
||||
};
|
||||
|
||||
let filteredAssessments: any[] = [];
|
||||
let statusGroups: Record<string, any[]> = {};
|
||||
|
||||
function updateAssessments() {
|
||||
filteredAssessments = data.assessments.filter((a: any) => {
|
||||
const subjectMatch =
|
||||
currentFilters.subject === "all" || a.code === currentFilters.subject;
|
||||
return subjectMatch;
|
||||
});
|
||||
|
||||
filteredAssessments.sort((a: any, b: any) => {
|
||||
switch (currentFilters.sortBy) {
|
||||
case "due":
|
||||
return new Date(a.due).getTime() - new Date(b.due).getTime();
|
||||
case "grade":
|
||||
const gradeA = getGradeValue(a);
|
||||
const gradeB = getGradeValue(b);
|
||||
if (gradeA === null && gradeB === null) return 0;
|
||||
if (gradeA === null) return 1;
|
||||
if (gradeB === null) return -1;
|
||||
return gradeB - gradeA;
|
||||
case "subject":
|
||||
return a.code.localeCompare(b.code);
|
||||
case "title":
|
||||
return a.title.localeCompare(b.title);
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
|
||||
statusGroups = {
|
||||
UPCOMING: [],
|
||||
DUE_SOON: [],
|
||||
OVERDUE: [],
|
||||
SUBMITTED: [],
|
||||
MARKS_RELEASED: [],
|
||||
};
|
||||
|
||||
filteredAssessments.forEach((assessment) => {
|
||||
const status = determineStatus(assessment);
|
||||
if (statusGroups[status]) {
|
||||
statusGroups[status].push(assessment);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getDueDateClass(assessment: any): string {
|
||||
const status = determineStatus(assessment);
|
||||
switch (status) {
|
||||
case "OVERDUE":
|
||||
return "overdue";
|
||||
case "DUE_SOON":
|
||||
return "due-soon";
|
||||
case "UPCOMING":
|
||||
return "upcoming";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
function markAssessmentCompleted(assessment: any) {
|
||||
const completedKey = "betterseqta-completed-assessments";
|
||||
const completed = JSON.parse(localStorage.getItem(completedKey) || "[]");
|
||||
|
||||
if (!completed.includes(assessment.id)) {
|
||||
completed.push(assessment.id);
|
||||
localStorage.setItem(completedKey, JSON.stringify(completed));
|
||||
updateAssessments();
|
||||
checkForCelebration();
|
||||
}
|
||||
}
|
||||
|
||||
function unmarkAssessmentCompleted(assessment: any) {
|
||||
const completedKey = "betterseqta-completed-assessments";
|
||||
const completed = JSON.parse(localStorage.getItem(completedKey) || "[]");
|
||||
|
||||
const index = completed.indexOf(assessment.id);
|
||||
if (index > -1) {
|
||||
completed.splice(index, 1);
|
||||
localStorage.setItem(completedKey, JSON.stringify(completed));
|
||||
updateAssessments();
|
||||
}
|
||||
}
|
||||
|
||||
function checkForCelebration() {
|
||||
const overdueCount = statusGroups.OVERDUE?.length || 0;
|
||||
const dueSoonCount = statusGroups.DUE_SOON?.length || 0;
|
||||
|
||||
if (overdueCount === 0 && dueSoonCount === 0) {
|
||||
setTimeout(() => {
|
||||
try {
|
||||
const duration = 100;
|
||||
const end = Date.now() + duration;
|
||||
|
||||
(function frame() {
|
||||
confetti({
|
||||
particleCount: 17,
|
||||
angle: 60,
|
||||
spread: 65,
|
||||
drift: 0.8,
|
||||
startVelocity: 40,
|
||||
scalar: 2,
|
||||
gravity: 2,
|
||||
decay: 0.97,
|
||||
ticks: 300,
|
||||
origin: { x: 0, y: 1 },
|
||||
disableForReducedMotion: true,
|
||||
});
|
||||
|
||||
confetti({
|
||||
particleCount: 17,
|
||||
angle: 120,
|
||||
spread: 65,
|
||||
drift: -0.8,
|
||||
startVelocity: 40,
|
||||
scalar: 2,
|
||||
decay: 0.97,
|
||||
ticks: 300,
|
||||
gravity: 2,
|
||||
origin: { x: 1, y: 1 },
|
||||
disableForReducedMotion: true,
|
||||
});
|
||||
|
||||
if (Date.now() < end) {
|
||||
requestAnimationFrame(frame);
|
||||
}
|
||||
}());
|
||||
} catch (e) {
|
||||
console.log("Confetti celebration failed:", e);
|
||||
}
|
||||
}, 500);
|
||||
} else if (overdueCount === 0 || dueSoonCount === 0) {
|
||||
setTimeout(() => {
|
||||
try {
|
||||
confetti({
|
||||
particleCount: 100,
|
||||
spread: 70,
|
||||
origin: { y: 0.6 },
|
||||
scalar: 0.9,
|
||||
disableForReducedMotion: true,
|
||||
});
|
||||
} catch (e) {
|
||||
console.log("Confetti celebration failed:", e);
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
|
||||
function isManuallyCompleted(assessmentId: string): boolean {
|
||||
const completedKey = "betterseqta-completed-assessments";
|
||||
const completed = JSON.parse(localStorage.getItem(completedKey) || "[]");
|
||||
return completed.includes(assessmentId);
|
||||
}
|
||||
|
||||
function handleCardClick(assessment: any, event: Event) {
|
||||
if ((event.target as HTMLElement).closest(".card-menu")) {
|
||||
return;
|
||||
}
|
||||
window.location.hash = `#?page=/assessments/${assessment.programmeID}:${assessment.metaclassID}&item=${assessment.id}`;
|
||||
}
|
||||
|
||||
let openMenuId: string | null = null;
|
||||
|
||||
function toggleMenu(assessmentId: string, event: Event) {
|
||||
event.stopPropagation();
|
||||
openMenuId = openMenuId === assessmentId ? null : assessmentId;
|
||||
}
|
||||
|
||||
function closeAllMenus() {
|
||||
openMenuId = null;
|
||||
}
|
||||
|
||||
$: {
|
||||
if (data) {
|
||||
updateAssessments();
|
||||
}
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{
|
||||
key: "UPCOMING",
|
||||
title: "Upcoming",
|
||||
className: "column-upcoming",
|
||||
icon: "📅",
|
||||
},
|
||||
{
|
||||
key: "DUE_SOON",
|
||||
title: "Due Soon",
|
||||
className: "column-due-soon",
|
||||
icon: "⏰",
|
||||
},
|
||||
{
|
||||
key: "OVERDUE",
|
||||
title: "Overdue",
|
||||
className: "column-overdue",
|
||||
icon: "🚨",
|
||||
},
|
||||
{
|
||||
key: "SUBMITTED",
|
||||
title: "Submitted",
|
||||
className: "column-submitted",
|
||||
icon: "📝",
|
||||
},
|
||||
{
|
||||
key: "MARKS_RELEASED",
|
||||
title: "Marked",
|
||||
className: "column-marked",
|
||||
icon: "✅",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<svelte:window on:click={closeAllMenus} />
|
||||
|
||||
<div id="grid-view-container">
|
||||
<div class="grid-view-header">
|
||||
<h1 class="grid-view-title">Assessments</h1>
|
||||
<div class="grid-view-filters">
|
||||
<select class="filter-select" bind:value={currentFilters.subject}>
|
||||
<option value="all">All Subjects</option>
|
||||
{#each data.subjects as subject}
|
||||
<option value={subject.code}>{subject.code} - {subject.title}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<select class="filter-select" bind:value={currentFilters.sortBy}>
|
||||
<option value="due">Sort by Due Date</option>
|
||||
<option value="grade">Sort by Grade</option>
|
||||
<option value="subject">Sort by Subject</option>
|
||||
<option value="title">Sort by Title</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="main-grid-content">
|
||||
{#if filteredAssessments.length === 0}
|
||||
<div class="empty-state">
|
||||
<div class="empty-icon">📋</div>
|
||||
<p>No assessments found matching your filters</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="kanban-board">
|
||||
{#each columns as column}
|
||||
{#if statusGroups[column.key]?.length > 0}
|
||||
<div class="kanban-column-parent">
|
||||
<div class="kanban-column {column.className}">
|
||||
<div class="column-header">
|
||||
<div class="column-title">
|
||||
{column.icon} {column.title}
|
||||
<span class="column-count">{statusGroups[column.key].length}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column-cards" id="{column.key.toLowerCase()}-cards">
|
||||
{#each statusGroups[column.key] as assessment}
|
||||
{@const status = determineStatus(assessment)}
|
||||
{@const dueDateClass = getDueDateClass(assessment)}
|
||||
{@const isCompleted = isManuallyCompleted(assessment.id)}
|
||||
{@const color = data.colors[assessment.code] || "#6366f1"}
|
||||
<div
|
||||
class="assessment-card"
|
||||
data-subject={assessment.code}
|
||||
data-status={status}
|
||||
style="--subject-color: {color}"
|
||||
on:click={(e) => handleCardClick(assessment, e)}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
on:keydown={(e) => e.key === 'Enter' && handleCardClick(assessment, e)}
|
||||
>
|
||||
<div class="card-labels">
|
||||
<span class="card-label label-subject">{assessment.code}</span>
|
||||
{#if assessment.submitted}
|
||||
<span class="card-label label-submitted" style="background: #10b981; color: white;">Submitted</span>
|
||||
{/if}
|
||||
{#if isCompleted && status === "MARKS_RELEASED" && !assessment.results}
|
||||
<span class="card-label label-completed" style="background: #059669; color: white;">Completed</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if status !== "MARKS_RELEASED" || isCompleted}
|
||||
<div class="card-menu">
|
||||
<button
|
||||
class="menu-button"
|
||||
data-assessment-id={assessment.id}
|
||||
on:click={(e) => toggleMenu(assessment.id, e)}
|
||||
aria-label="Open menu"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||
<circle cx="12" cy="5" r="2"/>
|
||||
<circle cx="12" cy="12" r="2"/>
|
||||
<circle cx="12" cy="19" r="2"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="menu-dropdown" style="display: {openMenuId === assessment.id ? 'block' : 'none'};">
|
||||
{#if status !== "MARKS_RELEASED"}
|
||||
<button class="menu-item mark-completed" on:click={() => markAssessmentCompleted(assessment)}>
|
||||
Mark as Completed
|
||||
</button>
|
||||
{:else if isCompleted}
|
||||
<button class="menu-item mark-not-completed" on:click={() => unmarkAssessmentCompleted(assessment)}>
|
||||
Mark as Not Complete
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<h3 class="assessment-title">{assessment.title}</h3>
|
||||
|
||||
{#if !assessment.results && !isCompleted}
|
||||
<div class="assessment-meta">
|
||||
<div class="due-date {dueDateClass}">
|
||||
📅 {formatDate(assessment.due, assessment.submitted)}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if assessment.results}
|
||||
<div class="card-footer">
|
||||
<div class="Thermoscore__Thermoscore___WFpL3" style="--fill-colour: {color}">
|
||||
<div style="width: {assessment.results.percentage}%" class="Thermoscore__fill___ojxDI">
|
||||
<div title="{assessment.results.percentage}%" class="Thermoscore__text___XSR_M">
|
||||
{(() => {
|
||||
const allSettings = settingsState.getAll() as unknown as any;
|
||||
const letterGradeSetting = allSettings["plugin.assessments-average.settings"]?.lettergrade;
|
||||
return letterGradeSetting
|
||||
? percentageToLetter(assessment.results.percentage)
|
||||
: `${assessment.results.percentage}%`;
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,8 +0,0 @@
|
||||
<script lang="ts">
|
||||
export let error: string;
|
||||
</script>
|
||||
|
||||
<div class="error-container">
|
||||
<p class="error-text">Failed to load assessments</p>
|
||||
<p style="color: #94a3b8; font-size: 0.875rem;">{error}</p>
|
||||
</div>
|
||||
@@ -1,78 +0,0 @@
|
||||
<div id="grid-view-container">
|
||||
<div class="grid-view-header">
|
||||
<h1 class="grid-view-title">Assessments</h1>
|
||||
<div class="grid-view-filters">
|
||||
<select class="filter-select" disabled>
|
||||
<option value="all">Loading subjects...</option>
|
||||
</select>
|
||||
<select class="filter-select" disabled>
|
||||
<option value="due">Sort by Due Date</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="main-grid-content">
|
||||
<div class="kanban-board">
|
||||
{#each columns as column}
|
||||
<div class="kanban-column-parent">
|
||||
<div class="kanban-column {column.className}">
|
||||
<div class="column-header">
|
||||
<div class="column-title">
|
||||
{column.icon} {column.title}
|
||||
<span class="column-count">...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column-cards" id="{column.key.toLowerCase()}-cards">
|
||||
{#each Array(column.skeletonCount) as _}
|
||||
<div class="assessment-card">
|
||||
<div class="skeleton-element skeleton-label"></div>
|
||||
<div class="skeleton-element skeleton-title"></div>
|
||||
<div class="skeleton-element skeleton-title-line2"></div>
|
||||
<div class="skeleton-element skeleton-meta"></div>
|
||||
{#if column.key === "MARKS_RELEASED"}
|
||||
<div class="skeleton-footer">
|
||||
<div class="skeleton-element" style="height: 16px; width: 100%;"></div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script lang="ts">
|
||||
const columns = [
|
||||
{
|
||||
key: "UPCOMING",
|
||||
title: "Upcoming",
|
||||
className: "column-upcoming",
|
||||
icon: "📅",
|
||||
skeletonCount: 3,
|
||||
},
|
||||
{
|
||||
key: "DUE_SOON",
|
||||
title: "Due Soon",
|
||||
className: "column-due-soon",
|
||||
icon: "⏰",
|
||||
skeletonCount: 2,
|
||||
},
|
||||
{
|
||||
key: "OVERDUE",
|
||||
title: "Overdue",
|
||||
className: "column-overdue",
|
||||
icon: "🚨",
|
||||
skeletonCount: 1,
|
||||
},
|
||||
{
|
||||
key: "MARKS_RELEASED",
|
||||
title: "Marked",
|
||||
className: "column-marked",
|
||||
icon: "✅",
|
||||
skeletonCount: 4,
|
||||
},
|
||||
];
|
||||
</script>
|
||||
@@ -1,138 +0,0 @@
|
||||
interface Subject {
|
||||
code: string;
|
||||
programme: number;
|
||||
metaclass: number;
|
||||
title: string;
|
||||
}
|
||||
interface PrefItem {
|
||||
name: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
import { settingsState } from "@/seqta/utils/listeners/SettingsState";
|
||||
import { getMockAssessmentsData } from "@/seqta/ui/dev/hideSensitiveContent";
|
||||
|
||||
let cache: { time: number; data: any } | null = null;
|
||||
const CACHE_MS = 10 * 60 * 1000;
|
||||
const student = 69;
|
||||
|
||||
async function fetchJSON(url: string, body: any) {
|
||||
const res = await fetch(`${location.origin}${url}`, {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: { "Content-Type": "application/json; charset=utf-8" },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
return res.json();
|
||||
}
|
||||
|
||||
async function loadSubjects() {
|
||||
const res = await fetchJSON("/seqta/student/load/subjects?", {});
|
||||
return res.payload
|
||||
.filter((s: any) => s.active === 1)
|
||||
.flatMap((s: any) => s.subjects);
|
||||
}
|
||||
|
||||
async function loadPrefs(student: number) {
|
||||
const res = await fetchJSON("/seqta/student/load/prefs?", {
|
||||
request: "userPrefs",
|
||||
asArray: true,
|
||||
user: student,
|
||||
});
|
||||
const colors: Record<string, string> = {};
|
||||
res.payload.forEach((p: PrefItem) => {
|
||||
if (p.name.startsWith("timetable.subject.colour.")) {
|
||||
const code = p.name.replace("timetable.subject.colour.", "");
|
||||
colors[code] = p.value;
|
||||
}
|
||||
});
|
||||
return colors;
|
||||
}
|
||||
|
||||
async function loadUpcoming(student: number) {
|
||||
const res = await fetchJSON("/seqta/student/assessment/list/upcoming?", {
|
||||
student,
|
||||
});
|
||||
return res.payload;
|
||||
}
|
||||
|
||||
async function loadPast(student: number, subjects: Subject[]) {
|
||||
const map: Record<number, any> = {};
|
||||
await Promise.all(
|
||||
subjects.map(async (s) => {
|
||||
const res = await fetchJSON("/seqta/student/assessment/list/past?", {
|
||||
programme: s.programme,
|
||||
metaclass: s.metaclass,
|
||||
student,
|
||||
});
|
||||
if (res.payload.tasks) {
|
||||
res.payload.tasks.forEach((t: any) => {
|
||||
map[t.id] = t;
|
||||
});
|
||||
}
|
||||
}),
|
||||
);
|
||||
return map;
|
||||
}
|
||||
|
||||
async function loadSubmissions(student: number, assessments: any[]) {
|
||||
const submissionMap: Record<number, boolean> = {};
|
||||
|
||||
await Promise.all(
|
||||
assessments.map(async (assessment) => {
|
||||
try {
|
||||
const res = await fetchJSON(
|
||||
"/seqta/student/assessment/submissions/get",
|
||||
{
|
||||
assessment: assessment.id,
|
||||
metaclass: assessment.metaclassID,
|
||||
student,
|
||||
},
|
||||
);
|
||||
|
||||
submissionMap[assessment.id] = res.payload && res.payload.length > 0;
|
||||
} catch (error) {
|
||||
console.warn(
|
||||
`Failed to fetch submission for assessment ${assessment.id}:`,
|
||||
error,
|
||||
);
|
||||
submissionMap[assessment.id] = false;
|
||||
}
|
||||
}),
|
||||
);
|
||||
|
||||
return submissionMap;
|
||||
}
|
||||
|
||||
export async function getAssessmentsData() {
|
||||
if (settingsState.mockNotices) {
|
||||
return getMockAssessmentsData();
|
||||
}
|
||||
|
||||
if (cache && Date.now() - cache.time < CACHE_MS) return cache.data;
|
||||
const [subjects, colors, upcoming] = await Promise.all([
|
||||
loadSubjects(),
|
||||
loadPrefs(student),
|
||||
loadUpcoming(student),
|
||||
]);
|
||||
const pastMap = await loadPast(student, subjects);
|
||||
const map: Record<number, any> = {};
|
||||
upcoming.forEach((a: any) => {
|
||||
map[a.id] = { ...a };
|
||||
});
|
||||
Object.values(pastMap).forEach((t: any) => {
|
||||
if (map[t.id]) Object.assign(map[t.id], t);
|
||||
else map[t.id] = t;
|
||||
});
|
||||
|
||||
const allAssessments = Object.values(map);
|
||||
const submissions = await loadSubmissions(student, allAssessments);
|
||||
|
||||
allAssessments.forEach((assessment: any) => {
|
||||
assessment.submitted = submissions[assessment.id] || false;
|
||||
});
|
||||
|
||||
const data = { assessments: allAssessments, subjects, colors };
|
||||
cache = { time: Date.now(), data };
|
||||
return data;
|
||||
}
|
||||
@@ -1,86 +0,0 @@
|
||||
import type { Plugin } from "../../core/types";
|
||||
import { waitForElm } from "@/seqta/utils/waitForElm";
|
||||
import { getAssessmentsData } from "./api";
|
||||
import { renderSkeletonLoader, renderErrorState } from "./ui";
|
||||
import styles from "./styles.css?inline";
|
||||
import { delay } from "@/seqta/utils/delay";
|
||||
|
||||
const assessmentsOverviewPlugin: Plugin<{}> = {
|
||||
id: "assessments-overview",
|
||||
name: "Assessments Overview",
|
||||
description:
|
||||
"Adds an overview option to the assessments page that organizes assessments by status",
|
||||
version: "1.0.0",
|
||||
settings: {},
|
||||
disableToggle: false,
|
||||
styles,
|
||||
|
||||
run: async () => {
|
||||
const menu = (await waitForElm(
|
||||
'[data-key="assessments"] > .sub > ul',
|
||||
true,
|
||||
100,
|
||||
60,
|
||||
)) as HTMLElement;
|
||||
const gridItem = document.createElement("li");
|
||||
gridItem.className = "item";
|
||||
const label = document.createElement("label");
|
||||
label.textContent = "Overview";
|
||||
gridItem.appendChild(label);
|
||||
menu.insertBefore(gridItem, menu.children[1] || null);
|
||||
|
||||
if (window.location.hash.includes("/assessments/overview")) {
|
||||
loadGridView();
|
||||
}
|
||||
|
||||
const clickHandler = (e: Event) => {
|
||||
e.preventDefault();
|
||||
loadGridView();
|
||||
};
|
||||
gridItem.addEventListener("click", clickHandler);
|
||||
|
||||
async function loadGridView() {
|
||||
await delay(1);
|
||||
window.history.pushState({}, "", "/#?page=/assessments/overview");
|
||||
document.title = "Overview ― SEQTA Learn";
|
||||
const main = document.getElementById("main");
|
||||
if (!main) return;
|
||||
|
||||
document
|
||||
.querySelectorAll('[data-key="assessments"] .item')
|
||||
.forEach((item) => {
|
||||
item.classList.remove("active");
|
||||
});
|
||||
gridItem.classList.add("active");
|
||||
document
|
||||
.querySelector('[data-key="assessments"]')
|
||||
?.classList.add("active");
|
||||
|
||||
main.innerHTML = '<div id="grid-view-container"></div>';
|
||||
const container = document.getElementById(
|
||||
"grid-view-container",
|
||||
) as HTMLElement;
|
||||
|
||||
renderSkeletonLoader(container);
|
||||
|
||||
try {
|
||||
const data = await getAssessmentsData();
|
||||
const { renderGrid } = await import("./ui");
|
||||
renderGrid(container, data);
|
||||
} catch (err) {
|
||||
console.error("Failed to load assessments:", err);
|
||||
renderErrorState(
|
||||
container,
|
||||
err instanceof Error ? err.message : "Unknown error",
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return () => {
|
||||
gridItem.removeEventListener("click", clickHandler);
|
||||
gridItem.remove();
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
export default assessmentsOverviewPlugin;
|
||||
@@ -1,798 +0,0 @@
|
||||
#grid-view-container {
|
||||
background: transparent;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.grid-view-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.grid-view-title {
|
||||
font-size: 1.875rem !important;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Dark mode support */
|
||||
.dark .grid-view-title {
|
||||
color: #f8fafc;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.grid-view-filters {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
background: #ffffff !important;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
color: #1a1a1a;
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.filter-select:focus {
|
||||
outline: none;
|
||||
border-color: #d41e3a;
|
||||
box-shadow: 0 0 0 3px rgba(212, 30, 58, 0.1);
|
||||
}
|
||||
|
||||
.filter-select:hover {
|
||||
border-color: #cbd5e1;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Dark mode dropdowns */
|
||||
.dark .filter-select {
|
||||
background: var(--background-primary) !important;
|
||||
border-color: var(--background-secondary);
|
||||
color: var(--text-primary);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.dark .filter-select:focus {
|
||||
border-color: #d41e3a;
|
||||
box-shadow: 0 0 0 3px rgba(212, 30, 58, 0.2);
|
||||
}
|
||||
|
||||
.dark .filter-select:hover {
|
||||
border-color: var(--background-secondary);
|
||||
background: var(--background-secondary);
|
||||
}
|
||||
|
||||
.dark .filter-select option {
|
||||
background: var(--background-primary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
#main-grid-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Kanban Board Layout */
|
||||
.kanban-board {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
overflow-x: auto;
|
||||
padding: 1rem;
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
.kanban-column-parent {
|
||||
flex: 0 0 320px;
|
||||
|
||||
}
|
||||
|
||||
.kanban-column {
|
||||
max-height: 100%;
|
||||
background: #f8fafc;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 0 0 2px #e2e8f0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Dark mode columns */
|
||||
.dark .kanban-column {
|
||||
background: var(--background-primary);
|
||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.column-header {
|
||||
padding: 1rem 1.25rem;
|
||||
border-bottom: 2px solid #e2e8f0;
|
||||
background: #ffffff;
|
||||
border-radius: 12px 12px 0 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Dark mode column headers */
|
||||
.dark .column-header {
|
||||
background: var(--background-secondary);
|
||||
border-bottom-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.column-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.dark .column-title {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.column-count {
|
||||
background: #e2e8f0;
|
||||
color: #64748b;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dark .column-count {
|
||||
background: var(--background-secondary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.column-cards {
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Assessment Cards */
|
||||
.assessment-card {
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
border-left: 4px solid var(--subject-color, #d41e3a);
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.assessment-card:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-1px);
|
||||
border-color: #cbd5e1;
|
||||
}
|
||||
|
||||
/* Dark mode cards */
|
||||
.dark .assessment-card {
|
||||
background: var(--background-secondary);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.dark .assessment-card:hover {
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.card-labels {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.card-label {
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
.label-subject {
|
||||
background: var(--subject-color, #d41e3a);
|
||||
}
|
||||
|
||||
.card-menu {
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
right: 0.75rem;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
padding: 0.25rem !important;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
color: #64748b;
|
||||
transition: all 0.2s ease;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
margin: 0 !important;
|
||||
position: static !important;
|
||||
transform: none !important;
|
||||
box-shadow: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.menu-button:hover {
|
||||
background: #f1f5f9 !important;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.menu-button svg {
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
fill: currentColor !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.dark .menu-button {
|
||||
color: var(--text-primary);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.dark .menu-button:hover {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.menu-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
min-width: 140px;
|
||||
z-index: 30;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.dark .menu-dropdown {
|
||||
background: var(--background-secondary);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
color: #1a1a1a;
|
||||
transition: background-color 0.2s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.dark .menu-item {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dark .menu-item:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.menu-item.mark-completed {
|
||||
color: #059669;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dark .menu-item.mark-completed {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.menu-item.mark-not-completed {
|
||||
color: #dc2626;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dark .menu-item.mark-not-completed {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.assessment-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin: 0 0 0.75rem 0;
|
||||
line-height: 1.4;
|
||||
padding-right: 2rem; /* Make room for menu button */
|
||||
}
|
||||
|
||||
.dark .assessment-title {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.assessment-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.dark .assessment-meta {
|
||||
color: var(--text-primary);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.due-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.due-date.overdue {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.due-date.due-soon {
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.due-date.upcoming {
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-top: 0.75rem;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.dark .card-footer {
|
||||
border-top-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.grade-display {
|
||||
font-weight: 700;
|
||||
font-size: 0.875rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.grade-good {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
color: #059669;
|
||||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.grade-average {
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
color: #d97706;
|
||||
border: 1px solid rgba(245, 158, 11, 0.2);
|
||||
}
|
||||
|
||||
.grade-bad {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: #dc2626;
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
.grade-empty {
|
||||
color: #64748b;
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
background: #f1f5f9;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.dark .grade-empty {
|
||||
color: var(--text-primary);
|
||||
opacity: 0.7;
|
||||
background: var(--background-secondary);
|
||||
border-color: var(--background-secondary);
|
||||
}
|
||||
|
||||
/* Column-specific styling */
|
||||
.column-upcoming .column-header {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
|
||||
}
|
||||
|
||||
.column-due-soon .column-header {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
|
||||
}
|
||||
|
||||
.column-overdue .column-header {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
|
||||
}
|
||||
|
||||
.column-submitted .column-header {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #fef3c7 100%);
|
||||
}
|
||||
|
||||
.column-marked .column-header {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
|
||||
}
|
||||
|
||||
/* Dark mode column headers */
|
||||
.dark .column-upcoming .column-header {
|
||||
background: linear-gradient(135deg, var(--background-secondary) 0%, #1e3a8a 100%);
|
||||
}
|
||||
|
||||
.dark .column-due-soon .column-header {
|
||||
background: linear-gradient(135deg, var(--background-secondary) 0%, #92400e 100%);
|
||||
}
|
||||
|
||||
.dark .column-overdue .column-header {
|
||||
background: linear-gradient(135deg, var(--background-secondary) 0%, #991b1b 100%);
|
||||
}
|
||||
|
||||
.dark .column-submitted .column-header {
|
||||
background: linear-gradient(135deg, var(--background-secondary) 0%, #92400e 100%);
|
||||
}
|
||||
|
||||
.dark .column-marked .column-header {
|
||||
background: linear-gradient(135deg, var(--background-secondary) 0%, #065f46 100%);
|
||||
}
|
||||
|
||||
/* Subject filter view */
|
||||
.subject-section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.subject-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
padding: 1rem;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-left: 4px solid var(--subject-color, #d41e3a);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dark .subject-header {
|
||||
background: var(--background-secondary);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.subject-indicator {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.subject-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dark .subject-title {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.subject-code {
|
||||
font-size: 0.875rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.dark .subject-code {
|
||||
color: var(--text-primary);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Loading and error states */
|
||||
.loading-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 4rem 0;
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
border: 2px solid #e2e8f0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dark .loading-container {
|
||||
background: var(--background-primary);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border: 3px solid #e2e8f0;
|
||||
border-top: 3px solid #d41e3a;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.dark .loading-spinner {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
border-top-color: #d41e3a;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
margin-top: 1rem;
|
||||
color: #64748b;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dark .loading-text {
|
||||
color: var(--text-primary);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.error-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 4rem 0;
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
border: 2px solid #fecaca;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dark .error-container {
|
||||
background: var(--background-primary);
|
||||
border-color: #991b1b;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: #ef4444;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
color: #64748b;
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dark .empty-state {
|
||||
color: var(--text-primary);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.empty-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem 1rem;
|
||||
color: #64748b;
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.dark .empty-column {
|
||||
color: var(--text-primary);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -1000px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 1000px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton-element {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#f1f5f9 0%,
|
||||
#e2e8f0 50%,
|
||||
#f1f5f9 100%
|
||||
);
|
||||
background-size: 1000px 100%;
|
||||
animation: shimmer 2s infinite linear;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.dark .skeleton-element {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--background-primary) 0%,
|
||||
var(--background-secondary) 50%,
|
||||
var(--background-primary) 100%
|
||||
);
|
||||
background-size: 1000px 100%;
|
||||
}
|
||||
|
||||
.skeleton-label {
|
||||
height: 20px;
|
||||
width: 60px;
|
||||
margin-bottom: 0.75rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.skeleton-title {
|
||||
height: 16px;
|
||||
width: 80%;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.skeleton-title-line2 {
|
||||
height: 16px;
|
||||
width: 60%;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.skeleton-meta {
|
||||
height: 12px;
|
||||
width: 40%;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.skeleton-footer {
|
||||
height: 8px;
|
||||
width: 100%;
|
||||
margin-top: 0.75rem;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.dark .skeleton-footer {
|
||||
border-top-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
#grid-view-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.grid-view-header {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.grid-view-filters {
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.kanban-board {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.kanban-column {
|
||||
flex: none;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
min-width: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.grid-view-title {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.8rem;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.assessment-card {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
/* Scrollbar styling for webkit browsers */
|
||||
.column-cards::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.column-cards::-webkit-scrollbar-track {
|
||||
background: #f1f5f9;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.column-cards::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.column-cards::-webkit-scrollbar-thumb:hover {
|
||||
background: #94a3b8;
|
||||
}
|
||||
|
||||
/* Dark mode scrollbars */
|
||||
.dark .column-cards::-webkit-scrollbar-track {
|
||||
background: var(--background-secondary);
|
||||
}
|
||||
|
||||
.dark .column-cards::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.dark .column-cards::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
import renderSvelte from "@/interface/main";
|
||||
import AssessmentsOverview from "./AssessmentsOverview.svelte";
|
||||
import SkeletonLoader from "./SkeletonLoader.svelte";
|
||||
import ErrorState from "./ErrorState.svelte";
|
||||
import { unmount } from "svelte";
|
||||
|
||||
let currentApp: any = null;
|
||||
|
||||
export function renderGrid(container: HTMLElement, data: any) {
|
||||
if (currentApp) {
|
||||
unmount(currentApp);
|
||||
}
|
||||
|
||||
container.innerHTML = "";
|
||||
container.className = "";
|
||||
|
||||
currentApp = renderSvelte(AssessmentsOverview, container, { data });
|
||||
}
|
||||
|
||||
export function renderSkeletonLoader(container: HTMLElement) {
|
||||
if (currentApp) {
|
||||
unmount(currentApp);
|
||||
}
|
||||
|
||||
container.innerHTML = "";
|
||||
container.className = "";
|
||||
|
||||
currentApp = renderSvelte(SkeletonLoader, container);
|
||||
}
|
||||
|
||||
|
||||
export function renderLoadingState(container: HTMLElement) {
|
||||
renderSkeletonLoader(container);
|
||||
}
|
||||
|
||||
export function renderErrorState(container: HTMLElement, error: string) {
|
||||
if (currentApp) {
|
||||
unmount(currentApp);
|
||||
}
|
||||
|
||||
container.innerHTML = "";
|
||||
container.className = "";
|
||||
|
||||
currentApp = renderSvelte(ErrorState, container, { error });
|
||||
}
|
||||
@@ -1,101 +0,0 @@
|
||||
export function formatDate(dateStr: string, submitted?: boolean): string {
|
||||
const d = new Date(dateStr);
|
||||
const now = new Date();
|
||||
const diffTime = d.getTime() - now.getTime();
|
||||
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (diffDays < 0 && !submitted) {
|
||||
const overdueDays = Math.abs(diffDays);
|
||||
if (overdueDays === 1) return "1 day overdue";
|
||||
return `${overdueDays} days overdue`;
|
||||
}
|
||||
|
||||
if (diffDays === 0) return "Today";
|
||||
|
||||
if (diffDays === 1) return "Tomorrow";
|
||||
|
||||
if (diffDays <= 7) {
|
||||
const weekdayName = d.toLocaleDateString(undefined, { weekday: "long" });
|
||||
|
||||
return diffDays < 0 ? `Last ${weekdayName}` : weekdayName;
|
||||
}
|
||||
|
||||
return d.toLocaleDateString(undefined, {
|
||||
weekday: "short",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: d.getFullYear() !== now.getFullYear() ? "numeric" : undefined,
|
||||
});
|
||||
}
|
||||
|
||||
export function determineStatus(item: any): string {
|
||||
if (
|
||||
item.status === "MARKS_RELEASED" ||
|
||||
item.grade ||
|
||||
(item.percentage !== undefined && item.percentage !== null) ||
|
||||
(item.achieved !== undefined && item.achieved !== null)
|
||||
) {
|
||||
return "MARKS_RELEASED";
|
||||
}
|
||||
|
||||
const completedKey = "betterseqta-completed-assessments";
|
||||
const completed = JSON.parse(localStorage.getItem(completedKey) || "[]");
|
||||
if (completed.includes(item.id)) {
|
||||
return "MARKS_RELEASED";
|
||||
}
|
||||
|
||||
if (item.submitted) {
|
||||
return "SUBMITTED";
|
||||
}
|
||||
|
||||
const now = new Date();
|
||||
const due = new Date(item.due);
|
||||
|
||||
const diffTime = due.getTime() - now.getTime();
|
||||
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (diffDays < 0) {
|
||||
return "OVERDUE";
|
||||
}
|
||||
|
||||
if (diffDays <= 7) {
|
||||
return "DUE_SOON";
|
||||
}
|
||||
|
||||
return "UPCOMING";
|
||||
}
|
||||
|
||||
export function getGradeValue(assessment: any): number | null {
|
||||
if (
|
||||
assessment.results?.percentage !== undefined &&
|
||||
assessment.results.percentage !== null
|
||||
) {
|
||||
return assessment.results.percentage;
|
||||
}
|
||||
|
||||
if (assessment.percentage !== undefined && assessment.percentage !== null) {
|
||||
return assessment.percentage;
|
||||
}
|
||||
|
||||
if (
|
||||
assessment.achieved !== undefined &&
|
||||
assessment.outOf !== undefined &&
|
||||
assessment.achieved !== null &&
|
||||
assessment.outOf !== null &&
|
||||
assessment.outOf > 0
|
||||
) {
|
||||
return (assessment.achieved / assessment.outOf) * 100;
|
||||
}
|
||||
|
||||
if (
|
||||
assessment.results?.achieved !== undefined &&
|
||||
assessment.results?.outOf !== undefined &&
|
||||
assessment.results.achieved !== null &&
|
||||
assessment.results.outOf !== null &&
|
||||
assessment.results.outOf > 0
|
||||
) {
|
||||
return (assessment.results.achieved / assessment.results.outOf) * 100;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
@@ -0,0 +1,626 @@
|
||||
# client-vector-search
|
||||
|
||||
A client side vector search library that can embed, search, and cache. Works on the browser and server side.
|
||||
|
||||
It outperforms OpenAI's text-embedding-ada-002 and is way faster than Pinecone and other VectorDBs.
|
||||
|
||||
I'm the founder of [searchbase.app](https://searchbase.app) and we needed this for our product and customers. We'll be using this library in production. You can be sure it'll be maintained and improved.
|
||||
|
||||
- Embed documents using transformers by default: gte-small (~30mb).
|
||||
- Calculate cosine similarity between embeddings.
|
||||
- Create an index and search on the client side
|
||||
- Cache vectors with browser caching support.
|
||||
|
||||
Lots of improvements are coming!
|
||||
|
||||
## Roadmap
|
||||
|
||||
Our goal is to build a super simple, fast vector search that works with couple hundred to thousands vectors. ~1k vectors per user covers 99% of the use cases.
|
||||
|
||||
We'll initially keep things super simple and sub 100ms
|
||||
|
||||
### TODOs
|
||||
|
||||
- [ ] add HNSW index that works on node and browser env, don't rely on hnsw binder libs
|
||||
- [ ] add a proper testing suite and ci/cd for the lib
|
||||
- [ ] simple health tests
|
||||
- [ ] mock the @xenova/transformers for jest, it's not happy with it
|
||||
- [ ] performance tests, recall, memory usage, cpu usage etc.
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
npm i client-vector-search
|
||||
```
|
||||
|
||||
## Quickstart
|
||||
|
||||
This library provides a plug-and-play solution for embedding and vector search. It's designed to be easy to use, efficient, and versatile. Here's a quick start guide:
|
||||
|
||||
```ts
|
||||
import { getEmbedding, EmbeddingIndex } from "client-vector-search";
|
||||
|
||||
// getEmbedding is an async function, so you need to use 'await' or '.then()' to get the result
|
||||
const embedding = await getEmbedding("Apple"); // Returns embedding as number[]
|
||||
|
||||
// Each object should have an 'embedding' property of type number[]
|
||||
const initialObjects = [
|
||||
{ id: 1, name: "Apple", embedding: embedding },
|
||||
{ id: 2, name: "Banana", embedding: await getEmbedding("Banana") },
|
||||
{ id: 3, name: "Cheddar", embedding: await getEmbedding("Cheddar") },
|
||||
{ id: 4, name: "Space", embedding: await getEmbedding("Space") },
|
||||
{ id: 5, name: "database", embedding: await getEmbedding("database") },
|
||||
];
|
||||
const index = new EmbeddingIndex(initialObjects); // Creates an index
|
||||
|
||||
// The query should be an embedding of type number[]
|
||||
const queryEmbedding = await getEmbedding("Fruit"); // Query embedding
|
||||
const results = await index.search(queryEmbedding, { topK: 5 }); // Returns top similar objects
|
||||
|
||||
// specify the storage type
|
||||
await index.saveIndex("indexedDB");
|
||||
const results = await index.search([1, 2, 3], {
|
||||
topK: 5,
|
||||
useStorage: "indexedDB",
|
||||
// storageOptions: { // use only if you overrode the defaults
|
||||
// indexedDBName: 'clientVectorDB',
|
||||
// indexedDBObjectStoreName: 'ClientEmbeddingStore',
|
||||
// },
|
||||
});
|
||||
|
||||
console.log(results);
|
||||
|
||||
await index.deleteIndexedDB(); // if you overrode default, specify db name
|
||||
```
|
||||
|
||||
## Trouble-shooting
|
||||
|
||||
### NextJS
|
||||
|
||||
To use it inside NextJS projects you'll need to update the `next.config.js` file to include the following:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
// Override the default webpack configuration
|
||||
webpack: (config) => {
|
||||
// See https://webpack.js.org/configuration/resolve/#resolvealias
|
||||
config.resolve.alias = {
|
||||
...config.resolve.alias,
|
||||
sharp$: false,
|
||||
"onnxruntime-node$": false,
|
||||
};
|
||||
return config;
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
#### Model load after page is loaded
|
||||
|
||||
You can initialize the model before using it to generate embeddings. This will ensure that the model is loaded before you use it and provide a better UX.
|
||||
|
||||
```js
|
||||
import { initializeModel } from "client-vector-search"
|
||||
...
|
||||
useEffect(() => {
|
||||
try {
|
||||
initializeModel();
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
}, []);
|
||||
```
|
||||
|
||||
## Usage Guide
|
||||
|
||||
This guide provides a step-by-step walkthrough of the library's main features. It covers everything from generating embeddings for a string to performing operations on the index such as adding, updating, and removing objects. It also includes instructions on how to save the index to a database and perform search operations within it.
|
||||
|
||||
Until we have a reference documentation, you can find all the methods and their usage in this guide. Each step is accompanied by a code snippet to illustrate the usage of the method in question. Make sure to follow along and try out the examples in your own environment to get a better understanding of how everything works.
|
||||
|
||||
Let's get started!
|
||||
|
||||
### Step 1: Generate Embeddings for String
|
||||
|
||||
Generate embeddings for a given string using the `getEmbedding` method.
|
||||
|
||||
```ts
|
||||
const embedding = await getEmbedding("Apple"); // Returns embedding as number[]
|
||||
```
|
||||
|
||||
> **Note**: `getEmbedding` is asynchronous; make sure to use `await`.
|
||||
|
||||
---
|
||||
|
||||
### Step 2: Calculate Cosine Similarity
|
||||
|
||||
Calculate the cosine similarity between two embeddings.
|
||||
|
||||
```ts
|
||||
const similarity = cosineSimilarity(embedding1, embedding2, 6);
|
||||
```
|
||||
|
||||
> **Note**: Both embeddings should be of the same length.
|
||||
|
||||
---
|
||||
|
||||
### Step 3: Create an Index
|
||||
|
||||
Create an index with an initial array of objects. Each object must have an 'embedding' property.
|
||||
|
||||
```ts
|
||||
const initialObjects = [...];
|
||||
const index = new EmbeddingIndex(initialObjects);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Step 4: Add to Index
|
||||
|
||||
Add an object to the index.
|
||||
|
||||
```ts
|
||||
const objectToAdd = {
|
||||
id: 6,
|
||||
name: "Cat",
|
||||
embedding: await getEmbedding("Cat"),
|
||||
};
|
||||
index.add(objectToAdd);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Step 5: Update Index
|
||||
|
||||
Update an existing object in the index.
|
||||
|
||||
```ts
|
||||
const vectorToUpdate = {
|
||||
id: 6,
|
||||
name: "Dog",
|
||||
embedding: await getEmbedding("Dog"),
|
||||
};
|
||||
index.update({ id: 6 }, vectorToUpdate);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Step 6: Remove from Index
|
||||
|
||||
Remove an object from the index.
|
||||
|
||||
```ts
|
||||
index.remove({ id: 6 });
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Step 7: Retrieve from Index
|
||||
|
||||
Retrieve an object from the index.
|
||||
|
||||
```ts
|
||||
const vector = index.get({ id: 1 });
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Step 8: Search the Index
|
||||
|
||||
Search the index with a query embedding.
|
||||
|
||||
```ts
|
||||
const queryEmbedding = await getEmbedding("Fruit");
|
||||
const results = await index.search(queryEmbedding, { topK: 5 });
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Step 9: Print the Index
|
||||
|
||||
Print the entire index to the console.
|
||||
|
||||
```ts
|
||||
index.printIndex();
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Step 10: Save Index to IndexedDB (for browser)
|
||||
|
||||
Save the index to a persistent IndexedDB database. Note
|
||||
|
||||
```ts
|
||||
await index.saveIndex("indexedDB", {
|
||||
DBName: "clientVectorDB",
|
||||
objectStoreName: "ClientEmbeddingStore",
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Important: Search in indexedDB
|
||||
|
||||
Perform a search operation in the IndexedDB.
|
||||
|
||||
````ts
|
||||
const results = await index.search(queryEmbedding, {
|
||||
topK: 5,
|
||||
useStorage: "indexedDB",
|
||||
storageOptions: { // only if you want to override the default options, defaults are below
|
||||
indexedDBName: 'clientVectorDB',
|
||||
indexedDBObjectStoreName: 'ClientEmbeddingStore'
|
||||
}
|
||||
});
|
||||
|
||||
---
|
||||
|
||||
### Delete Database
|
||||
To delete an entire database.
|
||||
|
||||
```ts
|
||||
await IndexedDbManager.deleteIndexedDB("clientVectorDB");
|
||||
````
|
||||
|
||||
---
|
||||
|
||||
### Delete Object Store
|
||||
|
||||
To delete an object store from a database.
|
||||
|
||||
```ts
|
||||
await IndexedDbManager.deleteIndexedDBObjectStore(
|
||||
"clientVectorDB",
|
||||
"ClientEmbeddingStore",
|
||||
);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Retrieve All Objects
|
||||
|
||||
To retrieve all objects from a specific object store.
|
||||
|
||||
```ts
|
||||
const allObjects = await IndexedDbManager.getAllObjectsFromIndexedDB(
|
||||
"clientVectorDB",
|
||||
"ClientEmbeddingStore",
|
||||
);
|
||||
```
|
||||
|
||||
# THE MAIN INDEX.TS FILE THAT YOU ARE IMPORTING FROM
|
||||
|
||||
```index.ts
|
||||
const DEFAULT_TOP_K = 3;
|
||||
|
||||
interface Filter {
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
import Cache from './cache';
|
||||
import { IndexedDbManager } from './indexedDB';
|
||||
import { cosineSimilarity } from './utils';
|
||||
export { ExperimentalHNSWIndex } from './hnsw';
|
||||
|
||||
// uncomment if you want to test indexedDB implementation in node env for faster dev cycle
|
||||
// import { IDBFactory } from 'fake-indexeddb';
|
||||
// const indexedDB = new IDBFactory();
|
||||
|
||||
export interface SearchResult {
|
||||
similarity: number;
|
||||
object: any;
|
||||
}
|
||||
|
||||
type StorageOptions = 'indexedDB' | 'localStorage' | 'none';
|
||||
|
||||
/**
|
||||
* Interface for search options in the EmbeddingIndex class.
|
||||
* topK: The number of top similar items to return.
|
||||
* filter: An optional filter to apply to the objects before searching.
|
||||
* useStorage: A flag to indicate whether to use storage options like indexedDB or localStorage.
|
||||
*/
|
||||
interface SearchOptions {
|
||||
topK?: number;
|
||||
filter?: Filter;
|
||||
useStorage?: StorageOptions;
|
||||
storageOptions?: { indexedDBName: string; indexedDBObjectStoreName: string }; // TODO: generalize it to localStorage as well
|
||||
}
|
||||
|
||||
const cacheInstance = Cache.getInstance();
|
||||
|
||||
let pipe: any;
|
||||
let currentModel: string;
|
||||
|
||||
export const initializeModel = async (
|
||||
model: string = 'Xenova/gte-small',
|
||||
): Promise<void> => {
|
||||
if (model !== currentModel) {
|
||||
const transformersModule = await import('@xenova/transformers');
|
||||
const pipeline = transformersModule.pipeline;
|
||||
pipe = await pipeline('feature-extraction', model);
|
||||
currentModel = model;
|
||||
}
|
||||
};
|
||||
|
||||
export const getEmbedding = async (
|
||||
text: string,
|
||||
precision: number = 7,
|
||||
options = { pooling: 'mean', normalize: false },
|
||||
model = 'Xenova/gte-small',
|
||||
): Promise<number[]> => {
|
||||
const cachedEmbedding = cacheInstance.get(text);
|
||||
if (cachedEmbedding) {
|
||||
return Promise.resolve(cachedEmbedding);
|
||||
}
|
||||
|
||||
if (model !== currentModel) {
|
||||
await initializeModel(model);
|
||||
}
|
||||
|
||||
const output = await pipe(text, options);
|
||||
const roundedOutput = Array.from(output.data as number[]).map(
|
||||
(value: number) => parseFloat(value.toFixed(precision)),
|
||||
);
|
||||
cacheInstance.set(text, roundedOutput);
|
||||
return Array.from(roundedOutput);
|
||||
};
|
||||
|
||||
export class EmbeddingIndex {
|
||||
private objects: Filter[];
|
||||
private keys: string[];
|
||||
|
||||
constructor(initialObjects?: Filter[]) {
|
||||
// TODO: add support for options while creating index such as {... indexedDB: true, ...}
|
||||
this.objects = [];
|
||||
this.keys = [];
|
||||
if (initialObjects && initialObjects.length > 0) {
|
||||
initialObjects.forEach((obj) => this.validateAndAdd(obj));
|
||||
if (initialObjects[0]) {
|
||||
this.keys = Object.keys(initialObjects[0]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private findVectorIndex(filter: Filter): number {
|
||||
return this.objects.findIndex((object) =>
|
||||
Object.keys(filter).every((key) => object[key] === filter[key]),
|
||||
);
|
||||
}
|
||||
|
||||
private validateAndAdd(obj: Filter) {
|
||||
if (!Array.isArray(obj.embedding) || obj.embedding.some(isNaN)) {
|
||||
throw new Error(
|
||||
'Object must have an embedding property of type number[]',
|
||||
);
|
||||
}
|
||||
if (this.keys.length === 0) {
|
||||
this.keys = Object.keys(obj);
|
||||
} else if (!this.keys.every((key) => key in obj)) {
|
||||
throw new Error(
|
||||
'Object must have the same properties as the initial objects',
|
||||
);
|
||||
}
|
||||
this.objects.push(obj);
|
||||
}
|
||||
|
||||
add(obj: Filter) {
|
||||
this.validateAndAdd(obj);
|
||||
}
|
||||
|
||||
// Method to update an existing vector in the index
|
||||
update(filter: Filter, vector: Filter) {
|
||||
const index = this.findVectorIndex(filter);
|
||||
if (index === -1) {
|
||||
throw new Error('Vector not found');
|
||||
}
|
||||
if (vector.hasOwnProperty('embedding')) {
|
||||
// Validate and add the new vector
|
||||
this.validateAndAdd(vector);
|
||||
}
|
||||
// Replace the old vector with the new one
|
||||
this.objects[index] = Object.assign(this.objects[index] as Filter, vector);
|
||||
}
|
||||
|
||||
// Method to remove a vector from the index
|
||||
remove(filter: Filter) {
|
||||
const index = this.findVectorIndex(filter);
|
||||
if (index === -1) {
|
||||
throw new Error('Vector not found');
|
||||
}
|
||||
// Remove the vector from the index
|
||||
this.objects.splice(index, 1);
|
||||
}
|
||||
|
||||
// Method to remove multiple vectors from the index
|
||||
removeBatch(filters: Filter[]) {
|
||||
filters.forEach((filter) => {
|
||||
const index = this.findVectorIndex(filter);
|
||||
if (index !== -1) {
|
||||
// Remove the vector from the index
|
||||
this.objects.splice(index, 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Method to retrieve a vector from the index
|
||||
get(filter: Filter) {
|
||||
const vector = this.objects[this.findVectorIndex(filter)];
|
||||
return vector || null;
|
||||
}
|
||||
|
||||
size(): number {
|
||||
// Returns the size of the index
|
||||
return this.objects.length;
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.objects = [];
|
||||
}
|
||||
|
||||
async search(
|
||||
queryEmbedding: number[],
|
||||
options: SearchOptions = {
|
||||
topK: 3,
|
||||
useStorage: 'none',
|
||||
storageOptions: {
|
||||
indexedDBName: 'clientVectorDB',
|
||||
indexedDBObjectStoreName: 'ClientEmbeddingStore',
|
||||
},
|
||||
},
|
||||
): Promise<SearchResult[]> {
|
||||
const topK = options.topK || DEFAULT_TOP_K;
|
||||
const filter = options.filter || {};
|
||||
const useStorage = options.useStorage || 'none';
|
||||
|
||||
if (useStorage === 'indexedDB') {
|
||||
const DBname = options.storageOptions?.indexedDBName || 'clientVectorDB';
|
||||
const objectStoreName =
|
||||
options.storageOptions?.indexedDBObjectStoreName ||
|
||||
'ClientEmbeddingStore';
|
||||
|
||||
if (typeof indexedDB === 'undefined') {
|
||||
console.error('IndexedDB is not supported');
|
||||
throw new Error('IndexedDB is not supported');
|
||||
}
|
||||
const results = await this.loadAndSearchFromIndexedDB(
|
||||
DBname,
|
||||
objectStoreName,
|
||||
queryEmbedding,
|
||||
topK,
|
||||
filter,
|
||||
);
|
||||
return results;
|
||||
} else {
|
||||
// Compute similarities
|
||||
const similarities = this.objects
|
||||
.filter((object) =>
|
||||
Object.keys(filter).every((key) => object[key] === filter[key]),
|
||||
)
|
||||
.map((obj) => ({
|
||||
similarity: cosineSimilarity(queryEmbedding, obj.embedding),
|
||||
object: obj,
|
||||
}));
|
||||
|
||||
// Sort by similarity and return topK results
|
||||
return similarities
|
||||
.sort((a, b) => b.similarity - a.similarity)
|
||||
.slice(0, topK);
|
||||
}
|
||||
}
|
||||
|
||||
printIndex() {
|
||||
console.log('Index Content:');
|
||||
this.objects.forEach((obj, idx) => {
|
||||
console.log(`Item ${idx + 1}:`, obj);
|
||||
});
|
||||
}
|
||||
|
||||
async saveIndex(
|
||||
storageType: string,
|
||||
options: { DBName: string; objectStoreName: string } = {
|
||||
DBName: 'clientVectorDB',
|
||||
objectStoreName: 'ClientEmbeddingStore',
|
||||
},
|
||||
) {
|
||||
if (storageType === 'indexedDB') {
|
||||
await this.saveToIndexedDB(options.DBName, options.objectStoreName);
|
||||
} else {
|
||||
throw new Error(
|
||||
`Unsupported storage type: ${storageType} \n Supported storage types: "indexedDB"`,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
async saveToIndexedDB(
|
||||
DBname: string = 'clientVectorDB',
|
||||
objectStoreName: string = 'ClientEmbeddingStore',
|
||||
): Promise<void> {
|
||||
if (typeof indexedDB === 'undefined') {
|
||||
console.error('IndexedDB is not defined');
|
||||
throw new Error('IndexedDB is not supported');
|
||||
}
|
||||
|
||||
if (!this.objects || this.objects.length === 0) {
|
||||
throw new Error('Index is empty. Nothing to save');
|
||||
}
|
||||
|
||||
try {
|
||||
const db = await IndexedDbManager.create(DBname, objectStoreName);
|
||||
await db.addToIndexedDB(this.objects);
|
||||
console.log(
|
||||
`Index saved to database '${DBname}' object store '${objectStoreName}'`,
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Error saving index to database:', error);
|
||||
throw new Error('Error saving index to database');
|
||||
}
|
||||
}
|
||||
|
||||
async loadAndSearchFromIndexedDB(
|
||||
DBname: string = 'clientVectorDB',
|
||||
objectStoreName: string = 'ClientEmbeddingStore',
|
||||
queryEmbedding: number[],
|
||||
topK: number,
|
||||
filter: { [key: string]: any },
|
||||
): Promise<SearchResult[]> {
|
||||
const db = await IndexedDbManager.create(DBname, objectStoreName);
|
||||
const generator = db.dbGenerator();
|
||||
const results: { similarity: number; object: any }[] = [];
|
||||
|
||||
for await (const record of generator) {
|
||||
if (Object.keys(filter).every((key) => record[key] === filter[key])) {
|
||||
const similarity = cosineSimilarity(queryEmbedding, record.embedding);
|
||||
results.push({ similarity, object: record });
|
||||
}
|
||||
}
|
||||
results.sort((a, b) => b.similarity - a.similarity);
|
||||
return results.slice(0, topK);
|
||||
}
|
||||
|
||||
async deleteIndexedDB(DBname: string = 'clientVectorDB'): Promise<void> {
|
||||
if (typeof indexedDB === 'undefined') {
|
||||
console.error('IndexedDB is not defined');
|
||||
throw new Error('IndexedDB is not supported');
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
const request = indexedDB.deleteDatabase(DBname);
|
||||
|
||||
request.onsuccess = () => {
|
||||
console.log(`Database '${DBname}' deleted`);
|
||||
resolve();
|
||||
};
|
||||
request.onerror = (event) => {
|
||||
console.error('Failed to delete database', event);
|
||||
reject(new Error('Failed to delete database'));
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
async deleteIndexedDBObjectStore(
|
||||
DBname: string = 'clientVectorDB',
|
||||
objectStoreName: string = 'ClientEmbeddingStore',
|
||||
): Promise<void> {
|
||||
const db = await IndexedDbManager.create(DBname, objectStoreName);
|
||||
|
||||
try {
|
||||
await db.deleteIndexedDBObjectStoreFromDB(DBname, objectStoreName);
|
||||
console.log(
|
||||
`Object store '${objectStoreName}' deleted from database '${DBname}'`,
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Error deleting object store:', error);
|
||||
throw new Error('Error deleting object store');
|
||||
}
|
||||
}
|
||||
|
||||
async getAllObjectsFromIndexedDB(
|
||||
DBname: string = 'clientVectorDB',
|
||||
objectStoreName: string = 'ClientEmbeddingStore',
|
||||
): Promise<any[]> {
|
||||
const db = await IndexedDbManager.create(DBname, objectStoreName);
|
||||
const objects: any[] = [];
|
||||
for await (const record of db.dbGenerator()) {
|
||||
objects.push(record);
|
||||
}
|
||||
return objects;
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -1,88 +0,0 @@
|
||||
import { defineLazyPlugin } from "../../core/dynamicLoader";
|
||||
import {
|
||||
booleanSetting,
|
||||
buttonSetting,
|
||||
defineSettings,
|
||||
hotkeySetting,
|
||||
} from "../../core/settingsHelpers";
|
||||
// Platform-aware default hotkey
|
||||
const getDefaultHotkey = () => {
|
||||
const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
|
||||
return isMac ? "cmd+k" : "ctrl+k";
|
||||
};
|
||||
|
||||
const settings = defineSettings({
|
||||
searchHotkey: hotkeySetting({
|
||||
default: getDefaultHotkey(),
|
||||
title: "Search Hotkey",
|
||||
description: "Keyboard shortcut to open the search",
|
||||
}),
|
||||
showRecentFirst: booleanSetting({
|
||||
default: true,
|
||||
title: "Show Recent First",
|
||||
description: "Sort dynamic content by most recent first",
|
||||
}),
|
||||
transparencyEffects: booleanSetting({
|
||||
default: true,
|
||||
title: "Transparency Effects",
|
||||
description: "Enable transparency effects for the search bar",
|
||||
}),
|
||||
runIndexingOnLoad: booleanSetting({
|
||||
default: true,
|
||||
title: "Index on Page Load",
|
||||
description: "Run content indexing when SEQTA loads",
|
||||
}),
|
||||
resetIndex: buttonSetting({
|
||||
title: "Reset Index",
|
||||
description: "Reset the search index and storage",
|
||||
trigger: async () => {
|
||||
const confirmed = confirm("Are you sure you want to reset the search index and storage?");
|
||||
|
||||
if (confirmed) {
|
||||
try {
|
||||
// Dynamically import the worker manager to avoid loading heavy dependencies
|
||||
const { VectorWorkerManager } = await import("./src/indexing/worker/vectorWorkerManager");
|
||||
const workerManager = VectorWorkerManager.getInstance();
|
||||
await workerManager.resetWorker();
|
||||
console.log("Vector worker reset successfully");
|
||||
} catch (e) {
|
||||
console.warn("Failed to reset vector worker:", e);
|
||||
}
|
||||
|
||||
// Delete both 'embeddiaDB' and 'betterseqta-index' using native IndexedDB APIs
|
||||
const deleteDb = (dbName: string) => {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
const req = indexedDB.deleteDatabase(dbName);
|
||||
req.onsuccess = () => resolve();
|
||||
req.onerror = () => reject(req.error);
|
||||
req.onblocked = () => {
|
||||
reject(new Error(`One database is open, failed to remove: ${dbName}`));
|
||||
};
|
||||
});
|
||||
};
|
||||
try {
|
||||
await deleteDb("embeddiaDB");
|
||||
await deleteDb("betterseqta-index");
|
||||
alert("Search index and storage have been reset.");
|
||||
} catch (e) {
|
||||
alert("Failed to reset one or more databases: " + String(e));
|
||||
}
|
||||
}
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
// Create the lazy plugin definition - this loads immediately but doesn't import heavy dependencies
|
||||
export default defineLazyPlugin({
|
||||
id: "global-search",
|
||||
name: "Global Search",
|
||||
description: "Quick search for everything in SEQTA",
|
||||
version: "1.0.0",
|
||||
settings,
|
||||
disableToggle: true,
|
||||
defaultEnabled: false,
|
||||
beta: true,
|
||||
|
||||
// Lazy loader - only imports the heavy plugin when actually needed
|
||||
loader: () => import("./src/core/index")
|
||||
});
|
||||
@@ -0,0 +1,50 @@
|
||||
<script lang="ts">
|
||||
import { highlightMatch, highlightSnippet, stripHtmlButKeepHighlights } from '../utils/highlight';
|
||||
import type { DynamicContentItem } from '../utils/dynamicItems';
|
||||
import type { FuseResultMatch } from '../core/types';
|
||||
|
||||
const { item, isSelected, searchTerm, matches } = $props<{
|
||||
item: DynamicContentItem;
|
||||
isSelected: boolean;
|
||||
searchTerm: string;
|
||||
matches?: readonly FuseResultMatch[];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<button
|
||||
class="w-full flex flex-col px-2 py-1.5 rounded-lg select-none cursor-pointer group
|
||||
{isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
|
||||
>
|
||||
<div class="flex items-center w-full">
|
||||
<div class="flex-none w-8 h-8 text-xl font-IconFamily flex items-center justify-center {isSelected ? 'text-zinc-900 dark:text-white' : 'text-zinc-600 dark:text-zinc-400'}">{item.metadata?.icon || '\ue924'}</div>
|
||||
<span class="ml-4 text-lg truncate">
|
||||
{@html stripHtmlButKeepHighlights(highlightMatch(item.text, searchTerm, matches))}
|
||||
</span>
|
||||
<span class="flex-none ml-auto text-xs text-zinc-500 dark:text-zinc-400">
|
||||
{item.category}
|
||||
</span>
|
||||
</div>
|
||||
{#if item.content}
|
||||
<div class="mt-1 ml-12 text-sm text-zinc-600 dark:text-zinc-400 line-clamp-2 text-start">
|
||||
{@html stripHtmlButKeepHighlights(highlightSnippet(item.content, searchTerm, matches))}
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<style>
|
||||
:global(.highlight) {
|
||||
background-color: rgba(255, 213, 0, 0.3);
|
||||
font-weight: 500;
|
||||
border-radius: 2px;
|
||||
padding: 0 1px;
|
||||
margin: 0 -1px;
|
||||
}
|
||||
|
||||
.dark :global(.highlight) {
|
||||
background-color: rgba(255, 230, 100, 0.4);
|
||||
}
|
||||
|
||||
.due-badge {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher, onDestroy } from 'svelte';
|
||||
import { calculateExpression } from '../utils/calculator';
|
||||
import { unitFullNames } from './unitMap';
|
||||
import * as math from 'mathjs';
|
||||
|
||||
let { searchTerm = '', isSelected = false } = $props<{ searchTerm: string, isSelected: boolean }>();
|
||||
|
||||
@@ -12,32 +13,73 @@
|
||||
let isCalculating = $state(false);
|
||||
let inputUnit = $state<string>('');
|
||||
let outputUnit = $state<string>('');
|
||||
let isPartial = $state(false);
|
||||
|
||||
function detectUnit(expression: string): string {
|
||||
try {
|
||||
const unit = math.unit(expression);
|
||||
if (unit) {
|
||||
// Get the base unit name
|
||||
const unitStr = unit.formatUnits();
|
||||
return unitFullNames[unitStr] || unitStr;
|
||||
}
|
||||
} catch (e) {
|
||||
// Not a unit or invalid expression
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
// Process the input with debounce to avoid unnecessary calculations
|
||||
const processInput = (input: string) => {
|
||||
try {
|
||||
if (
|
||||
!input.trim() ||
|
||||
(input.trim().length <= 2 && !/\d/.test(input))
|
||||
) {
|
||||
result = null;
|
||||
inputUnit = '';
|
||||
outputUnit = '';
|
||||
dispatch('hasResult', null);
|
||||
return;
|
||||
}
|
||||
|
||||
isCalculating = true;
|
||||
|
||||
try {
|
||||
const calcResult = calculateExpression(input);
|
||||
// Let mathjs handle everything
|
||||
const evaluated = math.evaluate(input.replace('**', '^'));
|
||||
|
||||
if (calcResult.isValid) {
|
||||
result = calcResult.result;
|
||||
inputUnit = calcResult.inputUnit;
|
||||
outputUnit = calcResult.outputUnit;
|
||||
isPartial = calcResult.isPartial;
|
||||
dispatch('hasResult', calcResult.result);
|
||||
// Format the result
|
||||
if (evaluated !== undefined) {
|
||||
if (math.typeOf(evaluated) === 'Unit') {
|
||||
// Handle unit conversion results
|
||||
result = math.format(evaluated, { precision: 14, lowerExp: -15, upperExp: 15 });
|
||||
inputUnit = detectUnit(input);
|
||||
outputUnit = detectUnit(result);
|
||||
} else if (typeof evaluated === 'number') {
|
||||
// Handle regular numbers
|
||||
if (math.round(evaluated) === evaluated) {
|
||||
result = math.format(evaluated, { precision: 14, lowerExp: -15, upperExp: 15 });
|
||||
} else {
|
||||
result = math.format(evaluated, { precision: 14, lowerExp: -15, upperExp: 15 });
|
||||
}
|
||||
inputUnit = '';
|
||||
outputUnit = '';
|
||||
} else {
|
||||
result = math.format(evaluated, { precision: 14, lowerExp: -15, upperExp: 15 });
|
||||
inputUnit = '';
|
||||
outputUnit = '';
|
||||
}
|
||||
dispatch('hasResult', result);
|
||||
} else {
|
||||
result = null;
|
||||
inputUnit = '';
|
||||
outputUnit = '';
|
||||
isPartial = false;
|
||||
dispatch('hasResult', null);
|
||||
}
|
||||
} catch (e) {
|
||||
// If mathjs throws an error, this isn't a valid expression
|
||||
result = null;
|
||||
inputUnit = '';
|
||||
outputUnit = '';
|
||||
isPartial = false;
|
||||
dispatch('hasResult', null);
|
||||
} finally {
|
||||
isCalculating = false;
|
||||
@@ -54,7 +96,7 @@
|
||||
</script>
|
||||
|
||||
{#if result !== null}
|
||||
<div class="">
|
||||
<div class="p-2">
|
||||
<p class="text-[0.85rem] p-1 pb-0.5 pt-0 font-semibold text-zinc-500 dark:text-zinc-400">Calculator</p>
|
||||
<div class="flex items-center justify-between gap-8 rounded-lg border border-transparent {isSelected ? 'bg-zinc-900/5 dark:bg-white/10 border-zinc-900/5 dark:border-zinc-100/5' : ''}">
|
||||
<div class="flex flex-col flex-1 items-center py-4 pl-4 min-w-0">
|
||||
@@ -82,7 +124,7 @@
|
||||
{result}
|
||||
</div>
|
||||
<div class="px-3 py-1 mt-1 text-sm rounded-md text-zinc-900 dark:text-zinc-300 bg-zinc-100 dark:bg-zinc-100/10">
|
||||
{outputUnit || (isPartial ? 'Partial' : 'Result')}
|
||||
{outputUnit || 'Result'}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
|
||||
@@ -6,108 +6,31 @@
|
||||
import { type StaticCommandItem } from '../core/commands';
|
||||
import type { CombinedResult } from '../core/types';
|
||||
import { createSearchIndexes, performSearch as doSearch } from '../search/searchUtils';
|
||||
import { highlightMatch, highlightSnippet, stripHtmlButKeepHighlights } from '../utils/highlight';
|
||||
import Fuse from 'fuse.js';
|
||||
import Calculator from './Calculator.svelte';
|
||||
import { actionMap } from '../indexing/actions';
|
||||
import type { IndexItem } from '../indexing/types';
|
||||
import type { IndexItem, HydratedIndexItem } from '../indexing/types';
|
||||
import debounce from 'lodash/debounce';
|
||||
import { renderComponentMap } from '../indexing/renderComponents';
|
||||
import HighlightedText from '../utils/HighlightedText.svelte';
|
||||
import { matchesHotkey } from '../utils/hotkeyUtils';
|
||||
import browser from 'webextension-polyfill';
|
||||
|
||||
const {
|
||||
transparencyEffects,
|
||||
searchHotkey: initialSearchHotkey
|
||||
showRecentFirst
|
||||
} = $props<{
|
||||
transparencyEffects: boolean,
|
||||
searchHotkey: string
|
||||
showRecentFirst: boolean
|
||||
}>();
|
||||
|
||||
let currentSearchHotkey = $state(initialSearchHotkey);
|
||||
|
||||
let commandsFuse = $state<Fuse<StaticCommandItem>>();
|
||||
let dynamicContentFuse = $state<Fuse<IndexItem>>();
|
||||
let dynamicContentFuse = $state<Fuse<HydratedIndexItem>>();
|
||||
|
||||
const dynamicIdToItemMap = $state(new Map<string, IndexItem>());
|
||||
const dynamicIdToItemMap = $state(new Map<string, HydratedIndexItem>());
|
||||
const commandIdToItemMap = $state(new Map<string, StaticCommandItem>());
|
||||
|
||||
let isIndexing = $state(false);
|
||||
let completedJobs = $state(0);
|
||||
let totalJobs = $state(0);
|
||||
|
||||
let commandPalleteOpen = $state(false);
|
||||
let searchTerm = $state('');
|
||||
let selectedIndex = $state(0);
|
||||
let combinedResults = $state<CombinedResult[]>([]);
|
||||
let searchbar = $state<HTMLInputElement>();
|
||||
|
||||
let isLoading = $state(false);
|
||||
let calculatorResult = $state<string | null>(null);
|
||||
let resultsList = $state<HTMLUListElement>();
|
||||
|
||||
const updateCalculatorState = (hasResult: string | null) => {
|
||||
calculatorResult = hasResult;
|
||||
};
|
||||
|
||||
let keydownHandler: ((e: KeyboardEvent) => void) | null = null;
|
||||
|
||||
// Listen for setting changes
|
||||
$effect(() => {
|
||||
const loadSettings = async () => {
|
||||
const settings = await browser.storage.local.get('plugin.global-search.settings');
|
||||
const pluginSettings = settings['plugin.global-search.settings'] as { searchHotkey?: string } | undefined;
|
||||
if (pluginSettings?.searchHotkey) {
|
||||
currentSearchHotkey = pluginSettings.searchHotkey;
|
||||
}
|
||||
};
|
||||
|
||||
loadSettings();
|
||||
|
||||
// Listen for storage changes
|
||||
const handleStorageChange = (changes: any, area: string) => {
|
||||
if (area === 'local' && changes['plugin.global-search.settings']) {
|
||||
const newSettings = changes['plugin.global-search.settings'].newValue as { searchHotkey?: string } | undefined;
|
||||
if (newSettings?.searchHotkey) {
|
||||
currentSearchHotkey = newSettings.searchHotkey;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
browser.storage.onChanged.addListener(handleStorageChange);
|
||||
|
||||
return () => {
|
||||
browser.storage.onChanged.removeListener(handleStorageChange);
|
||||
};
|
||||
});
|
||||
|
||||
// Update keydown handler when hotkey changes
|
||||
$effect(() => {
|
||||
if (keydownHandler) {
|
||||
window.removeEventListener('keydown', keydownHandler);
|
||||
}
|
||||
|
||||
keydownHandler = (e: KeyboardEvent) => {
|
||||
if (matchesHotkey(e, currentSearchHotkey)) {
|
||||
e.preventDefault();
|
||||
commandPalleteOpen = true;
|
||||
tick().then(() => searchbar?.focus());
|
||||
}
|
||||
if (e.key === 'Escape') {
|
||||
commandPalleteOpen = false;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', keydownHandler);
|
||||
|
||||
return () => {
|
||||
if (keydownHandler) {
|
||||
window.removeEventListener('keydown', keydownHandler);
|
||||
keydownHandler = null;
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
const progressHandler = (event: CustomEvent) => {
|
||||
const { completed, total, indexing } = event.detail;
|
||||
@@ -119,18 +42,12 @@
|
||||
window.addEventListener('indexing-progress', progressHandler as EventListener);
|
||||
|
||||
const itemsUpdatedHandler = () => {
|
||||
console.log('Search Bar received items-updated event, re-indexing...');
|
||||
setupSearchIndexes();
|
||||
performSearch();
|
||||
};
|
||||
window.addEventListener('dynamic-items-updated', itemsUpdatedHandler);
|
||||
|
||||
setupSearchIndexes();
|
||||
|
||||
// @ts-ignore - Intentionally adding to window
|
||||
window.setCommandPalleteOpen = (open: boolean) => {
|
||||
commandPalleteOpen = open;
|
||||
};
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('indexing-progress', progressHandler as EventListener);
|
||||
window.removeEventListener('dynamic-items-updated', itemsUpdatedHandler);
|
||||
@@ -151,23 +68,58 @@
|
||||
|
||||
console.debug(`[Global Search] Indexed ${commands.length} command items and ${dynamicItems.length} dynamic items.`);
|
||||
}
|
||||
let commandPalleteOpen = $state(false);
|
||||
let searchTerm = $state('');
|
||||
let selectedIndex = $state(0);
|
||||
let searchbar = $state<HTMLInputElement>();
|
||||
let combinedResults = $state<CombinedResult[]>([]);
|
||||
let isLoading = $state(false);
|
||||
let prevSearchTerm = $state('');
|
||||
let calculatorResult = $state<string | null>(null);
|
||||
|
||||
const updateCalculatorState = (hasResult: string | null) => {
|
||||
calculatorResult = hasResult;
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
setupSearchIndexes();
|
||||
|
||||
// @ts-ignore - Intentionally adding to window
|
||||
window.setCommandPalleteOpen = (open: boolean) => {
|
||||
commandPalleteOpen = open;
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
|
||||
e.preventDefault();
|
||||
commandPalleteOpen = true;
|
||||
tick().then(() => searchbar?.focus());
|
||||
}
|
||||
if (e.key === 'Escape') {
|
||||
commandPalleteOpen = false;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
});
|
||||
|
||||
const performSearch = async () => {
|
||||
isLoading = true;
|
||||
selectedIndex = 0;
|
||||
|
||||
tick().then(() => {
|
||||
const selectedElement = resultsList?.querySelector(`li:nth-child(1)`);
|
||||
selectedElement?.scrollIntoView({ block: 'nearest' });
|
||||
});
|
||||
|
||||
const term = searchTerm.trim().toLowerCase();
|
||||
|
||||
if (commandsFuse && dynamicContentFuse) {
|
||||
combinedResults = await doSearch(
|
||||
term,
|
||||
commandsFuse,
|
||||
dynamicContentFuse,
|
||||
commandIdToItemMap,
|
||||
dynamicIdToItemMap,
|
||||
showRecentFirst
|
||||
);
|
||||
} else {
|
||||
combinedResults = [];
|
||||
@@ -176,7 +128,7 @@
|
||||
isLoading = false;
|
||||
};
|
||||
|
||||
const debouncedPerformSearch = debounce(performSearch, 20);
|
||||
const debouncedPerformSearch = debounce(performSearch, 10);
|
||||
|
||||
$effect(() => {
|
||||
if (commandPalleteOpen) {
|
||||
@@ -189,6 +141,7 @@
|
||||
} else {
|
||||
searchTerm = '';
|
||||
selectedIndex = 0;
|
||||
prevSearchTerm = '';
|
||||
combinedResults = [];
|
||||
}
|
||||
});
|
||||
@@ -203,24 +156,16 @@
|
||||
const maxIndex = (calculatorResult ? 1 : 0) + combinedResults.length - 1;
|
||||
if (selectedIndex < maxIndex) {
|
||||
selectedIndex++;
|
||||
tick().then(() => {
|
||||
const selectedElement = resultsList?.querySelector(`li:nth-child(${selectedIndex + 1})`);
|
||||
selectedElement?.scrollIntoView({ block: 'nearest' });
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const selectPrev = () => {
|
||||
if (selectedIndex > 0) {
|
||||
selectedIndex--;
|
||||
tick().then(() => {
|
||||
const selectedElement = resultsList?.querySelector(`li:nth-child(${selectedIndex + 1})`);
|
||||
selectedElement?.scrollIntoView({ block: 'nearest' });
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
function executeItemAction(item: StaticCommandItem | IndexItem) {
|
||||
function executeItemAction(item: StaticCommandItem | HydratedIndexItem) {
|
||||
if ('action' in item && typeof item.action === 'function') {
|
||||
(item as StaticCommandItem).action();
|
||||
} else if ('actionId' in item && item.actionId && actionMap[item.actionId]) {
|
||||
@@ -243,7 +188,6 @@
|
||||
};
|
||||
|
||||
const handleKeyNav = (e: KeyboardEvent) => {
|
||||
// Handle regular navigation
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
selectNext();
|
||||
@@ -266,18 +210,18 @@
|
||||
transition:fade={{ duration: 150, easing: quintOut }}
|
||||
></div>
|
||||
|
||||
<div class="fixed inset-0 z-[50000] flex justify-center place-items-start p-8 sm:p-6 md:p-8 select-none scale-120 origin-top"
|
||||
<div class="fixed inset-0 z-[50000] flex justify-center place-items-start p-8 sm:p-6 md:p-8 select-none"
|
||||
onclick={() => commandPalleteOpen = false}
|
||||
onkeydown={(e: KeyboardEvent) => e.key === 'Escape' && (commandPalleteOpen = false)}
|
||||
onkeydown={(e) => e.key === 'Escape' && (commandPalleteOpen = false)}
|
||||
role="button"
|
||||
tabindex="0">
|
||||
<div
|
||||
class="w-full max-w-2xl overflow-clip rounded-xl ring-1 shadow-2xl ring-black/5 dark:ring-white/10 { transparencyEffects ? 'bg-white/80 dark:bg-zinc-900/80 backdrop-blur-xl' : 'bg-white dark:bg-zinc-900' }"
|
||||
class="w-full max-w-2xl overflow-clip rounded-xl ring-1 shadow-2xl ring-black/5 dark:ring-white/10 { transparencyEffects ? 'bg-white/80 dark:bg-zinc-900/80 backdrop-blur' : 'bg-white dark:bg-zinc-900' }"
|
||||
transition:scale={{ duration: 100, start: 0.95, opacity: 0, easing: circOut }}
|
||||
onclick={(e: MouseEvent) => {
|
||||
onclick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
onkeydown={(e: KeyboardEvent) => {
|
||||
onkeydown={(e) => {
|
||||
if (e.key === 'Escape') {
|
||||
commandPalleteOpen = false;
|
||||
}
|
||||
@@ -298,10 +242,7 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ul
|
||||
bind:this={resultsList}
|
||||
class="overflow-y-auto max-h-[24rem] text-base scroll-py-2 p-2 gap-0.5 flex flex-col"
|
||||
>
|
||||
<ul class="overflow-y-auto max-h-[24rem] text-base scroll-py-2 p-1 gap-0.5 flex flex-col">
|
||||
<Calculator
|
||||
searchTerm={searchTerm}
|
||||
isSelected={selectedIndex === 0}
|
||||
@@ -316,39 +257,40 @@
|
||||
{#if result.type === 'command'}
|
||||
{@const staticItem = item as StaticCommandItem}
|
||||
<button
|
||||
class="w-full flex items-center px-2 py-1.5 rounded-lg select-none cursor-pointer group transition-colors duration-100 ring-0 dark:ring-zinc-600/50
|
||||
{isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white dark:ring-[1px] dark:shadow' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
|
||||
class="w-full flex items-center px-2 py-1.5 rounded-lg select-none cursor-pointer group
|
||||
{isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
|
||||
onclick={() => executeItemAction(staticItem)}
|
||||
>
|
||||
<div class="flex-none scale-90 w-8 h-8 text-xl font-IconFamily flex items-center justify-center bg-gradient-to-br {staticItem.category === 'navigation' ? 'from-[#FA5D5D] to-[#DC2F30]' : 'from-[#4FBBFE] to-[#2090F3]'} rounded-md text-white">{staticItem.icon}</div>
|
||||
<div class="flex-none w-8 h-8 text-xl font-IconFamily flex items-center justify-center {isSelected ? 'text-zinc-900 dark:text-white' : 'text-zinc-600 dark:text-zinc-400'}">{staticItem.icon}</div>
|
||||
<span class="ml-4 text-lg truncate">
|
||||
<HighlightedText text={staticItem.text} term={searchTerm} matches={result.matches} />
|
||||
{@html highlightMatch(staticItem.text, searchTerm, result.matches)}
|
||||
</span>
|
||||
{#if staticItem.keybindLabel}
|
||||
<div class="flex-none ml-auto">
|
||||
{@render Shortcut({ text: '', keybind: staticItem.keybindLabel })}
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
{:else if result.type === 'dynamic'}
|
||||
{@const dynamicItem = item as IndexItem}
|
||||
{@const RenderComponent = renderComponentMap[dynamicItem.renderComponentId]}
|
||||
{#if RenderComponent}
|
||||
<RenderComponent
|
||||
{@const dynamicItem = item as HydratedIndexItem}
|
||||
{#if dynamicItem.renderComponent}
|
||||
<dynamicItem.renderComponent
|
||||
item={dynamicItem}
|
||||
isSelected={isSelected}
|
||||
searchTerm={searchTerm}
|
||||
matches={result.matches}
|
||||
onclick={() => executeItemAction(dynamicItem)}
|
||||
onkeydown={() => executeItemAction(dynamicItem)}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
on:click={() => executeItemAction(dynamicItem)}
|
||||
/>
|
||||
{:else}
|
||||
<button
|
||||
class="w-full flex flex-col px-2 py-1.5 rounded-lg select-none cursor-pointer group
|
||||
{isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white dark:ring-[1px]' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
|
||||
{isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
|
||||
onclick={() => executeItemAction(dynamicItem)}
|
||||
>
|
||||
<div class="flex items-center w-full">
|
||||
<div class="flex-none w-8 h-8 text-xl font-IconFamily flex items-center justify-center {isSelected ? 'text-zinc-900 dark:text-white' : 'text-zinc-600 dark:text-zinc-400'}">{dynamicItem.metadata?.icon || '\ue924'}</div>
|
||||
<span class="ml-4 text-lg truncate">
|
||||
<HighlightedText text={dynamicItem.text} term={searchTerm} matches={result.matches} />
|
||||
{@html stripHtmlButKeepHighlights(highlightMatch(dynamicItem.text, searchTerm, result.matches))}
|
||||
</span>
|
||||
<span class="flex-none ml-auto text-xs text-zinc-500 dark:text-zinc-400">
|
||||
{dynamicItem.category}
|
||||
@@ -356,7 +298,7 @@
|
||||
</div>
|
||||
{#if dynamicItem.content}
|
||||
<div class="mt-1 ml-12 text-sm text-zinc-600 dark:text-zinc-400 line-clamp-2 text-start">
|
||||
<HighlightedText text={dynamicItem.content} term={searchTerm} matches={result.matches} />
|
||||
{@html stripHtmlButKeepHighlights(highlightSnippet(dynamicItem.content, searchTerm, result.matches))}
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
@@ -380,7 +322,18 @@
|
||||
</ul>
|
||||
<div class="px-3 py-2 w-full border-t border-zinc-900/5 dark:border-zinc-100/5 bg-white/5">
|
||||
{#if combinedResults.length > 0 || calculatorResult}
|
||||
<div class="flex justify-between items-center h-7 text-sm text-zinc-500 dark:text-zinc-400">
|
||||
<div class="flex justify-between items-center h-5 text-sm text-zinc-500 dark:text-zinc-400">
|
||||
<div class="flex gap-4 items-center">
|
||||
{#if !calculatorResult}
|
||||
{#if selectedIndex >= 0 && selectedIndex < combinedResults.length}
|
||||
{@const item = combinedResults[selectedIndex].item}
|
||||
{#if 'keybind' in item && item.keybind}
|
||||
{@render Shortcut({ text: 'Shortcut', keybind: [ ...(item?.keybindLabel ?? []) ] })}
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex gap-4 items-center">
|
||||
{@render Shortcut({ text: 'Navigate', keybind: ['↑', '↓']})}
|
||||
{#if calculatorResult && selectedIndex === 0}
|
||||
@@ -403,6 +356,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
@@ -414,9 +368,23 @@
|
||||
<div class="flex gap-2 items-center">
|
||||
<div class="flex gap-1 items-center">
|
||||
{#each keybind as key}
|
||||
<kbd class="size-6 text-[0.9rem] flex justify-center items-center rounded bg-zinc-100 dark:bg-zinc-100/10">{key}</kbd>
|
||||
<kbd class="px-1 py-0.5 text-[0.8rem] text-center align-middle rounded min-w-6 bg-zinc-100 dark:bg-zinc-100/10">{key}</kbd>
|
||||
{/each}
|
||||
</div>
|
||||
<span>{text}</span>
|
||||
</div>
|
||||
{/snippet}
|
||||
|
||||
<style>
|
||||
:global(.highlight) {
|
||||
background-color: rgba(200, 200, 200, 0.3);
|
||||
font-weight: 500;
|
||||
border-radius: 2px;
|
||||
padding: 0 2px;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
.dark :global(.highlight) {
|
||||
background-color: rgba(79, 79, 79, 0.2);
|
||||
}
|
||||
</style>
|
||||
@@ -1,34 +0,0 @@
|
||||
<script lang="ts">
|
||||
import HighlightedText from '../../utils/HighlightedText.svelte';
|
||||
import type { DynamicContentItem } from '../../utils/dynamicItems';
|
||||
import type { FuseResultMatch } from '../../core/types';
|
||||
|
||||
const { item, isSelected, searchTerm, matches, onclick } = $props<{
|
||||
item: DynamicContentItem;
|
||||
isSelected: boolean;
|
||||
searchTerm: string;
|
||||
matches?: readonly FuseResultMatch[];
|
||||
onclick: () => void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<button
|
||||
class="w-full flex flex-col px-2 py-1.5 rounded-lg select-none cursor-pointer group transition-colors duration-100 ring-0 dark:ring-zinc-600/50
|
||||
{isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white dark:ring-[1px] dark:shadow' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
|
||||
onclick={onclick}
|
||||
>
|
||||
<div class="flex items-center w-full">
|
||||
<div class="flex-none scale-90 w-8 h-8 text-xl font-IconFamily flex items-center justify-center bg-gradient-to-br from-[#59F675] to-[#1BC636] rounded-md text-white">{item.metadata?.icon || '\uebee'}</div>
|
||||
<span class="ml-4 text-lg truncate">
|
||||
<HighlightedText text={item.text} term={searchTerm} matches={matches} />
|
||||
</span>
|
||||
<span class="flex-none ml-auto text-xs text-zinc-500 dark:text-zinc-400">
|
||||
{item.category}
|
||||
</span>
|
||||
</div>
|
||||
{#if item.content}
|
||||
<div class="mt-1 ml-12 text-sm text-zinc-600 dark:text-zinc-400 line-clamp-2 text-start">
|
||||
<HighlightedText text={item.content} term={searchTerm} matches={matches} />
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
@@ -1,29 +0,0 @@
|
||||
<script lang="ts">
|
||||
import HighlightedText from '../../utils/HighlightedText.svelte';
|
||||
import type { DynamicContentItem } from '../../utils/dynamicItems';
|
||||
import type { FuseResultMatch } from '../../core/types';
|
||||
|
||||
const { item, isSelected, searchTerm, matches, onclick } = $props<{
|
||||
item: DynamicContentItem;
|
||||
isSelected: boolean;
|
||||
searchTerm: string;
|
||||
matches?: readonly FuseResultMatch[];
|
||||
onclick: () => void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<button
|
||||
class="w-full flex flex-col px-2 py-1.5 rounded-lg select-none cursor-pointer group transition-colors duration-100 ring-0 dark:ring-zinc-600/50
|
||||
{isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white dark:ring-[1px] dark:shadow' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
|
||||
onclick={onclick}
|
||||
>
|
||||
<div class="flex items-center w-full">
|
||||
<div class="flex-none scale-90 w-8 h-8 text-xl font-IconFamily flex items-center justify-center text-white bg-gradient-to-br from-[#59aaf6] to-[#1b62c6] rounded-md">{item.metadata?.icon || '\uebe7'}</div>
|
||||
<span class="ml-4 text-lg truncate {item.metadata?.closed ? 'line-through opacity-80' : ''}">
|
||||
<HighlightedText text={item.text} term={searchTerm} matches={matches} />
|
||||
</span>
|
||||
<span class="flex-none ml-auto text-xs text-zinc-500 dark:text-zinc-400">
|
||||
{item.category}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
@@ -1,36 +0,0 @@
|
||||
<script lang="ts">
|
||||
import HighlightedText from '../../utils/HighlightedText.svelte';
|
||||
import type { IndexItem } from '../../indexing/types';
|
||||
import type { FuseResultMatch } from '../../core/types';
|
||||
|
||||
export let item: IndexItem;
|
||||
export let isSelected: boolean;
|
||||
export let searchTerm: string;
|
||||
export let matches: readonly FuseResultMatch[] | undefined;
|
||||
export let onclick: (() => void) | undefined;
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<button
|
||||
class="w-full flex flex-col px-2 py-1.5 rounded-lg select-none cursor-pointer group transition-colors duration-100 ring-0 dark:ring-zinc-600/50
|
||||
{isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white dark:ring-[1px] dark:shadow' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
|
||||
onclick={onclick}
|
||||
>
|
||||
<div class="flex items-center w-full">
|
||||
<div class="flex-none scale-90 w-8 h-8 text-xl font-IconFamily flex items-center justify-center text-white {item.metadata?.type === 'assessments' ? 'bg-gradient-to-br from-[#fa915d] to-[#dc6c2f] rounded-md' : 'bg-gradient-to-br from-[#4FBBFE] to-[#2090F3] rounded-md'} {item.metadata.isActive ? 'opacity-100' : 'opacity-80'}">
|
||||
{item.metadata?.type === 'assessments' ? '\ueac3' : '\ueb4d'}
|
||||
</div>
|
||||
<span class="ml-4 text-lg truncate {item.metadata.isActive ? 'opacity-100' : 'opacity-70'}">
|
||||
<HighlightedText text={item.text} term={searchTerm} matches={matches} />
|
||||
</span>
|
||||
<span class="flex-none ml-auto text-xs text-zinc-500 dark:text-zinc-400 {item.metadata.isActive ? 'opacity-100' : 'opacity-70'}">
|
||||
{item.metadata?.subjectCode}
|
||||
</span>
|
||||
</div>
|
||||
{#if item.content}
|
||||
<div class="mt-1 ml-12 text-sm text-zinc-600 dark:text-zinc-400 line-clamp-2 text-start">
|
||||
<HighlightedText text={item.content} term={searchTerm} matches={matches} />
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
-27
@@ -190,31 +190,4 @@ export const unitFullNames: Record<string, string> = {
|
||||
NOK: "Norwegian Krone",
|
||||
SGD: "Singapore Dollars",
|
||||
HKD: "Hong Kong Dollars",
|
||||
KRW: "South Korean Won",
|
||||
MXN: "Mexican Peso",
|
||||
BRL: "Brazilian Real",
|
||||
RUB: "Russian Ruble",
|
||||
TRY: "Turkish Lira",
|
||||
ZAR: "South African Rand",
|
||||
PLN: "Polish Zloty",
|
||||
THB: "Thai Baht",
|
||||
DKK: "Danish Krone",
|
||||
CZK: "Czech Koruna",
|
||||
HUF: "Hungarian Forint",
|
||||
ILS: "Israeli Shekel",
|
||||
PHP: "Philippine Peso",
|
||||
TWD: "Taiwan Dollar",
|
||||
MYR: "Malaysian Ringgit",
|
||||
|
||||
// --- Cryptocurrencies ---
|
||||
BTC: "Bitcoin",
|
||||
ETH: "Ethereum",
|
||||
XRP: "Ripple",
|
||||
LTC: "Litecoin",
|
||||
ADA: "Cardano",
|
||||
DOT: "Polkadot",
|
||||
SOL: "Solana",
|
||||
MATIC: "Polygon",
|
||||
AVAX: "Avalanche",
|
||||
UNI: "Uniswap",
|
||||
};
|
||||
@@ -1,6 +1,5 @@
|
||||
import { settingsState } from "@/seqta/utils/listeners/SettingsState";
|
||||
import { loadHomePage } from "@/seqta/utils/Loaders/LoadHomePage";
|
||||
import { waitForElm } from "@/seqta/utils/waitForElm";
|
||||
|
||||
export interface BaseCommandItem {
|
||||
id: string;
|
||||
@@ -17,127 +16,14 @@ export interface StaticCommandItem extends BaseCommandItem {
|
||||
keybindLabel?: string[];
|
||||
}
|
||||
|
||||
// Function to get current lesson
|
||||
async function getCurrentLesson() {
|
||||
const date = new Date();
|
||||
const todayFormatted = formatDate(date);
|
||||
|
||||
try {
|
||||
const response = await fetch(`${location.origin}/seqta/student/load/timetable?`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
from: todayFormatted,
|
||||
until: todayFormatted,
|
||||
student: 69,
|
||||
}),
|
||||
});
|
||||
|
||||
const timetableData = await response.json();
|
||||
|
||||
if (!timetableData.payload.items.length) {
|
||||
alert("No lessons today!");
|
||||
return null;
|
||||
}
|
||||
|
||||
const lessons = timetableData.payload.items.sort((a: any, b: any) =>
|
||||
a.from.localeCompare(b.from)
|
||||
);
|
||||
|
||||
const currentTime = new Date();
|
||||
|
||||
for (const lesson of lessons) {
|
||||
const [startHour, startMinute] = lesson.from.split(":").map(Number);
|
||||
const [endHour, endMinute] = lesson.until.split(":").map(Number);
|
||||
|
||||
const startDate = new Date(currentTime);
|
||||
startDate.setHours(startHour, startMinute, 0);
|
||||
|
||||
const endDate = new Date(currentTime);
|
||||
endDate.setHours(endHour, endMinute, 0);
|
||||
|
||||
if (startDate <= currentTime && endDate > currentTime) {
|
||||
return lesson;
|
||||
}
|
||||
}
|
||||
|
||||
alert("There is no current lesson!");
|
||||
return null;
|
||||
} catch (error) {
|
||||
console.error("Error fetching current lesson:", error);
|
||||
alert("Error getting current lesson. Please try again.");
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async function navigateToSpecificLesson(lesson: any) {
|
||||
try {
|
||||
await waitForElm(".course .navigator", true, 100, 100);
|
||||
|
||||
const today = new Date();
|
||||
const todayDateString = today.toLocaleDateString('en-GB', {
|
||||
day: 'numeric',
|
||||
month: 'short'
|
||||
});
|
||||
|
||||
const weeks = document.querySelectorAll(".course .navigator .week");
|
||||
|
||||
for (const week of weeks) {
|
||||
// Look for lessons in this week
|
||||
const lessons = week.querySelectorAll(".lesson");
|
||||
|
||||
for (const lessonElement of lessons) {
|
||||
const metaElement = lessonElement.querySelector(".meta");
|
||||
if (!metaElement) continue;
|
||||
|
||||
const dateElement = metaElement.querySelector(".date");
|
||||
const periodElement = metaElement.querySelector(".period");
|
||||
|
||||
if (!dateElement || !periodElement) continue;
|
||||
|
||||
const lessonDate = dateElement.textContent?.trim();
|
||||
const lessonPeriod = periodElement.textContent?.trim().match(/\d+/)?.[0];
|
||||
|
||||
// extract the number from the period
|
||||
const normalizedLessonPeriod = lesson.period?.match(/\d+/)?.[0];
|
||||
|
||||
// Check if this lesson matches today's date and the current lesson's period
|
||||
if (lessonDate === todayDateString && lessonPeriod === normalizedLessonPeriod) {
|
||||
// Found the exact matching lesson, click it
|
||||
(lessonElement as HTMLElement).click();
|
||||
console.log(`Navigated to exact lesson: ${lessonDate} ${lessonPeriod}`);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const todayButton = Array.from(document.querySelectorAll('#toolbar .uiButton'))
|
||||
.find(button => button.textContent?.trim() === 'Today') as HTMLElement;
|
||||
|
||||
if (todayButton) {
|
||||
todayButton.click();
|
||||
}
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error("Error navigating to specific lesson:", error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(date: Date): string {
|
||||
const year = date.getFullYear();
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, "0");
|
||||
const day = date.getDate().toString().padStart(2, "0");
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
|
||||
const staticCommands: StaticCommandItem[] = [
|
||||
{
|
||||
id: "home",
|
||||
icon: "\ueb4c",
|
||||
category: "navigation",
|
||||
text: "Home",
|
||||
keybind: ["alt+h"],
|
||||
keybindLabel: ["Alt", "H"],
|
||||
action: () => {
|
||||
window.location.hash = "?page=/home";
|
||||
loadHomePage();
|
||||
@@ -149,6 +35,8 @@ const staticCommands: StaticCommandItem[] = [
|
||||
icon: "\uebfd",
|
||||
category: "navigation",
|
||||
text: "Direct Messages",
|
||||
keybind: ["alt+m"],
|
||||
keybindLabel: ["Alt", "M"],
|
||||
action: () => {
|
||||
window.location.hash = "?page=/messages";
|
||||
},
|
||||
@@ -159,27 +47,13 @@ const staticCommands: StaticCommandItem[] = [
|
||||
icon: "\ue9cd",
|
||||
category: "navigation",
|
||||
text: "Timetable",
|
||||
keybind: ["alt+t"],
|
||||
keybindLabel: ["Alt", "T"],
|
||||
action: () => {
|
||||
window.location.hash = "?page=/timetable";
|
||||
},
|
||||
priority: 4,
|
||||
},
|
||||
{
|
||||
id: "Current Lesson",
|
||||
icon: "\ue9a5",
|
||||
category: "navigation",
|
||||
text: "Current Lesson",
|
||||
priority: 4,
|
||||
action: async () => {
|
||||
const currentLesson = await getCurrentLesson();
|
||||
if (currentLesson && currentLesson.programmeID !== 0) {
|
||||
// Navigate to course page first
|
||||
window.location.hash = `?page=/courses/${currentLesson.programmeID}:${currentLesson.metaID}`;
|
||||
|
||||
await navigateToSpecificLesson(currentLesson);
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "assessments",
|
||||
icon: "\ueac3",
|
||||
@@ -188,44 +62,17 @@ const staticCommands: StaticCommandItem[] = [
|
||||
keybind: ["alt+a"],
|
||||
keybindLabel: ["Alt", "A"],
|
||||
action: () => {
|
||||
window.location.hash = "?page=/assessments/upcoming";
|
||||
window.location.hash = "?page=/assessments";
|
||||
},
|
||||
priority: 4,
|
||||
},
|
||||
{
|
||||
id: "dashboard",
|
||||
icon: "\ueb87",
|
||||
category: "navigation",
|
||||
text: "Dashboard",
|
||||
priority: 4,
|
||||
action: () => {
|
||||
window.location.hash = "?page=/dashboard";
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "compose-message",
|
||||
icon: "\ue924",
|
||||
category: "action",
|
||||
text: "Compose Message",
|
||||
action: () => {
|
||||
window.postMessage({
|
||||
type: "triggerKeyboardEvent",
|
||||
key: 'm',
|
||||
code: 'KeyM',
|
||||
keyCode: 77,
|
||||
altKey: true
|
||||
}, "*");
|
||||
},
|
||||
keywords: ["compose", "message", "dm", "direct message", "new message"],
|
||||
priority: 3,
|
||||
},
|
||||
{
|
||||
id: "toggle-dark-mode",
|
||||
icon: "\uecfe",
|
||||
category: "action",
|
||||
text: "Toggle Dark Mode",
|
||||
action: () => (settingsState.DarkMode = !settingsState.DarkMode),
|
||||
priority: 3,
|
||||
priority: 2,
|
||||
keywords: ["theme", "appearance"],
|
||||
},
|
||||
];
|
||||
|
||||
@@ -2,30 +2,21 @@ import type { Plugin } from "@/plugins/core/types";
|
||||
import { BasePlugin } from "@/plugins/core/settings";
|
||||
import {
|
||||
booleanSetting,
|
||||
buttonSetting,
|
||||
defineSettings,
|
||||
Setting,
|
||||
hotkeySetting,
|
||||
stringSetting,
|
||||
} from "@/plugins/core/settingsHelpers";
|
||||
import styles from "./styles.css?inline";
|
||||
import { waitForElm } from "@/seqta/utils/waitForElm";
|
||||
import { runIndexing } from "../indexing/indexer";
|
||||
import { initVectorSearch } from "../search/vector/vectorSearch";
|
||||
import { cleanupSearchBar, mountSearchBar } from "./mountSearchBar";
|
||||
import { IndexedDbManager } from "embeddia";
|
||||
import { VectorWorkerManager } from "../indexing/worker/vectorWorkerManager";
|
||||
|
||||
// Platform-aware default hotkey
|
||||
const getDefaultHotkey = () => {
|
||||
const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
|
||||
return isMac ? "cmd+k" : "ctrl+k";
|
||||
};
|
||||
|
||||
const settings = defineSettings({
|
||||
searchHotkey: hotkeySetting({
|
||||
default: getDefaultHotkey(),
|
||||
searchHotkey: stringSetting({
|
||||
default: "ctrl+k",
|
||||
title: "Search Hotkey",
|
||||
description: "Keyboard shortcut to open the search",
|
||||
description: "Keyboard shortcut to open the search (cmd on Mac)",
|
||||
}),
|
||||
showRecentFirst: booleanSetting({
|
||||
default: true,
|
||||
@@ -42,43 +33,6 @@ const settings = defineSettings({
|
||||
title: "Index on Page Load",
|
||||
description: "Run content indexing when SEQTA loads",
|
||||
}),
|
||||
resetIndex: buttonSetting({
|
||||
title: "Reset Index",
|
||||
description: "Reset the search index and storage",
|
||||
trigger: async () => {
|
||||
const confirmed = confirm("Are you sure you want to reset the search index and storage?");
|
||||
|
||||
if (confirmed) {
|
||||
try {
|
||||
// Reset the vector worker first
|
||||
const workerManager = VectorWorkerManager.getInstance();
|
||||
await workerManager.resetWorker();
|
||||
console.log("Vector worker reset successfully");
|
||||
} catch (e) {
|
||||
console.warn("Failed to reset vector worker:", e);
|
||||
}
|
||||
|
||||
// Delete both 'embeddiaDB' and 'betterseqta-index' using native IndexedDB APIs
|
||||
const deleteDb = (dbName: string) => {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
const req = indexedDB.deleteDatabase(dbName);
|
||||
req.onsuccess = () => resolve();
|
||||
req.onerror = () => reject(req.error);
|
||||
req.onblocked = () => {
|
||||
reject(new Error(`One database is open, failed to remove: ${dbName}`));
|
||||
};
|
||||
});
|
||||
};
|
||||
try {
|
||||
await deleteDb("embeddiaDB");
|
||||
await deleteDb("betterseqta-index");
|
||||
alert("Search index and storage have been reset.");
|
||||
} catch (e) {
|
||||
alert("Failed to reset one or more databases: " + String(e));
|
||||
}
|
||||
}
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
class GlobalSearchPlugin extends BasePlugin<typeof settings> {
|
||||
@@ -93,9 +47,6 @@ class GlobalSearchPlugin extends BasePlugin<typeof settings> {
|
||||
|
||||
@Setting(settings.runIndexingOnLoad)
|
||||
runIndexingOnLoad!: boolean;
|
||||
|
||||
@Setting(settings.resetIndex)
|
||||
resetIndex!: () => void;
|
||||
}
|
||||
|
||||
const settingsInstance = new GlobalSearchPlugin();
|
||||
@@ -107,68 +58,13 @@ const globalSearchPlugin: Plugin<typeof settings> = {
|
||||
version: "1.0.0",
|
||||
settings: settingsInstance.settings,
|
||||
disableToggle: true,
|
||||
defaultEnabled: false,
|
||||
beta: true,
|
||||
styles: styles,
|
||||
|
||||
run: async (api) => {
|
||||
const appRef = { current: null };
|
||||
|
||||
try {
|
||||
await IndexedDbManager.create("embeddiaDB", "embeddiaObjectStore", {
|
||||
primaryKey: "id",
|
||||
autoIncrement: false,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Failed to create IndexedDB:", error);
|
||||
// Continue execution - the search might still work without persistence
|
||||
}
|
||||
|
||||
initVectorSearch();
|
||||
|
||||
// Warm up vector worker in background to improve initial response time
|
||||
setTimeout(async () => {
|
||||
try {
|
||||
VectorWorkerManager.getInstance();
|
||||
} catch (error) {
|
||||
console.warn("[Global Search] Vector worker warm-up failed:", error);
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
// Add debug helpers to window for troubleshooting
|
||||
// @ts-ignore
|
||||
window.globalSearchDebug = {
|
||||
resetWorker: async () => {
|
||||
const workerManager = VectorWorkerManager.getInstance();
|
||||
await workerManager.resetWorker();
|
||||
console.log("Vector worker reset via debug helper");
|
||||
},
|
||||
checkWorkerStatus: () => {
|
||||
const workerManager = VectorWorkerManager.getInstance();
|
||||
console.log("Streaming active:", workerManager.isStreamingActive());
|
||||
},
|
||||
checkIndexedDBSize: async () => {
|
||||
try {
|
||||
const estimate = await navigator.storage.estimate();
|
||||
console.log("Storage estimate:", estimate);
|
||||
|
||||
// Check embeddiaDB size
|
||||
const dbRequest = indexedDB.open("embeddiaDB");
|
||||
dbRequest.onsuccess = () => {
|
||||
const db = dbRequest.result;
|
||||
const transaction = db.transaction(["embeddiaObjectStore"], "readonly");
|
||||
const store = transaction.objectStore("embeddiaObjectStore");
|
||||
const countRequest = store.count();
|
||||
countRequest.onsuccess = () => {
|
||||
console.log("embeddiaDB item count:", countRequest.result);
|
||||
};
|
||||
};
|
||||
} catch (e) {
|
||||
console.error("Error checking storage:", e);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (api.settings.runIndexingOnLoad) {
|
||||
setTimeout(async () => {
|
||||
await runIndexing();
|
||||
@@ -180,8 +76,8 @@ const globalSearchPlugin: Plugin<typeof settings> = {
|
||||
if (title) {
|
||||
mountSearchBar(title, api, appRef);
|
||||
} else {
|
||||
const titleElement = await waitForElm("#title", true, 100, 60);
|
||||
mountSearchBar(titleElement, api, appRef);
|
||||
await waitForElm("#title", true, 100, 60);
|
||||
mountSearchBar(document.querySelector("#title") as Element, api, appRef);
|
||||
}
|
||||
|
||||
return () => {
|
||||
|
||||
@@ -2,56 +2,29 @@ import renderSvelte from "@/interface/main";
|
||||
import SearchBar from "../components/SearchBar.svelte";
|
||||
import { unmount } from "svelte";
|
||||
import { VectorWorkerManager } from "../indexing/worker/vectorWorkerManager";
|
||||
import { formatHotkeyForDisplay, isValidHotkey } from "../utils/hotkeyUtils";
|
||||
import browser from "webextension-polyfill";
|
||||
|
||||
export function mountSearchBar(
|
||||
titleElement: Element,
|
||||
api: any,
|
||||
appRef: { current: any; storageChangeHandler?: any },
|
||||
appRef: { current: any }
|
||||
) {
|
||||
if (titleElement.querySelector(".search-trigger")) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Fallback to default hotkey if the current one is invalid
|
||||
let currentHotkey = isValidHotkey(api.settings.searchHotkey) ? api.settings.searchHotkey : "ctrl+k";
|
||||
let hotkeyDisplay = formatHotkeyForDisplay(currentHotkey);
|
||||
|
||||
const searchButton = document.createElement("div");
|
||||
searchButton.className = "search-trigger";
|
||||
|
||||
const updateSearchButtonDisplay = () => {
|
||||
searchButton.innerHTML = /* html */ `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||||
</svg>
|
||||
<p>Quick search...</p>
|
||||
<span style="margin-left: auto; display: flex; align-items: center; color: #777; font-size: 12px;">${hotkeyDisplay}</span>
|
||||
<span style="margin-left: auto; display: flex; align-items: center; color: #777; font-size: 12px;">⌘K</span>
|
||||
`;
|
||||
};
|
||||
|
||||
updateSearchButtonDisplay();
|
||||
titleElement.appendChild(searchButton);
|
||||
|
||||
// Listen for hotkey setting changes
|
||||
const handleStorageChange = (changes: any, area: string) => {
|
||||
if (area === 'local' && changes['plugin.global-search.settings']) {
|
||||
const newSettings = changes['plugin.global-search.settings'].newValue as { searchHotkey?: string } | undefined;
|
||||
if (newSettings?.searchHotkey && isValidHotkey(newSettings.searchHotkey)) {
|
||||
currentHotkey = newSettings.searchHotkey;
|
||||
hotkeyDisplay = formatHotkeyForDisplay(currentHotkey);
|
||||
updateSearchButtonDisplay();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
browser.storage.onChanged.addListener(handleStorageChange);
|
||||
|
||||
// Store reference to cleanup function for proper removal
|
||||
appRef.storageChangeHandler = handleStorageChange;
|
||||
|
||||
const searchRoot = document.createElement("div");
|
||||
document.body.appendChild(searchRoot);
|
||||
const searchRootShadow = searchRoot.attachShadow({ mode: "open" });
|
||||
@@ -65,40 +38,19 @@ export function mountSearchBar(
|
||||
appRef.current = renderSvelte(SearchBar, searchRootShadow, {
|
||||
transparencyEffects: api.settings.transparencyEffects ? true : false,
|
||||
showRecentFirst: api.settings.showRecentFirst,
|
||||
searchHotkey: currentHotkey,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error rendering Svelte component:", error);
|
||||
}
|
||||
}
|
||||
|
||||
export function cleanupSearchBar(appRef: { current: any; storageChangeHandler?: any }) {
|
||||
if (appRef.current) {
|
||||
try {
|
||||
unmount(appRef.current);
|
||||
appRef.current = null;
|
||||
} catch (error) {
|
||||
console.error("Error unmounting Svelte component:", error);
|
||||
}
|
||||
}
|
||||
export function cleanupSearchBar(appRef: { current: any }) {
|
||||
const searchButton = document.querySelector(".search-trigger");
|
||||
const searchRoot = document.querySelector(".global-search-root");
|
||||
if (searchButton) searchButton.remove();
|
||||
if (searchRoot) searchRoot.remove();
|
||||
|
||||
// Remove search trigger button
|
||||
const searchTrigger = document.querySelector(".search-trigger");
|
||||
if (searchTrigger) {
|
||||
searchTrigger.remove();
|
||||
}
|
||||
|
||||
// Remove search root
|
||||
const searchRoot = document.querySelector("div[data-search-root]");
|
||||
if (searchRoot) {
|
||||
searchRoot.remove();
|
||||
}
|
||||
|
||||
// Clean up vector worker
|
||||
// Clean up workers
|
||||
VectorWorkerManager.getInstance().terminate();
|
||||
|
||||
if (appRef.storageChangeHandler) {
|
||||
browser.storage.onChanged.removeListener(appRef.storageChangeHandler);
|
||||
appRef.storageChangeHandler = null;
|
||||
}
|
||||
unmount(appRef.current);
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user