dashboard-shell-shell 3.0.2-test.20250913 → 3.0.5-logTest.2

package/pages/c/_cluster/uiplugins/index.vue

@@ -15,14 +15,8 @@ import Tab from '@shell/components/Tabbed/Tab.vue';
 import IconMessage from '@shell/components/IconMessage.vue';
 import LazyImage from '@shell/components/LazyImage';
 import { BadgeState } from '@components/BadgeState';
-import UninstallDialog from './UninstallDialog.vue';
-import InstallDialog from './InstallDialog.vue';
-import CatalogLoadDialog from './CatalogList/CatalogLoadDialog.vue';
-import CatalogUninstallDialog from './CatalogList/CatalogUninstallDialog.vue';
-import DeveloperInstallDialog from './DeveloperInstallDialog.vue';
 import PluginInfoPanel from './PluginInfoPanel.vue';
 import SetupUIPlugins from './SetupUIPlugins.vue';
-import AddExtensionRepos from './AddExtensionRepos';
 import CatalogList from './CatalogList/index.vue';
 import Banner from '@components/Banner/Banner.vue';
 import {
@@ -53,20 +47,14 @@ export default {
   components: {
     ActionMenu,
     BadgeState,
-    DeveloperInstallDialog,
     IconMessage,
     CatalogList,
     Banner,
-    CatalogLoadDialog,
-    CatalogUninstallDialog,
-    InstallDialog,
     LazyImage,
     PluginInfoPanel,
     Tab,
     Tabbed,
-    UninstallDialog,
     SetupUIPlugins,
-    AddExtensionRepos,
     TabTitle
   },
 
@@ -253,15 +241,13 @@ export default {
         // Label can be overridden by chart annotation
         const label = uiPluginAnnotation(chart, UI_PLUGIN_CHART_ANNOTATIONS.DISPLAY_NAME) || chart.chartNameDisplay;
         const item = {
-          name:         chart.chartName,
+          name:        chart.chartName,
           label,
-          description:  chart.chartDescription,
-          id:           chart.id,
-          versions:     [],
-          installed:    false,
-          builtin:      false,
-          experimental: uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.EXPERIMENTAL, 'true'),
-          certified:    uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.CERTIFIED, CATALOG_ANNOTATIONS._RANCHER)
+          description: chart.chartDescription,
+          id:          chart.id,
+          versions:    [],
+          installed:   false,
+          builtin:     false,
         };
 
         item.versions = [...chart.versions];
@@ -282,9 +268,15 @@ export default {
         const latestNotCompatible = item.versions.find((version) => !version.isVersionCompatible);
 
         if (latestCompatible) {
+          item.experimental = latestCompatible?.annotations?.[CATALOG_ANNOTATIONS.EXPERIMENTAL] === 'true';
+          item.certified = latestCompatible?.annotations?.[CATALOG_ANNOTATIONS.CERTIFIED] === CATALOG_ANNOTATIONS._RANCHER;
+
           item.displayVersion = latestCompatible.version;
           item.icon = latestCompatible.icon;
         } else {
+          item.experimental = uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.EXPERIMENTAL, 'true');
+          item.certified = uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.CERTIFIED, CATALOG_ANNOTATIONS._RANCHER);
+
           item.displayVersion = item.versions?.[0]?.version;
           item.icon = chart.icon || latestCompatible?.annotations?.['catalog.cattle.io/ui-icon'];
         }
@@ -323,6 +315,7 @@ export default {
         if (!chart) {
           // A plugin is loaded, but there is no chart, so add an item so that it shows up
           const rancher = typeof p.metadata?.rancher === 'object' ? p.metadata.rancher : {};
+
           const label = rancher.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.DISPLAY_NAME] || p.name;
           const item = {
             name:           p.name,
@@ -334,6 +327,8 @@ export default {
             displayVersion: p.metadata?.version || '-',
             installed:      true,
             builtin:        !!p.builtin,
+            experimental:   rancher?.annotations?.[CATALOG_ANNOTATIONS.EXPERIMENTAL] === 'true',
+            certified:      rancher?.annotations?.[CATALOG_ANNOTATIONS.CERTIFIED] === CATALOG_ANNOTATIONS._RANCHER
           };
 
           // Built-in plugins can chose to be hidden - used where we implement as extensions
@@ -357,7 +352,15 @@ export default {
           chart.installing = this.installing[chart.name];
 
           // Check for upgrade
+          // Use the currently installed version's metadata to show/hide the experimental and certified labels
           if (chart.installableVersions?.length && p.version !== chart.installableVersions?.[0]?.version) {
+            const installedVersion = (chart.installableVersions || []).find((v) => v?.version === p.version);
+
+            if (installedVersion) {
+              chart.experimental = installedVersion?.annotations?.[CATALOG_ANNOTATIONS.EXPERIMENTAL] === 'true';
+              chart.certified = installedVersion?.annotations?.[CATALOG_ANNOTATIONS.CERTIFIED] === CATALOG_ANNOTATIONS._RANCHER;
+            }
+
             chart.upgrade = chart.installableVersions[0].version;
           }
         } else {
@@ -525,21 +528,61 @@ export default {
 
     // Developer Load is in the action menu
     showDeveloperLoadDialog() {
-      this.$refs.developerInstallDialog.showDialog();
+      this.$store.dispatch('management/promptModal', {
+        component:           'DeveloperLoadExtensionDialog',
+        returnFocusSelector: '[data-testid="extensions-page-menu"]',
+        componentProps:      {
+          closed: (res) => {
+            this.didInstall(res);
+          }
+        }
+      });
     },
 
     showAddExtensionReposDialog() {
       this.updateAddReposSetting();
       this.refreshCharts(true);
-      this.$refs.addExtensionReposDialog.showDialog();
+
+      this.$store.dispatch('management/promptModal', {
+        component:      'AddExtensionReposDialog',
+        testId:         'add-extensions-repos-modal',
+        componentProps: {
+          done: () => {
+            this.updateInstallStatus(true);
+          }
+        }
+      });
     },
 
     showCatalogLoadDialog() {
-      this.$refs.catalogLoadDialog.showDialog();
+      this.$store.dispatch('management/promptModal', {
+        component:           'ExtensionCatalogInstallDialog',
+        returnFocusSelector: '[data-testid="extensions-catalog-load-dialog"]',
+        componentProps:      {
+          refresh: () => {
+            this.reloadRequired = true;
+          },
+          closed: (res) => {
+            this.didInstall(res);
+          }
+        }
+      });
     },
 
     showCatalogUninstallDialog(ev) {
-      this.$refs.catalogUninstallDialog.showDialog(ev);
+      this.$store.dispatch('management/promptModal', {
+        component:           'ExtensionCatalogUninstallDialog',
+        returnFocusSelector: '[data-testid="extensions-catalog-load-dialog"]',
+        componentProps:      {
+          catalog: ev,
+          refresh: () => {
+            this.reloadRequired = true;
+          },
+          closed: (res) => {
+            this.didUninstall(res);
+          }
+        }
+      });
     },
 
     showInstallDialog(plugin, mode, ev) {
@@ -547,7 +590,22 @@ export default {
       ev.preventDefault();
       ev.stopPropagation();
 
-      this.$refs.installDialog.showDialog(plugin, mode);
+      this.$store.dispatch('management/promptModal', {
+        component:                            'InstallExtensionDialog',
+        testId:                               'install-extension-modal',
+        returnFocusSelector:                  `[data-testid="extension-card-${ mode }-btn-${ plugin?.name }"]`,
+        returnFocusFirstIterableNodeSelector: '#extensions-main-page',
+        componentProps:                       {
+          plugin,
+          mode,
+          updateStatus: (pluginName, type) => {
+            this.updatePluginInstallStatus(pluginName, type);
+          },
+          closed: (res) => {
+            this.didInstall(res);
+          }
+        }
+      });
     },
 
     showUninstallDialog(plugin, ev) {
@@ -555,7 +613,21 @@ export default {
       ev.preventDefault();
       ev.stopPropagation();
 
-      this.$refs.uninstallDialog.showDialog(plugin);
+      this.$store.dispatch('management/promptModal', {
+        component:                            'UninstallExtensionDialog',
+        testId:                               'uninstall-extension-modal',
+        returnFocusSelector:                  `[data-testid="extension-card-uninstall-btn-${ plugin.name }"]`,
+        returnFocusFirstIterableNodeSelector: '#extensions-main-page',
+        componentProps:                       {
+          plugin,
+          updateStatus: (pluginName, type) => {
+            this.updatePluginInstallStatus(pluginName, type);
+          },
+          closed: (res) => {
+            this.didUninstall(res);
+          }
+        }
+      });
     },
 
     didUninstall(plugin) {
@@ -996,35 +1068,6 @@ export default {
         </div>
       </template>
     </div>
-
-    <InstallDialog
-      ref="installDialog"
-      @closed="didInstall"
-      @update="updatePluginInstallStatus"
-    />
-    <UninstallDialog
-      ref="uninstallDialog"
-      @closed="didUninstall"
-      @update="updatePluginInstallStatus"
-    />
-    <CatalogLoadDialog
-      ref="catalogLoadDialog"
-      @closed="didInstall"
-      @refresh="() => reloadRequired = true"
-    />
-    <CatalogUninstallDialog
-      ref="catalogUninstallDialog"
-      @closed="didUninstall"
-      @refresh="() => reloadRequired = true"
-    />
-    <DeveloperInstallDialog
-      ref="developerInstallDialog"
-      @closed="didInstall"
-    />
-    <AddExtensionRepos
-      ref="addExtensionReposDialog"
-      @done="updateInstallStatus(true)"
-    />
   </div>
 </template>
 

package/pages/explorer/resource/detail/configmap.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import DetailPage from '@shell/components/Resource/Detail/Page.vue';
+import TitleBar from '@shell/components/Resource/Detail/TitleBar/index.vue';
+import { useDefaultTitleBarProps } from '@shell/components/Resource/Detail/TitleBar/composables';
+import Metadata from '@shell/components/Resource/Detail/Metadata/index.vue';
+import { useDefaultMetadataProps } from '@shell/components/Resource/Detail/Metadata/composables';
+import { CONFIG_MAP } from '@shell/config/types';
+import { useFetchResourceWithId, useResourceIdentifiers } from '@shell/composables/resources';
+import ResourceTabs from '@shell/components/form/ResourceTabs/index.vue';
+import ConfigMapDataTab from '@shell/components/Resource/Detail/ResourceTabs/ConfigMapDataTab/index.vue';
+import { useGetConfigMapDataTabProps } from '@shell/components/Resource/Detail/ResourceTabs/ConfigMapDataTab/composables';
+
+const { id, schema } = useResourceIdentifiers(CONFIG_MAP);
+const configMap = await useFetchResourceWithId(CONFIG_MAP, id);
+const titleBarProps = useDefaultTitleBarProps(configMap);
+const metadataProps = useDefaultMetadataProps(configMap);
+const configMapDataTabProps = useGetConfigMapDataTabProps(configMap);
+</script>
+
+<template>
+  <DetailPage>
+    <template #top-area>
+      <TitleBar
+        v-bind="titleBarProps"
+      />
+      <Metadata
+        class="mmt-6"
+        v-bind="metadataProps"
+      />
+    </template>
+    <template #bottom-area>
+      <ResourceTabs
+        :value="configMap"
+        :schema="schema"
+      >
+        <ConfigMapDataTab
+          v-bind="configMapDataTabProps"
+        />
+      </ResourceTabs>
+    </template>
+  </DetailPage>
+</template>

package/pages/explorer/resource/detail/projectsecret.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+import Secret from '@shell/pages/explorer/resource/detail/secret.vue';
+
+</script>
+
+<template>
+  <Secret :isProjectSecret="true" />
+</template>

package/pages/explorer/resource/detail/secret.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import DetailPage from '@shell/components/Resource/Detail/Page.vue';
+import TitleBar from '@shell/components/Resource/Detail/TitleBar/index.vue';
+import { useDefaultTitleBarProps } from '@shell/components/Resource/Detail/TitleBar/composables';
+import Metadata from '@shell/components/Resource/Detail/Metadata/index.vue';
+import { MANAGEMENT, SECRET } from '@shell/config/types';
+import { useFetchResourceWithId, useResourceIdentifiers } from '@shell/composables/resources';
+import ResourceTabs from '@shell/components/form/ResourceTabs/index.vue';
+import SecretDataTab from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/index.vue';
+import KnownHostsTab from '@shell/components/Resource/Detail/ResourceTabs/KnownHostsTab/index.vue';
+import { useGetKnownHostsTabProps } from '@shell/components/Resource/Detail/ResourceTabs/KnownHostsTab/composables';
+import { useSecretDataTabDefaultProps } from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/composeables';
+import { useSecretIdentifyingInformation } from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/composable';
+import { useStore } from 'vuex';
+import { useBasicMetadata } from '@shell/components/Resource/Detail/Metadata/composables';
+
+export interface Props {
+  isProjectSecret?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), { isProjectSecret: false });
+const store = useStore();
+const { id, schema } = useResourceIdentifiers(SECRET);
+const inStore = props.isProjectSecret ? 'management' : 'cluster';
+const secret = await useFetchResourceWithId(SECRET, id, inStore);
+
+if (props.isProjectSecret) {
+  await store.dispatch('management/find', { id: secret.projectId, type: MANAGEMENT.PROJECT });
+}
+const titleBarProps = useDefaultTitleBarProps(secret);
+const identifyingInformation = useSecretIdentifyingInformation(secret, props.isProjectSecret);
+const metaDataProps = useBasicMetadata(secret);
+const knownHostsTabProps = useGetKnownHostsTabProps(secret);
+const secretDataTabProps = useSecretDataTabDefaultProps(secret);
+
+</script>
+<template>
+  <DetailPage>
+    <template #top-area>
+      <TitleBar v-bind="titleBarProps" />
+      <Metadata
+        class="mmt-6"
+        v-bind="metaDataProps"
+        :identifyingInformation="identifyingInformation"
+      />
+    </template>
+    <template #bottom-area>
+      <ResourceTabs
+        :value="secret"
+        :schema="schema"
+      >
+        <SecretDataTab
+          v-bind="secretDataTabProps"
+          :weight="1"
+        />
+        <KnownHostsTab
+          v-if="knownHostsTabProps"
+          v-bind="knownHostsTabProps"
+          :weight="0"
+        />
+      </ResourceTabs>
+    </template>
+  </DetailPage>
+</template>

package/pages/home.vue

@@ -1,7 +1,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { mapPref, AFTER_LOGIN_ROUTE, READ_WHATS_NEW, HIDE_HOME_PAGE_CARDS } from '@shell/store/prefs';
-import { Banner } from '@components/Banner';
+import { mapPref, AFTER_LOGIN_ROUTE, HIDE_HOME_PAGE_CARDS } from '@shell/store/prefs';
 import BannerGraphic from '@shell/components/BannerGraphic.vue';
 import IndentedPanel from '@shell/components/IndentedPanel.vue';
 import PaginatedResourceTable from '@shell/components/PaginatedResourceTable.vue';
@@ -14,7 +13,7 @@ import { NAME as MANAGER } from '@shell/config/product/manager';
 import { STATE } from '@shell/config/table-headers';
 import { MODE, _IMPORT } from '@shell/config/query-params';
 import { createMemoryFormat, formatSi, parseSi, createMemoryValues } from '@shell/utils/units';
-import { getVersionInfo, readReleaseNotes, markReadReleaseNotes, markSeenReleaseNotes } from '@shell/utils/version';
+import { markSeenReleaseNotes } from '@shell/utils/version';
 import PageHeaderActions from '@shell/mixins/page-actions';
 import { getVendor } from '@shell/config/private-label';
 import { mapFeature, MULTI_CLUSTER } from '@shell/store/features';
@@ -36,7 +35,6 @@ export default defineComponent({
   name:       'Home',
   layout:     'home',
   components: {
-    Banner,
     BannerGraphic,
     IndentedPanel,
     PaginatedResourceTable,
@@ -71,7 +69,6 @@ export default defineComponent({
     return {
       topLevelPermissionsVis,
       HIDE_HOME_PAGE_CARDS,
-      fullVersion: getVersionInfo(this.$store).fullVersion,
       // Page actions don't change on the Home Page
       pageActions: [
         {
@@ -218,7 +215,7 @@ export default defineComponent({
 
   computed: {
     ...mapState(['managementReady']),
-    ...mapGetters(['currentCluster', 'defaultClusterId', 'releaseNotesUrl']),
+    ...mapGetters(['currentCluster', 'defaultClusterId']),
     mcm: mapFeature(MULTI_CLUSTER),
 
     canCreateCluster() {
@@ -228,18 +225,16 @@ export default defineComponent({
     afterLoginRoute: mapPref(AFTER_LOGIN_ROUTE),
     homePageCards:   mapPref(HIDE_HOME_PAGE_CARDS),
 
-    readWhatsNewAlready() {
-      return readReleaseNotes(this.$store);
-    },
-
-    showSetLoginBanner() {
-      return this.homePageCards?.setLoginPage;
-    },
   },
 
   async created() {
     // Update last visited on load
     await this.$store.dispatch('prefs/setLastVisited', { name: 'home' });
+
+    // We mark the release notes as seen still - the user has visited the home page, which will show the
+    // notification centre containing the release notes notification
+    // If we do not, then if they set the landing page, that won't work unless the release notes are marked read
+    // otherwise we always take them to the home page to see the release notes
     markSeenReleaseNotes(this.$store);
   },
 
@@ -415,23 +410,12 @@ export default defineComponent({
       return `${ memValues.useful }/${ memValues.total } ${ memValues.units }`;
     },
 
-    showWhatsNew() {
-      // Update the value, so that the message goes away
-      markReadReleaseNotes(this.$store);
-    },
-
-    showUserPrefs() {
-      this.$router.push({ name: 'prefs' });
-    },
-
     async resetCards() {
       const value = this.$store.getters['prefs/get'](HIDE_HOME_PAGE_CARDS) || {};
 
       delete value.setLoginPage;
 
       await this.$store.dispatch('prefs/set', { key: HIDE_HOME_PAGE_CARDS, value });
-
-      await this.$store.dispatch('prefs/set', { key: READ_WHATS_NEW, value: '' });
     },
 
     async toggleBanner() {
@@ -446,21 +430,6 @@ export default defineComponent({
       await this.$store.dispatch('prefs/set', { key: HIDE_HOME_PAGE_CARDS, value });
     },
 
-    async closeSetLoginBanner(retry = 0) {
-      let value = this.$store.getters['prefs/get'](HIDE_HOME_PAGE_CARDS);
-
-      if (value === true || value === false || value.length > 0) {
-        value = {};
-      }
-      value.setLoginPage = true;
-
-      const res = await this.$store.dispatch('prefs/set', { key: HIDE_HOME_PAGE_CARDS, value });
-
-      if (retry === 0 && res?.type === 'error' && res?.status === 500) {
-        await this.closeSetLoginBanner(retry + 1);
-      }
-    },
-
     /**
      * Filter out hidden clusters from list of all clusters
      */
@@ -516,98 +485,25 @@ export default defineComponent({
   >
 
     <!-- 页签标题组件，不显示子页面标题和面包屑 -->
-    <TabTitle
-      v-if="topLevelPermissionsVis"
-      :show-child="false"
-      :breadcrumb="false"
-    >
-
-      <!-- 页面标题：{vendor} - 首页 -->
-      {{ `${vendor} - ${t('landing.homepage')}` }}
-    </TabTitle>
 
     <!-- 首页欢迎横幅 -->
-    <BannerGraphic
+    <!-- <BannerGraphic
       v-if="topLevelPermissionsVis"
       :small="true"
       :title="t('landing.welcomeToRancher', {vendor})"
       :pref="HIDE_HOME_PAGE_CARDS"
       pref-key="welcomeBanner"
       data-testid="home-banner-graphic"
-    />
+    /> -->
     <IndentedPanel class="mt-20 mb-20">
 
-
-
-      <!-- 如果用户还没看过“新功能”提示 -->
-      <div
-        v-if="!readWhatsNewAlready && topLevelPermissionsVis"
-        class="row"
-      >
-        <div class="col span-12">
-          <!-- 信息提示横幅，颜色类型 info whats-new -->
-          <Banner
-            data-testid="changelog-banner"
-            color="info whats-new"
-          >
-            <div>
-
-              <!-- 显示版本更新提示 -->
-              {{ t('landing.seeWhatsNew', { version: CURRENT_RANCHER_VERSION }) }}
-            </div>
-
-            <!-- 跳转到更新日志链接 -->
-            <!-- 链接文本，支持 HTML 清理 -->
-            <a
-              class="hand banner-link"
-              :href="releaseNotesUrl"
-              role="link"
-              target="_blank"
-              rel="noopener noreferrer nofollow"
-              :aria-label="t('landing.whatsNewLink', { version: CURRENT_RANCHER_VERSION })"
-              @click.stop="showWhatsNew"
-              @keyup.stop.enter="showWhatsNew"
-            ><span v-clean-html="t('landing.whatsNewLink', { version: CURRENT_RANCHER_VERSION })" /></a>
-          </Banner>
-        </div>
-      </div>
-
        <!-- 主面板布局 -->
       <div class="row home-panels">
         <div class="col main-panel">
           <h2 class="mb-20">
-            {{ t('landing.clusters.title') }}
+            <!-- {{ t('landing.clusters.title') }} -->
+              首页
           </h2>
-          <!-- 如果不需要显示“设置登录页提示” -->
-          <div
-            v-if="!showSetLoginBanner && topLevelPermissionsVis"
-            class="mb-10 row"
-          >
-            <div class="col span-12">
-
-              <!-- 可关闭的提示横幅 -->
-              <Banner
-                color="set-login-page mt-0"
-                data-testid="set-login-page-banner"
-                :closable="true"
-                @close="closeSetLoginBanner()"
-              >
-                <div>
-                  {{ t('landing.landingPrefs.title') }}
-                </div>
-
-                <!-- 用户点击后进入偏好设置 -->
-                <a
-                  class="hand mr-20"
-                  tabindex="0"
-                  :aria-label="t('landing.landingPrefs.userPrefs')"
-                  @click.prevent.stop="showUserPrefs"
-                  @keyup.prevent.stop.enter="showUserPrefs"
-                  @keyup.prevent.stop.space="showUserPrefs"
-                ><span v-clean-html="t('landing.landingPrefs.userPrefs')" /></a>
-              </Banner>
-            </div>
-          </div>
 
           <!-- 集群列表面板 -->
           <div class="row panel">
@@ -644,7 +540,7 @@ export default defineComponent({
                   v-if="canCreateCluster || !!provClusterSchema"
                   #header-right
                 >
-                  <div v-if="topLevelPermissionsVis" class="table-heading">
+                  <div class="table-heading">
                     <router-link
                       v-if="!!provClusterSchema"
                       :to="manageLocation"
@@ -765,6 +661,14 @@ export default defineComponent({
                   </button>
                 </template>
               </PaginatedResourceTable>
+              <div v-else class="home-prompt">
+                <div style="text-align: center;position: relative;">
+                  <div class="left-border"></div>
+                  <!-- <div class="right-border"></div> -->
+                  <div class="home-prompt-title">欢 迎 登 录</div>
+                  <div class="home-prompt-subtitle">企业级容器编排与管理解决方案，提供强大的Kubernetes集群管理、应用部署和服务治理能力。</div>
+                </div>
+              </div>
             </div>
 
             <!-- 单集群模式 -->
@@ -784,6 +688,48 @@ export default defineComponent({
 </template>
 
 <style lang='scss' scoped>
+.home-prompt {
+  width: 100%;
+  height: 500px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .left-border,
+  .right-border {
+    position: absolute;
+    height: 1px;
+    width: 120px;
+    background: linear-gradient(90deg, transparent, #00a8ff, transparent);
+    bottom: 0px;
+  }
+  .left-border {
+    left: calc(50% - 60px);
+  }
+  .right-border {
+    right: 0;
+  }
+  .home-prompt-title {
+    font-size: 32px;
+    color: #1a1a1a;
+    font-weight: 700;
+    letter-spacing: -0.5px;
+    margin-bottom: 15px;
+    background: linear-gradient(135deg, #00a8ff, #0050b3);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    display: inline-block;
+  }
+  
+  .home-prompt-subtitle {
+    font-size: 18px;
+    color: #666666;
+    margin-bottom: 20px;
+    max-width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
   .banner-link:focus-visible {
     @include focus-outline;
   }

package/pages/prefs.vue

@@ -18,7 +18,6 @@ import { addObject } from '@shell/utils/array';
 import LocaleSelector from '@shell/components/LocaleSelector';
 import TabTitle from '@shell/components/TabTitle';
 import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
-import { harvester2cloud } from '@shell/utils/router'
 
 export default {
   components: {