feat: enhance solution detail, Solarized theme, scrollbar, layout, and i18n fixes

- Add solution vote/comment count tracking and tagsList to SolutionVO
- Register Solarized color themes for Monaco editors in code and markdown
- Add custom scrollbar styles with CSS variables for light/dark modes
- Compact header layout (sidebar 220px, header h-12), tighten data-table controls
- Add missing i18n keys: OAuth Google login, solution error messages, keyboard shortcuts
- Fix session expired redirect to use imported router directly
- Add formatted dates, language labels, tags display to solution cards and detail
- Fix edge operations to only fetch interactions when authenticated
- Improve LanguageSwitcher and NavUser guest dropdown UX

Author: DavidHLP

backend-spring/src/main/java/com/ulticode/modules/edgeoperations/service/impl/EdgeOperationsServiceImpl.java

@@ -6,6 +6,8 @@
 import com.ulticode.modules.edgeoperations.dto.EdgeOperationDTO;
 import com.ulticode.modules.edgeoperations.dto.EdgeOperationResponseVO;
 import com.ulticode.modules.edgeoperations.service.EdgeOperationsService;
+import com.ulticode.modules.solution.entity.Solution;
+import com.ulticode.modules.solution.mapper.SolutionMapper;
 import com.ulticode.modules.vote.dto.VoteDTO;
 import com.ulticode.modules.vote.dto.VoteResultVO;
 import com.ulticode.modules.vote.entity.EdgeOperation;
@@ -30,6 +32,7 @@ public class EdgeOperationsServiceImpl implements EdgeOperationsService {
     private final VoteService voteService;
     private final EdgeOperationMapper edgeOperationMapper;
     private final BookmarkMapper bookmarkMapper;
+    private final SolutionMapper solutionMapper;
 
     @Override
     @Transactional
@@ -87,6 +90,9 @@ private EdgeOperationResponseVO handleVoteOperation(String userId, String target
 
         VoteResultVO voteResult = voteService.vote(userId, voteDTO);
 
+        // Update denormalized vote counts on solution entity
+        updateSolutionVoteCounts(targetId, targetType);
+
         // Get favorites count
         long favorites = getFavoritesCount(targetId, targetType);
 
@@ -143,4 +149,32 @@ private long getFavoritesCount(String targetId, EdgeOperationTargetType targetTy
         // For other target types, return 0 (can be extended later)
         return 0;
     }
+
+    /**
+     * Update denormalized vote counts on solution entity.
+     * Called after vote operations on SOLUTION target type.
+     */
+    private void updateSolutionVoteCounts(String solutionId, EdgeOperationTargetType targetType) {
+        if (targetType != EdgeOperationTargetType.SOLUTION) {
+            return;
+        }
+
+        Solution solution = solutionMapper.selectById(solutionId);
+        if (solution == null) {
+            log.warn("Solution not found for vote count update: {}", solutionId);
+            return;
+        }
+
+        // Count likes and dislikes from edge_operations
+        long likes = edgeOperationMapper.countByTargetAndOperation(
+                solutionId, EdgeOperationTargetType.SOLUTION.getValue(), EdgeOperationType.VOTE_UP.getValue());
+        long dislikes = edgeOperationMapper.countByTargetAndOperation(
+                solutionId, EdgeOperationTargetType.SOLUTION.getValue(), EdgeOperationType.VOTE_DOWN.getValue());
+
+        solution.setLikes((int) likes);
+        solution.setDislikes((int) dislikes);
+        solutionMapper.updateById(solution);
+
+        log.debug("Updated solution {} vote counts: likes={}, dislikes={}", solutionId, likes, dislikes);
+    }
 }

backend-spring/src/main/java/com/ulticode/modules/solution/dto/SolutionVO.java

@@ -4,6 +4,8 @@
 import lombok.Data;
 
 import java.time.LocalDateTime;
+import java.util.Collections;
+import java.util.List;
 
 /**
  * Solution View Object for API responses.
@@ -88,6 +90,11 @@ public class SolutionVO {
      */
     private Long score;
 
+    /**
+     * Tags as parsed list (from JSON string)
+     */
+    private List<String> tagsList;
+
     /**
      * Whether the solution is published
      */

backend-spring/src/main/java/com/ulticode/modules/solution/entity/Solution.java

@@ -61,6 +61,21 @@ public class Solution {
      */
     private Integer views;
 
+    /**
+     * Number of likes (denormalized from edge_operations)
+     */
+    private Integer likes = 0;
+
+    /**
+     * Number of dislikes (denormalized from edge_operations)
+     */
+    private Integer dislikes = 0;
+
+    /**
+     * Number of comments (denormalized for performance)
+     */
+    private Integer commentCount = 0;
+
     /**
      * Whether the solution is published
      */

backend-spring/src/main/java/com/ulticode/modules/solution/service/impl/SolutionServiceImpl.java

@@ -18,6 +18,9 @@
 import com.ulticode.modules.solution.service.SolutionService;
 import com.ulticode.modules.user.entity.User;
 import com.ulticode.modules.user.mapper.UserMapper;
+import com.fasterxml.jackson.core.JsonProcessingException;
+import com.fasterxml.jackson.core.type.TypeReference;
+import com.fasterxml.jackson.databind.ObjectMapper;
 import com.ulticode.modules.vote.mapper.EdgeOperationMapper;
 import com.ulticode.modules.vote.entity.enums.EdgeOperationTargetType;
 import com.ulticode.modules.vote.entity.enums.EdgeOperationType;
@@ -28,6 +31,7 @@
 import org.springframework.transaction.annotation.Transactional;
 
 import java.time.LocalDateTime;
+import java.util.Collections;
 import java.util.List;
 import java.util.Optional;
 import java.util.UUID;
@@ -191,6 +195,9 @@ public SolutionVO create(Long problemId, String userId, CreateSolutionDTO create
         solution.setLanguage(createDTO.getLanguage());
         solution.setTags(createDTO.getTags() != null ? createDTO.getTags() : "[]");
         solution.setViews(0);
+        solution.setLikes(0);
+        solution.setDislikes(0);
+        solution.setCommentCount(0);
         solution.setIsPublished(true);
         solution.setPublishedAt(LocalDateTime.now());
         solution.setPublishedBy(userId);
@@ -297,6 +304,9 @@ public SolutionVO toVO(Solution solution) {
         SolutionVO vo = new SolutionVO();
         BeanUtils.copyProperties(solution, vo);
 
+        // Parse tags JSON to list
+        vo.setTagsList(parseTags(solution.getTags()));
+
         // Fetch author info
         User author = userMapper.selectById(solution.getUserId());
         if (author != null) {
@@ -321,6 +331,25 @@ public SolutionVO toVO(Solution solution) {
         return vo;
     }
 
+    /**
+     * Parse tags JSON string to list.
+     *
+     * @param tagsJson the JSON string of tags
+     * @return list of tags
+     */
+    private List<String> parseTags(String tagsJson) {
+        if (tagsJson == null || tagsJson.isBlank()) {
+            return Collections.emptyList();
+        }
+        try {
+            ObjectMapper mapper = new ObjectMapper();
+            return mapper.readValue(tagsJson, new TypeReference<List<String>>() {});
+        } catch (JsonProcessingException e) {
+            log.warn("Failed to parse tags JSON: {}", tagsJson, e);
+            return Collections.emptyList();
+        }
+    }
+
     /**
      * Build a summary from markdown content.
      * Strips markdown formatting and truncates to max length.

console/src/components/LanguageSwitcher.vue

@@ -8,27 +8,39 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Button } from "@/components/ui/button";
 import IconGlobe from "~icons/lucide/globe";
+import { Check } from "lucide-vue-next";
 
 const { availableLocales, setLocale, isCurrentLocale } = useLocale();
 </script>
 
 <template>
   <DropdownMenu>
     <DropdownMenuTrigger as-child>
-      <Button variant="ghost" size="icon" class="h-8 w-8">
-        <IconGlobe class="h-4 w-4" />
+      <Button variant="ghost" size="icon" class="h-8 w-8 hover:bg-accent/50 transition-colors">
+        <IconGlobe class="h-4 w-4 text-muted-foreground hover:text-foreground transition-colors" />
         <span class="sr-only">{{ $t("common.actions.toggleLanguage") }}</span>
       </Button>
     </DropdownMenuTrigger>
-    <DropdownMenuContent align="end">
+    <DropdownMenuContent align="end" class="min-w-40 p-1.5 animate-in fade-in-0 zoom-in-95 duration-200">
       <DropdownMenuItem
         v-for="localeConfig in availableLocales"
         :key="localeConfig.code"
-        :class="{ 'bg-accent': isCurrentLocale(localeConfig.code) }"
+        class="flex items-center justify-between cursor-pointer transition-all duration-200 px-3 py-2"
+        :class="[
+          isCurrentLocale(localeConfig.code)
+            ? 'bg-accent/50 text-accent-foreground font-bold'
+            : 'hover:bg-accent/30'
+        ]"
         @click="setLocale(localeConfig.code)"
       >
-        <span class="mr-2">{{ localeConfig.flag }}</span>
-        <span>{{ localeConfig.nativeName }}</span>
+        <div class="flex items-center gap-3">
+          <span class="text-base leading-none">{{ localeConfig.flag }}</span>
+          <span class="text-[11px] uppercase tracking-widest font-data">{{ localeConfig.nativeName }}</span>
+        </div>
+        <Check
+          v-if="isCurrentLocale(localeConfig.code)"
+          class="size-3.5 text-[var(--accent-primary)] animate-in zoom-in-50 duration-300"
+        />
       </DropdownMenuItem>
     </DropdownMenuContent>
   </DropdownMenu>

console/src/components/common/data-table/CategoryFilter.vue

@@ -18,23 +18,23 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <div class="flex flex-wrap gap-2 mb-2">
+  <div class="flex flex-wrap gap-1.5 mb-1.5">
     <button
       v-for="cat in categories"
       :key="cat.value"
       @click="emit('update:modelValue', cat.value)"
-      class="flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs font-medium transition-all duration-200"
+      class="flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-medium transition-all duration-200"
       :class="
         modelValue === cat.value
           ? 'bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 shadow-sm ring-1 ring-black/5 dark:ring-white/10'
           : 'text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 hover:bg-zinc-100/50 dark:hover:bg-zinc-800/50'
       "
     >
       <div
-        class="p-1 rounded bg-popover shadow-sm"
+        class="p-0.5 rounded bg-popover shadow-sm"
         :class="modelValue === cat.value ? 'text-primary' : 'text-zinc-400'"
       >
-        <component :is="cat.icon" v-if="cat.icon" class="w-3 h-3" />
+        <component :is="cat.icon" v-if="cat.icon" class="w-2.5 h-2.5" />
       </div>
       {{ cat.label }}
     </button>

console/src/components/common/data-table/DataTableToolbar.vue

@@ -26,18 +26,18 @@ const emit = defineEmits<{
 
 <template>
   <div
-    class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between"
+    class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between"
   >
     <!-- Left: Search -->
     <div class="relative w-full max-w-md">
       <Search
-        class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground"
+        class="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground"
       />
       <Input
         :model-value="modelValue"
         @update:model-value="(v) => emit('update:modelValue', v as string)"
         :placeholder="placeholder || 'Search...'"
-        class="pl-9 h-10 rounded-full"
+        class="pl-8.5 h-9 text-xs rounded-full"
       />
     </div>
 
@@ -47,14 +47,14 @@ const emit = defineEmits<{
         <DropdownMenuTrigger as-child>
           <Button
             variant="outline"
-            class="h-10 gap-2 border-dashed rounded-full"
+            class="h-9 gap-1.5 border-dashed rounded-full text-xs"
           >
-            <ListFilter class="h-4 w-4" />
+            <ListFilter class="h-3.5 w-3.5" />
             {{ filterLabel || "Filters" }}
             <Badge
               v-if="(activeFilterCount || 0) > 0"
               variant="secondary"
-              class="ml-1 h-5 px-1 text-[10px] rounded-full"
+              class="ml-0.5 h-4 px-1 text-[9px] rounded-full"
             >
               {{ activeFilterCount }}
             </Badge>
@@ -71,11 +71,11 @@ const emit = defineEmits<{
         v-if="showClear"
         variant="ghost"
         size="icon"
-        class="h-10 w-10 rounded-full"
+        class="h-9 w-9 rounded-full"
         @click="emit('clear')"
         :aria-label="clearLabel || 'Clear filters'"
       >
-        <X class="h-4 w-4" />
+        <X class="h-3.5 w-3.5" />
       </Button>
     </div>
   </div>

console/src/components/common/data-table/TagFilter.vue

@@ -32,13 +32,13 @@ function isTagSelected(tag: string, currentTags: string[]) {
 </script>
 
 <template>
-  <Collapsible class="w-full space-y-3">
-    <div class="flex flex-wrap items-center gap-2">
+  <Collapsible class="w-full space-y-2.5">
+    <div class="flex flex-wrap items-center gap-1.5">
       <Badge
         v-for="tag in popularTags"
         :key="tag"
         :variant="isTagSelected(tag, modelValue) ? 'default' : 'outline'"
-        class="cursor-pointer px-3 py-1 hover:bg-primary/80 hover:text-primary-foreground transition-colors rounded-none"
+        class="cursor-pointer px-2 py-0.5 text-[11px] hover:bg-primary/80 hover:text-primary-foreground transition-colors rounded-none"
         :class="{
           'bg-primary text-primary-foreground hover:bg-primary/90':
             isTagSelected(tag, modelValue),
@@ -51,20 +51,20 @@ function isTagSelected(tag: string, currentTags: string[]) {
         <Button
           variant="ghost"
           size="sm"
-          class="gap-1 h-7 text-xs text-muted-foreground hover:text-foreground rounded-none"
+          class="gap-1 h-6 text-[10px] text-muted-foreground hover:text-foreground rounded-none px-2"
         >
           {{ showMoreLabel || "Show more" }}
-          <ChevronDown class="h-3 w-3" />
+          <ChevronDown class="h-2.5 w-2.5" />
         </Button>
       </CollapsibleTrigger>
     </div>
     <CollapsibleContent class="animate-slide-down">
-      <div class="flex flex-wrap gap-2 pt-2">
+      <div class="flex flex-wrap gap-1.5 pt-1.5">
         <Badge
           v-for="tag in otherTags"
           :key="tag"
           variant="outline"
-          class="cursor-pointer px-2.5 py-0.5 text-[11px] font-normal border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors rounded-none"
+          class="cursor-pointer px-2 py-0.5 text-[10px] font-normal border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors rounded-none"
           :class="{
             'bg-zinc-900 text-zinc-50 border-zinc-900 hover:bg-zinc-800 dark:bg-zinc-50 dark:text-zinc-900':
               isTagSelected(tag, modelValue),

console/src/components/edge-operations/ProblemEdgeOperations.vue

@@ -80,8 +80,8 @@ watch(
         viewerInteraction.value = {
           reaction: props.problem.interactions.viewer?.reaction,
         };
-      } else {
-        // Otherwise fetch from API
+      } else if (useAuthStore().isAuthenticated) {
+        // Only fetch from API when authenticated
         loadInteractions(problemId);
       }
     }

console/src/components/markdown/MarkdownEdit.vue

@@ -22,6 +22,7 @@ import * as monaco from "monaco-editor";
 import loader from "@monaco-editor/loader";
 import { usePreferredDark } from "@vueuse/core";
 import { configureMonacoWorkers } from "@/utils/monaco-workers";
+import { registerSolarizedThemes } from "@/utils/monaco-solarized-theme";
 import { useI18n } from "vue-i18n";
 
 // 确保 Worker 配置生效
@@ -57,6 +58,8 @@ const initEditor = async () => {
   loader.config({ monaco });
   const monacoInstance = await loader.init();
 
+  registerSolarizedThemes(monacoInstance);
+
   const initialValue = props.modelValue || props.defaultValue || "";
 
   editorInstance = monacoInstance.editor.create(editorRef.value, {