Merge pull request #22 from Atemndobs/feature/fix-text-area

Feature/fix text area
Atemndobs · Dec 1, 2024 · 8c6aa21 · 8c6aa21
2 parents 876beb9 + a2928a8
commit 8c6aa21
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 223 deletions.
diff --git a/CHANGELOG.md 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
@@ -1,6 +1,6 @@
 {
   "name": "readme-pwa",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "scripts": {
     "dev": "next dev",

diff --git 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/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 />

diff --git a/src/components/text-to-speech/text-input.tsx b/src/components/text-to-speech/text-input.tsx
diff --git 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,37 +53,30 @@ 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>
                   ))}
                 </ul>
               </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>

diff --git 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>
   )
 }
diff --git 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'
     ]
   }
 }