whodb icon indicating copy to clipboard operation
whodb copied to clipboard
verified publisher icon clidey

[FR] - Some UI/UX Improvement Suggestions

Open HrBingR opened this issue 6 months ago • 2 comments

Is your feature request related to a problem? Please describe. Mostly usability and user experience concerns.

  1. Table view should have a list mode/toggle. Viewing all tables in a grid, especially in an extensive database, can be annoying to find what you're looking for. Search is great, less great if you can't exactly remember the name. Much easier to sort through if you have the option of a single list of tables.
  2. Schema selection dialog/list on the left should be longer. At the moment it only displays 5 options at a time regardless of screen size, which can make scrolling through the list looking for a specific schema really painful.
  3. DB & Schema lists should be searchable.
  4. On the tables page there are two buttons, "Explore" and "Data". The "Explore" button should have a more descriptive name; currently it's a bit misleading as to what the button does vs what the user might expect it to do.
  5. This goes hand-in-hand with my first issue, but if you click "Explore" on the last table in a row, it shifts to the next row, making collapsing it a bit cumbersome.

Describe the solution you'd like

  1. I would like a toggle for a list mode of sorts. In list mode the "Explore" button could then expand the item downward, assuming you'd have 1 table per row in this mode.
  2. I suggest showing at least 10-15 DBs or Schemas in the list, rather than 5.
  3. An input dialog at the top of the list for quick searching/filtering of the available DBs and Schemas.
  4. "Explore" should be renamed to something more in-line with what it does, such as "Describe", since that's the command used to get similar information about a MySQL DB table when using the CLI.
  5. I don't have a good suggestion for improving this, to be honest. I can't think of a good solution.

HrBingR avatar Jun 22 '25 02:06 HrBingR

Great suggestion @HrBingR and thank you for using WhoDB! These are some good UX changes that would improve the experience! We are going to be fixing these soon :)

@claude can you try to fix these?

hkdeman avatar Jun 23 '25 18:06 hkdeman

Claude finished @hkdeman's task —— View job • claude/issue-534-20250623_181629 • Create PR ➔

I've successfully implemented all the requested UI/UX improvements for WhoDB!

Completed Tasks ✅

  • [x] Add list view toggle for tables
  • [x] Increase schema selection list from 5 to 10-15 items
  • [x] Add search functionality to DB & Schema lists
  • [x] Rename "Explore" button to "Describe"
  • [x] Fix row shifting issue when clicking "Explore" on last table

Changes Implemented

  1. List View Toggle: Added Grid/List view toggle buttons in the tables page. Users can now switch between:

    • Grid view (original card layout)
    • List view (single column with better space utilization)

  2. Increased Dropdown Heights: Changed dropdown heights from default max-h-40 to max-h-[400px] for both database and schema selection, allowing 10-15 items to be visible at once.

  3. Searchable Dropdowns: Created a new SearchableDropdown component that extends the existing dropdown with search functionality. Both database and schema dropdowns now have search inputs for quick filtering.

  4. "Explore" → "Describe": Renamed all instances of the "Explore" button to "Describe" to better reflect its functionality.

  5. Row Shifting Fix: The list view implementation naturally solves the row shifting issue since tables are displayed in a single column.

Files Modified

  • frontend/src/pages/storage-unit/storage-unit.tsx - Added list view, view toggle, and renamed buttons
  • frontend/src/components/sidebar/sidebar.tsx - Updated dropdowns to use SearchableDropdown
  • frontend/src/components/dropdown.tsx - Added SearchableDropdown component
  • frontend/src/components/icons.tsx - Added Grid and List icons

claude[bot] avatar Jun 23 '25 18:06 claude[bot]