Feat/fine tune

Frontend/src/_components/Header/SearchBar/AIdropdown.tsx

@@ -29,13 +29,15 @@ const ButtonRow = styled.div`
 `
 
 const AIButton = styled.button`
-  padding: 6px 12px;
-  border-radius: 6px;
+  padding: 10px 20px;
+  border-radius: 8px;
   border: none;
   background-color: #007acc;
   color: white;
   cursor: pointer;
-  font-size: 14px;
+  font-size: 16px;
+  font-weight: 500;
+  min-width: 100px;
 
   &:hover {
     background-color: #005f99;
@@ -78,12 +80,10 @@ const AIdropdown: FC<AIDropdownProps> = ({
   return (
     <Container width={inputWidth} onMouseDown={(e) => e.preventDefault()}>
       {aiState === 'idle' && (
-        <>
+        <ButtonRow>
           <TextBlock>{aiDescription}</TextBlock>
-          <ButtonRow>
-            <AIButton onClick={onAskAI}>Ask AI</AIButton>
-          </ButtonRow>
-        </>
+          <AIButton onClick={onAskAI}>Ask AI</AIButton>
+        </ButtonRow>
       )}
       {aiState === 'loading' && (
         <>
@@ -98,6 +98,7 @@ const AIdropdown: FC<AIDropdownProps> = ({
         <>
           <TextBlock>{renderAIContent(aiResponse)}</TextBlock>
           <ButtonRow>
+            <div></div>
             <AIButton onClick={onClear}>Clear</AIButton>
           </ButtonRow>
         </>

Frontend/src/_components/Header/SearchBar/SearchBar.tsx

@@ -6,6 +6,7 @@ import SearchDropdown from './SearchDropdown'
 import AIdropdown from './AIdropdown'
 import SearchSwitch from './SearchSwitch'
 import { usePinContext } from '../../ContextHooks/hooks'
+import { useSearch } from './_hooks'
 import type { StationResult } from '@/api'
 
 const Wrapper = styled.div`
@@ -57,6 +58,12 @@ const SearchBar: FC = () => {
   const inputRef = useRef<HTMLInputElement>(null)
   const { addPin } = usePinContext()
 
+  const {
+    results: searchResults,
+    loading: searchLoading,
+    error: searchError,
+  } = useSearch(query)
+
   //Update width dynamically based on focus
   useEffect(() => {
     setInputWidth(focused ? 750 : 550)
@@ -99,13 +106,26 @@ const SearchBar: FC = () => {
     setShowDropdown(false)
     console.log('Selected location:', result)
 
-    // 如果有坐标，添加 pin 到地图
     if (result.lat !== null && result.lon !== null) {
       const position = new LatLng(result.lat, result.lon)
       await addPin(position)
     }
   }
 
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+
+      if (mode === 'search') {
+        if (showDropdown && query.trim() && searchResults.length > 0) {
+          handleSelect(searchResults[0])
+        }
+      } else if (mode === 'ai') {
+        handleAskAI()
+      }
+    }
+  }
+
   return (
     <Wrapper>
       <SearchInput
@@ -117,6 +137,7 @@ const SearchBar: FC = () => {
         onChange={(e) => setQuery(e.target.value)}
         onFocus={() => setFocused(true)}
         onBlur={() => setFocused(false)}
+        onKeyDown={handleKeyDown}
       />
 
       <ToggleSlot>
@@ -126,9 +147,11 @@ const SearchBar: FC = () => {
       {/* Search Dropdown */}
       {mode === 'search' && showDropdown && query && (
         <SearchDropdown
-          query={query}
           inputWidth={inputWidth}
           onSelect={handleSelect}
+          results={searchResults}
+          loading={searchLoading}
+          error={searchError}
         />
       )}
 

Frontend/src/_components/Header/SearchBar/SearchDropdown.tsx

@@ -1,6 +1,5 @@
 import type { FC } from 'react'
 import styled from 'styled-components'
-import { useSearch } from './_hooks'
 import type { StationResult } from '@/api'
 
 const Container = styled.div<{ width: number }>`
@@ -38,18 +37,20 @@ const LoadingText = styled.div`
 `
 
 interface SearchDropdownProps {
-  query: string
   onSelect: (result: StationResult) => void
   inputWidth: number
+  results: StationResult[]
+  loading: boolean
+  error: string | null
 }
 
 const SearchDropdown: FC<SearchDropdownProps> = ({
-  query,
   onSelect,
   inputWidth,
+  results,
+  loading,
+  error,
 }) => {
-  const { results, loading, error } = useSearch(query)
-
   if (loading) {
     return (
       <Container width={inputWidth}>

Frontend/src/_components/Sidebar/Sidebar.tsx

@@ -19,9 +19,9 @@ const slideIn = keyframes`
 
 const SidebarWrapper = styled.div<{ $isOpen: boolean }>`
   position: fixed;
-  top: 0;
+  top: 100px;
   left: 0;
-  height: 100vh;
+  height: calc(100vh - 100px);
   width: ${({ $isOpen }) => ($isOpen ? '280px' : '0px')};
   background: linear-gradient(180deg, #ffffff 0%, #f8fafb 100%);
   box-shadow: ${({ $isOpen }) =>
@@ -37,13 +37,14 @@ const SidebarWrapper = styled.div<{ $isOpen: boolean }>`
 
 const ToggleButtonWrapper = styled.div<{ $isOpen: boolean }>`
   position: fixed;
-  top: 16px;
-  left: ${({ $isOpen }) => ($isOpen ? '280px' : '16px')};
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
+  top: 100px;
+  left: ${({ $isOpen }) => ($isOpen ? '280px' : '0px')};
+  width: 32px;
+  height: 60px;
+  border-radius: ${({ $isOpen }) => ($isOpen ? '0 8px 8px 0' : '0 8px 8px 0')};
   background: #ffffff;
   border: 1px solid #d1d5db;
+  border-left: none;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -52,6 +53,7 @@ const ToggleButtonWrapper = styled.div<{ $isOpen: boolean }>`
   transition:
     all 0.3s ease,
     left 0.3s ease;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
 
   &:hover {
     background: #f3f4f6;
@@ -173,8 +175,20 @@ const Sidebar: FC<SidebarProps> = ({ isOpen, onToggle }) => {
         </SidebarFooter>
       </SidebarWrapper>
 
-      {/* Circular toggle button */}
+      {/* Bookmark-style toggle button */}
       <ToggleButtonWrapper $isOpen={isOpen} onClick={onToggle}>
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
+        </svg>
         {isOpen ? '‹' : '›'}
       </ToggleButtonWrapper>
 

Frontend/src/api/config.ts

@@ -4,7 +4,7 @@
  */
 
 // Toggle between local development and production
-const USE_LOCAL = true // Set to true for local development
+const USE_LOCAL = false // Set to true for local development
 
 const LOCAL_API_URL = 'http://127.0.0.1:2333'
 const PRODUCTION_API_URL = 'https://weatherjyjam-production.up.railway.app'

Frontend/src/pages/Details/Details.tsx

@@ -35,10 +35,10 @@ const Details: FC = () => {
 
   // ---------- Year Range State ----------
   const [yearRanges, setYearRanges] = useState<Array<[number, number]>>([
-    [2025, 2025], // Graph 0
-    [2025, 2025], // Graph 1
-    [2025, 2025], // Graph 2
-    [2025, 2025], // Graph 3
+    [2015, 2025], // Graph 0
+    [2015, 2025], // Graph 1
+    [2015, 2025], // Graph 2
+    [2015, 2025], // Graph 3
   ])
 
   // Slider onChange handler

Frontend/src/pages/Details/_components/TimeRangeSlider.tsx

@@ -84,6 +84,7 @@ const TimeRangeSlider: React.FC<TimeRangeSliderProps> = ({
           <Thumb
             {...props}
             isDragged={isDragged || dragging}
+            isLeft={index === 0}
             onMouseDown={handleMouseDown}
             onMouseUp={handleMouseUp}
             key={index}

Frontend/src/pages/Details/_components/styles.ts

@@ -197,16 +197,26 @@ const Track = styled.div<{ background: string }>`
 // `;
 
 const Thumb = styled.div.withConfig({
-  shouldForwardProp: (prop) => prop !== 'isDragged',
-})<{ isDragged: boolean }>`
+  shouldForwardProp: (prop) => prop !== 'isDragged' && prop !== 'isLeft',
+})<{ isDragged: boolean; isLeft: boolean }>`
   height: 24px;
   width: 24px;
   border-radius: 50%;
-  background-color: ${({ isDragged }) => (isDragged ? '#005fa3' : '#007acc')};
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+  background-color: white;
+  border: 2px solid ${({ isDragged }) => (isDragged ? '#005fa3' : '#007acc')};
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: bold;
+  color: ${({ isDragged }) => (isDragged ? '#005fa3' : '#007acc')};
   &:hover {
-    transform: ${({ isDragged }) => (isDragged ? 'scale(1.5)' : 'scale(1.2)')};
+    transform: ${({ isDragged }) => (isDragged ? 'scale(1.3)' : 'scale(1.1)')};
+  }
+  &::before {
+    content: '${({ isLeft }) => (isLeft ? '<' : '>')}';
   }
 `
 

Frontend/src/pages/Home/_components/Dashboard/Dashboard.tsx

@@ -33,7 +33,7 @@ const MapSection = styled.div`
 `
 
 const Dashboard: FC = () => {
-  const [sidebarOpen, setSidebarOpen] = useState(true)
+  const [sidebarOpen, setSidebarOpen] = useState(false)
 
   const handleSidebarToggle = () => {
     setSidebarOpen(!sidebarOpen)

Frontend/src/pages/Profile/Profile.tsx

@@ -5,6 +5,7 @@ import { FullScreenLayout, MainLayout } from '../../_components'
 import FavouriteTabs from './_components/FavouriteTabs'
 import ProfileSettings from './_components/ProfileSettings'
 import { useAuthContext } from '@/_components/ContextHooks/hooks'
+import defaultUserImg from '../../_assets/defualtuser.jpg'
 
 const ProfileContainer = styled.div`
   flex: 1;
@@ -86,10 +87,7 @@ const Profile: FC = () => {
       <MainLayout>
         <ProfileContainer>
           <UserSection>
-            <ProfileImagePlaceholder
-              src="/src/_assets/defualtuser.jpg"
-              alt="User Avatar"
-            />
+            <ProfileImagePlaceholder src={defaultUserImg} alt="User Avatar" />
             <UserInfo>
               <WelcomeText>Hello, {user?.name || 'Guest'}</WelcomeText>
               <EmailText>{user?.email || 'Not logged in'}</EmailText>