From c39afbdb20fcb032e2d07cc8fc4668c3bc99aa87 Mon Sep 17 00:00:00 2001
From: Tristan-Mihai Radulescu
 <90451752+Courtcircuits@users.noreply.github.com>
Date: Mon, 4 Nov 2024 19:34:56 +0100
Subject: [PATCH] fix(GIST-75): fix height and sticky side bar (#33)

---
 src/app/(gistLayout)/layout-ui.tsx | 259 ++++++++++++++++++-----------
 1 file changed, 159 insertions(+), 100 deletions(-)

diff --git a/src/app/(gistLayout)/layout-ui.tsx b/src/app/(gistLayout)/layout-ui.tsx
index 9e77e4f..931e1a7 100644
--- a/src/app/(gistLayout)/layout-ui.tsx
+++ b/src/app/(gistLayout)/layout-ui.tsx
@@ -1,115 +1,174 @@
-import { OrgListFeature } from '@/components/logic/org-list-logic'
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/shadcn/avatar'
-import { Button } from '@/components/shadcn/button'
-import { Codearea } from '@/components/shadcn/codearea'
-import { Input } from '@/components/shadcn/input'
-import MenuButton from '@/components/ui/menu-button'
-import { Modal } from '@/components/ui/modal'
-import { ProfileDropdown } from '@/components/ui/profile-dropdown'
-import Shortcut from '@/components/ui/shortcut'
-import TooltipShortcut, { TooltipShortcutTrigger } from '@/components/ui/tooltip-shortcut'
-import { getLanguage } from '@/lib/language'
-import { FileCodeIcon, LucidePencil, Menu, PlusIcon } from 'lucide-react'
-import { useState } from 'react'
+import { OrgListFeature } from "@/components/logic/org-list-logic";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/components/shadcn/avatar";
+import { Button } from "@/components/shadcn/button";
+import { Codearea } from "@/components/shadcn/codearea";
+import { Input } from "@/components/shadcn/input";
+import MenuButton from "@/components/ui/menu-button";
+import { Modal } from "@/components/ui/modal";
+import { ProfileDropdown } from "@/components/ui/profile-dropdown";
+import Shortcut from "@/components/ui/shortcut";
+import TooltipShortcut, {
+  TooltipShortcutTrigger,
+} from "@/components/ui/tooltip-shortcut";
+import { getLanguage } from "@/lib/language";
+import { FileCodeIcon, LucidePencil, Menu, PlusIcon } from "lucide-react";
+import { useState } from "react";
 
 interface GistLayoutProps {
-  username: string
-  avatar: string
-  children: React.ReactNode
-  onMyGists: () => void
-  onCreateOrg: (name: string) => void
-  onCreateGist: (name: string, content: string) => void
-  onLogout: () => void
+  username: string;
+  avatar: string;
+  children: React.ReactNode;
+  onMyGists: () => void;
+  onCreateOrg: (name: string) => void;
+  onCreateGist: (name: string, content: string) => void;
+  onLogout: () => void;
 }
 
-export default function GistLayout({ avatar, children, username, onMyGists, onCreateOrg, onCreateGist, onLogout }: GistLayoutProps) {
-  const [gistName, setGistName] = useState('')
-  const [gistContent, setGistContent] = useState('')
-  const [orgName, setOrgName] = useState('')
-  const [isOrgModalOpen, setIsOrgModalOpen] = useState(false)
+export default function GistLayout({
+  avatar,
+  children,
+  username,
+  onMyGists,
+  onCreateOrg,
+  onCreateGist,
+  onLogout,
+}: GistLayoutProps) {
+  const [gistName, setGistName] = useState("");
+  const [gistContent, setGistContent] = useState("");
+  const [orgName, setOrgName] = useState("");
+  const [isOrgModalOpen, setIsOrgModalOpen] = useState(false);
 
-  const language = getLanguage(gistName)
+  const language = getLanguage(gistName);
 
   const handleCreateGistClick = () => {
-    onCreateGist(gistName, gistContent)
-    setGistName('')
-    setGistContent('')
-  }
+    onCreateGist(gistName, gistContent);
+    setGistName("");
+    setGistContent("");
+  };
 
   return (
-    <div className="w-full h-screen flex flex-row p-2">
-      <div className="w-min flex flex-col gap-8 flex-shrink-0 pr-2">
-        <div className="flex flex-row gap-10 items-center">
-          <div className="flex flex-row justify-start items-center gap-2">
-            <Avatar className="h-8 w-8 flex-shrink-0">
-              <AvatarImage src={avatar} />
-              <AvatarFallback className="bg-muted-foreground">{username.charAt(0).toUpperCase()}</AvatarFallback>
-            </Avatar>
-            <ProfileDropdown username={username} onLogout={onLogout} />
-          </div>
+    <div className="w-full min-h-screen flex flex-row p-2">
+      <div className="sticky top-2 h-screen">
+        <div className="w-min flex flex-col gap-8 flex-shrink-0 pr-2">
+          <div className="flex flex-row gap-10 items-center">
+            <div className="flex flex-row justify-start items-center gap-2">
+              <Avatar className="h-8 w-8 flex-shrink-0">
+                <AvatarImage src={avatar} />
+                <AvatarFallback className="bg-muted-foreground">
+                  {username.charAt(0).toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+              <ProfileDropdown username={username} onLogout={onLogout} />
+            </div>
 
-          <Modal
-            title="New Gist"
-            trigger={
-              <div>
-                <TooltipShortcut tooltip="Create a new Gist" shortcuts={['C']}>
-                  <TooltipShortcutTrigger>
-                    <Button className="w-8 h-8 flex-shrink-0" size={'icon'} variant={'icon'}>
-                      <LucidePencil className="w-4 h-4" />
-                    </Button>
-                  </TooltipShortcutTrigger>
-                </TooltipShortcut>
-              </div>
-            }
-            content={
-              <div className="flex flex-col gap-3">
-                <Input className="border-0 bg-background p-0 h-min font-bold" placeholder="Gist name" value={gistName} onChange={(e) => setGistName(e.target.value)} />
-                <Codearea className="border-0 bg-background p-0 font-normal" placeholder="Write content..." value={gistContent} language={language} onChange={(e) => setGistContent(e.target.value)} />
-              </div>
-            }
-            footer={
-              <MenuButton variant="default" size="sm" onClick={handleCreateGistClick}>
-                Create
-              </MenuButton>
-            }
-          ></Modal>
-        </div>
-        <div className="flex flex-col gap-2">
-          <MenuButton icon={<FileCodeIcon />} variant="menu" size="menu" letter="M" onClick={onMyGists} href="/mygist" className="w-full">
-            My Gists
-          </MenuButton>
-          <Modal
-            open={isOrgModalOpen}
-            onOpenChange={setIsOrgModalOpen}
-            trigger={
-              <MenuButton icon={<PlusIcon />} variant="menu" size="menu" letter="T" className="w-full">
-                Create org
-              </MenuButton>
-            }
-            title="Create Org"
-            content={
-              <div className="flex flex-col gap-3">
-                <Input className="border-0 bg-background p-0 h-min font-bold" placeholder="Org name" value={orgName} onChange={(e) => setOrgName(e.target.value)} />
-              </div>
-            }
-            footer={
-              <MenuButton
-                variant="default"
-                size="sm"
-                onClick={() => {
-                  onCreateOrg(orgName)
-                  setOrgName('')
-                  setIsOrgModalOpen(false)
-                }}
-              >
-                Create
-              </MenuButton>
-            }
-          />
+            <Modal
+              title="New Gist"
+              trigger={
+                <div>
+                  <TooltipShortcut
+                    tooltip="Create a new Gist"
+                    shortcuts={["C"]}
+                  >
+                    <TooltipShortcutTrigger>
+                      <Button
+                        className="w-8 h-8 flex-shrink-0"
+                        size={"icon"}
+                        variant={"icon"}
+                      >
+                        <LucidePencil className="w-4 h-4" />
+                      </Button>
+                    </TooltipShortcutTrigger>
+                  </TooltipShortcut>
+                </div>
+              }
+              content={
+                <div className="flex flex-col gap-3">
+                  <Input
+                    className="border-0 bg-background p-0 h-min font-bold"
+                    placeholder="Gist name"
+                    value={gistName}
+                    onChange={(e) => setGistName(e.target.value)}
+                  />
+                  <Codearea
+                    className="border-0 bg-background p-0 font-normal"
+                    placeholder="Write content..."
+                    value={gistContent}
+                    language={language}
+                    onChange={(e) => setGistContent(e.target.value)}
+                  />
+                </div>
+              }
+              footer={
+                <MenuButton
+                  variant="default"
+                  size="sm"
+                  onClick={handleCreateGistClick}
+                >
+                  Create
+                </MenuButton>
+              }
+            ></Modal>
+          </div>
+          <div className="flex flex-col gap-2">
+            <MenuButton
+              icon={<FileCodeIcon />}
+              variant="menu"
+              size="menu"
+              letter="M"
+              onClick={onMyGists}
+              href="/mygist"
+              className="w-full"
+            >
+              My Gists
+            </MenuButton>
+            <Modal
+              open={isOrgModalOpen}
+              onOpenChange={setIsOrgModalOpen}
+              trigger={
+                <MenuButton
+                  icon={<PlusIcon />}
+                  variant="menu"
+                  size="menu"
+                  letter="T"
+                  className="w-full"
+                >
+                  Create org
+                </MenuButton>
+              }
+              title="Create Org"
+              content={
+                <div className="flex flex-col gap-3">
+                  <Input
+                    className="border-0 bg-background p-0 h-min font-bold"
+                    placeholder="Org name"
+                    value={orgName}
+                    onChange={(e) => setOrgName(e.target.value)}
+                  />
+                </div>
+              }
+              footer={
+                <MenuButton
+                  variant="default"
+                  size="sm"
+                  onClick={() => {
+                    onCreateOrg(orgName);
+                    setOrgName("");
+                    setIsOrgModalOpen(false);
+                  }}
+                >
+                  Create
+                </MenuButton>
+              }
+            />
+          </div>
+          <OrgListFeature />
         </div>
-        <OrgListFeature />
       </div>
       {children}
     </div>
-  )
+  );
 }