mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-06 03:34:40 +00:00
Merge branch 'BetterSEQTA:main' into main
This commit is contained in:
Jones Jankovic
+5
-5
@@ -6,9 +6,9 @@ Hey there! 👋 Thanks for your interest in contributing to BetterSEQTA+! We're
|
||||
|
||||
**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)
|
||||
- **📖 Read our [contributing guide](https://docs.betterseqta.org/contributing/)** - This walks you through everything step-by-step, from setting up your development environment to making your first pull request.
|
||||
- **🏗️ Understand the codebase** with the [architecture guide](https://docs.betterseqta.org/architecture/)
|
||||
- **🔧 Having issues?** Check the [troubleshooting guide](https://docs.betterseqta.org/troubleshooting/)
|
||||
|
||||
We have lots of [`good first issue`](https://github.com/BetterSEQTA/BetterSEQTA-plus/labels/good%20first%20issue) labels that are perfect for beginners!
|
||||
|
||||
@@ -33,8 +33,8 @@ Join our community channels to discuss the project, get help, and connect with o
|
||||
|
||||
If you're interested in creating plugins for BetterSEQTA+, check out our plugin development guides:
|
||||
|
||||
- [Creating Your First Plugin](./docs/plugins/creating-plugins.md)
|
||||
- [Plugin API Reference](./docs/advanced/plugin-api.md)
|
||||
- [Plugin development](https://docs.betterseqta.org/plugin-development/)
|
||||
- [Plugin API](https://docs.betterseqta.org/plugin-api/)
|
||||
|
||||
## Pull Request Process
|
||||
|
||||
|
||||
@@ -16,17 +16,15 @@
|
||||
<img src="https://img.shields.io/chrome-web-store/rating/afdgaoaclhkhemfkkkonemoapeinchel" />
|
||||
</div>
|
||||
|
||||
## Table of contents
|
||||
## 📚 Documentation
|
||||
All documentation has been moved to the [official docs site](https://docs.betterseqta.org):
|
||||
|
||||
- [Features](#features)
|
||||
- [Creating Custom Themes](#creating-custom-themes)
|
||||
- [Getting Started](#getting-started)
|
||||
- [Running Development](#running-development)
|
||||
- [Building for production](#building-for-production)
|
||||
- [Folder Structure](#folder-structure)
|
||||
- [Contributors](#contributors)
|
||||
- [Credits](#credits)
|
||||
- [Star History](#star-history)
|
||||
Includes:
|
||||
- Getting started
|
||||
- Development setup
|
||||
- Architecture
|
||||
- Plugin system
|
||||
- Theme creation
|
||||
|
||||
## Features
|
||||
|
||||
@@ -50,64 +48,32 @@
|
||||
|
||||
## Creating Custom Themes
|
||||
|
||||
If you are looking to create custom themes, I would recommend you start at the official documentation [here](https://betterseqta.gitbook.io/betterseqta-docs). You can see some premade examples along with a compilation script that can be used to allow for CSS frameworks and libraries such as SCSS to be used [here](https://github.com/BetterSEQTA/BetterSEQTA-Theme-Generator).
|
||||
If you are looking to create custom themes, I would recommend you start at the official documentation [here](https://docs.betterseqta.org/theme-creation/). You can see some premade examples along with a compilation script that can be used to allow for CSS frameworks and libraries such as SCSS to be used [here](https://github.com/BetterSEQTA/BetterSEQTA-Theme-Generator).
|
||||
|
||||
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?
|
||||
## 🚀 Contributing
|
||||
**New contributors welcome!**
|
||||
- 📖 Start here: https://docs.betterseqta.org/install/
|
||||
- 🧠 Architecture: https://docs.betterseqta.org/architecture/
|
||||
- 🧩 Plugins: https://docs.betterseqta.org/plugins/
|
||||
- 💬 Discord: https://discord.gg/YzmbnCDkat
|
||||
|
||||
**New contributors welcome!** 🎉 We've made it easy to get started:
|
||||
|
||||
- **👋 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)
|
||||
## ⚡ Quick Start
|
||||
|
||||
We have lots of 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
|
||||
git clone https://github.com/YOUR_USERNAME_FORKED_WITH/BetterSEQTA-Plus
|
||||
cd BetterSEQTA-Plus
|
||||
```
|
||||
|
||||
**2. Install & Run**
|
||||
```bash
|
||||
npm install --legacy-peer-deps
|
||||
npm run dev
|
||||
```
|
||||
````
|
||||
|
||||
**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! 🎉
|
||||
> [!WARNING]
|
||||
> Whenever you update the extension while not in dev mode, you will need to use the reload button on the extension page.
|
||||
Then load `dist` in `chrome://extensions` (Developer Mode → Load unpacked).
|
||||
|
||||
📚 **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)
|
||||
```
|
||||
|
||||
## 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.
|
||||
|
||||
- The `dist` folder is where the compiled code ends up, this is the folder what you need to load into chrome as an unpacked extension for development.
|
||||
Full setup guide:
|
||||
[https://betterseqta.github.io/BetterSEQTA-Docs/install/#for-developers-development-environment](https://betterseqta.github.io/BetterSEQTA-Docs/install/#for-developers-development-environment)
|
||||
|
||||
## Contributors
|
||||
|
||||
@@ -115,11 +81,14 @@ The folder structure is as follows:
|
||||
<img src="https://contrib.rocks/image?repo=betterseqta/betterseqta-plus" />
|
||||
</a>
|
||||
|
||||
Want to contribute? [Click Here!](https://github.com/BetterSEQTA/BetterSEQTA-Plus/blob/main/CONTRIBUTING.md)
|
||||
Want to contribute? [Click Here!](https://docs.betterseqta.org/contributing/)
|
||||
|
||||
## 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.
|
||||
Originally developed by [Nulkem](https://github.com/Nulkem/betterseqta)
|
||||
Ported to Manifest V3 by [MEGA-Dawg68](https://github.com/MEGA-Dawg68)
|
||||
Maintained by [SethBurkart123](https://github.com/SethBurkart123), [Crazypersonalph](https://github.com/Crazypersonalph) & the rest of the BetterSEQTA team!
|
||||
|
||||
## Star History
|
||||
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
# BetterSEQTA+ Architecture
|
||||
|
||||
**Published version:** [docs.betterseqta.org/architecture/](https://docs.betterseqta.org/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
|
||||
@@ -221,7 +223,7 @@ console.log(settingsState.[the setting name])
|
||||
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)
|
||||
2. **Try creating a simple plugin**: Follow the [plugin documentation](https://docs.betterseqta.org/plugins/)
|
||||
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!
|
||||
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
# Getting Started as a Contributor
|
||||
|
||||
**Published version:** [docs.betterseqta.org/contributing/](https://docs.betterseqta.org/contributing/)
|
||||
|
||||
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
|
||||
@@ -222,7 +224,7 @@ git push origin your-branch-name
|
||||
|
||||
### Stuck? Here's How to Get Unstuck
|
||||
|
||||
1. **Check the docs** - [Architecture guide](./ARCHITECTURE.md) explains everything
|
||||
1. **Check the docs** - The [architecture guide](https://docs.betterseqta.org/architecture/) 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
|
||||
|
||||
+21
-21
@@ -1,30 +1,36 @@
|
||||
# BetterSEQTA+ Documentation
|
||||
|
||||
🚧 DOCS UNDER CONSTRUCTION! 🚧
|
||||
|
||||
Welcome to the BetterSEQTA+ documentation! This documentation will help you understand how BetterSEQTA+ works and how to extend it with plugins and new features.
|
||||
**Canonical documentation lives at [docs.betterseqta.org](https://docs.betterseqta.org/).** The pages below are the same topics; use the site for search, navigation, and the latest updates.
|
||||
|
||||
## 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
|
||||
- [Documentation home](https://docs.betterseqta.org/)
|
||||
- [Installation](https://docs.betterseqta.org/install/)
|
||||
- [Contributing](https://docs.betterseqta.org/contributing/)
|
||||
- [Architecture](https://docs.betterseqta.org/architecture/)
|
||||
- [Contribution guidelines (repository)](../CONTRIBUTING.md)
|
||||
- [Troubleshooting](https://docs.betterseqta.org/troubleshooting/)
|
||||
|
||||
### Plugin System
|
||||
### Features & customization
|
||||
|
||||
- [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
|
||||
- [Features](https://docs.betterseqta.org/features/)
|
||||
- [Themes & customization](https://docs.betterseqta.org/customization/)
|
||||
- [Theme creation](https://docs.betterseqta.org/theme-creation/)
|
||||
|
||||
### Plugin system
|
||||
|
||||
- [Plugins overview](https://docs.betterseqta.org/plugins/)
|
||||
- [Plugin development](https://docs.betterseqta.org/plugin-development/)
|
||||
- [Plugin API](https://docs.betterseqta.org/plugin-api/)
|
||||
- [Example plugin](https://docs.betterseqta.org/example-plugin/)
|
||||
|
||||
## Core Concepts
|
||||
|
||||
BetterSEQTA+ is built around several core concepts:
|
||||
|
||||
1. **Plugin System**: BetterSEQTA+ uses a plugin system to extend SEQTA with new features. Plugins are self-contained pieces of code that can be enabled or disabled by the user. Check out our [plugin guide](./plugins/README.md) to learn how to create your own!
|
||||
1. **Plugin System**: BetterSEQTA+ uses a plugin system to extend SEQTA with new features. Plugins are self-contained pieces of code that can be enabled or disabled by the user. See the [plugins documentation](https://docs.betterseqta.org/plugins/).
|
||||
|
||||
2. **Type-Safe Settings**: Each plugin can define settings that are type-safe and automatically rendered in the settings UI. The settings system uses TypeScript decorators to make it easy to define settings with proper typing.
|
||||
|
||||
@@ -36,19 +42,13 @@ BetterSEQTA+ is built around several core concepts:
|
||||
|
||||
If you need help with BetterSEQTA+, you can:
|
||||
|
||||
- [Open an Issue](https://github.com/SeqtaLearning/betterseqta-plus/issues) - Report bugs or request features
|
||||
- [Open an Issue](https://github.com/BetterSEQTA/BetterSEQTA-Plus/issues) - Report bugs or request features
|
||||
- [Join the Discord](https://discord.gg/YzmbnCDkat) - Chat with the community
|
||||
- [Email the Maintainers](mailto:betterseqta.plus@gmail.com) - Contact the maintainers directly
|
||||
|
||||
## Contributing to the Documentation
|
||||
|
||||
We welcome contributions to the documentation! If you find something unclear or missing, please open an issue or submit a pull request.
|
||||
|
||||
To contribute to the documentation:
|
||||
|
||||
1. Fork the repository
|
||||
2. Make your changes to the documentation files
|
||||
3. Submit a pull request with a clear description of your changes
|
||||
We welcome contributions to the documentation. The published site is built from the documentation repository; see [Contributing](https://docs.betterseqta.org/contributing/) for how to help.
|
||||
|
||||
## License
|
||||
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
# Theme Creation Guide
|
||||
|
||||
**Published version:** [docs.betterseqta.org/theme-creation/](https://docs.betterseqta.org/theme-creation/)
|
||||
|
||||
This guide covers everything you need to know about creating custom themes for BetterSEQTA+.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
# Troubleshooting Guide
|
||||
|
||||
**Published version:** [docs.betterseqta.org/troubleshooting/](https://docs.betterseqta.org/troubleshooting/)
|
||||
|
||||
Having issues with BetterSEQTA+ development? This guide covers the most common problems and their solutions.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
# Contributing to BetterSEQTA+
|
||||
|
||||
**Published version:** [docs.betterseqta.org/contributing/](https://docs.betterseqta.org/contributing/)
|
||||
|
||||
Thank you for your interest in contributing to BetterSEQTA+! This document provides guidelines and instructions for contributing to the project.
|
||||
|
||||
## Table of Contents
|
||||
@@ -57,7 +59,7 @@ Key points:
|
||||
|
||||
5. **Install in Chrome/Firefox**
|
||||
|
||||
Follow the [installation instructions](./installation.md#development-installation) to load the development version into your browser.
|
||||
Follow the [installation instructions](https://docs.betterseqta.org/install/) to load the development version into your browser.
|
||||
|
||||
### Project Structure
|
||||
|
||||
@@ -246,8 +248,8 @@ Join our community channels to discuss the project, get help, and connect with o
|
||||
|
||||
If you're interested in creating plugins for BetterSEQTA+, check out our plugin development guides:
|
||||
|
||||
- [Creating Your First Plugin](./plugins/creating-plugins.md)
|
||||
- [Plugin API Reference](./advanced/plugin-api.md)
|
||||
- [Plugin development](https://docs.betterseqta.org/plugin-development/)
|
||||
- [Plugin API](https://docs.betterseqta.org/plugin-api/)
|
||||
|
||||
## Recognition
|
||||
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
# Installing BetterSEQTA+
|
||||
|
||||
**Published version:** [docs.betterseqta.org/install/](https://docs.betterseqta.org/install/)
|
||||
|
||||
This guide will walk you through the process of installing and setting up BetterSEQTA+ for development or usage.
|
||||
|
||||
## Prerequisites
|
||||
@@ -178,5 +180,5 @@ bun run dev
|
||||
|
||||
Now that you have BetterSEQTA+ installed, you can:
|
||||
|
||||
- [Getting Started with Plugins](./plugins/getting-started.md)
|
||||
- [Contribute to the project](../CONTRIBUTING.md)
|
||||
- [Plugins](https://docs.betterseqta.org/plugins/)
|
||||
- [Contribute to the project](https://docs.betterseqta.org/contributing/) · [Repository CONTRIBUTING.md](../CONTRIBUTING.md)
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
# Example Plugin Template
|
||||
|
||||
**Published version:** [docs.betterseqta.org/example-plugin/](https://docs.betterseqta.org/example-plugin/)
|
||||
|
||||
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
|
||||
@@ -328,8 +330,8 @@ Once you've got this working:
|
||||
## Need Help?
|
||||
|
||||
- 💬 Ask in our [Discord server](https://discord.gg/YzmbnCDkat)
|
||||
- 📚 Read our [Plugin Development Guide](./README.md)
|
||||
- 🐛 Check the [Troubleshooting Guide](../TROUBLESHOOTING.md)
|
||||
- 📚 Read the [plugin documentation](https://docs.betterseqta.org/plugins/)
|
||||
- 🐛 Check the [troubleshooting guide](https://docs.betterseqta.org/troubleshooting/)
|
||||
- 📝 Open an issue on GitHub
|
||||
|
||||
Happy coding! 🎉
|
||||
@@ -1,5 +1,7 @@
|
||||
# Creating Plugins for BetterSEQTA+
|
||||
|
||||
**Published version:** [docs.betterseqta.org/plugins/](https://docs.betterseqta.org/plugins/) · [Plugin development](https://docs.betterseqta.org/plugin-development/) · [Plugin API](https://docs.betterseqta.org/plugin-api/)
|
||||
|
||||
Hey there! 👋 So you want to create a plugin for BetterSEQTA+? That's awesome! This guide will walk you through everything you need to know, from the very basics to more advanced features. Don't worry if you're new to this - we'll explain everything step by step.
|
||||
|
||||
## What is a Plugin?
|
||||
@@ -294,4 +296,4 @@ Got stuck? No worries! Here's where you can get help:
|
||||
- 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)
|
||||
|
||||
Happy coding and feel free to checkout the api reference [here](./api-reference.md)
|
||||
Happy coding and feel free to check out the [plugin API](https://docs.betterseqta.org/plugin-api/) on the documentation site.
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
# Plugin API Reference
|
||||
|
||||
This document provides detailed technical information about BetterSEQTA+'s plugin APIs. For a beginner-friendly introduction, see [Creating Your First Plugin](./README.md).
|
||||
**Published version:** [docs.betterseqta.org/plugin-api/](https://docs.betterseqta.org/plugin-api/)
|
||||
|
||||
This document provides detailed technical information about BetterSEQTA+'s plugin APIs. For a beginner-friendly introduction, see the [plugins section](https://docs.betterseqta.org/plugins/) at [docs.betterseqta.org](https://docs.betterseqta.org/).
|
||||
|
||||
## Plugin Structure
|
||||
|
||||
|
||||
@@ -3,6 +3,11 @@
|
||||
import { cloudAuth } from "@/seqta/utils/CloudAuth";
|
||||
import CloudLoginForm from "./CloudLoginForm.svelte";
|
||||
|
||||
let { alwaysShowUserName = false } = $props<{
|
||||
/** When true (e.g. narrow extension popup), show display name below sm breakpoint */
|
||||
alwaysShowUserName?: boolean;
|
||||
}>();
|
||||
|
||||
let cloudState = $state(cloudAuth.state);
|
||||
let open = $state(false);
|
||||
let dropdownEl: HTMLElement;
|
||||
@@ -65,7 +70,11 @@
|
||||
{getInitials()}
|
||||
</div>
|
||||
{/if}
|
||||
<span class="hidden max-w-24 truncate sm:inline text-base">
|
||||
<span
|
||||
class={alwaysShowUserName
|
||||
? "inline max-w-[10rem] truncate text-sm"
|
||||
: "hidden max-w-24 truncate sm:inline text-base"}
|
||||
>
|
||||
{cloudState.user?.displayName || cloudState.user?.username || cloudState.user?.email || "User"}
|
||||
</span>
|
||||
{:else}
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
{/each}
|
||||
|
||||
{#if filteredThemes.length !== 0}
|
||||
<a href="https://betterseqta.gitbook.io/betterseqta-docs" class="block relative z-0 hover:z-20 w-full cursor-pointer">
|
||||
<a href="https://docs.betterseqta.org/theme-creation/" class="block relative z-0 hover:z-20 w-full cursor-pointer">
|
||||
<div class="bg-zinc-50 h-48 w-full transition-all duration-500 ease-out relative overflow-clip rounded-xl border group group/card flex flex-col justify-center items-center hover:scale-105 hover:shadow-2xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1]">
|
||||
<div class="text-2xl font-IconFamily">{'\uecb3'}</div>
|
||||
<div class="text-xl font-bold text-center transition-all duration-500 dark:text-white">
|
||||
@@ -45,7 +45,7 @@
|
||||
<div class="absolute top-0 flex flex-col items-center justify-center w-full text-center h-96">
|
||||
<h1 class="mt-4 text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100 sm:text-5xl">That doesn't exist! 😭😭😭</h1>
|
||||
<p class="mt-6 text-lg leading-7 text-zinc-600 dark:text-zinc-300">Sorry, we couldn't find the theme you're looking for. Maybe... you could create it?</p>
|
||||
<a href="https://betterseqta.gitbook.io/betterseqta-docs" class='p-2 px-3 mt-4 transition rounded-md cursor-pointer dark:text-white bg-zinc-500/10 hover:scale-105'>
|
||||
<a href="https://docs.betterseqta.org/theme-creation/" class='p-2 px-3 mt-4 transition rounded-md cursor-pointer dark:text-white bg-zinc-500/10 hover:scale-105'>
|
||||
Show me how!
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
|
||||
import ColourPicker from "../components/ColourPicker.svelte";
|
||||
import DisclaimerModal from "../components/DisclaimerModal.svelte";
|
||||
import CloudHeader from "@/interface/components/store/CloudHeader.svelte";
|
||||
import { settingsPopup } from "../hooks/SettingsPopup";
|
||||
|
||||
let devModeSequence = "";
|
||||
@@ -276,6 +277,18 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex shrink-0 items-center justify-between gap-2 px-3 py-2.5 border-b border-zinc-200/40 dark:border-zinc-700/40"
|
||||
>
|
||||
<div class="min-w-0 flex-1">
|
||||
<h2 class="text-sm font-bold text-zinc-900 dark:text-white">BetterSEQTA Cloud</h2>
|
||||
<p class="text-xs text-zinc-500 dark:text-zinc-400">Account & sync</p>
|
||||
</div>
|
||||
<div class="shrink-0">
|
||||
<CloudHeader alwaysShowUserName />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TabbedContainer
|
||||
bind:activeTab={settingsActiveTab}
|
||||
tabs={[
|
||||
|
||||
@@ -289,7 +289,7 @@
|
||||
|
||||
|
||||
<h1 class='text-xl font-semibold'>Theme Creator</h1>
|
||||
<a href='https://betterseqta.gitbook.io/betterseqta-docs' target='_blank' class='text-sm font-light text-zinc-500 dark:text-zinc-400'>
|
||||
<a href='https://docs.betterseqta.org/theme-creation/' target='_blank' rel='noopener noreferrer' class='text-sm font-light text-zinc-500 dark:text-zinc-400'>
|
||||
<span class='pr-0.5 no-underline font-IconFamily'>{'\ueb44'}</span>
|
||||
<span class='underline'>
|
||||
Need help? Check out the docs!
|
||||
|
||||
@@ -1,11 +1,22 @@
|
||||
import type { Plugin } from "@/plugins/core/types";
|
||||
import { componentSetting, defineSettings } from "@/plugins/core/settingsHelpers";
|
||||
import {
|
||||
booleanSetting,
|
||||
componentSetting,
|
||||
defineSettings,
|
||||
} from "@/plugins/core/settingsHelpers";
|
||||
import ProfilePictureSetting from "./ProfilePictureSetting.svelte";
|
||||
import { waitForElm } from "@/seqta/utils/waitForElm";
|
||||
import { cloudAuth } from "@/seqta/utils/CloudAuth";
|
||||
import styles from "./styles.css?inline";
|
||||
import localforage from "localforage";
|
||||
|
||||
const settings = defineSettings({
|
||||
useCloudPfp: booleanSetting({
|
||||
default: false,
|
||||
title: "Use BetterSEQTA Cloud profile picture",
|
||||
description:
|
||||
"When enabled, uses the avatar from your BetterSEQTA Cloud account (sign in from the extension store). Otherwise uses the uploaded image below.",
|
||||
}),
|
||||
picture: componentSetting({
|
||||
title: "Profile Picture",
|
||||
description: "Upload or remove your custom profile image",
|
||||
@@ -17,7 +28,7 @@ const profilePicturePlugin: Plugin<typeof settings> = {
|
||||
id: "profile-picture",
|
||||
name: "Custom Profile Picture",
|
||||
description: "Use your own image in place of the profile icon",
|
||||
version: "1.1.0",
|
||||
version: "1.2.0",
|
||||
settings: settings,
|
||||
disableToggle: true,
|
||||
defaultEnabled: false,
|
||||
@@ -36,14 +47,12 @@ const profilePicturePlugin: Plugin<typeof settings> = {
|
||||
let img: HTMLImageElement | null = null;
|
||||
let currentBlobUrl: string | undefined;
|
||||
|
||||
// Setup localforage instance
|
||||
const store = localforage.createInstance({
|
||||
name: "profile-picture-store",
|
||||
storeName: "profilePicture",
|
||||
});
|
||||
|
||||
async function updateImageFromStore() {
|
||||
// Remove old image if present
|
||||
async function applyProfileImage() {
|
||||
if (img) {
|
||||
img.remove();
|
||||
img = null;
|
||||
@@ -52,6 +61,19 @@ const profilePicturePlugin: Plugin<typeof settings> = {
|
||||
URL.revokeObjectURL(currentBlobUrl);
|
||||
currentBlobUrl = undefined;
|
||||
}
|
||||
|
||||
const useCloud = api.settings.useCloudPfp;
|
||||
const pfpUrl = cloudAuth.state.user?.pfpUrl;
|
||||
|
||||
if (useCloud && pfpUrl) {
|
||||
img = document.createElement("img");
|
||||
img.className = "userInfoImg";
|
||||
img.src = pfpUrl;
|
||||
if (svg) svg.style.display = "none";
|
||||
container.appendChild(img);
|
||||
return;
|
||||
}
|
||||
|
||||
const blob = await store.getItem<Blob>("profile-picture");
|
||||
if (blob && blob instanceof Blob) {
|
||||
currentBlobUrl = URL.createObjectURL(blob);
|
||||
@@ -65,15 +87,25 @@ const profilePicturePlugin: Plugin<typeof settings> = {
|
||||
}
|
||||
}
|
||||
|
||||
// Initial load
|
||||
await updateImageFromStore();
|
||||
await applyProfileImage();
|
||||
|
||||
// Listen for profile picture updates
|
||||
const handler = () => { updateImageFromStore(); };
|
||||
window.addEventListener('profile-picture-updated', handler);
|
||||
const onLocalPictureUpdated = () => {
|
||||
void applyProfileImage();
|
||||
};
|
||||
window.addEventListener("profile-picture-updated", onLocalPictureUpdated);
|
||||
|
||||
const cloudUnsub = cloudAuth.subscribe(() => {
|
||||
void applyProfileImage();
|
||||
});
|
||||
|
||||
const useCloudUnreg = api.settings.onChange("useCloudPfp", () => {
|
||||
void applyProfileImage();
|
||||
});
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("profile-picture-updated", handler);
|
||||
useCloudUnreg.unregister();
|
||||
cloudUnsub();
|
||||
window.removeEventListener("profile-picture-updated", onLocalPictureUpdated);
|
||||
if (img) img.remove();
|
||||
if (svg) svg.style.display = "";
|
||||
if (currentBlobUrl) URL.revokeObjectURL(currentBlobUrl);
|
||||
|
||||
Reference in New Issue
Block a user