From 8369230b7c7b52461eea02ddb144bcfb58e706ab Mon Sep 17 00:00:00 2001
From: Joshua Shoemaker <joshuashoemaker@outlook.com>
Date: Thu, 5 Jan 2023 23:46:29 -0600
Subject: [PATCH] style: details arrow only for docs with areas

---
 .../textualize.app/Contents/MacOS/Textualize  | Bin 13680690 -> 13680690 bytes
 frontend/components/workspace/Sidebar.tsx     | 114 +++++++++++-------
 2 files changed, 68 insertions(+), 46 deletions(-)

diff --git a/build/bin/textualize.app/Contents/MacOS/Textualize b/build/bin/textualize.app/Contents/MacOS/Textualize
index 34868ebf5c4dd23cb50b7c75518c5f1f7fea6511..811da37c3090428665b9897ee8038a3ccc9df5a5 100755
GIT binary patch
delta 12452
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
H@e}_8IuJV6

delta 12459
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
Ov~Oh9rNsJ#ss95q$3R*D

diff --git a/frontend/components/workspace/Sidebar.tsx b/frontend/components/workspace/Sidebar.tsx
index 8cf480a..18db39f 100644
--- a/frontend/components/workspace/Sidebar.tsx
+++ b/frontend/components/workspace/Sidebar.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import React, { useRef, useState } from 'react'
-import { PlusIcon, XMarkIcon } from '@heroicons/react/20/solid'
+import { PlusIcon, XMarkIcon, DocumentPlusIcon } from '@heroicons/react/20/solid'
 import { ipc } from '../../wailsjs/wailsjs/go/models'
 import { useProject } from '../../context/Project/provider'
 
@@ -115,7 +115,6 @@ function Sidebar() {
     getDocumentIdFromAreaId(areaId)
     setSelectedDocumentId(getDocumentIdFromAreaId(areaId) || '')
     setSelectedAreaId(areaId)
-    console.log('single click')
   }
 
   const onAreaDoubleclick = (areaId: string) => {
@@ -271,12 +270,12 @@ function Sidebar() {
         role='button'
         className={classNames(
           'text-gray-300 hover:bg-gray-700 hover:text-white',
-          ' group w-full flex items-center pr-2 py-2 text-left font-medium',
-          'text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 p-2'
+          ' group w-full flex items-center pl-5 py-2 text-left font-medium',
+          'text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500'
         )}
         onClick={() => onAddNewDocumentLineItemClickHandler(groupId)}
       >
-        <PlusIcon className="h-3 w-4" aria-hidden="true" />
+        <DocumentPlusIcon className="h-3.5 mr-1" aria-hidden="true" />
         Add Document
       </a>
   }
@@ -299,17 +298,15 @@ function Sidebar() {
           <ul>
             {group.documents.map((d, index) => (
               <li className='p-0 m-0' key={d.id}>
-                <details>
-                  <summary
+                {!d.areas.length
+                  ? <div
                     onClick={() => onDocumentClickHandler(d.id)}
                     className={classNames(
                       d.id === selectedDocumentId
                         ? 'bg-gray-900 text-white'
                         : 'text-gray-300 hover:bg-gray-700 hover:text-white',
-                      'group items-center py-2 text-base font-medium rounded-b-md pl-6',
-                      index !== 0
-                        ? 'rounded-t-md'
-                        : ''
+                      'group items-center py-2 text-base font-medium rounded-b-md pl-10',
+                      index !== 0 ? 'rounded-t-md' : '',
                     )}>
                     <a
                       role='button'
@@ -322,41 +319,66 @@ function Sidebar() {
                     >
                       {d.name}
                     </a>
-                  </summary>
-                  <ul>
-                    {d.areas.map((a, index) => (
-                      <li key={a.id}>
-                        {selectedAreaId === a.id && isEditAreaNameInputShowing
-                          ? <input
-                            type="text"
-                            name="areaName"
-                            id="areaName"
-                            autoFocus
-                            className="h-8 text-white placeholder-gray-400 bg-gray-900 bg-opacity-5 block w-full rounded-none rounded-l-md border-late-700 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
-                            placeholder={a.name || `Area ${index + 1}`}
-                            onBlur={onAreaInputBlur}
-                            onKeyDown={(event) => {
-                              onEnterHandler(event,
-                                () => onConfirmAreaNameChangeHandler({ areaId: a.id, areaName: event.currentTarget.value }))
-                            }}
-                            ref={editAreaNameTextInput}
-                          />
-                          : <a
-                            role='button'
-                            onClick={() => onAreaClick(a.id)}
-                            onDoubleClick={() => onAreaDoubleclick(a.id)}
-                            className={classNames('text-gray-300 hover:bg-gray-700 hover:text-white',
-                              'group w-full flex items-center pr-2 py-2 text-left font-medium pl-8 text-xs',
-                              'rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 py-2 select-none'
-                            )}
-                          >
-                            {a.name || `Area ${index + 1}`}
-                          </a>
-                        }
-                      </li>
-                    ))}
-                  </ul>
-                </details>
+                  </div>
+                  : <details>
+                    <summary
+                      onClick={() => onDocumentClickHandler(d.id)}
+                      className={classNames(
+                        d.id === selectedDocumentId
+                          ? 'bg-gray-900 text-white'
+                          : 'text-gray-300 hover:bg-gray-700 hover:text-white',
+                        'group items-center py-2 text-base font-medium rounded-b-md pl-6',
+                        index !== 0 ? 'rounded-t-md' : '',
+
+                      )}>
+                      <a
+                        role='button'
+                        className={classNames(
+                          d.id === selectedDocumentId
+                            ? 'bg-gray-900 text-white'
+                            : 'text-gray-300 hover:bg-gray-700 hover:text-white',
+                          'text-left font-medium text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 '
+                        )}
+                      >
+                        {d.name}
+                      </a>
+                    </summary>
+                    <ul>
+                      {d.areas.map((a, index) => (
+                        <li key={a.id}>
+                          {selectedAreaId === a.id && isEditAreaNameInputShowing
+                            ? <input
+                              type="text"
+                              name="areaName"
+                              id="areaName"
+                              autoFocus
+                              className="h-8 text-white placeholder-gray-400 bg-gray-900 bg-opacity-5 block w-full rounded-none rounded-l-md border-late-700 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                              placeholder={a.name || `Area ${index + 1}`}
+                              onBlur={onAreaInputBlur}
+                              onKeyDown={(event) => {
+                                onEnterHandler(event,
+                                  () => onConfirmAreaNameChangeHandler({ areaId: a.id, areaName: event.currentTarget.value }))
+                              }}
+                              ref={editAreaNameTextInput}
+                            />
+                            : <a
+                              role='button'
+                              onClick={() => onAreaClick(a.id)}
+                              onDoubleClick={() => onAreaDoubleclick(a.id)}
+                              className={classNames('text-gray-300 hover:bg-gray-700 hover:text-white',
+                                'group w-full flex items-center pr-2 py-2 text-left font-medium pl-8 text-xs',
+                                'rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 py-2 select-none',
+                                selectedAreaId === a.id ? 'underline' : ''
+                              )}
+                            >
+                              {a.name || `Area ${index + 1}`}
+                            </a>
+                          }
+                        </li>
+                      ))}
+                    </ul>
+                  </details>
+                }
               </li>
             ))}