merge: pull request #14 from 0xN1/feat-mobile-v01

feat: mobile design

Author: 0xN1

README.md

@@ -22,7 +22,7 @@ A personal journal app where we keep the data locally, while having the power to
 
 - [x] Option to use OpenAI API
 - [x] Model selection for OpenAI
-- [ ] Mobile responsive design
+- [x] Mobile responsive design
 - [ ] Allow ollama model pull from within the app
 - [ ] Allow theme customization
 - [ ] Support markdown

bun.lockb

@@ -1,6 +1,6 @@
 {
   "name": "kisahari",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -18,6 +18,7 @@
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
+    "caniuse-lite": "^1.0.30001702",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "dexie": "^3.2.5",

package.json

@@ -1,71 +1,71 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 0 0% 3.9%;
 
     --card: 0 0% 100%;
     --card-foreground: 0 0% 3.9%;
- 
+
     --popover: 0 0% 100%;
     --popover-foreground: 0 0% 3.9%;
- 
+
     --primary: 0 0% 9%;
     --primary-foreground: 0 0% 98%;
- 
+
     --secondary: 0 0% 96.1%;
     --secondary-foreground: 0 0% 9%;
- 
+
     --muted: 0 0% 96.1%;
     --muted-foreground: 0 0% 45.1%;
- 
+
     --accent: 0 0% 96.1%;
     --accent-foreground: 0 0% 9%;
- 
+
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
 
     --border: 0 0% 89.8%;
     --input: 0 0% 89.8%;
     --ring: 0 0% 3.9%;
- 
+
     --radius: 0.5rem;
   }
- 
+
   .dark {
     --background: 0 0% 3.9%;
     --foreground: 0 0% 98%;
- 
+
     --card: 0 0% 3.9%;
     --card-foreground: 0 0% 98%;
- 
+
     --popover: 0 0% 3.9%;
     --popover-foreground: 0 0% 98%;
- 
+
     --primary: 0 0% 98%;
     --primary-foreground: 0 0% 9%;
- 
+
     --secondary: 0 0% 14.9%;
     --secondary-foreground: 0 0% 98%;
- 
+
     --muted: 0 0% 14.9%;
     --muted-foreground: 0 0% 63.9%;
- 
+
     --accent: 0 0% 14.9%;
     --accent-foreground: 0 0% 98%;
- 
+
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 0% 98%;
- 
+
     --border: 0 0% 14.9%;
     --input: 0 0% 14.9%;
     --ring: 0 0% 83.1%;
   }
 }
- 
+
 @layer base {
   * {
     @apply border-border;
@@ -74,3 +74,24 @@
     @apply bg-background text-foreground;
   }
 }
+
+/* Mobile responsive adjustments */
+@media (max-width: 640px) {
+  .prose {
+    font-size: 0.875rem;
+  }
+
+  input,
+  textarea,
+  select,
+  button {
+    font-size: 0.875rem;
+  }
+}
+
+/* Ensure content doesn't overflow on small screens */
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}

src/app/globals.css

@@ -18,10 +18,10 @@ import useLocalStorage from "@/hooks/use-local-storage";
 
 const data = {
   title: "KISAHARI",
-  version: "v030",
+  version: "v040",
   footer: {
     left_copy: "YOUR PERSONAL JOURNAL",
-    right_copy: "KISAHARI © 2024",
+    right_copy: "KISAHARI © ",
   },
 };
 

src/app/home.tsx

@@ -15,7 +15,7 @@ const CurrentTime = (props: Props) => {
     }, 1000);
     return () => clearInterval(interval);
   });
-  return <div>{currentTime}</div>;
+  return <div className="text-xs sm:text-sm">{currentTime}</div>;
 };
 
 export default CurrentTime;

src/components/current-time.tsx

@@ -9,7 +9,7 @@ const AIButton = ({
   setShowAI: (showAI: boolean) => void;
 }) => {
   return (
-    <div className="absolute right-8 top-[14vh]">
+    <div className="absolute right-2 sm:right-4 md:right-8 sm:top-[14vh] top-[9vh]">
       <button
         onClick={() => {
           setShowAI(!showAI);

src/components/home/ai-button.tsx

@@ -18,24 +18,28 @@ const AIChat = ({
   setLoading: (loading: boolean) => void;
 }) => {
   return (
-    <div className="absolute inset-0 flex flex-col items-end justify-start top-[11vh] py-2 px-16 pointer-events-none">
-      <div className="px-4 py-2 rounded-md flex flex-col justify-evenly items-center w-full max-w-md pointer-events-auto">
+    <div
+      className="absolute inset-0 flex flex-col items-end justify-start top-[10vh] sm:top-[11vh] py-2 px-2 sm:px-4 md:px-16 pointer-events-none
+    from-zinc-900 to-zinc-950/20 bg-gradient-to-b mx-2 sm:mx-0 sm:bg-transparent
+    [background:radial-gradient(200%_150%_at_50%_15%,#111_25%,#7d11_100%)] sm:[background:none]"
+    >
+      <div className="px-2 sm:px-4 py-2 rounded-md flex flex-col justify-evenly items-center w-full max-w-full sm:max-w-md pointer-events-auto">
         <form
-          className="w-full p-4"
+          className="w-full p-2 sm:p-4"
           onSubmit={(e) => {
             e.preventDefault();
             askLLM(new FormData(e.target as HTMLFormElement));
           }}
         >
-          <div className="flex flex-row w-full gap-4 justify-between">
+          <div className="flex flex-row w-full gap-2 sm:gap-4 justify-between">
             <input
               autoFocus
               type="text"
               name="q"
               autoComplete="off"
               minLength={1}
               placeholder="Ask me anything"
-              className="max-w-prose w-full text-xs bg-transparent focus:outline-none break-words ring-zinc-400 ring-1 px-3 py-2 rounded-lg"
+              className="max-w-prose w-full text-xs bg-transparent focus:outline-none break-words ring-zinc-400 ring-1 px-2 sm:px-3 py-2 rounded-lg"
             />
             <button
               onClick={() => {
@@ -44,7 +48,7 @@ const AIChat = ({
               }}
               type="reset"
             >
-              <RotateCcwIcon className="w-5 h-5 text-zinc-600 hover:text-zinc-300" />
+              <RotateCcwIcon className="w-4 h-4 sm:w-5 sm:h-5 text-zinc-600 hover:text-zinc-300" />
             </button>
             <button
               onClick={() => {
@@ -55,28 +59,28 @@ const AIChat = ({
               type="submit"
             >
               {!loading ? (
-                <SparklesIcon className="w-5 h-5 text-zinc-300 hover:text-lime-500" />
+                <SparklesIcon className="w-4 h-4 sm:w-5 sm:h-5 text-zinc-300 hover:text-lime-500" />
               ) : (
-                <Loader2Icon className="w-5 h-5 text-zinc-300 hover:text-lime-500 animate-spin" />
+                <Loader2Icon className="w-4 h-4 sm:w-5 sm:h-5 text-zinc-300 hover:text-lime-500 animate-spin" />
               )}
             </button>
           </div>
         </form>
 
         {answer.length > 1 && (
-          <div className="whitespace-pre-line self-start prose prose-zinc break-words max-w-prose max-h-[50vh] overflow-y-scroll scrollbar-thin scrollbar-thumb-lime-500 scrollbar-track-transparent text-sm text-zinc-300 p-4">
+          <div className="whitespace-pre-line self-start prose prose-zinc break-words max-w-prose max-h-[40vh] sm:max-h-[50vh] overflow-y-scroll scrollbar-thin scrollbar-thumb-lime-500 scrollbar-track-transparent text-xs sm:text-sm text-zinc-300 p-2 sm:p-4">
             {answer}
           </div>
         )}
         {loading && (
-          <div className="max-w-prose text-xs self-start text-zinc-500 p-4 ">
+          <div className="max-w-prose text-xs self-start text-zinc-500 p-2 sm:p-4">
             <div className="animate-pulse uppercase">
               {answer.length < 1 ? "thinking" : "streaming answers"}
             </div>
           </div>
         )}
         {time && (
-          <div className="max-w-prose self-start text-xs text-zinc-500 p-4">
+          <div className="max-w-prose self-start text-xs text-zinc-500 p-2 sm:p-4">
             <div className="">{time}</div>
           </div>
         )}

src/components/home/ai-chat.tsx

@@ -10,7 +10,7 @@ const Container = ({
   return (
     <main
       className={cn(
-        "flex relative flex-col min-h-screen items-center justify-between w-full h-full p-8 bg-zinc-100/15 dark:bg-zinc-900/10 font-extralight z-10 max-h-screen",
+        "flex relative flex-col min-h-screen items-center justify-between w-full h-full p-2 sm:p-4 md:p-8 bg-zinc-100/15 dark:bg-zinc-900/10 font-extralight z-10 max-h-screen",
         className
       )}
     >

src/components/home/container.tsx

@@ -1,6 +1,9 @@
 import { cn } from "@/lib/utils";
+import { useEffect, useState } from "react";
 
 const DayProgress = () => {
+  const [progressWidth, setProgressWidth] = useState(0);
+
   const calcDayProgress = () => {
     const now = new Date();
     const start = new Date(now.getFullYear(), 0, 0);
@@ -12,21 +15,31 @@ const DayProgress = () => {
     return (day / daysInYear) * 100;
   };
 
+  useEffect(() => {
+    setProgressWidth(calcDayProgress());
+
+    const interval = setInterval(() => {
+      setProgressWidth(calcDayProgress());
+    }, 60000);
+
+    return () => clearInterval(interval);
+  }, []);
+
   return (
     <div className="w-full relative flex flex-row text-xs justify-between items-center">
-      <div
-        className={cn(
-          "flex flex-row self-start max-w-[95vw] py-2 px-4  bg-lime-400 rounded-[2px]  text-zinc-800",
-          `w-[${calcDayProgress()}vw]`
-        )}
-      ></div>
+      <div className="w-full bg-zinc-800 h-3 sm:h-6 rounded-[2px] overflow-hidden">
+        <div
+          className="h-full bg-lime-400 rounded-[2px] text-zinc-800 transition-width duration-300"
+          style={{ width: `${progressWidth}%` }}
+        ></div>
+      </div>
       <span
         className={cn(
-          calcDayProgress() > 92 ? "text-zinc-800" : "text-lime-400",
-          "absolute right-6 font-medium text-[0.9em]"
+          progressWidth > 92 ? "text-zinc-800" : "text-lime-400",
+          "absolute right-2 sm:right-4 md:right-6 font-medium text-[0.9em]"
         )}
       >
-        {calcDayProgress().toFixed(1)}%
+        {progressWidth.toFixed(1)}%
       </span>
     </div>
   );

src/components/home/day-progress.tsx

@@ -1,8 +1,8 @@
 const EntriesContainer = ({ children }: { children: React.ReactNode }) => {
   return (
     <div
-      className="flex-1 relative h-full flex flex-col gap-4 p-8 sm:p-16 items-start w-full ring-1 ring-zinc-700
-        overflow-y-auto max-h-[82vh] rounded-sm scrollbar-thin scrollbar-thumb-zinc-800 scrollbar-track-transparent"
+      className="flex-1 relative h-full flex flex-col gap-0 sm:gap-4 p-2 sm:p-4 md:p-8 lg:p-16 pt-[14vh] sm:pt-0 items-start w-full ring-1 ring-zinc-700
+        overflow-y-auto max-h-[85vh] sm:max-h-[78vh] md:max-h-[82vh] rounded-sm scrollbar-thin scrollbar-thumb-zinc-800 scrollbar-track-transparent"
     >
       {children}
     </div>