From bb85311686ed7a82cfbc2e0dd1ffff0eb835b274 Mon Sep 17 00:00:00 2001
From: Atemndobs <atemndobs@yahoo.com>
Date: Sun, 1 Dec 2024 10:47:09 +0100
Subject: [PATCH 1/5] fix: update MobileNav to properly check audio content
 status

- Replace isPlaying with queue-based hasAudioContent check
- Remove conditional rendering of VoiceSelector
- Update debug logging
---
 src/components/mobile-nav.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/mobile-nav.tsx b/src/components/mobile-nav.tsx
index c787427..9988957 100644
--- a/src/components/mobile-nav.tsx
+++ b/src/components/mobile-nav.tsx
@@ -22,11 +22,17 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { getStorageStats } from '@/lib/utils/storage'
 
 export function MobileNav() {
-  const { isPlaying } = useAudioQueue()
+  const { queue } = useAudioQueue()
+
+  const hasAudioContent = queue.some(item => 
+    item.status === 'ready' || 
+    item.status === 'playing' || 
+    item.status === 'paused'
+  )
 
   console.debug('MobileNav render:', {
-    isPlaying,
-    shouldHideVoiceInfo: isPlaying
+    hasAudioContent,
+    shouldHideVoiceInfo: hasAudioContent
   })
 
   return (
@@ -77,7 +83,7 @@ export function MobileNav() {
           </div>
         </div>
       </nav>
-      {!isPlaying && (
+      {!hasAudioContent && (
         <div className="border-b bg-muted/50">
           <div className="container flex h-10 items-center">
             <VoiceInfo />

From 43a9a9da9f19519b2b2407ad6ef06fd2247bf85f Mon Sep 17 00:00:00 2001
From: Atemndobs <atemndobs@yahoo.com>
Date: Sun, 1 Dec 2024 10:48:18 +0100
Subject: [PATCH 2/5] fix: update components and remove unused files

- Update MobileNav to properly check audio content status
- Modify page.tsx
- Update voice-selector.tsx
- Remove unused text-input.tsx component
---
 src/app/page.tsx                             |   7 +-
 src/components/text-to-speech/text-input.tsx | 130 -------------------
 src/components/voice-selector.tsx            |  53 --------
 3 files changed, 3 insertions(+), 187 deletions(-)
 delete mode 100644 src/components/text-to-speech/text-input.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index e474e33..0596531 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,7 +3,6 @@
 import { useState, useRef, useEffect } from 'react'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
 import { useAudioQueue } from '@/lib/store/audio-queue'
 import { useSettings } from '@/lib/store/settings'
 import { MiniPlayer } from '@/components/audio-player/mini-player'
@@ -139,7 +138,7 @@ export default function Home() {
         onValueChange={(value) => setActiveTab(value as "url" | "text")} 
         className="w-full"
       >
-        {!isPlaying && (
+        {!hasAudioContent && (
           <TabsList className="grid w-full grid-cols-2">
             <TabsTrigger value="url">URL</TabsTrigger>
             <TabsTrigger value="text">Text</TabsTrigger>
@@ -184,7 +183,7 @@ export default function Home() {
         </TabsContent>
 
         <TabsContent value="text" className="space-y-4">
-          {textInput.trim() && !isPlaying && (
+          {textInput.trim() && !hasAudioContent && (
             <Button 
               onClick={handleSubmit}
               disabled={isProcessing || isConverting}
@@ -254,7 +253,7 @@ export default function Home() {
               <div
                 ref={contentEditableRef}
                 contentEditable
-                className="min-h-[200px] max-h-[calc(100vh-300px)] w-full rounded-md border border-input bg-background px-3 pt-10 pb-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 overflow-y-auto relative"
+                className="min-h-[20px] max-h-[calc(100vh-400px)] w-full rounded-md border border-input bg-background px-3 pt-10 pb-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 overflow-y-auto relative"
                 onPaste={(e) => {
                   e.preventDefault()
                   const text = e.clipboardData.getData('text/html') || e.clipboardData.getData('text')
diff --git a/src/components/text-to-speech/text-input.tsx b/src/components/text-to-speech/text-input.tsx
deleted file mode 100644
index 82e2b6c..0000000
--- a/src/components/text-to-speech/text-input.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
-import { Button } from '../ui/button';
-import { Textarea } from '../ui/textarea';
-import { Input } from '../ui/input';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
-import { useSettings } from '@/lib/store/settings';
-import { useAudioQueue } from '@/lib/store/audio-queue';
-import { TTSError } from '@/lib/api/tts';
-import { Loader2 } from 'lucide-react';
-import { toast } from 'sonner';
-import { VoiceSelector } from '../settings/voice-selector';
-import { MiniPlayer } from '../audio-player/mini-player';
-
-export function TextInput() {
-  const [text, setText] = useState('');
-  const [url, setUrl] = useState('');
-  const [loading, setLoading] = useState(false);
-  const { voice } = useSettings();
-  const { add } = useAudioQueue();
-
-  const handleTextConvert = async () => {
-    if (!text.trim()) return;
-    setLoading(true);
-    try {
-      await add(text.trim(), voice);
-      setText('');
-      toast.success('Text converted to speech and added to queue');
-    } catch (error) {
-      console.error('Error converting text:', error);
-      if (error instanceof TTSError) {
-        toast.error(error.message);
-      } else {
-        toast.error('An unexpected error occurred while converting text to speech');
-      }
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleUrlFetch = async () => {
-    if (!url.trim()) return;
-    setLoading(true);
-    try {
-      // TODO: Implement URL content fetching with Readability
-      console.log('Fetching URL:', url);
-      setUrl('');
-      toast.error('URL fetching is not implemented yet');
-    } catch (error) {
-      console.error('Error fetching URL:', error);
-      toast.error('Failed to fetch content from URL');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <Card className="w-full max-w-2xl">
-      <CardHeader>
-        <CardTitle>Convert Text to Speech</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div className="space-y-6">
-          <div>
-            <VoiceSelector />
-          </div>
-          <MiniPlayer />
-          <Tabs defaultValue="text" className="w-full">
-            <TabsList className="grid w-full grid-cols-2">
-              <TabsTrigger value="text">Text Input</TabsTrigger>
-              <TabsTrigger value="url">URL Input</TabsTrigger>
-            </TabsList>
-            <TabsContent value="text">
-              <div className="space-y-4">
-                <Textarea
-                  placeholder="Enter text to convert..."
-                  value={text}
-                  onChange={(e) => setText(e.target.value)}
-                  className="min-h-[200px]"
-                  disabled={loading}
-                />
-                <Button 
-                  onClick={handleTextConvert} 
-                  disabled={loading || !text.trim()}
-                  className="w-full"
-                >
-                  {loading ? (
-                    <>
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                      Converting...
-                    </>
-                  ) : (
-                    'Convert to Speech'
-                  )}
-                </Button>
-              </div>
-            </TabsContent>
-            <TabsContent value="url">
-              <div className="space-y-4">
-                <Input
-                  type="url"
-                  placeholder="Enter URL to fetch content..."
-                  value={url}
-                  onChange={(e) => setUrl(e.target.value)}
-                  disabled={loading}
-                />
-                <Button 
-                  onClick={handleUrlFetch}
-                  disabled={loading || !url.trim()}
-                  className="w-full"
-                >
-                  {loading ? (
-                    <>
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                      Fetching...
-                    </>
-                  ) : (
-                    'Fetch and Convert'
-                  )}
-                </Button>
-              </div>
-            </TabsContent>
-          </Tabs>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/src/components/voice-selector.tsx b/src/components/voice-selector.tsx
index a3176d9..5be6238 100644
--- a/src/components/voice-selector.tsx
+++ b/src/components/voice-selector.tsx
@@ -116,59 +116,6 @@ export function VoiceSelector() {
           </span>
         </Button>
       </div>
-
-      <div className="w-full">
-        <Tabs 
-          defaultValue={activeTab} 
-          value={activeTab as string} 
-          onValueChange={(value) => setActiveTab(value as "url" | "text")}
-        >
-          <TabsList className="grid w-full grid-cols-2">
-            <TabsTrigger value="text">Text</TabsTrigger>
-            <TabsTrigger value="url">URL</TabsTrigger>
-          </TabsList>
-          <TabsContent value="text" className="mt-2">
-            <div className="relative">
-              <Textarea
-                placeholder="Enter text to convert to speech..."
-                className="min-h-[100px] resize-none"
-                value={textInput}
-                onChange={(e) => setTextInput(e.target.value)}
-              />
-              {textInput && (
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="absolute top-2 right-2 h-6 w-6 hover:bg-transparent"
-                  onClick={clearTextInput}
-                >
-                  <XIcon className="h-4 w-4" />
-                </Button>
-              )}
-            </div>
-          </TabsContent>
-          <TabsContent value="url" className="mt-2">
-            <div className="relative">
-              <Input
-                type="url"
-                placeholder="Enter URL to extract text from..."
-                value={urlInput}
-                onChange={(e) => setUrlInput(e.target.value)}
-              />
-              {urlInput && (
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="absolute top-2 right-2 h-6 w-6 hover:bg-transparent"
-                  onClick={clearUrlInput}
-                >
-                  <XIcon className="h-4 w-4" />
-                </Button>
-              )}
-            </div>
-          </TabsContent>
-        </Tabs>
-      </div>
     </div>
   )
 }

From 7ad47b76d428f08786ee7d87c2077abf36850ae9 Mon Sep 17 00:00:00 2001
From: Atemndobs <atemndobs@yahoo.com>
Date: Sun, 1 Dec 2024 10:50:40 +0100
Subject: [PATCH 3/5] chore: bump version to 0.1.1

- Update package.json version to 0.1.1
- Add CHANGELOG.md
- Fix TypeScript error in MobileNav
- Remove unused text-input component
- Update related components
---
 CHANGELOG.md | 27 +++++++++++++++++++++++++++
 package.json |  2 +-
 2 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 CHANGELOG.md

diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..bbff722
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,27 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.1.1] - 2024-01-09
+
+### Fixed
+- Fixed TypeScript error in MobileNav component by properly implementing hasAudioContent check
+- Removed conditional rendering of VoiceSelector component
+- Updated debug logging in MobileNav
+- Cleaned up unused text-input.tsx component
+
+### Changed
+- Modified page.tsx and voice-selector.tsx components
+
+## [0.1.0] - 2024-01-09
+
+### Added
+- Initial release
+- Text-to-speech functionality
+- Voice selection
+- Audio queue management
+- Storage management
+- Mobile-friendly navigation
diff --git a/package.json b/package.json
index ab4525b..91596f5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "readme-pwa",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "scripts": {
     "dev": "next dev",

From cdeb13d285870799fef4f4b05bf8eb78d45260be Mon Sep 17 00:00:00 2001
From: Atemndobs <atemndobs@yahoo.com>
Date: Sun, 1 Dec 2024 10:52:09 +0100
Subject: [PATCH 4/5] chore: update version and changelog in TypeScript files

- Update version.ts to 0.1.1
- Update changelog.ts with new version history
- Align versions across package.json and TypeScript files
---
 src/utils/changelog.ts | 19 ++++++++++++-------
 src/utils/version.ts   |  2 +-
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/utils/changelog.ts b/src/utils/changelog.ts
index 7ab66fe..516887e 100644
--- a/src/utils/changelog.ts
+++ b/src/utils/changelog.ts
@@ -17,17 +17,22 @@ export const CHANGELOG: Record<string, VersionInfo> = {
     version: APP_VERSION,
     date: new Date().toISOString().split('T')[0],
     changes: [
-      'Feature: Add version tracking and changelog',
-      'Improve deployment automation',
-      'Add version display component'
+      'Fix: TypeScript error in MobileNav component',
+      'Remove conditional rendering of VoiceSelector',
+      'Update debug logging',
+      'Remove unused text-input component'
     ]
   },
-  '0.9.0': {
-    version: '1.0.0',
-    date: '2024-11-30',
+  '0.1.0': {
+    version: '0.1.0',
+    date: '2024-01-09',
     changes: [
       'Initial release',
-      'Base functionality implemented'
+      'Text-to-speech functionality',
+      'Voice selection',
+      'Audio queue management',
+      'Storage management',
+      'Mobile-friendly navigation'
     ]
   }
 }
diff --git a/src/utils/version.ts b/src/utils/version.ts
index 3cbfc62..09a6dc8 100644
--- a/src/utils/version.ts
+++ b/src/utils/version.ts
@@ -1,2 +1,2 @@
 // This file is automatically updated during deployment
-export const APP_VERSION = '1.0.0';
+export const APP_VERSION = '0.1.1';

From a2928a88290a6f5923ebbaffdeab444cc5b78e55 Mon Sep 17 00:00:00 2001
From: Atemndobs <atemndobs@yahoo.com>
Date: Sun, 1 Dec 2024 10:55:51 +0100
Subject: [PATCH 5/5] feat: add dark mode support to version display

Update version display component with Tailwind semantic colors

Add dark mode specific styles

Improve UI with latest badge and better spacing

Remove redundant version switch button
---
 src/components/version-display.tsx | 39 ++++++++++++------------------
 1 file changed, 16 insertions(+), 23 deletions(-)

diff --git a/src/components/version-display.tsx b/src/components/version-display.tsx
index 8a0978d..ba080b8 100644
--- a/src/components/version-display.tsx
+++ b/src/components/version-display.tsx
@@ -23,21 +23,21 @@ export const VersionDisplay = () => {
     <div className="fixed bottom-2 left-2 z-50">
       <button
         onClick={() => setShowChangelog(prev => !prev)}
-        className="text-xs text-gray-500 hover:text-gray-700 transition-colors flex items-center gap-1"
+        className="text-xs text-muted-foreground hover:text-primary transition-colors flex items-center gap-1"
       >
         <span>v{currentVersion}</span>
         {currentVersion !== APP_VERSION && (
-          <span className="text-amber-500 text-[10px]">(previous)</span>
+          <span className="text-amber-500 dark:text-amber-400 text-[10px]">(previous)</span>
         )}
       </button>
 
       {showChangelog && (
-        <div className="absolute bottom-full left-0 mb-2 bg-white rounded-lg shadow-lg p-4 min-w-[280px] border border-gray-200">
+        <div className="absolute bottom-full left-0 mb-2 bg-background rounded-lg shadow-lg dark:shadow-lg dark:shadow-black/30 p-4 min-w-[280px] border border-border">
           <div className="flex justify-between items-center mb-2">
-            <h3 className="font-medium">Version History</h3>
+            <h3 className="font-medium text-foreground">Version History</h3>
             <button 
               onClick={() => setShowChangelog(false)}
-              className="text-gray-400 hover:text-gray-600"
+              className="text-muted-foreground hover:text-foreground transition-colors"
             >
               ×
             </button>
@@ -53,19 +53,23 @@ export const VersionDisplay = () => {
                       setShowChangelog(false)
                     }}
                     className={`font-medium ${
-                      currentVersion === ver.version 
-                        ? 'text-blue-500' 
-                        : 'text-gray-700 hover:text-blue-500'
-                    }`}
+                      currentVersion === ver.version
+                        ? 'text-primary'
+                        : 'text-muted-foreground hover:text-foreground'
+                    } transition-colors`}
                   >
                     v{ver.version}
                   </button>
+                  <span className="text-xs text-muted-foreground">
+                    {ver.date}
+                  </span>
                   {ver.version === APP_VERSION && (
-                    <span className="text-xs text-green-500">(current)</span>
+                    <span className="text-[10px] bg-primary/10 text-primary px-1.5 py-0.5 rounded-full">
+                      latest
+                    </span>
                   )}
-                  <span className="text-xs text-gray-400">{ver.date}</span>
                 </div>
-                <ul className="mt-1 ml-4 text-xs text-gray-500 list-disc">
+                <ul className="mt-1 space-y-1 list-disc list-inside text-muted-foreground">
                   {ver.changes.map((change, i) => (
                     <li key={i}>{change}</li>
                   ))}
@@ -73,17 +77,6 @@ export const VersionDisplay = () => {
               </div>
             ))}
           </div>
-
-          {currentVersion !== APP_VERSION && (
-            <div className="mt-4 pt-2 border-t border-gray-100">
-              <button
-                onClick={toggleVersion}
-                className="text-xs text-blue-500 hover:text-blue-600"
-              >
-                Switch to current version
-              </button>
-            </div>
-          )}
         </div>
       )}
     </div>