grid view

frontend/src/styles.css

@@ -200,6 +200,47 @@ button.icon-button.ghost:hover:not([disabled]) {
   fill: currentColor;
 }
 
+.view-toggle {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--surface-subtle);
+  margin-right: 0.5rem;
+  overflow: hidden;
+}
+
+.view-toggle__button {
+  width: 2.5rem;
+  height: 2.2rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+  padding: 0;
+}
+
+.view-toggle__button:hover,
+.view-toggle__button:focus-visible {
+  background: transparent;
+  color: var(--fg);
+  outline: none;
+}
+
+.view-toggle__button.active {
+  background: var(--accent-soft, rgba(63, 106, 216, 0.16));
+  color: var(--accent);
+}
+
+.view-toggle__icon {
+  width: 1.4rem;
+  height: 1.4rem;
+}
+
 .app-shell {
   height: 100%;
   display: flex;
@@ -1132,6 +1173,10 @@ button.icon-button.ghost:hover:not([disabled]) {
   text-align: left;
 }
 
+.documents-panel--view-grid .documents-scroll {
+  padding: 0.35rem 0.5rem 1rem;
+}
+
 .documents-panel th.thumb-column,
 .documents-panel td.thumb-cell {
   width: 54px;
@@ -1141,19 +1186,31 @@ button.icon-button.ghost:hover:not([disabled]) {
 .document-thumbnail-wrapper {
   width: 48px;
   height: 48px;
-  background: transparent;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 
+.documents-panel--view-grid .document-thumbnail-wrapper {
+  width: 128px;
+  height: 128px;
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
 .document-thumbnail {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
-  background: var(--surface-subtle);
-  border-radius: 1px;
-  box-shadow: 0 1px 3px var(--shadow-medium);
+}
+
+.documents-panel--view-grid .document-thumbnail {
+  box-shadow: 0 1px 12px var(--shadow-medium);
+  background: transparent;
 }
 
 .thumb-placeholder {
@@ -1171,6 +1228,14 @@ button.icon-button.ghost:hover:not([disabled]) {
   box-shadow: 0 1px 3px var(--shadow-medium);
 }
 
+.documents-panel--view-grid .thumb-placeholder {
+  font-size: 1.1rem;
+  letter-spacing: 0.12em;
+  display: inline-flex;
+  width: 100%;
+  height: 100%;
+}
+
 .thumb-icon {
   width: 100%;
   height: 100%;
@@ -1241,6 +1306,107 @@ button.icon-button.ghost:hover:not([disabled]) {
   gap: 0.25rem;
 }
 
+.documents-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
+  gap: 0.2rem 1.3rem;
+  padding: 0;
+}
+
+.document-card {
+  padding: 0rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  cursor: pointer;
+  align-items: center;
+  text-align: center;
+}
+
+.document-card.selected .document-thumbnail-wrapper {
+  background-color: var(--accent-soft);
+}
+
+.document-card:hover .document-thumbnail-wrapper,
+.document-card:focus-visible .document-thumbnail-wrapper {
+  background-color: var(--selection-ring);
+}
+
+.document-card.is-dragging {
+  opacity: 0.55;
+}
+
+.document-card__meta {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.35rem;
+  width: 100%;
+}
+
+.document-card__title {
+  color: var(--fg);
+  padding: 0.2rem 0.7rem;
+  border-radius: 1rem;
+}
+
+.document-card.selected .document-card__title {
+  background-color: var(--accent);
+  color: var(--on-accent);
+}
+
+.document-card__subtitle {
+  font-size: 0.78rem;
+  color: var(--muted);
+}
+
+.document-card__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.folder-card {
+  align-items: center;
+  text-align: center;
+}
+
+.folder-card__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  aspect-ratio: 1;
+  color: var(--accent);
+}
+
+.folder-card__meta {
+  display: flex;
+  flex-direction: column;
+  gap: 0.28rem;
+  padding-top: 0.35rem;
+}
+
+.folder-card__name {
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: var(--fg);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.folder-card__badge {
+  display: inline-flex;
+  align-self: center;
+  padding: 0.12rem 0.45rem;
+  font-size: 0.72rem;
+  border-radius: 999px;
+  background: var(--surface-soft);
+  color: var(--muted);
+  border: 1px solid var(--border);
+}
+
 .doc-name__title {
   font-weight: 600;
 }
@@ -1260,6 +1426,15 @@ button.icon-button.ghost:hover:not([disabled]) {
   box-shadow: inset 0 0 0 2px var(--accent);
 }
 
+.document-card.tag-drop-target {
+  box-shadow: 0 0 0 2px var(--accent);
+  border-color: var(--accent);
+}
+
+.document-card.tag-drop-target .document-card__title {
+  color: var(--accent);
+}
+
 .filter-bar {
   display: flex;
   flex-wrap: wrap;
@@ -1297,6 +1472,14 @@ button.icon-button.ghost:hover:not([disabled]) {
 
 .tag-chip {
   gap: 0.25rem;
+  border-radius: 1rem;
+  padding: 0.2rem 0.4rem;
+}
+
+.tag-chip--more {
+  background: transparent;
+  border-color: var(--border-strong, rgba(15, 23, 42, 0.24));
+  color: var(--muted);
 }
 
 .empty-state {
@@ -1309,6 +1492,10 @@ button.icon-button.ghost:hover:not([disabled]) {
   background: var(--surface-subtle);
 }
 
+.empty-state--global {
+  border-style: solid;
+}
+
 .detail-panel {
   position: relative;
   padding: 1.25rem;