feat: enhance recent apps feature with localization and improved UI handling

Author: hotlong

apps/console/src/index.css

@@ -2,6 +2,8 @@
 
 /* Scan sources for Tailwind classes */
 @source '../src/**/*.{ts,tsx}';
+@source '../../../packages/app-shell/src/**/*.{ts,tsx}';
+@source '../../../packages/auth/src/**/*.{ts,tsx}';
 @source '../../../packages/components/src/**/*.{ts,tsx}';
 @source '../../../packages/layout/src/**/*.{ts,tsx}';
 @source '../../../packages/fields/src/**/*.{ts,tsx}';
@@ -20,6 +22,11 @@
 @source '../../../packages/plugin-chatbot/src/**/*.{ts,tsx}';
 @source '../../../packages/plugin-editor/src/**/*.{ts,tsx}';
 @source '../../../packages/plugin-view/src/**/*.{ts,tsx}';
+@source '../../../packages/plugin-detail/src/**/*.{ts,tsx}';
+@source '../../../packages/plugin-list/src/**/*.{ts,tsx}';
+@source '../../../packages/plugin-designer/src/**/*.{ts,tsx}';
+@source '../../../packages/i18n/src/**/*.{ts,tsx}';
+@source '../../../packages/collaboration/src/**/*.{ts,tsx}';
 @source '../../../packages/mobile/src/**/*.{ts,tsx}';
 
 /* Tailwind plugin for animations remove

packages/app-shell/src/console/home/AppCard.tsx

@@ -53,7 +53,9 @@ export function AppCard({ app, onClick, isFavorite }: AppCardProps) {
           size="sm"
           className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity"
           onClick={handleToggleFavorite}
-          aria-label={isFavorite ? `Remove ${label} from favorites` : `Add ${label} to favorites`}
+          aria-label={isFavorite
+            ? t('common.removeFromFavorites', { defaultValue: 'Remove from favorites' }) + ` — ${label}`
+            : t('common.addToFavorites', { defaultValue: 'Add to favorites' }) + ` — ${label}`}
           aria-pressed={isFavorite}
           data-testid={`favorite-btn-${app.name}`}
         >

packages/app-shell/src/console/home/RecentApps.tsx

@@ -35,6 +35,9 @@ export function RecentApps({ items }: RecentAppsProps) {
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
         {items.map((item) => {
           const Icon = getIcon(item.type);
+          const typeLabel = t(`home.recentApps.itemType.${item.type}`, {
+            defaultValue: capitalizeFirst(item.type),
+          });
           return (
             <Card
               key={item.id}
@@ -57,7 +60,7 @@ export function RecentApps({ items }: RecentAppsProps) {
                   </div>
                   <div className="flex-1 min-w-0">
                     <h3 className="font-medium text-sm truncate">{item.label}</h3>
-                    <p className="text-xs text-muted-foreground">{capitalizeFirst(item.type)}</p>
+                    <p className="text-xs text-muted-foreground">{typeLabel}</p>
                   </div>
                 </div>
               </CardContent>

packages/app-shell/src/layout/AppHeader.tsx

@@ -72,11 +72,9 @@ function PathSep() {
 }
 
 
-const FALLBACK_PRESENCE_USERS: PresenceUser[] = [
-  { userId: 'u1', userName: 'Alice Chen', color: '#3498db', status: 'active', lastActivity: new Date().toISOString() },
-  { userId: 'u2', userName: 'Bob Smith', color: '#2ecc71', status: 'idle', lastActivity: new Date().toISOString() },
-  { userId: 'u3', userName: 'Carol Li', color: '#e74c3c', status: 'active', lastActivity: new Date().toISOString() },
-];
+// No fake fallback presence — render nothing when the API has no data so the
+// header doesn't ship phantom collaborators in production.
+const EMPTY_PRESENCE_USERS: PresenceUser[] = [];
 
 export type AppHeaderVariant = 'app' | 'home' | 'orgs';
 
@@ -148,7 +146,7 @@ export function AppHeader({
 
   useEffect(() => { fetchPresenceAndActivities(); }, [fetchPresenceAndActivities]);
 
-  const activeUsers = presenceUsers ?? apiPresenceUsers ?? FALLBACK_PRESENCE_USERS;
+  const activeUsers = presenceUsers ?? apiPresenceUsers ?? EMPTY_PRESENCE_USERS;
   const activeActivities = activities ?? apiActivities ?? [];
   const orgList = organizations ?? [];
   const hasOrgSection = isOrganizationsLoading || orgList.length > 0 || !!activeOrganization;

packages/i18n/src/locales/en.ts

@@ -884,6 +884,15 @@ const en = {
       systemSettings: 'System Settings',
       systemSettingsDesc: 'Configure your workspace',
     },
+    recentApps: {
+      title: 'Recently Accessed',
+      itemType: {
+        object: 'Object',
+        dashboard: 'Dashboard',
+        page: 'Page',
+        record: 'Record',
+      },
+    },
     appCard: {
       noDescription: 'No description',
       default: 'Default',

packages/i18n/src/locales/zh.ts

@@ -884,6 +884,15 @@ const zh = {
       systemSettings: '系统设置',
       systemSettingsDesc: '配置您的工作区',
     },
+    recentApps: {
+      title: '最近访问',
+      itemType: {
+        object: '对象',
+        dashboard: '仪表盘',
+        page: '页面',
+        record: '记录',
+      },
+    },
     appCard: {
       noDescription: '暂无描述',
       default: '默认',

packages/plugin-detail/src/DetailSection.tsx

@@ -275,11 +275,6 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
               <div className="flex items-center gap-2">
                 {section.icon && <span className="text-muted-foreground">{section.icon}</span>}
                 <span>{section.title}</span>
-                {section.fields && (
-                  <Badge variant="secondary" className="ml-2 text-xs">
-                    {section.fields.length}
-                  </Badge>
-                )}
               </div>
             </CardTitle>
             {section.description && (

packages/plugin-detail/src/DetailView.tsx

@@ -683,123 +683,138 @@ export const DetailView: React.FC<DetailViewProps> = ({
         <HeaderHighlight fields={schema.highlightFields} data={data} objectName={schema.objectName} objectSchema={objectSchema} />
       )}
 
-      {/* Auto Tabs mode: wrap sections, related, activity into tabs */}
-      {schema.autoTabs && !schema.tabs?.length ? (
-        <Tabs defaultValue="details" className="w-full">
-          <TabsList className="w-full justify-start border-b rounded-none bg-transparent p-0">
-            <TabsTrigger
-              value="details"
-              className="relative rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
-            >
-              {t('detail.details')}
-            </TabsTrigger>
-            {effectiveRelated.length > 0 && (
-              <TabsTrigger
-                value="related"
-                className="relative rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
-              >
-                <span className="flex items-center gap-1.5">
-                  {t('detail.related')}
-                  <Badge variant="secondary" className="text-xs">{effectiveRelated.length}</Badge>
-                </span>
-              </TabsTrigger>
-            )}
-            {schema.activities && schema.activities.length > 0 && (
-              <TabsTrigger
-                value="activity"
-                className="relative rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
-              >
-                <span className="flex items-center gap-1.5">
-                  {t('detail.activity')}
-                  <Badge variant="secondary" className="text-xs">{schema.activities.length}</Badge>
-                </span>
-              </TabsTrigger>
+      {/* Auto Tabs mode: wrap sections, related, activity into tabs.
+          When only the Details tab would render (no related, no activity),
+          skip the Tabs strip entirely — it's pure visual noise. */}
+      {schema.autoTabs && !schema.tabs?.length ? (() => {
+        const hasRelated = effectiveRelated.length > 0;
+        const hasActivity = !!schema.activities && schema.activities.length > 0;
+        const detailsContent = (
+          <div className="space-y-3 sm:space-y-4">
+            {/* Section Groups */}
+            {schema.sectionGroups && schema.sectionGroups.length > 0 && (
+              schema.sectionGroups.map((group, index) => (
+                <SectionGroup
+                  key={index}
+                  group={group}
+                  data={{ ...data, ...editedValues }}
+                  objectSchema={objectSchema}
+                  objectName={schema.objectName}
+                  isEditing={isInlineEditing}
+                  onFieldChange={handleInlineFieldChange}
+                />
+              ))
             )}
-          </TabsList>
-
-          {/* Details Tab Content */}
-          <TabsContent value="details" className="mt-4">
-            <div className="space-y-3 sm:space-y-4">
-              {/* Section Groups */}
-              {schema.sectionGroups && schema.sectionGroups.length > 0 && (
-                schema.sectionGroups.map((group, index) => (
-                  <SectionGroup
-                    key={index}
-                    group={group}
-                    data={{ ...data, ...editedValues }}
-                    objectSchema={objectSchema}
-                    objectName={schema.objectName}
-                    isEditing={isInlineEditing}
-                    onFieldChange={handleInlineFieldChange}
-                  />
-                ))
-              )}
-              {schema.sections && schema.sections.length > 0 && (
-                schema.sections.map((section, index) => (
-                  <DetailSection
-                    key={index}
-                    section={section}
-                    data={{ ...data, ...editedValues }}
-                    objectSchema={objectSchema}
-                    objectName={schema.objectName}
-                    isEditing={isInlineEditing}
-                    onFieldChange={handleInlineFieldChange}
-                  />
-                ))
-              )}
-              {schema.fields && schema.fields.length > 0 && !schema.sections?.length && (
+            {schema.sections && schema.sections.length > 0 && (
+              schema.sections.map((section, index) => (
                 <DetailSection
-                  section={{
-                    fields: schema.fields,
-                    columns: schema.columns,
-                  }}
+                  key={index}
+                  section={section}
                   data={{ ...data, ...editedValues }}
                   objectSchema={objectSchema}
                   objectName={schema.objectName}
                   isEditing={isInlineEditing}
                   onFieldChange={handleInlineFieldChange}
                 />
+              ))
+            )}
+            {schema.fields && schema.fields.length > 0 && !schema.sections?.length && (
+              <DetailSection
+                section={{
+                  fields: schema.fields,
+                  columns: schema.columns,
+                }}
+                data={{ ...data, ...editedValues }}
+                objectSchema={objectSchema}
+                objectName={schema.objectName}
+                isEditing={isInlineEditing}
+                onFieldChange={handleInlineFieldChange}
+              />
+            )}
+            {/* Comments in details tab */}
+            {schema.comments && (
+              <RecordComments
+                comments={schema.comments}
+                onAddComment={schema.onAddComment}
+              />
+            )}
+          </div>
+        );
+
+        if (!hasRelated && !hasActivity) {
+          // Single-tab case: render just the details content without a tab strip.
+          return <div className="mt-2">{detailsContent}</div>;
+        }
+
+        return (
+          <Tabs defaultValue="details" className="w-full">
+            <TabsList className="w-full justify-start border-b rounded-none bg-transparent p-0">
+              <TabsTrigger
+                value="details"
+                className="relative rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
+              >
+                {t('detail.details')}
+              </TabsTrigger>
+              {hasRelated && (
+                <TabsTrigger
+                  value="related"
+                  className="relative rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
+                >
+                  <span className="flex items-center gap-1.5">
+                    {t('detail.related')}
+                    <Badge variant="secondary" className="text-xs">{effectiveRelated.length}</Badge>
+                  </span>
+                </TabsTrigger>
               )}
-              {/* Comments in details tab */}
-              {schema.comments && (
-                <RecordComments
-                  comments={schema.comments}
-                  onAddComment={schema.onAddComment}
-                />
+              {hasActivity && (
+                <TabsTrigger
+                  value="activity"
+                  className="relative rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
+                >
+                  <span className="flex items-center gap-1.5">
+                    {t('detail.activity')}
+                    <Badge variant="secondary" className="text-xs">{schema.activities!.length}</Badge>
+                  </span>
+                </TabsTrigger>
               )}
-            </div>
-          </TabsContent>
+            </TabsList>
 
-          {/* Related Tab Content */}
-          {effectiveRelated.length > 0 && (
-            <TabsContent value="related" className="mt-4">
-              <div className="space-y-4">
-                {effectiveRelated.map((related, index) => (
-                  <RelatedList
-                    key={index}
-                    title={related.title}
-                    type={related.type}
-                    api={related.api}
-                    data={related.data}
-                    columns={related.columns as any}
-                    dataSource={dataSource}
-                    objectName={related.api}
-                    collapsible
-                    pageSize={DEFAULT_RELATED_PAGE_SIZE}
-                  />
-                ))}
-              </div>
+            {/* Details Tab Content */}
+            <TabsContent value="details" className="mt-4">
+              {detailsContent}
             </TabsContent>
-          )}
 
-          {/* Activity Tab Content */}
-          {schema.activities && schema.activities.length > 0 && (
-            <TabsContent value="activity" className="mt-4">
-              <ActivityTimeline activities={schema.activities} />
-            </TabsContent>
-          )}
-        </Tabs>
-      ) : (
+            {/* Related Tab Content */}
+            {hasRelated && (
+              <TabsContent value="related" className="mt-4">
+                <div className="space-y-4">
+                  {effectiveRelated.map((related, index) => (
+                    <RelatedList
+                      key={index}
+                      title={related.title}
+                      type={related.type}
+                      api={related.api}
+                      data={related.data}
+                      columns={related.columns as any}
+                      dataSource={dataSource}
+                      objectName={related.api}
+                      collapsible
+                      pageSize={DEFAULT_RELATED_PAGE_SIZE}
+                    />
+                  ))}
+                </div>
+              </TabsContent>
+            )}
+
+            {/* Activity Tab Content */}
+            {hasActivity && (
+              <TabsContent value="activity" className="mt-4">
+                <ActivityTimeline activities={schema.activities!} />
+              </TabsContent>
+            )}
+          </Tabs>
+        );
+      })() : (
         <>
           {/* Section Groups */}
           {schema.sectionGroups && schema.sectionGroups.length > 0 && (