feat: add personal and group view ownership

webui/src/styles/views.css

@@ -29,6 +29,32 @@
   opacity: .78;
 }
 
+.views-management-layout {
+  display: grid;
+  gap: 18px;
+}
+
+.views-admin-page.embedded > .admin-page-heading {
+  position: static;
+  margin: 0 0 18px;
+  padding: 0 0 14px;
+  box-shadow: none;
+}
+
+.views-personal-panel {
+  min-width: 0;
+}
+
+.views-owner-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 16px;
+}
+
+.views-owner-toolbar .form-field {
+  width: min(360px, 100%);
+}
+
 .views-admin-shell {
   display: grid;
   grid-template-columns: 280px minmax(0, 1fr);
@@ -81,24 +107,7 @@
   grid-template-columns: minmax(0, 1fr) auto 18px;
   align-items: center;
   gap: 8px;
-  width: 100%;
   min-height: 58px;
-  padding: 9px 8px 9px 10px;
-  border: 0;
-  border-radius: var(--radius-sm);
-  background: transparent;
-  color: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.views-definition-item:hover {
-  background: var(--hover-tint-soft);
-}
-
-.views-definition-item.active {
-  background: var(--accent-hover-bg);
-  color: var(--text-strong);
 }
 
 .views-definition-item-main {
@@ -159,13 +168,18 @@
   resize: vertical;
 }
 
-.views-surface-section,
-.views-assignments-section {
+.views-surface-section {
   margin-top: 22px;
   padding-top: 18px;
   border-top: var(--border-line);
 }
 
+.views-assignments-section {
+  min-width: 0;
+  padding-top: 18px;
+  border-top: var(--border-line);
+}
+
 .views-section-heading {
   align-items: center;
   margin-bottom: 10px;
@@ -200,58 +214,25 @@
   padding: 6px;
 }
 
-.views-surface-modules details {
-  border-bottom: var(--border-line);
-}
-
-.views-surface-modules details:last-child {
-  border-bottom: 0;
-}
-
-.views-surface-modules summary {
-  list-style: none;
-}
-
-.views-surface-modules summary::-webkit-details-marker {
-  display: none;
-}
-
-.views-surface-children {
-  display: grid;
-  gap: 2px;
-  padding: 0 0 6px 24px;
-}
-
-.views-surface-row {
-  display: grid;
-  grid-template-columns: 18px minmax(0, 1fr) 18px;
-  align-items: center;
-  gap: 9px;
-  min-height: 42px;
-  padding: 6px 8px;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-}
-
-.views-surface-row:hover {
-  background: var(--hover-tint-soft);
-}
-
-.views-surface-row.disabled {
+.views-surface-node.disabled {
   cursor: default;
   opacity: .7;
 }
 
-.views-surface-row strong,
-.views-surface-row small {
-  display: block;
-  letter-spacing: 0;
+.views-surface-tree .explorer-tree-node-wrap {
+  border-radius: var(--radius-sm);
 }
 
-.views-surface-row small {
-  margin-top: 2px;
-  overflow-wrap: anywhere;
-  color: var(--muted);
+.views-surface-tree .explorer-tree-node {
+  min-height: 42px;
+  border-radius: var(--radius-sm);
+}
+
+.views-surface-check {
+  display: inline-grid;
+  flex: 0 0 18px;
+  place-items: center;
+  color: var(--accent);
 }
 
 .views-assignment-list {