UI: add sticky Hitokoto quote bar (categories d,h,i,k), next/hide, cached; include in Layout

client/src/components/HitokotoBar.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+
+interface HitokotoItem {
+  id: number;
+  uuid: string;
+  hitokoto: string;
+  type: string; // a, b, c, ... categories
+  from: string;
+  from_who?: string | null;
+}
+
+const API_URL = 'https://v1.hitokoto.cn/?c=d&c=h&c=i&c=k&encode=json';
+
+const LOCAL_HIDE_KEY = 'hitokoto_hide';
+const LOCAL_LAST_KEY = 'hitokoto_last';
+const LOCAL_LAST_AT = 'hitokoto_last_at';
+
+const cacheMs = 5 * 60 * 1000; // 5 minutes
+
+const HitokotoBar: React.FC = () => {
+  const [hidden, setHidden] = React.useState<boolean>(() => localStorage.getItem(LOCAL_HIDE_KEY) === '1');
+  const [loading, setLoading] = React.useState<boolean>(false);
+  const [error, setError] = React.useState<string>('');
+  const [quote, setQuote] = React.useState<HitokotoItem | null>(() => {
+    try {
+      const last = localStorage.getItem(LOCAL_LAST_KEY);
+      const at = Number(localStorage.getItem(LOCAL_LAST_AT) || '0');
+      if (last && Date.now() - at < cacheMs) {
+        return JSON.parse(last) as HitokotoItem;
+      }
+    } catch {}
+    return null;
+  });
+
+  const fetchQuote = async () => {
+    try {
+      setLoading(true);
+      setError('');
+      const res = await fetch(API_URL, { method: 'GET' });
+      if (!res.ok) throw new Error('Network error');
+      const data = await res.json();
+      setQuote(data as HitokotoItem);
+      try {
+        localStorage.setItem(LOCAL_LAST_KEY, JSON.stringify(data));
+        localStorage.setItem(LOCAL_LAST_AT, String(Date.now()));
+      } catch {}
+    } catch (e: any) {
+      setError('Failed to load quote');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  React.useEffect(() => {
+    if (!hidden && !quote) {
+      fetchQuote();
+    }
+  }, [hidden]);
+
+  if (hidden) return null;
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-50">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pb-3">
+        <div className="bg-white border border-gray-200 shadow-md rounded-lg px-4 py-2 flex items-center justify-between">
+          <div className="flex items-center min-w-0">
+            <span className="mr-2 text-indigo-600">💬</span>
+            <div className="min-w-0">
+              {loading ? (
+                <div className="text-sm text-gray-600">Loading…</div>
+              ) : error ? (
+                <div className="text-sm text-red-600">{error}</div>
+              ) : (
+                <div className="text-sm text-gray-800 truncate">
+                  {quote ? `『${quote.hitokoto}』 — ${quote.from_who || quote.from || 'Hitokoto'}` : ' '}
+                </div>
+              )}
+            </div>
+          </div>
+          <div className="flex items-center space-x-2 flex-shrink-0">
+            <button
+              onClick={fetchQuote}
+              className="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-700"
+              title="Next quote"
+            >
+              Next
+            </button>
+            <button
+              onClick={() => { setHidden(true); localStorage.setItem(LOCAL_HIDE_KEY, '1'); }}
+              className="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-700"
+              title="Hide"
+            >
+              Hide
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HitokotoBar;
+
+

client/src/components/Layout.tsx

@@ -9,6 +9,7 @@ import {
   UserIcon,
   ArrowRightOnRectangleIcon
 } from '@heroicons/react/24/outline';
+import HitokotoBar from './HitokotoBar';
 
 interface User {
   name: string;
@@ -186,6 +187,7 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
           </div>
         </div>
       )}
+      <HitokotoBar />
     </div>
   );
 };