Use the new shadcn sidebar for khoj nav and actions

- Use the sidebar across all pages to quickly navigate through the app, access settings, and go to past chats - Pending: mobile friendliness
2026-03-05 13:21:18 +00:00 · 2024-12-19 20:10:03 -08:00
parent 7eb15bf0a9
commit 68af10c805
16 changed files with 1270 additions and 1353 deletions
--- a/src/interface/web/app/components/allConversations/sidePanel.module.css
+++ b/src/interface/web/app/components/allConversations/sidePanel.module.css
@@ -0,0 +1,163 @@
+div.session {
+    padding: 0.5rem;
+    margin-bottom: 0.25rem;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    max-width: 14rem;
+    font-size: medium;
+    display: grid;
+    grid-template-columns: minmax(auto, 400px) 1fr;
+    gap: 0rem;
+}
+
+div.compressed {
+    grid-template-columns: minmax(12rem, 100%) 1fr 1fr;
+}
+
+div.sessionHover {
+    background-color: hsla(var(--popover));
+}
+
+div.session:hover {
+    background-color: hsla(var(--popover));
+    color: hsla(var(--popover-foreground));
+}
+
+div.session a {
+    text-decoration: none;
+}
+
+button.button {
+    border: none;
+    outline: none;
+    background-color: transparent;
+    cursor: pointer;
+    color: var(--main-text-color);
+    width: 24px;
+}
+
+button.showMoreButton {
+    border-radius: 0.5rem;
+    padding: 8px;
+}
+
+div.panel {
+    display: flex;
+    flex-direction: column;
+    padding: 1rem;
+    overflow-y: auto;
+    max-width: auto;
+    transition: background-color 0.5s;
+}
+
+div.expanded {
+    gap: 1rem;
+    background-color: hsla(var(--muted));
+    height: 100%;
+}
+
+div.collapsed {
+    display: grid;
+    grid-template-columns: 1fr;
+    height: fit-content;
+    padding-top: 1rem;
+    padding-right: 0;
+    padding-bottom: 0;
+    padding-left: 1rem;
+}
+
+p.session {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    text-align: left;
+    font-size: small;
+}
+
+p.compressed {
+    width: 12rem;
+}
+
+p.expanded {
+    max-width: 20rem;
+}
+
+div.header {
+    display: grid;
+    grid-template-columns: 1fr auto;
+}
+
+div.profile {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 1rem;
+    align-items: center;
+    margin-top: auto;
+}
+
+div.panelWrapper {
+    display: grid;
+    grid-template-rows: 1fr auto auto;
+    height: 100%;
+}
+
+div.modalSessionsList {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: hsla(var(--frosted-background-color));
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    backdrop-filter: blur(2px);
+}
+
+div.modalSessionsList div.content {
+    max-width: 80%;
+    max-height: 80%;
+    background-color: hsla(var(--frosted-background-color));
+    overflow: auto;
+    padding: 20px;
+    border-radius: 10px;
+}
+
+div.modalSessionsList div.session {
+    max-width: 100%;
+    text-overflow: ellipsis;
+}
+
+@media screen and (max-width: 768px) {
+    div.panel {
+        padding: 0.25rem;
+        /* position: fixed; */
+        width: 100%;
+    }
+
+    div.expanded {
+        z-index: 1;
+    }
+
+    div.singleReference {
+        padding: 4px;
+    }
+
+    div.panelWrapper {
+        width: 100%;
+        padding: 0 1rem;
+    }
+
+    div.session.compressed {
+        max-width: 100%;
+        display: grid;
+        grid-template-columns: 70vw auto;
+        justify-content: space-between;
+    }
+
+    div.session {
+        max-width: 100%;
+        grid-template-columns: minmax(auto, 70vw) 1fr;
+    }
+}