feat: kanban view

2026-08-28 17:27:06 +08:00 · 2026-06-14 00:46:54 +01:00
parent 572452c80b
commit 5ec4f19839
55 changed files with 2820 additions and 373 deletions
@@ -0,0 +1,159 @@
+.standalone {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.bandWrap {
+  flex-shrink: 0;
+}
+
+.board {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  gap: 12px;
+  height: 100%;
+  min-height: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 8px var(--embed-grid-pad-right, 12px) 8px var(--embed-grid-pad-left, 12px);
+  margin-left: calc(-1 * var(--embed-extend-l, 0px));
+  margin-right: calc(-1 * var(--embed-extend-r, 0px));
+  overflow-anchor: none;
+}
+
+.boardEmbed {
+  max-height: min(80vh, calc(100vh - var(--sticky-band-top, 0px)));
+}
+
+.boardFullPage {
+  flex: 1;
+  min-height: 0;
+}
+
+.column {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  width: 280px;
+  min-height: 0;
+  background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
+  border-radius: 10px;
+}
+
+.columnHeader {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 10px 6px;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+
+.columnHeaderDragging {
+  opacity: 0.4;
+}
+
+.columnDragHandle {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-left: -4px;
+  color: var(--mantine-color-dimmed);
+  cursor: grab;
+  opacity: 0;
+}
+
+.columnHeader:hover .columnDragHandle {
+  opacity: 0.45;
+}
+
+.columnDragHandle:active {
+  cursor: grabbing;
+}
+
+.cardList {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 8px;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-anchor: none;
+  padding: 4px 8px 8px;
+}
+
+.card {
+  position: relative;
+  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
+  border: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
+  border-radius: 8px;
+  box-shadow: 0 1px 2px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.25));
+  padding: 12px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.cardDragging {
+  opacity: 0.4;
+}
+
+.card:hover {
+  border-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-3));
+}
+
+.card:focus-visible {
+  outline: 2px solid var(--mantine-color-blue-5);
+  outline-offset: 1px;
+}
+
+.cardTitle {
+  font-size: var(--mantine-font-size-sm);
+  font-weight: 500;
+  line-height: 1.3;
+  word-break: break-word;
+}
+
+.cardUntitled {
+  color: var(--mantine-color-dimmed);
+}
+
+.count {
+  color: var(--mantine-color-dimmed);
+  font-size: var(--mantine-font-size-sm);
+}
+
+.addCard {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px;
+  color: var(--mantine-color-dimmed);
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: var(--mantine-font-size-sm);
+  user-select: none;
+}
+
+.addCard:hover {
+  background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
+}
+
+.addCard:focus-visible {
+  outline: 2px solid var(--mantine-color-blue-5);
+  outline-offset: 1px;
+}
+
+.cardDragPreview {
+  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
+  border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+  padding: 8px 10px;
+}