add web.stream

frame.js

@@ -480,12 +480,15 @@ Volcanos(chat.ONAPPEND, {_init: function(can, meta, list, cb, target, field) {
 		}}
 	},
 	label: function(can, value, icons) {
-		return {view: html.STATUS, list: can.core.Item(icons||{version: "bi bi-tags",
+		return {view: html.STATUS, list: can.core.Item(icons||{
+			version: "bi bi-tags",
 			time: can.base.isIn(can.ConfIndex(), web.DREAM, web.STORE)? "bi bi-tools": "bi bi-clock-history",
+			restart: "bi bi-bootstrap-reboot",
+			access: "bi bi-file-lock",
 		}, function(name, icon) { var text = value[name]
 			if (name == nfs.VERSION) { text = value.version.split("-").slice(0, 2).join("-") }
 			if (name == mdb.TIME) { text = can.base.TimeTrim(value[name]) }
-			return value[name] && {view: [[html.ITEM]], list: [{icon: icon}, {text: text}]}
+			return value[name] && {view: [[html.ITEM, name]], list: [{icon: icon}, {text: text}]}
 		})}
 	},
 	table: function(can, msg, cb, target, keys) { if (!msg || msg.Length() == 0) { return } var meta = can.base.Obj(msg.Option(mdb.META))

index.css

@@ -134,7 +134,9 @@ kbd { padding:0 var(--input-padding); }
 img.qrcode { width:var(--qrcode-width); }
 /* output style */
 div.title>div.status { line-height:20px; display:flex; }
-div.title>div.status>div.item { font-size:var(--status-font-size); font-weight:normal; margin-right:var(--button-margin); float:left; }
+div.title>div.status>div.item { font-size:var(--status-font-size); font-weight:normal; float:left; padding:0 var(--input-padding); }
+div.title>div.status>div.item.restart { background-color:var(--notice-bg-color); color:var(--notice-fg-color) !important; opacity:0.4; }
+div.title>div.status>div.item.access { background-color:var(--danger-bg-color); color:var(--danger-fg-color) !important; opacity:0.4; }
 div.title>div.status>div.item:not(:hover) { color:var(--disable-fg-color); }
 div.title>div.status>div.item>i { margin-right:var(--input-margin); }
 fieldset.store>div.output>fieldset.story:not(.float) { display:none; }
@@ -143,7 +145,8 @@ div.output.card>div.item { background-color:var(--plugin-bg-color); color:var(--
 div.output.card>div.item:hover { background-color:var(--plugin-bg-color); color:var(--plugin-fg-color); }
 div.output.card>div.item.stop { color:var(--disable-fg-color); }
 div.output.card>div.item>div.title { font-size:var(--legend-font-size); font-weight:bold; padding-bottom:var(--input-padding); display:flex; align-items:center; overflow:hidden; }
-div.output.card>div.item>div.title>img { margin-right:var(--button-margin); margin-left:0; height:var(--header-height); width:var(--header-height); float:left; }
+div.output.card>div.item>div.title>div.title>span { padding:var(--input-padding); }
+div.output.card>div.item>div.title>img { height:var(--header-height); width:var(--header-height); float:left; }
 div.output.card>div.item>div.title>img.jpg { padding:var(--input-padding); }
 div.item img.jpg { padding:var(--input-padding); }
 div.output.card>div.item>div.content { white-space:pre; font-size:var(--status-font-size); padding:var(--input-padding); height:var(--header-height); }
@@ -192,6 +195,11 @@ div.content>div.toggle.display { left:20%; bottom:-52px; rotate:90deg; border-to
 div.project:not(.toggle) { width:var(--project-width); flex:0 0 var(--project-width); }
 div.profile:not(.toggle) { width:50%; flex:0 0 50%; }
 /* fieldset */
+fieldset>div.action>div.friend { display:block; margin-left:10px !important; }
+fieldset>div.action>div.friend { display:block; margin-right:10px !important; overflow:hidden; }
+fieldset>div.action>div.friend img { height:var(--action-height); transition:all 1s; float:right; }
+fieldset>div.action>div.friend:not(:hover) img:not(:first-child) { margin-right:-20px; }
+fieldset>div.action>div.friend:hover img:not(:first-child) { margin-right:var(--input-margin); }
 fieldset>form.option>div.item:not(.icon) { margin-right:var(--button-margin); }
 fieldset>div.action>div.item:not(:last-child) { margin-right:var(--button-margin); }
 fieldset.input>legend { display:none; }

lib/page.js

@@ -274,7 +274,9 @@ Volcanos("page", {
 			if (can.page.tagis(target, tag)) { return target }
 		}
 	},
-	insertBefore: function(can, target, before, parent) { parent = parent||before.parentNode
+	insertBefore: function(can, target, before, parent) {
+		if (typeof before == code.STRING) { before = can.page.SelectOne(can, parent, before) }
+		parent = parent||before.parentNode
 		if (can.base.isArray(target)) {
 			return can.core.List(target, function(item) { if (!item) { return }
 				var target = can.page.Append(can, parent, [item])._target
@@ -418,7 +420,7 @@ Volcanos("page", {
 	},
 	buttonStyle: function(can, name) {
 		return can.base.isIn(name, mdb.CREATE, mdb.INSERT, mdb.IMPORT, nfs.CLONE, cli.START, ctx.RUN, web.UPLOAD, web.CONFIRM, aaa.LOGIN, code.AUTOGEN, "sso", "add", "pull", "push", "commit", "preview", "auto-preview", ice.APP)? html.NOTICE:
-			can.base.isIn(name, mdb.REMOVE, mdb.DELETE, mdb.PRUNES, mdb.PRUNE, nfs.TRASH, cli.RESTART, cli.STOP, cli.CLOSE, cli.REBOOT, web.CANCEL, code.UPGRADE, "drop", "prockill")? html.DANGER: ""
+			can.base.isIn(name, mdb.REMOVE, mdb.DELETE, mdb.PRUNES, mdb.PRUNE, nfs.TRASH, cli.RESTART, cli.STOP, cli.CLOSE, cli.REBOOT, web.CANCEL, code.UPGRADE, "drop", "access", "prockill")? html.DANGER: ""
 	},
 	exportValue: function(can, msg, target) { target = target||can._output
 		msg.OptionDefault(ice.MSG_THEME, can.getHeaderTheme())

lib/user.js

@@ -202,7 +202,7 @@ Volcanos("user", {
 				item.title = can.user.trans(can, item.title||item.placeholder||item.name, null, html.INPUT)
 				return {view: [[item.name, item.type, item.action], html.TR], list: [
 					{type: html.TD, list: [{text: [can.user.trans(can, item.name||"", item._trans, html.INPUT), html.LABEL]}]}, {type: html.TD, list: [{text: item.need == "must"? "*": "", style: {color: cli.RED}}]},
-					{type: html.TD, _init: function(target) { can.onappend.input(can, item, "", target) }},
+					{type: html.TD, _init: function(target) { can.onappend.input(can, item, msg.Option(item.name), target) }},
 				]}
 			})}]}, html.ACTION,
 		], onclick: function(event) { if (!can.page.tagis(event.target, html.INPUT, html.TEXTAREA)) { can.onmotion.clearCarte(can) } }}])

plugin/table.js

@@ -14,13 +14,16 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, target) {
 			if (img.indexOf("/require/") == 0 && value.origin) { img = value.origin + img }
 			return {view: [[html.ITEM, value.type, value.status]], list: [
 				{view: [wiki.TITLE, html.DIV], list: [
-					value.icon && {className: can.base.contains(img, ".jpg")? "jpg": "", img: img}, {view: wiki.TITLE, list: [{text: value.name}, can.onappend.label(can, value)]},
+					value.icon && {className: can.base.contains(img, ".jpg")? "jpg": "", img: img}, {view: wiki.TITLE, list: [
+						{text: value.name}, can.onappend.label(can, value),
+					]},
 				]}, {view: [wiki.CONTENT, html.DIV, value.text]},
 				{view: html.ACTION, inner: value.action, _init: function(target) { can.onappend.mores(can, target, value, html.CARD_BUTTON) }},
 			]}
 		})
 		can.onimport.layout = can.onimport.layout||function() { var height = can.onlayout.expand(can, target); can.sup.onexport.outputMargin = function() { return height } }
 		can.page.Append(can, target, list), can.onmotion.orderShow(can, target)
+		can.onimport._online(can)
 	},
 	_vimer_zone: function(can, msg, target) { msg.Table(function(value) { var action = can.page.parseAction(can, value)
 		can.onimport.item(can, {type: value.type, status: value.status, icon: can.misc.Resource(can, value.icon||value.icons||value.avatar_url), name: can.page.Color(value[can.Conf(mdb.FIELD)||mdb.VIEW]||value[mdb.NAME]||value[mdb.TEXT]||value[mdb.TYPE]), title: value[mdb.TEXT]||value.description}, function(event) {
@@ -223,6 +226,29 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, target) {
 			}, sub.onaction.close = function() { can.onmotion.hidden(can, target) }, can.base.isFunc(cb) && cb(sub)
 		}, target, field)
 	},
+	_online: function(can, delay) {
+		can.onmotion.delay(can, function() {
+			if (!can.ui.friend) {
+				if (can.isCmdMode()) {
+					can.ui.friend = can.page.Append(can, can._action, ["item friend"])._target
+				} else {
+					var p = can.page.SelectOne(can, can._action, "div.item._space").nextSibling
+					can.ui.friend = can.page.insertBefore(can, ["item friend"], p, can._action)
+				}
+			}
+			can._root.Header.run(can.request({}, {_space: can.ConfSpace(), _index: can.ConfIndex()}), [ctx.ACTION, web.ONLINE], function(msg) {
+				can.page.Appends(can, can.ui.friend, msg.Table(function(value, index) {
+					return index < 5 && {img: can.misc.Resource(can,
+						value.username == can.user.info.username? value.icons: value.avatar||"usr/icons/contexts.png"),
+						title: [
+							[value.usernick, value.username].join(" "),
+							[value.agent, value.system, value.ip].join(" "),
+						].join("\n")}
+				}))
+			})
+			can.onimport._online(can, 30000)
+		}, delay)
+	},
 })
 Volcanos(chat.ONLAYOUT, {
 	_init: function(can, height, width) {