From 2d0938cc9a39780f5b4f4432bb6723850f765db4 Mon Sep 17 00:00:00 2001
From: lukasbicus <ing.lukas.bicus@gmail.com>
Date: Fri, 15 Nov 2024 08:16:16 +0100
Subject: [PATCH] Clean up (#25)

* Adjust buttons

* Update plan

* Disable show favorites only button.

* Update plan

* Remove grid button

* Update status bar.

* Update status bar.

* Update status bar.

* Update card-detail-page style.

* Implement toggle note visibility.

* Update plan.

* Remove palette button

* Update dropdown-field

* Fix ios bug.

* Update plan

* Update content.

* Remove w-full

* Fix lint errors.

* Prevent viewport scale.

* Indicate no note.

* Update about me section.

* Update plan.md
---
 app/(homescreens)/add-cards/page.tsx         | 13 ++---
 app/(homescreens)/my-cards/my-cards-page.tsx | 11 ++--
 app/about-author/page.tsx                    | 55 ++++++++++++++------
 app/card/card-detail-page.tsx                | 23 ++++----
 app/layout.tsx                               |  4 ++
 app/ui/card-form/card-form.tsx               | 44 ++++++----------
 app/ui/dropdown-field.tsx                    | 19 +++----
 plan.md                                      | 22 ++++++--
 8 files changed, 105 insertions(+), 86 deletions(-)

diff --git a/app/(homescreens)/add-cards/page.tsx b/app/(homescreens)/add-cards/page.tsx
index 5831da3..3670dc7 100644
--- a/app/(homescreens)/add-cards/page.tsx
+++ b/app/(homescreens)/add-cards/page.tsx
@@ -4,7 +4,7 @@ import { Loading } from '@/app/ui/loading';
 import { PageTemplate } from '@/app/ui/page-template';
 import { PrimaryHeader } from '@/app/ui/primary-header';
 import { Search } from '@/app/ui/search';
-import { IconLayoutGrid, IconPlus } from '@tabler/icons-react';
+import { IconPlus } from '@tabler/icons-react';
 import Link from 'next/link';
 import { Suspense } from 'react';
 
@@ -23,14 +23,9 @@ export default function Page() {
             </Link>
           }
         >
-          <>
-            <Suspense fallback={<Loading />}>
-              <Search className="flex-1" />
-            </Suspense>
-            <button className="btn btn-circle btn-ghost">
-              <IconLayoutGrid className="w-6 h-6" />
-            </button>
-          </>
+          <Suspense fallback={<Loading />}>
+            <Search className="flex-1" />
+          </Suspense>
         </PrimaryHeader>
       }
     >
diff --git a/app/(homescreens)/my-cards/my-cards-page.tsx b/app/(homescreens)/my-cards/my-cards-page.tsx
index 0065a20..d797342 100644
--- a/app/(homescreens)/my-cards/my-cards-page.tsx
+++ b/app/(homescreens)/my-cards/my-cards-page.tsx
@@ -57,6 +57,7 @@ export default function MyCardsPage() {
                     type: AppActionTypes.ToggleShowFavoritesOnly,
                   });
                 }}
+                disabled={state.cards.length === 0}
               >
                 {state.showFavoritesOnly ? (
                   <IconStarFilled className="w-6 h-6" />
@@ -81,16 +82,10 @@ export default function MyCardsPage() {
           description="Looks like you haven't added any loyalty cards yet. Get started by adding your first cards! You can manually add card details or import them if you have a digital file."
         >
           <div className="flex justify-center justify-self-center gap-4 px-4 w-full">
-            <Link
-              href={Routes.AddCards}
-              className="btn btn-primary w-1/3 max-w-36"
-            >
+            <Link href={Routes.AddCards} className="btn btn-primary w-36">
               Add cards
             </Link>
-            <Link
-              href={Routes.ImportData}
-              className="btn btn-primary w-1/3 max-w-36"
-            >
+            <Link href={Routes.ImportData} className="btn btn-primary w-36">
               Import cards
             </Link>
           </div>
diff --git a/app/about-author/page.tsx b/app/about-author/page.tsx
index c6b9a57..5b87506 100644
--- a/app/about-author/page.tsx
+++ b/app/about-author/page.tsx
@@ -27,17 +27,39 @@ export default function Page() {
           <h1 className="text-2xl md:text-3xl font-bold">Lukáš Bičuš</h1>
           <span className="text-xl">The fullstack developer</span>
         </div>
-        <div className="flex flex-col gap-2 px-2 py-3 mb-3 w-full bg-base-300">
-          <p className="px-2 pb-3">
-            Seasoned Software Developer with over a decade of experience in
-            JavaScript and 8 years specializing in React. I like clean code,
-            test driven development and code reviews. My expertise spans both
-            frontend and backend development.
+        <div className="card flex flex-col gap-2 px-4 py-6 bg-base-300">
+          <p>Hello, everyone!</p>
+          <p className="text-justify">
+            {`I'm the creator of the app you're currently exploring. My ambition was to craft a tool that's both functional and enjoyable, hoping it adds value to your daily routine. I'm thrilled to have you on board and I hope you're loving the experience.`}
           </p>
-          <div className="flex flex-col gap-2 w-full md:flex-row">
+          <p className="text-justify">
+            This project is a labor of love and is open source, which means
+            anyone interested can view, contribute, or learn from the code. You
+            can find the repository here:{' '}
+            <Link
+              href="https://github.com/lukasbicus/tilda"
+              className="font-bold underline"
+            >
+              Tilda on github
+            </Link>
+          </p>
+          <p className="text-justify">
+            {`I'm always on the lookout for ways to improve and evolve the app, so your input is incredibly important. If you've stumbled upon a bug, have ideas for new features, or just want to share your thoughts, please don't hesitate to reach out. You can contact me via LinkedIn, email me directly at `}
+            <Link
+              href="mailto:ing.lukas.bicus@gmail.com"
+              className="font-bold underline"
+            >
+              ing.lukas.bicus@gmail.com
+            </Link>
+            {`, or even contribute to the project on GitHub.`}
+          </p>
+          <p className="text-justify">
+            {`For a glimpse into my other projects or to connect professionally, visit my profiles:`}
+          </p>
+          <div className="flex flex-col gap-2 md:flex-row md:justify-center p-4">
             <Link
               href="https://github.com/lukasbicus/"
-              className="btn btn-primary w-full md:w-auto flex-grow"
+              className="btn btn-primary md:w-auto"
               target="_blank"
             >
               <FontAwesomeIcon icon={faGithub} className="w-6 h-6" />
@@ -45,21 +67,22 @@ export default function Page() {
             </Link>
             <Link
               href="https://www.linkedin.com/in/lukasbicus/"
-              className="btn btn-primary w-full md:w-auto flex-grow"
+              className="btn btn-primary md:w-auto"
               target="_blank"
             >
               <FontAwesomeIcon icon={faLinkedin} className="w-6 h-6" />
               Linked in
             </Link>
           </div>
-        </div>
-        <div className="flex flex-col gap-2 px-2 py-3 w-full bg-base-300">
-          <h3 className="pt-2 text-xl">Support me</h3>
-          <p className="py-3">
-            Your support helps me to keep creating content. Thank you for your
-            generosity!
+          <p className="text-justify">
+            {
+              'Your support and feedback are what drive the continuous improvement of this app. Thank you for being a part of this journey.'
+            }
+          </p>
+          <p>
+            Warmest regards, <br />
+            <span className="italic">Lukáš Bičuš</span>
           </p>
-          <p>Bank account: SK85 8330 0000 0023 0179 7796</p>
         </div>
       </div>
     </PageTemplate>
diff --git a/app/card/card-detail-page.tsx b/app/card/card-detail-page.tsx
index 7824715..57b1134 100644
--- a/app/card/card-detail-page.tsx
+++ b/app/card/card-detail-page.tsx
@@ -11,7 +11,7 @@ import { SecondaryHeader } from '@/app/ui/secondary-header';
 import { IconEdit, IconTrash } from '@tabler/icons-react';
 import Link from 'next/link';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 
 export function CardDetailPage() {
   const searchParams = useSearchParams();
@@ -20,6 +20,8 @@ export function CardDetailPage() {
   const card = state.cards.find(c => c.id === id);
   const deleteDialogRef = useRef<HTMLDialogElement>(null);
   const router = useRouter();
+  const [isNoteVisible, setIsNoteVisible] = useState(false);
+
   if (!card) {
     return <CardNotFoundPage id={id} title="Card detail" />;
   }
@@ -62,15 +64,14 @@ export function CardDetailPage() {
         >
           <div className="flex gap-6 items-center">
             <CompanyIcon {...card} className="w-16 h-16" />
-            <label className="form-control flex-1">
+            <label className="form-control flex-1 pointer-events-none">
               <div className="label">
                 <span className="label-text">Card name</span>
               </div>
               <input
                 type="text"
-                disabled
                 value={card.name}
-                className="input input-bordered w-full"
+                className="input input-bordered w-full input-ghost pointer-events-none"
               />
             </label>
           </div>
@@ -79,16 +80,20 @@ export function CardDetailPage() {
             <div className="label">
               <span className="label-text">Toggle note visibility</span>
             </div>
-            <input type="checkbox" className="toggle" defaultChecked />
+            <input
+              type="checkbox"
+              className="toggle"
+              checked={isNoteVisible}
+              onChange={() => setIsNoteVisible(!isNoteVisible)}
+            />
           </label>
-          <label className="form-control">
+          <label className="form-control pointer-events-none">
             <div className="label">
               <span className="label-text">Card note</span>
             </div>
             <textarea
-              className="textarea textarea-bordered h-24"
-              value={card.note}
-              disabled
+              className="textarea textarea-bordered h-24 textarea-ghost pointer-events-none"
+              value={card.note ? (isNoteVisible ? card.note : '****') : ''}
             />
           </label>
         </div>
diff --git a/app/layout.tsx b/app/layout.tsx
index b2d7b46..378430a 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -22,6 +22,7 @@ export const metadata: Metadata = {
   appleWebApp: {
     capable: true,
     title: 'Tilda',
+    statusBarStyle: 'black',
   },
   authors: [{ name: 'Lukas Bicus', url: 'https://github.com/LukasBicus' }],
 };
@@ -29,6 +30,9 @@ export const metadata: Metadata = {
 export const viewport: Viewport = {
   width: 'device-width',
   initialScale: 1,
+  maximumScale: 1,
+  minimumScale: 1,
+  userScalable: false,
 };
 
 export default function RootLayout({
diff --git a/app/ui/card-form/card-form.tsx b/app/ui/card-form/card-form.tsx
index 9d93250..34da29c 100644
--- a/app/ui/card-form/card-form.tsx
+++ b/app/ui/card-form/card-form.tsx
@@ -14,12 +14,7 @@ import { CodePicture } from '@/app/ui/code-picture';
 import { DropdownField } from '@/app/ui/dropdown-field';
 import { TextAreaField } from '@/app/ui/text-area-field';
 import { TextField } from '@/app/ui/text-field';
-import {
-  IconCamera,
-  IconPalette,
-  IconRefresh,
-  IconX,
-} from '@tabler/icons-react';
+import { IconCamera, IconRefresh, IconX } from '@tabler/icons-react';
 import { Html5QrcodeResult } from 'html5-qrcode';
 import Image from 'next/image';
 import { Reducer, useCallback, useEffect, useReducer, useRef } from 'react';
@@ -177,27 +172,22 @@ export default function CardForm({
         {hideColorDropdown ? (
           <input type="hidden" {...register(CardFormNames.Color)} />
         ) : (
-          <div className="flex gap-4">
-            <DropdownField
-              label="Background color"
-              dropdownClassName="dropdown-top"
-              options={Object.entries(colorNames).map(([hex, name]) => ({
-                label: (
-                  <div className="flex gap-2 items-center">
-                    <div className="w-4 h-4" style={{ backgroundColor: hex }} />
-                    <span>{name}</span>
-                  </div>
-                ),
-                value: hex,
-              }))}
-              control={control}
-              name={CardFormNames.Color}
-              watch={watch}
-            />
-            <button className="btn btn-primary btn-square mt-9" type="button">
-              <IconPalette className="w-6 h-6" />
-            </button>
-          </div>
+          <DropdownField
+            label="Background color"
+            dropdownClassName="dropdown-top"
+            options={Object.entries(colorNames).map(([hex, name]) => ({
+              label: (
+                <div className="flex gap-2 items-center">
+                  <div className="w-4 h-4" style={{ backgroundColor: hex }} />
+                  <span>{name}</span>
+                </div>
+              ),
+              value: hex,
+            }))}
+            control={control}
+            name={CardFormNames.Color}
+            watch={watch}
+          />
         )}
         {isSvg(defaultValueForIcon) ? (
           <label className={'form-control w-full'}>
diff --git a/app/ui/dropdown-field.tsx b/app/ui/dropdown-field.tsx
index 0864303..e695051 100644
--- a/app/ui/dropdown-field.tsx
+++ b/app/ui/dropdown-field.tsx
@@ -50,18 +50,13 @@ export function DropdownField<T extends FieldValues, U = string>({
             </div>
             <div className={clsx('dropdown', dropdownClassName)} key="dropdown">
               <div className="input input-bordered w-full flex items-center">
-                {currentOption ? (
-                  <div tabIndex={0} role="button" className="w-full">
-                    {currentOption.label}
-                  </div>
-                ) : (
-                  <button
-                    tabIndex={0}
-                    role="button"
-                    className="w-full"
-                    type="button"
-                  />
-                )}
+                <div
+                  tabIndex={0}
+                  role="button"
+                  className="btn btn-ghost w-full text-right px-0 justify-start"
+                >
+                  {currentOption ? currentOption.label : ''}
+                </div>
               </div>
               <ul
                 tabIndex={0}
diff --git a/plan.md b/plan.md
index 569c4ce..3371c0c 100644
--- a/plan.md
+++ b/plan.md
@@ -6,7 +6,7 @@ Features:
 2. nice to have are with italics
 3. optional are with normal font
 
-- [ ] **Welcome page**
+- [x] **Welcome page**
   - [x] **add navigation to add cards page**
   - [x] **add navigation to about page**
 - [ ] Utils
@@ -49,11 +49,11 @@ Features:
   - [x] **display page with bar / qr code**
   - [ ] implement switch note visibility
   - [x] _implement delete card dialog + remove card from local storage_
-  - [ ] _implement navigation to edit card page_
+  - [x] _implement navigation to edit card page_
   - [ ] implement increment of display count
-- [ ] _Edit card page_
-  - [ ] _implement edit form_
-  - [ ] _implement edit card submit (in local storage)_
+- [x] _Edit card page_
+  - [x] _implement edit form_
+  - [x] _implement edit card submit (in local storage)_
 - [x] **Settings page**
   - [x] **display dummy page**
   - [ ] implement pin favorites on top switch + functionality
@@ -75,6 +75,18 @@ Features:
 
 # bugs
 
+- [x] disable app zoom
+- [x] hide PWA top top bar
+- [ ] buy a domain?
+- [x] update author section - engage bug reporting + feature requests
+- [x] create card
+  - [x] fix color/icon selection on mobile
+  - [x] remove palette button for picking colors
+- [x] add cards page
+  - [x] remove grid button
+- [x] card detail page
+  - [x] implement toggle note functionality
+  - [x] change info bar design
 - [x] company icons are not available in offline mode
 - [ ] prefer cameras in environment direction
 - [x] move app state to the context