From cfb9915a8b1cfa99ea09a2810fa318369ecc18fb Mon Sep 17 00:00:00 2001 From: alexsparkes Date: Tue, 3 Feb 2026 21:51:53 +0000 Subject: [PATCH] Refactor and update various components and styles - Added shebang to commit-msg.sh for better script execution. - Updated Dockerfile to use a specific version of the bun image. - Improved logging format in SafariWebExtensionHandler.swift for better readability. - Simplified CSS variable for text color in Style.css. - Refactored ViewController.swift to enhance readability and maintainability. - Improved conditional checks in ModalTopBar.jsx and Tooltip.jsx for better clarity. - Updated SCSS files to use comments consistently and removed redundant lines. - Enhanced error handling and background loading logic in backgroundLoader.js. - Refactored useBackgroundEvents.js and useBackgroundLoader.js for better readability. - Cleaned up quicklinks components and utilities for improved code quality. - Added empty error.scss file for future styling. - Updated toast.scss and index.scss with consistent comment styles. - Improved number formatting logic in formatNumber.js for better clarity. --- .husky/commit-msg.sh | 3 +- Dockerfile | 2 +- .../SafariWebExtensionHandler.swift | 7 +- safari/Mue/Resources/Style.css | 2 +- safari/Mue/ViewController.swift | 14 ++- .../MainModal/components/ModalTopBar.jsx | 4 +- .../Elements/MainModal/scss/index.scss | 3 +- .../scss/modules/_modalTabContent.scss | 1 - .../MainModal/scss/settings/_main.scss | 2 +- .../scss/settings/modules/tabs/_about.scss | 1 + src/components/Elements/Tooltip/Tooltip.jsx | 8 +- src/components/Elements/Tooltip/tooltip.scss | 6 +- .../Form/Settings/FileUpload/FileUpload.jsx | 4 +- .../Form/Settings/Textarea/Textarea.jsx | 4 +- src/contexts/TranslationContext.jsx | 4 +- .../background/api/backgroundLoader.js | 119 ++++++++++-------- .../background/hooks/useBackgroundEvents.js | 36 +++--- .../background/hooks/useBackgroundLoader.js | 2 +- .../background/hooks/useBackgroundRenderer.js | 4 +- src/features/background/options/Custom.jsx | 8 +- .../background/scss/_colourpicker.scss | 31 ++--- .../marketplace/components/Items/Items.jsx | 4 +- src/features/misc/sections/Language.jsx | 4 +- src/features/navbar/components/Refresh.jsx | 32 ++--- src/features/quicklinks/QuickLinks.jsx | 2 +- .../quicklinks/options/QuickLinksOptions.jsx | 18 ++- .../options/components/SortableItem.jsx | 4 +- .../options/utils/quicklinksUtils.js | 4 +- src/features/quicklinks/quicklinks.scss | 1 + src/features/quote/hooks/useQuoteLoader.js | 4 +- .../components/Sections/ChooseLanguage.jsx | 4 +- src/features/welcome/welcome.scss | 2 - src/scss/_error.scss | 1 + src/scss/_toast.scss | 12 +- src/scss/index.scss | 2 +- src/utils/formatNumber.js | 4 +- 36 files changed, 213 insertions(+), 150 deletions(-) diff --git a/.husky/commit-msg.sh b/.husky/commit-msg.sh index 343c9ac0..1cfff7bd 100644 --- a/.husky/commit-msg.sh +++ b/.husky/commit-msg.sh @@ -1 +1,2 @@ -bunx --bun commitlint --edit $1 +#!/bin/sh +bunx --bun commitlint --edit "$1" diff --git a/Dockerfile b/Dockerfile index a59618c9..75b4473b 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,4 +1,4 @@ -FROM oven/bun:latest +FROM oven/bun:1.1.42 WORKDIR /app diff --git a/safari/Mue Extension/SafariWebExtensionHandler.swift b/safari/Mue Extension/SafariWebExtensionHandler.swift index 75eeb38c..e3b95421 100644 --- a/safari/Mue Extension/SafariWebExtensionHandler.swift +++ b/safari/Mue Extension/SafariWebExtensionHandler.swift @@ -27,7 +27,12 @@ class SafariWebExtensionHandler: NSObject, NSExtensionRequestHandling { message = request?.userInfo?["message"] } - os_log(.default, "Received message from browser.runtime.sendNativeMessage: %@ (profile: %@)", String(describing: message), profile?.uuidString ?? "none") + os_log( + .default, + "Received message from browser.runtime.sendNativeMessage: %@ (profile: %@)", + String(describing: message), + profile?.uuidString ?? "none" + ) let response = NSExtensionItem() if #available(iOS 15.0, macOS 11.0, *) { diff --git a/safari/Mue/Resources/Style.css b/safari/Mue/Resources/Style.css index 22984209..0679e79c 100644 --- a/safari/Mue/Resources/Style.css +++ b/safari/Mue/Resources/Style.css @@ -9,7 +9,7 @@ :root { --spacing: 20px; - --text-color: #ffffff; + --text-color: #fff; --shadow: 0 4px 20px rgb(0 0 0 / 30%); --background-color: #0a0a0a; } diff --git a/safari/Mue/ViewController.swift b/safari/Mue/ViewController.swift index bcfa2a06..52b227c9 100644 --- a/safari/Mue/ViewController.swift +++ b/safari/Mue/ViewController.swift @@ -22,11 +22,15 @@ class ViewController: NSViewController, WKNavigationDelegate, WKScriptMessageHan self.webView.configuration.userContentController.add(self, name: "controller") - self.webView.loadFileURL(Bundle.main.url(forResource: "Main", withExtension: "html")!, allowingReadAccessTo: Bundle.main.resourceURL!) + let mainUrl = Bundle.main.url(forResource: "Main", withExtension: "html")! + let resourceUrl = Bundle.main.resourceURL! + self.webView.loadFileURL(mainUrl, allowingReadAccessTo: resourceUrl) } func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) { - SFSafariExtensionManager.getStateOfSafariExtension(withIdentifier: extensionBundleIdentifier) { (state, error) in + SFSafariExtensionManager.getStateOfSafariExtension( + withIdentifier: extensionBundleIdentifier + ) { (state, error) in guard let state = state, error == nil else { // Insert code to inform the user that something went wrong. return @@ -43,11 +47,11 @@ class ViewController: NSViewController, WKNavigationDelegate, WKScriptMessageHan } func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) { - if (message.body as! String != "open-preferences") { - return; + guard let messageBody = message.body as? String, messageBody == "open-preferences" else { + return } - SFSafariApplication.showPreferencesForExtension(withIdentifier: extensionBundleIdentifier) { error in + SFSafariApplication.showPreferencesForExtension(withIdentifier: extensionBundleIdentifier) { _ in DispatchQueue.main.async { NSApplication.shared.terminate(nil) } diff --git a/src/components/Elements/MainModal/components/ModalTopBar.jsx b/src/components/Elements/MainModal/components/ModalTopBar.jsx index 62b894b4..ada02d8f 100644 --- a/src/components/Elements/MainModal/components/ModalTopBar.jsx +++ b/src/components/Elements/MainModal/components/ModalTopBar.jsx @@ -86,7 +86,9 @@ function ModalTopBar({ // Utility function to get translated sub-section label const getSubSectionLabel = (subSection, sectionName) => { - if (!subSection || !sectionName) return subSection; + if (!subSection || !sectionName) { + return subSection; + } // Use the same translation pattern as the section components const translationKey = `modals.main.settings.sections.${sectionName}.${subSection}.title`; diff --git a/src/components/Elements/MainModal/scss/index.scss b/src/components/Elements/MainModal/scss/index.scss index ceaa1694..cd2cad4d 100644 --- a/src/components/Elements/MainModal/scss/index.scss +++ b/src/components/Elements/MainModal/scss/index.scss @@ -9,7 +9,7 @@ @use 'modules/scrollbars' as *; @use 'settings/main' as *; @use 'marketplace/main' as *; -// Fixed: Added sass:map module +/* Fixed: Added sass:map module */ .Overlay { position: fixed; @@ -96,7 +96,6 @@ #modal { height: 80vh; width: clamp(60vw, 1400px, 90vw); - -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); overflow: hidden; diff --git a/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss b/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss index 88068015..e58780c7 100644 --- a/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss +++ b/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss @@ -16,7 +16,6 @@ @include themed { background: t($modal-background); - margin: 0; border-radius: t($borderRadius); } diff --git a/src/components/Elements/MainModal/scss/settings/_main.scss b/src/components/Elements/MainModal/scss/settings/_main.scss index 38a2ebd9..47a490b7 100644 --- a/src/components/Elements/MainModal/scss/settings/_main.scss +++ b/src/components/Elements/MainModal/scss/settings/_main.scss @@ -273,7 +273,7 @@ h4 { transition: 0.4s ease-in-out; } -// Warning banner (used in Search settings and potentially others) +/* Warning banner (used in Search settings and potentially others) */ .itemWarning { padding: 10px 20px; display: flex; diff --git a/src/components/Elements/MainModal/scss/settings/modules/tabs/_about.scss b/src/components/Elements/MainModal/scss/settings/modules/tabs/_about.scss index a0d4c8a1..df3653b7 100644 --- a/src/components/Elements/MainModal/scss/settings/modules/tabs/_about.scss +++ b/src/components/Elements/MainModal/scss/settings/modules/tabs/_about.scss @@ -45,6 +45,7 @@ opacity: 0; transform: scale(0.9); } + to { opacity: 1; transform: scale(1); diff --git a/src/components/Elements/Tooltip/Tooltip.jsx b/src/components/Elements/Tooltip/Tooltip.jsx index fbb4206e..12e8322f 100644 --- a/src/components/Elements/Tooltip/Tooltip.jsx +++ b/src/components/Elements/Tooltip/Tooltip.jsx @@ -63,8 +63,12 @@ function Tooltip({ children, title, style, placement, subtitle }) { // Determine the data-status attribute value const getStatus = () => { - if (!showTooltip && !isClosing) return 'initial'; - if (isClosing) return 'close'; + if (!showTooltip && !isClosing) { + return 'initial'; + } + if (isClosing) { + return 'close'; + } return 'open'; }; diff --git a/src/components/Elements/Tooltip/tooltip.scss b/src/components/Elements/Tooltip/tooltip.scss index 17a83a27..b0acaecd 100644 --- a/src/components/Elements/Tooltip/tooltip.scss +++ b/src/components/Elements/Tooltip/tooltip.scss @@ -85,12 +85,12 @@ opacity 0.2s ease-out, transform 0.2s ease-out; - // Initial state (not yet shown) + /* Initial state (not yet shown) */ &[data-status='initial'] { opacity: 0; } - // Open state - entrance animation + /* Open state - entrance animation */ &[data-status='open'] { opacity: 1; transform: translate(0, 0); @@ -114,7 +114,7 @@ } } - // Closing state - exit animation + /* Closing state - exit animation */ &[data-status='close'] { opacity: 0; diff --git a/src/components/Form/Settings/FileUpload/FileUpload.jsx b/src/components/Form/Settings/FileUpload/FileUpload.jsx index 82b8fc53..9451781b 100644 --- a/src/components/Form/Settings/FileUpload/FileUpload.jsx +++ b/src/components/Form/Settings/FileUpload/FileUpload.jsx @@ -7,7 +7,9 @@ import videoCheck from 'features/background/api/videoCheck'; const FileUpload = memo(({ id, type, accept, loadFunction, multiple }) => { useEffect(() => { const fileInput = document.getElementById(id); - if (!fileInput) return; + if (!fileInput) { + return; + } const handleChange = (e) => { const files = Array.from(e.target.files); diff --git a/src/components/Form/Settings/Textarea/Textarea.jsx b/src/components/Form/Settings/Textarea/Textarea.jsx index ee6c8c1e..45521cc2 100644 --- a/src/components/Form/Settings/Textarea/Textarea.jsx +++ b/src/components/Form/Settings/Textarea/Textarea.jsx @@ -8,7 +8,9 @@ const Textarea = memo( const adjustHeight = useCallback(() => { const textarea = textareaRef.current; - if (!textarea) return; + if (!textarea) { + return; + } // Reset height to auto to get the correct scrollHeight textarea.style.height = 'auto'; diff --git a/src/contexts/TranslationContext.jsx b/src/contexts/TranslationContext.jsx index c9fa1d1b..e32cc175 100644 --- a/src/contexts/TranslationContext.jsx +++ b/src/contexts/TranslationContext.jsx @@ -64,7 +64,9 @@ export function TranslationProvider({ children, initialLanguage }) { // Single translation function - the main API const t = useCallback( (key, optional = {}) => { - if (!i18nInstance.current) return key; + if (!i18nInstance.current) { + return key; + } return i18nInstance.current.getMessage(currentLanguage, key, optional); }, [currentLanguage], diff --git a/src/features/background/api/backgroundLoader.js b/src/features/background/api/backgroundLoader.js index e07db2f4..523515be 100644 --- a/src/features/background/api/backgroundLoader.js +++ b/src/features/background/api/backgroundLoader.js @@ -63,47 +63,6 @@ export async function fetchAPIImageData(excludedPun = null) { } } -/** - * Gets background data based on current configuration - */ -export async function getBackgroundData() { - const isOffline = - localStorage.getItem('offlineMode') === 'true' || - localStorage.getItem('showWelcome') === 'true'; - - // Handle favourited background - const fav = safeParseJSON('favourite'); - if (fav) { - if (fav.type === 'random_colour' || fav.type === 'random_gradient') { - return { type: 'colour', style: `background:${fav.url}` }; - } - return { url: fav.url, photoInfo: { ...fav, url: fav.url } }; - } - - const type = localStorage.getItem('backgroundType'); - - switch (type) { - case 'api': - return getAPIBackground(isOffline); - - case 'colour': - return getColourBackground(); - - case 'random_colour': - case 'random_gradient': - return randomColourStyleBuilder(type); - - case 'custom': - return await getCustomBackground(isOffline); - - case 'photo_pack': - return getPhotoPackBackground(isOffline); - - default: - return null; - } -} - /** * Gets solid colour background */ @@ -131,7 +90,7 @@ async function getAPIBackground(isOffline) { data = await fetchAPIImageData(); } - if (!data) return getOfflineImage('api'); + if (!data) {return getOfflineImage('api');} try { localStorage.setItem('currentBackground', JSON.stringify(data)); @@ -191,7 +150,9 @@ async function getCustomBackground(isOffline) { } } - if (!backgrounds || backgrounds.length === 0) return null; + if (!backgrounds || backgrounds.length === 0) { + return null; + } const queueManager = new BackgroundQueueManager('customQueue', 3); let selected; @@ -214,7 +175,9 @@ async function getCustomBackground(isOffline) { } // Check if selected is valid before using it - if (!selected) return null; + if (!selected) { + return null; + } const url = selected.url || selected; @@ -249,18 +212,72 @@ async function getCustomBackground(isOffline) { console.warn('Could not save currentBackground to localStorage:', e); } - // Prefetch more backgrounds in the background (skip videos) - if (queueManager.needsPrefetch() && !data.video && selected.id) { - prefetchCustomBackgrounds(queueManager, backgrounds, selected.id, cachedQueue).catch( - (error) => { - console.error('Failed to prefetch custom backgrounds:', error); - }, - ); + // Prefetch next backgrounds if needed + if (queueManager.needsPrefetch()) { + const count = queueManager.getSpaceNeeded(); + const currentIds = [selected.id, ...cachedQueue]; + const available = backgrounds.filter((bg) => !currentIds.includes(bg.id)); + + if (available.length > 0) { + const nextBackgrounds = []; + for (let i = 0; i < count; i++) { + const randomBg = available[Math.floor(Math.random() * available.length)]; + if (randomBg) { + nextBackgrounds.push(randomBg.id); + available.splice(available.indexOf(randomBg), 1); + } + } + + if (nextBackgrounds.length > 0) { + queueManager.push(nextBackgrounds); + } + } } return data; } +/** + * Gets background data based on current configuration + */ +export async function getBackgroundData() { + const isOffline = + localStorage.getItem('offlineMode') === 'true' || + localStorage.getItem('showWelcome') === 'true'; + + // Handle favourited background + const fav = safeParseJSON('favourite'); + if (fav) { + if (fav.type === 'random_colour' || fav.type === 'random_gradient') { + return { type: 'colour', style: `background:${fav.url}` }; + } + return { url: fav.url, photoInfo: { ...fav, url: fav.url } }; + } + + const type = localStorage.getItem('backgroundType'); + + switch (type) { + case 'api': + return getAPIBackground(isOffline); + + case 'colour': + return getColourBackground(); + + case 'random_colour': + case 'random_gradient': + return randomColourStyleBuilder(type); + + case 'custom': + return await getCustomBackground(isOffline); + + case 'photo_pack': + return getPhotoPackBackground(isOffline); + + default: + return null; + } +} + /** * Prefetch custom backgrounds in the background * Store only IDs in queue to avoid localStorage quota issues with large data URLs diff --git a/src/features/background/hooks/useBackgroundEvents.js b/src/features/background/hooks/useBackgroundEvents.js index e48c3a19..3bff4551 100644 --- a/src/features/background/hooks/useBackgroundEvents.js +++ b/src/features/background/hooks/useBackgroundEvents.js @@ -7,20 +7,6 @@ import { getBackgroundFilterStyle, getBackgroundOverlayStyle } from '../api/back */ export function useBackgroundEvents(backgroundData, refreshBackground) { useEffect(() => { - const handleEvent = (event) => { - if (event === 'welcomeLanguage') { - localStorage.setItem('welcomeImage', JSON.stringify(backgroundData)); - } else if (event === 'background') { - handleVisibilityToggle(); - } else if ( - ['marketplacebackgrounduninstall', 'backgroundwelcome', 'backgroundrefresh'].includes(event) - ) { - refreshBackground(); - } else if (event === 'backgroundeffect') { - applyFilters(); - } - }; - const handleVisibilityToggle = () => { const element = document.getElementById( backgroundData.video ? 'backgroundVideo' : 'backgroundImage', @@ -30,12 +16,12 @@ export function useBackgroundEvents(backgroundData, refreshBackground) { if (!isEnabled) { element?.style.setProperty('display', 'none'); - if (!backgroundData.photoInfo?.hidden) photoInfo?.style.setProperty('display', 'none'); + if (!backgroundData.photoInfo?.hidden) {photoInfo?.style.setProperty('display', 'none');} return; } element?.style.setProperty('display', 'block'); - if (!backgroundData.photoInfo?.hidden) photoInfo?.style.setProperty('display', 'flex'); + if (!backgroundData.photoInfo?.hidden) {photoInfo?.style.setProperty('display', 'flex');} // Check if refresh needed const type = localStorage.getItem('backgroundType'); @@ -50,7 +36,7 @@ export function useBackgroundEvents(backgroundData, refreshBackground) { backgroundData.photoInfo.pun, )); - if (needsRefresh) refreshBackground(); + if (needsRefresh) {refreshBackground();} }; const applyFilters = () => { @@ -58,7 +44,7 @@ export function useBackgroundEvents(backgroundData, refreshBackground) { if (backgroundData.video) { const filter = getBackgroundFilterStyle(); const element = document.getElementById('backgroundVideo'); - if (element) element.style.webkitFilter = filter; + if (element) {element.style.webkitFilter = filter;} } else { // For image backgrounds, apply filters to the overlay element const overlayElement = document.getElementById('backgroundFilterOverlay'); @@ -71,6 +57,20 @@ export function useBackgroundEvents(backgroundData, refreshBackground) { } }; + const handleEvent = (event) => { + if (event === 'welcomeLanguage') { + localStorage.setItem('welcomeImage', JSON.stringify(backgroundData)); + } else if (event === 'background') { + handleVisibilityToggle(); + } else if ( + ['marketplacebackgrounduninstall', 'backgroundwelcome', 'backgroundrefresh'].includes(event) + ) { + refreshBackground(); + } else if (event === 'backgroundeffect') { + applyFilters(); + } + }; + EventBus.on('refresh', handleEvent); return () => EventBus.off('refresh', handleEvent); }, [backgroundData, refreshBackground]); diff --git a/src/features/background/hooks/useBackgroundLoader.js b/src/features/background/hooks/useBackgroundLoader.js index ecc0f311..7e23de3d 100644 --- a/src/features/background/hooks/useBackgroundLoader.js +++ b/src/features/background/hooks/useBackgroundLoader.js @@ -9,7 +9,7 @@ export function useBackgroundLoader(updateBackground, resetBackground) { const isLoadingRef = useRef(false); const loadBackground = useCallback(async () => { - if (isLoadingRef.current) return; + if (isLoadingRef.current) {return;} isLoadingRef.current = true; try { diff --git a/src/features/background/hooks/useBackgroundRenderer.js b/src/features/background/hooks/useBackgroundRenderer.js index 8f385f95..fc6bbeed 100644 --- a/src/features/background/hooks/useBackgroundRenderer.js +++ b/src/features/background/hooks/useBackgroundRenderer.js @@ -14,10 +14,10 @@ export function useBackgroundRenderer(backgroundData) { const abortControllerRef = useRef(null); useEffect(() => { - if (backgroundData.video) return; + if (backgroundData.video) {return;} const element = document.getElementById('backgroundImage'); - if (!element) return; + if (!element) {return;} // Abort any pending image loads if (abortControllerRef.current) { diff --git a/src/features/background/options/Custom.jsx b/src/features/background/options/Custom.jsx index 51910712..1eba8d89 100644 --- a/src/features/background/options/Custom.jsx +++ b/src/features/background/options/Custom.jsx @@ -420,10 +420,10 @@ const CustomSettings = memo(() => { try { localStorage.setItem( 'customBackground', - JSON.stringify(updatedBackgrounds.map((bg) => bg.url)), + JSON.stringify(backgrounds.map((bg) => bg.url)), ); } catch (_quotaError) { - localStorage.setItem('customBackgroundCount', updatedBackgrounds.length.toString()); + localStorage.setItem('customBackgroundCount', backgrounds.length.toString()); } EventBus.emit('refresh', 'background'); @@ -477,7 +477,9 @@ const CustomSettings = memo(() => { useEffect(() => { const dnd = customDnd.current; - if (!dnd) return; + if (!dnd) { + return; + } const handleDragOver = (e) => { e.preventDefault(); diff --git a/src/features/background/scss/_colourpicker.scss b/src/features/background/scss/_colourpicker.scss index e40ac6ad..503cddfc 100644 --- a/src/features/background/scss/_colourpicker.scss +++ b/src/features/background/scss/_colourpicker.scss @@ -1,6 +1,6 @@ @use 'scss/variables' as *; -// Main wrapper - cleaner appearance without heavy border +/* Main wrapper - cleaner appearance without heavy border */ #rbgcp-wrapper, #rbgcp-color-picker-dark { @include themed { @@ -10,27 +10,27 @@ } } -// Override any remaining dark backgrounds from inline styles +/* Override any remaining dark backgrounds from inline styles */ div[style*='background: rgb(32, 32, 32)'] { @include themed { background: transparent !important; } } -// Canvas wrapper - smoother corners +/* Canvas wrapper - smoother corners */ #rbgcp-square-canvas-wrapper-dark { border-radius: 6px !important; overflow: hidden; } -// Bottom controls section +/* Bottom controls section */ #rbgcp-body { @include themed { background: t($modal-secondaryColour) !important; } } -// Control wrappers - SPECIFIC targeting to avoid breaking sliders +/* Control wrappers - SPECIFIC targeting to avoid breaking sliders */ #rbgcp-controls-wrapper-dark, #rbgcp-color-type-btns-dark, #rbgcp-control-rightside-wrapper-dark, @@ -41,12 +41,12 @@ div[style*='background: rgb(32, 32, 32)'] { } } -// Slider area backgrounds - soft grey for light theme +/* Slider area backgrounds - soft grey for light theme */ #rbgcp-hue-wrap-dark, #rbgcp-opacity-wrapper-dark { position: relative !important; - // Add a soft background wrapper + /* Add a soft background wrapper */ &::before { content: ''; position: absolute; @@ -58,6 +58,7 @@ div[style*='background: rgb(32, 32, 32)'] { .light & { background: rgba(0, 0, 0, 0.08) !important; } + .dark & { background: rgba(0, 0, 0, 0.3) !important; } @@ -65,7 +66,7 @@ div[style*='background: rgb(32, 32, 32)'] { } } -// Input fields and buttons - cover all variations +/* Input fields and buttons - cover all variations */ #rbgcp-solid-btn, #rbgcp-solid-btn-dark, #rbgcp-gradient-btn, @@ -92,7 +93,7 @@ input[id*='rbgcp'], } } -// Active state for Solid/Gradient buttons - check for black background or box-shadow +/* Active state for Solid/Gradient buttons - check for black background or box-shadow */ #rbgcp-solid-btn-dark[style*='background: black'], #rbgcp-solid-btn-dark[style*='background: rgb(0, 0, 0)'], #rbgcp-gradient-btn-dark[style*='background: black'], @@ -105,7 +106,7 @@ input[id*='rbgcp'], } } -// Icon buttons - make icons more visible +/* Icon buttons - make icons more visible */ #rbgcp-advanced-btn-dark, #rbgcp-color-model-btn-dark { svg, @@ -135,7 +136,7 @@ input[id*='rbgcp'], } } -// Labels under inputs +/* Labels under inputs */ #rbgcp-hex-input-wrapper-dark div, #rbgcp-R-input-wrapper-dark div, #rbgcp-G-input-wrapper-dark div, @@ -146,7 +147,7 @@ input[id*='rbgcp'], } } -// Hover states +/* Hover states */ #rbgcp-gradient-btn:hover, #rbgcp-solid-btn:hover, #rbgcp-eyedropper-btn:hover, @@ -163,7 +164,7 @@ input[id*='rbgcp'], } } -// Active/selected button states +/* Active/selected button states */ #rbgcp-solid-btn[style*='background: rgb(242, 242, 242)'], #rbgcp-gradient-btn[style*='background: rgb(242, 242, 242)'] { @include themed { @@ -185,7 +186,7 @@ input[id*='rbgcp'], height: 28px; } -// Text labels +/* Text labels */ #rbgcp-wrapper { label { @include themed { @@ -194,7 +195,7 @@ input[id*='rbgcp'], } } -// Reset button styling +/* Reset button styling */ .colourReset { margin-top: 12px; diff --git a/src/features/marketplace/components/Items/Items.jsx b/src/features/marketplace/components/Items/Items.jsx index 58926f62..c11797cc 100644 --- a/src/features/marketplace/components/Items/Items.jsx +++ b/src/features/marketplace/components/Items/Items.jsx @@ -34,7 +34,9 @@ function filterItems(item, filter, categoryFilter) { } function getInitials(name) { - if (!name) return '??'; + if (!name) { + return '??'; + } const words = name.split(' '); if (words.length === 1) { return name.substring(0, 2).toUpperCase(); diff --git a/src/features/misc/sections/Language.jsx b/src/features/misc/sections/Language.jsx index ee5c1196..feb92760 100644 --- a/src/features/misc/sections/Language.jsx +++ b/src/features/misc/sections/Language.jsx @@ -73,7 +73,9 @@ const LanguageOptions = () => { // Filter languages based on search query const filteredLanguages = useMemo(() => { - if (!searchQuery.trim()) return languageOptions; + if (!searchQuery.trim()) { + return languageOptions; + } const query = searchQuery.toLowerCase(); return languageOptions.filter((lang) => lang.searchText.includes(query)); }, [languageOptions, searchQuery]); diff --git a/src/features/navbar/components/Refresh.jsx b/src/features/navbar/components/Refresh.jsx index dc14849a..23d71380 100644 --- a/src/features/navbar/components/Refresh.jsx +++ b/src/features/navbar/components/Refresh.jsx @@ -10,22 +10,6 @@ function Refresh() { const [refreshText, setRefreshText] = useState(''); const [refreshOption, setRefreshOption] = useState(localStorage.getItem('refreshOption') || ''); - useEffect(() => { - const handleRefresh = (data) => { - if (data === 'navbar' || data === 'background' || data === 'language') { - setRefreshOption(localStorage.getItem('refreshOption')); - updateRefreshText(); - } - }; - - EventBus.on('refresh', handleRefresh); - updateRefreshText(); - - return () => { - EventBus.off('refresh', handleRefresh); - }; - }, [t]); - function updateRefreshText() { let text; switch (localStorage.getItem('refreshOption')) { @@ -55,6 +39,22 @@ function Refresh() { setRefreshText(text); } + useEffect(() => { + const handleRefresh = (data) => { + if (data === 'navbar' || data === 'background' || data === 'language') { + setRefreshOption(localStorage.getItem('refreshOption')); + updateRefreshText(); + } + }; + + EventBus.on('refresh', handleRefresh); + updateRefreshText(); + + return () => { + EventBus.off('refresh', handleRefresh); + }; + }, [t]); + function refresh() { switch (refreshOption) { case 'background': diff --git a/src/features/quicklinks/QuickLinks.jsx b/src/features/quicklinks/QuickLinks.jsx index c395d512..239a0fc2 100644 --- a/src/features/quicklinks/QuickLinks.jsx +++ b/src/features/quicklinks/QuickLinks.jsx @@ -16,7 +16,7 @@ const QuickLinks = memo(() => { // widget zoom const setZoom = useCallback((element) => { - if (!element) return; + if (!element) {return;} const zoom = localStorage.getItem('zoomQuicklinks') || 100; const style = localStorage.getItem('quickLinksStyle') || 'card'; diff --git a/src/features/quicklinks/options/QuickLinksOptions.jsx b/src/features/quicklinks/options/QuickLinksOptions.jsx index 6f1c23c0..85a2e83a 100644 --- a/src/features/quicklinks/options/QuickLinksOptions.jsx +++ b/src/features/quicklinks/options/QuickLinksOptions.jsx @@ -35,7 +35,7 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName const silenceEventRef = useRef(false); const setContainerDisplay = (enabled) => { - if (!quicklinksContainer || !quicklinksContainer.current) return; + if (!quicklinksContainer || !quicklinksContainer.current) {return;} const el = quicklinksContainer.current; el.classList.toggle('disabled', !enabled); if (!enabled) { @@ -123,7 +123,9 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName const editLink = async (og, name, url, icon, iconType = 'auto', iconData = null) => { const data = readQuicklinks(); const dataobj = data.find((i) => i.key === og.key); - if (!dataobj) return; + if (!dataobj) { + return; + } dataobj.name = name || (await getTitleFromUrl(url)); dataobj.url = url; @@ -146,13 +148,19 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName const handleDragEnd = (event) => { const { active, over } = event; - if (!over || !enabled) return; - if (active.id === over.id) return; + if (!over || !enabled) { + return; + } + if (active.id === over.id) { + return; + } const oldIndex = items.findIndex((item) => item.key === active.id); const newIndex = items.findIndex((item) => item.key === over.id); - if (oldIndex === -1 || newIndex === -1) return; + if (oldIndex === -1 || newIndex === -1) { + return; + } const newItems = arrayMove(items, oldIndex, newIndex); diff --git a/src/features/quicklinks/options/components/SortableItem.jsx b/src/features/quicklinks/options/components/SortableItem.jsx index e88999e7..9e3581a0 100644 --- a/src/features/quicklinks/options/components/SortableItem.jsx +++ b/src/features/quicklinks/options/components/SortableItem.jsx @@ -37,7 +37,9 @@ export const SortableItem = ({ value, enabled, startEditLink, deleteLink }) => {