Update app.py

app.py

@@ -1503,6 +1503,37 @@ def show_story():
                     </div>
                 """, unsafe_allow_html=True)
 
+def show_settings_hint():
+    """Show floating hint for settings sidebar"""
+    st.markdown("""
+        <div style="
+            position: fixed;
+            left: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            background-color: #1e88e5;
+            color: white;
+            padding: 10px;
+            border-radius: 0 8px 8px 0;
+            box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
+            cursor: pointer;
+            z-index: 1000;
+            animation: pulse 2s infinite;
+        ">
+            <div style="writing-mode: vertical-rl; text-orientation: mixed;">
+                ⚙️ ตั้งค่าระดับความยาก
+            </div>
+        </div>
+        
+        <style>
+        @keyframes pulse {
+            0% { transform: translateY(-50%) scale(1); }
+            50% { transform: translateY(-50%) scale(1.05); }
+            100% { transform: translateY(-50%) scale(1); }
+        }
+        </style>
+    """, unsafe_allow_html=True)
+
 def show_feedback_section():
     """Display writing feedback section"""
     if not st.session_state.feedback:
@@ -1998,6 +2029,14 @@ def show_main_interface():
 def main():
     """Main application entry point"""
     try:
+        # Page config
+        st.set_page_config(
+            page_title="JoyStory - Interactive Story Adventure",
+            page_icon="📖",
+            layout="wide",
+            initial_sidebar_state="collapsed"
+        )
+
         # Initialize states
         init_session_state()
         init_theme_state()
@@ -2010,18 +2049,72 @@ def main():
             </div>
         """, unsafe_allow_html=True)
 
+        # แสดงแถบเตือนด้านบนเมื่อเริ่มต้นใช้งาน
+        if 'show_settings_notice' not in st.session_state:
+            st.session_state.show_settings_notice = True
+        
+        if st.session_state.show_settings_notice:
+            st.info("""
+                💡 **คำแนะนำ:** คลิกที่ ≡ มุมซ้ายบนเพื่อตั้งค่าระดับความยาก (Beginner, Intermediate, Advanced) 
+                และโหลดความก้าวหน้าของคุณ
+            """)
+            if st.button("✕ ซ่อนคำแนะนำ"):
+                st.session_state.show_settings_notice = False
+                st.rerun()
+
         # Show header
         st.markdown("# 📖 JoyStory")
         show_welcome_section()
         show_parent_guide()
 
-        # Sidebar
+        # Sidebar with enhanced UI
         with st.sidebar:
+            st.markdown("""
+                <div style="text-align: center; padding: 10px; background-color: #f0f7ff; 
+                           border-radius: 8px; margin-bottom: 20px;">
+                    <h3 style="color: #1e88e5; margin: 0;">⚙️ การตั้งค่า</h3>
+                    <p style="color: #666; margin: 10px 0 0 0; font-size: 0.9em;">
+                        ปรับแต่งระดับความยากและจัดการความก้าวหน้าของคุณ
+                    </p>
+                </div>
+            """, unsafe_allow_html=True)
             show_sidebar()
 
         # Session Status Check
         check_session_status()
 
+        # แสดงตัวบ่งชี้ด้านข้าง (ถ้า sidebar ถูกซ่อนอยู่)
+        if st.session_state.get('initial_load', True):
+            st.markdown("""
+                <div style="
+                    position: fixed;
+                    left: 10px;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    background-color: #1e88e5;
+                    color: white;
+                    padding: 10px;
+                    border-radius: 0 8px 8px 0;
+                    box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
+                    cursor: pointer;
+                    z-index: 1000;
+                    animation: pulse 2s infinite;
+                ">
+                    <div style="writing-mode: vertical-rl; text-orientation: mixed;">
+                        ⚙️ ตั้งค่าระดับความยาก
+                    </div>
+                </div>
+                
+                <style>
+                @keyframes pulse {
+                    0% { transform: translateY(-50%) scale(1); }
+                    50% { transform: translateY(-50%) scale(1.05); }
+                    100% { transform: translateY(-50%) scale(1); }
+                }
+                </style>
+            """, unsafe_allow_html=True)
+            st.session_state.initial_load = False
+
         # Main content area
         main_container = st.container()
         with main_container:
@@ -2038,9 +2131,49 @@ def main():
         if st.session_state.story:
             auto_save_progress()
 
+        # Add CSS for sidebar enhancement
+        st.markdown("""
+            <style>
+            /* Highlight sidebar toggle button */
+            [data-testid="baseButton-header"] {
+                background-color: #e3f2fd !important;
+                border-radius: 8px !important;
+                animation: highlight 2s infinite;
+            }
+            
+            @keyframes highlight {
+                0% { box-shadow: 0 0 0 0 rgba(30,136,229,0.4); }
+                70% { box-shadow: 0 0 0 10px rgba(30,136,229,0); }
+                100% { box-shadow: 0 0 0 0 rgba(30,136,229,0); }
+            }
+            
+            /* Style sidebar */
+            .css-1d391kg {
+                background-color: #fafafa;
+                border-right: 1px solid #e0e0e0;
+            }
+            
+            /* Enhance sidebar buttons */
+            .stButton > button {
+                width: 100%;
+                margin: 5px 0;
+                border-radius: 8px;
+                transition: all 0.2s;
+            }
+            
+            .stButton > button:hover {
+                transform: translateY(-2px);
+                box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+            }
+            </style>
+        """, unsafe_allow_html=True)
+
     except Exception as e:
         handle_application_error(e)
 
+if __name__ == "__main__":
+    main()
+
 def check_session_status():
     """Check and maintain session status"""
     try: