Skip to content

fix: restore the ThinkContent component to its previous markup and styling so the timer text behaves as before #987

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zerob13 merged 1 commit into from
Oct 13, 2025
Merged

fix: restore the ThinkContent component to its previous markup and styling so the timer text behaves as before #987

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 23 additions & 18 deletions src/renderer/src/components/ThreadView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,31 @@
enter-from-class="opacity-0"
leave-to-class="opacity-0"
>
<div v-if="chatStore.isSidebarOpen" class="fixed inset-0 z-50" :dir="langStore.dir">
<div class="absolute inset-0 bg-transparent" @click="closeSidebar"></div>
<div
class="relative h-full flex"
:class="langStore.dir === 'rtl' ? 'justify-end' : 'justify-start'"
<div
v-if="chatStore.isSidebarOpen"
class="fixed inset-0 z-50 flex"
:class="langStore.dir === 'rtl' ? 'justify-end' : 'justify-start'"
:dir="langStore.dir"
@click.self="closeSidebar"
>
Comment on lines +9 to +15
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Oct 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Missing backdrop overlay styling.

The outer container acts as a clickable backdrop but has no visual styling (e.g., semi-transparent background). Users won't see a clear overlay indicating the sidebar is modal.

Apply this diff to add a semi-transparent backdrop:

       <div
         v-if="chatStore.isSidebarOpen"
-        class="fixed inset-0 z-50 flex"
+        class="fixed inset-0 z-50 flex bg-black/50"
         :class="langStore.dir === 'rtl' ? 'justify-end' : 'justify-start'"
         :dir="langStore.dir"
         @click.self="closeSidebar"
       >
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div
v-if="chatStore.isSidebarOpen"
class="fixed inset-0 z-50 flex"
:class="langStore.dir === 'rtl' ? 'justify-end' : 'justify-start'"
:dir="langStore.dir"
@click.self="closeSidebar"
>
<div
v-if="chatStore.isSidebarOpen"
class="fixed inset-0 z-50 flex bg-black/50"
:class="langStore.dir === 'rtl' ? 'justify-end' : 'justify-start'"
:dir="langStore.dir"
@click.self="closeSidebar"
>
🤖 Prompt for AI Agents 
In src/renderer/src/components/ThreadView.vue around lines 9 to 15, the outer
div acting as the clickable backdrop has no visual overlay; update the element
to include a semi-transparent backdrop by adding a background utility (e.g.,
Tailwind: "bg-black/50" or for older Tailwind "bg-black bg-opacity-50") and
optionally a subtle backdrop blur ("backdrop-blur-sm") so users see a modal
overlay; keep the existing :class, :dir and @click.self behavior unchanged.

<Transition
enter-active-class="transition-transform duration-200 ease-out"
leave-active-class="transition-transform duration-150 ease-in"
:enter-from-class="langStore.dir === 'rtl' ? 'translate-x-full' : '-translate-x-full'"
:leave-to-class="langStore.dir === 'rtl' ? 'translate-x-full' : '-translate-x-full'"
>
<Transition
enter-active-class="transition-transform duration-200 ease-out"
leave-active-class="transition-transform duration-150 ease-in"
:enter-from-class="langStore.dir === 'rtl' ? 'translate-x-full' : '-translate-x-full'"
:leave-to-class="langStore.dir === 'rtl' ? 'translate-x-full' : '-translate-x-full'"
<div
v-if="chatStore.isSidebarOpen"
Comment on lines +22 to +23
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Oct 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Redundant v-if may break the inner Transition animation.

The inner div has v-if="chatStore.isSidebarOpen" on Line 23, but the outer container already has the same condition on Line 10. This redundancy can interfere with the inner Transition's animation because the child element should always be present for the Transition to work correctly—the Transition itself should control the visibility.

Apply this diff to remove the redundant v-if:

         <Transition
           enter-active-class="transition-transform duration-200 ease-out"
           leave-active-class="transition-transform duration-150 ease-in"
           :enter-from-class="langStore.dir === 'rtl' ? 'translate-x-full' : '-translate-x-full'"
           :leave-to-class="langStore.dir === 'rtl' ? 'translate-x-full' : '-translate-x-full'"
         >
           <div
-            v-if="chatStore.isSidebarOpen"
             :class="[
               'h-full w-60 max-w-60 shadow-lg bg-card',
               langStore.dir === 'rtl' ? 'border-l' : 'border-r',
               'border-border'
             ]"
             @click.stop
           >
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div
v-if="chatStore.isSidebarOpen"
<Transition
enter-active-class="transition-transform duration-200 ease-out"
leave-active-class="transition-transform duration-150 ease-in"
:enter-from-class="langStore.dir === 'rtl' ? 'translate-x-full' : '-translate-x-full'"
:leave-to-class="langStore.dir === 'rtl' ? 'translate-x-full' : '-translate-x-full'"
>
<div
:class="[
'h-full w-60 max-w-60 shadow-lg bg-card',
langStore.dir === 'rtl' ? 'border-l' : 'border-r',
'border-border'
]"
@click.stop
>
🤖 Prompt for AI Agents 
In src/renderer/src/components/ThreadView.vue around lines 22–23, remove the
redundant v-if="chatStore.isSidebarOpen" on the inner div (the outer container
already guards visibility) so the element stays mounted for the inner
<Transition> to control animations; simply delete the v-if from the inner div so
only the outer condition determines presence and the Transition manages
showing/hiding.

:class="[
'h-full w-60 max-w-60 shadow-lg bg-card',
langStore.dir === 'rtl' ? 'border-l' : 'border-r',
'border-border'
]"
@click.stop
>
<div
v-if="chatStore.isSidebarOpen"
class="h-full w-60 max-w-60 shadow-lg border-r border-border bg-card"
>
<ThreadsView class="h-full" />
</div>
</Transition>
</div>
<ThreadsView class="h-full" />
</div>
</Transition>
</div>
Comment on lines +9 to 34
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Oct 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Missing accessibility attributes for modal-like sidebar.

The sidebar overlay is missing essential accessibility features:

  • No ARIA role (should be role="complementary" or role="dialog")
  • No aria-modal="true" to indicate modal behavior
  • No aria-label or aria-labelledby to describe the sidebar
  • No focus trap to prevent tabbing outside the sidebar
  • No focus management when opening/closing

These omissions make the sidebar difficult to use with screen readers and keyboard navigation.

As per coding guidelines on accessibility best practices.

🤖 Prompt for AI Agents 
In src/renderer/src/components/ThreadView.vue around lines 9 to 34, the sidebar
overlay and panel lack accessibility attributes and focus management; add an
appropriate ARIA role (e.g., role="dialog" or role="complementary"),
aria-modal="true", and either aria-label or aria-labelledby on the panel
container, implement focus management to move focus into the sidebar when it
opens (focus the panel or its first focusable element) and restore focus to the
previously focused element on close, and add a keyboard handler (Escape) to
close the sidebar; also implement a simple focus trap so Tab/Shift+Tab cycles
inside the sidebar while open and ensure @click.self still closes the overlay.

</Transition>
</Teleport>
Expand Down