Repository: sparrowapp-dev/sparrow-app
Pull request #3036: change in ui of workspace.
Author: login: kishangupta4514
Labels: name: feature
description: New feature requests
Created: 2025-04-29T15:59:05Z | Merged: 2025-04-30T11:49:19Z

### Description
Change into the ui of the workspace card and add tabs for all,private and public.

### Add Issue Number
Fixes #<your_issue_number>

### Add Screenshots/GIFs
![image](https://github.com/user-attachments/assets/68c80ca2-9510-4a7a-8362-a53e7783dbfd)


### Add Known Issue
If applicable, add any known issues.

### Contribution Checklist:
- [x] **The pull request only addresses one issue or adds one feature.**
- [ ] **I have linked an issue to the pull request.**
- [x] **I have linked a PR type label to the pull request.**
- [x] **The pull request does not introduce any breaking changes**
- [ ] **I have added screenshots or gifs to help explain the change if applicable.**
- [x] **I have read the [contribution guidelines](../../docs/CONTRIBUTING.md).**

Note: Keeping the PR small and focused helps make it easier to review and merge. If you have multiple changes you want to make, please consider submitting them as separate pull requests.


Diff:
diff --git a/packages/@sparrow-library/src/ui/tags/Tags.svelte b/packages/@sparrow-library/src/ui/tags/Tags.svelte
index 14431e6a0b..4bd96741b3 100644
--- a/packages/@sparrow-library/src/ui/tags/Tags.svelte
+++ b/packages/@sparrow-library/src/ui/tags/Tags.svelte
@@ -8,6 +8,8 @@
     | "grey"
     | "pink" = "grey";
   export let text: string = "Tag";
+  export let iconSize = 16;
+  export let endIcon;
 
   const convertCasing = (sentence: string) => {
     let sen =
@@ -16,6 +18,7 @@
     if (total_words.length > 5) sen = total_words.slice(0, 5).join(" ") + "...";
     return sen;
   };
+  console.log(endIcon, "ff");
 
   const colorPalette = {
     cyan: {
@@ -71,7 +74,27 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;"
-  class="text-ds-font-weight-medium text-ds-line-height-150 text-ds-font-size-12"
+  class="text-ds-font-weight-medium text-ds-line-height-150 text-ds-font-size-12 d-flex align-items-center"
 >
-  {convertCasing(text)}
+  <span class="text-content">{convertCasing(text)}</span>
+  {#if endIcon}
+    <svelte:component
+      this={endIcon}
+      height={`${iconSize}px`}
+      width={`${iconSize}px`}
+      size={`${iconSize}px`}
+      useParentColor={true}
+      class="end-icon"
+    />
+  {/if}
 </button>
+
+<style>
+  .text-content {
+    margin-right: 4px; /* Add space between text and icon */
+  }
+
+  .end-icon {
+    flex-shrink: 0; /* Prevent the icon from shrinking */
+  }
+</style>
diff --git a/packages/@sparrow-teams/src/compopnents/workspace-grid/WorkspaceGrid.svelte b/packages/@sparrow-teams/src/compopnents/workspace-grid/WorkspaceGrid.svelte
index d417061a24..3d87e50756 100644
--- a/packages/@sparrow-teams/src/compopnents/workspace-grid/WorkspaceGrid.svelte
+++ b/packages/@sparrow-teams/src/compopnents/workspace-grid/WorkspaceGrid.svelte
@@ -4,7 +4,10 @@
   import { onDestroy } from "svelte";
   import Card from "../card/Card.svelte";
   import MenuView from "../menu-view/MenuView.svelte";
-  import { ArrowForward } from "@sparrow/library/icons";
+  import { ArrowForward, LockClosedRegular } from "@sparrow/library/icons";
+  import MoreVerticalRegular from "@sparrow/library/icons";
+  // import Tags from "@sparrow-library/src/ui/tags/Tags.svelte";
+  import Tags from "@sparrow/library/ui";
 
   export let workspace: any;
   export let isAdminOrOwner: boolean;
@@ -88,6 +91,29 @@
   function closeRightClickContextMenu() {
     showMenu = false;
   }
+  const formateUpdateTime = (dateString: string) => {
+    const date = new Date(dateString);
+    const now = new Date();
+    const seconds = Math.floor((now - date) / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(seconds / 3600);
+    const days = Math.floor(seconds / 86400);
+    const months = Math.floor(days / 30); // Approximation
+
+    if (seconds < 60) {
+      return "just now";
+    } else if (minutes < 60) {
+      return `${minutes} minute${minutes > 1 ? "s" : ""} ago`;
+    } else if (hours < 24) {
+      return `${hours} hour${hours > 1 ? "s" : ""} ago`;
+    } else if (days < 30) {
+      return `${days} day${days > 1 ? "s" : ""} ago`;
+    } else if (months) {
+      return `${months} month${months > 1 ? "s" : ""} ago`;
+    } else {
+      return ``;
+    }
+  };
 </script>
 
 <svelte:window
@@ -104,17 +130,6 @@
     cardClassProp={"flex-grow-1 col-lg-3 col-md-10  position-relative"}
     cardStyleProp={"max-width: 32.8%; max-height: 32%;"}
   >
-    <button
-      bind:this={workspaceTabWrapper}
-      class="threedot-icon-container border-0 rounded d-flex justify-content-center align-items-center position-absolute {showMenu
-        ? 'threedot-active'
-        : ''}"
-      style="top:26px; right:15px;"
-      on:click={(e) => rightClickContextMenu(e)}
-    >
-      <ThreeDotIcon />
-    </button>
-
     <div
       class="bg-tertiary-750 workspace-card p-4"
       tabindex="0"
@@ -126,6 +141,18 @@
       }`}
       on:contextmenu|preventDefault={(e) => rightClickContextMenu(e)}
     >
+      <div class="d-flex" style="justify-content: space-between;">
+        <Tags text="Private" type="cyan" endIcon={LockClosedRegular} />
+        <button
+          class="threedot-icon-container border-0 rounded d-flex justify-content-center align-items-center {showMenu
+            ? 'threedot-active'
+            : ''}"
+          on:click={(e) => rightClickContextMenu(e)}
+        >
+          <MoreVerticalRegular />
+        </button>
+      </div>
+
       <div
         class="d-flex overflow-hidden justify-content-between"
         style={isWebEnvironment ? "width:calc(100% - 130px);" : ""}
@@ -152,39 +179,50 @@
         </span>
       </p>
       <p
-        class="teams-workspace__date mb-0"
-        style={`${
-          showMenu ? "color: var(--sparrow-text-color) !important;" : null
-        }`}
+        class="ellipsis text-ds-font-size-12 text-ds-line-height-130 text-ds-font-weight-medium"
+        style="color:var(--text-secondary-200)"
       >
-        <span
-          class="text-ds-font-size-12 text-ds-line-height-130 text-ds-font-weight-medium"
-          style=" color:var(--text-secondary-200)"
-          >Last updated on
-        </span><span
-          class="text-ds-font-size-12 text-ds-line-height-150 text-ds-font-weight-semi-bold"
-          style=" color:var(--text-ds-neutral-50)"
-          >{formatDateInString(workspace?.updatedAt)}</span
-        >
+        {workspace?.description
+          ? workspace.description
+          : "No summary added"}
       </p>
 
-      {#if isWebEnvironment}
-        <button
-          class="me-2 open-desktop-btn border-0 rounded d-flex justify-content-center align-items-center text-decoration-underline"
-          on:click|stopPropagation={() => {
-            openInDesktop(workspace._id);
-          }}
+      <div class="d-flex justify-content-between">
+        <p
+          class="teams-workspace__date mb-0"
+          style={`${
+            showMenu ? "color: var(--sparrow-text-color) !important;" : null
+          }`}
         >
-          Open in Desktop
-          <div class="arrow-up">
-            <ArrowForward
-              width={"19px"}
-              height={"19px"}
-              color={"var(--icon-primary-300)"}
-            />
-          </div>
-        </button>
-      {/if}
+          <span
+            class="text-ds-font-size-12 text-ds-line-height-130 text-ds-font-weight-medium"
+            style=" color:var(--text-secondary-200)"
+            >Last updated
+          </span><span
+            class="text-ds-font-size-12 text-ds-line-height-150 text-ds-font-weight-semi-bold"
+            style=" color:var(--text-ds-neutral-50)"
+            >{formateUpdateTime(workspace?.updatedAt)}</span
+          >
+        </p>
+
+        {#if isWebEnvironment}
+          <button
+            class="me-2 open-desktop-btn border-0 rounded d-flex justify-content-center align-items-center text-decoration-underline"
+            on:click|stopPropagation={() => {
+              openInDesktop(workspace._id);
+            }}
+          >
+            Open in Desktop
+            <div class="arrow-up">
+              <ArrowForward
+                width={"19px"}
+                height={"19px"}
+                color={"var(--icon-primary-300)"}
+              />
+            </div>
+          </button>
+        {/if}
+      </div>
     </div>
   </Card>
 </div>
@@ -258,9 +296,6 @@
   }
 
   .open-desktop-btn {
-    position: absolute;
-    top: 24px;
-    right: 40px;
     font-size: 12px;
     font-weight: 500;
     background-color: var(--color-primary);
diff --git a/packages/@sparrow-teams/src/features/team-explorer/layout/TeamExplorer.svelte b/packages/@sparrow-teams/src/features/team-explorer/layout/TeamExplorer.svelte
index dc1eaf930c..bdde3a09d6 100644
--- a/packages/@sparrow-teams/src/features/team-explorer/layout/TeamExplorer.svelte
+++ b/packages/@sparrow-teams/src/features/team-explorer/layout/TeamExplorer.svelte
@@ -13,7 +13,9 @@
   import { Avatar } from "@sparrow/library/ui";
   import {
     AddRegular,
+    GlobeRegular,
     ListRegular,
+    LockClosedRegular,
     PeopleRegular,
   } from "@sparrow/library/icons";
 
@@ -128,6 +130,7 @@
   let leaveButtonMenu: boolean = false;
   let isInviteIgnoreProgress = false;
   let isInviteAcceptProgress = false;
+  let selectedFilter = "All";
   const addButtonData = [
     {
       name: "Leave Hub",
@@ -264,6 +267,13 @@
   onDestroy(() => {
     selectedViewSubscribe();
   });
+
+  const getFilteredWorkspaces = () => {
+    if (selectedFilter === "All") {
+      return workspaces; // Return all workspaces
+    }
+    return workspaces.filter((workspace) => workspace.workspacetype === selectedFilter);
+  };
 </script>
 
 {#if openTeam}
@@ -415,7 +425,48 @@
           {#if activeTeamTab === TeamTabsEnum.WORKSPACES}
             <div class="h-100 d-flex flex-column">
               {#if openTeam && openTeam?.workspaces?.length > 0 && !isGuestUser}
-                <div class="">
+                <div
+                  class="d-flex align-items-center" 
+                  style="gap: 20px; justify-content:space-between; align-items:center;"
+                >
+                  <div class="d-flex align-items-center" style="gap: 12px; margin-bottom: 12px;">
+                    <span
+                      role="button"
+                      class={`d-flex rounded px-2 text-fs-12 py-1 btn-formatter align-items-center ${
+                        selectedFilter === "All"
+                          ? "bg-tertiary-500 text-secondary-100"
+                          : ""
+                      }`}
+                      on:click={() => (selectedFilter = "All")}
+                    >
+                      All
+                    </span>
+
+                    <span
+                      role="button"
+                      class={`d-flex rounded px-2 text-fs-12 py-1 btn-formatter align-items-center gap-1 ${
+                        selectedFilter === "Private"
+                          ? "bg-tertiary-500 text-secondary-100"
+                          : ""
+                      }`}
+                      on:click={() => (selectedFilter = "Private")}
+                    >
+                      <LockClosedRegular size="16px" />
+                      Private
+                    </span>
+                    <span
+                      role="button"
+                      class={`d-flex rounded px-2 text-fs-12 py-1 btn-formatter align-items-center gap-1 ${
+                        selectedFilter === "Public"
+                          ? "bg-tertiary-500 text-secondary-100"
+                          : ""
+                      }`}
+                      on:click={() => (selectedFilter = "Public")}
+                    >
+                      <GlobeRegular size="16px" />
+                      Public
+                    </span>
+                  </div>
                   <div class={`d-flex  rounded  align-items-center mb-3`}>
                     <Search
                       variant={"primary"}
@@ -438,12 +489,12 @@
                     bind:isGuestUser
                     {searchQuery}
                     {openTeam}
-                    data={workspaces.filter((elem) => {
+                    data={getFilteredWorkspaces().filter((elem) => {
                       return (
                         elem?.team?.teamId === openTeam?.teamId &&
                         elem?.name?.toLowerCase().includes(searchQuery)
                       );
-                    }) || []}
+                    }) || []}  
                     {onSwitchWorkspace}
                     {onDeleteWorkspace}
                     isAdminOrOwner={userRole === TeamRole.TEAM_ADMIN ||
@@ -457,7 +508,7 @@
                     {openInDesktop}
                     {isWebEnvironment}
                     {searchQuery}
-                    workspaces={workspaces.filter((elem) => {
+                    workspaces={getFilteredWorkspaces().filter((elem) => {
                       return (
                         elem?.team?.teamId === openTeam?.teamId &&
                         elem?.name?.toLowerCase().includes(searchQuery)
@@ -683,4 +734,9 @@
   .teams-menu__right {
     display: flex;
   }
+
+  .btn-formatter {
+    outline: none;
+    border: none;
+  }
 </style>


Reviews:
user: login: Astitva877
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-30T10:56:50Z
user: login: Astitva877
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-30T10:57:14Z
user: login: kishangupta4514
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-30T11:11:33Z
user: login: Astitva877
state: APPROVED
author_association: MEMBER
submitted_at: 2025-04-30T11:28:34Z
user: login: Mithesh54
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-04-30T11:49:09Z

Review comments:
diff_hunk: @@ -4,7 +4,9 @@
   import { onDestroy } from "svelte";
   import Card from "../card/Card.svelte";
   import MenuView from "../menu-view/MenuView.svelte";
-  import { ArrowForward } from "@sparrow/library/icons";
+  import { ArrowForward, LockClosedRegular } from "@sparrow/library/icons";
+  import MoreVerticalRegular from "../../../../@sparrow-library/src/icons/MoreVerticalRegular.svelte";
+  import Tags from "../../../../@sparrow-library/src/ui/tags/Tags.svelte";
path: packages/@sparrow-teams/src/compopnents/workspace-grid/WorkspaceGrid.svelte
user: login: Astitva877
body: wrong imports
created_at: 2025-04-30T10:56:50Z
author_association: MEMBER
diff_hunk: @@ -88,6 +90,29 @@
   function closeRightClickContextMenu() {
     showMenu = false;
   }
+  const syncedTimeAgo = (dateString: string) => {
path: packages/@sparrow-teams/src/compopnents/workspace-grid/WorkspaceGrid.svelte
user: login: Astitva877
body: change function name, give something like formatUpdatedTime
created_at: 2025-04-30T10:57:14Z
author_association: MEMBER
diff_hunk: @@ -88,6 +90,29 @@
   function closeRightClickContextMenu() {
     showMenu = false;
   }
+  const syncedTimeAgo = (dateString: string) => {
path: packages/@sparrow-teams/src/compopnents/workspace-grid/WorkspaceGrid.svelte
user: login: kishangupta4514
body: done.
created_at: 2025-04-30T11:11:33Z
author_association: CONTRIBUTOR

PR comments:
user: login: anish-techdome
created_at: 2025-04-30T06:10:01Z
body: @kishangupta4514 You can add description and relevant screenshot of the final output. It will help reviewers to review your PR with ease.
author_association: NONE
user: login: kishangupta4514
created_at: 2025-04-30T10:42:17Z
body: > @kishangupta4514 You can add description and relevant screenshot of the final output. It will help reviewers to review your PR with ease.

Done.
author_association: CONTRIBUTOR
user: login: Codewithpri45
created_at: 2025-04-30T10:44:46Z
body: Added star

On Wed, 30 Apr, 2025, 4:12 pm Kishan Gupta, ***@***.***>
wrote:

> *kishangupta4514* left a comment (sparrowapp-dev/sparrow-app#3036)
> <https://github.com/sparrowapp-dev/sparrow-app/pull/3036#issuecomment-2841564400>
>
> @kishangupta4514 <https://github.com/kishangupta4514> You can add
> description and relevant screenshot of the final output. It will help
> reviewers to review your PR with ease.
>
> Done.
>
> —
> Reply to this email directly, view it on GitHub
> <https://github.com/sparrowapp-dev/sparrow-app/pull/3036#issuecomment-2841564400>,
> or unsubscribe
> <https://github.com/notifications/unsubscribe-auth/BLIMCFUEC6NZXLMLN5VYVIT24CSKBAVCNFSM6AAAAAB4DNAYSOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDQNBRGU3DINBQGA>
> .
> You are receiving this because you are subscribed to this thread.Message
> ID: ***@***.***>
>

author_association: NONE