V0.7.1 New user online and pin features

frontend/src/components/Sidebar.css

@@ -230,3 +230,73 @@
   font-weight: 400;
   color: var(--text-tertiary);
 }
+
+/* Online presence dot on DM avatars */
+.group-icon-wrap {
+  position: relative;
+  flex-shrink: 0;
+  display: inline-flex;
+}
+
+.online-dot {
+  position: absolute;
+  bottom: 1px;
+  right: 1px;
+  width: 11px;
+  height: 11px;
+  background: #34a853;
+  border-radius: 50%;
+  border: 2px solid var(--surface);
+  pointer-events: none;
+}
+
+/* Pin sublabel */
+.section-sublabel {
+  display: flex;
+  align-items: center;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  color: var(--text-tertiary);
+  padding: 4px 12px 2px;
+  text-transform: uppercase;
+}
+
+/* Thin divider between pinned and unpinned */
+.section-divider {
+  height: 1px;
+  background: var(--border);
+  margin: 4px 12px;
+  opacity: 0.6;
+}
+
+/* DM right-click context menu */
+.dm-context-menu {
+  position: fixed;
+  z-index: 9999;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-md);
+  padding: 4px 0;
+  min-width: 180px;
+}
+
+.dm-context-menu button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 14px;
+  font-size: 13px;
+  color: var(--text-primary);
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  transition: background var(--transition);
+}
+
+.dm-context-menu button:hover {
+  background: var(--surface-variant);
+}