fix: logo and some improvements

rspack.config.js

@@ -94,10 +94,15 @@ module.exports = (env, options) => {
       resourceQuery: /raw/,
       type: 'asset/source',
     },
+    {
+      test: /\.(png|svg|jpg|jpeg|ico|webp)(\?.*)?$/,
+      resourceQuery: /inline/,
+      type: 'asset/inline',
+    },
     // Asset files
     {
       test: /\.(png|svg|jpg|jpeg|ico|ttf|webp|eot|woff|webm|mp4|wav)(\?.*)?$/,
-      resourceQuery: { not: [/raw/] },
+      resourceQuery: { not: [/raw/, /inline/] },
       type: 'asset/resource',
     },
     // Regular CSS/SCSS files

src/components/logo/style.scss

@@ -6,7 +6,7 @@
   margin: 0 auto;
 
   &::after {
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     left: 0;
@@ -19,13 +19,19 @@
   }
 
   &::before {
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background: radial-gradient(circle, rgb(68, 153, 254, 0.5), rgb(68, 153, 254, 0.1), rgb(68, 153, 254, 0), rgb(68, 153, 254, 0));
+    background: radial-gradient(
+      circle,
+      rgb(68, 153, 254, 0.5),
+      rgb(68, 153, 254, 0.1),
+      rgb(68, 153, 254, 0),
+      rgb(68, 153, 254, 0)
+    );
     overflow: visible;
   }
-}
+}

src/dialogs/style.scss

@@ -104,12 +104,12 @@
     }
   }
 
-  &+.mask {
+  & + .mask {
     z-index: 111;
     background-color: rgb(0, 0, 0);
     opacity: 0.4;
 
-    ~.mask {
+    ~ .mask {
       opacity: 0;
     }
   }
@@ -119,7 +119,7 @@
     transform: translate(-50%, -50%) scale(0.95) translateZ(0);
     opacity: 0;
 
-    &+.mask {
+    & + .mask {
       opacity: 0;
     }
   }
@@ -212,7 +212,10 @@
             user-select: none;
             color: var(--popup-text-color, #333);
             opacity: 0.5;
-            transition: opacity 0.15s, background-color 0.15s, color 0.15s;
+            transition:
+              opacity 0.15s,
+              background-color 0.15s,
+              color 0.15s;
 
             &:hover {
               opacity: 0.8;
@@ -283,13 +286,13 @@
       align-items: center;
 
       .loader {
-        width: 30px;
-        height: 30px;
+        width: 24px;
+        height: 24px;
         color: rgb(153, 153, 255);
-        color: var(--primary-color);
+        color: var(--popup-active-color);
         display: flex;
         flex-shrink: 0;
-        margin: 0 10px;
+        margin-left: 10px;
 
         svg {
           width: 100%;

src/lib/languageModeRecommendations.js

@@ -11,15 +11,16 @@ function withSupportedEditor(url) {
 	return `${url}${separator}supported_editor=${config.SUPPORTED_EDITOR}`;
 }
 
-function getSearchKeyword(filename) {
-	const ext = Path.extname(filename || "")
-		.replace(/^\./, "")
+export function getLanguageModeRecommendationSearchKeyword(filename) {
+	const basename = Path.basename(filename || "")
 		.trim()
 		.toLowerCase();
+	const ext = Path.extname(basename).replace(/^\./, "").trim().toLowerCase();
+	const keyword = ext || (basename.startsWith(".") ? basename.slice(1) : "");
 
-	if (!/^[a-z0-9][a-z0-9._+-]*$/.test(ext)) return "";
+	if (!/^[a-z0-9][a-z0-9._+-]*$/.test(keyword)) return "";
 
-	return ext;
+	return keyword;
 }
 
 function getIssueUrl(keyword) {
@@ -89,7 +90,7 @@ class LanguageModeRecommendations {
 		const filename = file.filename || "";
 		if (!hasPlainTextFallback(modeInfo, filename)) return;
 
-		const keyword = getSearchKeyword(filename);
+		const keyword = getLanguageModeRecommendationSearchKeyword(filename);
 		if (
 			!keyword ||
 			this.notifiedKeywords.has(keyword) ||

src/pages/welcome/welcome.js

@@ -1,5 +1,5 @@
 import { getResolvedKeyBindings } from "cm/commandRegistry";
-import Logo from "components/logo";
+import logoSrc from "components/logo/logo.png?inline";
 import config from "lib/config";
 import EditorFile from "lib/editorFile";
 
@@ -44,7 +44,7 @@ function createWelcomeContent() {
 		<div id="welcome-tab" className="welcome-page scroll">
 			{/* Hero Section */}
 			<header className="welcome-header">
-				<Logo />
+				<img className="logo" src={logoSrc} alt="" />
 				<div className="welcome-header-text">
 					<h1>Welcome to Acode</h1>
 					<p className="tagline">Powerful code editor for Android</p>