@pheem49/mint 1.17.0 → 1.18.0

package/src/renderer/shared/components/chat/TurnFileChanges.tsx

@@ -1,8 +1,12 @@
 import React, { memo, useMemo, useState } from 'react'
+import { ChevronRight, Files, RotateCcw } from 'lucide-react'
 import { EMPTY_AGENT_PROGRESS, parseFileChangesFromProgress } from '../../agentProgress'
 import { conversationPlatform } from '../../platform'
 import type { AgentProgress, FileChange, GitCheckpoint } from '../../types'
-import type { ArtifactFile } from '../../utils/artifacts'
+import { detectArtifactType, type ArtifactFile } from '../../utils/artifacts'
+import { setWorkspaceDragData, isImageFileName } from '../../utils/workspaceDrag'
+import { materialFileIcon, getExtension } from '../../utils/fileIcons'
+import { tokenizeLine } from '../../utils/syntaxHighlight'
 
 const { listGitCheckpoints } = conversationPlatform
 
@@ -44,10 +48,12 @@ export interface TurnFileChangesProps {
   interaction?: any
   isLive?: boolean
   defaultOpen?: boolean
+  workspacePath?: string
   onOpenArtifact?: (artifact: ArtifactFile) => void
   onOpenReview?: () => void
   onRewindRequest?: (payload: RewindRequestPayload) => void
   onRewindError?: (message: string) => void
+  onReferenceFile?: (filePath: string) => void
 }
 
 export const TurnFileChanges = memo(function TurnFileChanges({
@@ -55,17 +61,19 @@ export const TurnFileChanges = memo(function TurnFileChanges({
   changes: providedChanges,
   interaction,
   isLive = false,
-  defaultOpen = true,
+  defaultOpen = false,
+  workspacePath,
   onOpenArtifact,
   onOpenReview,
   onRewindRequest,
   onRewindError,
+  onReferenceFile,
 }: TurnFileChangesProps) {
   const changes = useMemo(
     () => providedChanges ?? parseFileChangesFromProgress(progress ?? EMPTY_AGENT_PROGRESS),
     [providedChanges, progress],
   )
-  const [isOpen] = useState(defaultOpen)
+  const [isOpen, setIsOpen] = useState(defaultOpen)
   const [showAll, setShowAll] = useState(false)
   const [openFileDiffs, setOpenFileDiffs] = useState<Record<string, boolean>>({})
 
@@ -85,7 +93,7 @@ export const TurnFileChanges = memo(function TurnFileChanges({
   if (createdCount > 0 && modifiedCount === 0) {
     summaryLabel = `${createdCount} ${createdCount === 1 ? 'file created' : 'files created'}`
   } else if (createdCount > 0 && modifiedCount > 0) {
-    summaryLabel = `${createdCount} created, ${modifiedCount} modified`
+    summaryLabel = `${changes.length} ${changes.length === 1 ? 'file changed' : 'files changed'}`
   } else {
     summaryLabel = `${changes.length} ${changes.length === 1 ? 'file changed' : 'files changed'}`
   }
@@ -139,39 +147,89 @@ export const TurnFileChanges = memo(function TurnFileChanges({
 
   const renderChangesList = () => (
     <div className="file-changes-list" style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+      {commonDir && (
+        <div className="file-changes-common-dir" title={commonDir}>
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+          </svg>
+          <span className="file-changes-common-dir-text">{commonDir}</span>
+        </div>
+      )}
+
       {visibleChanges.map((change) => {
         const isDiffOpen = Boolean(openFileDiffs[change.path])
-        const normalized = change.path.replace(/\\/g, '/')
-        let relativePath = normalized
-        if (commonDir && (normalized === commonDir || normalized.startsWith(commonDir + '/'))) {
-          relativePath = normalized.slice(commonDir.length + 1)
+        const fileName = change.path.split('/').pop() || change.path
+        let subDir = ''
+        let dirPath = ''
+
+        if (commonDir && change.path.startsWith(commonDir)) {
+          const remainder = change.path.slice(commonDir.length).replace(/^\//, '')
+          const parts = remainder.split('/')
+          if (parts.length > 1) {
+            subDir = parts.slice(0, parts.length - 1).join('/')
+          }
+        } else {
+          const slashIdx = change.path.lastIndexOf('/')
+          if (slashIdx !== -1) {
+            dirPath = change.path.substring(0, slashIdx)
+          }
         }
-        const fileName = relativePath.split('/').pop() || relativePath
-        const subDir = relativePath.includes('/') ? relativePath.substring(0, relativePath.lastIndexOf('/')) : ''
-        const dirPath = !commonDir && change.path.includes('/') ? change.path.substring(0, change.path.lastIndexOf('/')) : ''
 
         return (
-          <div key={change.path} className="file-changes-item">
+          <div
+            key={change.path}
+            className="file-changes-item"
+            draggable="true"
+            data-path={change.path}
+            onDragStart={(e) => {
+              setWorkspaceDragData(e.dataTransfer, {
+                path: change.path,
+                kind: 'file',
+              })
+            }}
+          >
             <div
               className="file-changes-item-header"
               onClick={() => setOpenFileDiffs((current) => ({ ...current, [change.path]: !current[change.path] }))}
             >
               <div style={{ display: 'flex', alignItems: 'center', gap: '8px', minWidth: 0 }}>
-                <svg
-                  width="14"
-                  height="14"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  style={{ color: 'var(--text-muted)', flexShrink: 0 }}
-                  aria-hidden="true"
-                >
-                  <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
-                  <polyline points="14 2 14 8 20 8" />
-                </svg>
+                {materialFileIcon(fileName, getExtension(fileName)) ? (
+                  <img
+                    src={materialFileIcon(fileName, getExtension(fileName))}
+                    alt=""
+                    width="14"
+                    height="14"
+                    style={{ width: 14, height: 14, flexShrink: 0, objectFit: 'contain' }}
+                    aria-hidden="true"
+                    draggable={false}
+                  />
+                ) : (
+                  <svg
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    style={{ color: 'var(--text-muted)', flexShrink: 0 }}
+                    aria-hidden="true"
+                  >
+                    <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
+                    <polyline points="14 2 14 8 20 8" />
+                  </svg>
+                )}
                 <span className={`file-changes-filename ${change.created ? 'is-new' : ''}`}>
                   <span className="file-changes-name">{fileName}</span>
                   {subDir && <span className="file-changes-subdir">{subDir}/</span>}
@@ -190,19 +248,40 @@ export const TurnFileChanges = memo(function TurnFileChanges({
                     {change.deletions > 0 && <span className="file-changes-count-del">-{change.deletions}</span>}
                   </>
                 )}
+                {onReferenceFile && (
+                  <button
+                    type="button"
+                    className="file-changes-mention-btn"
+                    title={`Reference ${change.path} in chat composer`}
+                    aria-label={`Reference ${fileName} in chat composer`}
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      onReferenceFile(change.path)
+                    }}
+                  >
+                    @ Reference in chat
+                  </button>
+                )}
                 {onOpenArtifact && (
                   <button
                     type="button"
                     className="file-changes-preview-btn"
+                    title={`Preview ${fileName}`}
                     onClick={(e) => {
                       e.stopPropagation()
-                      const fallbackContent =
-                        change.created && change.hunks.length > 0
-                          ? change.hunks.map((h) => h.newText).filter(Boolean).join('\n')
-                          : undefined
-                      onOpenArtifact({ path: change.path, content: fallbackContent })
+                      const isAbsolute = /^(\/|[a-zA-Z]:[/\\])/.test(change.path)
+                      const resolvedPath = isAbsolute
+                        ? change.path
+                        : workspacePath
+                        ? `${workspacePath.replace(/[/\\]+$/, '')}/${change.path.replace(/^[/\\]+/, '')}`
+                        : change.path
+
+                      onOpenArtifact({
+                        path: resolvedPath,
+                        workspacePath: workspacePath || undefined,
+                        type: detectArtifactType(resolvedPath),
+                      })
                     }}
-                    title="Open Live Preview Split View"
                   >
                     Preview
                   </button>
@@ -231,34 +310,61 @@ export const TurnFileChanges = memo(function TurnFileChanges({
 
             {isDiffOpen && (
               <div className="file-changes-diff-box">
-                {change.hunks.map((hunk, hIdx) => (
-                  <div
-                    key={hIdx}
-                    className="file-changes-diff-hunk"
-                    style={{ marginBottom: hIdx < change.hunks.length - 1 ? '10px' : 0 }}
-                  >
-                    {hunk.oldText && (
-                      <div className="file-changes-diff-del">
-                        {hunk.oldText.split('\n').map((line, lIdx) => (
-                          <div key={lIdx} style={{ display: 'flex' }}>
-                            <span className="file-changes-diff-sign-del">-</span>
-                            <span>{line}</span>
-                          </div>
-                        ))}
-                      </div>
-                    )}
-                    {hunk.newText && (
-                      <div className="file-changes-diff-add">
-                        {hunk.newText.split('\n').map((line, lIdx) => (
-                          <div key={lIdx} style={{ display: 'flex' }}>
-                            <span className="file-changes-diff-sign-add">+</span>
-                            <span>{line}</span>
-                          </div>
-                        ))}
-                      </div>
-                    )}
-                  </div>
-                ))}
+                {change.hunks.map((hunk, hIdx) => {
+                  const fileExt = getExtension(change.path)
+                  return (
+                    <div
+                      key={hIdx}
+                      className="file-changes-diff-hunk"
+                      style={{ marginBottom: hIdx < change.hunks.length - 1 ? '10px' : 0 }}
+                    >
+                      {hunk.oldText && (
+                        <div className="file-changes-diff-del-block">
+                          {hunk.oldText.split('\n').map((line, lIdx) => {
+                            const tokens = tokenizeLine(line, fileExt)
+                            return (
+                              <div key={lIdx} className="file-changes-diff-line file-changes-diff-line-del">
+                                <span className="file-changes-diff-line-content">
+                                  {tokens.length === 0 ? (
+                                    '\u00A0'
+                                  ) : (
+                                    tokens.map((tok, tIdx) => (
+                                      <span key={tIdx} className={tok.type}>
+                                        {tok.text}
+                                      </span>
+                                    ))
+                                  )}
+                                </span>
+                              </div>
+                            )
+                          })}
+                        </div>
+                      )}
+                      {hunk.newText && (
+                        <div className="file-changes-diff-add-block">
+                          {hunk.newText.split('\n').map((line, lIdx) => {
+                            const tokens = tokenizeLine(line, fileExt)
+                            return (
+                              <div key={lIdx} className="file-changes-diff-line file-changes-diff-line-add">
+                                <span className="file-changes-diff-line-content">
+                                  {tokens.length === 0 ? (
+                                    '\u00A0'
+                                  ) : (
+                                    tokens.map((tok, tIdx) => (
+                                      <span key={tIdx} className={tok.type}>
+                                        {tok.text}
+                                      </span>
+                                    ))
+                                  )}
+                                </span>
+                              </div>
+                            )
+                          })}
+                        </div>
+                      )}
+                    </div>
+                  )
+                })}
               </div>
             )}
           </div>
@@ -290,102 +396,37 @@ export const TurnFileChanges = memo(function TurnFileChanges({
     </div>
   )
 
-  if (isLive) {
-    return (
-      <div className="message ai-message agent-activity-message" style={{ marginTop: '4px', marginBottom: '8px' }}>
-        <div className="agent-activity-card file-changes-card">
-          <div className="file-changes-summary-row">
-            <div className="file-changes-summary">
-              <span className="file-changes-summary-icon" aria-hidden="true">
-                ✓
-              </span>
-              <span className="file-changes-summary-copy">
-                <div className="file-changes-summary-heading">
-                  <span className="file-changes-summary-label">{summaryLabel}</span>
-                  <span className="file-changes-summary-counts">
-                    {totalAdditions > 0 && <span className="file-changes-count-add">+{totalAdditions}</span>}
-                    {totalDeletions > 0 && <span className="file-changes-count-del">-{totalDeletions}</span>}
-                  </span>
-                </div>
-                {commonDir && (
-                  <span className="file-changes-common-dir" title={commonDir}>
-                    <svg
-                      width="12"
-                      height="12"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      aria-hidden="true"
-                    >
-                      <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
-                    </svg>
-                    <span className="file-changes-common-dir-text">{commonDir}</span>
-                  </span>
-                )}
-              </span>
-            </div>
-            {onOpenReview && (
-              <button
-                type="button"
-                className="file-changes-review-btn"
-                title="Review changed code"
-                onClick={onOpenReview}
-              >
-                Review
-              </button>
-            )}
-          </div>
-
-          {isOpen && (
-            <div className="file-changes-list-container" style={{ marginTop: '8px' }}>
-              {renderChangesList()}
-            </div>
-          )}
-        </div>
-      </div>
-    )
-  }
-
   return (
-    <div className="file-changes-summary-container">
+    <div className={`file-changes-summary-container ${isLive ? 'is-live' : ''}`}>
       <div className="agent-activity-card file-changes-card">
-        <div className="file-changes-summary-row">
-          <div className="file-changes-summary">
-            <span className="file-changes-summary-icon" aria-hidden="true">
-              ⊞
-            </span>
-            <span className="file-changes-summary-copy">
-              <div className="file-changes-summary-heading">
-                <span className="file-changes-summary-label">{summaryLabel}</span>
-                <span className="file-changes-summary-counts">
-                  {totalAdditions > 0 && <span className="file-changes-count-add">+{totalAdditions}</span>}
-                  {totalDeletions > 0 && <span className="file-changes-count-del">-{totalDeletions}</span>}
-                </span>
-              </div>
-              {commonDir && (
-                <span className="file-changes-common-dir" title={commonDir}>
-                  <svg
-                    width="12"
-                    height="12"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    aria-hidden="true"
-                  >
-                    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
-                  </svg>
-                  <span className="file-changes-common-dir-text">{commonDir}</span>
-                </span>
-              )}
+        <div
+          className={`file-changes-summary-row ${isOpen ? 'is-open' : ''}`}
+          onClick={() => setIsOpen((prev) => !prev)}
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault()
+              setIsOpen((prev) => !prev)
+            }
+          }}
+        >
+          <div className="file-changes-summary-toggle">
+            <span className="file-changes-summary-label">{summaryLabel}</span>
+            <span className="file-changes-summary-counts">
+              {totalAdditions > 0 && <span className="file-changes-count-add">+{totalAdditions}</span>}
+              {totalDeletions > 0 && <span className="file-changes-count-del">-{totalDeletions}</span>}
             </span>
+            <ChevronRight
+              size={13}
+              className={`file-changes-chevron ${isOpen ? 'is-open' : ''}`}
+              aria-hidden="true"
+            />
           </div>
-          <div className="file-changes-summary-actions">
+          <div
+            className="file-changes-summary-actions"
+            onClick={(e) => e.stopPropagation()}
+          >
             {onRewindRequest && (
               <button
                 type="button"
@@ -393,20 +434,8 @@ export const TurnFileChanges = memo(function TurnFileChanges({
                 onClick={handleRewind}
                 title="Rewind workspace to before these file edits (Git Checkpoint)"
               >
-                <svg
-                  width="12"
-                  height="12"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                >
-                  <polyline points="1 4 7 4 7 10" />
-                  <path d="M3 9a9 9 0 1 0 2.13-5.36L1 7" />
-                </svg>
-                Undo
+                <RotateCcw size={12} aria-hidden="true" />
+                <span>Undo</span>
               </button>
             )}
             {onOpenReview && (
@@ -414,9 +443,13 @@ export const TurnFileChanges = memo(function TurnFileChanges({
                 type="button"
                 className="file-changes-review-btn"
                 title="Review changed code"
-                onClick={onOpenReview}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onOpenReview()
+                }}
               >
-                Review
+                <Files size={13} aria-hidden="true" />
+                <span>Review</span>
               </button>
             )}
           </div>

package/src/renderer/shared/components/extensions/CliSessionsView.tsx

@@ -358,7 +358,10 @@ export const CliSessionsView: React.FC<CliSessionsViewProps> = React.memo(functi
                       {shortId}
                     </span>
                     {isActive && (
-                      <span className="code-active-badge">active</span>
+                      <span className="code-active-badge">
+                        <span className="code-active-dot" aria-hidden="true" />
+                        <span>active</span>
+                      </span>
                     )}
                   </div>
 
@@ -443,9 +446,7 @@ export const CliSessionsView: React.FC<CliSessionsViewProps> = React.memo(functi
                         {session.title || 'Untitled Session'}
                       </div>
                       <div className="code-session-snippet">
-                        <span style={{ color: 'var(--interactive-fg)', opacity: 0.8, marginRight: '4px' }}>
-                          &gt;
-                        </span>
+                        <span className="code-session-prompt-symbol">&gt;</span>
                         <span>{session.title || 'Interactive shell'}</span>
                       </div>
                     </>

package/src/renderer/shared/components/extensions/McpRegistryPicker.tsx

@@ -101,13 +101,13 @@ export const McpRegistryPicker: React.FC<McpRegistryPickerProps> = ({
           </svg>
         </div>
 
-        {/* View mode switcher: Grid (แนวนอน) vs List (แนวตั้ง) */}
+        {/* View mode switcher: Grid vs List */}
         <div className="management-filter-pills" style={{ display: 'inline-flex', gap: 2, padding: 3, flexShrink: 0 }}>
           <button
             type="button"
             className={`management-pill-btn ${viewMode === 'grid' ? 'active' : ''}`}
             onClick={() => handleSetViewMode('grid')}
-            title="Grid view (แนวนอน)"
+            title="Grid view"
             style={{ padding: '6px 10px', display: 'inline-flex', alignItems: 'center', gap: 6 }}
           >
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
@@ -122,7 +122,7 @@ export const McpRegistryPicker: React.FC<McpRegistryPickerProps> = ({
             type="button"
             className={`management-pill-btn ${viewMode === 'list' ? 'active' : ''}`}
             onClick={() => handleSetViewMode('list')}
-            title="List view (แนวตั้ง)"
+            title="List view"
             style={{ padding: '6px 10px', display: 'inline-flex', alignItems: 'center', gap: 6 }}
           >
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">

package/src/renderer/shared/components/studio/LibraryPage.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from 'react'
-import { Library, RefreshCw, Search, Trash2, X } from 'lucide-react'
+import { Grid2X2, Grid3X3, Library, RefreshCw, Search, Trash2, X } from 'lucide-react'
 import { libraryPlatform } from '../../platform'
 import { createLibraryController } from '../../library/controller'
 import { downloadLibraryFile } from '../../library/useLibraryFile'
@@ -22,12 +22,25 @@ export default function LibraryPage({ chatId, onClose, onOpenConversation }: {
   const [debounced, setDebounced] = useState('')
   const [scope, setScope] = useState('all')
   const [trashed, setTrashed] = useState(() => new URLSearchParams(location.search).get('trash') === '1')
+  const [gridSize, setGridSize] = useState<'normal' | 'large'>(() => {
+    try {
+      const saved = localStorage.getItem('mint:library:grid-size')
+      if (saved === 'normal' || saved === 'large') return saved
+    } catch { /* ignore */ }
+    return 'normal'
+  })
   const [linkedItem, setLinkedItem] = useState<LibraryItem | null>(null)
   const [preview, setPreview] = useState<LibraryItem | null>(null)
   const [downloadError, setDownloadError] = useState('')
   const [downloading, setDownloading] = useState('')
   const [navigation, setNavigation] = useState(0)
   const closePreview = useCallback(() => setPreview(null), [])
+  const updateGridSize = useCallback((size: 'normal' | 'large') => {
+    setGridSize(size)
+    try {
+      localStorage.setItem('mint:library:grid-size', size)
+    } catch { /* ignore */ }
+  }, [])
 
   useEffect(() => {
     const onNavigate = () => setNavigation(value => value + 1)
@@ -119,9 +132,39 @@ export default function LibraryPage({ chatId, onClose, onOpenConversation }: {
               <button key={value} type="button" data-filter={value || 'all'} aria-pressed={kind === value} onClick={() => setKind(value)}>{label}</button>
             ))}
           </div>
-          <button type="button" className="library-trash-toggle" data-view={trashed ? 'active' : 'trash'} aria-pressed={trashed} onClick={() => setTrashed(value => !value)}>
-            {trashed ? <Library size={15} /> : <Trash2 size={15} />} {trashed ? 'Back to library' : 'Trash'}
-          </button>
+          <div className="library-toolbar-actions">
+            {(kind === 'image' || kind === 'video') && (
+              <div className="library-grid-sizes" role="group" aria-label="Grid size">
+                <button
+                  type="button"
+                  className="library-size-toggle"
+                  data-grid-size="normal"
+                  aria-pressed={gridSize === 'normal'}
+                  title="Normal grid (3-4 columns)"
+                  aria-label="Normal grid"
+                  onClick={() => updateGridSize('normal')}
+                >
+                  <Grid3X3 size={15} />
+                  <span>Normal</span>
+                </button>
+                <button
+                  type="button"
+                  className="library-size-toggle"
+                  data-grid-size="large"
+                  aria-pressed={gridSize === 'large'}
+                  title="Large grid (2-3 columns)"
+                  aria-label="Large grid"
+                  onClick={() => updateGridSize('large')}
+                >
+                  <Grid2X2 size={15} />
+                  <span>Large</span>
+                </button>
+              </div>
+            )}
+            <button type="button" className="library-trash-toggle" data-view={trashed ? 'active' : 'trash'} aria-pressed={trashed} onClick={() => setTrashed(value => !value)}>
+              {trashed ? <Library size={15} /> : <Trash2 size={15} />} {trashed ? 'Back to library' : 'Trash'}
+            </button>
+          </div>
         </div>
         <div className="library-search-row">
           <label className="library-search">
@@ -146,7 +189,7 @@ export default function LibraryPage({ chatId, onClose, onOpenConversation }: {
             <p>{trashed ? 'Files you move to Trash can be restored here.' : 'Send an image, video, or file in a conversation to keep it here.'}</p>
           </div>
         ) : null}
-        <div className={`library-items ${kind === 'image' || kind === 'video' ? 'is-grid' : ''}`}>
+        <div className={`library-items ${kind === 'image' || kind === 'video' ? `is-grid is-grid-${gridSize}` : ''}`}>
           {visibleItems.map(item => (
             <LibraryItemCard key={item.id} item={item} linked={linkedItem?.id === item.id} trashed={trashed}
               actionPending={!!state.actionId} downloadPending={!!downloading}